Merge remote-tracking branch 'origin/canary' into sync-integrations-makeswift

# Conflicts:
#	core/app/layout.tsx

Author: jorgemoya

.github/workflows/native-hosting.yml

@@ -0,0 +1,73 @@
+name: Native Hosting
+
+on:
+  push:
+    branches: [canary]
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy
+    runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.workflow }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Catalyst CLI
+        run: pnpm add @bigcommerce/catalyst@alpha @opennextjs/cloudflare@1.17.3
+        working-directory: core
+
+      - name: Convert proxy.ts to middleware.ts
+        working-directory: core
+        run: |
+          mv proxy.ts middleware.ts
+          sed -i 's/export const proxy/export const middleware/' middleware.ts
+          sed -i "s/export const config = {/export const config = {\n  runtime: 'experimental-edge',/" middleware.ts
+
+      - name: Build monorepo packages
+        run: pnpm --filter "./packages/*" build
+
+      - name: Generate GraphQL types
+        run: pnpm run generate
+        working-directory: core
+        env:
+          BIGCOMMERCE_STORE_HASH: ${{ vars.NATIVE_HOSTING_BIGCOMMERCE_STORE_HASH }}
+          BIGCOMMERCE_STOREFRONT_TOKEN: ${{ secrets.NATIVE_HOSTING_BIGCOMMERCE_STOREFRONT_TOKEN }}
+          BIGCOMMERCE_CHANNEL_ID: ${{ vars.NATIVE_HOSTING_BIGCOMMERCE_CHANNEL_ID }}
+
+      - name: Build
+        run: pnpm exec catalyst build
+        working-directory: core
+        env:
+          # CLI env vars
+          CATALYST_PROJECT_UUID: ${{ secrets.NATIVE_HOSTING_BIGCOMMERCE_PROJECT_UUID }}
+          # App env vars (needed by Next.js build for GraphQL calls in next.config.ts)
+          BIGCOMMERCE_STORE_HASH: ${{ vars.NATIVE_HOSTING_BIGCOMMERCE_STORE_HASH }}
+          BIGCOMMERCE_STOREFRONT_TOKEN: ${{ secrets.NATIVE_HOSTING_BIGCOMMERCE_STOREFRONT_TOKEN }}
+          BIGCOMMERCE_CHANNEL_ID: ${{ vars.NATIVE_HOSTING_BIGCOMMERCE_CHANNEL_ID }}
+          AUTH_SECRET: ${{ secrets.NATIVE_HOSTING_AUTH_SECRET }}
+
+      - name: Deploy
+        run: |
+          pnpm exec catalyst deploy --prebuilt \
+            --secret BIGCOMMERCE_STORE_HASH=${{ vars.NATIVE_HOSTING_BIGCOMMERCE_STORE_HASH }} \
+            --secret BIGCOMMERCE_STOREFRONT_TOKEN=${{ secrets.NATIVE_HOSTING_BIGCOMMERCE_STOREFRONT_TOKEN }} \
+            --secret BIGCOMMERCE_CHANNEL_ID=${{ vars.NATIVE_HOSTING_BIGCOMMERCE_CHANNEL_ID }} \
+            --secret AUTH_SECRET=${{ secrets.NATIVE_HOSTING_AUTH_SECRET }}
+        working-directory: core
+        env:
+          CATALYST_STORE_HASH: ${{ vars.NATIVE_HOSTING_BIGCOMMERCE_STORE_HASH }}
+          CATALYST_ACCESS_TOKEN: ${{ secrets.NATIVE_HOSTING_BIGCOMMERCE_ACCESS_TOKEN }}
+          CATALYST_PROJECT_UUID: ${{ secrets.NATIVE_HOSTING_BIGCOMMERCE_PROJECT_UUID }}

.github/workflows/regression-tests.yml

@@ -7,20 +7,15 @@ on:
 env:
   VERCEL_PROTECTION_BYPASS: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event.deployment_status.target_url }}
