Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dannyyassine/vanille
A minimalistic vanilla web component framework
https://github.com/dannyyassine/vanille
component components jsx observable typescript vanilla web-components webcomponent
Last synced: 23 days ago
JSON representation
A minimalistic vanilla web component framework
- Host: GitHub
- URL: https://github.com/dannyyassine/vanille
- Owner: dannyYassine
- License: mit
- Created: 2023-08-23T23:58:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-08T11:20:51.000Z (8 months ago)
- Last Synced: 2024-10-14T02:02:35.336Z (23 days ago)
- Topics: component, components, jsx, observable, typescript, vanilla, web-components, webcomponent
- Language: SCSS
- Homepage: https://dannyyassine.github.io/vanille/
- Size: 27.4 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A minimalistic vanilla web component framework
Using native browser features to maximum performance with a few exceptions
### Features:
- Templating with JSX
- Pass `objects` to custom element attributes
- Observable `props` and `state`
### 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 { BaseView } from '@vanille/core';
export class App extends BaseView {}
```
### Fast templating web components with in-house JSX
```ts
export class App extends BaseView {
render() {
return (
JSX!
);
}
}
```
### Simple routing
```jsx
Home
Dashboard
User with id
```
### Observables
```ts
const object = observable({
user: {
email: '',
contact: {
firstName: ''
}
}
});
object.user.$on('email', (newValue, oldValue, user) => {
console.log(newValue, oldValue, user);
});
object.user.contact.$on('firstName', (newValue, oldValue, user) => {
console.log(newValue, oldValue, user);
});
user.email = '[email protected]';
// log: '[email protected]' '' { email: '', contact: { firstName: '' } }
user.contact.firstName = 'vanille';
// log: 'vanille' '' { contact: { firstName: '' } }
```
### Pass objects in web component attributes
```ts
const user = { name: 'vanille' };
;
export class App extends BaseView {
render() {
return (
{this.props.user.name}
)
}
}
```
### Web component attributes become observable props
```ts
const user: User = { name: 'vanille' };
;
export class App extends BaseView {
setBindings() {
this.props.$on('user', (newValue: User) => {
// user changed
});
this.props.user.$on('name', (newValue: string) => {
// name changed
});
}
}
```
### Private state as observables
```ts
export class App extends BaseView {
data() {
return {
name: 'vanille'
};
}
setBindings() {
this.state.$on('name', (newValue) => {
// name changed
});
}
}
```
### Query the DOM with `refs` to update elements
```ts
export class App extends BaseView {
setBindings() {
this.props.$on('name', (newValue: string) => {
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();
});
```