@replohq/sandbox-runtime 0.2.0 → 1.0.0

package/_vendor/schemas/componentPreview.d.ts

@@ -0,0 +1,68 @@
+import { z } from "zod";
+export declare const MAX_COMPONENT_PREVIEW_PROPS_BYTES: number;
+export declare const componentPreviewPropNameSchema: z.ZodString;
+export declare const componentPreviewPropsSchema: z.ZodRecord<z.ZodString, z.ZodJSONSchema>;
+export declare const COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID: "replo:component-preview-iframe-rpc";
+export declare const COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION: 1;
+export declare const websiteBuilderToComponentPreviewMethodConfig: {
+    setProps: {
+        inputSchema: z.ZodObject<{
+            props: z.ZodRecord<z.ZodString, z.ZodJSONSchema>;
+            sourceRevision: z.ZodString;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
+};
+export declare const componentPreviewToWebsiteBuilderMethodConfig: {
+    iframeReady: {
+        inputSchema: z.ZodUndefined;
+        outputSchema: z.ZodVoid;
+    };
+};
+export declare const componentPreviewProductReferenceSchema: z.ZodObject<{
+    type: z.ZodLiteral<"product">;
+    loaderKey: z.ZodEnum<{
+        "shopify_storefront.product": "shopify_storefront.product";
+        "replo_products.product": "replo_products.product";
+    }>;
+    productId: z.ZodString;
+}, z.core.$strict>;
+export declare const componentPreviewPathSchema: z.ZodString;
+export declare const componentPreviewSelectionSchema: z.ZodObject<{
+    siteId: z.ZodUUID;
+    componentPath: z.ZodString;
+}, z.core.$strip>;
+export declare const componentPreviewComponentSchema: z.ZodObject<{
+    path: z.ZodString;
+    name: z.ZodString;
+}, z.core.$strip>;
+export declare const componentPreviewIndexSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    status: z.ZodLiteral<"unavailable">;
+}, z.core.$strip>, z.ZodObject<{
+    status: z.ZodLiteral<"ready">;
+    components: z.ZodArray<z.ZodObject<{
+        path: z.ZodString;
+        name: z.ZodString;
+    }, z.core.$strip>>;
+}, z.core.$strip>], "status">;
+export declare const componentPreviewSourceFileSchema: z.ZodObject<{
+    path: z.ZodString;
+    content: z.ZodString;
+}, z.core.$strip>;
+export declare const componentPreviewSourceSchema: z.ZodObject<{
+    component: z.ZodObject<{
+        path: z.ZodString;
+        name: z.ZodString;
+    }, z.core.$strip>;
+    files: z.ZodArray<z.ZodObject<{
+        path: z.ZodString;
+        content: z.ZodString;
+    }, z.core.$strip>>;
+    revision: z.ZodString;
+}, z.core.$strip>;
+export declare const componentPreviewPreparationSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    status: z.ZodLiteral<"ready">;
+    pathname: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    status: z.ZodLiteral<"siteUpdateRequired">;
+}, z.core.$strip>], "status">;

package/_vendor/schemas/componentPreview.mjs

