Home Manual Reference Source Test

API

Template syntax

All global variables on window are available in WebCell Template expression, including Scoped variables shown below:

Name Class Reference
host HTMLElement Current component

(More details)

Life-cycle hook

All life-cycle hooks defined in Web components specification are available in WebCell, including Extension hooks shown below:

Signature Execution condition
slotChangedCallback(assigned: Node[], slot: HTMLSlotElement, name: ?String) Same as slotchange event
viewUpdateCallback(newData: Object, oldData: Object, view: View): Boolean Before current component rendered
viewChangedCallback(data: Object, view: View) After current component rendered

Router & Shared state

Create an App

More details

npm init web-cell path/to/your_project \
    --app \
    --remote https://git-example.com/your_id/repo_name.git

Create a Router component

More details

source/app-router/index.js

import { component } from 'web-cell';

import HTMLRouter, { load, back } from 'cell-router';

import App from '../scheme/App';    //  Small app may not need this


@component({ store: App })
export default  class AppRouter extends HTMLRouter {

    @load('/index')
    indexPage() {  return '<page-index />';  }

    @load('/secret/1')
    secretPage(id) {  return `<h1>Secret ${id}</h1>`;  }

    @back('/secret')
    keepSecret() {  return !!this.store.user;  }
}

Define a Shared state

More details

source/scheme/App.js

import Model, { mapGetter, is } from 'data-scheme';

import User from './User';


@mapGetter
export default  class App extends Model {

    @is( User )
    set user(value) {  this.set('user', value);  }
}

source/scheme/User.js

import Model, { mapGetter, is, Range, Email, Phone, URL } from 'data-scheme';


@mapGetter
export default  class User extends Model {

    @is(/^[\w-]{3,20}$/, '')
    set name(value) {  this.set('name', value);  }

    @is(Email, '')
    set email(value) {  this.set('email', value);  }

    @is( Phone )
    set phone(value) {  this.set('phone', value);  }

    @is([0, 1, 2],  2)
    set gender(value) {  this.set('gender', value);  }

    @is(Range( 1900 ))
    set birthYear(value) {  this.set('birthYear', value);  }

    @is(URL, 'http://example.com/test.jpg')
    set avatar(value) {  this.set('avatar', value);  }

    @is( URL )
    set URL(value) {  this.set('URL', value);  }

    @is( String )
    set description(value) {  this.set('description', value);  }
}

Node.JS like environment

WebCell can run in any Non-browser environment which supports CommonJS or ECMAScript module based on JSDOM.

Import

npm install web-cell jsdom node-fetch

Add these import before any Non-inset packages:

import 'regenerator-runtime/runtime';          //  Export `regeneratorRuntime` to `global`

import JSDOM from 'web-cell/source/polyfill';    //  Export `self` & some DOM API to `global`

import * as WebCell from 'web-cell';

Typical cases

  1. WebCell DevCLI uses DOM utility methods of WebCell

Integration

webpack configuration

You can use webpack instead of web-cell command.

npm install --save-dev \
    webpack webpack-cli \
    html-loader posthtml-loader \
    to-string-loader css-loader

webpack.config.js

const path = require('path');

module.exports = {
    entry: 'path/to/your-component/index.js',
    output: {
        filename: 'your-component.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    'html-loader',
                    {
                        loader: 'posthtml-loader',
                        options: {
                            ident: 'posthtml'
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'to-string-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

Import to other frameworks

your-component-wrapper.vue

<template>
    <your-component v-model="message"></your-component>
    <p>
        Text from Web component: {{message}}
    </p>
</template>

<script>
    import 'path/to/your-component';

    export default {
        data() {

            return  {message: 'Come from Vue!'};
        }
    }
</script>