-  cancel-in-progress: true
-
 jobs:
   detect-provider:
     name: Detect Deployment Provider
     runs-on: ubuntu-latest
     outputs:
       provider: ${{ steps.detect.outputs.provider }}
-      is-preview: ${{ steps.detect.outputs.is-preview }}
       production-url: ${{ steps.detect.outputs.production-url }}
-      is-canary-branch: ${{ steps.detect.outputs.is-canary-branch }}
       branch-label: ${{ steps.detect.outputs.branch-label }}
+      is-preview: ${{ steps.detect.outputs.is-preview }}
     steps:
       - uses: actions/checkout@v4
 
@@ -30,13 +25,17 @@ jobs:
           CREATOR="${{ github.event.deployment_status.creator.login }}"
           ENVIRONMENT="${{ github.event.deployment.environment }}"
 
+          if [[ "$ENVIRONMENT" == "Preview" ]]; then
+            echo "is-preview=true" >> $GITHUB_OUTPUT
+          else
+            echo "is-preview=false" >> $GITHUB_OUTPUT
+          fi
+
           if [[ "$CREATOR" == "vercel[bot]" ]]; then
             echo "provider=vercel" >> $GITHUB_OUTPUT
+            PKG_NAME=$(node -p "require('./core/package.json').name")
+
             if [[ "$ENVIRONMENT" == "Preview" ]]; then
-              echo "is-preview=true" >> $GITHUB_OUTPUT
-              echo "is-canary-branch=false" >> $GITHUB_OUTPUT
-              echo "branch-label=" >> $GITHUB_OUTPUT
-              PKG_NAME=$(node -p "require('./core/package.json').name")
               case "$PKG_NAME" in
                 "@bigcommerce/catalyst-core")
                   echo "production-url=https://canary.catalyst-demo.site/" >> $GITHUB_OUTPUT ;;
@@ -46,58 +45,45 @@ jobs:
                   echo "::warning::No production URL configured for package: $PKG_NAME. Skipping comparison."
                   echo "production-url=" >> $GITHUB_OUTPUT ;;
               esac
+              echo "branch-label=" >> $GITHUB_OUTPUT
             else
-              PKG_NAME=$(node -p "require('./core/package.json').name")
-              echo "is-preview=false" >> $GITHUB_OUTPUT
               case "$PKG_NAME" in
                 "@bigcommerce/catalyst-core")
-                  echo "is-canary-branch=true" >> $GITHUB_OUTPUT
                   echo "branch-label=canary" >> $GITHUB_OUTPUT
                   echo "production-url=${{ github.event.deployment_status.target_url }}" >> $GITHUB_OUTPUT ;;
                 "@bigcommerce/catalyst-makeswift")
-                  echo "is-canary-branch=true" >> $GITHUB_OUTPUT
                   echo "branch-label=integrations/makeswift" >> $GITHUB_OUTPUT
                   echo "production-url=${{ github.event.deployment_status.target_url }}" >> $GITHUB_OUTPUT ;;
                 *)
-                  echo "is-canary-branch=false" >> $GITHUB_OUTPUT
                   echo "branch-label=" >> $GITHUB_OUTPUT
                   echo "production-url=" >> $GITHUB_OUTPUT ;;
               esac
             fi
 
           elif [[ "$CREATOR" == "cloudflare-pages[bot]" ]]; then
             echo "provider=cloudflare" >> $GITHUB_OUTPUT
-            echo "is-canary-branch=false" >> $GITHUB_OUTPUT
+            echo "::warning::Cloudflare production URL not yet configured. Skipping comparison."
+            echo "production-url=" >> $GITHUB_OUTPUT
             echo "branch-label=" >> $GITHUB_OUTPUT