@@ -0,0 +1,97 @@
+import { z } from 'zod';
+
+// ../schemas/componentPreview.ts
+var DATA_LOADER_KEYS = {
+  SHOPIFY_PRODUCT: "shopify_storefront.product",
+  SHOPIFY_COLLECTION: "shopify_storefront.collection",
+  SHOPIFY_COLLECTION_PRODUCTS: "shopify_storefront.collection_products",
+  SHOPIFY_METAOBJECT: "shopify_storefront.metaobject",
+  SHOPIFY_METAOBJECTS: "shopify_storefront.metaobjects",
+  REPLO_PRODUCT: "replo_products.product",
+  OKENDO_PRODUCT_REVIEWS: "okendo.product_reviews",
+  OKENDO_PRODUCT_REVIEW_AGGREGATE: "okendo.product_review_aggregate",
+  REBUY_RECOMMENDATIONS: "rebuy.recommendations",
+  LEVANTA_PRODUCT: "levanta_products.product",
+  SMILE_IO_VIP_TIERS: "smile_io.vip_tiers",
+  SMILE_IO_EARNING_RULES: "smile_io.earning_rules",
+  SMILE_IO_REWARDS: "smile_io.rewards",
+  YOTPO_PRODUCT_REVIEWS: "yotpo.product_reviews",
+  YOTPO_PRODUCT_REVIEW_AGGREGATE: "yotpo.product_review_aggregate",
+  REVIEWS_IO_PRODUCT_REVIEWS: "reviews_io.product_reviews",
+  REVIEWS_IO_PRODUCT_REVIEW_AGGREGATE: "reviews_io.product_review_aggregate",
+  STATSIG_EXPERIMENT: "statsig.experiment",
+  CONTENTFUL_ENTRY: "contentful.entry",
+  CONTENTFUL_ENTRIES: "contentful.entries"
+};
+z.enum(Object.values(DATA_LOADER_KEYS));
+
+// ../schemas/componentPreview.ts
+var MAX_COMPONENT_PREVIEW_PROPS_BYTES = 16 * 1024;
+var componentPreviewPropNameSchema = z.string().min(1).max(80).regex(/^[A-Za-z_$][\w$]*$/u).refine((name) => {
+  return !["__proto__", "constructor", "dangerouslySetInnerHTML"].includes(
+    name
+  );
+}, "Unsafe prop name");
+var componentPreviewPropsSchema = z.record(z.string(), z.json());
+var COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID = "replo:component-preview-iframe-rpc";
+var COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION = 1;
+var websiteBuilderToComponentPreviewMethodConfig = {
+  setProps: {
+    inputSchema: z.object({
+      props: componentPreviewPropsSchema,
+      sourceRevision: z.string().min(1)
+    }),
+    outputSchema: z.void()
+  }
+};
+var componentPreviewToWebsiteBuilderMethodConfig = {
+  iframeReady: {
+    inputSchema: z.undefined(),
+    outputSchema: z.void()
+  }
+};
+var componentPreviewProductReferenceSchema = z.object({
+  type: z.literal("product"),
+  loaderKey: z.enum([
+    DATA_LOADER_KEYS.SHOPIFY_PRODUCT,
+    DATA_LOADER_KEYS.REPLO_PRODUCT
+  ]),
+  productId: z.string().min(1)
+}).strict().describe("ComponentPreviewProductReference");
+var componentPreviewPathSchema = z.string().regex(
+  /^components\/[\w$.-]+\.tsx$/u,
+  "Component paths must be top-level TSX files in components/"
+);
+var componentPreviewSelectionSchema = z.object({
+  siteId: z.uuid(),
+  componentPath: componentPreviewPathSchema
+});
+var componentPreviewComponentSchema = z.object({
+  path: componentPreviewPathSchema,
+  name: z.string().min(1).max(120)
+}).describe("ComponentPreviewComponent");
+var componentPreviewIndexSchema = z.discriminatedUnion("status", [
+  z.object({ status: z.literal("unavailable") }),
+  z.object({
+    status: z.literal("ready"),
+    components: z.array(componentPreviewComponentSchema)
+  })
+]).describe("ComponentPreviewIndex");
+var componentPreviewSourceFileSchema = z.object({
+  path: z.string().min(1),
+  content: z.string()
+}).describe("ComponentPreviewSourceFile");
+var componentPreviewSourceSchema = z.object({
+  component: componentPreviewComponentSchema,
+  files: z.array(componentPreviewSourceFileSchema),
+  revision: z.string().min(1)
+}).describe("ComponentPreviewSource");
+var componentPreviewPreparationSchema = z.discriminatedUnion("status", [
+  z.object({
+    status: z.literal("ready"),
+    pathname: z.string().regex(/^\/[A-Za-z0-9/_-]+$/u)
+  }),
+  z.object({ status: z.literal("siteUpdateRequired") })
+]).describe("ComponentPreviewPreparation");
+
+export { COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID, COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION, MAX_COMPONENT_PREVIEW_PROPS_BYTES, componentPreviewComponentSchema, componentPreviewIndexSchema, componentPreviewPathSchema, componentPreviewPreparationSchema, componentPreviewProductReferenceSchema, componentPreviewPropNameSchema, componentPreviewPropsSchema, componentPreviewSelectionSchema, componentPreviewSourceFileSchema, componentPreviewSourceSchema, componentPreviewToWebsiteBuilderMethodConfig, websiteBuilderToComponentPreviewMethodConfig };

package/_vendor/schemas/generated/componentPreview.d.ts

@@ -0,0 +1,30 @@
+export type ComponentPreviewComponent = {
+    path: string;
+    name: string;
+};
+export type ComponentPreviewProductReference = {
+    type: "product";
+    loaderKey: "shopify_storefront.product" | "replo_products.product";
+    productId: string;
+};
+export type ComponentPreviewIndex = {
+    status: "unavailable";
+} | {
+    status: "ready";
+    components: ComponentPreviewComponent[];
+};
+export type ComponentPreviewSourceFile = {
+    path: string;
+    content: string;
+};
+export type ComponentPreviewSource = {
+    component: ComponentPreviewComponent;
+    files: ComponentPreviewSourceFile[];
+    revision: string;
+};
+export type ComponentPreviewPreparation = {
+    status: "ready";
+    pathname: string;
+} | {
+    status: "siteUpdateRequired";
+};

package/_vendor/schemas/generated/componentPreview.mjs

@@ -0,0 +1 @@
+

package/_vendor/schemas/generated/selectModeIframeRpc.d.ts

@@ -1,4 +1,11 @@
 import type { DisplayMode, SelectModeSelectionType, SelectModeOptimisticUpdatePayload, SelectModeFormatCommand, SelectableData, SelectModeBoundingRect, SelectModeClickPosition, SelectModeSelectionRect, SelectModeTiptapActiveMarks } from "./selectMode";
