fix #14 prepare 0.11.0, move to new snazzy docs

cellog · May 3, 2017 · 412aa86 · 412aa86
1 parent f7a2f6e
commit 412aa86
Show file tree

Hide file tree

Showing 30 changed files with 1,310 additions and 1,293 deletions.
diff --git a/README.md b/README.md
diff --git a/docs/md/README.md b/docs/md/README.md
diff --git a/docs/my-markdown-loader/index.js b/docs/my-markdown-loader/index.js
@@ -0,0 +1,18 @@
+"use strict";
+
+const marked = require("marked");
+const loaderUtils = require("loader-utils");
+
+module.exports = function (markdown) {
+  // merge params and default config
+  const options = loaderUtils.parseQuery(this.query);
+
+  this.cacheable();
+
+  marked.setOptions(options);
+
+  const output = JSON.stringify(marked(markdown))
+  return `module.exports = ${output}`;
+};
+
+module.exports.seperable = true;
diff --git a/docs/my-markdown-loader/package.json b/docs/my-markdown-loader/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "marky-loader",
+  "version": "0.5.0",
+  "description": "configuration-less markdown loader for webpack",
+  "main": "index.js",
+  "author": "Gregory Beaver",
+  "license": "MIT"
+}
diff --git a/docs/package.json b/docs/package.json
@@ -6,7 +6,9 @@
   "dependencies": {
     "font-awesome": "^4.7.0",
     "history": "^4.6.1",
-    "ion-router": "^0.10.3",
+    "ion-router": "file:..",
+    "markdown-loader": "^2.0.0",
+    "marky-loader": "file:my-markdown-loader/",
     "prismjs-loader": "^0.0.4",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",

diff --git a/docs/public/ion-router.png b/docs/public/ion-router.png
diff --git a/docs/src/App.css b/docs/src/App.css
@@ -9,11 +9,18 @@
 
 .App-header {
   background-color: #222;
-  height: 150px;
+  height: 10vh;
+  min-height: 50px;
   padding: 20px;
   color: white;
 }
 
+.markdown-viewer {
+  padding: 20px;
+  height: 90vh;
+  overflow-y: scroll;
+}
+
 .App-intro {
   font-size: large;
   text-align: left;

diff --git a/docs/src/App.jsx b/docs/src/App.jsx
@@ -1,16 +1,26 @@
 import React, { Component } from 'react'
-import Routes from 'ion-router/Routes'
+import { getConnectedRoutes } from 'ion-router/Routes'
+import { connect } from 'react-redux'
 import Route from 'ion-router/Route'
-import Link from 'ion-router/Link'
+import { getConnectedLink } from 'ion-router/Link'
+import { connectToggle } from 'ion-router/Toggle'
 import Menu from 'react-burger-menu/lib/menus/scaleRotate'
 
 import './App.css'
 import Examples from './components/Examples'
-import Example from './components/Example'
+import MarkdownViewer from './components/MarkdownViewer'
 import ExamplesToggle from './toggles/ExamplesToggle'
 import * as actions from './redux/actions'
 import examples from './examples'
 
+import test from '!!marky!../md/README.md' // eslint-disable-line
+
+const Routes = getConnectedRoutes(connect, 'mainStore')
+const Link = getConnectedLink(connect, 'mainStore')
+connectToggle(connect)
+Routes.displayName = 'FancyRoutes'
+Link.displayName = 'FancyLink'
+
 class App extends Component {
   render() {
     return (
@@ -33,7 +43,7 @@ class App extends Component {
               <ExamplesToggle
                 component={Examples}
                 else={() => (
-                  <Example example="basic" />
+                  <MarkdownViewer text={test} />
                 )}
               />
             </div>

diff --git a/docs/src/components/Example.jsx b/docs/src/components/Example.jsx
@@ -1,20 +1,15 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import createHistory from 'history/createMemoryHistory'
-import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
-import { createProvider, connect } from 'react-redux-custom-store'
-import makeRouter, { makeRouterMiddleware } from 'ion-router'
+import { createStore, combineReducers, compose } from 'redux'
+import { connect, Provider } from 'react-redux'
+import makeRouter, { makeRouterStoreEnhancer } from 'ion-router'
 import routing from 'ion-router/reducer'
 
 import Browser from './Browser'
 import ShowSource from './ShowSource'
 import examples from '../examples'
 
-const Provider = createProvider('examples')
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? // eslint-disable-line
-  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ name: 'examples' }) // eslint-disable-line
-  : compose
-
 class Example extends Component {
   static propTypes = {
     example: PropTypes.string.isRequired
@@ -32,9 +27,13 @@ class Example extends Component {
 
 
     // set up the router and create the store
-    const routerMiddleware = makeRouterMiddleware(this.history)
+    const enhancer = makeRouterStoreEnhancer(this.history)
+
+    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? // eslint-disable-line
+      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ name: `examples: ${props.example}` }) // eslint-disable-line
+      : compose
     this.store = createStore(reducer, undefined,
-      composeEnhancers(applyMiddleware(routerMiddleware)))
+      composeEnhancers(enhancer))
     makeRouter(connect, this.store)
   }
 

diff --git a/docs/src/components/Examples.jsx b/docs/src/components/Examples.jsx
@@ -5,7 +5,7 @@ import thing from './Example'
 
 const Example = connect(state => ({
   example: state.examples.example
-}))(thing)
+}), undefined, undefined, { storeKey: 'mainStore' })(thing)
 
 export default function Examples() {
   return (

diff --git a/docs/src/components/MarkdownViewer.jsx b/docs/src/components/MarkdownViewer.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function Viewer({ text }) {
+  const danger = { __html: text }
+  return (
+    <div className="markdown-viewer">
+      <div dangerouslySetInnerHTML={danger} />
+    </div>
+  )
+}
+
+Viewer.propTypes = {
+  text: PropTypes.string.isRequired
+}
diff --git a/docs/src/index.js b/docs/src/index.js
@@ -1,14 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
-import { Provider, connect } from 'react-redux'
-import makeRouter, { makeRouterMiddleware } from 'ion-router'
+import { createStore, combineReducers, compose } from 'redux'
+import { createProvider } from 'react-redux-custom-store'
+import * as ion from 'ion-router'
 import routing from 'ion-router/reducer'
 import examples from './redux/example'
 
 import App from './App'
 import './index.css'
 
+const Provider = createProvider('mainStore')
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose // eslint-disable-line
 const reducer = combineReducers({
   routing,
@@ -17,14 +18,13 @@ const reducer = combineReducers({
 
 
 // set up the router and create the store
-const routerMiddleware = makeRouterMiddleware()
+const enhancer = ion.makeRouterStoreEnhancer()
 const store = createStore(reducer, undefined,
-  composeEnhancers(applyMiddleware(routerMiddleware)))
-makeRouter(connect, store)
+  composeEnhancers(enhancer))
 
 ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
-);
+)
diff --git a/docs/src/toggles/ExampleToggle.js b/docs/src/toggles/ExampleToggle.js
@@ -1,3 +1,3 @@
 import Toggle from 'ion-router/Toggle'
 
-export default Toggle(state => state.examples.example)
+export default Toggle(state => state.examples.example, undefined, {}, false, 'mainStore')
diff --git a/docs/src/toggles/ExamplesToggle.js b/docs/src/toggles/ExamplesToggle.js
@@ -1,3 +1,3 @@
 import RouteToggle from 'ion-router/RouteToggle'
 
-export default RouteToggle('examples')
+export default RouteToggle('examples', null, undefined, {}, false, 'mainStore')
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -2623,9 +2623,8 @@ invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
 
-ion-router@^0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/ion-router/-/ion-router-0.10.3.tgz#50bc8502d8dcac3e92f1a25f8089ae3ffb500ad6"
+"ion-router@file:..":
+  version "0.11.0"
   dependencies:
     history "^4.5.1"
     invariant "^2.2.2"
@@ -3220,7 +3219,7 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
-[email protected], loader-utils@^0.2.11, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
+[email protected]:
   version "0.2.14"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.14.tgz#3edab2a123ebb196a1c9d6dd3e83384958843e6f"
   dependencies:
@@ -3229,7 +3228,7 @@ [email protected], loader-utils@^0.2.11, loader-utils@^0.2.3, loader-utils@^0.
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-[email protected], loader-utils@^0.2.16:
+[email protected], loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   dependencies:
@@ -3366,6 +3365,13 @@ [email protected]:
   dependencies:
     tmpl "1.0.x"
 
+markdown-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-loader/-/markdown-loader-2.0.0.tgz#421862d38c4224fd3615eb648017ea385b562d78"
+  dependencies:
+    loader-utils "^0.2.16"
+    marked "^0.3.6"
+
 marked-terminal@^1.6.2:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/marked-terminal/-/marked-terminal-1.7.0.tgz#c8c460881c772c7604b64367007ee5f77f125904"
@@ -3380,6 +3386,9 @@ marked@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
 
+"marky-loader@file:my-markdown-loader/":
+  version "0.1.0"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"

diff --git a/package.json b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "ion-router",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "elegant powerful routing based on the simplicity of storing url as state",
   "main": "lib/index.js",
+  "homepage": "https://cellog.github.io/ion-router",
   "directories": {
     "test": "tests"
   },
@@ -23,7 +24,8 @@
     "react",
     "react-router",
     "route",
-    "router"
+    "router",
+    "routing"
   ],
   "author": "Gregory Beaver",
   "license": "MIT",

diff --git a/src/Link.jsx b/src/Link.jsx
@@ -98,12 +98,16 @@ export const Placeholder = () => {
     'initialize Link (see https://github.com/cellog/ion-router/issues/1)')
 }
 
+export function getConnectedLink(connect, storeKey = 'store') {
+  return connect(state => ({
+    '@@__routes': state.routing.routes
+  }), undefined, undefined, { storeKey })(Link)
+}
+
 let ConnectedLink = null
 
-export function connectLink(connect) {
-  ConnectedLink = connect(state => ({
-    '@@__routes': state.routing.routes
-  }))(Link)
+export function connectLink(connect, storeKey = 'store') {
+  ConnectedLink = getConnectedLink(connect, storeKey)
 }
 
 const ConnectLink = props => (ConnectedLink ? <ConnectedLink {...props} /> : <Placeholder />)

diff --git a/src/RouteToggle.jsx b/src/RouteToggle.jsx
@@ -2,8 +2,8 @@ import Toggle from './Toggle'
 import * as selectors from './selectors'
 
 export default function RouteToggle(route, othertests = null, loading = undefined,
-  componentMap = {}, debug = false) {
+  componentMap = {}, debug = false, storeKey = 'store') {
   return Toggle(state => (selectors.matchedRoute(state, route) &&
       (othertests ? othertests(state) : true)
-  ), loading, componentMap, debug)
+  ), loading, componentMap, debug, storeKey)
 }
