@replohq/sdk 0.1.0

package/loaders/okendo-reviews-loader.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { z } from "zod";
+declare const okendoReviewsOutputSchema: z.ZodObject<{
+    reviews: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        title: z.ZodOptional<z.ZodString>;
+        body: z.ZodOptional<z.ZodString>;
+        rating: z.ZodOptional<z.ZodNumber>;
+        productName: z.ZodOptional<z.ZodString>;
+        reviewerName: z.ZodOptional<z.ZodString>;
+        dateCreated: z.ZodOptional<z.ZodString>;
+        status: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
+type OkendoReviewsData = z.infer<typeof okendoReviewsOutputSchema>;
+type OkendoReviewsLoaderProps = {
+    loaderKey: string;
+    shopifyProductId: string;
+    children: (data: OkendoReviewsData) => ReactNode;
+    fallback?: ReactNode;
+};
+export declare function OkendoReviewsLoader({ loaderKey, shopifyProductId, children, fallback, }: OkendoReviewsLoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/loaders/okendo-reviews-loader.js

@@ -0,0 +1,54 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { z } from "zod";
+import { invokeLoader } from "./invoke-loader";
+import { LoaderErrorBoundary } from "./loader-error-boundary";
+import { okendoReviewSchema } from "./loader-schemas";
+const okendoReviewsOutputSchema = z.object({
+  reviews: z.array(okendoReviewSchema)
+});
+function OkendoReviewsLoaderInner({
+  loaderKey,
+  shopifyProductId,
+  children
+}) {
+  const queryResult = useSuspenseQuery({
+    queryKey: [loaderKey, { shopifyProductId }],
+    queryFn: async () => {
+      const loadedData = await invokeLoader({
+        loaderKey,
+        args: { shopifyProductId }
+      });
+      return okendoReviewsOutputSchema.parse(loadedData);
+    }
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: children(queryResult.data) });
+}
+function OkendoReviewsLoader({
+  loaderKey,
+  shopifyProductId,
+  children,
+  fallback
+}) {
+  return /* @__PURE__ */ jsx(
+    LoaderErrorBoundary,
+    {
+      fallback: fallback ?? null,
+      resetKey: `${loaderKey}:${shopifyProductId}`,
+      children: /* @__PURE__ */ jsx(Suspense, { fallback: fallback ?? null, children: /* @__PURE__ */ jsx(
+        OkendoReviewsLoaderInner,
+        {
+          loaderKey,
+          shopifyProductId,
+          children
+        }
+      ) })
+    }
+  );
+}
+export {
+  OkendoReviewsLoader
+};
+//# sourceMappingURL=okendo-reviews-loader.js.map

package/loaders/okendo-reviews-loader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../loaders/okendo-reviews-loader.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { Suspense } from \"react\";\n\nimport { useSuspenseQuery } from \"@tanstack/react-query\";\nimport { z } from \"zod\";\n\nimport { invokeLoader } from \"./invoke-loader\";\nimport { LoaderErrorBoundary } from \"./loader-error-boundary\";\nimport { okendoReviewSchema } from \"./loader-schemas\";\n\nconst okendoReviewsOutputSchema = z.object({\n  reviews: z.array(okendoReviewSchema),\n});\n\ntype OkendoReviewsData = z.infer<typeof okendoReviewsOutputSchema>;\n\ntype OkendoReviewsLoaderProps = {\n  loaderKey: string;\n  shopifyProductId: string;\n  children: (data: OkendoReviewsData) => ReactNode;\n  fallback?: ReactNode;\n};\n\nfunction OkendoReviewsLoaderInner({\n  loaderKey,\n  shopifyProductId,\n  children,\n}: Omit<OkendoReviewsLoaderProps, \"fallback\">) {\n  const queryResult = useSuspenseQuery({\n    queryKey: [loaderKey, { shopifyProductId }],\n    queryFn: async () => {\n      const loadedData = await invokeLoader({\n        loaderKey,\n        args: { shopifyProductId },\n      });\n      return okendoReviewsOutputSchema.parse(loadedData);\n    },\n  });\n\n  return <>{children(queryResult.data)}</>;\n}\n\nexport function OkendoReviewsLoader({\n  loaderKey,\n  shopifyProductId,\n  children,\n  fallback,\n}: OkendoReviewsLoaderProps) {\n  return (\n    <LoaderErrorBoundary\n      fallback={fallback ?? null}\n      resetKey={`${loaderKey}:${shopifyProductId}`}\n    >\n      <Suspense fallback={fallback ?? null}>\n        <OkendoReviewsLoaderInner\n          loaderKey={loaderKey}\n          shopifyProductId={shopifyProductId}\n        >\n          {children}\n        </OkendoReviewsLoaderInner>\n      </Suspense>\n    </LoaderErrorBoundary>\n  );\n}\n"],
+  "mappings": ";AA0CS;AAtCT,SAAS,gBAAgB;AAEzB,SAAS,wBAAwB;AACjC,SAAS,SAAS;AAElB,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAEnC,MAAM,4BAA4B,EAAE,OAAO;AAAA,EACzC,SAAS,EAAE,MAAM,kBAAkB;AACrC,CAAC;AAWD,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,QAAM,cAAc,iBAAiB;AAAA,IACnC,UAAU,CAAC,WAAW,EAAE,iBAAiB,CAAC;AAAA,IAC1C,SAAS,YAAY;AACnB,YAAM,aAAa,MAAM,aAAa;AAAA,QACpC;AAAA,QACA,MAAM,EAAE,iBAAiB;AAAA,MAC3B,CAAC;AACD,aAAO,0BAA0B,MAAM,UAAU;AAAA,IACnD;AAAA,EACF,CAAC;AAED,SAAO,gCAAG,mBAAS,YAAY,IAAI,GAAE;AACvC;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB,UAAU,GAAG,SAAS,IAAI,gBAAgB;AAAA,MAE1C,8BAAC,YAAS,UAAU,YAAY,MAC9B;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/loaders/prefetch-loaders.d.ts

@@ -0,0 +1,33 @@
+type PrefetchLoaderConfig = {
+    loaderKey: string;
+    args: Record<string, unknown>;
+    /** How long the server-side cache entry is fresh. Defaults to 60s. Use `false` for indefinite (tag-based invalidation only). */
+    revalidateSeconds?: number | false;
+};
+/**
+ * Server component that prefetches one or more loader queries and seeds the
+ * React Query cache via HydrationBoundary. Client components that use
+ * useSuspenseQuery with the same queryKey will get the data immediately
+ * in the initial HTML — no loading state on first paint.
+ *
+ * The queryKey is derived internally as `[loaderKey, args]`, matching the
+ * convention used by all loader components.
+ *
+ * Usage:
+ *   import { DATA_LOADER_KEYS } from "@replohq/sdk/loaders/loader-keys";
+ *
+ *   <PrefetchedLoaders
+ *     queries={[
+ *       {
+ *         loaderKey: DATA_LOADER_KEYS.SHOPIFY_PRODUCT,
+ *         args: { productId: "gid://shopify/Product/123" },
+ *       },
+ *     ]}
+ *   >
+ *     <ProductPreview productId="gid://shopify/Product/123" />
+ *   </PrefetchedLoaders>
+ */
+export declare function PrefetchedLoaders({ queries, children, }: React.PropsWithChildren<{
+    queries: PrefetchLoaderConfig[];
+}>): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/loaders/prefetch-loaders.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient
+} from "@tanstack/react-query";
+import { invokeLoaderServer } from "./invoke-loader-server";
+async function PrefetchedLoaders({
+  queries,
+  children
+}) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { staleTime: 60 * 1e3 }
+    }
+  });
+  await Promise.all(
+    queries.map((query) => {
+      return queryClient.prefetchQuery({
+        queryKey: [query.loaderKey, query.args],
+        queryFn: () => {
+          return invokeLoaderServer({
+            loaderKey: query.loaderKey,
+            args: query.args,
+            revalidateSeconds: query.revalidateSeconds
+          });
+        }
+      });
+    })
+  );
+  return /* @__PURE__ */ jsx(
+    HydrationBoundary,
+    {
+      state: dehydrate(queryClient, {
+        shouldDehydrateQuery: (query) => {
+          return query.state.status === "success" || query.state.status === "pending";
+        }
+      }),
+      children
+    }
+  );
+}
+export {
+  PrefetchedLoaders
+};
+//# sourceMappingURL=prefetch-loaders.js.map

