@shopify/cli-hydrogen 5.2.2 → 5.3.0

package/dist/commands/hydrogen/preview.js

@@ -1,34 +1,50 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { muteDevLogs } from '../../lib/log.js';
 import { getProjectPaths } from '../../lib/remix-config.js';
-import { commonFlags, DEFAULT_PORT } from '../../lib/flags.js';
-import { startMiniOxygen } from '../../lib/mini-oxygen.js';
+import { commonFlags, flagsToCamelObject, DEFAULT_PORT } 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';
 
 class Preview extends Command {
   static description = "Runs a Hydrogen storefront in an Oxygen worker for production.";
   static flags = {
     path: commonFlags.path,
-    port: commonFlags.port
+    port: commonFlags.port,
+    ["worker-unstable"]: commonFlags.workerRuntime,
+    ["env-branch"]: commonFlags.envBranch
   };
   async run() {
     const { flags } = await this.parse(Preview);
-    await runPreview({ ...flags });
+    await runPreview({
+      ...flagsToCamelObject(flags),
+      workerRuntime: flags["worker-unstable"]
+    });
   }
 }
 async function runPreview({
   port = DEFAULT_PORT,
-  path: appPath
+  path: appPath,
+  workerRuntime = false,
+  envBranch
 }) {
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "production";
   muteDevLogs({ workerReload: false });
   const { root, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
-  const miniOxygen = await startMiniOxygen({
-    root,
-    port,
-    buildPathClient,
-    buildPathWorkerFile
-  });
+  const { shop, storefront } = await getConfig(root);
+  const fetchRemote = !!shop && !!storefront?.id;
+  const env = await getAllEnvironmentVariables({ root, fetchRemote, envBranch });
+  const miniOxygen = await startMiniOxygen(
+    {
+      root,
+      port,
+      buildPathClient,
+      buildPathWorkerFile,
+      env
+    },
+    workerRuntime
+  );
   miniOxygen.showBanner({ mode: "preview" });
 }
 

package/dist/generator-templates/starter/app/root.tsx

@@ -63,8 +63,8 @@ export async function loader({context}: LoaderArgs) {
 
   // validate the customer access token is valid
   const {isLoggedIn, headers} = await validateCustomerAccessToken(
-    customerAccessToken,
     session,
+    customerAccessToken,
   );
 
   // defer the cart query by not awaiting it
@@ -198,17 +198,19 @@ export function CatchBoundary() {
  *  ```
  *  */
 async function validateCustomerAccessToken(
-  customerAccessToken: CustomerAccessToken,
   session: HydrogenSession,
+  customerAccessToken?: CustomerAccessToken,
 ) {
   let isLoggedIn = false;
   const headers = new Headers();
   if (!customerAccessToken?.accessToken || !customerAccessToken?.expiresAt) {
     return {isLoggedIn, headers};
   }
-  const expiresAt = new Date(customerAccessToken.expiresAt);
-  const dateNow = new Date();
+
+  const expiresAt = new Date(customerAccessToken.expiresAt).getTime();
+  const dateNow = Date.now();
   const customerAccessTokenExpired = expiresAt < dateNow;
+
   if (customerAccessTokenExpired) {
     session.unset('customerAccessToken');
     headers.append('Set-Cookie', await session.commit());

package/dist/generator-templates/starter/app/routes/account.tsx

@@ -10,7 +10,7 @@ export async function loader({request, context}: LoaderArgs) {
   const {session, storefront} = context;
   const {pathname} = new URL(request.url);
   const customerAccessToken = await session.get('customerAccessToken');
-  const isLoggedIn = Boolean(customerAccessToken?.accessToken);
+  const isLoggedIn = !!customerAccessToken?.accessToken;
   const isAccountHome = pathname === '/account' || pathname === '/account/';
   const isPrivateRoute =
     /^\/account\/(orders|orders\/.*|profile|addresses|addresses\/.*)$/.test(

package/dist/generator-templates/starter/app/routes/cart.$lines.tsx

@@ -0,0 +1,70 @@
+import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+
+/**
+ * Automatically creates a new cart based on the URL and redirects straight to checkout.
+ * Expected URL structure:
+ * ```ts
+ * /cart/<variant_id>:<quantity>
+ *
+ * ```
+ * More than one `<variant_id>:<quantity>` separated by a comma, can be supplied in the URL, for
+ * carts with more than one product variant.
+ *
+ * @param `?discount` an optional discount code to apply to the cart
+ * @example
+ * Example path creating a cart with two product variants, different quantities, and a discount code:
+ * ```ts
+ * /cart/41007289663544:1,41007289696312:2?discount=HYDROBOARD
+ *
+ * ```
+ * @preserve
+ */
+export async function loader({request, context, params}: LoaderArgs) {
+  const {cart} = context;
+  const {lines} = params;
+  if (!lines) return redirect('/cart');
+  const linesMap = lines.split(',').map((line) => {
+    const lineDetails = line.split(':');
+    const variantId = lineDetails[0];
+    const quantity = parseInt(lineDetails[1], 10);
+
+    return {
+      merchandiseId: `gid://shopify/ProductVariant/${variantId}`,
+      quantity,
+    };
+  });
+
+  const url = new URL(request.url);
+  const searchParams = new URLSearchParams(url.search);
+
+  const discount = searchParams.get('discount');
+  const discountArray = discount ? [discount] : [];
+
+  // create a cart
+  const result = await cart.create({
+    lines: linesMap,
+    discountCodes: discountArray,
+  });
+
+  const cartResult = result.cart;
+
+  if (result.errors?.length || !cartResult) {
+    throw new Response('Link may be expired. Try checking the URL.', {
+      status: 410,
+    });
+  }
+
+  // Update cart id in cookie
+  const headers = cart.setCartId(cartResult.id);
+
+  // redirect to checkout
+  if (cartResult.checkoutUrl) {
+    return redirect(cartResult.checkoutUrl, {headers});
+  } else {
+    throw new Error('No checkout URL found');
+  }
+}
+
+export default function Component() {
+  return null;
+}

