@amplifyup/sdk 0.1.23 → 0.1.24

package/dist/react.mjs

@@ -1,6 +1,7 @@
 'use client';
-import { createContext, useState, useEffect, useContext, Fragment as Fragment$1 } from 'react';
+import { createContext, useState, useEffect, useContext, Fragment as Fragment$1, Component } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { marked } from 'marked';
 
 /* @amplifyup/sdk - https://amplifyup.ai */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -2659,6 +2660,53 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+var ComponentRenderBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    console.error(
+      `[AmplifyRenderer] "${this.props.componentId}" (${this.props.nodeId}) threw while rendering:`,
+      error
+    );
+  }
+  render() {
+    if (this.state.error) {
+      if (process.env.NODE_ENV !== "production") {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-amplifyup-render-error": "",
+            "data-component-id": this.props.componentId,
+            "data-node-id": this.props.nodeId,
+            style: {
+              margin: "1rem 0",
+              padding: "0.75rem 1rem",
+              border: "1px solid #fca5a5",
+              borderRadius: "0.5rem",
+              background: "#fef2f2",
+              color: "#991b1b",
+              fontSize: "0.875rem"
+            },
+            children: [
+              'Component "',
+              this.props.componentId,
+              '" failed to render:',
+              " ",
+              this.state.error.message
+            ]
+          }
+        );
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+};
 function AmplifyRenderer({
   renderComponent,
   pageConfig: serverPageConfig,
@@ -3015,11 +3063,20 @@ function AmplifyRenderer({
     const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
     console.log(`[AmplifyRenderer] Calling renderComponent for ${node.componentId}`, {
       hasSlots: !!slotsToPass,
-      slotKeys: slotsToPass ? Object.keys(slotsToPass) : []
+      slotKeys: slotsToPass ? Object.keys(slotsToPass) : [],
+      propKeys: Object.keys(node.props || {}),
+      props: node.props || {}
     });
-    return /* @__PURE__ */ jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: renderComponent(node.componentId, node.props || {}, slotsToPass, {
-      layoutNodeId: node.id
-    }) });
+    return /* @__PURE__ */ jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsx(
+      ComponentRenderBoundary,
+      {
+        componentId: node.componentId,
+        nodeId: node.id,
+        children: renderComponent(node.componentId, node.props || {}, slotsToPass, {
+          layoutNodeId: node.id
+        })
+      }
+    ) });
   };
   const rawTree = pageConfig.layoutTree;
   const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
@@ -3265,6 +3322,25 @@ function Slot({
     }
   );
 }
+function formatFieldValue(value) {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    const parts = value.map((item) => {
+      if (typeof item === "string") return item;
+      if (item && typeof item === "object" && "children" in item && Array.isArray(item.children)) {
+        return item.children.map((c) => typeof c?.text === "string" ? c.text : "").join("");
+      }
+      return "";
+    }).filter(Boolean);
+    if (parts.length > 0) return parts.join(" ");
+  }
+  if (value && typeof value === "object") {
+    return "";
+  }
+  return "";
+}
 function Field({
   name,
   fallback,
@@ -3283,7 +3359,51 @@ function Field({
   if (render) {
     return /* @__PURE__ */ jsx("span", { className, children: render(fieldValue) });
   }
-  return /* @__PURE__ */ jsx("span", { className, children: String(fieldValue) });
+  const text = formatFieldValue(fieldValue);
+  if (!text) {
+    return fallback ? /* @__PURE__ */ jsx("span", { className, children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsx("span", { className, children: text });
+}
+function markdownToHtml(markdown) {
+  try {
+    const result = marked.parse(markdown, { async: false });
+    return typeof result === "string" ? result : "";
+  } catch {
+    return markdown;
+  }
+}
+function RichText({
+  name,
+  fallback,
+  className,
+  as: Tag = "div"
+}) {
+  const context = useContext(ComponentContext);
+  if (!context) {
+    console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
+    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
+  }
+  const fieldValue = context.props?.[name];
+  if (fieldValue === void 0 || fieldValue === null || fieldValue === "") {
+    return fallback ? /* @__PURE__ */ jsx(Tag, { className, children: fallback }) : null;
+  }
+  let html = "";
+  if (typeof fieldValue === "string") {
+    const trimmed = fieldValue.trim();
+    if (trimmed.startsWith("<") && trimmed.includes(">")) {
+      html = fieldValue;
+    } else {
+      html = markdownToHtml(fieldValue);
+    }
+  } else {
+    const text = formatFieldValue(fieldValue);
+    html = text ? markdownToHtml(text) : "";
+  }
+  if (!html) {
+    return fallback ? /* @__PURE__ */ jsx(Tag, { className, children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
 var usePathname = null;
 if (typeof window !== "undefined") {
@@ -3442,6 +3562,6 @@ function useAmplifyUp() {
   return context;
 }
 
-export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, Field, Slot, fetchPageConfigServer, isComposerPreview, isPreviewRequest, useAmplifyUp };
+export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, Field, RichText, Slot, fetchPageConfigServer, isComposerPreview, isPreviewRequest, useAmplifyUp };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map