package/loaders/prefetch-loaders.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../loaders/prefetch-loaders.tsx"],
+  "sourcesContent": ["import {\n  dehydrate,\n  HydrationBoundary,\n  QueryClient,\n} from \"@tanstack/react-query\";\n\nimport { invokeLoaderServer } from \"./invoke-loader-server\";\n\ntype PrefetchLoaderConfig = {\n  loaderKey: string;\n  args: Record<string, unknown>;\n  /** How long the server-side cache entry is fresh. Defaults to 60s. Use `false` for indefinite (tag-based invalidation only). */\n  revalidateSeconds?: number | false;\n};\n\n/**\n * Server component that prefetches one or more loader queries and seeds the\n * React Query cache via HydrationBoundary. Client components that use\n * useSuspenseQuery with the same queryKey will get the data immediately\n * in the initial HTML \u2014 no loading state on first paint.\n *\n * The queryKey is derived internally as `[loaderKey, args]`, matching the\n * convention used by all loader components.\n *\n * Usage:\n *   import { DATA_LOADER_KEYS } from \"@replohq/sdk/loaders/loader-keys\";\n *\n *   <PrefetchedLoaders\n *     queries={[\n *       {\n *         loaderKey: DATA_LOADER_KEYS.SHOPIFY_PRODUCT,\n *         args: { productId: \"gid://shopify/Product/123\" },\n *       },\n *     ]}\n *   >\n *     <ProductPreview productId=\"gid://shopify/Product/123\" />\n *   </PrefetchedLoaders>\n */\nexport async function PrefetchedLoaders({\n  queries,\n  children,\n}: React.PropsWithChildren<{\n  queries: PrefetchLoaderConfig[];\n}>) {\n  const queryClient = new QueryClient({\n    defaultOptions: {\n      queries: { staleTime: 60 * 1000 },\n    },\n  });\n\n  await Promise.all(\n    queries.map((query) => {\n      return queryClient.prefetchQuery({\n        queryKey: [query.loaderKey, query.args],\n        queryFn: () => {\n          return invokeLoaderServer({\n            loaderKey: query.loaderKey,\n            args: query.args,\n            revalidateSeconds: query.revalidateSeconds,\n          });\n        },\n      });\n    }),\n  );\n\n  return (\n    <HydrationBoundary\n      state={dehydrate(queryClient, {\n        shouldDehydrateQuery: (query) => {\n          return (\n            query.state.status === \"success\" || query.state.status === \"pending\"\n          );\n        },\n      })}\n    >\n      {children}\n    </HydrationBoundary>\n  );\n}\n"],
+  "mappings": "AAkEI;AAlEJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AAgCnC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AACF,GAEI;AACF,QAAM,cAAc,IAAI,YAAY;AAAA,IAClC,gBAAgB;AAAA,MACd,SAAS,EAAE,WAAW,KAAK,IAAK;AAAA,IAClC;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,QAAQ,IAAI,CAAC,UAAU;AACrB,aAAO,YAAY,cAAc;AAAA,QAC/B,UAAU,CAAC,MAAM,WAAW,MAAM,IAAI;AAAA,QACtC,SAAS,MAAM;AACb,iBAAO,mBAAmB;AAAA,YACxB,WAAW,MAAM;AAAA,YACjB,MAAM,MAAM;AAAA,YACZ,mBAAmB,MAAM;AAAA,UAC3B,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,UAAU,aAAa;AAAA,QAC5B,sBAAsB,CAAC,UAAU;AAC/B,iBACE,MAAM,MAAM,WAAW,aAAa,MAAM,MAAM,WAAW;AAAA,QAE/D;AAAA,MACF,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;",
+  "names": []
+}

