0.1.3-eggstage • Published 5 years ago
@telegramv/vr v0.1.3-eggstage
VR
Virtual DOM and Components with JSX support and Awesome DOM builder.
Installation
NPM:
npm install @telegramv/vr
Yarn:
yarn add @telegramv/vr
Example
JSX:
VRDOM.createElement
is by default JSX-compatible.import VRDOM from "@telegramv/vr/dom"; import {StatelessComponent, StatefulComponent} from "@telegramv/vr";
// Template const Button = ({onClick}, content) => { return {content}; }
// Component class Title extends StatelessComponent { render(props) { return {props.title}; } }
Title.defaultProps = {
title: "Click Increment
"
};
// Component class Counter extends StatefulComponent { state = { count: 0, };
render(state) {
return (
<div>
<Title title={state.count}/>
<Button onClick={() => this.setState({
count: this.state.count + 1
})}>Increment</Button>
</div>
);
}
}
const $element = VRDOM.render(); console.log($element);
No JSX (Awesome DOM):
```javascript
import VRDOM from "@telegramv/vr/dom";
import {h1, div, button, $c} from "@telegramv/vr/dom/elements";
import {StatelessComponent, StatefulComponent} from "@telegramv/vr";
// Template
const Button = ({onClick}, content) => {
return button({onClick: onClick}, content);
}
// Component
class Title extends StatelessComponent {
render(props) {
return h1(props.title);
}
}
Title.defaultProps = {
title: "Click `Increment`"
};
// Component
class Counter extends StatefulComponent {
state = {
count: 0,
};
render(state) {
return div(
$c(Title, {title: state.count}),
$c(Button, {onClick: () => this.setState({
count: this.state.count + 1
})}, 'Increment')
);
}
}
const $element = VRDOM.render($c(Counter));
console.log($element);
TypeScript:
import VRDOM from "@telegramv/vr/dom";
import {h1, $c} from "@telegramv/vr/dom/elements";
import {StatefulComponent} from "@telegramv/vr";
type TimeState = {
time: Date;
};
class Time extends StatefulComponent<TimeState> {
state = {
time: new Date()
};
render(state: TimeState, props: any) {
return h1(state.time.toString());
}
componentDidMount() {
this.withInterval(() => {
this.setState({
time: new Date()
});
}, 500);
}
}
VRDOM.mount($c(Time), "#app");
0.1.3-eggstage
5 years ago
0.1.2-eggstage
5 years ago
0.1.1-eggstage
5 years ago
0.1.0-eggstage
5 years ago