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);

► TRY IT!

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);

► TRY IT!

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);

► TRY IT!

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);

► TRY IT!

How to Install

For giving CONNECTIVE HTML a quick try, you can simply fork this project on StackBlitz.

New Project

$ 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.

Add to Existing Project

$ npm i @connectv/html

Configure your transpiler to use renderer.create as its JSX factory. For example:

For Typescript:

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"
    }]
  ]
}

How to Use

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.

How to Contribute

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.