package/loaders/preview-placeholder.d.ts

@@ -0,0 +1,25 @@
+export declare function hasUnfilledRouteParam(args: Record<string, unknown>): boolean;
+/**
+ * Sample data for a loader invoked with an unfilled dynamic-route param, or
+ * null when the invocation should proceed normally.
+ *
+ * On the server, substitution happens only on dev servers (`next dev` — how
+ * every sandbox preview runs); production builds keep fetching so bracket
+ * URLs keep their real miss/404 semantics. Substituting during SSR keeps the
+ * doomed fetch from erroring the dev overlay mid-stream. In the browser,
+ * substitution happens only inside an editor iframe.
+ */
+export declare function resolvePreviewPlaceholderData({ loaderKey, args, }: {
+    loaderKey: string;
+    args: Record<string, unknown>;
+}): unknown;
+/** Whether loader output is one of this module's sample fixtures. */
+export declare function isPreviewPlaceholderData(data: unknown): boolean;
+/**
+ * Notify the embedding editor when a loader component rendered sample data.
+ * The single reporting path: inspecting rendered data (rather than hooking
+ * loader invocation) covers client fetches and SSR-hydrated data alike —
+ * hydration never re-invokes the loader on the client. Receivers treat the
+ * message as idempotent, so no dedupe is needed.
+ */
+export declare function useReportPreviewPlaceholderRender(data: unknown): void;

package/loaders/preview-placeholder.js

