feat: add react router entry point (#459)

* feat: add react router entry point Signed-off-by: Logan McAnsh <[email protected]> * feat: update package name for react router example template Signed-off-by: Logan McAnsh <[email protected]> * chore: adjust more things, add tests for RR Signed-off-by: Logan McAnsh <[email protected]> * Update tsup.config.ts * Update react-router.ts * chore: update pnpm Signed-off-by: Logan McAnsh <[email protected]> * chore: use @total-typescript/tsconfig/bundler/no-dom/library for tsconfig Signed-off-by: Logan McAnsh <[email protected]> * chore: use @total-typescript/tsconfig/bundler/dom/app for examples Signed-off-by: Logan McAnsh <[email protected]> * chore: remove console logs Signed-off-by: Logan McAnsh <[email protected]> * chore: rename some exports and fix react router tests Signed-off-by: Logan McAnsh <[email protected]> * chore: update tsconfig and refactor remix handlers for improved compatibility Signed-off-by: Logan McAnsh <[email protected]> * chore: update loader function to return data directly instead of using defer Signed-off-by: Logan McAnsh <[email protected]> * Create spicy-donuts-sing.md Signed-off-by: Logan McAnsh <[email protected]> --------- Signed-off-by: Logan McAnsh <[email protected]>
mcansh · Nov 20, 2024 · 206509a · 206509a
1 parent fba6aca
commit 206509a
Show file tree

Hide file tree

Showing 42 changed files with 1,500 additions and 647 deletions.
diff --git a/.changeset/spicy-donuts-sing.md b/.changeset/spicy-donuts-sing.md
@@ -0,0 +1,5 @@
+---
+"@mcansh/remix-fastify": patch
+---
+
+feat: add react router entry point
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ yalc.lock
 # added during build
 /packages/*/LICENSE
 .tsup
+.idea
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -29,6 +29,7 @@
   "devDependencies": {
     "@remix-run/dev": "*",
     "@remix-run/eslint-config": "*",
+    "@total-typescript/tsconfig": "^1.0.4",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "chokidar": "^4.0.1",

diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json
@@ -1,22 +1,14 @@
 {
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "extends": "@total-typescript/tsconfig/bundler/dom/app",
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
+    "types": ["@remix-run/node"],
     "jsx": "react-jsx",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "target": "ES2022",
-    "strict": true,
-    "allowJs": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },
-
-    // Remix takes care of building everything in `remix build`.
     "noEmit": true
   }
 }
diff --git a/examples/playground/app/root.tsx b/examples/playground/app/root.tsx
@@ -1,4 +1,4 @@
-import { json } from "@remix-run/node";
+import { data } from "@remix-run/node";
 import {
   Links,
   Meta,
@@ -10,11 +10,12 @@ import {
 import "./styles/global.css";
 
 export function loader() {
-  return json({ message: "Hello from the root loader" });
+  return data({ message: "Hello from the root loader" });
 }
 
 export default function App() {
-  let data = useLoaderData<typeof loader>();
+  let loaderData = useLoaderData<typeof loader>();
+
   return (
     <html lang="en">
       <head>
@@ -28,7 +29,7 @@ export default function App() {
       </head>
       <body>
         <div className="mx-auto max-w-max border-2 border-black bg-red-700 p-4 text-white">
-          {data.message}
+          {loaderData.message}
         </div>
         <Outlet />
         <Scripts />

diff --git a/examples/playground/app/routes/_layout._index.tsx b/examples/playground/app/routes/_layout._index.tsx
@@ -1,12 +1,12 @@
 import * as React from "react";
-import type { DataFunctionArgs } from "@remix-run/node";
-import { defer, redirect } from "@remix-run/node";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 import { Await, Form, useAsyncValue, useLoaderData } from "@remix-run/react";
 
 import { sessionStorage } from "~/session.server";
 import { sleep } from "~/sleep";
 
-export async function loader({ request, context }: DataFunctionArgs) {
+export async function loader({ request, context }: LoaderFunctionArgs) {
   let cookie = request.headers.get("Cookie");
   let session = await sessionStorage.getSession(cookie);
 
@@ -16,13 +16,13 @@ export async function loader({ request, context }: DataFunctionArgs) {
     throw new Error("loadContextName must be a string");
   }
 
-  return defer({
+  return {
     name: sleep<string>(1_000, session.get("name") || "Anonymous"),
     loadContextName,
-  });
+  };
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   let cookie = request.headers.get("Cookie");
   let session = await sessionStorage.getSession(cookie);
   let formData = await request.formData();
@@ -55,24 +55,24 @@ export async function action({ request }: DataFunctionArgs) {
 }
 
 export default function Index() {
-  let data = useLoaderData<typeof loader>();
+  let loaderData = useLoaderData<typeof loader>();
   const [echo, setEcho] = React.useState<string | null>(null);
 
   return (
     <>
       <React.Suspense fallback={<h2 className="text-gray-400">loading...</h2>}>
-        <Await resolve={data.name} errorElement={<h2>failed...</h2>}>
+        <Await resolve={loaderData.name} errorElement={<h2>failed...</h2>}>
           {(resolvedName) => <h2>Hello {resolvedName}</h2>}
         </Await>
       </React.Suspense>
 
-      <h2>Context: {data.loadContextName}</h2>
+      <h2>Context: {loaderData.loadContextName}</h2>
 
       <Form method="post" className="flex justify-center gap-2">
         <label>
           <span>Name: </span>
           <React.Suspense fallback={<FallbackNameInput />}>
-            <Await resolve={data.name}>
+            <Await resolve={loaderData.name}>
               <NameInput />
             </Await>
           </React.Suspense>

diff --git a/examples/playground/app/routes/_layout.fetcher.tsx b/examples/playground/app/routes/_layout.fetcher.tsx
@@ -1,10 +1,9 @@
-import type { DataFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { useFetcher } from "@remix-run/react";
+import type { ActionFunctionArgs } from "@remix-run/node";
+import { data, useFetcher } from "@remix-run/react";
 
-export async function action({ request }: DataFunctionArgs) {
-  let data = await request.json();
-  return json(data);
+export async function action({ request }: ActionFunctionArgs) {
+  let response = await request.json();
+  return data(response);
 }
 
 export default function () {

diff --git a/examples/playground/app/routes/_layout.page-2.tsx b/examples/playground/app/routes/_layout.page-2.tsx
@@ -1,14 +1,14 @@
 import * as React from "react";
-import { defer } from "@remix-run/node";
+
 import { Await, useLoaderData } from "@remix-run/react";
 
 import { withDelay } from "~/sleep";
 
 export function loader() {
-  return defer({
+  return {
     message: "loader data from page 2",
     deferred: withDelay(2_000, "some text\n".repeat(2_000)),
-  });
+  };
 }
 
 export default function Page2() {

diff --git a/examples/playground/package.json b/examples/playground/package.json
@@ -17,21 +17,22 @@
   "dependencies": {
     "@fastify/static": "^8.0.2",
     "@mcansh/remix-fastify": "workspace:*",
-    "@remix-run/node": "*",
-    "@remix-run/react": "*",
+    "@remix-run/node": "^2.14.0",
+    "@remix-run/react": "^2.14.0",
     "chalk": "^5.3.0",
-    "fastify": "^5.0.0",
+    "fastify": "^5.1.0",
     "get-port": "^7.1.0",
     "isbot": "^5.1.17",
-    "react": "19.0.0-rc-100dfd7dab-20240701",
-    "react-dom": "19.0.0-rc-100dfd7dab-20240701",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {
     "@fastify/middie": "^9.0.2",
-    "@remix-run/dev": "*",
-    "@remix-run/eslint-config": "*",
-    "@tailwindcss/vite": "4.0.0-alpha.28",
+    "@remix-run/dev": "^2.14.0",
+    "@remix-run/eslint-config": "^2.14.0",
+    "@tailwindcss/vite": "4.0.0-alpha.34",
+    "@total-typescript/tsconfig": "^1.0.4",
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]",
     "chokidar": "^4.0.1",
@@ -41,10 +42,10 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "4.0.0-alpha.28",
+    "tailwindcss": "4.0.0-alpha.34",
     "typescript": "^5.6.3",
-    "vite": "^5.4.9",
-    "vite-tsconfig-paths": "^5.0.1"
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.1.2"
   },
   "overrides": {
     "@types/react": "$@types/react",

diff --git a/examples/playground/server.js b/examples/playground/server.js
@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { remixFastify } from "@mcansh/remix-fastify";
+import { reactRouterFastify } from "@mcansh/remix-fastify/react-router";
 import { installGlobals } from "@remix-run/node";
 import { fastify } from "fastify";
 import sourceMapSupport from "source-map-support";
@@ -14,7 +14,7 @@ app.post("/api/echo", async (request, reply) => {
   reply.send(request.body);
 });
 
-await app.register(remixFastify, {
+await app.register(reactRouterFastify, {
   getLoadContext(request, reply) {
     return { loadContextName: "Logan" };
   },

diff --git a/examples/playground/tsconfig.json b/examples/playground/tsconfig.json
@@ -1,31 +1,22 @@
 {
+  "extends": "@total-typescript/tsconfig/bundler/dom/app",
   "include": [
     "**/*.ts",
     "**/*.tsx",
     "**/.server/**/*.ts",
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
+    "**/.client/**/*.tsx",
+    ".react-router/types/**/*"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["@remix-run/node", "vite/client"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "target": "ES2022",
-    "skipLibCheck": true,
-    "strict": true,
-    "allowJs": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },
-
-    // Remix takes care of building everything in `remix build`.
     "noEmit": true
   }
 }