diff --git a/src/Routes.jsx b/src/Routes.jsx
@@ -1,20 +1,23 @@
 import React, { Component, Children } from 'react'
 import PropTypes from 'prop-types'
 import * as actions from './actions'
-import { onServer } from '.'
 
-export class RawRoutes extends Component {
+export const RawRoutes = (storeKey = 'store') => class extends Component {
   static propTypes = {
     dispatch: PropTypes.func,
     children: PropTypes.any,
     '@@__routes': PropTypes.object,
   }
 
-  constructor(props) {
-    super(props)
+  static contextTypes = {
+    [storeKey]: PropTypes.object
+  }
+
+  constructor(props, context) {
+    super(props, context)
     this.addRoute = this.addRoute.bind(this)
     this.myRoutes = []
-    this.isServer = onServer()
+    this.isServer = this.context[storeKey].routerOptions.isServer
   }
 
   componentDidMount() {
@@ -48,10 +51,15 @@ export const Placeholder = () => {
     'initialize Routes (see https://github.com/cellog/ion-router/issues/1)')
 }
 
+export function getConnectedRoutes(connect, storeKey = 'store', Raw = RawRoutes(storeKey)) {
+  return connect(state => ({ '@@__routes': state.routing.routes.routes }),
+    undefined, undefined, { storeKey })(Raw)
+}
+
 let ConnectedRoutes = null
 
-export function connectRoutes(connect) {
-  ConnectedRoutes = connect(state => ({ '@@__routes': state.routing.routes.routes }))(RawRoutes)
+export function connectRoutes(connect, storeKey = 'store', Raw = RawRoutes(storeKey)) {
+  ConnectedRoutes = getConnectedRoutes(connect, storeKey, Raw)
 }
 
 const ConnectRoutes = props => (ConnectedRoutes ? <ConnectedRoutes {...props} /> : <Placeholder />)

diff --git a/src/Toggle.jsx b/src/Toggle.jsx
@@ -43,7 +43,7 @@ export const NullComponent = (Loading, Component, ElseComponent, debug, cons = c
   return Toggle
 }
 
-export default (isActive, loaded = () => true, componentLoadingMap = {}, debug = false) => {
+export default (isActive, loaded = () => true, componentLoadingMap = {}, debug = false, storeKey = 'store') => {
   const scaffold = (state, rProps) => {
     const loadedTest = !!loaded(state, rProps)
     return {
@@ -84,7 +84,7 @@ export default (isActive, loaded = () => true, componentLoadingMap = {}, debug =
       lastProps.else = ElseComponent
       lastProps.loadingComponent = Loading
       const Switcher = NullComponent(Loading, Component, ElseComponent, debug)
-      Toggle.HOC = connect(scaffold)(Switcher)
+      Toggle.HOC = connect(scaffold, undefined, undefined, { storeKey })(Switcher)
       const elseName = ElseComponent.displayName || ElseComponent.name || 'Component'
       const componentName = Component.displayName || Component.name || 'Component'
       const loadingName = Loading.displayName || Loading.name || 'Component'