Skip to content
the web framework to provide dom component
JavaScript CoffeeScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea/scopes remove unused folders and files Dec 5, 2018
bower_components
demo remove generated js Dec 22, 2018
dist
doc add english document Dec 23, 2018
scripts-coffee update document Dec 22, 2018
src
static some demo code for new design Dec 9, 2018
test
.babelrc get a new running config for webpack/dev-server at last Oct 23, 2018
.gitattributes a tempory commit Apr 21, 2018
.gitignore add dist/ to git Dec 22, 2018
LICENSE a tempory commit Apr 21, 2018
README.md
gulpfile.js
history.md
package-lock.json
package.json remove unused dependencies Dec 23, 2018
todo.md hide some exports in dc-util.coffee Dec 8, 2018

README.md

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>

or

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

LICENSE

MIT, see LICENSE

You can’t perform that action at this time.