Bl route warnings

.changeset/quick-carrots-perform.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Add warnings to the Shopify CLI when your app uses reserved routes. These routes are reserved by Oxygen, and any local routes that conflict with them will not be used.

packages/cli/src/commands/hydrogen/build.ts

@@ -14,7 +14,11 @@ import {commonFlags, flagsToCamelObject} from '../../lib/flags.js';
 import {prepareDiffDirectory} from '../../lib/template-diff.js';
 import {getViteConfig, isViteProject} from '../../lib/vite-config.js';
 import {checkLockfileStatus} from '../../lib/check-lockfile.js';
-import {findMissingRoutes} from '../../lib/missing-routes.js';
+import {
+  findMissingRoutes,
+  findReservedRoutes,
+  warnReservedRoutes,
+} from '../../lib/route-validator.js';
 import {runClassicCompilerBuild} from '../../lib/classic-compiler/build.js';
 import {hydrogenBundleAnalyzer} from '../../lib/bundle/vite-plugin.js';
 import {
@@ -341,6 +345,10 @@ export async function runBuild({
     }
   }
 
+  if (!watch && !disableRouteWarning) {
+    warnReservedRoutes(findReservedRoutes(remixConfig));
+  }
+
   return {
     async close() {
       codegenProcess?.removeAllListeners('close');

packages/cli/src/commands/hydrogen/check.ts

@@ -2,7 +2,12 @@ import Command from '@shopify/cli-kit/node/base-command';
 import {resolvePath} from '@shopify/cli-kit/node/path';
 import {commonFlags} from '../../lib/flags.js';
 import {getRemixConfig} from '../../lib/remix-config.js';
-import {findMissingRoutes, logMissingRoutes} from '../../lib/missing-routes.js';
+import {
+  findMissingRoutes,
+  findReservedRoutes,
+  logMissingRoutes,
+  warnReservedRoutes,
+} from '../../lib/route-validator.js';
 
 import {Args} from '@oclif/core';
 
@@ -40,4 +45,5 @@ export default class GenerateRoute extends Command {
 export async function runCheckRoutes({directory}: {directory: string}) {
   const remixConfig = await getRemixConfig(directory);
   logMissingRoutes(findMissingRoutes(remixConfig));
+  warnReservedRoutes(findReservedRoutes(remixConfig));
 }

packages/cli/src/lib/classic-compiler/build.ts

@@ -25,7 +25,7 @@ import {
   type ServerMode,
 } from '../remix-config.js';
 import {checkLockfileStatus} from '../check-lockfile.js';
-import {findMissingRoutes} from '../missing-routes.js';
+import {findMissingRoutes} from '../route-validator.js';
 import {createRemixLogger, muteRemixLogs} from '../log.js';
 import {codegen} from '../codegen.js';
 import {

packages/cli/src/lib/missing-routes.test.ts → packages/cli/src/lib/route-validator.test.ts

@@ -1,5 +1,5 @@
 import {describe, it, expect} from 'vitest';
-import {findMissingRoutes} from './missing-routes.js';
+import {findMissingRoutes, findReservedRoutes} from './route-validator.js';
 
 const createRoute = (path: string) => ({
   routes: {
@@ -50,3 +50,41 @@ describe('missing-routes', () => {
     }
   });
 });
+
+describe('reserved-routes', () => {
+  it('returns an empty array when no routes are present', async () => {
+    expect(findReservedRoutes({routes: {}})).toHaveLength(0);
+  });
+
+  it("doesn't find routes that don't match the reserved routes", async () => {
+    expect(findReservedRoutes(createRoute('collections/:handle'))).toHaveLength(
+      0,
+    );
+  });
+
+  it('returns an array of reserved routes', async () => {
+    expect(
+      findReservedRoutes(createRoute('api/2024-10/graphql.json')),
+    ).toHaveLength(1);
+
+    expect(
+      findReservedRoutes(createRoute('api/:param/graphql.json')),
+    ).toHaveLength(1);
+  });
+
+  it('finds reserved routes /cdn/', async () => {
+    expect(findReservedRoutes(createRoute('cdn/'))).toHaveLength(1);
+
+    expect(
+      findReservedRoutes(createRoute('cdn/something/for/you.jpg')),
+    ).toHaveLength(1);
+  });
+
+  it('finds reserved routes /_t/', async () => {
+    expect(findReservedRoutes(createRoute('_t/'))).toHaveLength(1);
+
+    expect(
+      findReservedRoutes(createRoute('_t/something/for/you.jpg')),
+    ).toHaveLength(1);
+  });
+});

packages/cli/src/lib/missing-routes.ts → packages/cli/src/lib/route-validator.ts

@@ -1,6 +1,26 @@
 import {renderSuccess, renderWarning} from '@shopify/cli-kit/node/ui';
 import type {RemixConfig} from './remix-config.js';
 
+const RESERVED_ROUTES = ['^api/[^/]+/graphql.json', '^cdn/', '^_t/'];
+
+export function findReservedRoutes(config: {routes: RemixConfig['routes']}) {
+  const routes = new Set<string>();
+
+  Object.values(config.routes)
+    .filter((route) =>
+      RESERVED_ROUTES.some((pattern) =>
+        new RegExp(pattern).test(route.path ?? ''),
+      ),
+    )
+    .forEach((route) => {
+      if (route.path) {
+        routes.add(route.path);
+      }
+    });
+
+  return [...routes];
+}
+
 // Sorted by importance for better warnings.
 const REQUIRED_ROUTES = [
   '',
@@ -117,3 +137,23 @@ export function logMissingRoutes(routes: string[]) {
     });
   }
 }
+
+export function warnReservedRoutes(routes: string[]) {
+  if (routes.length) {
+    renderWarning({
+      headline: 'Reserved routes present',
+      body:
+        `Your Hydrogen project is using ${routes.length} reserved route${
+          routes.length > 1 ? 's' : ''
+        }.\n` +
+        'These routes are reserved by Shopify and may cause issues with your storefront:\n\n' +
+        routes
+          .slice(0, LINE_LIMIT - (routes.length <= LINE_LIMIT ? 0 : 1))
+          .map((route) => `• /${route}`)
+          .join('\n') +
+        (routes.length > LINE_LIMIT
+          ? `\n• ...and ${routes.length - LINE_LIMIT + 1} more`
+          : ''),
+    });
+  }
+}