@uniformdev/canvas-next-rsc 19.154.1-alpha.22 → 19.154.1-alpha.26

package/dist/index.js

@@ -51,6 +51,7 @@ __export(src_exports, {
   isIncontextEditingEnabled: () => isIncontextEditingEnabled,
   isOnVercelPreviewEnvironment: () => isOnVercelPreviewEnvironment,
   resolveComposition: () => resolveComposition,
+  retrieveCompositionBySlug: () => retrieveCompositionBySlug,
   retrieveRoute: () => retrieveRoute
 });
 module.exports = __toCommonJS(src_exports);
@@ -124,7 +125,8 @@ var getCanvasCacheStrategy = (options) => {
       return config.canvasCache;
     }
     return {
-      type: "no-cache"
+      type: "no-cache",
+      bypassCache: true
     };
   }
   if (config.canvasCache) {
@@ -221,6 +223,7 @@ var getCanvasClient = (options) => {
     apiHost: env.getApiHost(),
     apiKey: env.getApiKey(),
     edgeApiHost: env.getEdgeApiHost(),
+    disableSWR: typeof options.cache.disableSWR !== "undefined" ? options.cache.disableSWR : true,
     fetch: (req, init) => {
       let requestedUrl;
       if (typeof req === "string") {
@@ -252,7 +255,7 @@ var getCanvasClient = (options) => {
         cache,
         headers: {
           ...init == null ? void 0 : init.headers,
-          "x-bypass-cache": "true"
+          "x-bypass-cache": typeof options.cache.bypassCache !== "undefined" ? options.cache.bypassCache.toString() : "false"
         },
         next: {
           revalidate
@@ -284,7 +287,7 @@ var getManifestClient = (options) => {
         ...init,
         headers: {
           ...init == null ? void 0 : init.headers,
-          "x-bypass-cache": "true"
+          "x-bypass-cache": typeof options.cache.bypassCache !== "undefined" ? options.cache.bypassCache.toString() : "false"
         },
         cache,
         next: {
@@ -325,7 +328,7 @@ var getProjectMapClient = (options) => {
         ...init,
         headers: {
           ...init == null ? void 0 : init.headers,
-          "x-bypass-cache": "true"
+          "x-bypass-cache": typeof options.cache.bypassCache !== "undefined" ? options.cache.bypassCache.toString() : "false"
         },
         cache,
         next: {
@@ -353,6 +356,7 @@ var getRouteClient = (options) => {
     projectId: env.getProjectId(),
     apiKey: env.getApiKey(),
     edgeApiHost: env.getEdgeApiHost(),
+    disableSWR: typeof options.cache.disableSWR !== "undefined" ? options.cache.disableSWR : true,
     fetch: (req, init) => {
       let requestedUrl;
       if (typeof req === "string") {
@@ -380,7 +384,7 @@ var getRouteClient = (options) => {
         ...init,
         headers: {
           ...init == null ? void 0 : init.headers,
-          "x-bypass-cache": "true"
+          "x-bypass-cache": typeof options.cache.bypassCache !== "undefined" ? options.cache.bypassCache.toString() : "false"
         },
         cache,
         next: {
@@ -489,13 +493,62 @@ var createServerUniformContextFromManifest = async (options) => {
 var import_canvas4 = require("@uniformdev/canvas");
 var import_canvas_next_rsc_shared2 = require("@uniformdev/canvas-next-rsc-shared");
 var import_redirect = require("@uniformdev/redirect");
+var retrieveCompositionBySlug = async ({
+  slug,
+  searchParams,
+  skipPrefetch,
+  locale,
+  releaseId,
+  versionId
+}) => {
+  var _a;
+  if (!skipPrefetch) {
+    void getManifest({
+      searchParams
+    });
+  }
+  let result;
+  const states = determineState({
+    searchParams
+  });
+  for (let i = 0; i < states.length; i++) {
+    const state = states[i];
+    const canvasClient = getDefaultCanvasClient({
+      searchParams
+    });
+    try {
+      const composition = await canvasClient.getCompositionBySlug({
+        slug,
+        state,
+        withComponentIDs: true,
+        withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig().experimental) == null ? void 0 : _a.vercelVisualEditing),
+        locale,
+        releaseId,
+        versionId
+      });
+      result = {
+        type: "composition",
+        compositionApiResponse: composition,
+        matchedRoute: "slug"
+      };
+    } catch (e) {
+      console.warn(`Failed to retrieve composition by slug: ${slug} with state ${state}`, e);
+    }
+    if ((result == null ? void 0 : result.type) !== "notFound") {
+      break;
+    }
+  }
+  return result || {
+    type: "notFound"
+  };
+};
 var retrieveRoute = async ({ params, searchParams, skipPrefetch }, fetchOptions) => {
   if (!skipPrefetch) {
     void getManifest({
       searchParams
     });
   }
-  const { type, value } = (0, import_canvas_next_rsc_shared2.resolvePath)({
+  const { value } = (0, import_canvas_next_rsc_shared2.resolvePath)({
     params
   });
   const states = determineState({
@@ -504,34 +557,15 @@ var retrieveRoute = async ({ params, searchParams, skipPrefetch }, fetchOptions)
   let result;
   for (let i = 0; i < states.length; i++) {
     const state = states[i];
-    if (type === "path") {
-      try {
-        result = await retrieveRouteByPath({
-          path: value,
-          state,
-          searchParams,
-          fetchOptions
-        });
-      } catch (e) {
-        console.warn(`Failed to retrieve route by path: ${value} with state ${state}`, e);
-      }
-    } else if (type === "slug") {
-      const canvasClient = getDefaultCanvasClient({
-        searchParams
+    try {
+      result = await retrieveRouteByPath({
+        path: value,
+        state,
+        searchParams,
+        fetchOptions
       });
-      try {
-        const composition = await canvasClient.getCompositionBySlug({
-          slug: value,
-          state
-        });
-        result = {
-          type: "composition",
-          compositionApiResponse: composition,
-          matchedRoute: "slug"
-        };
-      } catch (e) {
-        console.warn(`Failed to retrieve composition by slug: ${value} with state ${state}`, e);
-      }
+    } catch (e) {
+      console.warn(`Failed to retrieve route by path: ${value} with state ${state}`, e);
     }
     if ((result == null ? void 0 : result.type) !== "notFound") {
       break;
@@ -616,6 +650,7 @@ var PersonalizeClientWrapper = (props) => {
 // src/components/PersonalizeServer.ts
 var import_canvas5 = require("@uniformdev/canvas");
 var import_canvas_next_rsc_shared4 = require("@uniformdev/canvas-next-rsc-shared");
+var import_cache = require("next/cache");
 var import_react5 = require("react");
 
 // src/components/ContextPersonalizationTransfer.tsx
@@ -627,15 +662,19 @@ var ContextPersonalizationTransfer = ({ event }) => {
 
 // src/components/PersonalizeServer.ts
 var PersonalizeServer = (props) => {
-  var _a;
+  var _a, _b;
+  if ((_a = getServerConfig().ppr) == null ? void 0 : _a.personalizationSuspense) {
+    (0, import_cache.unstable_noStore)();
+  }
   const { indexes, event } = (0, import_canvas_next_rsc_shared4.runPersonalization)(props);
-  const slot = (_a = props.slots) == null ? void 0 : _a[import_canvas5.CANVAS_PERSONALIZE_SLOT];
+  const slot = (_b = props.slots) == null ? void 0 : _b[import_canvas5.CANVAS_PERSONALIZE_SLOT];
   const components = indexes.map((index) => {
     const component = slot.items[index];
     return component;
   });
   const eventElement = (0, import_react5.createElement)(ContextPersonalizationTransfer, {
-    event
+    event,
+    key: `${props.slotName}-${props.slotIndex}-personalization-transfer`
   });
   return (0, import_react5.createElement)(import_react5.Fragment, void 0, [...components, eventElement]);
 };
@@ -643,6 +682,7 @@ var PersonalizeServer = (props) => {
 // src/components/TestServer.ts
 var import_canvas6 = require("@uniformdev/canvas");
 var import_canvas_next_rsc_shared5 = require("@uniformdev/canvas-next-rsc-shared");
+var import_cache2 = require("next/cache");
 var import_react7 = require("react");
 
 // src/components/ContextTestTransfer.tsx
@@ -653,17 +693,24 @@ var ContextTestTransfer = ({ event }) => {
 };
 
 // src/components/TestServer.ts
-var TestServer = (props) => {
-  var _a, _b, _c, _d;
+var TestServer = async (props) => {
+  var _a, _b, _c, _d, _e;
+  if ((_a = getServerConfig().ppr) == null ? void 0 : _a.testSuspense) {
+    (0, import_cache2.unstable_noStore)();
+  }
   const { contextInstance, test } = props;
-  const isTestDefined = Boolean((_a = contextInstance.manifest.data.project.test) == null ? void 0 : _a[test]);
+  const isTestDefined = Boolean((_b = contextInstance.manifest.data.project.test) == null ? void 0 : _b[test]);
   if (!isTestDefined && process.env.NODE_ENV !== "production") {
     console.warn(`Test "${test}" is not defined in Uniform manifest.`);
   }
   const { index, event } = (0, import_canvas_next_rsc_shared5.runTest)(props);
-  const component = typeof index === "number" ? (_d = (_c = (_b = props.slots) == null ? void 0 : _b[import_canvas6.CANVAS_TEST_SLOT]) == null ? void 0 : _c.items[index]) != null ? _d : null : null;
+  if (index === null || event === null) {
+    return null;
+  }
+  const component = typeof index === "number" ? (_e = (_d = (_c = props.slots) == null ? void 0 : _c[import_canvas6.CANVAS_TEST_SLOT]) == null ? void 0 : _d.items[index]) != null ? _e : null : null;
   const eventElement = (0, import_react7.createElement)(ContextTestTransfer, {
-    event
+    event,
+    key: `${props.slotName}-${props.slotIndex}-server-transfer`
   });
   return (0, import_react7.createElement)(import_react7.Fragment, void 0, [component, eventElement]);
 };
@@ -767,19 +814,24 @@ var isServerComponent = ({
 };
 var resolveSystemComponent = ({
   component,
-  serverContext
+  server
 }) => {
-  const server = isServerComponent({
-    component,
-    serverContext
-  });
+  var _a, _b;
+  const config = getServerConfig();
+  let resolved = null;
+  let suspense = void 0;
   if (component.type === import_canvas7.CANVAS_PERSONALIZE_TYPE) {
-    return server ? PersonalizeServer : PersonalizeClientWrapper;
+    resolved = server ? PersonalizeServer : PersonalizeClientWrapper;
+    suspense = server && ((_a = config.ppr) == null ? void 0 : _a.personalizationSuspense);
   }
   if (component.type === import_canvas7.CANVAS_TEST_TYPE) {
-    return server ? TestServer : import_canvas_next_rsc_client6.TestClient;
+    resolved = server ? TestServer : import_canvas_next_rsc_client6.TestClient;
+    suspense = server && ((_b = config.ppr) == null ? void 0 : _b.testSuspense);
   }
-  return null;
+  return {
+    component: resolved,
+    suspense
+  };
 };
 var resolveSlots = ({
   component,
@@ -856,11 +908,15 @@ var resolveComponents = ({
       component,
       serverContext
     });
-    const systemComponent = resolveSystemComponent({
+    const { component: systemComponent, suspense: systemSuspense } = resolveSystemComponent({
       component,
-      serverContext
+      server: isServer
     });
-    const { component: regularComponent, includeContext } = resolveComponent({ component }) || {
+    const {
+      component: regularComponent,
+      includeContext,
+      suspense: componentSuspense
+    } = resolveComponent({ component }) || {
       component: null
     };
     if (!systemComponent && !regularComponent) {
@@ -875,10 +931,11 @@ var resolveComponents = ({
       mode
     });
     const resolvedComponent = systemComponent || regularComponent;
+    const wrapInSuspense = systemSuspense || componentSuspense;
     const parameters = (_a = component.parameters) != null ? _a : {};
     const enrichmentTags = (_b = parameters[import_canvas7.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _b.value;
+    const key = `${slotName}-${componentIndex}-component`;
     const componentProps = {
-      key: `${slotName}-${componentIndex}-component`,
       ...Object.keys(parameters).reduce((acc, cur) => {
         acc[cur] = parameters[cur].value;
         return acc;
@@ -890,7 +947,19 @@ var resolveComponents = ({
       slotName,
       slotIndex: isRoot ? void 0 : componentIndex
     };
-    const element = (0, import_react8.createElement)(resolvedComponent, componentProps);
+    let element = null;
+    if (wrapInSuspense) {
+      element = (0, import_react8.createElement)(
+        import_react8.Suspense,
+        {
+          key,
+          fallback: typeof wrapInSuspense === "boolean" || typeof (wrapInSuspense == null ? void 0 : wrapInSuspense.fallback) === "undefined" ? void 0 : (0, import_react8.createElement)(wrapInSuspense.fallback)
+        },
+        (0, import_react8.createElement)(resolvedComponent, componentProps)
+      );
+    } else {
+      element = (0, import_react8.createElement)(resolvedComponent, { ...componentProps, key });
+    }
     let tagElement = null;
     if (enrichmentTags == null ? void 0 : enrichmentTags.length) {
       tagElement = (0, import_react8.createElement)(ContextUpdateTransfer, {
@@ -1060,5 +1129,6 @@ var UniformPlayground = async ({ searchParams, ...rest }) => {
   isIncontextEditingEnabled,
   isOnVercelPreviewEnvironment,
   resolveComposition,
+  retrieveCompositionBySlug,
   retrieveRoute
 });

package/dist/index.mjs

@@ -77,7 +77,8 @@ var getCanvasCacheStrategy = (options) => {
       return config.canvasCache;
     }
     return {
-      type: "no-cache"
+      type: "no-cache",
+      bypassCache: true
     };
   }
   if (config.canvasCache) {
@@ -174,6 +175,7 @@ var getCanvasClient = (options) => {
     apiHost: env.getApiHost(),
     apiKey: env.getApiKey(),
     edgeApiHost: env.getEdgeApiHost(),
+    disableSWR: typeof options.cache.disableSWR !== "undefined" ? options.cache.disableSWR : true,
     fetch: (req, init) => {
       let requestedUrl;
       if (typeof req === "string") {
@@ -205,7 +207,7 @@ var getCanvasClient = (options) => {
         cache,
         headers: {
           ...init == null ? void 0 : init.headers,
-          "x-bypass-cache": "true"
+          "x-bypass-cache": typeof options.cache.bypassCache !== "undefined" ? options.cache.bypassCache.toString() : "false"
         },
         next: {
           revalidate
@@ -237,7 +239,7 @@ var getManifestClient = (options) => {
         ...init,
         headers: {
           ...init == null ? void 0 : init.headers,
-          "x-bypass-cache": "true"
+          "x-bypass-cache": typeof options.cache.bypassCache !== "undefined" ? options.cache.bypassCache.toString() : "false"
         },
         cache,
         next: {
@@ -278,7 +280,7 @@ var getProjectMapClient = (options) => {
         ...init,
         headers: {
           ...init == null ? void 0 : init.headers,
-          "x-bypass-cache": "true"
+          "x-bypass-cache": typeof options.cache.bypassCache !== "undefined" ? options.cache.bypassCache.toString() : "false"
         },
         cache,
         next: {
@@ -306,6 +308,7 @@ var getRouteClient = (options) => {
     projectId: env.getProjectId(),
     apiKey: env.getApiKey(),
     edgeApiHost: env.getEdgeApiHost(),
+    disableSWR: typeof options.cache.disableSWR !== "undefined" ? options.cache.disableSWR : true,
     fetch: (req, init) => {
       let requestedUrl;
       if (typeof req === "string") {
@@ -333,7 +336,7 @@ var getRouteClient = (options) => {
         ...init,
         headers: {
           ...init == null ? void 0 : init.headers,
-          "x-bypass-cache": "true"
+          "x-bypass-cache": typeof options.cache.bypassCache !== "undefined" ? options.cache.bypassCache.toString() : "false"
         },
         cache,
         next: {
@@ -420,7 +423,7 @@ import {
 import { PureContextualEditingComponentWrapper } from "@uniformdev/canvas-react/core";
 import { cookies as cookies2, headers } from "next/headers";
 import { notFound, redirect } from "next/navigation";
-import { createElement as createElement3, Fragment as Fragment3 } from "react";
+import { createElement as createElement3, Fragment as Fragment3, Suspense } from "react";
 
 // src/context/createServerUniformContext.ts
 import {
@@ -458,13 +461,62 @@ import {
 } from "@uniformdev/canvas";
 import { getBaseUrl, resolvePath } from "@uniformdev/canvas-next-rsc-shared";
 import { getTargetVariableExpandedUrl } from "@uniformdev/redirect";
+var retrieveCompositionBySlug = async ({
+  slug,
+  searchParams,
+  skipPrefetch,
+  locale,
+  releaseId,
+  versionId
+}) => {
+  var _a;
+  if (!skipPrefetch) {
+    void getManifest({
+      searchParams
+    });
+  }
+  let result;
+  const states = determineState({
+    searchParams
+  });
+  for (let i = 0; i < states.length; i++) {
+    const state = states[i];
+    const canvasClient = getDefaultCanvasClient({
+      searchParams
+    });
+    try {
+      const composition = await canvasClient.getCompositionBySlug({
+        slug,
+        state,
+        withComponentIDs: true,
+        withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig().experimental) == null ? void 0 : _a.vercelVisualEditing),
+        locale,
+        releaseId,
+        versionId
+      });
+      result = {
+        type: "composition",
+        compositionApiResponse: composition,
+        matchedRoute: "slug"
+      };
+    } catch (e) {
+      console.warn(`Failed to retrieve composition by slug: ${slug} with state ${state}`, e);
+    }
+    if ((result == null ? void 0 : result.type) !== "notFound") {
+      break;
+    }
+  }
+  return result || {
+    type: "notFound"
+  };
+};
 var retrieveRoute = async ({ params, searchParams, skipPrefetch }, fetchOptions) => {
   if (!skipPrefetch) {
     void getManifest({
       searchParams
     });
   }
-  const { type, value } = resolvePath({
+  const { value } = resolvePath({
     params
   });
   const states = determineState({
@@ -473,34 +525,15 @@ var retrieveRoute = async ({ params, searchParams, skipPrefetch }, fetchOptions)
   let result;
   for (let i = 0; i < states.length; i++) {
     const state = states[i];
-    if (type === "path") {
-      try {
-        result = await retrieveRouteByPath({
-          path: value,
-          state,
-          searchParams,
-          fetchOptions
-        });
-      } catch (e) {
-        console.warn(`Failed to retrieve route by path: ${value} with state ${state}`, e);
-      }
-    } else if (type === "slug") {
-      const canvasClient = getDefaultCanvasClient({
-        searchParams
+    try {
+      result = await retrieveRouteByPath({
+        path: value,
+        state,
+        searchParams,
+        fetchOptions
       });
-      try {
-        const composition = await canvasClient.getCompositionBySlug({
-          slug: value,
-          state
-        });
-        result = {
-          type: "composition",
-          compositionApiResponse: composition,
-          matchedRoute: "slug"
-        };
-      } catch (e) {
-        console.warn(`Failed to retrieve composition by slug: ${value} with state ${state}`, e);
-      }
+    } catch (e) {
+      console.warn(`Failed to retrieve route by path: ${value} with state ${state}`, e);
     }
     if ((result == null ? void 0 : result.type) !== "notFound") {
       break;
@@ -585,6 +618,7 @@ var PersonalizeClientWrapper = (props) => {
 // src/components/PersonalizeServer.ts
 import { CANVAS_PERSONALIZE_SLOT } from "@uniformdev/canvas";
 import { runPersonalization as runPersonalization2 } from "@uniformdev/canvas-next-rsc-shared";
+import { unstable_noStore as noStore } from "next/cache";
 import { createElement, Fragment } from "react";
 
 // src/components/ContextPersonalizationTransfer.tsx
@@ -596,15 +630,19 @@ var ContextPersonalizationTransfer = ({ event }) => {
 
 // src/components/PersonalizeServer.ts
 var PersonalizeServer = (props) => {
-  var _a;
+  var _a, _b;
+  if ((_a = getServerConfig().ppr) == null ? void 0 : _a.personalizationSuspense) {
+    noStore();
+  }
   const { indexes, event } = runPersonalization2(props);
-  const slot = (_a = props.slots) == null ? void 0 : _a[CANVAS_PERSONALIZE_SLOT];
+  const slot = (_b = props.slots) == null ? void 0 : _b[CANVAS_PERSONALIZE_SLOT];
   const components = indexes.map((index) => {
     const component = slot.items[index];
     return component;
   });
   const eventElement = createElement(ContextPersonalizationTransfer, {
-    event
+    event,
+    key: `${props.slotName}-${props.slotIndex}-personalization-transfer`
   });
   return createElement(Fragment, void 0, [...components, eventElement]);
 };
@@ -614,6 +652,7 @@ import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
 import {
   runTest
 } from "@uniformdev/canvas-next-rsc-shared";
+import { unstable_noStore as noStore2 } from "next/cache";
 import { createElement as createElement2, Fragment as Fragment2 } from "react";
 
 // src/components/ContextTestTransfer.tsx
@@ -624,17 +663,24 @@ var ContextTestTransfer = ({ event }) => {
 };
 
 // src/components/TestServer.ts
-var TestServer = (props) => {
-  var _a, _b, _c, _d;
+var TestServer = async (props) => {
+  var _a, _b, _c, _d, _e;
+  if ((_a = getServerConfig().ppr) == null ? void 0 : _a.testSuspense) {
+    noStore2();
+  }
   const { contextInstance, test } = props;
-  const isTestDefined = Boolean((_a = contextInstance.manifest.data.project.test) == null ? void 0 : _a[test]);
+  const isTestDefined = Boolean((_b = contextInstance.manifest.data.project.test) == null ? void 0 : _b[test]);
   if (!isTestDefined && process.env.NODE_ENV !== "production") {
     console.warn(`Test "${test}" is not defined in Uniform manifest.`);
   }
   const { index, event } = runTest(props);
-  const component = typeof index === "number" ? (_d = (_c = (_b = props.slots) == null ? void 0 : _b[CANVAS_TEST_SLOT]) == null ? void 0 : _c.items[index]) != null ? _d : null : null;
+  if (index === null || event === null) {
+    return null;
+  }
+  const component = typeof index === "number" ? (_e = (_d = (_c = props.slots) == null ? void 0 : _c[CANVAS_TEST_SLOT]) == null ? void 0 : _d.items[index]) != null ? _e : null : null;
   const eventElement = createElement2(ContextTestTransfer, {
-    event
+    event,
+    key: `${props.slotName}-${props.slotIndex}-server-transfer`
   });
   return createElement2(Fragment2, void 0, [component, eventElement]);
 };
@@ -738,19 +784,24 @@ var isServerComponent = ({
 };
 var resolveSystemComponent = ({
   component,
-  serverContext
+  server
 }) => {
-  const server = isServerComponent({
-    component,
-    serverContext
-  });
+  var _a, _b;
+  const config = getServerConfig();
+  let resolved = null;
+  let suspense = void 0;
   if (component.type === CANVAS_PERSONALIZE_TYPE) {
-    return server ? PersonalizeServer : PersonalizeClientWrapper;
+    resolved = server ? PersonalizeServer : PersonalizeClientWrapper;
+    suspense = server && ((_a = config.ppr) == null ? void 0 : _a.personalizationSuspense);
   }
   if (component.type === CANVAS_TEST_TYPE) {
-    return server ? TestServer : TestClient;
+    resolved = server ? TestServer : TestClient;
+    suspense = server && ((_b = config.ppr) == null ? void 0 : _b.testSuspense);
   }
-  return null;
+  return {
+    component: resolved,
+    suspense
+  };
 };
 var resolveSlots = ({
   component,
@@ -827,11 +878,15 @@ var resolveComponents = ({
       component,
       serverContext
     });
-    const systemComponent = resolveSystemComponent({
+    const { component: systemComponent, suspense: systemSuspense } = resolveSystemComponent({
       component,
-      serverContext
+      server: isServer
     });
-    const { component: regularComponent, includeContext } = resolveComponent({ component }) || {
+    const {
+      component: regularComponent,
+      includeContext,
+      suspense: componentSuspense
+    } = resolveComponent({ component }) || {
       component: null
     };
     if (!systemComponent && !regularComponent) {
@@ -846,10 +901,11 @@ var resolveComponents = ({
       mode
     });
     const resolvedComponent = systemComponent || regularComponent;
+    const wrapInSuspense = systemSuspense || componentSuspense;
     const parameters = (_a = component.parameters) != null ? _a : {};
     const enrichmentTags = (_b = parameters[CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _b.value;
+    const key = `${slotName}-${componentIndex}-component`;
     const componentProps = {
-      key: `${slotName}-${componentIndex}-component`,
       ...Object.keys(parameters).reduce((acc, cur) => {
         acc[cur] = parameters[cur].value;
         return acc;
@@ -861,7 +917,19 @@ var resolveComponents = ({
       slotName,
       slotIndex: isRoot ? void 0 : componentIndex
     };
-    const element = createElement3(resolvedComponent, componentProps);
+    let element = null;
+    if (wrapInSuspense) {
+      element = createElement3(
+        Suspense,
+        {
+          key,
+          fallback: typeof wrapInSuspense === "boolean" || typeof (wrapInSuspense == null ? void 0 : wrapInSuspense.fallback) === "undefined" ? void 0 : createElement3(wrapInSuspense.fallback)
+        },
+        createElement3(resolvedComponent, componentProps)
+      );
+    } else {
+      element = createElement3(resolvedComponent, { ...componentProps, key });
+    }
     let tagElement = null;
     if (enrichmentTags == null ? void 0 : enrichmentTags.length) {
       tagElement = createElement3(ContextUpdateTransfer, {
@@ -935,7 +1003,7 @@ import {
   DefaultUniformClientContext,
   UniformScript
 } from "@uniformdev/canvas-next-rsc-client";
-import { Suspense } from "react";
+import { Suspense as Suspense2 } from "react";
 import React6 from "react";
 var UniformContext = async ({
   clientContextComponent,
@@ -956,7 +1024,7 @@ var UniformContext = async ({
       disableDevTools,
       defaultConsent
     }
-  ), /* @__PURE__ */ React6.createElement(Suspense, { fallback: /* @__PURE__ */ React6.createElement(React6.Fragment, null) }, /* @__PURE__ */ React6.createElement(UniformScript, null)));
+  ), /* @__PURE__ */ React6.createElement(Suspense2, { fallback: /* @__PURE__ */ React6.createElement(React6.Fragment, null) }, /* @__PURE__ */ React6.createElement(UniformScript, null)));
 };
 
 // src/components/UniformPlayground.tsx
@@ -1033,5 +1101,6 @@ export {
   isIncontextEditingEnabled,
   isOnVercelPreviewEnvironment,
   resolveComposition,
+  retrieveCompositionBySlug,
   retrieveRoute
 };