-            if [[ "$ENVIRONMENT" == "Preview" ]]; then
-              echo "is-preview=true" >> $GITHUB_OUTPUT
-              echo "::warning::Cloudflare production URL not yet configured. Skipping comparison."
-              echo "production-url=" >> $GITHUB_OUTPUT
-            else
-              echo "is-preview=false" >> $GITHUB_OUTPUT
-              echo "production-url=" >> $GITHUB_OUTPUT
-            fi
 
           else
             echo "::warning::Unknown deployment provider: $CREATOR. Skipping audits."
             echo "provider=unknown" >> $GITHUB_OUTPUT
-            echo "is-preview=false" >> $GITHUB_OUTPUT
-            echo "is-canary-branch=false" >> $GITHUB_OUTPUT
-            echo "branch-label=" >> $GITHUB_OUTPUT
             echo "production-url=" >> $GITHUB_OUTPUT
+            echo "branch-label=" >> $GITHUB_OUTPUT
           fi
 
   unlighthouse-audit-preview:
     name: Unlighthouse Audit Preview (${{ needs.detect-provider.outputs.provider }}) - ${{ matrix.device }}
     needs: [detect-provider]
     if: needs.detect-provider.outputs.is-preview == 'true'
     runs-on: ubuntu-latest
+    concurrency:
+      group: regression-preview-${{ github.event.deployment.ref }}-${{ matrix.device }}
+      cancel-in-progress: true
     strategy:
       matrix:
         device: [desktop, mobile]
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event.deployment_status.target_url }}-${{ matrix.device }}
-      cancel-in-progress: true
 
     steps:
       - uses: actions/checkout@v4
@@ -130,14 +116,14 @@ jobs:
   unlighthouse-audit-production:
     name: Unlighthouse Audit Production (${{ needs.detect-provider.outputs.provider }}) - ${{ matrix.device }}
     needs: [detect-provider]
-    if: (needs.detect-provider.outputs.is-preview == 'true' && needs.detect-provider.outputs.production-url != '') || needs.detect-provider.outputs.is-canary-branch == 'true'
+    if: needs.detect-provider.outputs.production-url != ''
     runs-on: ubuntu-latest
+    concurrency:
+      group: regression-production-${{ github.event.deployment.environment == 'Preview' && github.event.deployment.ref || github.event.deployment.sha }}-${{ matrix.device }}
+      cancel-in-progress: ${{ github.event.deployment.environment == 'Preview' }}
     strategy:
       matrix:
         device: [desktop, mobile]
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-production-${{ matrix.device }}
-      cancel-in-progress: true
 
     steps:
       - uses: actions/checkout@v4
@@ -210,7 +196,7 @@ jobs:
   unlighthouse-report:
     name: Unlighthouse Report (${{ needs.detect-provider.outputs.provider }}) — ${{ needs.detect-provider.outputs.branch-label }}
     needs: [detect-provider, unlighthouse-audit-production]
-    if: needs.detect-provider.outputs.is-canary-branch == 'true'
+    if: needs.detect-provider.outputs.is-preview == 'false' && needs.detect-provider.outputs.production-url != ''
     runs-on: ubuntu-latest
     permissions:
       contents: write

core/app/[locale]/layout.tsx

@@ -1,12 +1,16 @@
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import { clsx } from 'clsx';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
 import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { cache, PropsWithChildren } from 'react';
 
+import '../../globals.css';
+
+import { fonts } from '~/app/fonts';
 import { CookieNotifications } from '~/app/notifications';
 import { Providers } from '~/app/providers';
 import { client } from '~/client';
