@uniformdev/canvas 19.14.1-alpha.11 → 19.14.1

package/dist/index.d.ts

@@ -7337,6 +7337,15 @@ declare function getComponentJsonPointer(ancestorsAndSelf: Array<ComponentLocati
     withSlots?: boolean | undefined;
 }): string;
 
+/** Writes colorized logs about composition fetch warnings or errors to the console */
+declare function logCompositionIssues(prefix: string, issues: CompositionIssue[], colour?: 'red' | 'green' | 'yellow' | 'white'): void;
+
+/** Writes colorized logs about a composition API fetch to the console */
+declare function logCompositionResponse(compositionApiResponse: CompositionResolvedGetResponse, duration?: number): void;
+
+/** Writes colorized logs about a route API response to the console */
+declare function logRouteResponse(response: RouteGetResponse, duration?: number): void;
+
 interface ContextualEditingWindowData {
     framework?: ReadyMessage['framework'];
     version?: ReadyMessage['version'];
@@ -7752,4 +7761,4 @@ declare function mapSlotToTestVariations(slot: ComponentInstance[] | undefined):
 
 declare const CanvasClientError: typeof ApiClientError;
 
-export { AddComponentMessage, BatchEnhancer, BatchEntry, BatchInvalidationPayload, BindVariablesOptions, BindVariablesResult, BindVariablesToObjectOptions, CANVAS_DRAFT_STATE, CANVAS_ENRICHMENT_TAG_PARAM, CANVAS_INTENT_TAG_PARAM, CANVAS_LOCALE_TAG_PARAM, CANVAS_LOCALIZATION_SLOT, CANVAS_LOCALIZATION_TYPE, CANVAS_PERSONALIZATION_PARAM, CANVAS_PERSONALIZE_SLOT, CANVAS_PERSONALIZE_TYPE, CANVAS_PUBLISHED_STATE, CANVAS_TEST_SLOT, CANVAS_TEST_TYPE, CANVAS_TEST_VARIANT_PARAM, CanvasClient, CanvasClientError, CanvasDefinitions, Channel, ChannelMessage, ChannelSubscription, ChildEnhancerBuilder, ComponentDefinition, ComponentDefinitionDeleteParameters, ComponentDefinitionGetParameters, ComponentDefinitionGetResponse, ComponentDefinitionParameter, ComponentDefinitionPermission, ComponentDefinitionPutParameters, ComponentDefinitionSlot, ComponentDefinitionSlugSettings, ComponentDefinitionVariant, ComponentEnhancer, ComponentEnhancerFunction, ComponentEnhancerOptions, ComponentInstance, ComponentLocationReference, ComponentOverridability, ComponentOverride, ComponentOverrides, ComponentParameter, ComponentParameterContextualEditing, ComponentParameterEnhancer, ComponentParameterEnhancerFunction, ComponentParameterEnhancerOptions, CompositionDataDiagnostic, CompositionDeleteParameters, CompositionDiagnostics, CompositionGetByIdParameters, CompositionGetByNodeIdParameters, CompositionGetByNodePathParameters, CompositionGetBySlugParameters, CompositionGetListResponse, CompositionGetOrderBy, CompositionGetParameters, CompositionGetResponse, CompositionGetValidResponses, CompositionIssue, CompositionPatternIssue, CompositionPutParameters, CompositionRelationshipsClientOptions, CompositionRelationshipsDDefinitionGetResponse, CompositionRelationshipsDefinitionApi, CompositionRelationshipsDefinitionGetParameters, CompositionResolvedGetResponse, CompositionUIStatus, DataElementBindingIssue, DataElementConnectionDefinition, DataResolutionConfigIssue, DataResolutionOption, DataResolutionOptionNegative, DataResolutionOptionPositive, DataResolutionParameters, DataResourceDefinition, DataResourceDefinitions, DataResourceInputIssue, DataResourceIssue, DataResourceVariables, DataSource, DataSourceClient, DataSourceDeleteParameters, DataSourceGetParameters, DataSourceGetResponse, DataSourcePutParameters, DataSourcesGetParameters, DataSourcesGetResponse, DataType, DataTypeClient, DataTypeDeleteParameters, DataTypeGetParameters, DataTypeGetResponse, DataTypePutParameters, DataVariableDefinition, DismissPlaceholderMessage, EDGE_CACHE_DISABLED, EDGE_DEFAULT_CACHE_TTL, EDGE_DEFAULT_L2_CACHE_TTL_IN_HOURS, EDGE_MAX_CACHE_TTL, EDGE_MAX_L2_CACHE_TTL_IN_HOURS, EDGE_MIN_CACHE_TTL, EDGE_MIN_L2_CACHE_TTL_IN_HOURS, EMPTY_COMPOSITION, EnhancerBuilder, EnhancerContext, EnhancerError, EventNames, IN_CONTEXT_EDITOR_COMPONENT_END_ROLE, IN_CONTEXT_EDITOR_COMPONENT_START_ROLE, IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID, IN_CONTEXT_EDITOR_QUERY_STRING_PARAM, IS_RENDERED_BY_UNIFORM_ATTRIBUTE, InvalidationPayload, InvalidationResult, LimitPolicy, LinkComponentParameterValue, LinkParamConfiguration, LinkParamValue, LinkParameterType, LinkTypeConfiguration, MessageHandler, MoveComponentMessage, NonProjectMapLinkParamValue, OverrideIssue, OverrideOptions, PLACEHOLDER_ID, PreviewEventBus, PreviewPanelSettings, ProjectMapLinkComponentParameterValue, ProjectMapLinkParamValue, ReadyMessage, ReportRenderedCompositionsMessage, ResolvedRouteGetResponse, RichTextBuiltInElement, RichTextBuiltInFormat, RichTextParamConfiguration, RichTextParamValue, RootComponentInstance, RouteDynamicInputs, RouteGetParameters, RouteGetResponse, RouteGetResponseComposition, RouteGetResponseEdgehancedComposition, RouteGetResponseNotFound, RouteGetResponseRedirect, SelectComponentMessage, SpecificProjectMap, SubscribeToCompositionOptions, TriggerCompositionActionMessage, UncachedCanvasClient, UniqueBatchEntries, UnsubscribeCallback, UpdateComponentParameterMessage, UpdateCompositionInternalMessage, UpdateCompositionMessage, UpdatePreviewSettingsMessage, UsageTrackingApi, UsageTrackingGetParameters, UsageTrackingGetResponse, UsageTrackingPostParameters, UsageTrackingPostResponse, WalkComponentTreeActions, bindVariables, bindVariablesToObject, compose, createBatchEnhancer, createCanvasChannel, createEventBus, createLimitPolicy, createUniformApiEnhancer, enhance, extractLocales, generateHash, getChannelName, getComponentJsonPointer, getComponentPath, isAddComponentMessage, isDismissPlaceholderMessage, isMovingComponentMessage, isReadyMessage, isReportRenderedCompositionsMessage, isSelectComponentMessage, isSystemComponentDefinition, isTriggerCompositionActionMessage, isUpdateComponentParameterMessage, isUpdateCompositionInternalMessage, isUpdateCompositionMessage, isUpdatePreviewSettingsMessage, localize, mapSlotToPersonalizedVariations, mapSlotToTestVariations, nullLimitPolicy, subscribeToComposition, unstable_CompositionRelationshipClient, unstable_RouteClient, walkComponentTree };
+export { AddComponentMessage, BatchEnhancer, BatchEntry, BatchInvalidationPayload, BindVariablesOptions, BindVariablesResult, BindVariablesToObjectOptions, CANVAS_DRAFT_STATE, CANVAS_ENRICHMENT_TAG_PARAM, CANVAS_INTENT_TAG_PARAM, CANVAS_LOCALE_TAG_PARAM, CANVAS_LOCALIZATION_SLOT, CANVAS_LOCALIZATION_TYPE, CANVAS_PERSONALIZATION_PARAM, CANVAS_PERSONALIZE_SLOT, CANVAS_PERSONALIZE_TYPE, CANVAS_PUBLISHED_STATE, CANVAS_TEST_SLOT, CANVAS_TEST_TYPE, CANVAS_TEST_VARIANT_PARAM, CanvasClient, CanvasClientError, CanvasDefinitions, Channel, ChannelMessage, ChannelSubscription, ChildEnhancerBuilder, ComponentDefinition, ComponentDefinitionDeleteParameters, ComponentDefinitionGetParameters, ComponentDefinitionGetResponse, ComponentDefinitionParameter, ComponentDefinitionPermission, ComponentDefinitionPutParameters, ComponentDefinitionSlot, ComponentDefinitionSlugSettings, ComponentDefinitionVariant, ComponentEnhancer, ComponentEnhancerFunction, ComponentEnhancerOptions, ComponentInstance, ComponentLocationReference, ComponentOverridability, ComponentOverride, ComponentOverrides, ComponentParameter, ComponentParameterContextualEditing, ComponentParameterEnhancer, ComponentParameterEnhancerFunction, ComponentParameterEnhancerOptions, CompositionDataDiagnostic, CompositionDeleteParameters, CompositionDiagnostics, CompositionGetByIdParameters, CompositionGetByNodeIdParameters, CompositionGetByNodePathParameters, CompositionGetBySlugParameters, CompositionGetListResponse, CompositionGetOrderBy, CompositionGetParameters, CompositionGetResponse, CompositionGetValidResponses, CompositionIssue, CompositionPatternIssue, CompositionPutParameters, CompositionRelationshipsClientOptions, CompositionRelationshipsDDefinitionGetResponse, CompositionRelationshipsDefinitionApi, CompositionRelationshipsDefinitionGetParameters, CompositionResolvedGetResponse, CompositionUIStatus, DataElementBindingIssue, DataElementConnectionDefinition, DataResolutionConfigIssue, DataResolutionOption, DataResolutionOptionNegative, DataResolutionOptionPositive, DataResolutionParameters, DataResourceDefinition, DataResourceDefinitions, DataResourceInputIssue, DataResourceIssue, DataResourceVariables, DataSource, DataSourceClient, DataSourceDeleteParameters, DataSourceGetParameters, DataSourceGetResponse, DataSourcePutParameters, DataSourcesGetParameters, DataSourcesGetResponse, DataType, DataTypeClient, DataTypeDeleteParameters, DataTypeGetParameters, DataTypeGetResponse, DataTypePutParameters, DataVariableDefinition, DismissPlaceholderMessage, EDGE_CACHE_DISABLED, EDGE_DEFAULT_CACHE_TTL, EDGE_DEFAULT_L2_CACHE_TTL_IN_HOURS, EDGE_MAX_CACHE_TTL, EDGE_MAX_L2_CACHE_TTL_IN_HOURS, EDGE_MIN_CACHE_TTL, EDGE_MIN_L2_CACHE_TTL_IN_HOURS, EMPTY_COMPOSITION, EnhancerBuilder, EnhancerContext, EnhancerError, EventNames, IN_CONTEXT_EDITOR_COMPONENT_END_ROLE, IN_CONTEXT_EDITOR_COMPONENT_START_ROLE, IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID, IN_CONTEXT_EDITOR_QUERY_STRING_PARAM, IS_RENDERED_BY_UNIFORM_ATTRIBUTE, InvalidationPayload, InvalidationResult, LimitPolicy, LinkComponentParameterValue, LinkParamConfiguration, LinkParamValue, LinkParameterType, LinkTypeConfiguration, MessageHandler, MoveComponentMessage, NonProjectMapLinkParamValue, OverrideIssue, OverrideOptions, PLACEHOLDER_ID, PreviewEventBus, PreviewPanelSettings, ProjectMapLinkComponentParameterValue, ProjectMapLinkParamValue, ReadyMessage, ReportRenderedCompositionsMessage, ResolvedRouteGetResponse, RichTextBuiltInElement, RichTextBuiltInFormat, RichTextParamConfiguration, RichTextParamValue, RootComponentInstance, RouteDynamicInputs, RouteGetParameters, RouteGetResponse, RouteGetResponseComposition, RouteGetResponseEdgehancedComposition, RouteGetResponseNotFound, RouteGetResponseRedirect, SelectComponentMessage, SpecificProjectMap, SubscribeToCompositionOptions, TriggerCompositionActionMessage, UncachedCanvasClient, UniqueBatchEntries, UnsubscribeCallback, UpdateComponentParameterMessage, UpdateCompositionInternalMessage, UpdateCompositionMessage, UpdatePreviewSettingsMessage, UsageTrackingApi, UsageTrackingGetParameters, UsageTrackingGetResponse, UsageTrackingPostParameters, UsageTrackingPostResponse, WalkComponentTreeActions, bindVariables, bindVariablesToObject, compose, createBatchEnhancer, createCanvasChannel, createEventBus, createLimitPolicy, createUniformApiEnhancer, enhance, extractLocales, generateHash, getChannelName, getComponentJsonPointer, getComponentPath, isAddComponentMessage, isDismissPlaceholderMessage, isMovingComponentMessage, isReadyMessage, isReportRenderedCompositionsMessage, isSelectComponentMessage, isSystemComponentDefinition, isTriggerCompositionActionMessage, isUpdateComponentParameterMessage, isUpdateCompositionInternalMessage, isUpdateCompositionMessage, isUpdatePreviewSettingsMessage, localize, logCompositionIssues, logCompositionResponse, logRouteResponse, mapSlotToPersonalizedVariations, mapSlotToTestVariations, nullLimitPolicy, subscribeToComposition, unstable_CompositionRelationshipClient, unstable_RouteClient, walkComponentTree };

package/dist/index.esm.js

@@ -1264,6 +1264,163 @@ var UniqueBatchEntries = class {
   }
 };
 
