@uniformdev/canvas-next-rsc 19.84.0 → 19.85.1-alpha.13

package/dist/component.d.mts

@@ -59,6 +59,8 @@ type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
     component: ComponentInstance;
     key: Key;
+    slotName: string;
+    slotIndex: number;
 }) => JSX.Element;
 type UniformSlotProps = {
     data: ComponentInstance;

package/dist/component.d.ts

@@ -59,6 +59,8 @@ type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
     component: ComponentInstance;
     key: Key;
+    slotName: string;
+    slotIndex: number;
 }) => JSX.Element;
 type UniformSlotProps = {
     data: ComponentInstance;

package/dist/component.js

@@ -181,7 +181,9 @@ var UniformSlot = ({ data, slot, children }) => {
         const result = children({
           child,
           component: targetSlotData[i],
-          key: `inner-${i}`
+          key: `inner-${i}`,
+          slotName: slot.name,
+          slotIndex: i
         });
         resolved.push(result);
       }

package/dist/component.mjs

@@ -142,7 +142,9 @@ var UniformSlot = ({ data, slot, children }) => {
         const result = children({
           child,
           component: targetSlotData[i],
-          key: `inner-${i}`
+          key: `inner-${i}`,
+          slotName: slot.name,
+          slotIndex: i
         });
         resolved.push(result);
       }

package/dist/handler.js

@@ -27,15 +27,18 @@ __export(handler_exports, {
 module.exports = __toCommonJS(handler_exports);
 
 // src/handler/createPreviewGETRouteHandler.ts
-var import_canvas4 = require("@uniformdev/canvas");
+var import_canvas5 = require("@uniformdev/canvas");
 var import_headers2 = require("next/headers");
 var import_navigation = require("next/navigation");
 
 // src/utils/route.ts
-var import_canvas3 = require("@uniformdev/canvas");
+var import_canvas4 = require("@uniformdev/canvas");
 var import_canvas_next_rsc_shared2 = require("@uniformdev/canvas-next-rsc-shared");
 var import_redirect = require("@uniformdev/redirect");
 
+// src/clients/canvasClient.ts
+var import_canvas2 = require("@uniformdev/canvas");
+
 // src/config/helpers.ts
 var import_canvas_next_rsc_shared = require("@uniformdev/canvas-next-rsc-shared");
 
@@ -145,10 +148,58 @@ var determineFetchCacheOptions = (mode) => {
   };
 };
 
+// src/clients/canvasClient.ts
+var getCanvasClient = (options) => {
+  return new import_canvas2.CanvasClient({
+    projectId: env.getProjectId(),
+    apiHost: env.getApiHost(),
+    apiKey: env.getApiKey(),
+    edgeApiHost: env.getEdgeApiHost(),
+    fetch: (req, init) => {
+      let requestedUrl;
+      if (typeof req === "string") {
+        requestedUrl = new URL(req);
+      } else if (req instanceof URL) {
+        requestedUrl = req;
+      } else {
+        requestedUrl = new URL(req.url);
+      }
+      const tags = [];
+      if (requestedUrl) {
+        const compositionIdKey = "compositionId";
+        const compositionIdsKey = "compositionIDs";
+        const compositionId = requestedUrl.searchParams.get(compositionIdKey);
+        const compositionIds = requestedUrl.searchParams.get(compositionIdsKey);
+        if (compositionId) {
+          tags.push(buildCompositionTag(compositionId));
+        }
+        if (compositionIds) {
+          const ids = compositionIds.split(",");
+          for (let i = 0; i < ids.length; i++) {
+            tags.push(buildCompositionTag(ids[i]));
+          }
+        }
+      }
+      const { cache, revalidate } = determineFetchCacheOptions(options.cache);
+      return fetch(req, {
+        ...init,
+        cache,
+        headers: {
+          ...init == null ? void 0 : init.headers,
+          "x-bypass-cache": "true"
+        },
+        next: {
+          revalidate
+        }
+      });
+    }
+  });
+};
+
 // src/clients/routeClient.ts
-var import_canvas2 = require("@uniformdev/canvas");
+var import_canvas3 = require("@uniformdev/canvas");
 var getRouteClient = (options) => {
-  const client = new import_canvas2.RouteClient({
+  const client = new import_canvas3.RouteClient({
     projectId: env.getProjectId(),
     apiKey: env.getApiKey(),
     edgeApiHost: env.getEdgeApiHost(),
@@ -161,7 +212,7 @@ var getRouteClient = (options) => {
       } else {
         requestedUrl = new URL(req.url);
       }
-      const tags = [];
+      const tags = ["route"];
       if (requestedUrl) {
         const pathKey = "path";
         const path = requestedUrl.searchParams.get(pathKey);
@@ -209,8 +260,21 @@ var retrieveRouteByPath = async ({
   const client = getDefaultRouteClient({
     searchParams
   });
+  let queryPath = path;
+  if (searchParams && Object.keys(searchParams).length > 0) {
+    const helper = new URL((0, import_canvas_next_rsc_shared2.getBaseUrl)());
+    helper.pathname = path;
+    Object.entries(searchParams).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        helper.searchParams.set(key, value);
+      }
+    });
+    if (helper.searchParams.size > 0) {
+      queryPath = `${helper.pathname}${helper.search}`;
+    }
+  }
   return await client.getRoute({
-    path,
+    path: queryPath,
     state,
     withComponentIDs: true,
     withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = (0, import_canvas_next_rsc_shared2.getServerConfig)().experimental) == null ? void 0 : _a.vercelVisualEditing)
@@ -262,7 +326,7 @@ var createPreviewGETRouteHandler = (options) => {
     const { searchParams } = new URL(request.url);
     const secret = searchParams.get("secret");
     const path = searchParams.get("path");
-    const isPlayground = searchParams.get(import_canvas4.IN_CONTEXT_EDITOR_PLAYGROUND_QUERY_STRING_PARAM) === "true";
+    const isPlayground = searchParams.get(import_canvas5.IN_CONTEXT_EDITOR_PLAYGROUND_QUERY_STRING_PARAM) === "true";
     const id = searchParams.get("id");
     if (secret !== process.env.UNIFORM_PREVIEW_SECRET) {
       return new Response("Invalid preview secret", { status: 401 });
@@ -273,17 +337,17 @@ var createPreviewGETRouteHandler = (options) => {
       }
       const resolveResult = await retrieveRouteByPath({
         path,
-        state: import_canvas4.CANVAS_DRAFT_STATE,
+        state: import_canvas5.CANVAS_DRAFT_STATE,
         searchParams: {
           // about to be in draft mode so pretend for now.
-          [import_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM]: "true"
+          [import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM]: "true"
         }
       });
       (0, import_headers2.draftMode)().enable();
       if (resolveResult.type === "redirect") {
         const href = resolveRedirectHref(resolveResult, path);
         if (resolveResult.redirect.targetProjectMapNodeId) {
-          (0, import_navigation.redirect)(`${href}?${import_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM}=true`);
+          (0, import_navigation.redirect)(`${href}?${import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM}=true`);
         } else {
           (0, import_navigation.redirect)(href);
         }
@@ -291,13 +355,13 @@ var createPreviewGETRouteHandler = (options) => {
       if (resolveResult.type === "notFound") {
         return new Response("Invalid path", { status: 401 });
       }
-      (0, import_navigation.redirect)(`${path}?${import_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM}=true`);
+      (0, import_navigation.redirect)(`${path}?${import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM}=true`);
     } else {
       if (!(options == null ? void 0 : options.playgroundPath)) {
         return new Response("No playground path is configured", { status: 401 });
       }
       (0, import_headers2.draftMode)().enable();
-      (0, import_navigation.redirect)(`${options.playgroundPath}?id=${id}&${import_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM}=true`);
+      (0, import_navigation.redirect)(`${options.playgroundPath}?id=${id}&${import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM}=true`);
     }
   };
 };
@@ -319,6 +383,7 @@ var createPreviewOPTIONSRouteHandler = () => {
 var import_cache = require("next/cache");
 
 // src/handler/helpers.ts
+var import_canvas6 = require("@uniformdev/canvas");
 var import_canvas_next_rsc_shared3 = require("@uniformdev/canvas-next-rsc-shared");
 var import_edge_config = require("@vercel/edge-config");
 var import_svix = require("svix");
@@ -382,10 +447,16 @@ var processCompositionChange = async (compositionId) => {
       type: "no-cache"
     }
   });
-  const { nodes } = await projectMapClient.getNodes({
-    compositionId
-  });
+  const [{ nodes }, composition] = await Promise.all([
+    projectMapClient.getNodes({
+      compositionId
+    }),
+    getComposition({ compositionId })
+  ]);
   const tags = [];
+  if (composition == null ? void 0 : composition.pattern) {
+    tags.push("route");
+  }
   if (nodes) {
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
@@ -400,6 +471,24 @@ var processCompositionChange = async (compositionId) => {
     tags
   };
 };
+var getComposition = async ({ compositionId }) => {
+  const canvasClient = getCanvasClient({
+    cache: {
+      type: "no-cache"
+    }
+  });
+  try {
+    const composition = await canvasClient.getCompositionById({
+      compositionId
+    });
+    return composition;
+  } catch (err) {
+    if (err instanceof import_canvas6.ApiClientError && err.statusCode === 404) {
+      return null;
+    }
+    throw err;
+  }
+};
 var buildProjectMapNodePaths = (path) => {
   const tags = [];
   const isDynamic = path.includes(":");

package/dist/handler.mjs

@@ -16,6 +16,9 @@ import {
 import { getBaseUrl, getServerConfig as getServerConfig2, resolvePath } from "@uniformdev/canvas-next-rsc-shared";
 import { getTargetVariableExpandedUrl } from "@uniformdev/redirect";
 
+// src/clients/canvasClient.ts
+import { CanvasClient } from "@uniformdev/canvas";
+
 // src/config/helpers.ts
 import { getServerConfig } from "@uniformdev/canvas-next-rsc-shared";
 
@@ -125,6 +128,54 @@ var determineFetchCacheOptions = (mode) => {
   };
 };
 
+// src/clients/canvasClient.ts
+var getCanvasClient = (options) => {
+  return new CanvasClient({
+    projectId: env.getProjectId(),
+    apiHost: env.getApiHost(),
+    apiKey: env.getApiKey(),
+    edgeApiHost: env.getEdgeApiHost(),
+    fetch: (req, init) => {
+      let requestedUrl;
+      if (typeof req === "string") {
+        requestedUrl = new URL(req);
+      } else if (req instanceof URL) {
+        requestedUrl = req;
+      } else {
+        requestedUrl = new URL(req.url);
+      }
+      const tags = [];
+      if (requestedUrl) {
+        const compositionIdKey = "compositionId";
+        const compositionIdsKey = "compositionIDs";
+        const compositionId = requestedUrl.searchParams.get(compositionIdKey);
+        const compositionIds = requestedUrl.searchParams.get(compositionIdsKey);
+        if (compositionId) {
+          tags.push(buildCompositionTag(compositionId));
+        }
+        if (compositionIds) {
+          const ids = compositionIds.split(",");
+          for (let i = 0; i < ids.length; i++) {
+            tags.push(buildCompositionTag(ids[i]));
+          }
+        }
+      }
+      const { cache, revalidate } = determineFetchCacheOptions(options.cache);
+      return fetch(req, {
+        ...init,
+        cache,
+        headers: {
+          ...init == null ? void 0 : init.headers,
+          "x-bypass-cache": "true"
+        },
+        next: {
+          revalidate
+        }
+      });
+    }
+  });
+};
+
 // src/clients/routeClient.ts
 import { RouteClient } from "@uniformdev/canvas";
 var getRouteClient = (options) => {
@@ -141,7 +192,7 @@ var getRouteClient = (options) => {
       } else {
         requestedUrl = new URL(req.url);
       }
-      const tags = [];
+      const tags = ["route"];
       if (requestedUrl) {
         const pathKey = "path";
         const path = requestedUrl.searchParams.get(pathKey);
@@ -189,8 +240,21 @@ var retrieveRouteByPath = async ({
   const client = getDefaultRouteClient({
     searchParams
   });
+  let queryPath = path;
+  if (searchParams && Object.keys(searchParams).length > 0) {
+    const helper = new URL(getBaseUrl());
+    helper.pathname = path;
+    Object.entries(searchParams).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        helper.searchParams.set(key, value);
+      }
+    });
+    if (helper.searchParams.size > 0) {
+      queryPath = `${helper.pathname}${helper.search}`;
+    }
+  }
   return await client.getRoute({
-    path,
+    path: queryPath,
     state,
     withComponentIDs: true,
     withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig2().experimental) == null ? void 0 : _a.vercelVisualEditing)
@@ -299,6 +363,7 @@ var createPreviewOPTIONSRouteHandler = () => {
 import { revalidateTag } from "next/cache";
 
 // src/handler/helpers.ts
+import { ApiClientError } from "@uniformdev/canvas";
 import { getServerConfig as getServerConfig3 } from "@uniformdev/canvas-next-rsc-shared";
 import { parseConnectionString } from "@vercel/edge-config";
 import { Webhook } from "svix";
@@ -362,10 +427,16 @@ var processCompositionChange = async (compositionId) => {
       type: "no-cache"
     }
   });
-  const { nodes } = await projectMapClient.getNodes({
-    compositionId
-  });
+  const [{ nodes }, composition] = await Promise.all([
+    projectMapClient.getNodes({
+      compositionId
+    }),
+    getComposition({ compositionId })
+  ]);
   const tags = [];
+  if (composition == null ? void 0 : composition.pattern) {
+    tags.push("route");
+  }
   if (nodes) {
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
@@ -380,6 +451,24 @@ var processCompositionChange = async (compositionId) => {
     tags
   };
 };
+var getComposition = async ({ compositionId }) => {
+  const canvasClient = getCanvasClient({
+    cache: {
+      type: "no-cache"
+    }
+  });
+  try {
+    const composition = await canvasClient.getCompositionById({
+      compositionId
+    });
+    return composition;
+  } catch (err) {
+    if (err instanceof ApiClientError && err.statusCode === 404) {
+      return null;
+    }
+    throw err;
+  }
+};
 var buildProjectMapNodePaths = (path) => {
   const tags = [];
   const isDynamic = path.includes(":");

package/dist/index.esm.js

@@ -299,7 +299,7 @@ var getRouteClient = (options) => {
       } else {
         requestedUrl = new URL(req.url);
       }
-      const tags = [];
+      const tags = ["route"];
       if (requestedUrl) {
         const pathKey = "path";
         const path = requestedUrl.searchParams.get(pathKey);
@@ -394,6 +394,7 @@ import {
   CANVAS_ENRICHMENT_TAG_PARAM,
   CANVAS_PERSONALIZE_TYPE,
   CANVAS_TEST_TYPE,
+  isComponentPlaceholderId,
   walkNodeTree
 } from "@uniformdev/canvas";
 import { ClientContextualEditingComponentWrapper, TestClient } from "@uniformdev/canvas-next-rsc-client";
@@ -506,8 +507,21 @@ var retrieveRouteByPath = async ({
   const client = getDefaultRouteClient({
     searchParams
   });
+  let queryPath = path;
+  if (searchParams && Object.keys(searchParams).length > 0) {
+    const helper = new URL(getBaseUrl());
+    helper.pathname = path;
+    Object.entries(searchParams).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        helper.searchParams.set(key, value);
+      }
+    });
+    if (helper.searchParams.size > 0) {
+      queryPath = `${helper.pathname}${helper.search}`;
+    }
+  }
   return await client.getRoute({
-    path,
+    path: queryPath,
     state,
     withComponentIDs: true,
     withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig2().experimental) == null ? void 0 : _a.vercelVisualEditing)
@@ -814,7 +828,9 @@ var resolveComponents = ({
       component,
       slots,
       contextInstance: isServer || includeContext ? serverContext : void 0,
-      context: compositionContext
+      context: compositionContext,
+      slotName,
+      slotIndex: isRoot ? void 0 : componentIndex
     };
     const element = createElement3(resolvedComponent, componentProps);
     let tagElement = null;
@@ -833,11 +849,12 @@ var resolveComponents = ({
       if (tagElement) {
         elements.push(tagElement);
       }
+      const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
       childNode = createElement3(
         PureContextualEditingComponentWrapper,
         {
           key: `${slotName}-${componentIndex}-wrapper`,
-          isPlaceholder: false,
+          isPlaceholder,
           parentComponent: parent,
           component,
           slotName,

package/dist/index.js

@@ -354,7 +354,7 @@ var getRouteClient = (options) => {
       } else {
         requestedUrl = new URL(req.url);
       }
-      const tags = [];
+      const tags = ["route"];
       if (requestedUrl) {
         const pathKey = "path";
         const path = requestedUrl.searchParams.get(pathKey);
@@ -545,8 +545,21 @@ var retrieveRouteByPath = async ({
   const client = getDefaultRouteClient({
     searchParams
   });
+  let queryPath = path;
+  if (searchParams && Object.keys(searchParams).length > 0) {
+    const helper = new URL((0, import_canvas_next_rsc_shared3.getBaseUrl)());
+    helper.pathname = path;
+    Object.entries(searchParams).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        helper.searchParams.set(key, value);
+      }
+    });
+    if (helper.searchParams.size > 0) {
+      queryPath = `${helper.pathname}${helper.search}`;
+    }
+  }
   return await client.getRoute({
-    path,
+    path: queryPath,
     state,
     withComponentIDs: true,
     withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = (0, import_canvas_next_rsc_shared3.getServerConfig)().experimental) == null ? void 0 : _a.vercelVisualEditing)
@@ -853,7 +866,9 @@ var resolveComponents = ({
       component,
       slots,
       contextInstance: isServer || includeContext ? serverContext : void 0,
-      context: compositionContext
+      context: compositionContext,
+      slotName,
+      slotIndex: isRoot ? void 0 : componentIndex
     };
     const element = (0, import_react6.createElement)(resolvedComponent, componentProps);
     let tagElement = null;
@@ -872,11 +887,12 @@ var resolveComponents = ({
       if (tagElement) {
         elements.push(tagElement);
       }
+      const isPlaceholder = (0, import_canvas7.isComponentPlaceholderId)(component == null ? void 0 : component._id);
       childNode = (0, import_react6.createElement)(
         import_core.PureContextualEditingComponentWrapper,
         {
           key: `${slotName}-${componentIndex}-wrapper`,
-          isPlaceholder: false,
+          isPlaceholder,
           parentComponent: parent,
           component,
           slotName,

package/dist/index.mjs

@@ -299,7 +299,7 @@ var getRouteClient = (options) => {
       } else {
         requestedUrl = new URL(req.url);
       }
-      const tags = [];
+      const tags = ["route"];
       if (requestedUrl) {
         const pathKey = "path";
         const path = requestedUrl.searchParams.get(pathKey);
@@ -394,6 +394,7 @@ import {
   CANVAS_ENRICHMENT_TAG_PARAM,
   CANVAS_PERSONALIZE_TYPE,
   CANVAS_TEST_TYPE,
+  isComponentPlaceholderId,
   walkNodeTree
 } from "@uniformdev/canvas";
 import { ClientContextualEditingComponentWrapper, TestClient } from "@uniformdev/canvas-next-rsc-client";
@@ -506,8 +507,21 @@ var retrieveRouteByPath = async ({
   const client = getDefaultRouteClient({
     searchParams
   });
+  let queryPath = path;
+  if (searchParams && Object.keys(searchParams).length > 0) {
+    const helper = new URL(getBaseUrl());
+    helper.pathname = path;
+    Object.entries(searchParams).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        helper.searchParams.set(key, value);
+      }
+    });
+    if (helper.searchParams.size > 0) {
+      queryPath = `${helper.pathname}${helper.search}`;
+    }
+  }
   return await client.getRoute({
-    path,
+    path: queryPath,
     state,
     withComponentIDs: true,
     withContentSourceMap: isOnVercelPreviewEnvironment() && ((_a = getServerConfig2().experimental) == null ? void 0 : _a.vercelVisualEditing)
@@ -814,7 +828,9 @@ var resolveComponents = ({
       component,
       slots,
       contextInstance: isServer || includeContext ? serverContext : void 0,
-      context: compositionContext
+      context: compositionContext,
+      slotName,
+      slotIndex: isRoot ? void 0 : componentIndex
     };
     const element = createElement3(resolvedComponent, componentProps);
     let tagElement = null;
@@ -833,11 +849,12 @@ var resolveComponents = ({
       if (tagElement) {
         elements.push(tagElement);
       }
+      const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
       childNode = createElement3(
         PureContextualEditingComponentWrapper,
         {
           key: `${slotName}-${componentIndex}-wrapper`,
-          isPlaceholder: false,
+          isPlaceholder,
           parentComponent: parent,
           component,
           slotName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-next-rsc",
-  "version": "19.84.0",
+  "version": "19.85.1-alpha.13+642f68468",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
     "build": "tsup",
@@ -54,22 +54,22 @@
   ],
   "devDependencies": {
     "@types/node": "^18.0.0",
-    "@types/react": "18.2.38",
+    "@types/react": "18.2.39",
     "eslint": "8.54.0",
     "next": "^13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.84.0",
-    "@uniformdev/canvas-next-rsc-client": "^19.84.0",
-    "@uniformdev/canvas-next-rsc-shared": "^19.84.0",
-    "@uniformdev/canvas-react": "19.84.0",
-    "@uniformdev/context": "19.84.0",
-    "@uniformdev/project-map": "19.84.0",
-    "@uniformdev/redirect": "19.84.0",
-    "@uniformdev/richtext": "19.84.0",
-    "@uniformdev/webhooks": "19.84.0",
+    "@uniformdev/canvas": "19.85.1-alpha.13+642f68468",
+    "@uniformdev/canvas-next-rsc-client": "^19.85.1-alpha.13+642f68468",
+    "@uniformdev/canvas-next-rsc-shared": "^19.85.1-alpha.13+642f68468",
+    "@uniformdev/canvas-react": "19.85.1-alpha.13+642f68468",
+    "@uniformdev/context": "19.85.1-alpha.13+642f68468",
+    "@uniformdev/project-map": "19.85.1-alpha.13+642f68468",
+    "@uniformdev/redirect": "19.85.1-alpha.13+642f68468",
+    "@uniformdev/richtext": "19.85.1-alpha.13+642f68468",
+    "@uniformdev/webhooks": "19.85.1-alpha.13+642f68468",
     "@vercel/edge-config": "^0.4.0",
     "encoding": "^0.1.13",
     "server-only": "^0.0.1",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "673e64f3757a81bda174fe69bdec2c1320001519"
+  "gitHead": "642f684682fa3d0166b58e5ddc7548cfa18f21f3"
 }