Make worker runtime the default (#1625)

* Deprecate --worker flag and add --legacy-runtime

* Remove --worker flag from examples and tests

* Changesets

* Fix deprecated flags for booleans

* Minor version bump

* Remove --worker flag from examples and tests

* Fix changeset

.changeset/fuzzy-phones-laugh.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': major
+---
+
+The worker runtime, previously used with `--worker` flag, is now the default runtime in the `dev` and `preview` commands. The legacy Node.js sandbox runtime can still be used with the `--legacy-runtime` but will be removed in a future release.

examples/optimistic-cart-ui/package.json

@@ -4,8 +4,8 @@
   "prettier": "@shopify/prettier-config",
   "scripts": {
     "build": "shopify hydrogen build --diff",
-    "dev": "shopify hydrogen dev --worker --codegen --diff",
-    "preview": "npm run build && shopify hydrogen preview --worker",
+    "dev": "shopify hydrogen dev --codegen --diff",
+    "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "typecheck": "tsc --noEmit",
     "codegen": "shopify hydrogen codegen"

examples/third-party-queries-caching/package.json

@@ -4,8 +4,8 @@
   "prettier": "@shopify/prettier-config",
   "scripts": {
     "build": "shopify hydrogen build --diff",
-    "dev": "shopify hydrogen dev --worker --codegen --diff",
-    "preview": "npm run build && shopify hydrogen preview --worker",
+    "dev": "shopify hydrogen dev --codegen --diff",
+    "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "typecheck": "tsc --noEmit",
     "codegen": "shopify hydrogen codegen"

packages/cli/oclif.manifest.json

@@ -256,7 +256,12 @@
         "worker": {
           "name": "worker",
           "type": "boolean",
-          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox.",
+          "hidden": true
+        },
+        "legacy-runtime": {
+          "name": "legacy-runtime",
+          "type": "boolean",
+          "description": "Run the app in a Node.js sandbox instead of an Oxygen worker.",
           "allowNo": false
         },
         "codegen": {
@@ -534,7 +539,12 @@
         "worker": {
           "name": "worker",
           "type": "boolean",
-          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox.",
+          "hidden": true
+        },
+        "legacy-runtime": {
+          "name": "legacy-runtime",
+          "type": "boolean",
+          "description": "Run the app in a Node.js sandbox instead of an Oxygen worker.",
           "allowNo": false
         },
         "env-branch": {

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

@@ -15,6 +15,7 @@ import {
 import {createRemixLogger, enhanceH2Logs, muteDevLogs} from '../../lib/log.js';
 import {
   commonFlags,
+  deprecated,
   flagsToCamelObject,
   overrideFlag,
 } from '../../lib/flags.js';
@@ -45,7 +46,8 @@ export default class Dev extends Command {
   static flags = {
     path: commonFlags.path,
     port: commonFlags.port,
-    worker: commonFlags.workerRuntime,
+    worker: deprecated('--worker', {isBoolean: true}),
+    'legacy-runtime': commonFlags.legacyRuntime,
     codegen: overrideFlag(commonFlags.codegen, {
       description:
         commonFlags.codegen.description! +
@@ -89,7 +91,7 @@ type DevOptions = {
   port: number;
   path?: string;
   codegen?: boolean;
-  worker?: boolean;
+  legacyRuntime?: boolean;
   codegenConfigPath?: string;
   disableVirtualRoutes?: boolean;
   disableVersionCheck?: boolean;
@@ -103,7 +105,7 @@ async function runDev({
   port: appPort,
   path: appPath,
   codegen: useCodegen = false,
-  worker: workerRuntime = false,
+  legacyRuntime = false,
   codegenConfigPath,
   disableVirtualRoutes,
   envBranch,
@@ -146,9 +148,9 @@ async function runDev({
   const serverBundleExists = () => fileExists(buildPathWorkerFile);
 
   inspectorPort = debug ? await findPort(inspectorPort) : inspectorPort;
-  appPort = workerRuntime ? await findPort(appPort) : appPort; // findPort is already called for Node sandbox
+  appPort = legacyRuntime ? appPort : await findPort(appPort); // findPort is already called for Node sandbox
 
-  const assetsPort = workerRuntime ? await findPort(appPort + 100) : 0;
+  const assetsPort = legacyRuntime ? 0 : await findPort(appPort + 100);
   if (assetsPort) {
     // Note: Set this env before loading Remix config!
     process.env.HYDROGEN_ASSET_BASE_URL = buildAssetsUrl(assetsPort);
@@ -193,7 +195,7 @@ async function runDev({
         buildPathClient,
         env: await envPromise,
       },
-      workerRuntime,
+      legacyRuntime,
     );
 
     enhanceH2Logs({host: miniOxygen.listeningAt, ...remixConfig});

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

@@ -1,7 +1,7 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import {muteDevLogs} from '../../lib/log.js';
 import {getProjectPaths} from '../../lib/remix-config.js';
-import {commonFlags, flagsToCamelObject} from '../../lib/flags.js';
+import {commonFlags, deprecated, flagsToCamelObject} from '../../lib/flags.js';
 import {startMiniOxygen} from '../../lib/mini-oxygen/index.js';
 import {getAllEnvironmentVariables} from '../../lib/environment-variables.js';
 import {getConfig} from '../../lib/shopify-config.js';
@@ -14,7 +14,8 @@ export default class Preview extends Command {
   static flags = {
     path: commonFlags.path,
     port: commonFlags.port,
-    worker: commonFlags.workerRuntime,
+    worker: deprecated('--worker', {isBoolean: true}),
+    'legacy-runtime': commonFlags.legacyRuntime,
     'env-branch': commonFlags.envBranch,
     'inspector-port': commonFlags.inspectorPort,
     debug: commonFlags.debug,
@@ -32,7 +33,7 @@ export default class Preview extends Command {
 type PreviewOptions = {
   port: number;
   path?: string;
-  worker?: boolean;
+  legacyRuntime?: boolean;
   envBranch?: string;
   inspectorPort: number;
   debug: boolean;
@@ -41,7 +42,7 @@ type PreviewOptions = {
 export async function runPreview({
   port: appPort,
   path: appPath,
-  worker: workerRuntime = false,
+  legacyRuntime = false,
   envBranch,
   inspectorPort,
   debug,
@@ -55,9 +56,9 @@ export async function runPreview({
   const fetchRemote = !!shop && !!storefront?.id;
   const env = await getAllEnvironmentVariables({root, fetchRemote, envBranch});
 
-  appPort = workerRuntime ? await findPort(appPort) : appPort;
+  appPort = legacyRuntime ? appPort : await findPort(appPort);
   inspectorPort = debug ? await findPort(inspectorPort) : inspectorPort;
-  const assetsPort = workerRuntime ? await findPort(appPort + 100) : 0;
+  const assetsPort = legacyRuntime ? 0 : await findPort(appPort + 100);
 
   // Note: we don't need to add any asset prefix in preview because
   // we don't control the build at this point. However, the assets server
@@ -74,7 +75,7 @@ export async function runPreview({
       inspectorPort,
       debug,
     },
-    workerRuntime,
+    legacyRuntime,
   );
 
   miniOxygen.showBanner({mode: 'preview'});

packages/cli/src/hooks/init.ts

@@ -5,10 +5,11 @@ import type {Hook} from '@oclif/core';
 const EXPERIMENTAL_VM_MODULES_FLAG = '--experimental-vm-modules';
 
 function commandNeedsVM(id = '', argv: string[] = []) {
+  // All the commands that rely on MiniOxygen's Node sandbox:
   return (
-    // All the commands that rely on MiniOxygen's Node sandbox:
-    ['hydrogen:dev', 'hydrogen:preview', 'hydrogen:debug:cpu'].includes(id) &&
-    !argv.includes('--worker')
+    'hydrogen:debug:cpu' ||
+    (['hydrogen:dev', 'hydrogen:preview'].includes(id) &&
+      argv.includes('--legacy-runtime'))
   );
 }
 

packages/cli/src/lib/flags.ts

@@ -21,9 +21,9 @@ export const commonFlags = {
     env: 'SHOPIFY_HYDROGEN_FLAG_PORT',
     default: DEFAULT_PORT,
   }),
-  workerRuntime: Flags.boolean({
+  legacyRuntime: Flags.boolean({
     description:
-      'Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox.',
+      'Run the app in a Node.js sandbox instead of an Oxygen worker.',
     env: 'SHOPIFY_HYDROGEN_FLAG_WORKER',
   }),
   force: Flags.boolean({
@@ -153,19 +153,25 @@ export function parseProcessFlags(
  * Displays an info message when the flag is used.
  * @param name The name of the flag.
  */
-export function deprecated(name: string) {
-  return Flags.custom<unknown>({
+export function deprecated(name: string, {isBoolean = false} = {}) {
+  const customFlag = Flags.custom<unknown>({
     parse: () => {
       renderInfo({
         headline: `The ${colors.bold(
           name,
-        )} flag is deprecated and will be removed in a future version of Shopify CLI.`,
+        )} flag is deprecated and will be removed in a future version of Shopify Hydrogen CLI.`,
       });
 
       return Promise.resolve(' ');
     },
     hidden: true,
   });
+
+  // Overwrite `type:'option'` to avoid requiring values for this flag
+  return {
+    ...customFlag(),
+    type: (isBoolean ? 'boolean' : 'option') as unknown as 'option',
+  };
 }
 
 export function overrideFlag<T extends Record<string, any>>(

packages/cli/src/lib/mini-oxygen/index.ts

@@ -7,12 +7,9 @@ export {buildAssetsUrl} from './assets.js';
 
 export async function startMiniOxygen(
   options: MiniOxygenOptions,
-  useWorkerd = false,
+  useNodeRuntime = false,
 ): Promise<MiniOxygenInstance> {
-  if (useWorkerd) {
-    const {startWorkerdServer} = await import('./workerd.js');
-    return startWorkerdServer(options);
-  } else {
+  if (useNodeRuntime) {
     // @ts-expect-error Valid env var for Miniflare v2:
     // https://github.com/cloudflare/miniflare/blob/f919a2eaccf30d63f435154969e4233aa3b9531c/packages/shared/src/context.ts#L18
     // Note: this must be set before importing Miniflare
@@ -21,4 +18,7 @@ export async function startMiniOxygen(
     const {startNodeServer} = await import('./node.js');
     return startNodeServer(options);
   }
+
+  const {startWorkerdServer} = await import('./workerd.js');
+  return startWorkerdServer(options);
 }

templates/demo-store/package.json

@@ -4,9 +4,9 @@
   "sideEffects": false,
   "version": "2.1.6",
   "scripts": {
-    "dev": "shopify hydrogen dev --worker --codegen",
+    "dev": "shopify hydrogen dev --codegen",
     "build": "shopify hydrogen build",
-    "preview": "npm run build && shopify hydrogen preview --worker",
+    "preview": "npm run build && shopify hydrogen preview",
     "e2e": "npx playwright test",
     "e2e:ui": "npx playwright test --ui",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",

templates/demo-store/playwright.config.ts

@@ -101,7 +101,7 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run preview --worker',
+    command: 'npm run preview',
     port: 3000,
   },
 };

templates/skeleton/package.json

@@ -5,8 +5,8 @@
   "version": "1.0.1",
   "scripts": {
     "build": "shopify hydrogen build",
-    "dev": "shopify hydrogen dev --worker --codegen",
-    "preview": "npm run build && shopify hydrogen preview --worker",
+    "dev": "shopify hydrogen dev --codegen",
+    "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "typecheck": "tsc --noEmit",
     "codegen": "shopify hydrogen codegen"