Build watch (#2100)

* Improve deferPromise utility for debugging

* Implement --watch in build command

* Support --codegen with --watch in build command

* Add --build to preview command

* Fix codegen flag relationship

* Use new flag in skeleton

* Pass --entry from preview to build

* Extract resource cleanup logic

* Setup resource cleanup for build watch

* Add --watch to preview command

* Replace command in examples

* Consider classic compiler in preview

* Support --diff in preview to test in examples

* Changesets

* Silence non-actionable build logs during preview

* Typo

* Improve error when worker file is not found

* Remove default false values in flags to avoid issues with flag dependencies

* Fix diff watcher in build and preview

* Add explanatory comment for flag combination

* Use helper

* Ensure processExit is called after 5 seconds

* Try to ensure process exits

.changeset/tiny-pans-help.md

@@ -0,0 +1,6 @@
+---
+'@shopify/cli-hydrogen': minor
+---
+
+The `h2 preview` command now supports `--build` and `--watch` flags to preview the project using the build process instead of Vite's dev process.
+

examples/analytics/package.json

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

examples/b2b/package.json

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

examples/classic-remix/package.json

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

examples/custom-cart-method/package.json

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

examples/infinite-scroll/package.json

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

examples/legacy-customer-account-flow/package.json

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

examples/metaobjects/package.json

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

examples/multipass/package.json

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

examples/optimistic-cart-ui/package.json

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

examples/partytown/package.json

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

examples/subscriptions/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "shopify hydrogen build",
     "dev": "shopify hydrogen dev --codegen",
-    "preview": "npm run build && shopify hydrogen preview",
+    "preview": "shopify hydrogen preview --build",
     "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

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

packages/cli/oclif.manifest.json

@@ -68,6 +68,13 @@
           "allowNo": false,
           "type": "boolean"
         },
+        "watch": {
+          "description": "Watches for changes and rebuilds the project writing output to disk.",
+          "env": "SHOPIFY_HYDROGEN_FLAG_WATCH",
+          "name": "watch",
+          "allowNo": false,
+          "type": "boolean"
+        },
         "bundle-stats": {
           "description": "[Classic Remix Compiler] Show a bundle size summary after building. Defaults to true, use `--no-bundle-stats` to disable.",
           "name": "bundle-stats",
@@ -1282,6 +1289,64 @@
           "required": false,
           "allowNo": false,
           "type": "boolean"
+        },
+        "build": {
+          "description": "Builds the app before starting the preview server.",
+          "name": "build",
+          "allowNo": false,
+          "type": "boolean"
+        },
+        "watch": {
+          "dependsOn": [
+            "build"
+          ],
+          "description": "Watches for changes and rebuilds the project.",
+          "name": "watch",
+          "allowNo": false,
+          "type": "boolean"
+        },
+        "entry": {
+          "dependsOn": [
+            "build"
+          ],
+          "description": "Entry file for the worker. Defaults to `./server`.",
+          "env": "SHOPIFY_HYDROGEN_FLAG_ENTRY",
+          "name": "entry",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
+        "codegen": {
+          "dependsOn": [
+            "build"
+          ],
+          "description": "Automatically generates GraphQL types for your project’s Storefront API queries.",
+          "name": "codegen",
+          "required": false,
+          "allowNo": false,
+          "type": "boolean"
+        },
+        "codegen-config-path": {
+          "dependsOn": [
+            "codegen"
+          ],
+          "description": "Specifies a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if this file exists.",
+          "name": "codegen-config-path",
+          "required": false,
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
+        "diff": {
+          "dependsOn": [
+            "build"
+          ],
+          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
+          "hidden": true,
+          "name": "diff",
+          "required": false,
+          "allowNo": false,
+          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,