@@ -0,0 +1,222 @@
+import { useEffect } from "react";
+import { z } from "zod";
+import { DATA_LOADER_KEYS } from "./loader-keys";
+const PLACEHOLDER_RENDER_MESSAGE_TYPE = "replo:preview:placeholder-render";
+const UNFILLED_ROUTE_PARAM_RE = /^\[{1,2}(?:\.\.\.)?[^\]]+\]{1,2}$/;
+const SAMPLE_ID_PREFIX = "replo-sample-";
+const SAMPLE_SIZES = [
+  { value: "Small", priceAmount: "42.00" },
+  { value: "Medium", priceAmount: "46.00" },
+  { value: "Large", priceAmount: "50.00" }
+];
+const SAMPLE_COLORS = [
+  { value: "Slate", swatchColor: "#64748b" },
+  { value: "Sand", swatchColor: "#d6bc8a" }
+];
+const SOLD_OUT_COMBINATION = { size: "Large", color: "Sand" };
+function toSampleSlug(value) {
+  return value.toLowerCase().replace(/\s+/g, "-");
+}
+const SAMPLE_VARIANTS = SAMPLE_SIZES.flatMap(
+  (size) => {
+    return SAMPLE_COLORS.map((color) => {
+      const isSoldOut = size.value === SOLD_OUT_COMBINATION.size && color.value === SOLD_OUT_COMBINATION.color;
+      const slug = `${toSampleSlug(size.value)}-${toSampleSlug(color.value)}`;
+      return {
+        id: `replo-sample-variant-${slug}`,
+        title: `${size.value} / ${color.value}`,
+        availableForSale: !isSoldOut,
+        sku: `REPLO-SAMPLE-${slug.toUpperCase()}`,
+        selectedOptions: [
+          { name: "Size", value: size.value },
+          { name: "Color", value: color.value }
+        ],
+        image: null,
+        price: { amount: size.priceAmount, currencyCode: "USD" },
+        // Every variant is "on sale" so strikethrough pricing renders.
+        compareAtPrice: { amount: "56.00", currencyCode: "USD" },
+        sellingPlanIds: []
+      };
+    });
+  }
+);
+const SAMPLE_PRODUCT = {
+  id: "replo-sample-product",
+  handle: "sample-product",
+  title: "Sample product",
+  description: "This is sample product data for previewing this page. Open the page from a real product link to see live details. Sizes, colors, sale pricing, and a sold-out variant are included so every part of the layout has something to show.",
+  descriptionHtml: "<p>This is sample product data for previewing this page. Open the page from a real product link to see live details.</p><p>The sample includes:</p><ul><li>Three sizes and two colors to try the option pickers</li><li>Sale pricing with a compare-at price</li><li>One sold-out combination (Large / Sand)</li></ul>",
+  availableForSale: true,
+  featuredImage: null,
+  // `id` is optional in the schema but always present on real data, and
+  // generated pages key option lists on it — omit it and previews log React
+  // "missing key" console errors, which the dev overlay counts as page errors.
+  options: [
+    {
+      id: "replo-sample-option-size",
+      name: "Size",
+      values: SAMPLE_SIZES.map((size) => size.value),
+      optionValues: SAMPLE_SIZES.map((size) => ({
+        id: `replo-sample-option-value-${toSampleSlug(size.value)}`,
+        value: size.value,
+        swatch: null
+      }))
+    },
+    {
+      id: "replo-sample-option-color",
+      name: "Color",
+      values: SAMPLE_COLORS.map((color) => color.value),
+      optionValues: SAMPLE_COLORS.map((color) => ({
+        id: `replo-sample-option-value-${toSampleSlug(color.value)}`,
+        value: color.value,
+        swatch: { color: color.swatchColor, imageUrl: null }
+      }))
+    }
+  ],
+  variants: SAMPLE_VARIANTS,
+  images: [],
+  media: [],
+  vendor: "Sample Supply Co.",
+  productType: "Sample",
+  tags: ["sample-data", "new-arrival", "bestseller"],
+  sellingPlanGroups: [],
+  metafields: []
+};
+const SAMPLE_COLLECTION = {
+  id: "replo-sample-collection",
+  handle: "sample-collection",
+  title: "Sample collection",
+  descriptionHtml: "<p>This is sample collection data for previewing this page.</p>",
+  image: null
+};
+const SAMPLE_GRID_CARDS = [
+  {
+    slug: "range",
+    title: "Sample product with a price range",
+    minAmount: "42.00",
+    maxAmount: "50.00",
+    compareAtAmount: "0.0",
+    availableForSale: true
+  },
+  {
+    slug: "sale",
+    title: "Sample product on sale",
+    minAmount: "42.00",
+    maxAmount: "42.00",
+    compareAtAmount: "56.00",
+    availableForSale: true
+  },
+  {
+    slug: "sold-out",
+    title: "Sample product that sold out",
+    minAmount: "46.00",
+    maxAmount: "46.00",
+    compareAtAmount: "0.0",
+    availableForSale: false
+  }
+];
+const SAMPLE_PAGINATED_PRODUCTS = {
+  products: SAMPLE_GRID_CARDS.map((card) => ({
+    id: `replo-sample-product-${card.slug}`,
+    handle: `sample-product-${card.slug}`,
+    title: card.title,
+    availableForSale: card.availableForSale,
+    featuredImage: null,
+    options: [
+      {
+        id: `replo-sample-option-color-${card.slug}`,
+        name: "Color",
+        values: SAMPLE_COLORS.map((color) => color.value),
+        optionValues: SAMPLE_COLORS.map((color) => ({
+          id: `replo-sample-option-value-${card.slug}-${toSampleSlug(color.value)}`,
+          value: color.value,
+          swatch: { color: color.swatchColor, imageUrl: null }
+        }))
+      }
+    ],
+    variants: SAMPLE_COLORS.map((color) => ({
+      id: `replo-sample-variant-${card.slug}-${toSampleSlug(color.value)}`,
+      title: color.value,
+      availableForSale: card.availableForSale,
+      sku: `REPLO-SAMPLE-${card.slug.toUpperCase()}-${toSampleSlug(color.value).toUpperCase()}`,
+      selectedOptions: [{ name: "Color", value: color.value }],
+      image: null,
+      price: { amount: card.minAmount, currencyCode: "USD" },
+      compareAtPrice: Number(card.compareAtAmount) > 0 ? { amount: card.compareAtAmount, currencyCode: "USD" } : null
+    })),
+    minPrice: { amount: card.minAmount, currencyCode: "USD" },
+    maxPrice: { amount: card.maxAmount, currencyCode: "USD" },
+    compareAtMinPrice: { amount: card.compareAtAmount, currencyCode: "USD" },
+    compareAtMaxPrice: { amount: card.compareAtAmount, currencyCode: "USD" }
+  })),
+  pageInfo: { hasNextPage: false, endCursor: null }
+};
+const PLACEHOLDER_DATA_BY_LOADER_KEY = {
+  [DATA_LOADER_KEYS.SHOPIFY_PRODUCT]: SAMPLE_PRODUCT,
+  [DATA_LOADER_KEYS.REPLO_PRODUCT]: SAMPLE_PRODUCT,
+  [DATA_LOADER_KEYS.SHOPIFY_COLLECTION]: SAMPLE_COLLECTION,
+  [DATA_LOADER_KEYS.SHOPIFY_COLLECTION_PRODUCTS]: SAMPLE_PAGINATED_PRODUCTS
+};
+function isUnfilledRouteParamValue(value) {
+  if (UNFILLED_ROUTE_PARAM_RE.test(value)) {
+    return true;
+  }
+  try {
+    return UNFILLED_ROUTE_PARAM_RE.test(decodeURIComponent(value));
+  } catch {
+    return false;
+  }
+}
+function hasUnfilledRouteParam(args) {
+  return Object.values(args).some(
+    (value) => typeof value === "string" && isUnfilledRouteParamValue(value)
+  );
+}
+function resolvePreviewPlaceholderData({
+  loaderKey,
+  args
+}) {
+  if (!hasUnfilledRouteParam(args)) {
+    return null;
+  }
+  const placeholderData = PLACEHOLDER_DATA_BY_LOADER_KEY[loaderKey];
+  if (placeholderData === void 0) {
+    return null;
+  }
+  if (typeof window === "undefined") {
+    return process.env.NODE_ENV === "development" ? placeholderData : null;
+  }
+  return window.parent === window ? null : placeholderData;
+}
+const placeholderIdSchema = z.object({ id: z.string() });
+const placeholderProductsSchema = z.object({
+  products: z.array(z.object({ id: z.string() })).min(1)
+});
+function isPreviewPlaceholderData(data) {
+  const withId = placeholderIdSchema.safeParse(data);
+  if (withId.success) {
+    return withId.data.id.startsWith(SAMPLE_ID_PREFIX);
+  }
+  const withProducts = placeholderProductsSchema.safeParse(data);
+  return withProducts.success && (withProducts.data.products[0]?.id.startsWith(SAMPLE_ID_PREFIX) ?? false);
+}
+function useReportPreviewPlaceholderRender(data) {
+  useEffect(() => {
+    if (window.parent !== window && isPreviewPlaceholderData(data)) {
+      window.parent.postMessage(
+        {
+          type: PLACEHOLDER_RENDER_MESSAGE_TYPE,
+          route: window.location.pathname
+        },
+        "*"
+      );
+    }
+  }, [data]);
+}
+export {
+  hasUnfilledRouteParam,
+  isPreviewPlaceholderData,
+  resolvePreviewPlaceholderData,
+  useReportPreviewPlaceholderRender
+};
+//# sourceMappingURL=preview-placeholder.js.map

