react-fs-router 1.0.1 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.idea/git_toolbox_prj.xml +15 -0
- package/.idea/modules.xml +8 -0
- package/.idea/react-filesystem-router.iml +12 -0
- package/.idea/vcs.xml +6 -0
- package/README.md +13 -19
- package/genPath.js +10 -18
- package/index.js +1 -18
- package/lib/components/Routes.js +0 -0
- package/package.json +1 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="GitToolBoxProjectSettings">
|
|
4
|
+
<option name="commitMessageIssueKeyValidationOverride">
|
|
5
|
+
<BoolValueOverride>
|
|
6
|
+
<option name="enabled" value="true" />
|
|
7
|
+
</BoolValueOverride>
|
|
8
|
+
</option>
|
|
9
|
+
<option name="commitMessageValidationEnabledOverride">
|
|
10
|
+
<BoolValueOverride>
|
|
11
|
+
<option name="enabled" value="true" />
|
|
12
|
+
</BoolValueOverride>
|
|
13
|
+
</option>
|
|
14
|
+
</component>
|
|
15
|
+
</project>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="ProjectModuleManager">
|
|
4
|
+
<modules>
|
|
5
|
+
<module fileurl="file://$PROJECT_DIR$/.idea/react-filesystem-router.iml" filepath="$PROJECT_DIR$/.idea/react-filesystem-router.iml" />
|
|
6
|
+
</modules>
|
|
7
|
+
</component>
|
|
8
|
+
</project>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<module type="WEB_MODULE" version="4">
|
|
3
|
+
<component name="NewModuleRootManager">
|
|
4
|
+
<content url="file://$MODULE_DIR$">
|
|
5
|
+
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
|
6
|
+
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
|
7
|
+
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
|
8
|
+
</content>
|
|
9
|
+
<orderEntry type="inheritedJdk" />
|
|
10
|
+
<orderEntry type="sourceFolder" forTests="false" />
|
|
11
|
+
</component>
|
|
12
|
+
</module>
|
package/.idea/vcs.xml
ADDED
package/README.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# React-fs-router
|
|
2
2
|
|
|
3
|
-
A cli library
|
|
4
|
-
|
|
3
|
+
A cli library for implementing file-system based routing in React applications.
|
|
5
4
|
## Installation
|
|
6
5
|
|
|
7
6
|
Use yarn or npm to install react-fs-router
|
|
@@ -16,16 +15,16 @@ npm install react-fs-router
|
|
|
16
15
|
|
|
17
16
|
## Usage
|
|
18
17
|
|
|
19
|
-
The position of a file in the folder structure defines
|
|
18
|
+
The position of a file in the folder structure defines its path. Files named index are treated as the root file in each folder.
|
|
20
19
|
You can define a dynamic route by placing the name of the file in brackets. ie: [id].js ==> :id
|
|
21
20
|
|
|
22
|
-
| Arguments
|
|
23
|
-
|
|
24
|
-
| -i
|
|
25
|
-
| -o
|
|
26
|
-
| -ext
|
|
27
|
-
| -p
|
|
28
|
-
| -b
|
|
21
|
+
| Arguments | Result |
|
|
22
|
+
|-------------------------------| ------------------------------------------------------------------------------------------------------------- |
|
|
23
|
+
| -i --input <directory> | Path to watch for changes. Required. |
|
|
24
|
+
| -o --output <output> | Optional argument that takes a path to place output files in. Defaults to the input directory. |
|
|
25
|
+
| -ext --extention <extention> | Optional argument to change the file extension of the output files. Defaults to .js . |
|
|
26
|
+
| -p --pageProperties [type] | Optional boolean argument to disable generating page_properties file. Defaults to false. |
|
|
27
|
+
| -b --build [type] | Optional boolean argument that tells the program to run once. Defaults to false. Intended for build commands. |
|
|
29
28
|
|
|
30
29
|
```JSON
|
|
31
30
|
"scripts": {
|
|
@@ -45,7 +44,7 @@ Run react-fs-router
|
|
|
45
44
|
npm run rfr
|
|
46
45
|
```
|
|
47
46
|
|
|
48
|
-
The program will then generate two files one containing imports and exports of all the files inside the provided path and one containing an array of objects
|
|
47
|
+
The program will then generate two files one containing imports and exports of all the files inside the provided path and one containing an array of objects describing each file. The properties in the mentioned object are as follows:
|
|
49
48
|
|
|
50
49
|
```javascript
|
|
51
50
|
|
|
@@ -58,7 +57,7 @@ path: // The path of this file in relation to its position in the folder structu
|
|
|
58
57
|
|
|
59
58
|
```
|
|
60
59
|
|
|
61
|
-
Name, icon and index can be written in each file and react-fs-router will read and place them in the output file.
|
|
60
|
+
Name, icon and index can be written in each file as comments and react-fs-router will read and place them in the output file.
|
|
62
61
|
|
|
63
62
|
```javascript
|
|
64
63
|
// name: Home
|
|
@@ -70,11 +69,6 @@ To use the generated files with react-router:
|
|
|
70
69
|
|
|
71
70
|
```javascript xml react
|
|
72
71
|
function App() {
|
|
73
|
-
const [pages, setPages] = useState();
|
|
74
|
-
|
|
75
|
-
useEffect(() => {
|
|
76
|
-
setPages(renderConponents(Pages));
|
|
77
|
-
}, []);
|
|
78
72
|
|
|
79
73
|
function renderComponent(key, module) {
|
|
80
74
|
return module[key] || module["default"] || module;
|
|
@@ -98,7 +92,7 @@ function App() {
|
|
|
98
92
|
}
|
|
99
93
|
return renders;
|
|
100
94
|
}
|
|
101
|
-
return <Switch>{
|
|
95
|
+
return <Switch>{renderConponents(Pages)}</Switch>;
|
|
102
96
|
}
|
|
103
97
|
```
|
|
104
98
|
|
|
@@ -112,7 +106,7 @@ Place this component inside BrowserRouter
|
|
|
112
106
|
|
|
113
107
|
## Using with Ant Pro Layout
|
|
114
108
|
|
|
115
|
-
The
|
|
109
|
+
The properties file generated by this library can be easily used with Ant Designs pro layout component.
|
|
116
110
|
The following is an example using an hoc:
|
|
117
111
|
|
|
118
112
|
```javascript xml
|
package/genPath.js
CHANGED
|
@@ -4,13 +4,7 @@ const chokidar = require("chokidar");
|
|
|
4
4
|
|
|
5
5
|
let isNotThefirstTimeRunning = true;
|
|
6
6
|
|
|
7
|
-
const genPath = (
|
|
8
|
-
page_directory,
|
|
9
|
-
configs_directory,
|
|
10
|
-
runOnce,
|
|
11
|
-
file_extention,
|
|
12
|
-
dont_output_fileProperties
|
|
13
|
-
) => {
|
|
7
|
+
const genPath = (page_directory, configs_directory, runOnce) => {
|
|
14
8
|
//main function
|
|
15
9
|
const pathMaker = () => {
|
|
16
10
|
//parse parameters in path
|
|
@@ -156,20 +150,18 @@ const genPath = (
|
|
|
156
150
|
else return "." + ext;
|
|
157
151
|
} else return ".js";
|
|
158
152
|
};
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
(
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
(err)
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
);
|
|
168
|
-
}
|
|
153
|
+
fs.writeFileSync(
|
|
154
|
+
(configs_directory || page_directory) +
|
|
155
|
+
`/_page-properties${parseFileExtention(".js")}`,
|
|
156
|
+
prettier.format(_config, { semi: false, parser: "babel" }),
|
|
157
|
+
(err) => {
|
|
158
|
+
if (err) return console.error(err);
|
|
159
|
+
}
|
|
160
|
+
);
|
|
169
161
|
|
|
170
162
|
fs.writeFileSync(
|
|
171
163
|
(configs_directory || page_directory) +
|
|
172
|
-
`/_routes${parseFileExtention(
|
|
164
|
+
`/_routes${parseFileExtention(".js")}`,
|
|
173
165
|
prettier.format(_routes, { semi: false, parser: "babel" }),
|
|
174
166
|
(err) => {
|
|
175
167
|
if (err) return console.error(err);
|
package/index.js
CHANGED
|
@@ -10,27 +10,10 @@ program.storeOptionsAsProperties(name);
|
|
|
10
10
|
|
|
11
11
|
program.version(version, "-v --version", "Output the current version");
|
|
12
12
|
program.requiredOption("-i,--input <directory>", "Path to your pages folder");
|
|
13
|
-
program.option("-o,--output <output>", "Path to store generated files");
|
|
14
|
-
program.option(
|
|
15
|
-
"-ext,--extention <extention>",
|
|
16
|
-
"extention on the generated files"
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
program.option(
|
|
20
|
-
"-p,--pageProperties [type]",
|
|
21
|
-
"Boolean option to disable genrating page properties file"
|
|
22
|
-
);
|
|
23
13
|
program.option(
|
|
24
14
|
"-b,--build [type]",
|
|
25
15
|
"Boolean Option to run the program once. Intended to be used with build commands."
|
|
26
16
|
);
|
|
27
|
-
|
|
28
17
|
program.parse();
|
|
29
18
|
|
|
30
|
-
genPath(
|
|
31
|
-
program.input,
|
|
32
|
-
program.output,
|
|
33
|
-
program.build,
|
|
34
|
-
program.extention,
|
|
35
|
-
program.pageProperties
|
|
36
|
-
);
|
|
19
|
+
genPath(program.input, program.build);
|
|
File without changes
|