+export type IframeRuntimeBuildMetadata = {
+    packageName: string;
+    version: string;
+    branch: string | null;
+    commit: string | null;
+    builtAt: string | null;
+};
 export type SelectModeParentMessage = {
     method: "setDisplayMode";
     data: {
@@ -46,6 +53,7 @@ export type SelectModeParentMessage = {
 };
 export type SelectModeIframeMessage = {
     method: "iframeReady";
+    data?: IframeRuntimeBuildMetadata;
 } | {
     method: "elementSelected";
     data: {

package/_vendor/schemas/loaderKeys.d.ts

@@ -0,0 +1,57 @@
+import { z } from "zod";
+/**
+ * Shared data-loader key constants. Both the integration registry and the
+ * dependency resolver import from here so the strings are never duplicated.
+ *
+ * These keys serve double duty: they identify which backend loader to invoke
+ * AND are used as React Query cache key prefixes. Loader components
+ * internally construct queryKey as `[loaderKey, args]`.
+ *
+ * Naming convention: `<integration>.<objectType>` or
+ * `<integration>.<objectType>_<qualifier>`.
+ */
+export declare const DATA_LOADER_KEYS: {
+    readonly SHOPIFY_PRODUCT: "shopify_storefront.product";
+    readonly SHOPIFY_COLLECTION: "shopify_storefront.collection";
+    readonly SHOPIFY_COLLECTION_PRODUCTS: "shopify_storefront.collection_products";
+    readonly SHOPIFY_METAOBJECT: "shopify_storefront.metaobject";
+    readonly SHOPIFY_METAOBJECTS: "shopify_storefront.metaobjects";
+    readonly REPLO_PRODUCT: "replo_products.product";
+    readonly OKENDO_PRODUCT_REVIEWS: "okendo.product_reviews";
+    readonly OKENDO_PRODUCT_REVIEW_AGGREGATE: "okendo.product_review_aggregate";
+    readonly REBUY_RECOMMENDATIONS: "rebuy.recommendations";
+    readonly LEVANTA_PRODUCT: "levanta_products.product";
+    readonly SMILE_IO_VIP_TIERS: "smile_io.vip_tiers";
+    readonly SMILE_IO_EARNING_RULES: "smile_io.earning_rules";
+    readonly SMILE_IO_REWARDS: "smile_io.rewards";
+    readonly YOTPO_PRODUCT_REVIEWS: "yotpo.product_reviews";
+    readonly YOTPO_PRODUCT_REVIEW_AGGREGATE: "yotpo.product_review_aggregate";
+    readonly REVIEWS_IO_PRODUCT_REVIEWS: "reviews_io.product_reviews";
+    readonly REVIEWS_IO_PRODUCT_REVIEW_AGGREGATE: "reviews_io.product_review_aggregate";
+    readonly STATSIG_EXPERIMENT: "statsig.experiment";
+    readonly CONTENTFUL_ENTRY: "contentful.entry";
+    readonly CONTENTFUL_ENTRIES: "contentful.entries";
+};
+export type DataLoaderKey = (typeof DATA_LOADER_KEYS)[keyof typeof DATA_LOADER_KEYS];
+export declare const dataLoaderKeySchema: z.ZodEnum<{
+    "shopify_storefront.product": "shopify_storefront.product";
+    "shopify_storefront.collection": "shopify_storefront.collection";
+    "shopify_storefront.collection_products": "shopify_storefront.collection_products";
+    "shopify_storefront.metaobject": "shopify_storefront.metaobject";
+    "shopify_storefront.metaobjects": "shopify_storefront.metaobjects";
+    "replo_products.product": "replo_products.product";
+    "okendo.product_reviews": "okendo.product_reviews";
+    "okendo.product_review_aggregate": "okendo.product_review_aggregate";
+    "rebuy.recommendations": "rebuy.recommendations";
+    "levanta_products.product": "levanta_products.product";
+    "smile_io.vip_tiers": "smile_io.vip_tiers";
+    "smile_io.earning_rules": "smile_io.earning_rules";
+    "smile_io.rewards": "smile_io.rewards";
+    "yotpo.product_reviews": "yotpo.product_reviews";
+    "yotpo.product_review_aggregate": "yotpo.product_review_aggregate";
+    "reviews_io.product_reviews": "reviews_io.product_reviews";
+    "reviews_io.product_review_aggregate": "reviews_io.product_review_aggregate";
+    "statsig.experiment": "statsig.experiment";
+    "contentful.entry": "contentful.entry";
+    "contentful.entries": "contentful.entries";
+}>;

package/_vendor/schemas/selectModeIframeRpc.d.ts

@@ -2,6 +2,13 @@ import type { SelectModeIframeMessage, SelectModeParentMessage } from "./generat
 import { z } from "zod";
 export declare const SELECT_MODE_IFRAME_RPC_CHANNEL_ID: "replo:select-mode-iframe-rpc";
 export declare const SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION: 1;
+export declare const iframeRuntimeBuildMetadataSchema: z.ZodObject<{
+    packageName: z.ZodString;
+    version: z.ZodString;
+    branch: z.ZodNullable<z.ZodString>;
+    commit: z.ZodNullable<z.ZodString>;
+    builtAt: z.ZodNullable<z.ZodString>;
+}, z.core.$strip>;
 export declare const websiteBuilderToCanopyMethodConfig: {
     symbolicateSelectedElement: {
         inputSchema: z.ZodObject<{
@@ -280,7 +287,13 @@ export declare const canopyToWebsiteBuilderMethodConfig: {
         timeoutMs: number;
     };
     iframeReady: {
-        inputSchema: z.ZodUndefined;
+        inputSchema: z.ZodOptional<z.ZodObject<{
+            packageName: z.ZodString;
+            version: z.ZodString;
+            branch: z.ZodNullable<z.ZodString>;
+            commit: z.ZodNullable<z.ZodString>;
+            builtAt: z.ZodNullable<z.ZodString>;
+        }, z.core.$strip>>;
         outputSchema: z.ZodVoid;
     };
     elementSelected: {
@@ -629,6 +642,13 @@ export declare const selectModeParentMessageSchema: z.ZodDiscriminatedUnion<[z.Z
 }, z.core.$strip>], "method">;
 export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     method: z.ZodLiteral<"iframeReady">;
+    data: z.ZodOptional<z.ZodObject<{
+        packageName: z.ZodString;
+        version: z.ZodString;
+        branch: z.ZodNullable<z.ZodString>;
+        commit: z.ZodNullable<z.ZodString>;
+        builtAt: z.ZodNullable<z.ZodString>;
+    }, z.core.$strip>>;
 }, z.core.$strip>, z.ZodObject<{
     method: z.ZodLiteral<"elementSelected">;
     data: z.ZodObject<{

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -5,6 +5,13 @@ import { z } from 'zod';
 
 var SELECT_MODE_IFRAME_RPC_CHANNEL_ID = "replo:select-mode-iframe-rpc";
 var SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION = 1;
+var iframeRuntimeBuildMetadataSchema = z.object({
+  packageName: z.string(),
+  version: z.string(),
+  branch: z.string().nullable(),
+  commit: z.string().nullable(),
+  builtAt: z.string().nullable()
+}).describe("IframeRuntimeBuildMetadata");
 var websiteBuilderToCanopyMethodConfig = {
   symbolicateSelectedElement: {
     inputSchema: selectedElementSchema,
@@ -78,7 +85,7 @@ var canopyToWebsiteBuilderMethodConfig = {
     timeoutMs: 5e3
   },
   iframeReady: {
-    inputSchema: z.undefined(),
+    inputSchema: iframeRuntimeBuildMetadataSchema.optional(),
     outputSchema: z.void()
   },
   elementSelected: {
@@ -181,7 +188,8 @@ var selectModeParentMessageSchema = z.discriminatedUnion("method", [
 ]).describe("SelectModeParentMessage");
 var selectModeIframeMessageSchema = z.discriminatedUnion("method", [
   z.object({
-    method: z.literal("iframeReady")
+    method: z.literal("iframeReady"),
+    data: iframeRuntimeBuildMetadataSchema.optional()
   }),
   z.object({
     method: z.literal("elementSelected"),
@@ -220,4 +228,4 @@ var selectModeIframeMessageSchema = z.discriminatedUnion("method", [
   })
 ]).describe("SelectModeIframeMessage");
 
-export { SELECT_MODE_IFRAME_RPC_CHANNEL_ID, SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION, canopyToWebsiteBuilderMethodConfig, selectModeIframeMessageSchema, selectModeParentMessageSchema, websiteBuilderToCanopyMethodConfig };
+export { SELECT_MODE_IFRAME_RPC_CHANNEL_ID, SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION, canopyToWebsiteBuilderMethodConfig, iframeRuntimeBuildMetadataSchema, selectModeIframeMessageSchema, selectModeParentMessageSchema, websiteBuilderToCanopyMethodConfig };

package/buildMetadata.d.ts

@@ -0,0 +1,9 @@
+type BuildMetadata = {
+    packageName: string;
+    version: string;
+    branch: string | null;
+    commit: string | null;
+    builtAt: string | null;
+};
+export declare const BUILD_METADATA: BuildMetadata;
+export {};

package/buildMetadata.js

@@ -0,0 +1,7 @@
+export const BUILD_METADATA = {
+  "packageName": "@replohq/sandbox-runtime",
+  "version": "1.0.0",
+  "branch": "HEAD",
+  "commit": "1818d468bc1a4ba23ac3fad1b296eb8f2f94155c",
+  "builtAt": "2026-08-19T03:50:51.141Z"
+};

package/buildMetadata.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../buildMetadata.ts"],
+  "sourcesContent": ["type BuildMetadata = {\n  packageName: string;\n  version: string;\n  branch: string | null;\n  commit: string | null;\n  builtAt: string | null;\n};\n\nexport const BUILD_METADATA: BuildMetadata = {\n  packageName: \"@replohq/sandbox-runtime\",\n  version: \"0.0.0-dev\",\n  branch: null,\n  commit: null,\n  builtAt: null,\n};\n"],
+  "mappings": "AAQO,MAAM,iBAAgC;AAAA,EAC3C,aAAa;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX;",
+  "names": []
+}

package/next/component-preview-href.d.ts

@@ -0,0 +1,5 @@
+export declare function getComponentPreviewHref({ currentUrl, props, sourceRevision, }: {
+    currentUrl: string;
+    props: Record<string, unknown>;
+    sourceRevision: string;
+}): string;

package/next/component-preview-href.js

@@ -0,0 +1,14 @@
+function getComponentPreviewHref({
+  currentUrl,
+  props,
+  sourceRevision
+}) {
+  const url = new URL(currentUrl);
+  url.searchParams.set("props", JSON.stringify(props));
+  url.searchParams.set("sourceRevision", sourceRevision);
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+export {
+  getComponentPreviewHref
+};
+//# sourceMappingURL=component-preview-href.js.map

package/next/component-preview-href.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../next/component-preview-href.ts"],
+  "sourcesContent": ["export function getComponentPreviewHref({\n  currentUrl,\n  props,\n  sourceRevision,\n}: {\n  currentUrl: string;\n  props: Record<string, unknown>;\n  sourceRevision: string;\n}) {\n  const url = new URL(currentUrl);\n  url.searchParams.set(\"props\", JSON.stringify(props));\n  url.searchParams.set(\"sourceRevision\", sourceRevision);\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n"],
+  "mappings": "AAAO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,MAAM,IAAI,IAAI,UAAU;AAC9B,MAAI,aAAa,IAAI,SAAS,KAAK,UAAU,KAAK,CAAC;AACnD,MAAI,aAAa,IAAI,kBAAkB,cAAc;AACrD,SAAO,GAAG,IAAI,QAAQ,GAAG,IAAI,MAAM,GAAG,IAAI,IAAI;AAChD;",
+  "names": []
+}

package/next/component-preview-navigation.d.ts

@@ -0,0 +1 @@
+export declare function ComponentPreviewNavigation(): null;

package/next/component-preview-navigation.js

@@ -0,0 +1,66 @@
+"use client";
+import { useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { useIframeRpcChannel } from "../_vendor/replo-utils/react/use-iframe-rpc-channel.mjs";
+import {
+  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,
+  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,
+  componentPreviewToWebsiteBuilderMethodConfig,
+  websiteBuilderToComponentPreviewMethodConfig
+} from "../_vendor/schemas/componentPreview.mjs";
+import {
+  createIframeRpcChannel,
+  createIframeRpcRemote
+} from "../_vendor/schemas/iframeRpcChannel.mjs";
+import { getComponentPreviewHref } from "./component-preview-href";
+function ComponentPreviewNavigation() {
+  const router = useRouter();
+  useIframeRpcChannel(
+    useMemo(() => {
+      if (typeof window === "undefined" || !document.referrer) {
+        return null;
+      }
+      const parentOrigin = new URL(document.referrer).origin;
+      const rpcChannel = createIframeRpcChannel({
+        subscriberWindow: window,
+        channelIdentifier: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,
+        version: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,
+        getTargetWindow: () => {
+          return window.parent === window ? null : window.parent;
+        },
+        targetOrigin: parentOrigin,
+        isExpectedMessage: (event) => {
+          return event.source === window.parent && event.origin === parentOrigin;
+        },
+        outgoingMethods: componentPreviewToWebsiteBuilderMethodConfig,
+        incomingMethods: websiteBuilderToComponentPreviewMethodConfig,
+        handlers: {
+          setProps: ({ props, sourceRevision }) => {
+            const nextHref = getComponentPreviewHref({
+              currentUrl: window.location.href,
+              props,
+              sourceRevision
+            });
+            const currentHref = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+            if (nextHref !== currentHref) {
+              router.replace(nextHref, { scroll: false });
+            }
+          }
+        }
+      });
+      return {
+        ...rpcChannel,
+        subscribe() {
+          const unsubscribe = rpcChannel.subscribe();
+          createIframeRpcRemote(rpcChannel).iframeReady();
+          return unsubscribe;
+        }
+      };
+    }, [router])
+  );
+  return null;
+}
+export {
+  ComponentPreviewNavigation
+};
+//# sourceMappingURL=component-preview-navigation.js.map

package/next/component-preview-navigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../next/component-preview-navigation.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\n\nimport { useIframeRpcChannel } from \"replo-utils/react/use-iframe-rpc-channel\";\nimport {\n  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,\n  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,\n  componentPreviewToWebsiteBuilderMethodConfig,\n  websiteBuilderToComponentPreviewMethodConfig,\n} from \"schemas/componentPreview\";\nimport {\n  createIframeRpcChannel,\n  createIframeRpcRemote,\n} from \"schemas/iframeRpcChannel\";\n\nimport { getComponentPreviewHref } from \"./component-preview-href\";\n\nexport function ComponentPreviewNavigation() {\n  const router = useRouter();\n  useIframeRpcChannel(\n    useMemo(() => {\n      if (typeof window === \"undefined\" || !document.referrer) {\n        return null;\n      }\n      const parentOrigin = new URL(document.referrer).origin;\n      const rpcChannel = createIframeRpcChannel({\n        subscriberWindow: window,\n        channelIdentifier: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,\n        version: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,\n        getTargetWindow: () => {\n          return window.parent === window ? null : window.parent;\n        },\n        targetOrigin: parentOrigin,\n        isExpectedMessage: (event) => {\n          return (\n            event.source === window.parent && event.origin === parentOrigin\n          );\n        },\n        outgoingMethods: componentPreviewToWebsiteBuilderMethodConfig,\n        incomingMethods: websiteBuilderToComponentPreviewMethodConfig,\n        handlers: {\n          setProps: ({ props, sourceRevision }) => {\n            const nextHref = getComponentPreviewHref({\n              currentUrl: window.location.href,\n              props,\n              sourceRevision,\n            });\n            const currentHref = `${window.location.pathname}${window.location.search}${window.location.hash}`;\n            if (nextHref !== currentHref) {\n              router.replace(nextHref, { scroll: false });\n            }\n          },\n        },\n      });\n      return {\n        ...rpcChannel,\n        subscribe() {\n          const unsubscribe = rpcChannel.subscribe();\n          createIframeRpcRemote(rpcChannel).iframeReady();\n          return unsubscribe;\n        },\n      };\n    }, [router]),\n  );\n\n  return null;\n}\n"],
+  "mappings": ";AAEA,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,+BAA+B;AAEjC,SAAS,6BAA6B;AAC3C,QAAM,SAAS,UAAU;AACzB;AAAA,IACE,QAAQ,MAAM;AACZ,UAAI,OAAO,WAAW,eAAe,CAAC,SAAS,UAAU;AACvD,eAAO;AAAA,MACT;AACA,YAAM,eAAe,IAAI,IAAI,SAAS,QAAQ,EAAE;AAChD,YAAM,aAAa,uBAAuB;AAAA,QACxC,kBAAkB;AAAA,QAClB,mBAAmB;AAAA,QACnB,SAAS;AAAA,QACT,iBAAiB,MAAM;AACrB,iBAAO,OAAO,WAAW,SAAS,OAAO,OAAO;AAAA,QAClD;AAAA,QACA,cAAc;AAAA,QACd,mBAAmB,CAAC,UAAU;AAC5B,iBACE,MAAM,WAAW,OAAO,UAAU,MAAM,WAAW;AAAA,QAEvD;AAAA,QACA,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,UAAU,CAAC,EAAE,OAAO,eAAe,MAAM;AACvC,kBAAM,WAAW,wBAAwB;AAAA,cACvC,YAAY,OAAO,SAAS;AAAA,cAC5B;AAAA,cACA;AAAA,YACF,CAAC;AACD,kBAAM,cAAc,GAAG,OAAO,SAAS,QAAQ,GAAG,OAAO,SAAS,MAAM,GAAG,OAAO,SAAS,IAAI;AAC/F,gBAAI,aAAa,aAAa;AAC5B,qBAAO,QAAQ,UAAU,EAAE,QAAQ,MAAM,CAAC;AAAA,YAC5C;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AACD,aAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY;AACV,gBAAM,cAAc,WAAW,UAAU;AACzC,gCAAsB,UAAU,EAAE,YAAY;AAC9C,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,GAAG,CAAC,MAAM,CAAC;AAAA,EACb;AAEA,SAAO;AACT;",
+  "names": []
+}

package/next/component-preview.d.ts

@@ -1,5 +1,8 @@
 import type { ComponentType } from "react";
-export declare function createComponentPreviewPage(Component: ComponentType<Record<string, unknown>>): ({ searchParams, }: {
+import type { ComponentPreviewProductReference } from "../_vendor/schemas/generated/componentPreview";
+export declare function createComponentPreviewPage(Component: ComponentType<Record<string, unknown>>, options?: {
+    getProduct: (reference: ComponentPreviewProductReference) => Promise<unknown>;
+}): ({ searchParams, }: {
     searchParams: Promise<{
         props?: string | string[];
     }>;

package/next/component-preview.js

@@ -1,35 +1,70 @@
-import { jsx } from "react/jsx-runtime";
-const MAX_PREVIEW_PROPS_BYTES = 16 * 1024;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  componentPreviewProductReferenceSchema,
+  componentPreviewPropsSchema,
+  MAX_COMPONENT_PREVIEW_PROPS_BYTES
+} from "../_vendor/schemas/componentPreview.mjs";
+import { DocumentReadyBeacon } from "../DocumentReadyBeacon";
+import { NextErrorReporter } from "../NextErrorReporter";
+import { ComponentPreviewNavigation } from "./component-preview-navigation";
 const BLOCKED_PROP_NAMES = /* @__PURE__ */ new Set([
   "__proto__",
   "constructor",
   "dangerouslySetInnerHTML"
 ]);
-function getPreviewProps(value) {
-  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+async function getPreviewProps({
+  value,
+  getProduct
+}) {
+  const previewPropsResult = componentPreviewPropsSchema.safeParse(value);
+  if (!previewPropsResult.success) {
     return {};
   }
-  return Object.fromEntries(
-    Object.entries(value).filter(([name]) => !BLOCKED_PROP_NAMES.has(name))
-  );
+  const previewProps = {};
+  for (const [name, propValue] of Object.entries(previewPropsResult.data)) {
+    if (BLOCKED_PROP_NAMES.has(name)) {
+      continue;
+    }
+    const productReferenceResult = componentPreviewProductReferenceSchema.safeParse(propValue);
+    if (!productReferenceResult.success) {
+      previewProps[name] = propValue;
+      continue;
+    }
+    if (getProduct) {
+      previewProps[name] = await getProduct(productReferenceResult.data);
+    }
+  }
+  return previewProps;
 }
-function parseProps(value) {
-  if (typeof value !== "string" || new TextEncoder().encode(value).byteLength > MAX_PREVIEW_PROPS_BYTES) {
+async function parseProps({
+  value,
+  getProduct
+}) {
+  if (typeof value !== "string" || new TextEncoder().encode(value).byteLength > MAX_COMPONENT_PREVIEW_PROPS_BYTES) {
     return {};
   }
+  let parsed;
   try {
-    const parsed = JSON.parse(value);
-    return getPreviewProps(parsed);
+    parsed = JSON.parse(value);
   } catch {
     return {};
   }
+  return await getPreviewProps({ value: parsed, getProduct });
 }
-function createComponentPreviewPage(Component) {
+function createComponentPreviewPage(Component, options) {
   return async function ComponentPreviewPage({
     searchParams
   }) {
-    const props = parseProps((await searchParams).props);
-    return /* @__PURE__ */ jsx(Component, { ...props });
+    const props = await parseProps({
+      value: (await searchParams).props,
+      getProduct: options?.getProduct
+    });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComponentPreviewNavigation, {}),
+      /* @__PURE__ */ jsx(DocumentReadyBeacon, {}),
+      /* @__PURE__ */ jsx(NextErrorReporter, {}),
+      /* @__PURE__ */ jsx(Component, { ...props })
+    ] });
   };
 }
 export {

package/next/component-preview.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../next/component-preview.tsx"],
-  "sourcesContent": ["import type { ComponentType } from \"react\";\n\nconst MAX_PREVIEW_PROPS_BYTES = 16 * 1024;\nconst BLOCKED_PROP_NAMES = new Set([\n  \"__proto__\",\n  \"constructor\",\n  \"dangerouslySetInnerHTML\",\n]);\n\nfunction getPreviewProps(value: unknown): Record<string, unknown> {\n  if (value === null || typeof value !== \"object\" || Array.isArray(value)) {\n    return {};\n  }\n\n  return Object.fromEntries(\n    Object.entries(value).filter(([name]) => !BLOCKED_PROP_NAMES.has(name)),\n  );\n}\n\nfunction parseProps(value: string | string[] | undefined) {\n  if (\n    typeof value !== \"string\" ||\n    new TextEncoder().encode(value).byteLength > MAX_PREVIEW_PROPS_BYTES\n  ) {\n    return {};\n  }\n  try {\n    const parsed: unknown = JSON.parse(value);\n    return getPreviewProps(parsed);\n  } catch {\n    return {};\n  }\n}\n\nexport function createComponentPreviewPage(\n  Component: ComponentType<Record<string, unknown>>,\n) {\n  return async function ComponentPreviewPage({\n    searchParams,\n  }: {\n    searchParams: Promise<{ props?: string | string[] }>;\n  }) {\n    const props = parseProps((await searchParams).props);\n    return <Component {...props} />;\n  };\n}\n"],
-  "mappings": "AA2CW;AAzCX,MAAM,0BAA0B,KAAK;AACrC,MAAM,qBAAqB,oBAAI,IAAI;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAED,SAAS,gBAAgB,OAAyC;AAChE,MAAI,UAAU,QAAQ,OAAO,UAAU,YAAY,MAAM,QAAQ,KAAK,GAAG;AACvE,WAAO,CAAC;AAAA,EACV;AAEA,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,mBAAmB,IAAI,IAAI,CAAC;AAAA,EACxE;AACF;AAEA,SAAS,WAAW,OAAsC;AACxD,MACE,OAAO,UAAU,YACjB,IAAI,YAAY,EAAE,OAAO,KAAK,EAAE,aAAa,yBAC7C;AACA,WAAO,CAAC;AAAA,EACV;AACA,MAAI;AACF,UAAM,SAAkB,KAAK,MAAM,KAAK;AACxC,WAAO,gBAAgB,MAAM;AAAA,EAC/B,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;AAEO,SAAS,2BACd,WACA;AACA,SAAO,eAAe,qBAAqB;AAAA,IACzC;AAAA,EACF,GAEG;AACD,UAAM,QAAQ,YAAY,MAAM,cAAc,KAAK;AACnD,WAAO,oBAAC,aAAW,GAAG,OAAO;AAAA,EAC/B;AACF;",
+  "sourcesContent": ["import type { ComponentType } from \"react\";\nimport type { ComponentPreviewProductReference } from \"schemas/generated/componentPreview\";\n\nimport {\n  componentPreviewProductReferenceSchema,\n  componentPreviewPropsSchema,\n  MAX_COMPONENT_PREVIEW_PROPS_BYTES,\n} from \"schemas/componentPreview\";\n\nimport { DocumentReadyBeacon } from \"../DocumentReadyBeacon\";\nimport { NextErrorReporter } from \"../NextErrorReporter\";\nimport { ComponentPreviewNavigation } from \"./component-preview-navigation\";\n\nconst BLOCKED_PROP_NAMES = new Set([\n  \"__proto__\",\n  \"constructor\",\n  \"dangerouslySetInnerHTML\",\n]);\n\nasync function getPreviewProps({\n  value,\n  getProduct,\n}: {\n  value: unknown;\n  getProduct?: (\n    reference: ComponentPreviewProductReference,\n  ) => Promise<unknown>;\n}): Promise<Record<string, unknown>> {\n  const previewPropsResult = componentPreviewPropsSchema.safeParse(value);\n  if (!previewPropsResult.success) {\n    return {};\n  }\n\n  const previewProps: Record<string, unknown> = {};\n  for (const [name, propValue] of Object.entries(previewPropsResult.data)) {\n    if (BLOCKED_PROP_NAMES.has(name)) {\n      continue;\n    }\n    const productReferenceResult =\n      componentPreviewProductReferenceSchema.safeParse(propValue);\n    if (!productReferenceResult.success) {\n      previewProps[name] = propValue;\n      continue;\n    }\n    if (getProduct) {\n      previewProps[name] = await getProduct(productReferenceResult.data);\n    }\n  }\n  return previewProps;\n}\n\nasync function parseProps({\n  value,\n  getProduct,\n}: {\n  value: string | string[] | undefined;\n  getProduct?: (\n    reference: ComponentPreviewProductReference,\n  ) => Promise<unknown>;\n}) {\n  if (\n    typeof value !== \"string\" ||\n    new TextEncoder().encode(value).byteLength >\n      MAX_COMPONENT_PREVIEW_PROPS_BYTES\n  ) {\n    return {};\n  }\n  let parsed: unknown;\n  try {\n    parsed = JSON.parse(value);\n  } catch {\n    return {};\n  }\n  return await getPreviewProps({ value: parsed, getProduct });\n}\n\nexport function createComponentPreviewPage(\n  Component: ComponentType<Record<string, unknown>>,\n  options?: {\n    getProduct: (\n      reference: ComponentPreviewProductReference,\n    ) => Promise<unknown>;\n  },\n) {\n  return async function ComponentPreviewPage({\n    searchParams,\n  }: {\n    searchParams: Promise<{ props?: string | string[] }>;\n  }) {\n    const props = await parseProps({\n      value: (await searchParams).props,\n      getProduct: options?.getProduct,\n    });\n    return (\n      <>\n        <ComponentPreviewNavigation />\n        <DocumentReadyBeacon />\n        <NextErrorReporter />\n        <Component {...props} />\n      </>\n    );\n  };\n}\n"],
+  "mappings": "AA8FM,mBACE,KADF;AA3FN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,kCAAkC;AAE3C,MAAM,qBAAqB,oBAAI,IAAI;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAED,eAAe,gBAAgB;AAAA,EAC7B;AAAA,EACA;AACF,GAKqC;AACnC,QAAM,qBAAqB,4BAA4B,UAAU,KAAK;AACtE,MAAI,CAAC,mBAAmB,SAAS;AAC/B,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,eAAwC,CAAC;AAC/C,aAAW,CAAC,MAAM,SAAS,KAAK,OAAO,QAAQ,mBAAmB,IAAI,GAAG;AACvE,QAAI,mBAAmB,IAAI,IAAI,GAAG;AAChC;AAAA,IACF;AACA,UAAM,yBACJ,uCAAuC,UAAU,SAAS;AAC5D,QAAI,CAAC,uBAAuB,SAAS;AACnC,mBAAa,IAAI,IAAI;AACrB;AAAA,IACF;AACA,QAAI,YAAY;AACd,mBAAa,IAAI,IAAI,MAAM,WAAW,uBAAuB,IAAI;AAAA,IACnE;AAAA,EACF;AACA,SAAO;AACT;AAEA,eAAe,WAAW;AAAA,EACxB;AAAA,EACA;AACF,GAKG;AACD,MACE,OAAO,UAAU,YACjB,IAAI,YAAY,EAAE,OAAO,KAAK,EAAE,aAC9B,mCACF;AACA,WAAO,CAAC;AAAA,EACV;AACA,MAAI;AACJ,MAAI;AACF,aAAS,KAAK,MAAM,KAAK;AAAA,EAC3B,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACA,SAAO,MAAM,gBAAgB,EAAE,OAAO,QAAQ,WAAW,CAAC;AAC5D;AAEO,SAAS,2BACd,WACA,SAKA;AACA,SAAO,eAAe,qBAAqB;AAAA,IACzC;AAAA,EACF,GAEG;AACD,UAAM,QAAQ,MAAM,WAAW;AAAA,MAC7B,QAAQ,MAAM,cAAc;AAAA,MAC5B,YAAY,SAAS;AAAA,IACvB,CAAC;AACD,WACE,iCACE;AAAA,0BAAC,8BAA2B;AAAA,MAC5B,oBAAC,uBAAoB;AAAA,MACrB,oBAAC,qBAAkB;AAAA,MACnB,oBAAC,aAAW,GAAG,OAAO;AAAA,OACxB;AAAA,EAEJ;AACF;",
   "names": []
 }