+// src/logging/logCompositionIssues.ts
+import ansicolors from "ansi-colors";
+var { gray, green, italic, red, white, yellow } = ansicolors;
+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
+import ansicolors2 from "ansi-colors";
+var { white: white2 } = ansicolors2;
+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";
+}
+
+// src/logging/logCompositionRouteResponse.ts
+import ansicolors3 from "ansi-colors";
+var { gray: gray2, green: green2, red: red2, yellow: yellow2 } = ansicolors3;
+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 ? red2 : resWarnings.length > 0 ? yellow2 : green2;
+  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(
+        `  ${gray2("Matched dynamic inputs:\n   ")}`,
+        entries.map(([k, v]) => `${k}: ${v}`).join("\n    ")
+      );
+    }
+  }
+  logCompositionResponse(matched.compositionApiResponse, duration);
+}
+
+// src/logging/logNotFoundRouteResponse.ts
+import ansicolors4 from "ansi-colors";
+var { yellow: yellow3 } = ansicolors4;
+function logNotFoundRouteResponse(_matched, duration) {
+  console.log(`${yellow3("Not found")} no project map or redirect path match (${duration}ms)`);
+}
+
+// src/logging/logRedirectRouteResponse.ts
+import ansicolors5 from "ansi-colors";
+var { green: green3 } = ansicolors5;
+function logRedirectRouteResponse(matched, duration) {
+  console.log(
+    `${green3("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/utils/hash.ts
 var generateHash = ({
   composition,
@@ -1767,6 +1924,9 @@ export {
   isUpdateCompositionMessage,
   isUpdatePreviewSettingsMessage,
   localize,
+  logCompositionIssues,
+  logCompositionResponse,
+  logRouteResponse,
   mapSlotToPersonalizedVariations,
   mapSlotToTestVariations,
   nullLimitPolicy,

package/dist/index.js

@@ -338,6 +338,9 @@ __export(src_exports, {
   isUpdateCompositionMessage: () => isUpdateCompositionMessage,
   isUpdatePreviewSettingsMessage: () => isUpdatePreviewSettingsMessage,
   localize: () => localize,
+  logCompositionIssues: () => logCompositionIssues,
+  logCompositionResponse: () => logCompositionResponse,
+  logRouteResponse: () => logRouteResponse,
   mapSlotToPersonalizedVariations: () => mapSlotToPersonalizedVariations,
   mapSlotToTestVariations: () => mapSlotToTestVariations,
   nullLimitPolicy: () => nullLimitPolicy,
@@ -1347,6 +1350,163 @@ var UniqueBatchEntries = class {
   }
 };
 
+// src/logging/logCompositionIssues.ts
+var import_ansi_colors = __toESM(require("ansi-colors"));
+var { gray, green, italic, red, white, yellow } = import_ansi_colors.default;
+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
+var import_ansi_colors2 = __toESM(require("ansi-colors"));
+var { white: white2 } = import_ansi_colors2.default;
+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";
+}
+
+// src/logging/logCompositionRouteResponse.ts
+var import_ansi_colors3 = __toESM(require("ansi-colors"));
+var { gray: gray2, green: green2, red: red2, yellow: yellow2 } = import_ansi_colors3.default;
+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 ? red2 : resWarnings.length > 0 ? yellow2 : green2;
+  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(
+        `  ${gray2("Matched dynamic inputs:\n   ")}`,
+        entries.map(([k, v]) => `${k}: ${v}`).join("\n    ")
+      );
+    }
+  }
+  logCompositionResponse(matched.compositionApiResponse, duration);
+}
+
+// src/logging/logNotFoundRouteResponse.ts
+var import_ansi_colors4 = __toESM(require("ansi-colors"));
+var { yellow: yellow3 } = import_ansi_colors4.default;
+function logNotFoundRouteResponse(_matched, duration) {
+  console.log(`${yellow3("Not found")} no project map or redirect path match (${duration}ms)`);
+}
+
+// src/logging/logRedirectRouteResponse.ts
+var import_ansi_colors5 = __toESM(require("ansi-colors"));
+var { green: green3 } = import_ansi_colors5.default;
+function logRedirectRouteResponse(matched, duration) {
+  console.log(
+    `${green3("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/utils/hash.ts
 var generateHash = ({
   composition,
@@ -1851,6 +2011,9 @@ var CanvasClientError = import_api6.ApiClientError;
   isUpdateCompositionMessage,
   isUpdatePreviewSettingsMessage,
   localize,
+  logCompositionIssues,
+  logCompositionResponse,
+  logRouteResponse,
   mapSlotToPersonalizedVariations,
   mapSlotToTestVariations,
   nullLimitPolicy,

package/dist/index.mjs

@@ -1264,6 +1264,163 @@ var UniqueBatchEntries = class {
   }
 };
 
+// src/logging/logCompositionIssues.ts
+import ansicolors from "ansi-colors";
+var { gray, green, italic, red, white, yellow } = ansicolors;
+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
+import ansicolors2 from "ansi-colors";
+var { white: white2 } = ansicolors2;
+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";
+}
+
+// src/logging/logCompositionRouteResponse.ts
+import ansicolors3 from "ansi-colors";
+var { gray: gray2, green: green2, red: red2, yellow: yellow2 } = ansicolors3;
+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 ? red2 : resWarnings.length > 0 ? yellow2 : green2;
+  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(
+        `  ${gray2("Matched dynamic inputs:\n   ")}`,
+        entries.map(([k, v]) => `${k}: ${v}`).join("\n    ")
+      );
+    }
+  }
+  logCompositionResponse(matched.compositionApiResponse, duration);
+}
+
+// src/logging/logNotFoundRouteResponse.ts
+import ansicolors4 from "ansi-colors";
+var { yellow: yellow3 } = ansicolors4;
+function logNotFoundRouteResponse(_matched, duration) {
+  console.log(`${yellow3("Not found")} no project map or redirect path match (${duration}ms)`);
+}
+
+// src/logging/logRedirectRouteResponse.ts
+import ansicolors5 from "ansi-colors";
+var { green: green3 } = ansicolors5;
+function logRedirectRouteResponse(matched, duration) {
+  console.log(
+    `${green3("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/utils/hash.ts
 var generateHash = ({
   composition,
@@ -1767,6 +1924,9 @@ export {
   isUpdateCompositionMessage,
   isUpdatePreviewSettingsMessage,
   localize,
+  logCompositionIssues,
+  logCompositionResponse,
+  logRouteResponse,
   mapSlotToPersonalizedVariations,
   mapSlotToTestVariations,
   nullLimitPolicy,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas",
-  "version": "19.14.1-alpha.11+89dabee14",
+  "version": "19.14.1",
   "description": "Common functionality and types for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -38,8 +38,8 @@
     "pusher-js": "8.0.1"
   },
   "dependencies": {
-    "@uniformdev/context": "19.14.1-alpha.11+89dabee14",
-    "colorette": "2.0.20",
+    "@uniformdev/context": "19.14.1",
+    "ansi-colors": "^4.1.3",
     "immer": "9.0.21"
   },
   "files": [
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "89dabee148728ef7f329e18b7194766a9e6b9631"
+  "gitHead": "edd5e3bb74b148c5b947109a794a3bab42384cb7"
 }