From c33c29d143ce71d7db332e298d0ee51fbdeabad3 Mon Sep 17 00:00:00 2001 From: "joseph.chang" Date: Fri, 9 Nov 2018 19:23:48 +0800 Subject: [PATCH 1/3] Add routes-creater --- lib/routes-creater/index.js | 80 +++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 lib/routes-creater/index.js diff --git a/lib/routes-creater/index.js b/lib/routes-creater/index.js new file mode 100644 index 0000000..4a338b0 --- /dev/null +++ b/lib/routes-creater/index.js @@ -0,0 +1,80 @@ +function isValidChild(object) { + return object == null || React.isValidElement(object); +} + +export function isReactChildren(object) { + return isValidChild(object) || (Array.isArray(object) && object.every(isValidChild)) +} + +function createRoute(defaultProps, props) { + return { ...defaultProps, + ...props + } +} + +export function createRouteFromReactElement(element) { + const type = element.type + const route = createRoute(type.defaultProps, element.props) + + if (route.children) { + const childRoutes = createRoutesFromReactChildren(route.children, route) + + if (childRoutes.length) + route.childRoutes = childRoutes + + delete route.children + } + + return route +} + +/** + * Creates and returns a routes object from the given ReactChildren. JSX + * provides a convenient way to visualize how routes in the hierarchy are + * nested. + * + * import { Route, createRoutesFromReactChildren } from 'react-router' + * + * const routes = createRoutesFromReactChildren( + * + * + * + * + * ) + * + * Note: This method is automatically used when you provide children + * to a component. + */ +export function createRoutesFromReactChildren(children, parentRoute) { + const routes = [] + + React.Children.forEach(children, function (element) { + if (React.isValidElement(element)) { + // Component classes may have a static create* method. + if (element.type.createRouteFromReactElement) { + const route = element.type.createRouteFromReactElement(element, parentRoute) + + if (route) + routes.push(route) + } else { + routes.push(createRouteFromReactElement(element)) + } + } + }) + + return routes +} + +/** + * Creates and returns an array of routes from the given object which + * may be a JSX route, a plain object route, or an array of either. + */ +export function createRoutes(routes) { + if (isReactChildren(routes)) { + routes = createRoutesFromReactChildren(routes) + } else if (routes && !Array.isArray(routes)) { + routes = [routes] + } + + return routes +} \ No newline at end of file From a12117a3dfa011276e32c15be7f6935b357a350a Mon Sep 17 00:00:00 2001 From: Joseph7451797 Date: Sun, 18 Nov 2018 00:24:24 +0800 Subject: [PATCH 2/3] Borrow function from old version react-router code base for internal use and now support v4 react-router. Update peerDependencies and api.md. --- api.md | 70 +++++++++++++++--------- lib/index.js | 3 +- lib/routes-creater/index.js | 92 +++++++------------------------- lib/routes-creater/routeUtils.js | 76 ++++++++++++++++++++++++++ lib/routes-parser/index.js | 5 +- package.json | 4 +- 6 files changed, 146 insertions(+), 104 deletions(-) create mode 100644 lib/routes-creater/routeUtils.js diff --git a/api.md b/api.md index 034c2d1..6c0bb4b 100644 --- a/api.md +++ b/api.md @@ -36,12 +36,12 @@ Filter paths using the specified rules. **Parameters** -- `filterConfig` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Filter configuration +- `filterConfig` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Filter configuration **Properties** -- `rules` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)>** List filter rules. -- `isValid` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Flag that defines a way to filter paths. +- `rules` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[RegExp](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)>** List filter rules. +- `isValid` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Flag that defines a way to filter paths. If `true`, the path satisfying the rules will be included. If `false`, the path satisfying the rules will be excluded. @@ -65,7 +65,7 @@ Replace the dynamic parameters in paths using the given values. **Parameters** -- `paramsConfig` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)>** Configuration for replacing params. +- `paramsConfig` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)>** Configuration for replacing params. **Examples** @@ -96,8 +96,8 @@ Convert array of paths to sitemap. **Parameters** -- `hostname` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The root name of your site. -- `$1` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`) +- `hostname` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The root name of your site. +- `$1` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`) - `$1.limitCountPaths` (optional, default `49999`) ## save @@ -106,8 +106,8 @@ Save sitemaps and sitemap index in files. **Parameters** -- `dist` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The path and file name where the sitemap index is saved. -- `publicPath` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)](default '/')** optional public path relative to hostname, default: '/' +- `dist` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The path and file name where the sitemap index is saved. +- `publicPath` **\[[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)](default '/')** optional public path relative to hostname, default: '/' # pathsSplitter @@ -115,8 +115,8 @@ Module for splitting paths array in multiple arrays for support of large project **Parameters** -- `paths` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)]** Initial paths array (flattened) (optional, default `[]`) -- `size` **\[[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]** (optional, default `49999`) +- `paths` **\[[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)]** Initial paths array (flattened) (optional, default `[]`) +- `size` **\[[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)]** (optional, default `49999`) **Examples** @@ -132,8 +132,8 @@ Module for applying params in dynamic paths. **Parameters** -- `paths` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>]** Array of paths -- `paramsConfig` **\[[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)>]** Configuration matching parameters and values +- `paths` **\[[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>]** Array of paths +- `paramsConfig` **\[[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)>]** Configuration matching parameters and values **Examples** @@ -167,7 +167,7 @@ const paths = applyParams(paths, config); // ['/path/a/1', '/path/b/2', '/path/b/3'] ``` -Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>** Array of paths +Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** Array of paths # pathsFilter @@ -175,9 +175,9 @@ Module for filtering an array of paths. **Parameters** -- `paths` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>]** Array of paths -- `rules` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)>]** Filter rules -- `isValidRules` **\[[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)]** Flag that defines a way to filter paths. +- `paths` **\[[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>]** Array of paths +- `rules` **\[[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[RegExp](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)>]** Filter rules +- `isValidRules` **\[[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)]** Flag that defines a way to filter paths. If `true`, the path satisfying the rules will be included. If `false`, the path satisfying the rules will be excluded. @@ -205,23 +205,43 @@ const paths = filterPaths(paths, rules, isValidRules); // ['/auth'] ``` -Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>** Array of paths. +Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** Array of paths. + +# createRoutes + +Creates and returns an array of routes from the given object which +may be a JSX route, a plain object route, or an array of either. + +**Parameters** + +- `routes` **Route** React Router configuration. + +**Examples** + +```javascript +import { routesCreater as createRoutes } from 'react-router-sitemap'; +import { routesParser as parseRoutes } from 'react-router-sitemap'; + +const routes = createRoutes(); +const paths = parseRoutes(routes); // ['/home'] +``` + +Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** # routesParser Module for parsing the result of the `createRoutes()` function. -from [react-router](https://www.npmjs.com/package/react-router) package. **Parameters** -- `routes` **\[([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object))]** Result of execute function +- `routes` **\[([Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))]** Result of execute function `createRoutes()` (optional, default `[]`) -- `basePath` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Prefix for all paths (optional, default `''`) +- `basePath` **\[[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)]** Prefix for all paths (optional, default `''`) **Examples** ```javascript -import { createRoutes } from 'react-router'; +import { routesCreater as createRoutes } from 'react-router-sitemap'; import { routesParser as parseRoutes } from 'react-router-sitemap'; const routes = createRoutes(); @@ -229,7 +249,7 @@ const paths = parseRoutes(routes); // ['/home'] ``` ```javascript -import { createRoutes } from 'react-router'; +import { routesCreater as createRoutes } from 'react-router-sitemap'; import { routesParser as parseRoutes } from 'react-router-sitemap'; const routes = createRoutes(); @@ -237,7 +257,7 @@ const prefix = '/prefix'; const paths = parseRoutes(routes, prefix); // ['/prefix/home'] ``` -Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>** Array of paths +Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** Array of paths # sitemapBuilder @@ -245,8 +265,8 @@ Module for building a sitemap using an array of paths. Uses the [sitemap](https: **Parameters** -- `hostname` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** The root name of your site -- `paths` **\[[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>]** Array of paths +- `hostname` **\[[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)]** The root name of your site +- `paths` **\[[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>]** Array of paths **Examples** diff --git a/lib/index.js b/lib/index.js index 4fbcfc6..4c45ec8 100644 --- a/lib/index.js +++ b/lib/index.js @@ -2,8 +2,8 @@ import fs from 'fs'; import path from 'path'; import sm from 'sitemap'; -import { createRoutes } from 'react-router'; +import createRoutes from './routes-creater'; import parseRoutes from './routes-parser'; import filterPaths from './paths-filter'; import applyParams from './params-applier'; @@ -158,6 +158,7 @@ class Sitemap { export default Sitemap; +export { default as routesCreater } from './routes-creater'; export { default as routesParser } from './routes-parser'; export { default as pathsFilter } from './paths-filter'; export { default as paramsApplier } from './params-applier'; diff --git a/lib/routes-creater/index.js b/lib/routes-creater/index.js index 4a338b0..8402020 100644 --- a/lib/routes-creater/index.js +++ b/lib/routes-creater/index.js @@ -1,80 +1,26 @@ -function isValidChild(object) { - return object == null || React.isValidElement(object); -} - -export function isReactChildren(object) { - return isValidChild(object) || (Array.isArray(object) && object.every(isValidChild)) -} - -function createRoute(defaultProps, props) { - return { ...defaultProps, - ...props - } -} - -export function createRouteFromReactElement(element) { - const type = element.type - const route = createRoute(type.defaultProps, element.props) - - if (route.children) { - const childRoutes = createRoutesFromReactChildren(route.children, route) - - if (childRoutes.length) - route.childRoutes = childRoutes - - delete route.children - } - - return route -} +import { isReactChildren, createRoutesFromReactChildren } from './routeUtils'; /** - * Creates and returns a routes object from the given ReactChildren. JSX - * provides a convenient way to visualize how routes in the hierarchy are - * nested. - * - * import { Route, createRoutesFromReactChildren } from 'react-router' + * @description Creates and returns an array of routes from the given object which + * may be a JSX route, a plain object route, or an array of either. + * @param {Route} routes - React Router configuration. + * @return {Array} * - * const routes = createRoutesFromReactChildren( - * - * - * - * - * ) + * @example + * import { routesCreater as createRoutes } from 'react-router-sitemap'; + * import { routesParser as parseRoutes } from 'react-router-sitemap'; * - * Note: This method is automatically used when you provide children - * to a component. + * const routes = createRoutes(); + * const paths = parseRoutes(routes); // ['/home'] */ -export function createRoutesFromReactChildren(children, parentRoute) { - const routes = [] - - React.Children.forEach(children, function (element) { - if (React.isValidElement(element)) { - // Component classes may have a static create* method. - if (element.type.createRouteFromReactElement) { - const route = element.type.createRouteFromReactElement(element, parentRoute) - - if (route) - routes.push(route) - } else { - routes.push(createRouteFromReactElement(element)) - } - } - }) - - return routes -} +const createRoutes = routes => { + if (isReactChildren(routes)) { + routes = createRoutesFromReactChildren(routes); + } else if (routes && !Array.isArray(routes)) { + routes = [routes]; + } -/** - * Creates and returns an array of routes from the given object which - * may be a JSX route, a plain object route, or an array of either. - */ -export function createRoutes(routes) { - if (isReactChildren(routes)) { - routes = createRoutesFromReactChildren(routes) - } else if (routes && !Array.isArray(routes)) { - routes = [routes] - } + return routes; +}; - return routes -} \ No newline at end of file +export default createRoutes; diff --git a/lib/routes-creater/routeUtils.js b/lib/routes-creater/routeUtils.js new file mode 100644 index 0000000..2550fce --- /dev/null +++ b/lib/routes-creater/routeUtils.js @@ -0,0 +1,76 @@ +import React from 'react'; + +/** + * @description Use React method to test if is a valid React Element. + * @param {Object} object - Which to test if is valid React Element. + * @return {Boolean} + * @ignore + */ +const isValidChild = object => { + return object === null || React.isValidElement(object); +}; + +/** + * @param {Object|array} + * @return {Boolean} + * @ignore + */ +const isReactChildren = object => { + return isValidChild(object) || (Array.isArray(object) && object.every(isValidChild)); +}; + +/** + * @description Creates and returns a routes object from the given ReactChildren. JSX + * provides a convenient way to visualize how routes in the hierarchy are + * nested. + * @param {ReactChildren} children - ReactChildren in JSX + * @return {Object} routes object + * @ignore + */ +const createRoutesFromReactChildren = children => { + const routes = []; + + /** + * @param {Object} element - ReactChild + * @return {Object} route object + * @ignore + */ + const createRouteFromReactElement = element => { + const type = element.type; + const route = Object.assign({}, type.defaultProps, element.props); + + if (route.children) { + const childRoutes = createRoutesFromReactChildren(route.children, route); + + if (childRoutes.length) { + route.childRoutes = childRoutes; + } + delete route.children; + } + + return route; + }; + + React.Children.forEach(children, function (element) { + if (React.isValidElement(element)) { + // Component classes may have a static create* method. + if (element.type.createRouteFromReactElement) { + const route = element.type.createRouteFromReactElement(element); + + if (route) { + routes.push(route); + } + } else { + routes.push(createRouteFromReactElement(element)); + } + } + }); + + return routes; +}; + +export { + isValidChild, + isReactChildren, + createRoutesFromReactChildren +}; diff --git a/lib/routes-parser/index.js b/lib/routes-parser/index.js index 687be41..3cbd5d4 100644 --- a/lib/routes-parser/index.js +++ b/lib/routes-parser/index.js @@ -2,7 +2,6 @@ import buildPath from './path-builder'; /** * Module for parsing the result of the `createRoutes()` function. - * from [react-router](https://www.npmjs.com/package/react-router) package. * @module routesParser * @param {Array|Object} [routes = []] Result of execute function * `createRoutes()` @@ -10,14 +9,14 @@ import buildPath from './path-builder'; * @return {Array} Array of paths * * @example - * import { createRoutes } from 'react-router'; + * import { routesCreater as createRoutes } from 'react-router-sitemap'; * import { routesParser as parseRoutes } from 'react-router-sitemap'; * * const routes = createRoutes(); * const paths = parseRoutes(routes); // ['/home'] * * @example - * import { createRoutes } from 'react-router'; + * import { routesCreater as createRoutes } from 'react-router-sitemap'; * import { routesParser as parseRoutes } from 'react-router-sitemap'; * * const routes = createRoutes(); diff --git a/package.json b/package.json index 7bc7742..fee2096 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "test": "karma start ./config/karma.config.js", "build": "npm run lint && npm run test && webpack --config ./config/build.config.js", "example": "cd example && node ./sitemap-builder.js", - "documentation": "documentation build ./lib ./lib/routes-parser ./lib/paths-filter ./lib/params-applier ./lib/sitemap-builder -f md > api.md", + "documentation": "documentation build ./lib ./lib/routes-creater ./lib/routes-parser ./lib/paths-filter ./lib/params-applier ./lib/sitemap-builder -f md > api.md", "prepublish": "npm run build" }, "author": "Igor Uvarov (http://kuflash.ru)", @@ -58,7 +58,7 @@ }, "peerDependencies": { "react": "^15.1.0 || ^16.0.0", - "react-router": "^2.3.0 || ^3.2.1" + "react-router": "^2.3.0 || ^3.2.1 || ^4.3.0" }, "dependencies": { "sitemap": "^1.6.0" From f717d4138ecd077125e94f48a28556605b2df616 Mon Sep 17 00:00:00 2001 From: "joseph.chang" Date: Fri, 14 Dec 2018 18:50:48 +0800 Subject: [PATCH 3/3] Add code example of v4 react-router in readme. --- readme.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/readme.md b/readme.md index bcc92fb..c3f3355 100644 --- a/readme.md +++ b/readme.md @@ -27,6 +27,23 @@ export default ( ); ``` +If you are using v4 `react-router`, your `router.jsx` might be: +```js +import React from 'react'; +import { Switch, Route } from 'react-router'; + +export default ( + // Switch is added in v4 react-router + + + + + + + // No-match case + +); +``` And you need to create a script which will run from the command line or on the server. _Please note that in this case you need a module 'babel-register' to work with the ES2105 syntax and `.jsx` format._