react-fs-router 0.2.16 → 0.2.17

package/README.md

@@ -1,2 +1,185 @@
-# react-filesystem-routing
-File-system routing for React.
+# 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.
+
+## Installation
+
+Use yarn or npm to install react-fs-router
+
+```bash
+yarn add react-fs-router
+```
+
+```bash
+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.
+
+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:
+
+```JSON
+  "scripts": {
+     "rfr": "rfr -p <path to pages folder> -c <path to place output files>"
+  }
+```
+
+-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
+
+```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:
+
+```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
+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.
+}
+```
+
+Name, icon and index can be written in each file and react-fs-router will read and place them in the output file.
+
+```javascript
+// name: Home
+// icon: HomeOutlined
+// index: 0
+```
+
+To use with the 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));
+  }, []);
+
+  function renderComponent(key, module) {
+    return module[key] || module["default"] || module;
+  }
+
+  function renderConponents(imports: Record<string, ReactNode>) {
+    let renders = [];
+    // Looping through the Pages import
+    for (const [key, Value] of Object.entries(imports)) {
+      const Component = renderComponent(key, Value);
+      // Finding the correct route object.
+      const route = routes.filter(
+        (config) => config.component === Component.name
+      )[0];
+
+      renders.push(
+        <Route exact={true} key={route.path} path={route?.path || ""}>
+          <Component />
+        </Route>
+      );
+    }
+    return renders;
+  }
+  return <Switch>{pages}</Switch>;
+}
+```
+
+Place this component inside <BrowserRouter>
+
+```xml
+<BrowserRouter>
+   <App />
+</BrowserRouter>
+```
+
+## Using with AntPro 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:
+
+```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 = {
+      path: "",
+    };
+
+    render() {
+      const makeIcon = (Icon) => <Icon />;
+      const loopMenuItem = (menus) =>
+        // If name and icon are found in the file of the component, they will appear in the
+        // pro layout menu with the specified name and icon.
+        menus.map(({ icon, children, ...item }) => {
+          return {
+            ...item,
+            icon: icon && makeIcon(Icons[icon]),
+            children: children && loopMenuItem(children),
+          };
+        });
+
+      return (
+        <ProLayout
+          menuItemRender={(item, dom) => (
+            <Link
+              onClick={() => this.setState({ path: item.path || "/" })}
+              to={item.path}
+            >
+              {dom}
+            </Link>
+          )}
+          menu={{ request: async () => loopMenuItem(routes) }}
+          style={{ height: "100vh" }}
+          location={{ pathname: this.state.path || window.location.pathname }}
+        >
+          <PageContainer>
+            <Component {...this.props} />
+          </PageContainer>
+        </ProLayout>
+      );
+    }
+  };
+}
+```
+
+## Caveats
+
+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.
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+
+Please make sure to update tests as appropriate.
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package/genPath.js

@@ -3,9 +3,8 @@ const prettier = require("prettier");
 const chokidar = require("chokidar");
 
 let isNotThefirstTimeRunning = true;
-let configs_path;
-const genPath = (page_directory, configs_directory) => {
-  configs_path = configs_directory;
+
+const genPath = (page_directory, configs_directory, runOnce) => {
   const pathMaker = () => {
     const readDirectory = (directory, includeDirectory) => {
       const pages = {};
@@ -96,9 +95,9 @@ const genPath = (page_directory, configs_directory) => {
       return result;
     };
 
-    const routes = makePathsArray(pages).map((page) =>
-      makeRouteObject(page.path, page.file)
-    );
+    const routes = makePathsArray(pages)
+      .map((page) => makeRouteObject(page.path, page.file))
+      .sort((a, b) => b.index - a.index);
 
     const _config = `export const routes = ${JSON.stringify(routes)}`;
 
@@ -139,35 +138,36 @@ const genPath = (page_directory, configs_directory) => {
     ignored: /^\./,
     persistent: true,
   });
-
-  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);
-    });
+  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);
+      });
+  }
 };
 
-module.exports = { genPath, configs_path };
+module.exports = { genPath };

package/index.js

@@ -5,7 +5,6 @@ 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");
@@ -15,6 +14,12 @@ program.requiredOption(
   "-c,--configs <configs>",
   "Path to store generated files"
 );
-program.parse(process.argv);
+
+program.option(
+  "-b,--build [type]",
+  "boolean Option to run the program once. Intended to be with build commands."
+);
+
+program.parse();
 
 genPath(program.page, program.configs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fs-router",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "File-system based routing for React.",
   "main": "./index.js",
   "git repository": "https://github.com/Mehran9675/react-filesystem-routing",