CONNECTIVE HTML is a simple Typescript library for creating reactive component-based HTML user interfaces.
It is simple as it enables using JSX syntax to work directly with browser's DOM API:
import { Renderer } from '@connectv/html';
const renderer = new Renderer();
renderer.render(<div>Hellow World!</div>).on(document.body);
It is reactive as it is by default integrated with reactive libraries RxJS and CONNECTIVE, and integrates easily with similar libraries:
import { Renderer } from '@connectv/html';
import { timer } from 'rxjs';
const renderer = new Renderer();
renderer.render(<div>You have been here for {timer(0, 1000)} second(s).</div>)
.on(document.body);
It is component based as it supports functional and class-based components:
import { Renderer } from '@connectv/html';
const MyComp = ({ name }, renderer) => <div>Hellow {name}!</div>
const renderer = new Renderer();
renderer.render(
<fragment>
<MyComp name='World'/>
<MyComp name='Fellas'/>
</fragment>
)
.on(document.body);
import { Renderer, Component } from '@connectv/html';
import { state } from '@connectv/core';
class MyComp extends Component {
count = state(0);
render(renderer) {
return <div onclick={() => this.count.value += 1}>
Hellow { this.props.name } ({this.count})
</div>
}
}
const renderer = new Renderer();
renderer.render(
<fragment>
<MyComp name='World'/>
<MyComp name='Fellas'/>
</fragment>
)
.on(document.body);
For giving CONNECTIVE HTML a quick try, you can simply fork this project on StackBlitz.
$ npx @connectv/create-html <project-name>
$ cd <project-name>
$ npm start
Running npx @connectv/create-html
without any parameters will create the new project inside the current directory, using its name as the project's name.
$ npm i @connectv/html
Configure your transpiler to use renderer.create
as its JSX factory. For example:
Add this to your tsconfig.json
file:
"compilerOptions": {
"jsx": "react",
"jsxFactory": "renderer.create"
}
For Babel (plugin-transform-react-jsx):
Add this to your Babel config:
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "renderer.create"
}]
]
}
WARNING: DO NOT USE THIS ON PRODUCTION. This project is at an early stage and requires further testing/benchmarking to ensure its security/efficiency for use on production. Additionally, at this stage all APIs are subject to change/removal without any prior notice.
The documentation (in-code and guides) are under construction. In the meanwhile, you can checkout these examples.
Checkout the contribution guide. Also checkout the code of conduct beforehand. Note that the project is still pretty young, so many standard contribution processes are not applicable yet. As the project progresses to more stable stages, these processes, alongside these documents, will be updated accordingly.