react-fs-router 0.2.18 → 1.0.1

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 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,42 +16,46 @@ 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 command:
+| 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 exports of all the files inside the pages path and one containing an array of objects each containing:
+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
-name: //Name of the component mentioned in the file
-icon: //Name of the icon mentioned in the file
-index: //A number by which the objects in this array are sorted by
+
+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.
-}
+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.
@@ -62,21 +66,13 @@ Name, icon and index can be written in each file and react-fs-router will read a
 // index: 0
 ```
 
-To use with react-router:
+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();
 
   useEffect(() => {
-    // calling the function to genarate routes.
     setPages(renderConponents(Pages));
   }, []);
 
@@ -106,7 +102,7 @@ function App() {
 }
 ```
 
-Place this component inside <BrowserRouter>
+Place this component inside BrowserRouter
 
 ```xml
 <BrowserRouter>
@@ -117,14 +113,9 @@ Place this component inside <BrowserRouter>
 ## Using with Ant Pro Layout
 
 The routes array generated by this library can be easily used with Ant designs pro layout component.
-The following is an an example using an hoc:
+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 = {
@@ -168,17 +159,22 @@ function Layout(Component) {
 }
 ```
 
-## Caveats
+## Usage with Concurrently
 
-1. Since all of the files are wrriten into imports and exports file, 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 react script unless -b is passed to run the main function of the package once.
-3. This library is a work in progress. Feel free to discuss your issues in the github page of the library.
+You can use [concurrently](https://www.npmjs.com/package/concurrently) to run rfr with react at the same time.
 
-## Contributing
+```bash
+npm install -g concurrently
+```
+
+```bash
+concurrently --kill-others "npm run start" "npm run rfr"
+```
 
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+## Caveats
 
-Please make sure to update tests as appropriate.
+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 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

@@ -4,12 +4,47 @@ const chokidar = require("chokidar");
 
 let isNotThefirstTimeRunning = true;
 
-const genPath = (page_directory, configs_directory, runOnce) => {
+const genPath = (
+  page_directory,
+  configs_directory,
+  runOnce,
+  file_extention,
+  dont_output_fileProperties
+) => {
+  //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 +56,7 @@ const genPath = (page_directory, configs_directory, runOnce) => {
       });
       return pages;
     };
+
     const pages = readDirectory(page_directory);
 
     const readFileProperties = (filepath) => {
@@ -77,8 +113,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,23 +143,33 @@ 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("")}};`;
 
-    fs.writeFileSync(
-      configs_directory + "/routeConfigs.js",
-      prettier.format(_config, { semi: false, parser: "babel" }),
-      (err) => {
-        if (err) return console.error(err);
-      }
-    );
+    const parseFileExtention = (ext) => {
+      if (ext) {
+        if (ext.includes(".")) return ext;
+        else return "." + ext;
+      } else return ".js";
+    };
+    if (!dont_output_fileProperties) {
+      fs.writeFileSync(
+        (configs_directory || page_directory) +
+          `/_page-properties${parseFileExtention(file_extention)}`,
+        prettier.format(_config, { semi: false, parser: "babel" }),
+        (err) => {
+          if (err) return console.error(err);
+        }
+      );
+    }
 
     fs.writeFileSync(
-      configs_directory + "/route.js",
+      (configs_directory || page_directory) +
+        `/_routes${parseFileExtention(file_extention)}`,
       prettier.format(_routes, { semi: false, parser: "babel" }),
       (err) => {
         if (err) return console.error(err);
@@ -134,40 +181,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,32 @@ 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("-o,--output <output>", "Path to store generated files");
+program.option(
+  "-ext,--extention <extention>",
+  "extention on the generated files"
 );
 
+program.option(
+  "-p,--pageProperties [type]",
+  "Boolean option to disable genrating page properties file"
+);
 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);
+genPath(
+  program.input,
+  program.output,
+  program.build,
+  program.extention,
+  program.pageProperties
+);

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-fs-router",
-  "version": "0.2.18",
+  "version": "1.0.1",
   "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": [
@@ -28,4 +28,8 @@
     "typescript": "^4.4.4",
     "prettier": "^2.4.1"
   }
+  ,"repository": {
+    "type":"git",
+    "url":"https://github.com/Mehran9675/react-filesystem-routing"
+  }
 }