{"analyzedAt":"2022-06-29T05:43:30.290Z","collected":{"metadata":{"name":"react-router-config-loader","scope":"unscoped","version":"0.1.0","description":"webpack loader transforms react router configuration defined in json/yaml file into react-router-config module","keywords":["react-router-config","webpack-loader","react-router","router"],"date":"2017-08-13T15:54:24.819Z","author":{"name":"Yang, Xuechen","email":"yangxc.gray@gmail.com","username":"grayyang"},"publisher":{"username":"grayyang","email":"yangxc.gray@gmail.com"},"maintainers":[{"username":"grayyang","email":"yangxc.gray@gmail.com"}],"repository":{"type":"git","url":"git+https://github.com/grayyang/react-router-config-loader.git"},"links":{"npm":"https://www.npmjs.com/package/react-router-config-loader","homepage":"https://github.com/grayyang/react-router-config-loader#readme","repository":"https://github.com/grayyang/react-router-config-loader","bugs":"https://github.com/grayyang/react-router-config-loader/issues"},"license":"MIT","dependencies":{"deepcopy":"^0.6.3","tosource":"^1.0.0"},"devDependencies":{"chai":"^4.1.1","chai-as-promised":"^7.1.1","coveralls":"^2.13.1","eslint":"^4.4.1","js-promisify":"^1.1.0","mocha":"^3.5.0","nyc":"^11.1.0","rimraf":"^2.6.1","webpack":"^3.5.4","yaml-loader":"^0.5.0"},"releases":[{"from":"2022-05-30T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":0},{"from":"2022-03-31T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":1},{"from":"2021-12-31T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":1},{"from":"2021-06-29T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":1},{"from":"2020-06-29T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":1}],"hasTestScript":true,"readme":"# react-router-config-loader\n[webpack](https://webpack.js.org/) loader transforms plain react router configuration object defined in json/yaml file into [react-router-config](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config) js module. \n\n[![npm version](https://badge.fury.io/js/react-router-config-loader.svg)](https://badge.fury.io/js/react-router-config-loader)\n[![Build Status](https://travis-ci.org/grayyang/react-router-config-loader.svg?branch=master)](https://travis-ci.org/grayyang/react-router-config-loader)\n[![Coverage Status](https://coveralls.io/repos/github/grayyang/react-router-config-loader/badge.svg?branch=master)](https://coveralls.io/github/grayyang/react-router-config-loader?branch=master)\n[![Greenkeeper badge](https://badges.greenkeeper.io/grayyang/react-router-config-loader.svg)](https://greenkeeper.io/)\n\n## Motivation\n[react-router-config](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config) provides one centralized routes configuration within react. However, the requirement to reference component classes directly in routes configuration limits its usage. \n\n[react-router-config-loader](https://www.npmjs.com/package/react-router-config-loader) provides the option to define plain react routes configuration object in json/yaml file, by tramsforming path of component class into class reference and module import with the help of [webpack](https://webpack.js.org/).\n\nBy removing direct reference to component classes and code transformation, it opens much more possibile usage of the routes configuration, including but no limited to:\n* Routes definition with no dependency, which can provides single source of truth of the routes to multiple modules, e.g. react SPA and express.js backend\n  * Ability to check validation of URL path in backend\n  * Ability to trace route of URL path in backend\n* Customization to route configuration object, which can adds additional features to react-router-config\n  * Support to use relative path in routes configuration\n  * Support inherit properties available in child routes automatically\n\n## Installation\nUse [npm](https://www.npmjs.com/) install to add devDependencies:\n```sh\n$ npm install --save-dev react-router-config-loader\n```\n\n## Usage\n[react-router-config-loader](https://www.npmjs.com/package/react-router-config-loader) supports loading react-router configuration defined in json, yaml, and js file. Below configuration samples correspond to the [sample](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config#route-configuration-shape) provided by [react-router-config](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config).\n\n### JSON\nInline usage of loader is given in below examples. For other ways, refer to webpack [documents](https://webpack.js.org/concepts/loaders/#using-loaders) for detail.  \n#### main.js\n```js\nimport routes from 'react-router-config-loader!./routes.json';\n```\n#### routes.json\n```json\n[\n  { \n    \"component\": \"./Root\",\n    \"routes\": [\n      { \n        \"path\": \"/\",\n        \"exact\": true,\n        \"component\": \"./Home\"\n      },\n      { \n        \"path\": \"/child/:id\",\n        \"component\": \"./Child\",\n        \"routes\": [\n          { \n            \"path\": \"/child/:id/grand-child\",\n            \"component\": \"./GrandChild\"\n          }\n        ]\n      }\n    ]\n  }\n]\n```\n\n### YAML\nChaining [yaml-loader](https://www.npmjs.com/package/yaml-loader) before [react-router-config-loader](https://www.npmjs.com/package/react-router-config-loader) to transform routes defined in yaml file.\n#### main.js\n```js\nimport routes from 'react-router-config-loader!yaml-loader!./routes.yaml';\n```\n#### routes.yaml\n```yaml\n- component: ./Root\n  routes:\n    - component: ./Home\n      path: /\n      exact: true\n    - component: ./Child\n      path: /child/:id\n      routes:\n        - component: ./GrandChild\n          path: /child/:id/grand-child\n```\n\n### JS\nRoutes configuration object can also be defined and exported from an js file (currently only using module.exports are supported).\n#### main.js\n```js\nimport routes from 'react-router-config-loader!./routes.js';\n```\n#### routes.js\n```js\nmodule.exports = [\n  { component: './Root',\n    routes: [\n      { path: '/',\n        exact: true,\n        component: './Home'\n      },\n      { path: '/child/:id',\n        component: './Child',\n        routes: [\n          { path: '/child/:id/grand-child',\n            component: './GrandChild'\n          }\n        ]\n      }\n    ]\n  }\n]\n```\n\n## Route Configuration\nBoth configuration fields defined in [react-router-config](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config), and additional fields including _componentName_, _inheritProps_ are supported.\n\n### component: string\nThe core difference between [react-router-config](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config) configuration and [react-router-config-loader](https://www.npmjs.com/package/react-router-config-loader) configuration is that, the `component` field is path from which to resolve the react component class instead of the component class.\n\n`component` supports relative path (and absolute path) to resolve local components, and module path to resolve components from node modules. By default, relative path will be resolved using the context path unless [`componentsDir`](#componentsdir-string) options is set.\n\nIf `componentName` field is not specified, the file name (without extention) is used as the name of the component.\n\n### componentName: string\nOnce specified, the value of `componentName` will be used as the import name of the component.\n\n### path: string\nAbsolute [path-to-regrex](https://www.npmjs.com/package/path-to-regexp) path used to match for the component if [`relativePath`](#relativepath-boolean) is not set. Otherwise, relative path should be used.\n\n### exact: boolean\nWhen `true`, will only match if the path matches the URL exactly. See https://reacttraining.com/react-router/core/api/Route/exact-bool\n\n### strict: bool\nWhen `true`, a path that has a trailing slash will only match a URL with a trailing slash. See https://reacttraining.com/react-router/core/api/Route/strict-bool.\n\n### inheritProps: object\nObject whose properties will be assigned to both the current route, and all its children. Which will be available through the `props.route`. For example,\n```json\n[\n  { \n    \"component\": \"./Root\",\n    \"routes\": [\n      { \n        \"path\": \"/\",\n        \"exact\": true,\n        \"component\": \"./Home\"\n      },\n      { \n        \"path\": \"/child/:id\",\n        \"component\": \"./Child\",\n        \"parentProp\": \"parentProp\",\n        \"inheritProps\": {\n          \"inheritProp\": \"inheritProp\"\n        },\n        \"routes\": [\n          { \n            \"path\": \"/child/:id/grand-child\",\n            \"component\": \"./GrandChild\",\n            \"selfProp\": \"selfProp\"\n          }\n        ]\n      }\n    ]\n  }\n]\n```\nwill get below `props.route` for `GrandChild` component:\n```js\n{\n  component: GrandChild,\n  path: '/child/:id/grand-child',\n  selfProp: 'selfProp',\n  inheritProp: 'inheritProp',\n}\n```\n\n### Other fields\nOther fields are free to add into route object, which is also available via `props.route` inside the component.\n\n## Loader Options\nSeveral options controls the behavior of the loader on how routes configuration object is transformed.\n\n### componentsDir: string\nOnce specified, this directory will be used as the context path with with `component` path are resolved.\n\n### relativePath: boolean\nOnce set to `true`, all `path` in route are treated as relative path to its parents. For example, below is the corresponding configuration when `relativePath` equals `true`.\n```json\n[\n  { \n    \"component\": \"./Root\",\n    \"routes\": [\n      { \n        \"path\": \"/\",\n        \"exact\": true,\n        \"component\": \"./Home\"\n      },\n      { \n        \"path\": \"/child/:id\",\n        \"component\": \"./Child\",\n        \"routes\": [\n          { \n            \"path\": \"grand-child\",\n            \"component\": \"./GrandChild\"\n          }\n        ]\n      }\n    ]\n  }\n]\n```"},"npm":{"downloads":[{"from":"2022-06-28T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":0},{"from":"2022-06-22T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":1},{"from":"2022-05-30T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":7},{"from":"2022-03-31T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":36},{"from":"2021-12-31T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":54},{"from":"2021-06-29T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":136}],"starsCount":1},"github":{"starsCount":3,"forksCount":2,"subscribersCount":2,"issues":{"count":13,"openCount":10,"distribution":{"3600":1,"10800":0,"32400":0,"97200":1,"291600":0,"874800":1,"2624400":0,"7873200":0,"23619600":0,"70858800":0,"212576400":10},"isDisabled":false},"contributors":[{"username":"grayyang","commitsCount":5},{"username":"greenkeeper[bot]","commitsCount":3}],"commits":[{"from":"2022-06-22T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":0},{"from":"2022-05-30T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":0},{"from":"2022-03-31T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":0},{"from":"2021-12-31T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":0},{"from":"2021-06-29T00:00:00.000Z","to":"2022-06-29T00:00:00.000Z","count":0}],"statuses":[{"context":"coverage/coveralls","state":"success"},{"context":"continuous-integration/travis-ci/push","state":"success"}]},"source":{"files":{"readmeSize":8132,"testsSize":14847,"hasNpmIgnore":true},"badges":[{"urls":{"original":"https://travis-ci.org/grayyang/react-router-config-loader.svg?branch=master","service":"https://api.travis-ci.org/grayyang/react-router-config-loader.svg?branch=master","shields":"https://img.shields.io/travis/grayyang/react-router-config-loader/master.svg","content":"https://img.shields.io/travis/grayyang/react-router-config-loader/master.json"},"info":{"service":"travis","type":"build","modifiers":{"branch":"master"}}},{"urls":{"original":"https://coveralls.io/repos/github/grayyang/react-router-config-loader/badge.svg?branch=master","service":"https://coveralls.io/repos/github/grayyang/react-router-config-loader/badge.svg?branch=master","shields":"https://img.shields.io/coveralls/grayyang/react-router-config-loader/master.svg","content":"https://img.shields.io/coveralls/grayyang/react-router-config-loader/master.json"},"info":{"service":"coveralls","type":"coverage","modifiers":{"branch":"master"}}}],"linters":["eslint"],"coverage":1,"outdatedDependencies":{"deepcopy":{"required":"^0.6.3","stable":"2.1.0","latest":"2.1.0"}}}},"evaluation":{"quality":{"carefulness":0.45999999999999996,"tests":1,"health":0.75,"branding":0.3},"popularity":{"communityInterest":10,"downloadsCount":12,"downloadsAcceleration":-0.05296803652968038,"dependentsCount":0},"maintenance":{"releasesFrequency":0.28664383561643836,"commitsFrequency":0,"openIssues":0.23076923076923073,"issuesDistribution":0}},"score":{"final":0.4357716124113351,"detail":{"quality":0.8935184077647176,"popularity":0.04165032690424131,"maintenance":0.4375385019012439}}}