diff --git a/.changeset/fuzzy-phones-laugh.md b/.changeset/fuzzy-phones-laugh.md new file mode 100644 index 0000000000..aa9f755dbb --- /dev/null +++ b/.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. diff --git a/examples/optimistic-cart-ui/package.json b/examples/optimistic-cart-ui/package.json index b3f2848c29..ee1c880b0f 100644 --- a/examples/optimistic-cart-ui/package.json +++ b/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" diff --git a/examples/third-party-queries-caching/package.json b/examples/third-party-queries-caching/package.json index 88ba5658d6..eac3e060b1 100644 --- a/examples/third-party-queries-caching/package.json +++ b/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" diff --git a/packages/cli/oclif.manifest.json b/packages/cli/oclif.manifest.json index af79814f12..fc12280a3f 100644 --- a/packages/cli/oclif.manifest.json +++ b/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": { diff --git a/packages/cli/src/commands/hydrogen/dev.ts b/packages/cli/src/commands/hydrogen/dev.ts index fe7cb8eb1d..f5dbe3387a 100644 --- a/packages/cli/src/commands/hydrogen/dev.ts +++ b/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}); diff --git a/packages/cli/src/commands/hydrogen/preview.ts b/packages/cli/src/commands/hydrogen/preview.ts index a6e64cc669..415cea91eb 100644 --- a/packages/cli/src/commands/hydrogen/preview.ts +++ b/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'}); diff --git a/packages/cli/src/hooks/init.ts b/packages/cli/src/hooks/init.ts index dd43cb4682..1e39e2b2d0 100644 --- a/packages/cli/src/hooks/init.ts +++ b/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')) ); } diff --git a/packages/cli/src/lib/flags.ts b/packages/cli/src/lib/flags.ts index 05bdfed8e1..9539acc88d 100644 --- a/packages/cli/src/lib/flags.ts +++ b/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({ +export function deprecated(name: string, {isBoolean = false} = {}) { + const customFlag = Flags.custom({ 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>( diff --git a/packages/cli/src/lib/mini-oxygen/index.ts b/packages/cli/src/lib/mini-oxygen/index.ts index dd3bb6be93..ac7c982ed0 100644 --- a/packages/cli/src/lib/mini-oxygen/index.ts +++ b/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 { - 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); } diff --git a/templates/demo-store/package.json b/templates/demo-store/package.json index cb27c3dc12..4637dd66fb 100644 --- a/templates/demo-store/package.json +++ b/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 .", diff --git a/templates/demo-store/playwright.config.ts b/templates/demo-store/playwright.config.ts index 9b3a903c0e..0e0255beb3 100644 --- a/templates/demo-store/playwright.config.ts +++ b/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, }, }; diff --git a/templates/skeleton/package.json b/templates/skeleton/package.json index d5a48b55a9..d700d806ee 100644 --- a/templates/skeleton/package.json +++ b/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"