[DO NOT MERGE] - [App template] - Migrate to react router

javascript/example-customer-account--metafields--js/.eslintrc.cjs

@@ -1,13 +1,78 @@
-/** @type {import('@types/eslint').Linter.BaseConfig} */
+/** @type {import('eslint').Linter.Config} */
 module.exports = {
   root: true,
-  extends: [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "@remix-run/eslint-config/jest-testing-library",
-    "prettier",
-  ],
-  globals: {
-    shopify: "readonly"
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
   },
+  ignorePatterns: ['!**/.server', '!**/.client'],
+
+  // Base config
+  extends: ['eslint:recommended'],
+
+  overrides: [
+    // React
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react', 'jsx-a11y'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+      ],
+      settings: {
+        react: {
+          version: 'detect',
+        },
+        formComponents: ['Form'],
+        linkComponents: [
+          {name: 'Link', linkAttribute: 'to'},
+          {name: 'NavLink', linkAttribute: 'to'},
+        ],
+        'import/resolver': {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
+          node: {
+            extensions: ['.ts', '.tsx'],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+      ],
+    },
+
+    // Node
+    {
+      files: ['.eslintrc.cjs'],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };

javascript/example-customer-account--metafields--js/.gitignore

@@ -10,4 +10,8 @@ node_modules
 /prisma/dev.sqlite-journal
 database.sqlite
 
-.env
+.env
+
+# Hide files auto-generated by react router
+.react-router/
+.shopify

javascript/example-customer-account--metafields--js/app/entry.server.tsx

@@ -1,10 +1,8 @@
 import { PassThrough } from "stream";
 import { renderToPipeableStream } from "react-dom/server";
-import { RemixServer } from "@remix-run/react";
-import {
-  createReadableStreamFromReadable,
-  type EntryContext,
-} from "@remix-run/node";
+import { ServerRouter } from "react-router";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { type EntryContext } from "react-router";
 import { isbot } from "isbot";
 import { addDocumentResponseHeaders } from "./shopify.server";
 
@@ -14,7 +12,7 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   addDocumentResponseHeaders(request, responseHeaders);
   const userAgent = request.headers.get("user-agent");
@@ -24,8 +22,8 @@ export default async function handleRequest(
 
   return new Promise((resolve, reject) => {
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
+      <ServerRouter
+        context={reactRouterContext}
         url={request.url}
         abortDelay={ABORT_DELAY}
       />,

javascript/example-customer-account--metafields--js/app/root.tsx

@@ -1,10 +1,4 @@
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 
 export default function App() {
   return (

javascript/example-customer-account--metafields--js/app/routes.ts

@@ -0,0 +1,3 @@
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes();

javascript/example-customer-account--metafields--js/app/routes/_index/route.tsx

@@ -1,6 +1,5 @@
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
-import { Form, useLoaderData } from "@remix-run/react";
+import type { LoaderFunctionArgs } from "react-router";
+import { Form, useLoaderData, redirect } from "react-router";
 
 import { login } from "../../shopify.server";
 
@@ -13,7 +12,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     throw redirect(`/app?${url.searchParams.toString()}`);
   }
 
-  return json({ showForm: Boolean(login) });
+  return { showForm: Boolean(login) };
 };
 
 export default function App() {