Make worker runtime stable

.changeset/brown-walls-play.md

@@ -0,0 +1,18 @@
+---
+'skeleton': patch
+---
+
+The Worker Runtime for development is now considered stable. This runtime provides an environment closer to Oxygen production.
+
+Enable it in your project by adding the `--worker` flag:
+
+```diff
+"scripts": {
+  "build": "shopify hydrogen build",
+- "dev": "shopify hydrogen dev --codegen",
++ "dev": "shopify hydrogen dev --worker --codegen",
+- "preview": "npm run build && shopify hydrogen preview",
++ "preview": "npm run build && shopify hydrogen preview --worker",
+  ...
+}
+```

.changeset/silly-hornets-jog.md

@@ -0,0 +1,7 @@
+---
+'@shopify/cli-hydrogen': minor
+---
+
+The Worker Runtime for development is now considered stable. This runtime provides an environment closer to Oxygen production.
+
+Enable it locally with `h2 dev --worker` or `h2 preview --worker`. This runtime will be enabled by default in the next major release.

.changeset/silver-sheep-melt.md

@@ -5,11 +5,11 @@
 Enable debugger connections by passing `--debug` flag to the `h2 dev` command:
 
 - Current default runtime (Node.js sandbox): `h2 dev --debug`.
-- New Worker runtime: `h2 dev --debug --worker-unstable`.
+- New Worker runtime: `h2 dev --debug --worker`.
 
 You can then connect to the port `9229` (configurable with the new `--inspector-port` flag) to start step debugging.
 
-When using `--worker-unstable`, an improved version of the DevTools will be available in `localhost:9229`. Otherwise, in Chrome you can go to `chrome://inspect` to open the DevTools -- make sure the inspector port is added to the network targets.
+When using `--worker`, an improved version of the DevTools will be available in `localhost:9229`. Otherwise, in Chrome you can go to `chrome://inspect` to open the DevTools -- make sure the inspector port is added to the network targets.
 
 Alternatively, in VSCode, you can add the following to your `.vscode/launch.json`:
 

examples/customer-api/package.json

@@ -5,9 +5,9 @@
   "version": "0.0.1",
   "scripts": {
     "build": "shopify hydrogen build",
-    "dev": "shopify hydrogen dev",
+    "dev": "shopify hydrogen dev --worker",
     "ngrok": "ngrok http --domain=<your-ngrok-domain> 3000",
-    "preview": "npm run build && shopify hydrogen preview",
+    "preview": "npm run build && shopify hydrogen preview --worker",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "typecheck": "tsc --noEmit"
   },

package.json

@@ -8,7 +8,7 @@
     "ci:checks": "turbo run lint test format:check typecheck",
     "dev": "npm run dev:pkg",
     "dev:pkg": "cross-env LOCAL_DEV=true turbo dev --parallel --filter=./packages/*",
-    "dev:app": "cd templates/skeleton && cross-env LOCAL_DEV=true npm run dev",
+    "dev:app": "cd templates/skeleton && cross-env LOCAL_DEV=true npm run dev --",
     "preview": "turbo build --filter=./packages/* && npm run preview -w demo-store",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx ./packages & npm run lint -w demo-store",
     "format": "prettier --write --ignore-unknown ./packages && npm run format -w demo-store",

packages/cli/oclif.manifest.json

@@ -267,10 +267,10 @@
           "multiple": false,
           "default": 3000
         },
