@shopify/cli-hydrogen 6.0.2 → 6.1.0

package/dist/generator-templates/starter/CHANGELOG.md

@@ -1,5 +1,75 @@
 # skeleton
 
+## 1.0.1
+
+### Patch Changes
+
+- Sync up environment variable names across all example & type files. ([#1542](https://github.com/Shopify/hydrogen/pull/1542)) by [@michenly](https://github.com/michenly)
+
+- Remove error boundary from robots.txt file in the Skeleton template ([#1492](https://github.com/Shopify/hydrogen/pull/1492)) by [@andrewcohen](https://github.com/andrewcohen)
+
+- Use the worker runtime by default when running the `dev` or `preview` commands. ([#1525](https://github.com/Shopify/hydrogen/pull/1525)) by [@frandiox](https://github.com/frandiox)
+
+  Enable it in your project by adding the `--worker` flag to your package.json scripts:
+
+  ```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",
+    ...
+  }
+  ```
+
+- Update to the latest version of `@shopify/oxygen-workers-types`. ([#1494](https://github.com/Shopify/hydrogen/pull/1494)) by [@frandiox](https://github.com/frandiox)
+
+  In TypeScript projects, when updating to the latest `@shopify/remix-oxygen` adapter release, you should also update to the latest version of `@shopify/oxygen-workers-types`:
+
+  ```diff
+  "devDependencies": {
+    "@remix-run/dev": "2.1.0",
+    "@remix-run/eslint-config": "2.1.0",
+  - "@shopify/oxygen-workers-types": "^3.17.3",
+  + "@shopify/oxygen-workers-types": "^4.0.0",
+    "@shopify/prettier-config": "^1.1.2",
+    ...
+  },
+  ```
+
+- Update internal dependencies for bug resolution. ([#1496](https://github.com/Shopify/hydrogen/pull/1496)) by [@vincentezw](https://github.com/vincentezw)
+
+  Update your `@shopify/cli` dependency to avoid duplicated sub-dependencies:
+
+  ```diff
+    "dependencies": {
+  -   "@shopify/cli": "3.50.2",
+  +   "@shopify/cli": "3.51.0",
+    }
+  ```
+
+- Update all Node.js dependencies to version 18. (Not a breaking change, since Node.js 18 is already required by Remix v2.) ([#1543](https://github.com/Shopify/hydrogen/pull/1543)) by [@michenly](https://github.com/michenly)
+
+- 🐛 fix undefined menu error ([#1533](https://github.com/Shopify/hydrogen/pull/1533)) by [@michenly](https://github.com/michenly)
+
+- Add `@remix-run/server-runtime` dependency. ([#1489](https://github.com/Shopify/hydrogen/pull/1489)) by [@frandiox](https://github.com/frandiox)
+
+  Since Remix is now a peer dependency of `@shopify/remix-oxygen`, you need to add `@remix-run/server-runtime` to your dependencies, with the same version as the rest of your Remix dependencies.
+
+  ```diff
+  "dependencies": {
+    "@remix-run/react": "2.1.0"
+  + "@remix-run/server-runtime": "2.1.0"
+    ...
+  }
+  ```
+
+- Updated dependencies [[`b2a350a7`](https://github.com/Shopify/hydrogen/commit/b2a350a754ea2d29bc267c260dc298a02f8f4470), [`9b4f4534`](https://github.com/Shopify/hydrogen/commit/9b4f453407338874bd8f1a1f619b607670e021d0), [`74ea1dba`](https://github.com/Shopify/hydrogen/commit/74ea1dba9af37a146882df7ed9674be5659862b5), [`2be9ce82`](https://github.com/Shopify/hydrogen/commit/2be9ce82fd4a5121f1772bbb7349e96ed530e84e), [`a9b8bcde`](https://github.com/Shopify/hydrogen/commit/a9b8bcde96c22cedef7d87631d429199810b4a7a), [`bca112ed`](https://github.com/Shopify/hydrogen/commit/bca112ed7db49e533fe49898b663fa0dd318e6ba), [`848c6260`](https://github.com/Shopify/hydrogen/commit/848c6260a2db3a9cb0c86351f0f7128f61e028f0), [`d53b4ed7`](https://github.com/Shopify/hydrogen/commit/d53b4ed752eb0530622a666ea7dcf4b40239cafa), [`961fd8c6`](https://github.com/Shopify/hydrogen/commit/961fd8c630727784f77b9f693d2e8ff8601969fc), [`2bff9fc7`](https://github.com/Shopify/hydrogen/commit/2bff9fc75916fa95f9a9279d069408fb7a33755c), [`c8e8f6fd`](https://github.com/Shopify/hydrogen/commit/c8e8f6fd233e52cf5570b1904af710d6b907aae5), [`8fce70de`](https://github.com/Shopify/hydrogen/commit/8fce70de32bd61ee86a6d895ac43cc1f78f1bf49), [`f90e4d47`](https://github.com/Shopify/hydrogen/commit/f90e4d4713c6c1fc1e921a7ecd08e95fe5da1744), [`e8cc49fe`](https://github.com/Shopify/hydrogen/commit/e8cc49feff18f5ee72d5f6965ff2094addc23466)]:
+  - @shopify/cli-hydrogen@6.1.0
+  - @shopify/remix-oxygen@2.0.2
+  - @shopify/hydrogen@2023.10.3
+
 ## 1.0.0
 
 ### Major Changes

package/dist/generator-templates/starter/app/components/Footer.tsx

@@ -8,7 +8,9 @@ export function Footer({
 }: FooterQuery & {shop: HeaderQuery['shop']}) {
   return (
     <footer className="footer">
-      <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
+      {menu && shop?.primaryDomain?.url && (
+        <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
+      )}
     </footer>
   );
 }

package/dist/generator-templates/starter/app/components/Layout.tsx

@@ -33,12 +33,12 @@ export function Layout({
     <>
       <CartAside cart={cart} />
       <SearchAside />
-      <MobileMenuAside menu={header.menu} shop={header.shop} />
-      <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />
+      <MobileMenuAside menu={header?.menu} shop={header?.shop} />
+      {header && <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />}
       <main>{children}</main>
       <Suspense>
         <Await resolve={footer}>
-          {(footer) => <Footer menu={footer.menu} shop={header.shop} />}
+          {(footer) => <Footer menu={footer?.menu} shop={header?.shop} />}
         </Await>
       </Suspense>
     </>
@@ -94,12 +94,15 @@ function MobileMenuAside({
   shop: HeaderQuery['shop'];
 }) {
   return (
-    <Aside id="mobile-menu-aside" heading="MENU">
-      <HeaderMenu
-        menu={menu}
-        viewport="mobile"
-        primaryDomainUrl={shop.primaryDomain.url}
-      />
-    </Aside>
+    menu &&
+    shop?.primaryDomain?.url && (
+      <Aside id="mobile-menu-aside" heading="MENU">
+        <HeaderMenu
+          menu={menu}
+          viewport="mobile"
+          primaryDomainUrl={shop.primaryDomain.url}
+        />
+      </Aside>
+    )
   );
 }

package/dist/generator-templates/starter/app/routes/[robots.txt].tsx

@@ -20,33 +20,6 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   });
 }
 
-export function ErrorBoundary() {
-  const error = useRouteError();
-
-  if (isRouteErrorResponse(error)) {
-    return (
-      <div>
-        <h1>Oops</h1>
-        <p>Status: {error.status}</p>
-        <p>{error.data.message}</p>
-      </div>
-    );
-  }
-
-  let errorMessage = 'Unknown error';
-  if (error instanceof Error) {
-    errorMessage = error.message;
-  }
-
-  return (
-    <div>
-      <h1>Uh oh ...</h1>
-      <p>Something went wrong.</p>
-      <pre>{errorMessage}</pre>
-    </div>
-  );
-}
-
 function robotsTxtData({url, shopId}: {shopId?: string; url?: string}) {
   const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
 

package/dist/generator-templates/starter/package.json

@@ -2,11 +2,11 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "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"
@@ -14,10 +14,11 @@
   "prettier": "@shopify/prettier-config",
   "dependencies": {
     "@remix-run/react": "2.1.0",
-    "@shopify/cli": "3.50.0",
-    "@shopify/cli-hydrogen": "^6.0.0",
-    "@shopify/hydrogen": "^2023.10.0",
-    "@shopify/remix-oxygen": "^2.0.0",
+    "@remix-run/server-runtime": "2.1.0",
+    "@shopify/cli": "3.51.0",
+    "@shopify/cli-hydrogen": "^6.1.0",
+    "@shopify/hydrogen": "~2023.10.3",
+    "@shopify/remix-oxygen": "^2.0.2",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.6.6",
@@ -27,7 +28,7 @@
   "devDependencies": {
     "@remix-run/dev": "2.1.0",
     "@remix-run/eslint-config": "2.1.0",
-    "@shopify/oxygen-workers-types": "^3.17.3",
+    "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",
@@ -39,6 +40,6 @@
     "typescript": "^5.2.2"
   },
   "engines": {
-    "node": ">=16.13"
+    "node": ">=18.0.0"
   }
 }

package/dist/generator-templates/starter/remix.env.d.ts

@@ -24,6 +24,8 @@ declare global {
     PRIVATE_STOREFRONT_API_TOKEN: string;
     PUBLIC_STORE_DOMAIN: string;
     PUBLIC_STOREFRONT_ID: string;
+    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
+    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
   }
 }
 

package/dist/lib/check-lockfile.js

@@ -25,6 +25,7 @@ function missingLockfileWarning(shouldExit) {
 }
 function multipleLockfilesWarning(lockfiles2, shouldExit) {
   const packageManagers = {
+    "bun.lockb": "bun",
     "yarn.lock": "yarn",
     "package-lock.json": "npm",
     "pnpm-lock.yaml": "pnpm"

package/dist/lib/codegen.js

@@ -55,6 +55,7 @@ function spawnCodegenProcess({
         type: 0,
         name: "CodegenError",
         message: `Codegen process exited with code ${code}`,
+        skipOclifErrorHandling: true,
         tryMessage: "Try restarting the dev server."
       });
       process.exit(code);

package/dist/lib/flags.js

@@ -5,6 +5,7 @@ import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
 import colors from '@shopify/cli-kit/node/colors';
 import { STYLING_CHOICES } from './setups/css/index.js';
 import { I18N_CHOICES } from './setups/i18n/index.js';
+import { DEFAULT_INSPECTOR_PORT } from './mini-oxygen/common.js';
 
 const DEFAULT_PORT = 3e3;
 const commonFlags = {
@@ -18,8 +19,8 @@ const commonFlags = {
     default: DEFAULT_PORT
   }),
   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"
+    description: "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: "Overwrite the destination directory and files if they already exist.",
@@ -78,6 +79,16 @@ const commonFlags = {
     description: "Create a shortcut to the Shopify Hydrogen CLI.",
     env: "SHOPIFY_HYDROGEN_FLAG_SHORTCUT",
     allowNo: true
+  }),
+  debug: Flags.boolean({
+    description: "Enables inspector connections with a debugger.",
+    env: "SHOPIFY_HYDROGEN_FLAG_DEBUG",
+    default: false
+  }),
+  inspectorPort: Flags.integer({
+    description: "Port where the inspector will be available.",
+    env: "SHOPIFY_HYDROGEN_FLAG_INSPECTOR_PORT",
+    default: DEFAULT_INSPECTOR_PORT
   })
 };
 function flagsToCamelObject(obj) {

package/dist/lib/log.js

@@ -266,6 +266,7 @@ function createRemixLogger() {
         name: "error",
         type: 0,
         message: buildMessageBody(message, options?.details),
+        skipOclifErrorHandling: true,
         tryMessage: ""
       });
     }

package/dist/lib/mini-oxygen/assets.js

@@ -0,0 +1,118 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { createServer } from 'node:http';
+import { lookupMimeType } from '@shopify/cli-kit/node/mimes';
+
+const html = String.raw;
+const artificialAssetPrefix = "mini-oxygen/00000/11111/22222/33333";
+function buildAssetsUrl(assetsPort) {
+  return `http://localhost:${assetsPort}/${artificialAssetPrefix}/`;
+}
+function createAssetsServer(buildPathClient) {
+  return createServer(async (req, res) => {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("X-Content-Type-Options", "nosniff");
+    const pathname = req.url?.split("?")[0] || "";
+    const isValidAssetPath = pathname.startsWith(`/${artificialAssetPrefix}/`) && !pathname.includes("..");
+    const relativeAssetPath = isValidAssetPath ? pathname.replace(`/${artificialAssetPrefix}`, "") : pathname;
+    if (isValidAssetPath) {
+      const filePath = path.join(buildPathClient, relativeAssetPath);
+      const file = await fs.open(filePath).catch(() => {
+      });
+      const stat = await file?.stat().catch(() => {
+      });
+      if (file && stat?.isFile()) {
+        res.setHeader("Content-Length", stat.size);
+        res.setHeader(
+          "Content-Type",
+          lookupMimeType(filePath) || "application/octet-stream"
+        );
+        return file.createReadStream().pipe(res);
+      }
+    }
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    res.writeHead(404);
+    res.end(
+      html`<html>
+        <head>
+          <title>404: Page not found</title>
+        </head>
+        <body
+          style="display: flex; flex-direction: column; align-items: center; padding-top: 20px; font-family: Arial"
+        >
+          <h2>404 NOT FOUND</h2>
+          <p>
+            ${isValidAssetPath ? "This file was not found in the build output directory:" : "The following URL pathname is not valid:"}
+          </p>
+          <pre>${relativeAssetPath}</pre>
+        </body>
+      </html>`
+    );
+  });
+}
+const STATIC_ASSET_EXTENSIONS = Object.freeze([
+  "7Z",
+  "CSV",
+  "GIF",
+  "MIDI",
+  "PNG",
+  "TIF",
+  "ZIP",
+  "AVI",
+  "DOC",
+  "GZ",
+  "MKV",
+  "PPT",
+  "TIFF",
+  "ZST",
+  "AVIF",
+  "DOCX",
+  "ICO",
+  "MP3",
+  "PPTX",
+  "TTF",
+  "APK",
+  "DMG",
+  "ISO",
+  "MP4",
+  "PS",
+  "WEBM",
+  "BIN",
+  "EJS",
+  "JAR",
+  "OGG",
+  "RAR",
+  "WEBP",
+  "BMP",
+  "EOT",
+  "JPG",
+  "OTF",
+  "SVG",
+  "WOFF",
+  "BZ2",
+  "EPS",
+  "JPEG",
+  "PDF",
+  "SVGZ",
+  "WOFF2",
+  "CLASS",
+  "EXE",
+  "JS",
+  "PICT",
+  "SWF",
+  "XLS",
+  "CSS",
+  "FLAC",
+  "MID",
+  "PLS",
+  "TAR",
+  "XLSX",
+  "TXT",
+  "XML",
+  "MAP",
+  "HTML",
+  "GLB",
+  "JSON"
+]);
+
+export { STATIC_ASSET_EXTENSIONS, buildAssetsUrl, createAssetsServer };

package/dist/lib/mini-oxygen/common.js

@@ -2,6 +2,7 @@ import { outputToken, outputInfo, outputContent } from '@shopify/cli-kit/node/ou
 import colors from '@shopify/cli-kit/node/colors';
 import { DEV_ROUTES } from '../request-events.js';
 
+const DEFAULT_INSPECTOR_PORT = 9229;
 function logRequestLine(request, {
   responseStatus = 200,
   durationMs = 0
@@ -55,4 +56,4 @@ const OXYGEN_HEADERS_MAP = {
   }
 };
 
-export { OXYGEN_HEADERS_MAP, logRequestLine };
+export { DEFAULT_INSPECTOR_PORT, OXYGEN_HEADERS_MAP, logRequestLine };

package/dist/lib/mini-oxygen/index.js

@@ -1,3 +1,6 @@
+export { DEFAULT_INSPECTOR_PORT } from './common.js';
+export { buildAssetsUrl } from './assets.js';
+
 async function startMiniOxygen(options, useWorkerd = false) {
   if (useWorkerd) {
     const { startWorkerdServer } = await import('./workerd.js');

package/dist/lib/mini-oxygen/node.js

@@ -12,7 +12,9 @@ async function startNodeServer({
   watch = false,
   buildPathWorkerFile,
   buildPathClient,
-  env
+  env,
+  debug = false,
+  inspectorPort
 }) {
   const oxygenHeaders = Object.fromEntries(
     Object.entries(OXYGEN_HEADERS_MAP).map(([key, value]) => {
@@ -33,6 +35,9 @@ async function startNodeServer({
       )
     }
   };
+  if (debug) {
+    (await import('node:inspector')).open(inspectorPort);
+  }
   const miniOxygen = await startServer({
     script: await readFile(buildPathWorkerFile),
     workerFile: buildPathWorkerFile,
@@ -90,10 +95,17 @@ async function startNodeServer({
     showBanner(options) {
       console.log("");
       renderSuccess({
-        headline: `${options?.headlinePrefix ?? ""}MiniOxygen ${options?.mode ?? "development"} server running.`,
+        headline: `${options?.headlinePrefix ?? ""}MiniOxygen (Node Sandbox) ${options?.mode ?? "development"} server running.`,
         body: [
           `View ${options?.appName ?? "Hydrogen"} app: ${listeningAt}`,
-          ...options?.extraLines ?? []
+          ...options?.extraLines ?? [],
+          ...debug ? [
+            {
+              warn: `
+
+Debugger listening on ws://localhost:${inspectorPort}`
+            }
+          ] : []
         ]
       });
       console.log("");