https://github.com/acryps/vldom
simple component system
https://github.com/acryps/vldom
Last synced: 6 days ago
JSON representation
simple component system
- Host: GitHub
- URL: https://github.com/acryps/vldom
- Owner: acryps
- Created: 2021-03-25T20:30:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-09T13:35:55.000Z (almost 3 years ago)
- Last Synced: 2025-01-08T10:14:38.730Z (over 1 year ago)
- Language: TypeScript
- Size: 104 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](http://badge.acryps.com/go/npm/vldom)
# vldom TypeScript Frontend Component System
Simple component system with integrated routing.
> version 9: new engine, even more efficient
## Setup
You"ll need to enable jsx in your tsconfig
{
"compileOnSave": false,
"compilerOptions": {
"jsx": "react",
"jsxFactory": "this.createElement",
....
}
}
Compile your client with `tsc` and `vldom compile`!
```
tsc && vldom compile
```
## Usage
Create a component by extending the component class
```
export class ExampleComponent extends Component {
constructor() {
super();
}
render() {
return
Example Component!
;
}
}
new ExampleComponent().host(document.body);
```
Let"s extends this by creating a recursive component
```
export class ExampleRecursiveComponent extends Component {
constructor(private index: number) {
super();
}
render() {
return
Component {this.index}
{index > 0 && new ExampleRecursiveComponent(index - 1)}
;
}
}
new ExampleRecursiveComponent(10).host(document.body);
```
## Router
vldom has a built-in router
```
const router = new Router(PageComponent
.route("/home", HomeComponent),
.route("/books", BooksComponent
.route("/:id", BookComponent)
)
);
class PageComponent extends Component {
render(child) {
return
App
{child}
;
}
}
class HomeComponent extends Component {
render() {
return
Welcome to my Book Store
;
}
}
class BooksComponent extends Component {
render() {
return
Books!
Some Book!
;
}
}
class BookComponent extends Component {
params: { id: string }
render() {
return
Book with id {this.params.id}
;
}
}
router.host(document.body);
onhashchange = () => router.update();
```
## Directives
You can create custom directives (attribute handlers).
```
Component.directives["epic-link"] = (element, value, tag, attributes, content) => {
element.onclick = () => {
location.href = value;
}
}
export class ExampleComponent extends Component {
constructor() {
super();
}
render() {
return
Test Link
;
}
}
new ExampleComponent().host(document.body);
```