Merge pull request #4 from subuta/feature/add-more-example

Feature/add more example

Caddyfilep

@@ -0,0 +1,19 @@
+# serve from
+localhost:3000
+
+gzip
+browse
+ext .html
+#log / stdout "{method} {uri} {latency}"
+#log ./access.log
+
+rewrite {
+  regexp (^/$)
+  to /docs/index.html?{query}
+}
+
+# otherwise prepend public to request
+rewrite {
+  regexp (.*)
+  to /docs{path} {path} /docs/index.html?{query}
+}

README-ja.md

@@ -1,13 +1,16 @@
 # router-redux [![Build Status](https://travis-ci.org/subuta/router-redux.svg?branch=master)](https://travis-ci.org/subuta/router-redux) [![Coverage Status](https://coveralls.io/repos/github/subuta/router-redux/badge.svg?branch=master)](https://coveralls.io/github/subuta/router-redux?branch=master)
-View framework agnostic router for redux :)
-This is [react-router-redux](https://github.com/reactjs/react-router-redux) for your vdom-based project.
+View framework agnostic [react-router-redux](https://github.com/reactjs/react-router-redux) :)
 
-- `virtual-dom`系のライブラリを利用した開発フローを簡単にします。
-    - [virtual-dom](https://github.com/Matt-Esch/virtual-dom)と使ったり
-    - [snabbdom](https://github.com/paldepind/snabbdom)する想定です。
+- [Stateless component](https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.4ure2ot2k)を活用した開発フローを実現するライブラリです。以下のライブラリで動作確認済となります。
+  - ✅[React](https://github.com/facebook/react)
+  - ✅[vidom](https://github.com/dfilatov/vidom)
+  - ✅[snabbdom](https://github.com/paldepind/snabbdom)
+  - 他の`virtual-dom`系ライブラリでも、おそらく使えます(https://github.com/Matt-Esch/virtual-dom)
 - pushState/popStateを使ったクライアントサイドでのルーティングを実現します。
 - 軽量(5K以下)ですが、パワフルなRedux向けのrouterです。
 
+Demo: http://subuta.github.io/router-redux/
+
 ## Installation
 ```
 npm install router-redux --save
@@ -82,6 +85,12 @@ router.onLeave('/', (state) => {
 });
 ```
 
+詳細なサンプルは `example/components` 配下を見てみてください。
+- `/react` -> [React](https://github.com/facebook/react) と [JSX](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx) プラグインを使ったサンプルです。
+- `/vidom` -> [vidom](https://github.com/dfilatov/vidom) を使ったサンプルです。
+- `/snabbdom` -> [snabbdom](https://github.com/paldepind/snabbdom) を使ったサンプルです。
+- 他(`actions/reducers/store`)は共通のredux向けのファイルです。
+
 ## Documentation
 
 - 基本的なAPIのアイデアは [react-router-redux](https://github.com/reactjs/react-router-redux) を参考にしてます。thanks!

README.md

@@ -1,13 +1,16 @@
 # router-redux [![Build Status](https://travis-ci.org/subuta/router-redux.svg?branch=master)](https://travis-ci.org/subuta/router-redux) [![Coverage Status](https://coveralls.io/repos/github/subuta/router-redux/badge.svg?branch=master)](https://coveralls.io/github/subuta/router-redux?branch=master)
-View framework agnostic router for redux :)
-This is [react-router-redux](https://github.com/reactjs/react-router-redux) for your vdom-based project.
+View framework agnostic [react-router-redux](https://github.com/reactjs/react-router-redux) :)
 
-- Make your vdom-based development flow easy.
-  - With [virtual-dom](https://github.com/Matt-Esch/virtual-dom)
-  - Or [snabbdom](https://github.com/paldepind/snabbdom)
+- Make your [Stateless component](https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.4ure2ot2k) based development flow easy. work with these libraries.
+  - ✅[React](https://github.com/facebook/react)
+  - ✅[vidom](https://github.com/dfilatov/vidom)
+  - ✅[snabbdom](https://github.com/paldepind/snabbdom)
+  - Should also work with other vdom libraries(https://github.com/Matt-Esch/virtual-dom)
 - Adds pushState/popState based client-side routing to your project.
 - Light weight(around 5K) but yet powerful router for Redux.
 
+Demo: http://subuta.github.io/router-redux/
+
 [README - 日本語版](README-ja.md)
 
 ## Installation
@@ -84,6 +87,12 @@ router.onLeave('/', (state) => {
 });
 ```
 
+see `example/components` for full example.
+- `/react` -> example of [React](https://github.com/facebook/react) with [JSX](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx) plugin.
+- `/vidom` -> example of [vidom](https://github.com/dfilatov/vidom) plugin.
+- `/snabbdom` -> example of [snabbdom](https://github.com/paldepind/snabbdom)
+- other files are common redux files(`actions/reducers/store`)
+
 ## Documentation
 
 - API idea came from [react-router-redux](https://github.com/reactjs/react-router-redux) thanks!

docs/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>play-web-component</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+  <link rel="shortcut icon" href="favicon.ico">
+  <style>
+    body {
+      margin: 0
+    }
+  </style>
+</head>
+<body>
+<div id="app-container"></div>
+<script src="./bundled.js"></script>
+</body>
+</html>

example/app.js

@@ -1,52 +1,8 @@
-import snabbdom from 'snabbdom';
-import classModule from 'snabbdom/modules/class';
-import propsModule from 'snabbdom/modules/props';
-import attrsModule from 'snabbdom/modules/attributes';
-import styleModule from 'snabbdom/modules/style';
-import eventlistenersModule from 'snabbdom/modules/eventlisteners';
-import h from 'snabbdom/h';
+// Load react example.
+require('./components/react/app.js').default()
 
-import store, {inject} from './store.js'
+// Load snabbdom example.
+// require('./components/snabbdom/app.js').default()
 
-import Header from './components/Header.js';
-import Routes from './components/Routes/index.js';
-
-const patch = snabbdom.init([ // Init patch function with choosen modules
-  classModule, // makes it easy to toggle classes
-  propsModule, // for setting properties on DOM elements
-  attrsModule, // for setting attributes on DOM elements
-  styleModule, // handles styling on elements with support for animations
-  eventlistenersModule // attaches event listeners
-]);
-
-const render = inject(({state}) => {
-  return h('div#app-container',
-    {},
-    [
-      Header(),
-      Routes()
-    ]);
-});
-
-let container = document.querySelector('#app-container');
-
-// Patch into empty DOM element – this modifies the DOM as a side effect
-let tree = render(); // We need an initial tree
-patch(container, tree);
-
-// - with diff then patch(efficient way / with vdom)
-const update = () => {
-  var newTree = render();
-  patch(tree, newTree);
-  tree = newTree;
-};
-
-const unSubscribe = store.subscribe(update);
-
-export const _reload = () => {
-  update();
-};
-
-export const _unload = () => {
-  unSubscribe();
-};
+// Load vidom example.
+// require('./components/vidom/app.js').default()

example/components/react/Header.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import {
+  inject
+} from 'example/store.js'
+
+import {
+  push
+} from 'lib/index.js';
+
+export default inject(({dispatch}) => {
+
+  // call pushState instead of location change.
+  const pushOnClick = (path) => (e) => {
+    e.preventDefault();
+    dispatch(push(path))
+  };
+
+  const headerStyle = {
+    backgroundColor: '#dddddd'
+  };
+
+  const linkStyle = {
+    margin: '8px'
+  };
+
+  return (
+    <div id="header" style={headerStyle}>
+      <a href="/" style={linkStyle} onClick={pushOnClick('/')}>top</a>
+      <a href="/foo/1?sample=true" style={linkStyle} onClick={pushOnClick('/foo/1?sample=true')}>foo</a>
+      <a href="/bar" style={linkStyle} onClick={pushOnClick('/bar')}>bar</a>
+    </div>
+  );
+});

example/components/react/Routes/Bar.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default () => {
+  return <h1>bar</h1>;
+};

example/components/react/Routes/Error.js

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default ({error}) => {
+  console.log('in error page !');
+  return <h1>403 Forbidden. error = {error}</h1>
+};

example/components/react/Routes/Foo.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import {router} from 'example/store.js';
+
+router.onEnter('/foo/:id', ({state}) => {
+  console.log('[foo]entered', state);
+});
+
+router.onLeave('/foo/:id', ({state}) => {
+  console.log('[foo]leave', state);
+});
+
+export default () => {
+  return <h1>foo</h1>;
+};

example/components/react/Routes/NotFound.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default () => {
+  return <h1>404 Not found.</h1>;
+};

example/components/react/Routes/Top.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import {router} from 'example/store.js';
+
+import {
+  inject
+} from 'example/store.js'
+
+import {
+  push,
+  getIsInitalRouteResolved,
+  getRouteError
+} from 'lib/index.js';
+
+router.onError(({state, dispatch}) => {
+  const routeError = getRouteError(state);
+  console.log('routeError.message = ', routeError.message);
+  dispatch(push('/error'));
+});
+
+router.onEnter('/', ({state}, cb) => {
+  console.log('[top]loading ...', state);
+  setTimeout(() => {
+    console.log('[top]timer fired');
+    // cb(new Error('[top]thrown error'));
+    cb();
+  }, 1000);
+});
+
+router.onLeave('/', ({state}) => {
+  console.log('[top]leave');
+});
+
+export default inject(({state}) => {
+  const isInitialRouteResolved = getIsInitalRouteResolved(state);
+  if (!isInitialRouteResolved) {
+    return <h1>loading...</h1>;
+  }
+  return <h1>top</h1>;
+});

example/components/react/Routes/index.js

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import {
+  inject
+} from 'example/store.js'
+
+import {
+  getCurrent,
+  match
+} from 'lib/index.js';
+
+import Top from './Top.js';
+import Bar from './Bar.js';
+import Foo from './Foo.js';
+import NotFound from './NotFound.js';
+import Error from './Error.js';
+
+export default inject(({state}) => {
+  const currentPath = getCurrent(state) && getCurrent(state).path;
+  if (match('/error', currentPath)) {
+    return <Error error="some error occurred"/>;
+  } else if (match('/', currentPath)) {
+    return <Top/>;
+  } else if (match('/foo/:id', currentPath)) {
+    return <Foo/>;
+  } else if (match('/bar', currentPath)) {
+    return <Bar/>;
+  } else {
+    return <NotFound/>;
+  }
+});

example/components/react/app.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import store, {inject} from 'example/store.js'
+
+import Header from './Header.js';
+import Routes from './Routes/index.js';
+
+const render = inject(({state}) => {
+  return (
+    <div id="app-container">
+      <Header/>
+      <Routes/>
+    </div>
+  );
+});
+
+export default () => {
+  console.log('react example loaded');
+  // Patch into empty DOM element – this modifies the DOM as a side effect
+  // - with diff then patch(efficient way / with vdom)
+  const update = () => {
+    ReactDOM.render(
+      render(),
+      document.querySelector('#app-container')
+    )
+  };
+
+  if (document.readyState === 'complete' || document.readyState !== 'loading') {
+    update();
+  } else {
+    document.addEventListener('DOMContentLoaded', update);
+  }
+
+  store.subscribe(update);
+}

example/components/snabbdom/app.js

@@ -0,0 +1,50 @@
+import snabbdom from 'snabbdom';
+import classModule from 'snabbdom/modules/class';
+import propsModule from 'snabbdom/modules/props';
+import attrsModule from 'snabbdom/modules/attributes';
+import styleModule from 'snabbdom/modules/style';
+import eventlistenersModule from 'snabbdom/modules/eventlisteners';
+import h from 'snabbdom/h';
+
+import store, {inject} from 'example/store.js'
+
+import Header from './Header.js';
+import Routes from './Routes/index.js';
+
+const patch = snabbdom.init([ // Init patch function with choosen modules
+  classModule, // makes it easy to toggle classes
+  propsModule, // for setting properties on DOM elements
+  attrsModule, // for setting attributes on DOM elements
+  styleModule, // handles styling on elements with support for animations
+  eventlistenersModule // attaches event listeners
+]);
+
+const render = inject(({state}) => {
+  return h('div#app-container',
+    {},
+    [
+      Header(),
+      Routes()
+    ]);
+});
+
+export default () => {
+  console.log('snabbdom example loaded');
+  // Patch into empty DOM element – this modifies the DOM as a side effect
+  let tree = document.querySelector('#app-container'); // We need an initial tree
+
+  // - with diff then patch(efficient way / with vdom)
+  const update = () => {
+    var newTree = render();
+    patch(tree, newTree);
+    tree = newTree;
+  };
+
+  if (document.readyState === 'complete' || document.readyState !== 'loading') {
+    update();
+  } else {
+    document.addEventListener('DOMContentLoaded', update);
+  }
+
+  store.subscribe(update);
+}