Domcom NPM | npm.io

Domcom

the web framework to provide dom component

document

See doc/ for the document. Both English and Chinese document are provided.

中文文档: 请看 doc/Chinese/ 文件夹。

download and install

npm install --save domcom

useDomcom in page by script tag，add React andReactDom at first

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

and then add script tag for Domcom itself:

    <script src="path/to/domcom.js"></script> 
    <script src="path/to/domcom.min.js"></script>

or use the cdn provided by unpg or jsdelivr:

    https://unpkg.com/domcom/dist/domcom.js  
    https://unpkg.com/domcom/dist/domcom.min.js  
    https://cdn.jsdelivr.net/npm/domcom/dist/domcom.js  
    https://cdn.jsdelivr.net/npm/domcom/dist/domcom.min.js

Features

simple API:

  component = dc({data, view});
  component.mount(parentNode);
  component.update()

use plain array tree as view language, long live js, byebye JSX
MVC pattern( data/view/Component), byebye flux/redux
data is the model, Component is just the controller
render to dom by react( maybe add other proxy, e.g. Vue, in the future)

Samples

There is some samples, and a todoMVC implementation.

The code below give a taste of domcom:

  const data = { a: 1, b: 2 };
  const view = data => {
    let props1 = {
      value: data.a,
      onChange(event) {
         data.a = event.target.value*1
         comp.update()
      }
    };
    props2 = {
      value: data.b,
      onChange(event) {
        data.b = event.target.value*1
        comp.update();
     };
    };
    return ['div',
              ['text', props1],
              ['text', props2],
              ['p', data.a + data.b]
           ];
  };
  const comp = dc({data, view});
  comp.mount('#demo');