package/dist/generator-templates/starter/app/routes/cart.tsx

@@ -54,7 +54,7 @@ export async function action({request, context}: ActionArgs) {
     case CartForm.ACTIONS.BuyerIdentityUpdate: {
       result = await cart.updateBuyerIdentity({
         ...inputs.buyerIdentity,
-        customerAccessToken,
+        customerAccessToken: customerAccessToken?.accessToken,
       });
       break;
     }

package/dist/generator-templates/starter/app/routes/discount.$code.tsx

@@ -0,0 +1,43 @@
+import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+
+/**
+ * Automatically applies a discount found on the url
+ * If a cart exists it's updated with the discount, otherwise a cart is created with the discount already applied
+ * @param ?redirect an optional path to return to otherwise return to the home page
+ * @example
+ * Example path applying a discount and redirecting
+ * ```ts
+ * /discount/FREESHIPPING?redirect=/products
+ *
+ * ```
+ * @preserve
+ */
+export async function loader({request, context, params}: LoaderArgs) {
+  const {cart} = context;
+  const {code} = params;
+
+  const url = new URL(request.url);
+  const searchParams = new URLSearchParams(url.search);
+  const redirectParam =
+    searchParams.get('redirect') || searchParams.get('return_to') || '/';
+
+  searchParams.delete('redirect');
+  searchParams.delete('return_to');
+
+  const redirectUrl = `${redirectParam}?${searchParams}`;
+
+  if (!code) {
+    return redirect(redirectUrl);
+  }
+
+  const result = await cart.updateDiscountCodes([code]);
+  const headers = cart.setCartId(result.cart.id);
+
+  // Using set-cookie on a 303 redirect will not work if the domain origin have port number (:3000)
+  // If there is no cart id and a new cart id is created in the progress, it will not be set in the cookie
+  // on localhost:3000
+  return redirect(redirectUrl, {
+    status: 303,
+    headers,
+  });
+}

package/dist/generator-templates/starter/app/routes/products.$handle.tsx

@@ -42,7 +42,9 @@ export async function loader({params, request, context}: LoaderArgs) {
       !option.name.startsWith('_pos') &&
       !option.name.startsWith('_psq') &&
       !option.name.startsWith('_ss') &&
-      !option.name.startsWith('_v'),
+      !option.name.startsWith('_v') &&
+      // Filter out third party tracking params
+      !option.name.startsWith('fbclid'),
   );
 
   if (!handle) {

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

@@ -14,10 +14,10 @@
   "prettier": "@shopify/prettier-config",
   "dependencies": {
     "@remix-run/react": "1.19.1",
-    "@shopify/cli": "3.48.0",
-    "@shopify/cli-hydrogen": "^5.2.2",
-    "@shopify/hydrogen": "^2023.7.6",
-    "@shopify/remix-oxygen": "^1.1.3",
+    "@shopify/cli": "3.49.2",
+    "@shopify/cli-hydrogen": "^5.3.0",
+    "@shopify/hydrogen": "^2023.7.8",
+    "@shopify/remix-oxygen": "^1.1.4",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.6.6",

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

@@ -6,6 +6,7 @@
 import '@total-typescript/ts-reset';
 
 import type {Storefront, HydrogenCart} from '@shopify/hydrogen';
+import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import type {HydrogenSession} from './server';
 
 declare global {
@@ -26,14 +27,22 @@ declare global {
   }
 }
 
-/**
- * Declare local additions to `AppLoadContext` to include the session utilities we injected in `server.ts`.
- */
 declare module '@shopify/remix-oxygen' {
+  /**
+   * Declare local additions to the Remix loader context.
+   */
   export interface AppLoadContext {
     env: Env;
     cart: HydrogenCart;
     storefront: Storefront;
     session: HydrogenSession;
+    waitUntil: ExecutionContext['waitUntil'];
+  }
+
+  /**
+   * Declare the data we expect to access via `context.session`.
+   */
+  export interface SessionData {
+    customerAccessToken: CustomerAccessToken;
   }
 }

package/dist/generator-templates/starter/server.ts

@@ -32,7 +32,7 @@ export default {
         throw new Error('SESSION_SECRET environment variable is not set');
       }
 
-      const waitUntil = (p: Promise<any>) => executionContext.waitUntil(p);
+      const waitUntil = executionContext.waitUntil.bind(executionContext);
       const [cache, session] = await Promise.all([
         caches.open('hydrogen'),
         HydrogenSession.init(request, [env.SESSION_SECRET]),
@@ -70,7 +70,7 @@ export default {
       const handleRequest = createRequestHandler({
         build: remixBuild,
         mode: process.env.NODE_ENV,
-        getLoadContext: () => ({session, storefront, env, cart}),
+        getLoadContext: () => ({session, storefront, cart, env, waitUntil}),
       });
 
       const response = await handleRequest(request);
@@ -99,10 +99,13 @@ export default {
  * swap out the cookie-based implementation with something else!
  */
 export class HydrogenSession {
-  constructor(
-    private sessionStorage: SessionStorage,
-    private session: Session,
-  ) {}
+  #sessionStorage;
+  #session;
+
+  constructor(sessionStorage: SessionStorage, session: Session) {
+    this.#sessionStorage = sessionStorage;
+    this.#session = session;
+  }
 
   static async init(request: Request, secrets: string[]) {
     const storage = createCookieSessionStorage({
@@ -120,32 +123,32 @@ export class HydrogenSession {
     return new this(storage, session);
   }
 
-  has(key: string) {
-    return this.session.has(key);
+  get has() {
+    return this.#session.has;
   }
 
-  get(key: string) {
-    return this.session.get(key);
+  get get() {
+    return this.#session.get;
   }
 
-  destroy() {
-    return this.sessionStorage.destroySession(this.session);
+  get flash() {
+    return this.#session.flash;
   }
 
-  flash(key: string, value: any) {
-    this.session.flash(key, value);
+  get unset() {
+    return this.#session.unset;
   }
 
-  unset(key: string) {
-    this.session.unset(key);
+  get set() {
+    return this.#session.set;
   }
 
-  set(key: string, value: any) {
-    this.session.set(key, value);
+  destroy() {
+    return this.#sessionStorage.destroySession(this.#session);
   }
 
   commit() {
-    return this.sessionStorage.commitSession(this.session);
+    return this.#sessionStorage.commitSession(this.#session);
   }
 }
 

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

@@ -5,7 +5,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "module": "ES2022",
     "target": "ES2022",

package/dist/lib/bundle/analyzer.js

@@ -0,0 +1,56 @@
+import { joinPath, dirname } from '@shopify/cli-kit/node/path';
+import { fileURLToPath } from 'node:url';
+import { readFile, writeFile } from '@shopify/cli-kit/node/fs';
+import colors from '@shopify/cli-kit/node/colors';
+
+async function buildBundleAnalysis(buildPath) {
+  await Promise.all([
+    writeBundleAnalyzerFile(
+      buildPath,
+      "metafile.server.json",
+      "worker-bundle-analyzer.html"
+    ),
+    writeBundleAnalyzerFile(
+      buildPath,
+      "metafile.js.json",
+      "client-bundle-analyzer.html"
+    )
+  ]);
+  return "file://" + joinPath(buildPath, "worker", "worker-bundle-analyzer.html");
+}
+async function writeBundleAnalyzerFile(buildPath, metafileName, outputFile) {
+  const metafile = await readFile(joinPath(buildPath, "worker", metafileName), {
+    encoding: "utf8"
+  });
+  const metafile64 = Buffer.from(metafile, "utf-8").toString("base64");
+  const analysisTemplate = await readFile(
+    fileURLToPath(
+      new URL(`../../lib/bundle/bundle-analyzer.html`, import.meta.url)
+    )
+  );
+  const templateWithMetafile = analysisTemplate.replace(
+    `globalThis.METAFILE = '';`,
+    `globalThis.METAFILE = '${metafile64}';`
+  );
+  await writeFile(
+    joinPath(buildPath, "worker", outputFile),
+    templateWithMetafile
+  );
+}
+async function getBundleAnalysisSummary(bundlePath) {
+  const esbuild = await import('esbuild').catch(() => {
+  });
+  if (esbuild) {
+    const metafilePath = joinPath(dirname(bundlePath), "metafile.server.json");
+    return "    \u2502\n " + (await esbuild.analyzeMetafile(await readFile(metafilePath), {
+      color: true
+    })).split("\n").filter((line) => {
+      const match = line.match(
+        /(.*)\/node_modules\/(react-dom|@remix-run|@shopify\/hydrogen|react-router|react-router-dom)\/(.*)/g
+      );
+      return !match;
+    }).slice(2, 12).join("\n").replace(/dist\/worker\/_assets\/.*$/ms, "\n").replace(/\n/g, "\n ").replace(/(\.\.\/)+node_modules\//g, (match) => colors.dim(match));
+  }
+}
+
+export { buildBundleAnalysis, getBundleAnalysisSummary };