fs-router-dom 0.0.1

package/README.md

@@ -0,0 +1,53 @@
+# react-file-router
+
+Lightweight file-based router for Vite + React Router DOM, like Next.js.
+
+## Installation
+```
+npm install react-file-router
+```
+
+## Usage
+
+### `<FileRouter />`
+
+The `FileRouter` component dynamically creates `react-router-dom` routes from a list of file-based modules. It requires being a child of a `BrowserRouter` (or another `react-router` router).
+
+```jsx
+// App.tsx
+import { BrowserRouter } from 'react-router-dom';
+import { FileRouter } from 'react-file-router';
+
+const routes = import.meta.glob('./pages/**/*.tsx');
+
+function App() {
+  return (
+    <BrowserRouter basename="/app">
+      <FileRouter routes={routes} />
+    </BrowserRouter>
+  );
+}
+
+export default App;
+```
+
+### `<FullFileRouter />`
+
+The `FullFileRouter` component is a "batteries-included" component for users who want to quickly set up file-based routing without configuring `react-router-dom`'s `BrowserRouter` separately. It instantiates a `BrowserRouter` and places the `FileRouter` inside it, handling the setup in one step.
+
+`FullFileRouter` accepts two types of props:
+- `routes`: The same `routes` object required by `FileRouter`.
+- All props accepted by `react-router-dom`'s `BrowserRouter` (e.g., `basename`, `window`).
+
+```jsx
+// App.tsx
+import { FullFileRouter } from 'react-file-router';
+
+const routes = import.meta.glob('./pages/**/*.tsx');
+
+function App() {
+  return <FullFileRouter routes={routes} basename="/app" />;
+}
+
+export default App;
+```

package/dist/FileRouter.d.ts

@@ -0,0 +1,9 @@
+import { BrowserRouterProps } from 'react-router-dom';
+interface FileRouterProps {
+    routes: Record<string, () => Promise<unknown>>;
+}
+export declare function FileRouter({ routes }: FileRouterProps): import("react/jsx-runtime").JSX.Element;
+interface FullFileRouterProps extends FileRouterProps, Omit<BrowserRouterProps, 'children'> {
+}
+export declare function FullFileRouter({ routes, ...browserProps }: FullFileRouterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/FileRouter.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileRouter = FileRouter;
+exports.FullFileRouter = FullFileRouter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+/**
+ * Transforms a file path from the format './pages/users/[id].tsx'
+ * to the format '/users/:id' for react-router-dom.
+ * @param filePath The file path to transform.
+ * @returns The transformed route path.
+ */
+function transformFilePathToRoutePath(filePath) {
+    // Remove everything up to and including /pages/
+    let path = filePath.replace(/.*\/pages\//, '/');
+    // Remove .js, .jsx, .ts, .tsx extension
+    path = path.replace(/\.[jt]sx?$/, '');
+    // Handle index routes
+    if (path.endsWith('/index')) {
+        path = path.slice(0, -6); // Remove /index
+    }
+    // Handle root route
+    if (path === '') {
+        path = '/';
+    }
+    // Convert [param] to :param for dynamic routes
+    path = path.replace(/\[(.*?)\]/g, ':$1');
+    return path;
+}
+function FileRouter({ routes }) {
+    return ((0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [Object.entries(routes).map(([filePath, importFn]) => {
+                const path = transformFilePathToRoutePath(filePath);
+                const Component = react_1.default.lazy(async () => {
+                    const module = await importFn();
+                    return { default: module.default };
+                });
+                return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: path, element: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: (0, jsx_runtime_1.jsx)(Component, {}) }) }, path));
+            }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: (0, jsx_runtime_1.jsx)("div", { children: "404 - Not Found" }) })] }));
+}
+function FullFileRouter({ routes, ...browserProps }) {
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { ...browserProps, children: (0, jsx_runtime_1.jsx)(FileRouter, { routes: routes }) }));
+}
+//# sourceMappingURL=FileRouter.js.map

package/dist/FileRouter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileRouter.js","sourceRoot":"","sources":["../src/FileRouter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,gCA0BC;AAID,wCAMC;;AAxED,+CAAwC;AACxC,uDAAoF;AAMpF;;;;;GAKG;AACH,SAAS,4BAA4B,CAAC,QAAgB;IACpD,gDAAgD;IAChD,IAAI,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;IAEhD,wCAAwC;IACxC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;IAEtC,sBAAsB;IACtB,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC5B,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB;IAC5C,CAAC;IAED,oBAAoB;IACpB,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;QAChB,IAAI,GAAG,GAAG,CAAC;IACb,CAAC;IAED,+CAA+C;IAC/C,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAEzC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAgB,UAAU,CAAC,EAAE,MAAM,EAAmB;IACpD,OAAO,CACL,wBAAC,yBAAM,eACJ,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE;gBACnD,MAAM,IAAI,GAAG,4BAA4B,CAAC,QAAQ,CAAC,CAAC;gBAEpD,MAAM,SAAS,GAAG,eAAK,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;oBACtC,MAAM,MAAM,GAAG,MAAM,QAAQ,EAAE,CAAC;oBAChC,OAAO,EAAE,OAAO,EAAG,MAAgD,CAAC,OAAO,EAAE,CAAC;gBAChF,CAAC,CAAC,CAAC;gBACH,OAAO,CACL,uBAAC,wBAAK,IAEJ,IAAI,EAAE,IAAI,EACV,OAAO,EACL,uBAAC,gBAAQ,IAAC,QAAQ,EAAE,yDAAqB,YACvC,uBAAC,SAAS,KAAG,GACJ,IALR,IAAI,CAOT,CACH,CAAC;YACJ,CAAC,CAAC,EAEF,uBAAC,wBAAK,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,8DAA0B,GAAI,IAChD,CACV,CAAC;AACJ,CAAC;AAID,SAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,GAAG,YAAY,EAAuB;IAC7E,OAAO,CACL,uBAAC,gCAAa,OAAK,YAAY,YAC7B,uBAAC,UAAU,IAAC,MAAM,EAAE,MAAM,GAAI,GAChB,CACjB,CAAC;AACJ,CAAC"}

