[ Refactor ] Rewrite whole Router based on Decorator pattern

EasyWebApp · Feb 27, 2019 · 97f77ba · 97f77ba
1 parent 15c8da3
commit 97f77ba
Show file tree

Hide file tree

Showing 25 changed files with 1,014 additions and 1,175 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -12,7 +12,7 @@ cache:
 install:
     - npm install
 script:
-    - npm run docs
+    - npm run build
     - cd ${FOLDER}
     - git init
     - git config user.name ${UID}

diff --git a/ReadMe.md b/ReadMe.md
@@ -1,6 +1,6 @@
 # Cell Router
 
-Router component based on [WebCell](https://web-cell.tk/)
+Decorator based Router component framework, powered by [WebCell](https://web-cell.tk/)
 
 [![NPM Dependency](https://david-dm.org/EasyWebApp/cell-router.svg)](https://david-dm.org/EasyWebApp/cell-router)
 [![Build Status](https://travis-ci.com/EasyWebApp/cell-router.svg?branch=master)](https://travis-ci.com/EasyWebApp/cell-router)
@@ -15,22 +15,103 @@ Router component based on [WebCell](https://web-cell.tk/)
  - [x] **Page link**
    - `<a href="route/path">Page title</a>`
    - `<a href="route/path" title="Page title" target="_self">Example page</a>`
- - [x] **Page container**: `<main />` with `pagechange` & `pagechanged` custom events
+
  - [x] **Path mode**: `location.hash` (default) & `history.pushState()`
+
+ - [x] **Page container**: Router component as a Page container
+
+ - [x] **Route match**: Decorator based Register pattern
+
+ - [ ] **Nested routers**
+
  - [x] **Page loader**: auto detect **UMD** & **ES module**
+
  - [x] **DOM cache**
- - [x] **Route handler**: Similar with [Express.js](https://expressjs.com/en/guide/routing.html)
 
 
 
-## Usage
+## Example
+
+[`source/app-router/index.js`](https://github.com/EasyWebApp/cell-router/blob/master/test/source/app-router/index.js)
+
+```JavaScript
+import { component } from 'web-cell';
 
-First
-```Shell
-npm install cell-router
+import HTMLRouter, { load, back } from 'cell-router';
+
+
+@component()
+export default class AppRouter extends HTMLRouter {
+
+    @load('/index')
+    indexPage() {  return '<page-index />';  }
+
+    @load('/secret')
+    secretPage() {  return '<h1>Secret</h1>';  }
+
+    @back('/secret')
+    burnAfterRead() {  return false;  }
+}
+```
+
+`index.html`
+
+```HTML
+<!DocType HTML>
+<html>
+    <head>
+        <script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.append,DocumentFragment.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>
 ```
-then write your **SPA index page** follow [the example](https://github.com/EasyWebApp/cell-router/tree/master/test)
 
+`package.json`
+
+```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