@@ -136,32 +140,34 @@ export default async function RootLayout({ params, children }: Props) {
   const privacyPolicyUrl = rootData.data.site.settings?.privacy?.privacyPolicyUrl;
 
   return (
-    <>
-      <NextIntlClientProvider>
-        <ConsentManager
-          isCookieConsentEnabled={isCookieConsentEnabled}
-          privacyPolicyUrl={privacyPolicyUrl}
-          scripts={scripts}
-        >
-          <NuqsAdapter>
-            <AnalyticsProvider
-              channelId={rootData.data.channel.entityId}
-              isCookieConsentEnabled={isCookieConsentEnabled}
-              settings={rootData.data.site.settings}
-            >
-              <Providers>
-                {toastNotificationCookieData && (
-                  <CookieNotifications {...toastNotificationCookieData} />
-                )}
-                {children}
-              </Providers>
-            </AnalyticsProvider>
-          </NuqsAdapter>
-        </ConsentManager>
-      </NextIntlClientProvider>
-      <VercelComponents />
-      <ContainerQueryPolyfill />
-    </>
+    <html className={clsx(fonts.map((f) => f.variable))} lang={locale}>
+      <body className="flex min-h-screen flex-col">
+        <NextIntlClientProvider>
+          <ConsentManager
+            isCookieConsentEnabled={isCookieConsentEnabled}
+            privacyPolicyUrl={privacyPolicyUrl}
+            scripts={scripts}
+          >
+            <NuqsAdapter>
+              <AnalyticsProvider
+                channelId={rootData.data.channel.entityId}
+                isCookieConsentEnabled={isCookieConsentEnabled}
+                settings={rootData.data.site.settings}
+              >
+                <Providers>
+                  {toastNotificationCookieData && (
+                    <CookieNotifications {...toastNotificationCookieData} />
+                  )}
+                  {children}
+                </Providers>
+              </AnalyticsProvider>
+            </NuqsAdapter>
+          </ConsentManager>
+        </NextIntlClientProvider>
+        <VercelComponents />
+        <ContainerQueryPolyfill />
+      </body>
+    </html>
   );
 }
 

core/app/layout.tsx

@@ -1,26 +1,24 @@
 import { getSiteVersion } from '@makeswift/runtime/next/server';
-import { clsx } from 'clsx';
 import { PropsWithChildren } from 'react';
 
-import '../globals.css';
-
-import { fonts } from '~/app/fonts';
 import { SiteTheme } from '~/lib/makeswift/components/site-theme';
 import { MakeswiftProvider } from '~/lib/makeswift/provider';
 
 import '~/lib/makeswift/components';
 
+// Since we have a `not-found.tsx` at the root, a layout file is required even if
+// it just passes children through. Ownership of <html>/<body> lives in
+// app/[locale]/layout.tsx (to set lang={locale}) and app/not-found.tsx (for
+// non-localized 404s). See: https://next-intl.dev/docs/environments/error-files
+// TODO: Move <html>/<body> back here and set lang via Next.js `rootParams`
+// once it is available on Native Hosting (Next.js 16.2+).
 export default async function RootLayout({ children }: PropsWithChildren) {
   const siteVersion = await getSiteVersion();
 
   return (
     <MakeswiftProvider siteVersion={siteVersion}>
-      <html className={clsx(fonts.map((f) => f.variable))} lang="en">
-        <head>
-          <SiteTheme />
-        </head>
-        <body className="flex min-h-screen flex-col">{children}</body>
-      </html>
+      <SiteTheme />
+      {children}
     </MakeswiftProvider>
   );
 }

core/app/not-found.tsx

