Skip to content

Commit 2288f02

Browse files
grayyanggrayyang
committed
Update README
1 parent c09e894 commit 2288f02

File tree

5 files changed

+239
-10
lines changed

5 files changed

+239
-10
lines changed

‎.npmignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
.gitignore
2+
.travis.yml
3+
.eslintrc.yaml
24
.vscode
3-
test
5+
test

‎.travis.yml‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
language: node_js
22
node_js:
3-
- "node"
4-
- "6"
3+
- node
4+
- lts/*
55
script:
66
- npm run eslint
77
- npm run test
88
after_success:
9-
- npm run coverage
9+
- npm run coverage
10+
deploy:
11+
provider: npm
12+
email: yangxc.gray@gmail.com
13+
api_key:
14+
secure: 7Jsaz0kAURiXC7TupuauXk4pFkpjcMK4e0iPkXRJdKR/msMa2HalS9NI7hOMpZw+BhVddr8+w0qHmfUCUEgwZnbpOhrInr+pC8Bw+TrDlWfeQ2UEKl/+NjvWAubEekjJZ3mPX2ypeyC4KYJI+84PNBmstXgSbt0KHR/cHNbhOmiJjiAH2MyiSuuT6lscY34M4DC+YUtpwH/k9ea9DPc0DVJL6x6evmbUzu9+pMez2CGDikgG+xAExGJCynwaC4ma0uvWlmRSGQBwG77yy1P6VXLzPTwnrSag3T0DwHSwDS+HtkZJ33ZRzisEpxEcJsQkoHIbMjDSeZ3uwnYGAeFuJG1iCeQwtCTWptqBLUBcLQFybNWxMh8PaDJIW2WV2IEAbcjmJKwuPYiW63OMqdUuC33TeWZ4dsg9UUdRCCY2XfXsSAsPUkJM7oYS3ZpNrr847GQM2WmQqT9huthzJXB8I+4KAQ29cG3Fh/cqokeJhaH4JwRby/6bBLvSC79AevA2LhnrFmA+0rusTtCpELeZSftWkUvLlBQWxDm/52s4Ehce64szuQeVRyZdIZOOox5wpeds4Cnhf8TipFomZ2Uf+DHbBqTjiMVE1eYoTgR/ggZ7dlr6a9v9bRvBjy8fVdHQaJkfQ0OI5lB+ZZ/7TiqfPCll1qmronvBAkLOuJxs3xs=
15+
on:
16+
tags: true
17+
repo: grayyang/react-router-config-loader

‎README.md‎

Lines changed: 207 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,207 @@
1-
# react-router-config-loader
1+
# react-router-config-loader
2+
[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.
3+
4+
[![Build Status](https://travis-ci.org/grayyang/react-router-config-loader.svg?branch=master)](https://travis-ci.org/grayyang/react-router-config-loader)
5+
[![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)
6+
[![npm version](https://badge.fury.io/js/react-router-config-loader.svg)](https://badge.fury.io/js/react-router-config-loader)
7+
8+
## Motivation
9+
[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.
10+
11+
[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/).
12+
13+
By removing direct reference to component classes and code transformation, it opens much more possibile usage of the routes configuration, including but no limited to:
14+
* 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
15+
* Ability to check validation of URL path in backend
16+
* Ability to trace route of URL path in backend
17+
* Customization to route configuration object, which can adds additional features to react-router-config
18+
* Support to use relative path in routes configuration
19+
* Support inherit properties available in child routes automatically
20+
21+
## Installation
22+
Use [npm](https://www.npmjs.com/) install to add devDependencies:
23+
```sh
24+
$ npm install --save-dev react-router-config-loader
25+
```
26+
27+
## Usage
28+
[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).
29+
30+
### JSON
31+
Inline 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.
32+
#### main.js
33+
```js
34+
import routes from 'react-router-config-loader!./routes.json';
35+
```
36+
#### routes.json
37+
```json
38+
[
39+
{
40+
"component": "./Root",
41+
"routes": [
42+
{
43+
"path": "/",
44+
"exact": true,
45+
"component": "./Home"
46+
},
47+
{
48+
"path": "/child/:id",
49+
"component": "./Child",
50+
"routes": [
51+
{
52+
"path": "/child/:id/grand-child",
53+
"component": "./GrandChild"
54+
}
55+
]
56+
}
57+
]
58+
}
59+
]
60+
```
61+
62+
### YAML
63+
Chaining [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.
64+
#### main.js
65+
```js
66+
import routes from 'react-router-config-loader!yaml-loader!./routes.yaml';
67+
```
68+
#### routes.yaml
69+
```yaml
70+
- component: ./Root
71+
routes:
72+
- component: ./Home
73+
path: /
74+
exact: true
75+
- component: ./Child
76+
path: /child/:id
77+
routes:
78+
- component: ./GrandChild
79+
path: /child/:id/grand-child
80+
```
81+
82+
### JS
83+
Routes configuration object can also be defined and exported from an js file (currently only using module.exports are supported).
84+
#### main.js
85+
```js
86+
import routes from 'react-router-config-loader!./routes.js';
87+
```
88+
#### routes.js
89+
```js
90+
module.exports = [
91+
{ component: './Root',
92+
routes: [
93+
{ path: '/',
94+
exact: true,
95+
component: './Home'
96+
},
97+
{ path: '/child/:id',
98+
component: './Child',
99+
routes: [
100+
{ path: '/child/:id/grand-child',
101+
component: './GrandChild'
102+
}
103+
]
104+
}
105+
]
106+
}
107+
]
108+
```
109+
110+
## Route Configuration
111+
Both 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.
112+
113+
### component: string
114+
The 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.
115+
116+
`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) options is set.
117+
118+
If `componentName` field is not specified, the file name (without extention) is used as the name of the component.
119+
120+
### componentName: string
121+
Once specified, the value of `componentName` will be used as the import name of the component.
122+
123+
### path: string
124+
Absolute [path-to-regrex](https://www.npmjs.com/package/path-to-regexp) path used to match for the component if [`relativePath`](#relativePath) is not set. Otherwise, relative path should be used.
125+
126+
### exact: boolean
127+
When `true`, will only match if the path matches the URL exactly. See https://reacttraining.com/react-router/core/api/Route/exact-bool
128+
129+
### strict: bool
130+
When `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.
131+
132+
### inheritProps: object
133+
Object whose properties will be assigned to both the current route, and all its children. Which will be available through the `props.route`. For example,
134+
```json
135+
[
136+
{
137+
"component": "./Root",
138+
"routes": [
139+
{
140+
"path": "/",
141+
"exact": true,
142+
"component": "./Home"
143+
},
144+
{
145+
"path": "/child/:id",
146+
"component": "./Child",
147+
"parentProp": "parentProp",
148+
"inheritProps": {
149+
"inheritProp": "inheritProp"
150+
},
151+
"routes": [
152+
{
153+
"path": "/child/:id/grand-child",
154+
"component": "./GrandChild",
155+
"selfProp": "selfProp"
156+
}
157+
]
158+
}
159+
]
160+
}
161+
]
162+
```
163+
will get below `props.route` for `GrandChild` component:
164+
```js
165+
{
166+
component: GrandChild,
167+
path: '/child/:id/grand-child',
168+
selfProp: 'selfProp',
169+
inheritProp: 'inheritProp',
170+
}
171+
```
172+
173+
### Other fields
174+
Other fields are free to add into route object, which is also available via `props.route` inside the component.
175+
176+
## Loader Options
177+
Several options controls the behavior of the loader on how routes configuration object is transformed.
178+
179+
### componentsDir: string
180+
Once specified, this directory will be used as the context path with with `component` path are resolved.
181+
182+
### relativePath: boolean
183+
Once 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`.
184+
```json
185+
[
186+
{
187+
"component": "./Root",
188+
"routes": [
189+
{
190+
"path": "/",
191+
"exact": true,
192+
"component": "./Home"
193+
},
194+
{
195+
"path": "/child/:id",
196+
"component": "./Child",
197+
"routes": [
198+
{
199+
"path": "grand-child",
200+
"component": "./GrandChild"
201+
}
202+
]
203+
}
204+
]
205+
}
206+
]
207+
```

‎package.json‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
11
{
22
"name": "react-router-config-loader",
33
"version": "0.1.0",
4-
"description": "Webpack loader to load react-router-config",
4+
"description": "webpack loader transforms react router configuration defined in json/yaml file into react-router-config module",
55
"main": "index.js",
66
"scripts": {
77
"eslint": "eslint \"**/*.js\"",
88
"test": "nyc mocha",
99
"coverage": "nyc report --reporter=text-lcov | coveralls"
1010
},
1111
"author": {
12-
"name": "grayyang",
12+
"name": "Yang, Xuechen",
1313
"email": "yangxc.gray@gmail.com"
1414
},
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/grayyang/react-router-config-loader"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/grayyang/react-router-config-loader/issues"
21+
},
22+
"keywords": [
23+
"react-router-config",
24+
"webpack-loader",
25+
"react-router",
26+
"router"
27+
],
1528
"license": "MIT",
1629
"dependencies": {
1730
"deepcopy": "^0.6.3",

‎test/transformRoutes.spec.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,13 +85,13 @@ describe('Loader', () => {
8585
path: '/',
8686
routes: [
8787
{
88-
path: '/child',
88+
path: 'child',
8989
routes: [
9090
{
91-
path: '/:id',
91+
path: ':id',
9292
},
9393
{
94-
path: '/grandchild',
94+
path: 'grandchild',
9595
}
9696
],
9797
},

0 commit comments

Comments
 (0)