Fix critical security vulnerabilities in dependencies

.gitignore

@@ -8,6 +8,7 @@ node_modules
 .cache
 **/.shopify
 /test-results/
+/test-project-*/
 /playwright-report/
 /playwright/.cache/
 **/dist
@@ -151,3 +152,6 @@ examples/express/build
 
 # CalVer temp file (created by detect-calver-bump-type.js, consumed by enforce-calver-ci.js)
 .changeset/.calver-bump-type
+
+# Husky auto-generated internals (defense in depth - also ignored via .husky/_/.gitignore)
+.husky/_/

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged && npm run pre-commit:encrypt

CONTRIBUTING.md

@@ -52,7 +52,7 @@ The `Readme.md` files in the directories of individual packages and templates co
 
 ## Formatting and Linting
 
-The Hydrogen monorepo provides commands for linting and formatting, and uses [Yorkie](https://github.com/yyx990803/yorkie) to run checks on staged commits automatically.
+The Hydrogen monorepo provides commands for linting and formatting, and uses [Husky](https://typicode.github.io/husky) to run checks on staged commits automatically.
 
 | Command             | Description                               |
 | ------------------- | ----------------------------------------- |

docs/preview/app/entry.client.tsx

@@ -1,18 +1,12 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
-import {RemixBrowser} from '@remix-run/react';
+import {HydratedRouter} from 'react-router/dom';
 import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      <HydratedRouter />
     </StrictMode>,
   );
 });

docs/preview/app/entry.server.tsx

@@ -1,14 +1,8 @@
-/**
- * By default, Remix will handle generating the HTTP Response for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.server
- */
-
 import {PassThrough} from 'node:stream';
 
-import type {AppLoadContext, EntryContext} from '@remix-run/node';
-import {createReadableStreamFromReadable} from '@remix-run/node';
-import {RemixServer} from '@remix-run/react';
+import type {AppLoadContext, EntryContext} from 'react-router';
+import {ServerRouter} from 'react-router';
+import {createReadableStreamFromReadable} from '@react-router/node';
 import {isbot} from 'isbot';
 import {renderToPipeableStream} from 'react-dom/server';
 
@@ -18,38 +12,34 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  routerContext: EntryContext,
   loadContext: AppLoadContext,
 ) {
   return isbot(request.headers.get('user-agent'))
     ? handleBotRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext,
+        routerContext,
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext,
+        routerContext,
       );
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  routerContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const {pipe, abort} = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <ServerRouter context={routerContext} url={request.url} />,
       {
         onAllReady() {
           shellRendered = true;
@@ -72,9 +62,6 @@ function handleBotRequest(
         },
         onError(error: unknown) {
           responseStatusCode = 500;
-          // Log streaming rendering errors from inside the shell.  Don't log
-          // errors encountered during initial shell rendering since they'll
-          // reject and get logged in handleDocumentRequest.
           if (shellRendered) {
             console.error(error);
           }
@@ -90,16 +77,12 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  routerContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const {pipe, abort} = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <ServerRouter context={routerContext} url={request.url} />,
       {
         onShellReady() {
           shellRendered = true;
@@ -122,9 +105,6 @@ function handleBrowserRequest(
         },
         onError(error: unknown) {
           responseStatusCode = 500;
-          // Log streaming rendering errors from inside the shell.  Don't log
-          // errors encountered during initial shell rendering since they'll
-          // reject and get logged in handleDocumentRequest.
           if (shellRendered) {
             console.error(error);
           }

docs/preview/app/root.tsx

@@ -1,5 +1,5 @@
-import {type LinksFunction} from '@remix-run/node';
 import {
+  type LinksFunction,
   Links,
   Meta,
   NavLink,
@@ -8,7 +8,7 @@ import {
   ScrollRestoration,
   useLoaderData,
   useParams,
-} from '@remix-run/react';
+} from 'react-router';
 import stylesheet from '~/tailwind.css?url';
 import {Fragment, useCallback, useState} from 'react';
 import he from 'he';

docs/preview/app/routes/$doc.tsx

@@ -1,6 +1,5 @@
-import type {LoaderFunctionArgs} from '@remix-run/node';
-import {json} from '@remix-run/node';
-import {useLoaderData, useMatches} from '@remix-run/react';
+import type {LoaderFunctionArgs} from 'react-router';
+import {useLoaderData, useMatches} from 'react-router';
 import {marked} from 'marked';
 import {useState} from 'react';
 
@@ -30,7 +29,7 @@ export default function Index() {
     : null;
 
   const props = typeDef
-    ? typeDef.members ?? typeDef.params ?? typeDef.value
+    ? (typeDef.members ?? typeDef.params ?? typeDef.value)
     : null;
 
   return (

docs/preview/env.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-/// <reference types="@remix-run/node" />
+/// <reference types="@react-router/node" />
 
 declare module 'virtual:docs.json' {
   const value: Array<Record<string, any>>;

docs/preview/package.json

@@ -4,22 +4,22 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "dev": "remix vite:dev",
+    "dev": "react-router dev",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "^2.17.2",
-    "@remix-run/react": "^2.17.2",
-    "@remix-run/serve": "^2.17.2",
+    "@react-router/node": "^7.0.0",
+    "@react-router/serve": "^7.0.0",
     "he": "^1.2.0",
     "isbot": "^5.1.21",
     "marked": "^9.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-router": "^7.0.0",
     "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.17.2",
+    "@react-router/dev": "^7.0.0",
     "@tailwindcss/vite": "^4.0.14",
     "@types/he": "^1.2.1",
     "@types/react": "^18.2.20",

docs/preview/vite.config.js

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import {defineConfig} from 'vite';
-import {vitePlugin as remix} from '@remix-run/dev';
+import {reactRouter} from '@react-router/dev/vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import tailwindcss from '@tailwindcss/vite';
 
@@ -17,15 +17,7 @@ if (!GEN_DOCS_PATH && INIT_CWD === process.env.PWD) {
 
 export default defineConfig({
   plugins: [
-    remix({
-      ignoredRouteFiles: ['**/.*'],
-      future: {
-        v3_fetcherPersist: false,
-        v3_relativeSplatPath: false,
-        v3_throwAbortReason: false,
-        v3_singleFetch: true,
-      },
-    }),
+    reactRouter(),
     tsconfigPaths(),
     tailwindcss(),
     {