package/loaders/preview-placeholder.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../loaders/preview-placeholder.ts"],
+  "sourcesContent": ["/**\n * Sample-data substitution for previewing dynamic routes inside the editor.\n *\n * When the editor previews an unfilled Next.js dynamic route (the literal\n * `/products/[handle]` URL), the page receives the bracket token itself as its\n * param, every lookup misses, and the preview 404s. Loader invocations detect\n * that exact case \u2014 editor iframe + a bracket-token arg \u2014 and substitute a\n * type-correct sample fixture so the page renders its real layout with sample\n * data. A `replo:preview:placeholder-render` message tells the embedding\n * editor the preview is showing sample data (mirrors `replo:preview:status`\n * from NextErrorReporter).\n *\n * Substitution is gated to editor iframes only: production traffic to a\n * bracket URL still misses lookups and 404s, so this can never soft-404 a\n * published site.\n */\nimport type {\n  FullCollection,\n  FullProduct,\n  PaginatedProducts,\n} from \"./loader-schemas\";\n\nimport { useEffect } from \"react\";\n\nimport { z } from \"zod\";\n\nimport { DATA_LOADER_KEYS } from \"./loader-keys\";\n\nconst PLACEHOLDER_RENDER_MESSAGE_TYPE = \"replo:preview:placeholder-render\";\n\n// Matches a literal Next.js dynamic segment passed through as a param value:\n// `[handle]`, `[...slug]`, or `[[...slug]]`.\nconst UNFILLED_ROUTE_PARAM_RE = /^\\[{1,2}(?:\\.\\.\\.)?[^\\]]+\\]{1,2}$/;\n\n// Every fixture id carries this prefix so substituted data is recognizable\n// after it round-trips through SSR + React Query hydration (where the client\n// never re-invokes the loader and can't observe the substitution directly).\nconst SAMPLE_ID_PREFIX = \"replo-sample-\";\n\n// The sample option matrix. Sizes carry the price so switching variants\n// visibly updates pricing; colors carry swatches so pickers render them.\nconst SAMPLE_SIZES = [\n  { value: \"Small\", priceAmount: \"42.00\" },\n  { value: \"Medium\", priceAmount: \"46.00\" },\n  { value: \"Large\", priceAmount: \"50.00\" },\n];\nconst SAMPLE_COLORS = [\n  { value: \"Slate\", swatchColor: \"#64748b\" },\n  { value: \"Sand\", swatchColor: \"#d6bc8a\" },\n];\n// One sold-out combination so disabled buttons / \"Sold out\" states render.\nconst SOLD_OUT_COMBINATION = { size: \"Large\", color: \"Sand\" };\n\nfunction toSampleSlug(value: string): string {\n  return value.toLowerCase().replace(/\\s+/g, \"-\");\n}\n\n// Generated as the full size x color cartesian product: agent-built pages\n// match every selected-options combination to a variant, and a combination\n// with no variant breaks their pickers mid-interaction.\nconst SAMPLE_VARIANTS: FullProduct[\"variants\"] = SAMPLE_SIZES.flatMap(\n  (size) => {\n    return SAMPLE_COLORS.map((color) => {\n      const isSoldOut =\n        size.value === SOLD_OUT_COMBINATION.size &&\n        color.value === SOLD_OUT_COMBINATION.color;\n      const slug = `${toSampleSlug(size.value)}-${toSampleSlug(color.value)}`;\n      return {\n        id: `replo-sample-variant-${slug}`,\n        title: `${size.value} / ${color.value}`,\n        availableForSale: !isSoldOut,\n        sku: `REPLO-SAMPLE-${slug.toUpperCase()}`,\n        selectedOptions: [\n          { name: \"Size\", value: size.value },\n          { name: \"Color\", value: color.value },\n        ],\n        image: null,\n        price: { amount: size.priceAmount, currencyCode: \"USD\" },\n        // Every variant is \"on sale\" so strikethrough pricing renders.\n        compareAtPrice: { amount: \"56.00\", currencyCode: \"USD\" },\n        sellingPlanIds: [],\n      };\n    });\n  },\n);\n\nconst SAMPLE_PRODUCT: FullProduct = {\n  id: \"replo-sample-product\",\n  handle: \"sample-product\",\n  title: \"Sample product\",\n  description:\n    \"This is sample product data for previewing this page. Open the page from a real product link to see live details. Sizes, colors, sale pricing, and a sold-out variant are included so every part of the layout has something to show.\",\n  descriptionHtml:\n    \"<p>This is sample product data for previewing this page. Open the page from a real product link to see live details.</p><p>The sample includes:</p><ul><li>Three sizes and two colors to try the option pickers</li><li>Sale pricing with a compare-at price</li><li>One sold-out combination (Large / Sand)</li></ul>\",\n  availableForSale: true,\n  featuredImage: null,\n  // `id` is optional in the schema but always present on real data, and\n  // generated pages key option lists on it \u2014 omit it and previews log React\n  // \"missing key\" console errors, which the dev overlay counts as page errors.\n  options: [\n    {\n      id: \"replo-sample-option-size\",\n      name: \"Size\",\n      values: SAMPLE_SIZES.map((size) => size.value),\n      optionValues: SAMPLE_SIZES.map((size) => ({\n        id: `replo-sample-option-value-${toSampleSlug(size.value)}`,\n        value: size.value,\n        swatch: null,\n      })),\n    },\n    {\n      id: \"replo-sample-option-color\",\n      name: \"Color\",\n      values: SAMPLE_COLORS.map((color) => color.value),\n      optionValues: SAMPLE_COLORS.map((color) => ({\n        id: `replo-sample-option-value-${toSampleSlug(color.value)}`,\n        value: color.value,\n        swatch: { color: color.swatchColor, imageUrl: null },\n      })),\n    },\n  ],\n  variants: SAMPLE_VARIANTS,\n  images: [],\n  media: [],\n  vendor: \"Sample Supply Co.\",\n  productType: \"Sample\",\n  tags: [\"sample-data\", \"new-arrival\", \"bestseller\"],\n  sellingPlanGroups: [],\n  metafields: [],\n};\n\nconst SAMPLE_COLLECTION: FullCollection = {\n  id: \"replo-sample-collection\",\n  handle: \"sample-collection\",\n  title: \"Sample collection\",\n  descriptionHtml:\n    \"<p>This is sample collection data for previewing this page.</p>\",\n  image: null,\n};\n\n// Three grid cards, each exercising a distinct card state: a price range, a\n// compare-at sale (grids gate strikethroughs on `amount > 0`, per the loader\n// contract where \"0.0\" means no discount), and a sold-out product.\nconst SAMPLE_GRID_CARDS = [\n  {\n    slug: \"range\",\n    title: \"Sample product with a price range\",\n    minAmount: \"42.00\",\n    maxAmount: \"50.00\",\n    compareAtAmount: \"0.0\",\n    availableForSale: true,\n  },\n  {\n    slug: \"sale\",\n    title: \"Sample product on sale\",\n    minAmount: \"42.00\",\n    maxAmount: \"42.00\",\n    compareAtAmount: \"56.00\",\n    availableForSale: true,\n  },\n  {\n    slug: \"sold-out\",\n    title: \"Sample product that sold out\",\n    minAmount: \"46.00\",\n    maxAmount: \"46.00\",\n    compareAtAmount: \"0.0\",\n    availableForSale: false,\n  },\n];\n\nconst SAMPLE_PAGINATED_PRODUCTS: PaginatedProducts = {\n  products: SAMPLE_GRID_CARDS.map((card) => ({\n    id: `replo-sample-product-${card.slug}`,\n    handle: `sample-product-${card.slug}`,\n    title: card.title,\n    availableForSale: card.availableForSale,\n    featuredImage: null,\n    options: [\n      {\n        id: `replo-sample-option-color-${card.slug}`,\n        name: \"Color\",\n        values: SAMPLE_COLORS.map((color) => color.value),\n        optionValues: SAMPLE_COLORS.map((color) => ({\n          id: `replo-sample-option-value-${card.slug}-${toSampleSlug(color.value)}`,\n          value: color.value,\n          swatch: { color: color.swatchColor, imageUrl: null },\n        })),\n      },\n    ],\n    variants: SAMPLE_COLORS.map((color) => ({\n      id: `replo-sample-variant-${card.slug}-${toSampleSlug(color.value)}`,\n      title: color.value,\n      availableForSale: card.availableForSale,\n      sku: `REPLO-SAMPLE-${card.slug.toUpperCase()}-${toSampleSlug(color.value).toUpperCase()}`,\n      selectedOptions: [{ name: \"Color\", value: color.value }],\n      image: null,\n      price: { amount: card.minAmount, currencyCode: \"USD\" },\n      compareAtPrice:\n        Number(card.compareAtAmount) > 0\n          ? { amount: card.compareAtAmount, currencyCode: \"USD\" }\n          : null,\n    })),\n    minPrice: { amount: card.minAmount, currencyCode: \"USD\" },\n    maxPrice: { amount: card.maxAmount, currencyCode: \"USD\" },\n    compareAtMinPrice: { amount: card.compareAtAmount, currencyCode: \"USD\" },\n    compareAtMaxPrice: { amount: card.compareAtAmount, currencyCode: \"USD\" },\n  })),\n  pageInfo: { hasNextPage: false, endCursor: null },\n};\n\nconst PLACEHOLDER_DATA_BY_LOADER_KEY: Record<string, unknown> = {\n  [DATA_LOADER_KEYS.SHOPIFY_PRODUCT]: SAMPLE_PRODUCT,\n  [DATA_LOADER_KEYS.REPLO_PRODUCT]: SAMPLE_PRODUCT,\n  [DATA_LOADER_KEYS.SHOPIFY_COLLECTION]: SAMPLE_COLLECTION,\n  [DATA_LOADER_KEYS.SHOPIFY_COLLECTION_PRODUCTS]: SAMPLE_PAGINATED_PRODUCTS,\n};\n\nfunction isUnfilledRouteParamValue(value: string): boolean {\n  if (UNFILLED_ROUTE_PARAM_RE.test(value)) {\n    return true;\n  }\n  // Next.js hands params over URL-encoded, so the literal `[handle]` segment\n  // arrives as `%5Bhandle%5D`.\n  try {\n    return UNFILLED_ROUTE_PARAM_RE.test(decodeURIComponent(value));\n  } catch {\n    return false;\n  }\n}\n\nexport function hasUnfilledRouteParam(args: Record<string, unknown>): boolean {\n  return Object.values(args).some(\n    (value) => typeof value === \"string\" && isUnfilledRouteParamValue(value),\n  );\n}\n\n/**\n * Sample data for a loader invoked with an unfilled dynamic-route param, or\n * null when the invocation should proceed normally.\n *\n * On the server, substitution happens only on dev servers (`next dev` \u2014 how\n * every sandbox preview runs); production builds keep fetching so bracket\n * URLs keep their real miss/404 semantics. Substituting during SSR keeps the\n * doomed fetch from erroring the dev overlay mid-stream. In the browser,\n * substitution happens only inside an editor iframe.\n */\nexport function resolvePreviewPlaceholderData({\n  loaderKey,\n  args,\n}: {\n  loaderKey: string;\n  args: Record<string, unknown>;\n}): unknown {\n  if (!hasUnfilledRouteParam(args)) {\n    return null;\n  }\n  const placeholderData = PLACEHOLDER_DATA_BY_LOADER_KEY[loaderKey];\n  if (placeholderData === undefined) {\n    return null;\n  }\n  if (typeof window === \"undefined\") {\n    return process.env.NODE_ENV === \"development\" ? placeholderData : null;\n  }\n  return window.parent === window ? null : placeholderData;\n}\n\nconst placeholderIdSchema = z.object({ id: z.string() });\nconst placeholderProductsSchema = z.object({\n  products: z.array(z.object({ id: z.string() })).min(1),\n});\n\n/** Whether loader output is one of this module's sample fixtures. */\nexport function isPreviewPlaceholderData(data: unknown): boolean {\n  const withId = placeholderIdSchema.safeParse(data);\n  if (withId.success) {\n    return withId.data.id.startsWith(SAMPLE_ID_PREFIX);\n  }\n  const withProducts = placeholderProductsSchema.safeParse(data);\n  return (\n    withProducts.success &&\n    (withProducts.data.products[0]?.id.startsWith(SAMPLE_ID_PREFIX) ?? false)\n  );\n}\n\n/**\n * Notify the embedding editor when a loader component rendered sample data.\n * The single reporting path: inspecting rendered data (rather than hooking\n * loader invocation) covers client fetches and SSR-hydrated data alike \u2014\n * hydration never re-invokes the loader on the client. Receivers treat the\n * message as idempotent, so no dedupe is needed.\n */\nexport function useReportPreviewPlaceholderRender(data: unknown) {\n  // eslint-disable-next-line replo/no-use-effect -- Posts to the embedding editor window, an external system.\n  useEffect(() => {\n    if (window.parent !== window && isPreviewPlaceholderData(data)) {\n      window.parent.postMessage(\n        {\n          type: PLACEHOLDER_RENDER_MESSAGE_TYPE,\n          route: window.location.pathname,\n        },\n        \"*\",\n      );\n    }\n  }, [data]);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/loaders/product-loader-args.d.ts

@@ -0,0 +1,21 @@
+export type MetafieldIdentifier = {
+    namespace: string;
+    key: string;
+};
+export type ProductLoaderArgs = {
+    handle?: string;
+    productId?: string;
+    productMetafieldIdentifiers?: MetafieldIdentifier[];
+    variantMetafieldIdentifiers?: MetafieldIdentifier[];
+};
+/**
+ * Builds the single object used as BOTH the React Query key and the loader
+ * payload. They must stay identical: `PrefetchedLoaders` seeds the cache under
+ * `[loaderKey, args]`, so an arg sent to the loader but missing from the key
+ * (or vice versa) silently misses the prefetch — the client refetches without
+ * it and the page renders incomplete data instead of erroring.
+ *
+ * Keys left `undefined` drop out of React Query's key hash, so omitting a field
+ * here hashes the same as a prefetch that never passed it.
+ */
+export declare function buildProductLoaderArgs({ handle, productId, productMetafieldIdentifiers, variantMetafieldIdentifiers, }: ProductLoaderArgs): ProductLoaderArgs;

package/loaders/product-loader-args.js

@@ -0,0 +1,17 @@
+function buildProductLoaderArgs({
+  handle,
+  productId,
+  productMetafieldIdentifiers,
+  variantMetafieldIdentifiers
+}) {
+  return {
+    handle,
+    productId,
+    productMetafieldIdentifiers,
+    variantMetafieldIdentifiers
+  };
+}
+export {
+  buildProductLoaderArgs
+};
+//# sourceMappingURL=product-loader-args.js.map

package/loaders/product-loader-args.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../loaders/product-loader-args.ts"],
+  "sourcesContent": ["export type MetafieldIdentifier = {\n  namespace: string;\n  key: string;\n};\n\nexport type ProductLoaderArgs = {\n  handle?: string;\n  productId?: string;\n  productMetafieldIdentifiers?: MetafieldIdentifier[];\n  variantMetafieldIdentifiers?: MetafieldIdentifier[];\n};\n\n/**\n * Builds the single object used as BOTH the React Query key and the loader\n * payload. They must stay identical: `PrefetchedLoaders` seeds the cache under\n * `[loaderKey, args]`, so an arg sent to the loader but missing from the key\n * (or vice versa) silently misses the prefetch \u2014 the client refetches without\n * it and the page renders incomplete data instead of erroring.\n *\n * Keys left `undefined` drop out of React Query's key hash, so omitting a field\n * here hashes the same as a prefetch that never passed it.\n */\nexport function buildProductLoaderArgs({\n  handle,\n  productId,\n  productMetafieldIdentifiers,\n  variantMetafieldIdentifiers,\n}: ProductLoaderArgs): ProductLoaderArgs {\n  return {\n    handle,\n    productId,\n    productMetafieldIdentifiers,\n    variantMetafieldIdentifiers,\n  };\n}\n"],
+  "mappings": "AAsBO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyC;AACvC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/loaders/product-loader.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { FullProduct } from "./loader-schemas";
+import type { ProductLoaderArgs } from "./product-loader-args";
+type ProductLoaderProps = ProductLoaderArgs & {
+    loaderKey: string;
+    children: (data: FullProduct) => ReactNode;
+    fallback?: ReactNode;
+};
+export declare function ProductLoader({ loaderKey, handle, productId, productMetafieldIdentifiers, variantMetafieldIdentifiers, children, fallback, }: ProductLoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/loaders/product-loader.js

@@ -0,0 +1,52 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { invokeLoader } from "./invoke-loader";
+import { LoaderErrorBoundary } from "./loader-error-boundary";
+import { fullProductSchema } from "./loader-schemas";
+import { useReportPreviewPlaceholderRender } from "./preview-placeholder";
+import { buildProductLoaderArgs } from "./product-loader-args";
+function ProductLoaderInner({
+  loaderKey,
+  args,
+  children
+}) {
+  const queryResult = useSuspenseQuery({
+    queryKey: [loaderKey, args],
+    queryFn: async () => {
+      const loadedData = await invokeLoader({ loaderKey, args });
+      return fullProductSchema.parse(loadedData);
+    }
+  });
+  useReportPreviewPlaceholderRender(queryResult.data);
+  return /* @__PURE__ */ jsx(Fragment, { children: children(queryResult.data) });
+}
+function ProductLoader({
+  loaderKey,
+  handle,
+  productId,
+  productMetafieldIdentifiers,
+  variantMetafieldIdentifiers,
+  children,
+  fallback
+}) {
+  const args = buildProductLoaderArgs({
+    handle,
+    productId,
+    productMetafieldIdentifiers,
+    variantMetafieldIdentifiers
+  });
+  return /* @__PURE__ */ jsx(
+    LoaderErrorBoundary,
+    {
+      fallback: fallback ?? null,
+      resetKey: `${loaderKey}:${JSON.stringify(args)}`,
+      children: /* @__PURE__ */ jsx(Suspense, { fallback: fallback ?? null, children: /* @__PURE__ */ jsx(ProductLoaderInner, { loaderKey, args, children }) })
+    }
+  );
+}
+export {
+  ProductLoader
+};
+//# sourceMappingURL=product-loader.js.map

package/loaders/product-loader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../loaders/product-loader.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport type { FullProduct } from \"./loader-schemas\";\nimport type { ProductLoaderArgs } from \"./product-loader-args\";\n\nimport { Suspense } from \"react\";\n\nimport { useSuspenseQuery } from \"@tanstack/react-query\";\n\nimport { invokeLoader } from \"./invoke-loader\";\nimport { LoaderErrorBoundary } from \"./loader-error-boundary\";\nimport { fullProductSchema } from \"./loader-schemas\";\nimport { useReportPreviewPlaceholderRender } from \"./preview-placeholder\";\nimport { buildProductLoaderArgs } from \"./product-loader-args\";\n\ntype ProductLoaderProps = ProductLoaderArgs & {\n  loaderKey: string;\n  children: (data: FullProduct) => ReactNode;\n  fallback?: ReactNode;\n};\n\nfunction ProductLoaderInner({\n  loaderKey,\n  args,\n  children,\n}: {\n  loaderKey: string;\n  args: ProductLoaderArgs;\n  children: (data: FullProduct) => ReactNode;\n}) {\n  const queryResult = useSuspenseQuery({\n    queryKey: [loaderKey, args],\n    queryFn: async () => {\n      const loadedData = await invokeLoader({ loaderKey, args });\n      return fullProductSchema.parse(loadedData);\n    },\n  });\n  useReportPreviewPlaceholderRender(queryResult.data);\n\n  return <>{children(queryResult.data)}</>;\n}\n\nexport function ProductLoader({\n  loaderKey,\n  handle,\n  productId,\n  productMetafieldIdentifiers,\n  variantMetafieldIdentifiers,\n  children,\n  fallback,\n}: ProductLoaderProps) {\n  const args = buildProductLoaderArgs({\n    handle,\n    productId,\n    productMetafieldIdentifiers,\n    variantMetafieldIdentifiers,\n  });\n\n  return (\n    <LoaderErrorBoundary\n      fallback={fallback ?? null}\n      resetKey={`${loaderKey}:${JSON.stringify(args)}`}\n    >\n      <Suspense fallback={fallback ?? null}>\n        <ProductLoaderInner loaderKey={loaderKey} args={args}>\n          {children}\n        </ProductLoaderInner>\n      </Suspense>\n    </LoaderErrorBoundary>\n  );\n}\n"],
+  "mappings": ";AAwCS;AAlCT,SAAS,gBAAgB;AAEzB,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yCAAyC;AAClD,SAAS,8BAA8B;AAQvC,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,cAAc,iBAAiB;AAAA,IACnC,UAAU,CAAC,WAAW,IAAI;AAAA,IAC1B,SAAS,YAAY;AACnB,YAAM,aAAa,MAAM,aAAa,EAAE,WAAW,KAAK,CAAC;AACzD,aAAO,kBAAkB,MAAM,UAAU;AAAA,IAC3C;AAAA,EACF,CAAC;AACD,oCAAkC,YAAY,IAAI;AAElD,SAAO,gCAAG,mBAAS,YAAY,IAAI,GAAE;AACvC;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,OAAO,uBAAuB;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB,UAAU,GAAG,SAAS,IAAI,KAAK,UAAU,IAAI,CAAC;AAAA,MAE9C,8BAAC,YAAS,UAAU,YAAY,MAC9B,8BAAC,sBAAmB,WAAsB,MACvC,UACH,GACF;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}