diff --git a/examples/playground/vite.config.ts b/examples/playground/vite.config.ts
@@ -3,6 +3,25 @@ import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import tailwindcss from "@tailwindcss/vite";
 
+declare module "@remix-run/node" {
+  interface Future {
+    v3_singleFetch: true;
+  }
+}
+
 export default defineConfig({
-  plugins: [remix(), tsconfigPaths(), tailwindcss()],
+  plugins: [
+    remix({
+      future: {
+        unstable_optimizeDeps: true,
+        v3_fetcherPersist: true,
+        v3_lazyRouteDiscovery: true,
+        v3_relativeSplatPath: true,
+        v3_singleFetch: true,
+        v3_throwAbortReason: true,
+      },
+    }),
+    tsconfigPaths(),
+    tailwindcss(),
+  ],
 });
diff --git a/examples/react-router/package.json b/examples/react-router/package.json
@@ -1,4 +1,5 @@
 {
+  "name": "react-router-example-template",
   "private": true,
   "sideEffects": false,
   "type": "module",
@@ -24,6 +25,7 @@
   },
   "devDependencies": {
     "@react-router/dev": "7.0.0-pre.4",
+    "@total-typescript/tsconfig": "^1.0.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",

diff --git a/examples/react-router/server.js b/examples/react-router/server.js
@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { remixFastify } from "@mcansh/remix-fastify";
+import { reactRouterFastify } from "@mcansh/remix-fastify/react-router";
 import { fastify } from "fastify";
 import sourceMapSupport from "source-map-support";
 import getPort, { portNumbers } from "get-port";
@@ -8,9 +8,7 @@ sourceMapSupport.install();
 
 let app = fastify();
 
-await app.register(remixFastify, {
-  virtualModule: "virtual:react-router/server-build",
-});
+await app.register(reactRouterFastify);
 
 const desiredPort = Number(process.env.PORT) || 3000;
 const portToUse = await getPort({

diff --git a/examples/react-router/tsconfig.json b/examples/react-router/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "@total-typescript/tsconfig/bundler/dom/app",
   "include": [
     "**/*.ts",
     "**/*.tsx",
@@ -9,18 +10,8 @@
     ".react-router/types/**/*"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["@react-router/node", "vite/client"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
     "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "target": "ES2022",
-    "strict": true,
-    "allowJs": true,
-    "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -30,6 +30,7 @@
   "devDependencies": {
     "@remix-run/dev": "*",
     "@remix-run/eslint-config": "*",
+    "@total-typescript/tsconfig": "^1.0.4",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@types/source-map-support": "^0.5.10",

diff --git a/examples/vite/tsconfig.json b/examples/vite/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "@total-typescript/tsconfig/bundler/dom/app",
   "include": [
     "**/*.ts",
     "**/*.tsx",
@@ -8,26 +9,13 @@
     "**/.client/**/*.tsx"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["@remix-run/node", "vite/client"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "module": "ESNext",
     "jsx": "react-jsx",
-    "moduleResolution": "Bundler",
-    "moduleDetection": "force",
-    "resolveJsonModule": true,
-    "target": "ES2022",
-    "skipLibCheck": true,
-    "strict": true,
-    "allowJs": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },
-
-    // Remix takes care of building everything in `remix build`.
     "noEmit": true
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,4 @@ yalc.lock @@
     # added during build
     /packages/*/LICENSE
     .tsup
+    .idea