@uniformdev/canvas-next 19.14.2-alpha.1 → 19.14.2-alpha.11

package/dist/{chunk-ZOXJSPVQ.mjs → chunk-23O4NSDU.mjs}

@@ -1,3 +1,6 @@
+import {
+  logCompositionResponse
+} from "./chunk-6IDBHA5X.mjs";
 import {
   resolveSlugFromParams
 } from "./chunk-TR7V6ABJ.mjs";
@@ -7,8 +10,7 @@ import {
   CANVAS_DRAFT_STATE,
   CANVAS_PUBLISHED_STATE,
   CanvasClient,
-  EMPTY_COMPOSITION,
-  logCompositionResponse
+  EMPTY_COMPOSITION
 } from "@uniformdev/canvas";
 var withUniformGetServerSideProps = (options) => {
   const canvasClient = (options == null ? void 0 : options.client) || new CanvasClient({
@@ -95,8 +97,7 @@ import {
   CANVAS_DRAFT_STATE as CANVAS_DRAFT_STATE3,
   CANVAS_PUBLISHED_STATE as CANVAS_PUBLISHED_STATE3,
   CanvasClient as CanvasClient2,
-  EMPTY_COMPOSITION as EMPTY_COMPOSITION2,
-  logCompositionResponse as logCompositionResponse2
+  EMPTY_COMPOSITION as EMPTY_COMPOSITION2
 } from "@uniformdev/canvas";
 var withUniformGetStaticProps = (options) => {
   var _a;
@@ -132,7 +133,7 @@ var withUniformGetStaticProps = (options) => {
         const duration = Date.now() - time;
         composition = response.composition;
         if (!(options == null ? void 0 : options.silent)) {
-          logCompositionResponse2(response, duration);
+          logCompositionResponse(response, duration);
         }
       } catch (e) {
         console.error("[canvas-next] Failed to fetch composition", e);

package/dist/chunk-6IDBHA5X.mjs

@@ -0,0 +1,109 @@
+// src/logging/logCompositionResponse.ts
+import { white as white2 } from "colorette";
+
+// src/logging/logCompositionIssues.ts
+import { gray, green, italic, red, white, yellow } from "colorette";
+function logCompositionIssues(prefix, issues, colour = "red") {
+  const reversedIssues = [...issues].reverse();
+  const colours = { red, green, yellow, white };
+  console.error(
+    `${colours[colour](prefix)}
+${reversedIssues.map(
+      (issue) => `${colours[colour](">")} ${italic(gray(indent(issue.type.toUpperCase(), 7)))} ${renderIssue(issue)}`
+    ).join("\n")}`
+  );
+}
+function renderIssue(issue) {
+  var _a;
+  let path;
+  let type;
+  let message = issue.message;
+  let detail;
+  if (issue.type !== "config") {
+    path = issue.componentPath;
+    type = issue.componentType;
+    message = issue.message;
+  }
+  if (issue.type === "binding") {
+    detail = `Binding expression: ${(_a = issue.expression) == null ? void 0 : _a.pointer}`;
+  } else if (issue.type === "data") {
+    detail = `Data resource name: ${issue.dataName}, data type: ${issue.dataType}`;
+  }
+  if (issue.type === "input") {
+    detail = issue.inputName;
+  }
+  let result = `${white(blockify(message))}`;
+  if (detail) {
+    result += `
+${indent(" ", 10)}${gray(`${detail}`)}`;
+  }
+  if (path && type) {
+    result += `
+${indent(" ", 10)}${gray(`Occurred on component ${type} at slot path ${path}`)}`;
+  }
+  return result;
+}
+function indent(str, len) {
+  const indent2 = len != null ? len : 10;
+  return str.padStart(indent2);
+}
+function blockify(str, len) {
+  const indentSize = len != null ? len : 10;
+  return str.split("\n").map((line, index) => index === 0 ? line : `${indent(" ", indentSize)}${line}`).join("\n");
+}
+
+// src/logging/logCompositionResponse.ts
+function logCompositionResponse(compositionApiResponse, duration) {
+  var _a, _b;
+  const resErrors = (_a = compositionApiResponse.errors) != null ? _a : [];
+  const resWarnings = (_b = compositionApiResponse.warnings) != null ? _b : [];
+  if (resErrors.length > 0) {
+    logCompositionIssues(
+      `Composition data error${resErrors.length === 1 ? "" : "s"}; some content may be missing`,
+      resErrors,
+      "red"
+    );
+  }
+  if (resWarnings.length > 0) {
+    logCompositionIssues(
+      `Composition data warning${resWarnings.length === 1 ? "" : "s"}; some content may be missing`,
+      resWarnings,
+      "yellow"
+    );
+  }
+  if (compositionApiResponse.diagnostics) {
+    console.log(`
+Diagnostics`);
+    const { compositionFetch, data } = compositionApiResponse.diagnostics;
+    const table = {
+      [`${white2("Composition")}`]: {
+        "Duration (ms)": resolveDiagnosticsDuration(compositionFetch),
+        "Edge Cached": compositionFetch == null ? void 0 : compositionFetch.cacheHit
+      }
+    };
+    if (data) {
+      data.forEach((d) => {
+        table[d.dataName] = {
+          "Duration (ms)": resolveDiagnosticsDuration(d.performance),
+          "Edge Cached": d.performance.cacheHit,
+          "Retry Count": d.performance.retryCount
+        };
+      });
+    }
+    table["Total Response"] = {
+      "Duration (ms)": duration != null ? duration : "no data"
+    };
+    console.table(table);
+  }
+}
+function resolveDiagnosticsDuration(data) {
+  var _a, _b;
+  if (!data) {
+    return "no data";
+  }
+  return (_b = (_a = data.duration) != null ? _a : data.total) != null ? _b : "no data";
+}
+
+export {
+  logCompositionResponse
+};

package/dist/index.esm.js

@@ -8,7 +8,7 @@ import {
   UniformRichTextNode as ReactUniformRichTextNode
 } from "@uniformdev/canvas-react";
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import NextLink from "next/link";
+import NextLink from "next/link.js";
 import React, { useCallback } from "react";
 var NextLinkRichTextNode = ({ children, node }) => {
   const { link } = node;

package/dist/index.js

@@ -44,7 +44,7 @@ module.exports = __toCommonJS(src_exports);
 // src/components/UniformRichText.tsx
 var import_canvas_react = require("@uniformdev/canvas-react");
 var import_richtext = require("@uniformdev/richtext");
-var import_link = __toESM(require("next/link"));
+var import_link = __toESM(require("next/link.js"));
 var import_react = __toESM(require("react"));
 var NextLinkRichTextNode = ({ children, node }) => {
   const { link } = node;

package/dist/index.mjs

@@ -8,7 +8,7 @@ import {
   UniformRichTextNode as ReactUniformRichTextNode
 } from "@uniformdev/canvas-react";
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import NextLink from "next/link";
+import NextLink from "next/link.js";
 import React, { useCallback } from "react";
 var NextLinkRichTextNode = ({ children, node }) => {
   const { link } = node;

package/dist/project-map/index.js

@@ -31,6 +31,112 @@ module.exports = __toCommonJS(project_map_exports);
 
 // src/project-map/withUniformGetServerSideProps.ts
 var import_canvas = require("@uniformdev/canvas");
+
+// src/logging/logCompositionIssues.ts
+var import_colorette = require("colorette");
+function logCompositionIssues(prefix, issues, colour = "red") {
+  const reversedIssues = [...issues].reverse();
+  const colours = { red: import_colorette.red, green: import_colorette.green, yellow: import_colorette.yellow, white: import_colorette.white };
+  console.error(
+    `${colours[colour](prefix)}
+${reversedIssues.map(
+      (issue) => `${colours[colour](">")} ${(0, import_colorette.italic)((0, import_colorette.gray)(indent(issue.type.toUpperCase(), 7)))} ${renderIssue(issue)}`
+    ).join("\n")}`
+  );
+}
+function renderIssue(issue) {
+  var _a;
+  let path;
+  let type;
+  let message = issue.message;
+  let detail;
+  if (issue.type !== "config") {
+    path = issue.componentPath;
+    type = issue.componentType;
+    message = issue.message;
+  }
+  if (issue.type === "binding") {
+    detail = `Binding expression: ${(_a = issue.expression) == null ? void 0 : _a.pointer}`;
+  } else if (issue.type === "data") {
+    detail = `Data resource name: ${issue.dataName}, data type: ${issue.dataType}`;
+  }
+  if (issue.type === "input") {
+    detail = issue.inputName;
+  }
+  let result = `${(0, import_colorette.white)(blockify(message))}`;
+  if (detail) {
+    result += `
+${indent(" ", 10)}${(0, import_colorette.gray)(`${detail}`)}`;
+  }
+  if (path && type) {
+    result += `
+${indent(" ", 10)}${(0, import_colorette.gray)(`Occurred on component ${type} at slot path ${path}`)}`;
+  }
+  return result;
+}
+function indent(str, len) {
+  const indent2 = len != null ? len : 10;
+  return str.padStart(indent2);
+}
+function blockify(str, len) {
+  const indentSize = len != null ? len : 10;
+  return str.split("\n").map((line, index) => index === 0 ? line : `${indent(" ", indentSize)}${line}`).join("\n");
+}
+
+// src/logging/logCompositionResponse.ts
+var import_colorette2 = require("colorette");
+function logCompositionResponse(compositionApiResponse, duration) {
+  var _a, _b;
+  const resErrors = (_a = compositionApiResponse.errors) != null ? _a : [];
+  const resWarnings = (_b = compositionApiResponse.warnings) != null ? _b : [];
+  if (resErrors.length > 0) {
+    logCompositionIssues(
+      `Composition data error${resErrors.length === 1 ? "" : "s"}; some content may be missing`,
+      resErrors,
+      "red"
+    );
+  }
+  if (resWarnings.length > 0) {
+    logCompositionIssues(
+      `Composition data warning${resWarnings.length === 1 ? "" : "s"}; some content may be missing`,
+      resWarnings,
+      "yellow"
+    );
+  }
+  if (compositionApiResponse.diagnostics) {
+    console.log(`
+Diagnostics`);
+    const { compositionFetch, data } = compositionApiResponse.diagnostics;
+    const table = {
+      [`${(0, import_colorette2.white)("Composition")}`]: {
+        "Duration (ms)": resolveDiagnosticsDuration(compositionFetch),
+        "Edge Cached": compositionFetch == null ? void 0 : compositionFetch.cacheHit
+      }
+    };
+    if (data) {
+      data.forEach((d) => {
+        table[d.dataName] = {
+          "Duration (ms)": resolveDiagnosticsDuration(d.performance),
+          "Edge Cached": d.performance.cacheHit,
+          "Retry Count": d.performance.retryCount
+        };
+      });
+    }
+    table["Total Response"] = {
+      "Duration (ms)": duration != null ? duration : "no data"
+    };
+    console.table(table);
+  }
+}
+function resolveDiagnosticsDuration(data) {
+  var _a, _b;
+  if (!data) {
+    return "no data";
+  }
+  return (_b = (_a = data.duration) != null ? _a : data.total) != null ? _b : "no data";
+}
+
+// src/project-map/withUniformGetServerSideProps.ts
 var withUniformGetServerSideProps = (options) => {
   const canvasClient = (options == null ? void 0 : options.client) || new import_canvas.CanvasClient({
     apiKey: process.env.UNIFORM_API_KEY,
@@ -61,7 +167,7 @@ var withUniformGetServerSideProps = (options) => {
         const duration = Date.now() - time;
         composition = response.composition;
         if (!(options == null ? void 0 : options.silent)) {
-          (0, import_canvas.logCompositionResponse)(response, duration);
+          logCompositionResponse(response, duration);
         }
       } catch (e) {
         console.error("[canvas-next] Failed to fetch composition", e);
@@ -157,7 +263,7 @@ var withUniformGetStaticProps = (options) => {
         const duration = Date.now() - time;
         composition = response.composition;
         if (!(options == null ? void 0 : options.silent)) {
-          (0, import_canvas3.logCompositionResponse)(response, duration);
+          logCompositionResponse(response, duration);
         }
       } catch (e) {
         console.error("[canvas-next] Failed to fetch composition", e);

package/dist/project-map/index.mjs

@@ -5,7 +5,8 @@ import {
   withUniformGetServerSideProps,
   withUniformGetStaticPaths,
   withUniformGetStaticProps
-} from "../chunk-ZOXJSPVQ.mjs";
+} from "../chunk-23O4NSDU.mjs";
+import "../chunk-6IDBHA5X.mjs";
 import "../chunk-TR7V6ABJ.mjs";
 export {
   getServerSideProps,

package/dist/route/index.d.ts

@@ -136,7 +136,7 @@ declare const unstable_getServerSideProps: next.GetServerSideProps<{
                 } | undefined;
                 _overridability?: {
                     parameters?: {
-                        [key: string]: "yes" | "no";
+                        [key: string]: "no" | "yes";
                     } | undefined;
                     variants?: boolean | undefined;
                 } | undefined;
@@ -172,7 +172,7 @@ declare const unstable_getServerSideProps: next.GetServerSideProps<{
         } | undefined;
         _overridability?: {
             parameters?: {
-                [key: string]: "yes" | "no";
+                [key: string]: "no" | "yes";
             } | undefined;
             variants?: boolean | undefined;
         } | undefined;
@@ -255,7 +255,7 @@ declare const unstable_getStaticProps: next.GetStaticProps<{
                 } | undefined;
                 _overridability?: {
                     parameters?: {
-                        [key: string]: "yes" | "no";
+                        [key: string]: "no" | "yes";
                     } | undefined;
                     variants?: boolean | undefined;
                 } | undefined;
@@ -291,7 +291,7 @@ declare const unstable_getStaticProps: next.GetStaticProps<{
         } | undefined;
         _overridability?: {
             parameters?: {
-                [key: string]: "yes" | "no";
+                [key: string]: "no" | "yes";
             } | undefined;
             variants?: boolean | undefined;
         } | undefined;

package/dist/route/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/route/index.ts
@@ -41,6 +31,160 @@ module.exports = __toCommonJS(route_exports);
 
 // src/project-map/withUniformGetServerSideProps.ts
 var import_canvas = require("@uniformdev/canvas");
+
+// src/logging/logCompositionIssues.ts
+var import_colorette = require("colorette");
+function logCompositionIssues(prefix, issues, colour = "red") {
+  const reversedIssues = [...issues].reverse();
+  const colours = { red: import_colorette.red, green: import_colorette.green, yellow: import_colorette.yellow, white: import_colorette.white };
+  console.error(
+    `${colours[colour](prefix)}
+${reversedIssues.map(
+      (issue) => `${colours[colour](">")} ${(0, import_colorette.italic)((0, import_colorette.gray)(indent(issue.type.toUpperCase(), 7)))} ${renderIssue(issue)}`
+    ).join("\n")}`
+  );
+}
+function renderIssue(issue) {
+  var _a;
+  let path;
+  let type;
+  let message = issue.message;
+  let detail;
+  if (issue.type !== "config") {
+    path = issue.componentPath;
+    type = issue.componentType;
+    message = issue.message;
+  }
+  if (issue.type === "binding") {
+    detail = `Binding expression: ${(_a = issue.expression) == null ? void 0 : _a.pointer}`;
+  } else if (issue.type === "data") {
+    detail = `Data resource name: ${issue.dataName}, data type: ${issue.dataType}`;
+  }
+  if (issue.type === "input") {
+    detail = issue.inputName;
+  }
+  let result = `${(0, import_colorette.white)(blockify(message))}`;
+  if (detail) {
+    result += `
+${indent(" ", 10)}${(0, import_colorette.gray)(`${detail}`)}`;
+  }
+  if (path && type) {
+    result += `
+${indent(" ", 10)}${(0, import_colorette.gray)(`Occurred on component ${type} at slot path ${path}`)}`;
+  }
+  return result;
+}
+function indent(str, len) {
+  const indent2 = len != null ? len : 10;
+  return str.padStart(indent2);
+}
+function blockify(str, len) {
+  const indentSize = len != null ? len : 10;
+  return str.split("\n").map((line, index) => index === 0 ? line : `${indent(" ", indentSize)}${line}`).join("\n");
+}
+
+// src/logging/logCompositionResponse.ts
+var import_colorette2 = require("colorette");
+function logCompositionResponse(compositionApiResponse, duration) {
+  var _a, _b;
+  const resErrors = (_a = compositionApiResponse.errors) != null ? _a : [];
+  const resWarnings = (_b = compositionApiResponse.warnings) != null ? _b : [];
+  if (resErrors.length > 0) {
+    logCompositionIssues(
+      `Composition data error${resErrors.length === 1 ? "" : "s"}; some content may be missing`,
+      resErrors,
+      "red"
+    );
+  }
+  if (resWarnings.length > 0) {
+    logCompositionIssues(
+      `Composition data warning${resWarnings.length === 1 ? "" : "s"}; some content may be missing`,
+      resWarnings,
+      "yellow"
+    );
+  }
+  if (compositionApiResponse.diagnostics) {
+    console.log(`
+Diagnostics`);
+    const { compositionFetch, data } = compositionApiResponse.diagnostics;
+    const table = {
+      [`${(0, import_colorette2.white)("Composition")}`]: {
+        "Duration (ms)": resolveDiagnosticsDuration(compositionFetch),
+        "Edge Cached": compositionFetch == null ? void 0 : compositionFetch.cacheHit
+      }
+    };
+    if (data) {
+      data.forEach((d) => {
+        table[d.dataName] = {
+          "Duration (ms)": resolveDiagnosticsDuration(d.performance),
+          "Edge Cached": d.performance.cacheHit,
+          "Retry Count": d.performance.retryCount
+        };
+      });
+    }
+    table["Total Response"] = {
+      "Duration (ms)": duration != null ? duration : "no data"
+    };
+    console.table(table);
+  }
+}
+function resolveDiagnosticsDuration(data) {
+  var _a, _b;
+  if (!data) {
+    return "no data";
+  }
+  return (_b = (_a = data.duration) != null ? _a : data.total) != null ? _b : "no data";
+}
+
+// src/logging/logCompositionRouteResponse.ts
+var import_colorette3 = require("colorette");
+function logRouteCompositionResponse(matched, duration) {
+  var _a, _b;
+  const resErrors = (_a = matched.compositionApiResponse.errors) != null ? _a : [];
+  const resWarnings = (_b = matched.compositionApiResponse.warnings) != null ? _b : [];
+  const colour = resErrors.length > 0 ? import_colorette3.red : resWarnings.length > 0 ? import_colorette3.yellow : import_colorette3.green;
+  console.log(`${colour("Matched")} ${matched.type} ${matched.matchedRoute} (${duration}ms)`);
+  if (matched.dynamicInputs) {
+    const entries = Object.entries(matched.dynamicInputs);
+    if (entries.length > 0) {
+      console.log(
+        `  ${(0, import_colorette3.gray)("Matched dynamic inputs:\n   ")}`,
+        entries.map(([k, v]) => `${k}: ${v}`).join("\n    ")
+      );
+    }
+  }
+  logCompositionResponse(matched.compositionApiResponse, duration);
+}
+
+// src/logging/logNotFoundRouteResponse.ts
+var import_colorette4 = require("colorette");
+function logNotFoundRouteResponse(_matched, duration) {
+  console.log(`${(0, import_colorette4.yellow)("Not found")} no project map or redirect path match (${duration}ms)`);
+}
+
+// src/logging/logRedirectRouteResponse.ts
+var import_colorette5 = require("colorette");
+function logRedirectRouteResponse(matched, duration) {
+  console.log(
+    `${(0, import_colorette5.green)("Matched")} ${matched.type} ${matched.matchedRoute} (${duration}ms)
+Target: ${matched.redirect.targetUrl}`
+  );
+}
+
+// src/logging/logRouteResponse.ts
+function logRouteResponse(response, duration) {
+  if (response.type === "redirect") {
+    logRedirectRouteResponse(response, duration);
+    return;
+  }
+  if (response.type === "notFound") {
+    logNotFoundRouteResponse(response, duration);
+    return;
+  }
+  logRouteCompositionResponse(response, duration);
+}
+
+// src/project-map/withUniformGetServerSideProps.ts
 var withUniformGetServerSideProps = (options) => {
   const canvasClient = (options == null ? void 0 : options.client) || new import_canvas.CanvasClient({
     apiKey: process.env.UNIFORM_API_KEY,
@@ -71,7 +215,7 @@ var withUniformGetServerSideProps = (options) => {
         const duration = Date.now() - time;
         composition = response.composition;
         if (!(options == null ? void 0 : options.silent)) {
-          (0, import_canvas.logCompositionResponse)(response, duration);
+          logCompositionResponse(response, duration);
         }
       } catch (e) {
         console.error("[canvas-next] Failed to fetch composition", e);
@@ -167,7 +311,7 @@ var withUniformGetStaticProps = (options) => {
         const duration = Date.now() - time;
         composition = response.composition;
         if (!(options == null ? void 0 : options.silent)) {
-          (0, import_canvas3.logCompositionResponse)(response, duration);
+          logCompositionResponse(response, duration);
         }
       } catch (e) {
         console.error("[canvas-next] Failed to fetch composition", e);
@@ -195,8 +339,7 @@ var import_redirect = require("@uniformdev/redirect");
 
 // src/route/createRouteFetcher.ts
 var import_canvas4 = require("@uniformdev/canvas");
-var import_ansi_colors = __toESM(require("ansi-colors"));
-var { red } = import_ansi_colors.default;
+var import_colorette6 = require("colorette");
 function createRouteFetcher(options) {
   const {
     handleNotFound,
@@ -292,7 +435,7 @@ function createRouteFetcher(options) {
         });
         const duration = Date.now() - time;
         if (!silent) {
-          (0, import_canvas4.logRouteResponse)(response, duration);
+          logRouteResponse(response, duration);
         }
         if (response.type === "redirect") {
           return invokeRedirectResult(response, duration);
@@ -306,7 +449,7 @@ function createRouteFetcher(options) {
         }
         return handleResult;
       } catch (e) {
-        console.error(red("Failed to fetch route"), e);
+        console.error((0, import_colorette6.red)("Failed to fetch route"), e);
         if (e instanceof import_canvas4.ApiClientError) {
           if (e.statusCode === 404) {
             return invokeNotFoundResult({ type: "notFound" }, 0);

package/dist/route/index.mjs

@@ -1,10 +1,61 @@
 import {
   withUniformGetStaticPaths
-} from "../chunk-ZOXJSPVQ.mjs";
+} from "../chunk-23O4NSDU.mjs";
+import {
+  logCompositionResponse
+} from "../chunk-6IDBHA5X.mjs";
 import {
   resolveSlugFromParams
 } from "../chunk-TR7V6ABJ.mjs";
 
+// src/logging/logCompositionRouteResponse.ts
+import { gray, green, red, yellow } from "colorette";
+function logRouteCompositionResponse(matched, duration) {
+  var _a, _b;
+  const resErrors = (_a = matched.compositionApiResponse.errors) != null ? _a : [];
+  const resWarnings = (_b = matched.compositionApiResponse.warnings) != null ? _b : [];
+  const colour = resErrors.length > 0 ? red : resWarnings.length > 0 ? yellow : green;
+  console.log(`${colour("Matched")} ${matched.type} ${matched.matchedRoute} (${duration}ms)`);
+  if (matched.dynamicInputs) {
+    const entries = Object.entries(matched.dynamicInputs);
+    if (entries.length > 0) {
+      console.log(
+        `  ${gray("Matched dynamic inputs:\n   ")}`,
+        entries.map(([k, v]) => `${k}: ${v}`).join("\n    ")
+      );
+    }
+  }
+  logCompositionResponse(matched.compositionApiResponse, duration);
+}
+
+// src/logging/logNotFoundRouteResponse.ts
+import { yellow as yellow2 } from "colorette";
+function logNotFoundRouteResponse(_matched, duration) {
+  console.log(`${yellow2("Not found")} no project map or redirect path match (${duration}ms)`);
+}
+
+// src/logging/logRedirectRouteResponse.ts
+import { green as green2 } from "colorette";
+function logRedirectRouteResponse(matched, duration) {
+  console.log(
+    `${green2("Matched")} ${matched.type} ${matched.matchedRoute} (${duration}ms)
+Target: ${matched.redirect.targetUrl}`
+  );
+}
+
+// src/logging/logRouteResponse.ts
+function logRouteResponse(response, duration) {
+  if (response.type === "redirect") {
+    logRedirectRouteResponse(response, duration);
+    return;
+  }
+  if (response.type === "notFound") {
+    logNotFoundRouteResponse(response, duration);
+    return;
+  }
+  logRouteCompositionResponse(response, duration);
+}
+
 // src/route/withUniformGetServerSideProps.ts
 import { RedirectClient } from "@uniformdev/redirect";
 
@@ -12,11 +63,9 @@ import { RedirectClient } from "@uniformdev/redirect";
 import {
   ApiClientError,
   EMPTY_COMPOSITION,
-  logRouteResponse,
   unstable_RouteClient
 } from "@uniformdev/canvas";
-import ansicolors from "ansi-colors";
-var { red } = ansicolors;
+import { red as red2 } from "colorette";
 function createRouteFetcher(options) {
   const {
     handleNotFound,
@@ -126,7 +175,7 @@ function createRouteFetcher(options) {
         }
         return handleResult;
       } catch (e) {
-        console.error(red("Failed to fetch route"), e);
+        console.error(red2("Failed to fetch route"), e);
         if (e instanceof ApiClientError) {
           if (e.statusCode === 404) {
             return invokeNotFoundResult({ type: "notFound" }, 0);

package/dist/slug/index.js

@@ -31,6 +31,112 @@ module.exports = __toCommonJS(slug_exports);
 
 // src/slug/withUniformGetServerSideProps.ts
 var import_canvas = require("@uniformdev/canvas");
+
+// src/logging/logCompositionIssues.ts
+var import_colorette = require("colorette");
+function logCompositionIssues(prefix, issues, colour = "red") {
+  const reversedIssues = [...issues].reverse();
+  const colours = { red: import_colorette.red, green: import_colorette.green, yellow: import_colorette.yellow, white: import_colorette.white };
+  console.error(
+    `${colours[colour](prefix)}
+${reversedIssues.map(
+      (issue) => `${colours[colour](">")} ${(0, import_colorette.italic)((0, import_colorette.gray)(indent(issue.type.toUpperCase(), 7)))} ${renderIssue(issue)}`
+    ).join("\n")}`
+  );
+}
+function renderIssue(issue) {
+  var _a;
+  let path;
+  let type;
+  let message = issue.message;
+  let detail;
+  if (issue.type !== "config") {
+    path = issue.componentPath;
+    type = issue.componentType;
+    message = issue.message;
+  }
+  if (issue.type === "binding") {
+    detail = `Binding expression: ${(_a = issue.expression) == null ? void 0 : _a.pointer}`;
+  } else if (issue.type === "data") {
+    detail = `Data resource name: ${issue.dataName}, data type: ${issue.dataType}`;
+  }
+  if (issue.type === "input") {
+    detail = issue.inputName;
+  }
+  let result = `${(0, import_colorette.white)(blockify(message))}`;
+  if (detail) {
+    result += `
+${indent(" ", 10)}${(0, import_colorette.gray)(`${detail}`)}`;
+  }
+  if (path && type) {
+    result += `
+${indent(" ", 10)}${(0, import_colorette.gray)(`Occurred on component ${type} at slot path ${path}`)}`;
+  }
+  return result;
+}
+function indent(str, len) {
+  const indent2 = len != null ? len : 10;
+  return str.padStart(indent2);
+}
+function blockify(str, len) {
+  const indentSize = len != null ? len : 10;
+  return str.split("\n").map((line, index) => index === 0 ? line : `${indent(" ", indentSize)}${line}`).join("\n");
+}
+
+// src/logging/logCompositionResponse.ts
+var import_colorette2 = require("colorette");
+function logCompositionResponse(compositionApiResponse, duration) {
+  var _a, _b;
+  const resErrors = (_a = compositionApiResponse.errors) != null ? _a : [];
+  const resWarnings = (_b = compositionApiResponse.warnings) != null ? _b : [];
+  if (resErrors.length > 0) {
+    logCompositionIssues(
+      `Composition data error${resErrors.length === 1 ? "" : "s"}; some content may be missing`,
+      resErrors,
+      "red"
+    );
+  }
+  if (resWarnings.length > 0) {
+    logCompositionIssues(
+      `Composition data warning${resWarnings.length === 1 ? "" : "s"}; some content may be missing`,
+      resWarnings,
+      "yellow"
+    );
+  }
+  if (compositionApiResponse.diagnostics) {
+    console.log(`
+Diagnostics`);
+    const { compositionFetch, data } = compositionApiResponse.diagnostics;
+    const table = {
+      [`${(0, import_colorette2.white)("Composition")}`]: {
+        "Duration (ms)": resolveDiagnosticsDuration(compositionFetch),
+        "Edge Cached": compositionFetch == null ? void 0 : compositionFetch.cacheHit
+      }
+    };
+    if (data) {
+      data.forEach((d) => {
+        table[d.dataName] = {
+          "Duration (ms)": resolveDiagnosticsDuration(d.performance),
+          "Edge Cached": d.performance.cacheHit,
+          "Retry Count": d.performance.retryCount
+        };
+      });
+    }
+    table["Total Response"] = {
+      "Duration (ms)": duration != null ? duration : "no data"
+    };
+    console.table(table);
+  }
+}
+function resolveDiagnosticsDuration(data) {
+  var _a, _b;
+  if (!data) {
+    return "no data";
+  }
+  return (_b = (_a = data.duration) != null ? _a : data.total) != null ? _b : "no data";
+}
+
+// src/slug/withUniformGetServerSideProps.ts
 var withUniformGetServerSideProps = (options) => {
   const canvasClient = (options == null ? void 0 : options.client) || new import_canvas.CanvasClient({
     apiKey: process.env.UNIFORM_API_KEY,
@@ -59,7 +165,7 @@ var withUniformGetServerSideProps = (options) => {
         const duration = Date.now() - time;
         composition = response.composition;
         if (!(options == null ? void 0 : options.silent)) {
-          (0, import_canvas.logCompositionResponse)(response, duration);
+          logCompositionResponse(response, duration);
         }
       } catch (e) {
         console.error("[canvas-next] Failed to fetch composition", e);
@@ -150,7 +256,7 @@ var withUniformGetStaticProps = (options) => {
         const duration = Date.now() - time;
         composition = response.composition;
         if (!(options == null ? void 0 : options.silent)) {
-          (0, import_canvas3.logCompositionResponse)(response, duration);
+          logCompositionResponse(response, duration);
         }
       } catch (e) {
         console.error("[canvas-next] Failed to fetch composition", e);

package/dist/slug/index.mjs

@@ -1,3 +1,6 @@
+import {
+  logCompositionResponse
+} from "../chunk-6IDBHA5X.mjs";
 import {
   resolveSlugFromParams
 } from "../chunk-TR7V6ABJ.mjs";
@@ -7,8 +10,7 @@ import {
   CANVAS_DRAFT_STATE,
   CANVAS_PUBLISHED_STATE,
   CanvasClient,
-  EMPTY_COMPOSITION,
-  logCompositionResponse
+  EMPTY_COMPOSITION
 } from "@uniformdev/canvas";
 var withUniformGetServerSideProps = (options) => {
   const canvasClient = (options == null ? void 0 : options.client) || new CanvasClient({
@@ -92,8 +94,7 @@ import {
   CANVAS_DRAFT_STATE as CANVAS_DRAFT_STATE3,
   CANVAS_PUBLISHED_STATE as CANVAS_PUBLISHED_STATE3,
   CanvasClient as CanvasClient3,
-  EMPTY_COMPOSITION as EMPTY_COMPOSITION2,
-  logCompositionResponse as logCompositionResponse2
+  EMPTY_COMPOSITION as EMPTY_COMPOSITION2
 } from "@uniformdev/canvas";
 var withUniformGetStaticProps = (options) => {
   var _a;
@@ -127,7 +128,7 @@ var withUniformGetStaticProps = (options) => {
         const duration = Date.now() - time;
         composition = response.composition;
         if (!(options == null ? void 0 : options.silent)) {
-          logCompositionResponse2(response, duration);
+          logCompositionResponse(response, duration);
         }
       } catch (e) {
         console.error("[canvas-next] Failed to fetch composition", e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-next",
-  "version": "19.14.2-alpha.1+1a0bb3525",
+  "version": "19.14.2-alpha.11+79c4dd05d",
   "description": "Next.js SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -63,12 +63,12 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.14.2-alpha.1+1a0bb3525",
-    "@uniformdev/canvas-react": "19.14.2-alpha.1+1a0bb3525",
-    "@uniformdev/project-map": "19.14.2-alpha.1+1a0bb3525",
-    "@uniformdev/redirect": "19.14.2-alpha.1+1a0bb3525",
-    "@uniformdev/richtext": "19.14.2-alpha.1+1a0bb3525",
-    "ansi-colors": "^4.1.3"
+    "@uniformdev/canvas": "19.14.2-alpha.11+79c4dd05d",
+    "@uniformdev/canvas-react": "19.14.2-alpha.11+79c4dd05d",
+    "@uniformdev/project-map": "19.14.2-alpha.11+79c4dd05d",
+    "@uniformdev/redirect": "19.14.2-alpha.11+79c4dd05d",
+    "@uniformdev/richtext": "19.14.2-alpha.11+79c4dd05d",
+    "colorette": "2.0.20"
   },
   "peerDependencies": {
     "next": ">= 12.0.0",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1a0bb3525e8302e4b294f101812f195c0e5f7f26"
+  "gitHead": "79c4dd05dd9fb452762d03812539d5cf0eba44fa"
 }