Use Workerd for local development

packages/cli/package.json

@@ -21,7 +21,10 @@
     "@types/gunzip-maybe": "^1.4.0",
     "@types/prettier": "^2.7.2",
     "@types/recursive-readdir": "^2.2.1",
+    "@types/stack-trace": "^0.0.30",
     "@types/tar-fs": "^2.0.1",
+    "devtools-protocol": "^0.0.1177611",
+    "get-port": "^7.0.0",
     "@vitest/coverage-v8": "^0.33.0",
     "type-fest": "^3.6.0",
     "vitest": "^0.33.0"
@@ -38,16 +41,20 @@
     "@remix-run/dev": "1.19.1",
     "@shopify/cli-kit": "3.48.0",
     "@shopify/hydrogen-codegen": "^0.0.2",
-    "@shopify/mini-oxygen": "^1.7.0",
     "ansi-escapes": "^6.2.0",
     "diff": "^5.1.0",
     "fast-glob": "^3.2.12",
     "fs-extra": "^11.1.0",
     "gunzip-maybe": "^1.4.2",
+    "mime": "^3.0.0",
+    "miniflare": "3.20230724.0",
     "prettier": "^2.8.4",
     "recursive-readdir": "^2.2.3",
+    "source-map": "^0.7.4",
+    "stack-trace": "^1.0.0-pre2",
     "tar-fs": "^2.1.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "ws": "^8.13.0"
   },
   "bin": "dist/create-app.js",
   "exports": {

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

@@ -17,7 +17,12 @@ import {
   muteDevLogs,
   muteRemixLogs,
 } from '../../lib/log.js';
-import {deprecated, commonFlags, flagsToCamelObject} from '../../lib/flags.js';
+import {
+  deprecated,
+  commonFlags,
+  flagsToCamelObject,
+  DEFAULT_PORT,
+} from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import {Flags} from '@oclif/core';
 import {type MiniOxygen, startMiniOxygen} from '../../lib/mini-oxygen.js';
@@ -27,6 +32,7 @@ import {spawnCodegenProcess} from '../../lib/codegen.js';
 import {getAllEnvironmentVariables} from '../../lib/environment-variables.js';
 import {getConfig} from '../../lib/shopify-config.js';
 import {checkRemixVersions} from '../../lib/remix-version-check.js';
+import {findPort} from '../../lib/find-port.js';
 
 const LOG_REBUILDING = '🧱 Rebuilding...';
 const LOG_REBUILT = '🚀 Rebuilt';
@@ -73,7 +79,7 @@ export default class Dev extends Command {
 }
 
 async function runDev({
-  port,
+  port: portFlag = DEFAULT_PORT,
   path: appPath,
   useCodegen = false,
   codegenConfigPath,
@@ -154,7 +160,7 @@ async function runDev({
 
     miniOxygen = await startMiniOxygen({
       root,
-      port,
+      port: await findPort(portFlag),
       watch: true,
       buildPathWorkerFile,
       buildPathClient,
@@ -227,6 +233,8 @@ async function runDev({
           }
 
           await safeStartMiniOxygen();
+        } else {
+          await miniOxygen.reload();
         }
       },
       async onFileCreated(file: string) {

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

@@ -1,8 +1,9 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import {muteDevLogs} from '../../lib/log.js';
 import {getProjectPaths} from '../../lib/remix-config.js';
-import {commonFlags} from '../../lib/flags.js';
+import {commonFlags, DEFAULT_PORT} from '../../lib/flags.js';
 import {startMiniOxygen} from '../../lib/mini-oxygen.js';
+import {findPort} from '../../lib/find-port.js';
 
 export default class Preview extends Command {
   static description =
@@ -21,7 +22,7 @@ export default class Preview extends Command {
 }
 
 export async function runPreview({
-  port,
+  port = DEFAULT_PORT,
   path: appPath,
 }: {
   port?: number;
@@ -35,7 +36,7 @@ export async function runPreview({
 
   const miniOxygen = await startMiniOxygen({
     root,
-    port,
+    port: await findPort(port),
     buildPathClient,
     buildPathWorkerFile,
   });

packages/cli/src/lib/find-port.ts

@@ -0,0 +1,7 @@
+import getPort, {portNumbers} from 'get-port';
+
+export function findPort(portPreference: number, range = 100) {
+  return getPort({
+    port: portNumbers(portPreference, portPreference + range),
+  });
+}

packages/cli/src/lib/flags.ts

@@ -7,6 +7,8 @@ import type {CamelCasedProperties} from 'type-fest';
 import {SETUP_CSS_STRATEGIES} from './setups/css/index.js';
 import {I18N_CHOICES} from './setups/i18n/index.js';
 
+export const DEFAULT_PORT = 3000;
+
 export const commonFlags = {
   path: Flags.string({
     description:
@@ -16,7 +18,7 @@ export const commonFlags = {
   port: Flags.integer({
     description: 'Port to run the server on.',
     env: 'SHOPIFY_HYDROGEN_FLAG_PORT',
-    default: 3000,
+    default: DEFAULT_PORT,
   }),
   force: Flags.boolean({
     description:

packages/cli/src/lib/log.ts

@@ -67,10 +67,18 @@ function injectLogReplacer(
     console[method] = (...args: unknown[]) => {
       if (debounceMessage(args, debouncer?.(args))) return;
 
-      const replacer = messageReplacers.find(([matcher]) => matcher(args))?.[1];
-      if (!replacer) return originalConsole[method](...args);
+      const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
+        if (matcher(args)) acc.push(replacer);
+        return acc;
+      }, [] as Replacer[]);
+
+      if (replacers.length === 0) return originalConsole[method](...args);
+
+      const result = replacers.reduce(
+        (resultArgs, replacer) => resultArgs && replacer(resultArgs),
+        args as void | string[],
+      );
 
-      const result = replacer(args);
       if (result) return originalConsole[method](...result);
     };
   }
@@ -80,29 +88,13 @@ function injectLogReplacer(
  * Mute logs from Miniflare
  */
 export function muteDevLogs({workerReload}: {workerReload?: boolean} = {}) {
-  injectLogReplacer('log');
+  injectLogReplacer('error');
 
-  let isFirstWorkerReload = true;
   addMessageReplacers('dev', [
-    ([first]) => typeof first === 'string' && first.includes('[mf:'),
-    (args: string[]) => {
-      const first = args[0] as string;
-
-      if (workerReload !== false && first.includes('Worker reloaded')) {
-        if (isFirstWorkerReload) {
-          isFirstWorkerReload = false;
-          // return args as string[];
-          return;
-        }
-
-        return [first.replace('[mf:inf] ', '🔄 ') + '\n', ...args.slice(1)];
-      }
-
-      if (!first.includes('[mf:err]')) {
-        // Hide logs except errors
-        return;
-      }
-    },
+    // Workerd logs
+    ([first]) =>
+      typeof first === 'string' && /^\x1B\[31m(workerd\/|stack:)/.test(first),
+    () => {},
   ]);
 }
 
@@ -123,12 +115,18 @@ export function muteAuthLogs({
     process.stdout.write = ((item, cb: any) => {
       if (typeof item !== 'string') return write(item, cb);
 
-      const replacer = messageReplacers.find(([matcher]) =>
-        matcher([item]),
-      )?.[1];
-      if (!replacer) return write(item, cb);
+      const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
+        if (matcher([item])) acc.push(replacer);
+        return acc;
+      }, [] as Replacer[]);
+
+      if (replacers.length === 0) return write(item, cb);
+
+      const result = replacers.reduce(
+        (resultArgs, replacer) => resultArgs && replacer(resultArgs),
+        [item] as void | string[],
+      );
 
-      const result = replacer([item]);
       if (result) return write(result[0] as string, cb);
     }) as typeof write;
   }
@@ -193,7 +191,7 @@ export function enhanceH2Logs(options: {
   addMessageReplacers('h2-warn', [
     ([first]) => {
       const message = first?.message ?? first;
-      return typeof message === 'string' && message.startsWith('[h2:');
+      return typeof message === 'string' && message.includes('[h2:');
     },
     (args: any[]) => {
       const firstArg = args[0];
@@ -205,7 +203,7 @@ export function enhanceH2Logs(options: {
       const stringArg = errorObject?.message ?? (firstArg as string);
 
       const [, type, scope, message] =
-        stringArg.match(/^\[h2:([^:]+):([^\]]+)\]\s+(.*)$/ims) || [];
+        stringArg.match(/\[h2:([^:]+):([^\]]+)\]\s+(.*)$/ims) || [];
 
       if (!type || !scope || !message) return args;
 
@@ -219,11 +217,18 @@ export function enhanceH2Logs(options: {
       if (type === 'error' || errorObject) {
         let tryMessage = hasLinks ? lastLine : undefined;
         let stack = errorObject?.stack;
-        const cause = errorObject?.cause as
+        let cause = errorObject?.cause as
           | {[key: string]: any; graphql?: {query: string; variables: string}}
+          | string
           | undefined;
 
-        if (!!cause?.graphql?.query) {
+        if (typeof cause === 'string') {
+          try {
+            cause = JSON.parse(cause);
+          } catch {}
+        }
+
+        if (typeof cause !== 'string' && !!cause?.graphql?.query) {
           const {query, variables} = cause.graphql;
           const link = `${options.graphiqlUrl}?query=${encodeURIComponent(
             query,