Lego-core NPM | npm.io

Component web front-end development framework

virtual-dom + ES6 + Router + Components + sass/less + babel

Install

You can install it via npm:

npm install -S lego-core

Instantiation

Create the application entry file /src/main.js

import jQuery from 'jquery';
import Lego from 'lego-core';
window.$ = window.jQuery = jQuery;
Lego.setting({
    alias: 'Lego', //Lego instance alias
    version: '20161202', //The version number of the release
    pageEl: '#container', //Page rendering container
    defaultApp: 'home', //The application launches module by default
    rootUri: '/example/dist/', //Root directory
})
Lego.startApp('index');  //Launch the main page application

Get the global parameters, E.g Lego.config.pageEl

View/Component

Create a file /src/home/view/home.js

import './asset/home.css';
class Home extends Lego.View {
    constructor(opts = {}) {
        const options = {
            events: {
                'click #button': 'theClick'
            }
        };
        super(options);
    }
    render() {
        return hx`
	  <button id="button">${this.options.data.buttonText}</button>
	    <item id="theId"></item>    //the component replace this tag and be rendered to here;
	    `;
    }
    theClick(event){
        console.log('You clicked this button');
    }
}
export default Home;

dataSource

Create a file /src/home/data/home.js

class HomeData extends Lego.Data {
    constructor(opts = {}) {
        const options = {
            'apiName_a': {
                url: './content.json',
		method: 'GET',
                body: {param: paramValue}
                // reset: true   //Whether to re-pull the remote data， yes is 'true'
            },
            'apiName_b': {
                url: './content.json'
            }
	    ...
        };
        Object.assign(options, opts);
        super(options);
    }
    //return format data
    parse(datas, apiName) {
        return datas[0].data;
    }
}
export default HomeData;

Router

Create a file /src/home/app.js , this is home module entrance

import homeView from './view/home';
import itemView from './view/item';
import homeData from './data/home';
Lego.components('item', itemView);   //Register component;
Lego.router({
    '/home' () {
        const viewObj = Lego.create(homeView, {
        	el: '#container', //There is no such attribute，the default is Lego.config.pageEl
            data: {  //Modifying the data property will trigger the view update
            	buttonText: 'click me'
            },
	    ... //You can customize the parameters too, use "viewObj.options[attributeName]" get the attribute
            components: [{
            	el: '#theId',
	            dataSource: {   //dynamic data
		    	  api: ['apiName_a', 'apiName_b'],   //Data dependencies, cacheable
			      server: homeData
		        },
	            components: []
            }]
        });
    }
});

#Build the project Terminal command

npm run build

Other resources

lego-ui.js

Many thanks to

License

This content is released under the MIT License.

lego legojs lego-core

core-decorators director events html5-history-api hyperx object.observe page virtual-dom

@everything-registry/sub-chunk-2056 @infinitebrahmanuniverse/nolb-leg lego-ant-ui @zalastax/nolb-leg

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago