react-fs-router 0.2.20 → 1.0.11

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-filesystem-router.iml" filepath="$PROJECT_DIR$/.idea/react-filesystem-router.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/react-filesystem-router.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/README.md

@@ -1,6 +1,6 @@
 # React-fs-router
 
-React-fs-router is a simple library that watches a user-provided route for changes in files and folders and generates two files in a user-provided route to be used with react-router.
+A cli library that watches a user-provided path for changes in files and folders and genarates two files to implement file-system based routing.
 
 ## Installation
 
@@ -16,45 +16,49 @@ npm install react-fs-router
 
 ## Usage
 
-The name of each file will be used as its path. The path for index files is "/". Each folder is treated as a route and each file inside a folder is treated as a subroute of its parent folder.
+The position of a file in the folder structure defines it's path. Files named index are treated as the root and default file in each folder.
+You can define a dynamic route by placing the name of the file in brackets. ie: [id].js ==> :id
 
-As of yet, react-fs-router runs via a command that must be added to the script section of your package.json file.
-The path to pages folder and the path for the output files must be passes via arguments as -p for input folder to watch and -c for the output files:
+| Arguments                       | Result                                                                                                        |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| -i \| --input <directory>       | Path to watch for changes. Required.                                                                          |
+| -o \| --output <output>         | Optional argument that takes a path to place output files in. Defaults to the input directory.                |
+| -ext \| --extention <extention> | Optional argument to change the file extension of the output files. Defaults to .js .                         |
+| -p \| --pageProperties [type]   | Optional boolean argument to disable generating page_properties file. Defaults to false.                      |
+| -b \| --build [type]            | Optional boolean argument that tells the program to run once. Defaults to false. Intended for build commands. |
 
 ```JSON
   "scripts": {
-     "rfr": "rfr -p <path to pages folder> -c <path to place output files>"
+     "rfr": "rfr -d <path to pages folder>"
   }
 ```
 
--b can be passed to tell the program to run only once. Intended to be used with the build script.
-
 Run the development server
 
 ```bash
 npm run start
 ```
 
-Then run react-fs-router
+Run react-fs-router
 
 ```bash
 npm run rfr
 ```
 
-The program will then generate two files one containing imports and re-exports of all the files inside the provided input path and one containing an array of objects per each file. The properties in the mentioned object are as follows:
+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 per each file. The properties in the mentioned object are as follows:
 
 ```javascript
 
-component:// Name of the default export of the file
+component: // Name of the default export of the file
 name: // Name of the component mentioned in the file as // name: string
 icon: // Name of the icon mentioned in the file as // icon: string
 index: // A number by which the objects in this array are sorted by. mentioned in the file as // index: number
 file: // The name of the file this object is for
 path: // The path of this file in relation to its position in the folder structure. index files are always "/"
-}=
+
 ```
 
-Name, icon and index can be written in each file and react-fs-router will read and place them in the output file.
+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.
 
 ```javascript
 // name: Home
@@ -65,13 +69,6 @@ Name, icon and index can be written in each file and react-fs-router will read a
 To use the generated files with react-router:
 
 ```javascript xml react
-// importing all of the files from the imports-exports file
-import * as Pages from "src/config/route";
-// importing the route objects
-import { routes } from "src/config/routeConfigs";
-
-import { Route, Switch } from "react-router-dom";
-
 function App() {
   const [pages, setPages] = useState();
 
@@ -119,11 +116,6 @@ The routes array generated by this library can be easily used with Ant designs p
 The following is an example using an hoc:
 
 ```javascript xml
-import { routes } from "../../config/routeConfigs";
-import * as Icons from "@ant-design/icons";
-import { Row } from "antd";
-import ProLayout, { PageContainer } from "@ant-design/pro-layout";
-import { Link } from "react-router-dom";
 function Layout(Component) {
   return class extends React.Component {
     state = {
@@ -167,11 +159,22 @@ function Layout(Component) {
 }
 ```
 
+## Usage with Concurrently
+
+You can use [concurrently](https://www.npmjs.com/package/concurrently) to run rfr with react at the same time.
+
+```bash
+npm install -g concurrently
+```
+
+```bash
+concurrently --kill-others "npm run start" "npm run rfr"
+```
+
 ## Caveats
 
 1. Since all of the files are imported and re-exported, having two files with the same name as default export will cause an error.
-2. Running this package with the start command is not recommended as it interferes with the react script.
-3. This library is a work in progress and is consistantly being improved. Feel free to open issues in the github repo.
+2. Running this package along with the react start script is not recommended as it interferes with the react script. Consider using a package like concurrently for this purpose.
 
 ## License
 

package/genPath.js

@@ -5,11 +5,40 @@ const chokidar = require("chokidar");
 let isNotThefirstTimeRunning = true;
 
 const genPath = (page_directory, configs_directory, runOnce) => {
+  //main function
   const pathMaker = () => {
+    //parse parameters in path
+    const parsePageName = (fileName) => {
+      const isParam = fileName.includes("[") && fileName.includes("]");
+
+      const splitFileName = fileName.split("/");
+      if (splitFileName.length && isParam) {
+        const paramName = splitFileName[splitFileName.length - 1];
+        const paramNameWithoutExtention = paramName.split(".")[0];
+        const paramNameWithoutBraces = paramNameWithoutExtention
+          .replace("[", "")
+          .replace("]", "");
+        splitFileName[splitFileName.length - 1] = `:${paramNameWithoutBraces}`;
+        return splitFileName.join("/");
+      } else if (fileName === "index" && !isParam) return "";
+      else return fileName;
+    };
+
+    const parseFilePath = (filePath) => {
+      if (filePath.includes(":")) {
+        const splitPath = filePath.split("/");
+        const lastItemInPath = splitPath[splitPath.length - 1].replace(":", "");
+        splitPath[splitPath.length - 1] = `[${lastItemInPath}]`;
+        return splitPath.join("/");
+      } else return filePath;
+    };
+
+    //read page directory
     const readDirectory = (directory, includeDirectory) => {
       const pages = {};
       const read = fs.readdirSync(directory);
-      read.forEach((page) => {
+      const readFiltered = read.filter((file) => !file.startsWith("_"));
+      readFiltered.forEach((page) => {
         const name = page.split(".")[0];
         if (page.includes(".")) {
           pages[page.replace(".", "_")] = `${
@@ -21,6 +50,7 @@ const genPath = (page_directory, configs_directory, runOnce) => {
       });
       return pages;
     };
+
     const pages = readDirectory(page_directory);
 
     const readFileProperties = (filepath) => {
@@ -77,8 +107,9 @@ const genPath = (page_directory, configs_directory, runOnce) => {
       if (name) route.name = name;
       if (icon) route.icon = icon;
       if (index) route.index = index;
-      if (filepath) route.path = filepath;
+      if (filepath) route.path = parsePageName(filepath);
       if (filename) route.file = filename.replace("_", ".");
+
       return route;
     };
 
@@ -106,15 +137,22 @@ const genPath = (page_directory, configs_directory, runOnce) => {
         node?.component
           ? `import ${node.component} from "${
               process.env.PWD + page_directory.replace(".", "")
-            }${node.path === "/" ? "" : node.path}";`
+            }${node.path === "/" ? "" : parseFilePath(node.path)}";`
           : ""
       )
       .join("")} \n \n export{${routes
       .map((node) => (node?.component ? `${node.component},` : ""))
       .join("")}};`;
 
+    const parseFileExtention = (ext) => {
+      if (ext) {
+        if (ext.includes(".")) return ext;
+        else return "." + ext;
+      } else return ".js";
+    };
     fs.writeFileSync(
-      configs_directory + "/routeConfigs.js",
+      (configs_directory || page_directory) +
+        `/_page-properties${parseFileExtention(".js")}`,
       prettier.format(_config, { semi: false, parser: "babel" }),
       (err) => {
         if (err) return console.error(err);
@@ -122,7 +160,8 @@ const genPath = (page_directory, configs_directory, runOnce) => {
     );
 
     fs.writeFileSync(
-      configs_directory + "/route.js",
+      (configs_directory || page_directory) +
+        `/_routes${parseFileExtention(".js")}`,
       prettier.format(_routes, { semi: false, parser: "babel" }),
       (err) => {
         if (err) return console.error(err);
@@ -134,40 +173,40 @@ const genPath = (page_directory, configs_directory, runOnce) => {
     pathMaker();
     isNotThefirstTimeRunning = false;
   }
+
   const watcher = chokidar.watch(page_directory, {
-    ignored: /^\./,
-    persistent: true,
+    ignored: /^\.|\_/,
+    persistent: !runOnce,
   });
-  if (!runOnce) {
-    watcher
-      .on("add", function (path) {
-        try {
-          pathMaker();
-        } catch (e) {
-          console.log(e);
-        }
-        console.log("File", path, "has been added");
-      })
-      .on("change", function (path) {
-        try {
-          pathMaker();
-        } catch (e) {
-          console.log(e);
-        }
-        console.log("File", path, "has been changed");
-      })
-      .on("unlink", function (path) {
-        try {
-          pathMaker();
-        } catch (e) {
-          console.log(e);
-        }
-        console.log("File", path, "has been removed");
-      })
-      .on("error", function (error) {
-        console.error("Error happened", error);
-      });
-  }
+
+  watcher
+    .on("add", function (path) {
+      try {
+        pathMaker();
+      } catch (e) {
+        console.log(e);
+      }
+      console.log("File", path, "has been added");
+    })
+    .on("change", function (path) {
+      try {
+        pathMaker();
+      } catch (e) {
+        console.log(e);
+      }
+      console.log("File", path, "has been changed");
+    })
+    .on("unlink", function (path) {
+      try {
+        pathMaker();
+      } catch (e) {
+        console.log(e);
+      }
+      console.log("File", path, "has been removed");
+    })
+    .on("error", function (error) {
+      console.error("Error happened", error);
+    });
 };
 
 module.exports = { genPath };

package/index.js

@@ -5,21 +5,15 @@ const { Command } = require("commander");
 const { version, name } = require("./package.json");
 
 const program = new Command();
+
 program.storeOptionsAsProperties(name);
 
 program.version(version, "-v --version", "Output the current version");
-
-program.requiredOption("-p,--page <page>", "Path to your pages folder");
-program.requiredOption(
-  "-c,--configs <configs>",
-  "Path to store generated files"
-);
-
+program.requiredOption("-i,--input <directory>", "Path to your pages folder");
 program.option(
   "-b,--build [type]",
-  "boolean Option to run the program once. Intended to be with build commands."
+  "Boolean Option to run the program once. Intended to be used with build commands."
 );
-
 program.parse();
 
-genPath(program.page, program.configs, program.build);
+genPath(program.input, program.build);

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-fs-router",
-  "version": "0.2.20",
+  "version": "1.0.11",
   "description": "File-system based routing for React.",
   "main": "./index.js",
   "git repository": "https://github.com/Mehran9675/react-filesystem-routing",
   "scripts": {
-    "test": "node ./index.js -p ./pages -c ./configs",
+    "test": "node ./index.js -i ./pages -ext ts",
     "build": "npx -p typescript tsc"
   },
   "keywords": [