@@ -1,22 +1,35 @@
+import { clsx } from 'clsx';
+
+import '../globals.css';
+
+import { fonts } from '~/app/fonts';
+
+// Renders for non-localized requests that don't match any route (e.g. /unknown.txt)
+// or when app/[locale]/layout.tsx calls notFound() for an invalid locale. Since
+// app/layout.tsx is a passthrough, this page must own its own <html>/<body>.
 export default function RootNotFound() {
   return (
-    <main className="flex flex-1 items-center justify-center font-[family-name:var(--not-found-font-family,var(--font-family-body))]">
-      <div className="mx-auto w-full max-w-screen-2xl px-3 py-10 @container @xl:px-6 @4xl:px-20">
-        <header className="text-center">
-          <h1 className="mb-3 font-[family-name:var(--not-found-title-font-family,var(--font-family-heading))] text-3xl font-medium leading-none text-[var(--not-found-title,hsl(var(--foreground)))] @xl:text-4xl @4xl:text-5xl">
-            Not found
-          </h1>
-          <p className="mb-4 text-lg text-[var(--not-found-subtitle,hsl(var(--contrast-500)))]">
-            The page you are looking for could not be found.
-          </p>
-          <a
-            className="relative z-0 inline-flex min-h-14 select-none items-center justify-center gap-x-3 overflow-hidden rounded-full border border-[var(--button-primary-border,hsl(var(--primary)))] bg-[var(--button-primary-background,hsl(var(--primary)))] px-6 py-4 text-center font-[family-name:var(--button-font-family)] text-base font-semibold leading-normal text-[var(--button-primary-text)] after:absolute after:inset-0 after:-z-10 after:-translate-x-[105%] after:rounded-full after:bg-[var(--button-primary-background-hover,color-mix(in_oklab,hsl(var(--primary)),white_75%))] after:transition-[opacity,transform] after:duration-300 after:[animation-timing-function:cubic-bezier(0,0.25,0,1)] hover:after:translate-x-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--button-focus,hsl(var(--primary)))] focus-visible:ring-offset-2"
-            href="/"
-          >
-            <span>Go to homepage</span>
-          </a>
-        </header>
-      </div>
-    </main>
+    <html className={clsx(fonts.map((f) => f.variable))} lang="en">
+      <body className="flex min-h-screen flex-col">
+        <main className="flex flex-1 items-center justify-center font-[family-name:var(--not-found-font-family,var(--font-family-body))]">
+          <div className="mx-auto w-full max-w-screen-2xl px-3 py-10 @container @xl:px-6 @4xl:px-20">
+            <header className="text-center">
+              <h1 className="mb-3 font-[family-name:var(--not-found-title-font-family,var(--font-family-heading))] text-3xl font-medium leading-none text-[var(--not-found-title,hsl(var(--foreground)))] @xl:text-4xl @4xl:text-5xl">
+                Not found
+              </h1>
+              <p className="mb-4 text-lg text-[var(--not-found-subtitle,hsl(var(--contrast-500)))]">
+                The page you are looking for could not be found.
+              </p>
+              <a
+                className="relative z-0 inline-flex min-h-14 select-none items-center justify-center gap-x-3 overflow-hidden rounded-full border border-[var(--button-primary-border,hsl(var(--primary)))] bg-[var(--button-primary-background,hsl(var(--primary)))] px-6 py-4 text-center font-[family-name:var(--button-font-family)] text-base font-semibold leading-normal text-[var(--button-primary-text)] after:absolute after:inset-0 after:-z-10 after:-translate-x-[105%] after:rounded-full after:bg-[var(--button-primary-background-hover,color-mix(in_oklab,hsl(var(--primary)),white_75%))] after:transition-[opacity,transform] after:duration-300 after:[animation-timing-function:cubic-bezier(0,0.25,0,1)] hover:after:translate-x-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--button-focus,hsl(var(--primary)))] focus-visible:ring-offset-2"
+                href="/"
+              >
+                <span>Go to homepage</span>
+              </a>
+            </header>
+          </div>
+        </main>
+      </body>
+    </html>
   );
 }

core/client/correlation-id.ts

@@ -0,0 +1,3 @@
+import { cache } from 'react';
+
+export const getCorrelationId = cache(() => crypto.randomUUID());

core/client/index.ts

@@ -52,6 +52,14 @@ export const client = createClient({
     const requestHeaders: Record<string, string> = {};
     const locale = await getLocale();
 
+    try {
+      const { getCorrelationId } = await import('./correlation-id');
+
+      requestHeaders['X-Correlation-ID'] = getCorrelationId();
+    } catch {
+      // correlation-id imports React.cache which is unavailable during next.config.ts resolution
+    }
+
     if (fetchOptions?.cache && ['no-store', 'no-cache'].includes(fetchOptions.cache)) {
       const { headers } = await import('next/headers');
       const ipAddress = (await headers()).get('X-Forwarded-For');