package/dist/FileRouter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/FileRouter.test.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const react_router_dom_1 = require("react-router-dom");
+const FileRouter_1 = require("./FileRouter");
+// Mock components
+const Home = () => (0, jsx_runtime_1.jsx)("div", { children: "Home" });
+const About = () => (0, jsx_runtime_1.jsx)("div", { children: "About" });
+const User = () => (0, jsx_runtime_1.jsx)("div", { children: "User" });
+const routes = {
+    './pages/index.tsx': () => Promise.resolve({ default: Home }),
+    './pages/about.tsx': () => Promise.resolve({ default: About }),
+    './pages/users/[id].tsx': () => Promise.resolve({ default: User }),
+};
+describe('FileRouter', () => {
+    it('should render the correct component for a static route', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(react_router_dom_1.MemoryRouter, { initialEntries: ['/about'], children: (0, jsx_runtime_1.jsx)(FileRouter_1.FileRouter, { routes: routes }) }));
+        expect(await react_1.screen.findByText('About')).toBeInTheDocument();
+    });
+    it('should render the correct component for the root route', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(react_router_dom_1.MemoryRouter, { initialEntries: ['/'], children: (0, jsx_runtime_1.jsx)(FileRouter_1.FileRouter, { routes: routes }) }));
+        expect(await react_1.screen.findByText('Home')).toBeInTheDocument();
+    });
+    it('should render the correct component for a dynamic route', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(react_router_dom_1.MemoryRouter, { initialEntries: ['/users/123'], children: (0, jsx_runtime_1.jsx)(FileRouter_1.FileRouter, { routes: routes }) }));
+        expect(await react_1.screen.findByText('User')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=FileRouter.test.js.map

package/dist/FileRouter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileRouter.test.js","sourceRoot":"","sources":["../src/FileRouter.test.tsx"],"names":[],"mappings":";;;AACA,kDAAwD;AACxD,uDAAgD;AAChD,6CAA0C;AAE1C,kBAAkB;AAClB,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,mDAAe,CAAC;AACnC,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,oDAAgB,CAAC;AACrC,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,mDAAe,CAAC;AAEnC,MAAM,MAAM,GAAG;IACb,mBAAmB,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC7D,mBAAmB,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9D,wBAAwB,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;CACnE,CAAC;AAEF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,IAAA,cAAM,EACJ,uBAAC,+BAAY,IAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,YACtC,uBAAC,uBAAU,IAAC,MAAM,EAAE,MAAM,GAAI,GACjB,CAChB,CAAC;QACF,MAAM,CAAC,MAAM,cAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,IAAA,cAAM,EACJ,uBAAC,+BAAY,IAAC,cAAc,EAAE,CAAC,GAAG,CAAC,YACjC,uBAAC,uBAAU,IAAC,MAAM,EAAE,MAAM,GAAI,GACjB,CAChB,CAAC;QACF,MAAM,CAAC,MAAM,cAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;QACvE,IAAA,cAAM,EACJ,uBAAC,+BAAY,IAAC,cAAc,EAAE,CAAC,YAAY,CAAC,YAC1C,uBAAC,uBAAU,IAAC,MAAM,EAAE,MAAM,GAAI,GACjB,CAChB,CAAC;QACF,MAAM,CAAC,MAAM,cAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { FileRouter, FullFileRouter } from './FileRouter';

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullFileRouter = exports.FileRouter = void 0;
+var FileRouter_1 = require("./FileRouter");
+Object.defineProperty(exports, "FileRouter", { enumerable: true, get: function () { return FileRouter_1.FileRouter; } });
+Object.defineProperty(exports, "FullFileRouter", { enumerable: true, get: function () { return FileRouter_1.FullFileRouter; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,2CAA0D;AAAjD,wGAAA,UAAU,OAAA;AAAE,4GAAA,cAAc,OAAA"}

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const util_1 = require("util");
+global.TextEncoder = util_1.TextEncoder;
+global.TextDecoder = util_1.TextDecoder;
+//# sourceMappingURL=setupTests.js.map

package/dist/setupTests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTests.js","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":";;AAAA,qCAAmC;AACnC,+BAAgD;AAEhD,MAAM,CAAC,WAAW,GAAG,kBAAW,CAAC;AACjC,MAAM,CAAC,WAAW,GAAG,kBAAkB,CAAC"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "fs-router-dom",
+  "version": "0.0.1",
+  "description": "Lightweight file-based router for Vite + react-router-dom, inspired by Next.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "react-router-dom": ">=6.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.27",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "ts-jest": "^29.2.2",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "react",
+    "router",
+    "file-based",
+    "vite"
+  ],
+  "author": "Your Name",
+  "license": "MIT"
+}