-        "worker-unstable": {
-          "name": "worker-unstable",
+        "worker": {
+          "name": "worker",
           "type": "boolean",
-          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox. This flag is unstable and may change without notice.",
+          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox.",
           "allowNo": false
         },
         "codegen": {
@@ -547,10 +547,10 @@
           "multiple": false,
           "default": 3000
         },
-        "worker-unstable": {
-          "name": "worker-unstable",
+        "worker": {
+          "name": "worker",
           "type": "boolean",
-          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox. This flag is unstable and may change without notice.",
+          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox.",
           "allowNo": false
         },
         "env-branch": {

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

@@ -42,7 +42,7 @@ export default class Dev extends Command {
   static flags = {
     path: commonFlags.path,
     port: commonFlags.port,
-    ['worker-unstable']: commonFlags.workerRuntime,
+    worker: commonFlags.workerRuntime,
     codegen: overrideFlag(commonFlags.codegen, {
       description:
         commonFlags.codegen.description! +
@@ -73,8 +73,6 @@ export default class Dev extends Command {
 
     await runDev({
       ...flagsToCamelObject(flags),
-      useCodegen: flags.codegen,
-      workerRuntime: flags['worker-unstable'],
       path: directory,
     });
   }
@@ -83,8 +81,8 @@ export default class Dev extends Command {
 type DevOptions = {
   port: number;
   path?: string;
-  useCodegen?: boolean;
-  workerRuntime?: boolean;
+  codegen?: boolean;
+  worker?: boolean;
   codegenConfigPath?: string;
   disableVirtualRoutes?: boolean;
   disableVersionCheck?: boolean;
@@ -97,8 +95,8 @@ type DevOptions = {
 async function runDev({
   port: appPort,
   path: appPath,
-  useCodegen = false,
-  workerRuntime = false,
+  codegen: useCodegen = false,
+  worker: workerRuntime = false,
   codegenConfigPath,
   disableVirtualRoutes,
   envBranch,

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

@@ -14,7 +14,7 @@ export default class Preview extends Command {
   static flags = {
     path: commonFlags.path,
     port: commonFlags.port,
-    'worker-unstable': commonFlags.workerRuntime,
+    worker: commonFlags.workerRuntime,
     'env-branch': commonFlags.envBranch,
     'inspector-port': commonFlags.inspectorPort,
     debug: commonFlags.debug,
@@ -25,15 +25,14 @@ export default class Preview extends Command {
 
     await runPreview({
       ...flagsToCamelObject(flags),
-      workerRuntime: flags['worker-unstable'],
     });
   }
 }
 
 type PreviewOptions = {
   port: number;
   path?: string;
-  workerRuntime?: boolean;
+  worker?: boolean;
   envBranch?: string;
   inspectorPort: number;
   debug: boolean;
@@ -42,7 +41,7 @@ type PreviewOptions = {
 export async function runPreview({
   port: appPort,
   path: appPath,
-  workerRuntime = false,
+  worker: workerRuntime = false,
   envBranch,
   inspectorPort,
   debug,

packages/cli/src/lib/flags.ts

@@ -23,8 +23,8 @@ export const commonFlags = {
   }),
   workerRuntime: Flags.boolean({
     description:
-      'Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox. This flag is unstable and may change without notice.',
-    env: 'SHOPIFY_HYDROGEN_FLAG_WORKER_UNSTABLE',
+      'Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox.',
+    env: 'SHOPIFY_HYDROGEN_FLAG_WORKER',
   }),
   force: Flags.boolean({
     description:

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

@@ -118,7 +118,7 @@ export async function startNodeServer({
     showBanner(options) {
       console.log('');
       renderSuccess({
-        headline: `${options?.headlinePrefix ?? ''}MiniOxygen ${
+        headline: `${options?.headlinePrefix ?? ''}MiniOxygen (Node Sandbox) ${
           options?.mode ?? 'development'
         } server running.`,
         body: [

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

@@ -146,7 +146,7 @@ export async function startWorkerdServer({
       renderSuccess({
         headline: `${
           options?.headlinePrefix ?? ''
-        }MiniOxygen (Unstable Worker Runtime) ${
+        }MiniOxygen (Worker Runtime) ${
           options?.mode ?? 'development'
         } server running.`,
         body: [

templates/demo-store/package.json

@@ -4,9 +4,9 @@
   "sideEffects": false,
   "version": "2.1.6",
   "scripts": {
-    "dev": "shopify hydrogen dev --codegen",
+    "dev": "shopify hydrogen dev --worker --codegen",
     "build": "shopify hydrogen build",
-    "preview": "npm run build && shopify hydrogen preview",
+    "preview": "npm run build && shopify hydrogen preview --worker",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "format": "prettier --write --ignore-unknown .",
     "format:check": "prettier --check --ignore-unknown .",

templates/skeleton/package.json

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