fimo-react-router 0.21.0-experimental.1

package/dist/vite.js

@@ -0,0 +1,104 @@
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
+import { fimo as fimoVite } from 'fimo-vite';
+const REACT_ROUTER_CONFIG_FILES = [
+    'react-router.config.ts',
+    'react-router.config.js',
+    'react-router.config.mjs',
+    'react-router.config.cjs',
+];
+/**
+ * Whether the project at `root` is a React Router framework-mode app.
+ *
+ * Gates the one framework-mode-only line below, so a plain-Vite React project
+ * that uses `BrowserRouter` never inherits it. Checks the manifest first: the
+ * config file can carry any of four extensions, but framework mode is
+ * impossible without `@react-router/dev`.
+ */
+export function isReactRouterProject(root) {
+    try {
+        const pkg = JSON.parse(readFileSync(join(root, 'package.json'), 'utf-8'));
+        if (pkg.devDependencies?.['@react-router/dev'] ?? pkg.dependencies?.['@react-router/dev']) {
+            return true;
+        }
+    }
+    catch {
+        // No readable manifest — fall through to the config-file probe.
+    }
+    return REACT_ROUTER_CONFIG_FILES.some((file) => existsSync(join(root, file)));
+}
+// Everything React-specific about dependency optimization lives here; the
+// neutral half (virtual-module externalization, `ssr.noExternal: ['fimo']`)
+// stays in `fimo-vite`. Vite concatenates array config across plugins, so the
+// two merge additively.
+function reactRouterOptimizeDepsPlugin() {
+    return {
+        name: 'vite-plugin-fimo-react-router-optimize-deps',
+        config: (userConfig) => ({
+            ssr: { noExternal: ['fimo-react', 'fimo-react-router'] },
+            optimizeDeps: {
+                // Compatibility shim for React Router projects scaffolded before the
+                // template set `future.unstable_optimizeDeps`. React Router passes
+                // Vite an EMPTY `entries` array without that flag (see
+                // getOptimizeDepsEntries in @react-router/dev), so NOTHING is
+                // pre-bundled: every dep a route imports is discovered on that
+                // route's first visit, and vite answers by re-optimizing and
+                // full-reloading the document. In the preview that reads as "links
+                // aren't SPA links" — client state lost, plus a transient duplicate
+                // React while the new chunks land.
+                //
+                // Gated on React Router framework mode, and assumes sources live in
+                // `src/`. The flag supersedes it (it derives entries from the real
+                // route table, whatever the appDirectory) and the two merge additively
+                // — drop this once no supported project predates the flag.
+                ...(isReactRouterProject(typeof userConfig.root === 'string' ? userConfig.root : process.cwd())
+                    ? { entries: ['src/**/*.{ts,tsx,js,jsx}'] }
+                    : {}),
+                // Pre-include the scanner-invisible dependency surface. The scanner
+                // can't traverse the Fimo runtime packages (virtual: imports), so deps
+                // reached only THROUGH them (react-router, the internal react-query
+                // usage, the error boundary) get discovered mid-first-load — vite
+                // re-optimizes and 504s the in-flight generation's chunks ("Outdated
+                // Optimize Dep") and the app never mounts (blank preview; caught by
+                // content/query e2e).
+                // react/react-dom/react-router are listed too: the template imports
+                // them, but the Fimo packages' imports of them are invisible to the
+                // scan, so leaving them to discovery makes the first optimize pass
+                // depend on which entry the browser happens to request first.
+                include: [
+                    'react',
+                    'react-dom',
+                    'react-router',
+                    'react-error-boundary',
+                    'fimo-react',
+                    'fimo-react-router',
+                    '@tanstack/react-query',
+                ],
+            },
+        }),
+        configEnvironment(name, config) {
+            if (name !== 'ssr')
+                return;
+            const existing = config.resolve?.noExternal;
+            const merged = existing === true
+                ? true
+                : Array.isArray(existing)
+                    ? [...existing, 'fimo-react', 'fimo-react-router']
+                    : existing
+                        ? [existing, 'fimo-react', 'fimo-react-router']
+                        : ['fimo-react', 'fimo-react-router'];
+            return {
+                resolve: { noExternal: merged },
+            };
+        },
+    };
+}
+/**
+ * The Fimo Vite plugin for React Router projects: `fimo-vite`'s neutral
+ * plugins plus the React/React-Router dependency pre-bundling those projects
+ * need. Options are `fimo-vite`'s; `seo` applies to a plain Vite index.html,
+ * while React Router framework mode owns SEO through route `meta` exports.
+ */
+export function fimo(opts = {}) {
+    return [...fimoVite(opts), reactRouterOptimizeDepsPlugin()];
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "fimo-react-router",
+  "version": "0.21.0-experimental.1",
+  "description": "Fimo runtime, routing and build integration for React Router projects. Pairs with the fimo package at the same version.",
+  "files": [
+    "dist/",
+    "!dist/**/*.d.ts.map",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./routes": {
+      "types": "./dist/routes.d.ts",
+      "import": "./dist/routes.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "import": "./dist/preset.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "check:types": "tsc -b tsconfig.json --noEmit",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "fimo-react": "0.21.0-experimental.1",
+    "fimo-vite": "0.21.0-experimental.1",
+    "react-error-boundary": "^6.0.0"
+  },
+  "devDependencies": {
+    "@fimo/tsconfig": "0.21.0-experimental.1",
+    "@tanstack/react-query": "^5.80.6",
+    "@types/node": "^22.15.29",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "fimo": "0.21.0-experimental.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router": "^7.15.1",
+    "typescript": "7.0.2",
+    "vite": "^8.0.13",
+    "vitest": "^4.1.6"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.80.6",
+    "fimo": ">=0.14.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-router": "^7.0.0 || ^8.0.0",
+    "vite": "^7.0.0 || ^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=20.12.0"
+  }
+}