A minimalistic web component framework
Using native browser features to maximum performance with a few exceptions
### Features
- Web components as first class citizens
- Templating with JSX
- Reactive rendering with signals
- Pass `objects` to custom element attributes
- No virtual DOM
### Installation
```bash
yarn add @vanille/core
```
### Prerequisites
#### `vite.config.ts`
Using `vite`, please specify the `esbuild` options:
```js
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
}
```
#### `tsconfig.json`
To use `decorators`, enable `experimentalDecorators`:
```json
"experimentalDecorators": true
```
### No dependencies
All features are in-house implementations to maximize native functionality, with a few exceptions (check out below!)
### Extending web components for native performance
```ts
import { View } from '@vanille/core';
export class App extends View {}
```
### Fast templating web components with in-house JSX
```ts
export class App extends View {
render() {
return (
JSX!
);
}
}
```
### Signals
```ts
export class App extends View {
render() {
const name = state('your name');
const computedName = computed(() => name.get());
return (
{name}
{computedName}
);
}
}
```
### Simple routing
```jsx
Home
Dashboard
User with id
```
### Pass objects in web component attributes
```ts
const user = { name: 'vanille' };
;
export class App extends View {
render() {
return (
{this.props.user.name}
)
}
}
```
### Query the DOM with `refs` to update elements
```ts
export class App extends View {
setBindings() {
this.refs.name.textContent = newValue;
}
render() {
return (
JSX!
);
}
}
```
### Declarative testing with JSX
```tsx
import { mount } from './test-utils';
// load the component
import './test-utils/Test';
test('can render from jsx', () => {
const $shadow = mount() <---- JSX!
const $el = $shadow.querySelector('[data-id="test"');
expect($el).toBeTruthy();
});
```