Nascent Plasticine Materialist

    @connectv/html
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.6 • Public • Published

    CONNECTIVE HTML

    License Minzipped Size Chat on Gitter

    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.



    Keywords

    none

    Install

    npm i @connectv/html

    DownloadsWeekly Downloads

    43

    Version

    0.2.6

    License

    MIT

    Unpacked Size

    602 kB

    Total Files

    497

    Last publish

    Collaborators

    • lorean.victor