Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaljach/htm0
Fast and elegant Web Components framework.
https://github.com/michaljach/htm0
jsx ui-components web-components
Last synced: about 2 months ago
JSON representation
Fast and elegant Web Components framework.
- Host: GitHub
- URL: https://github.com/michaljach/htm0
- Owner: michaljach
- Created: 2023-11-01T12:28:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-16T16:26:00.000Z (about 1 year ago)
- Last Synced: 2023-11-16T17:35:59.991Z (about 1 year ago)
- Topics: jsx, ui-components, web-components
- Language: TypeScript
- Homepage:
- Size: 75.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# htm0
Fast and elegant Web Components framwork
- super simple
- 0 dependency
- super small (2 KB)
- super fast (~47ms FCP)
- native web components
- jsx support
- vitual dom
- shared state
- local state
- events
## Install
```
npm i htm0
```
## Example Component
```
import { Component } from 'htm0';
class AppComponent extends Component {
render() {
return (
Hello World !
);
}
}
```
## Example Stateful Component
```
import { Component } from 'htm0';
class AppComponent extends Component {
state = {
username: 'Michael'
}
render() {
return (
{this.state.username}
);
}
}
```
## Example Shared State
```
import { Component, data } from 'htm0';
import { userData } from './userData'
@data(userData, 'user')
class AppComponent extends Component {
render() {
return (
{this.user.username}
);
}
}
```
```
import { Data } from "framework";
class UserData extends Data {
data = {
username: "Michael",
};
}
export const userData = new UserData();
```
## Example Event
```
import { Component } from 'htm0';
class AppComponent extends Component {
click() {
console.log('hi');
}
render() {
return (
click me
);
}
}
```