Home Reference Source Test

Cell Router

Decorator-based Router component framework, powered by WebCell

NPM Dependency Build Status

NPM

Feature

Example

source/app-router/index.js

import { component } from 'web-cell';

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


@component()
export default class AppRouter extends HTMLRouter {

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

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

    @back('/secret')
    burnAfterRead() {  return false;  }
}

index.html

<!DocType HTML>
<html>
    <head>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CDocumentFragment.prototype.append%2CElement.prototype.append"></script>
        <script src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs"></script>
        <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/dom-renderer"></script>
        <script src="https://cdn.jsdelivr.net/npm/web-cell"></script>
        <script src="https://cdn.jsdelivr.net/npm/cell-router"></script>

        <script src="dist/app-router.js"></script>
    </head>
    <body>
        <a href="/index">Index</a>
        <a href="/secret">Secret</a>

        <app-router></app-router>
    </body>
</html>

package.json

{
    "directories": {
        "lib": "source/",
        "test": "."
    },
    "scripts": {
        "build": "web-cell pack",
        "dev": "web-cell preview"
    },
    "devDependencies": {
        "@babel/plugin-proposal-decorators": "^7.3.0",
        "@babel/preset-env": "^7.3.4",
        "web-cell-cli": "^0.9.1"
    },
    "babel": {
        "presets": [
            "@babel/preset-env"
        ],
        "plugins": [
            [
                "@babel/plugin-proposal-decorators",
                {
                    "decoratorsBeforeExport": true
                }
            ]
        ]
    }
}

API Document