feat: enables client-side navigation in Makeswift builder

Enabled by upgrading to the latest Makeswift runtime

Author: agurtovoy

.changeset/shiny-cougars-drop.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-makeswift": minor
+---
+
+Enable interaction-mode site navigation in Makeswift builder

core/app/api/makeswift/[...makeswift]/route.ts

@@ -24,8 +24,6 @@ const defaultVariants: Font['variants'] = [
 
 const handler = MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
   runtime,
-  apiOrigin: process.env.NEXT_PUBLIC_MAKESWIFT_API_ORIGIN ?? process.env.MAKESWIFT_API_ORIGIN,
-  appOrigin: process.env.NEXT_PUBLIC_MAKESWIFT_APP_ORIGIN ?? process.env.MAKESWIFT_APP_ORIGIN,
   getFonts() {
     return [
       {

core/lib/makeswift/client.ts

@@ -11,7 +11,6 @@ strict(process.env.MAKESWIFT_SITE_API_KEY, 'MAKESWIFT_SITE_API_KEY is required')
 
 export const client = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY, {
   runtime,
-  apiOrigin: process.env.NEXT_PUBLIC_MAKESWIFT_API_ORIGIN ?? process.env.MAKESWIFT_API_ORIGIN,
 });
 
 export const getPageSnapshot = async ({ path, locale }: { path: string; locale: string }) =>

core/lib/makeswift/provider.tsx

@@ -15,13 +15,7 @@ export function MakeswiftProvider({
   siteVersion: SiteVersion | null;
 }) {
   return (
-    <ReactRuntimeProvider
-      apiOrigin={process.env.NEXT_PUBLIC_MAKESWIFT_API_ORIGIN}
-      appOrigin={process.env.NEXT_PUBLIC_MAKESWIFT_APP_ORIGIN}
-      locale={locale}
-      runtime={runtime}
-      siteVersion={siteVersion}
-    >
+    <ReactRuntimeProvider locale={locale} runtime={runtime} siteVersion={siteVersion}>
       <RootStyleRegistry enableCssReset={false}>{children}</RootStyleRegistry>
     </ReactRuntimeProvider>
   );

core/lib/makeswift/runtime.ts

@@ -1,3 +1,4 @@
+import { fetch } from '@makeswift/runtime/next';
 import { registerBoxComponent } from '@makeswift/runtime/react/builtins/box';
 import { registerDividerComponent } from '@makeswift/runtime/react/builtins/divider';
 import { registerEmbedComponent } from '@makeswift/runtime/react/builtins/embed';
@@ -10,12 +11,15 @@ import { registerVideoComponent } from '@makeswift/runtime/react/builtins/video'
 import { ReactRuntimeCore } from '@makeswift/runtime/react/core';
 
 const runtime = new ReactRuntimeCore({
+  apiOrigin: process.env.NEXT_PUBLIC_MAKESWIFT_API_ORIGIN,
+  appOrigin: process.env.NEXT_PUBLIC_MAKESWIFT_APP_ORIGIN,
   breakpoints: {
     small: { width: 640, viewport: 390, label: 'Small' },
     medium: { width: 768, viewport: 765, label: 'Medium' },
     large: { width: 1024, viewport: 1000, label: 'Large' },
     screen: { width: 1280, label: 'XL' },
   },
+  fetch,
 });
 
 // Only register necessary built-in components. Omitted components are:

core/package.json

@@ -22,7 +22,7 @@
     "@conform-to/react": "^1.6.1",
     "@conform-to/zod": "^1.6.1",
     "@icons-pack/react-simple-icons": "^11.2.0",
-    "@makeswift/runtime": "0.26.4",
+    "@makeswift/runtime": "0.28.5",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/api-logs": "^0.208.0",
     "@opentelemetry/instrumentation": "^0.208.0",