@amplifyup/sdk 0.1.48 → 0.1.50

package/dist/react.d.mts

@@ -5,8 +5,6 @@ import React, { ReactNode } from 'react';
 export { AmplifyRenderer } from './AmplifyRenderer.mjs';
 export { Q as QueryContentError, e as QueryContentOptions, k as QueryFilter, l as QueryFilterOp, i as QueryPagination, h as QueryResult, m as QuerySort, j as QuerySpec, S as SelectVariantsError, a as SelectVariantsOptions, b as SelectVariantsResult, n as nextPageSpec, q as queryContent, d as searchSpec, s as selectVariants } from './query-CWFb7rSm.mjs';
 export { i as isComposerPreview, a as isPreviewRequest, b as isWorkingContentRequest } from './preview-_vHmzRen.mjs';
-export { fetchPageConfigServer } from './server.mjs';
-import './reservedRoutes-aGgViBDM.mjs';
 
 type RenderComponentContext = {
     /** Unique layout-tree node id — required when multiple instances share a component type. */
@@ -88,42 +86,73 @@ declare function Slot({ name, className, }: {
     name: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element | null;
-declare function Field({ name, fallback, className, render, }: {
-    name: string;
+declare function Field(props: {
+    /** Field value from your component props. Do not also pass `name`. */
+    value?: unknown;
+    /**
+     * @deprecated Will be removed. Use `value={…}` instead and omit `name`.
+     * Do not pass `name` together with `value`.
+     */
+    name?: string;
     fallback?: ReactNode;
     className?: string;
     render?: (value: any) => ReactNode;
 }): string | number | true | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null;
 /**
- * RichText - Renders a markdown (or HTML string) field as formatted HTML.
+ * RichText - Renders a markdown (or HTML string) value as formatted HTML.
  *
- * Use for config/data fields of kind `richtext`. Values are stored as Markdown
- * across Composer for portability across CMS platforms.
+ * Pass the field value from your component props (`value={body}`). Values are
+ * Markdown for portability across CMS platforms.
  *
  * @example
  * ```tsx
- * <RichText name="body" className="prose" />
+ * function Article({ title, body }: { title: string; body: string }) {
+ *   return (
+ *     <article>
+ *       <h1><Field value={title} /></h1>
+ *       <RichText value={body} className="prose" />
+ *     </article>
+ *   );
+ * }
  * ```
  */
-declare function RichText({ name, fallback, className, as: Tag, }: {
-    name: string;
+declare function RichText(props: {
+    /** Markdown (or HTML) string from your component props. Do not also pass `name`. */
+    value?: string | null;
+    /**
+     * @deprecated Will be removed. Use `value={…}` (or string children) and omit `name`.
+     * Do not pass `name` together with `value`.
+     */
+    name?: string;
     fallback?: ReactNode;
     className?: string;
     as?: keyof JSX.IntrinsicElements;
+    /** String children are treated as the markdown value (same as `value`). */
+    children?: ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
 /**
- * Image — renders a provider-backed image field as `<img>`.
+ * Image — renders a provider-backed image value as `<img>`.
  *
- * Values are portable `{ url, alt?, width?, height? }` (or a plain URL string).
- * AmplifyUp does not host image files; the browser loads `url` from the provider CDN.
+ * Pass the portable `{ url, alt?, width?, height? }` (or URL string) from your
+ * component props via `value`. AmplifyUp does not host image files.
  *
  * @example
  * ```tsx
- * <Image name="backgroundImage" className="h-full w-full object-cover" />
+ * function Hero({ backgroundImage }: { backgroundImage: { url: string } }) {
+ *   return (
+ *     <Image value={backgroundImage} className="h-full w-full object-cover" />
+ *   );
+ * }
  * ```
  */
-declare function Image({ name, alt: altProp, className, width: widthProp, height: heightProp, ...imgProps }: {
-    name: string;
+declare function Image(props: {
+    /** Portable image or URL string from your component props. Do not also pass `name`. */
+    value?: unknown;
+    /**
+     * @deprecated Will be removed. Use `value={…}` and omit `name`.
+     * Do not pass `name` together with `value`.
+     */
+    name?: string;
     alt?: string;
 } & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'name'>): react_jsx_runtime.JSX.Element | null;
 

package/dist/react.d.ts

@@ -5,8 +5,6 @@ import React, { ReactNode } from 'react';
 export { AmplifyRenderer } from './AmplifyRenderer.js';
 export { Q as QueryContentError, e as QueryContentOptions, k as QueryFilter, l as QueryFilterOp, i as QueryPagination, h as QueryResult, m as QuerySort, j as QuerySpec, S as SelectVariantsError, a as SelectVariantsOptions, b as SelectVariantsResult, n as nextPageSpec, q as queryContent, d as searchSpec, s as selectVariants } from './query-L7zSmLFX.js';
 export { i as isComposerPreview, a as isPreviewRequest, b as isWorkingContentRequest } from './preview-_vHmzRen.js';
-export { fetchPageConfigServer } from './server.js';
-import './reservedRoutes-aGgViBDM.js';
 
 type RenderComponentContext = {
     /** Unique layout-tree node id — required when multiple instances share a component type. */
@@ -88,42 +86,73 @@ declare function Slot({ name, className, }: {
     name: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element | null;
-declare function Field({ name, fallback, className, render, }: {
-    name: string;
+declare function Field(props: {
+    /** Field value from your component props. Do not also pass `name`. */
+    value?: unknown;
+    /**
+     * @deprecated Will be removed. Use `value={…}` instead and omit `name`.
+     * Do not pass `name` together with `value`.
+     */
+    name?: string;
     fallback?: ReactNode;
     className?: string;
     render?: (value: any) => ReactNode;
 }): string | number | true | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null;
 /**
- * RichText - Renders a markdown (or HTML string) field as formatted HTML.
+ * RichText - Renders a markdown (or HTML string) value as formatted HTML.
  *
- * Use for config/data fields of kind `richtext`. Values are stored as Markdown
- * across Composer for portability across CMS platforms.
+ * Pass the field value from your component props (`value={body}`). Values are
+ * Markdown for portability across CMS platforms.
  *
  * @example
  * ```tsx
- * <RichText name="body" className="prose" />
+ * function Article({ title, body }: { title: string; body: string }) {
+ *   return (
+ *     <article>
+ *       <h1><Field value={title} /></h1>
+ *       <RichText value={body} className="prose" />
+ *     </article>
+ *   );
+ * }
  * ```
  */
-declare function RichText({ name, fallback, className, as: Tag, }: {
-    name: string;
+declare function RichText(props: {
+    /** Markdown (or HTML) string from your component props. Do not also pass `name`. */
+    value?: string | null;
+    /**
+     * @deprecated Will be removed. Use `value={…}` (or string children) and omit `name`.
+     * Do not pass `name` together with `value`.
+     */
+    name?: string;
     fallback?: ReactNode;
     className?: string;
     as?: keyof JSX.IntrinsicElements;
+    /** String children are treated as the markdown value (same as `value`). */
+    children?: ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
 /**
- * Image — renders a provider-backed image field as `<img>`.
+ * Image — renders a provider-backed image value as `<img>`.
  *
- * Values are portable `{ url, alt?, width?, height? }` (or a plain URL string).
- * AmplifyUp does not host image files; the browser loads `url` from the provider CDN.
+ * Pass the portable `{ url, alt?, width?, height? }` (or URL string) from your
+ * component props via `value`. AmplifyUp does not host image files.
  *
  * @example
  * ```tsx
- * <Image name="backgroundImage" className="h-full w-full object-cover" />
+ * function Hero({ backgroundImage }: { backgroundImage: { url: string } }) {
+ *   return (
+ *     <Image value={backgroundImage} className="h-full w-full object-cover" />
+ *   );
+ * }
  * ```
  */
-declare function Image({ name, alt: altProp, className, width: widthProp, height: heightProp, ...imgProps }: {
-    name: string;
+declare function Image(props: {
+    /** Portable image or URL string from your component props. Do not also pass `name`. */
+    value?: unknown;
+    /**
+     * @deprecated Will be removed. Use `value={…}` and omit `name`.
+     * Do not pass `name` together with `value`.
+     */
+    name?: string;
     alt?: string;
 } & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'name'>): react_jsx_runtime.JSX.Element | null;
 

package/dist/react.js

@@ -3885,6 +3885,23 @@ function formatFieldValue(value) {
   }
   return "";
 }
+function warnProjectionProps(component, name, hasExplicitValue) {
+  if (process.env.NODE_ENV === "production") return;
+  if (hasExplicitValue && name) {
+    console.warn(
+      `[AmplifyUp SDK] ${component}: pass either value={\u2026} or deprecated name="\u2026", not both. Prefer value={\u2026} and omit name.`
+    );
+    return;
+  }
+  if (name) {
+    console.warn(
+      `[AmplifyUp SDK] ${component} \`name\` is deprecated and will be removed. Prefer value={${name}} from your component props and omit name.`
+    );
+  }
+}
+function hasOwnProp(props, key) {
+  return Object.prototype.hasOwnProperty.call(props, key);
+}
 function isLinkListItem(value) {
   return !!value && typeof value === "object" && !Array.isArray(value);
 }
@@ -3912,21 +3929,23 @@ function renderLinkList(items, className) {
     );
   }) });
 }
-function Field({
-  name,
-  fallback,
-  className,
-  render
-}) {
+function Field(props) {
+  const { value, name, fallback, className, render } = props;
   const context = React.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
+  const hasExplicitValue = hasOwnProp(props, "value");
+  const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
+  const editName = hasExplicitValue ? "" : name || "";
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
-    name,
-    context?.props?.[name]
+    editName,
+    sourceValue
   );
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] Field "${name}" used outside ComponentContextProvider`);
+  warnProjectionProps("Field", name, hasExplicitValue);
+  if (!context && !hasExplicitValue) {
+    console.warn(
+      "[AmplifyUp SDK] Field needs a `value` prop (or deprecated `name` alone)"
+    );
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
   if (render) {
@@ -3939,11 +3958,11 @@ function Field({
   const text = formatFieldValue(fieldValue);
   const showVisualFallback = !text && isReactNodeFallback(fallback);
   const emptyBlockField = isComposerEmptyText(fieldValue) && classNameIsBlock(className);
-  if (composerEdit && canInlineEdit(name, fieldValue) && !showVisualFallback && !emptyBlockField) {
+  if (composerEdit && editName && context && canInlineEdit(editName, fieldValue) && !showVisualFallback && !emptyBlockField) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ComposerInlineField,
       {
-        name,
+        name: editName,
         value: fieldValue,
         fallback,
         className,
@@ -3968,34 +3987,46 @@ function markdownToHtml(markdown) {
     return markdown;
   }
 }
-function RichText({
-  name,
-  fallback,
-  className,
-  as: Tag = "div"
-}) {
+function RichText(props) {
+  const {
+    value,
+    name,
+    fallback,
+    className,
+    as: Tag = "div",
+    children
+  } = props;
   const context = React.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
+  const childrenValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+  const hasValueProp = hasOwnProp(props, "value");
+  const hasExplicitValue = hasValueProp || childrenValue !== void 0;
+  const sourceValue = hasValueProp ? value : childrenValue !== void 0 ? childrenValue : name ? context?.props?.[name] : void 0;
+  const editName = hasExplicitValue ? "" : name || "";
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
-    name,
-    context?.props?.[name]
+    editName,
+    sourceValue
   );
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
+  if (!context && !hasExplicitValue) {
+    console.warn(
+      "[AmplifyUp SDK] RichText needs a `value` prop (or string children), or deprecated `name` alone"
+    );
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
+  warnProjectionProps("RichText", name, hasExplicitValue);
+  const canEdit = !!editName && !!context && canInlineEdit(editName, fieldValue);
   if (isComposerEmptyText(fieldValue)) {
-    if (composerEdit && canInlineEdit(name, fieldValue) && !isReactNodeFallback(fallback) && !classNameIsBlock(className)) {
+    if (composerEdit && canEdit && !isReactNodeFallback(fallback) && !classNameIsBlock(className)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         ComposerInlineField,
         {
-          name,
+          name: editName,
           value: fieldValue,
           fallback: typeof fallback === "string" || typeof fallback === "number" ? fallback : void 0,
           className,
-          layoutNodeId: context.layoutNodeId,
-          componentId: context.componentId
+          layoutNodeId: context?.layoutNodeId,
+          componentId: context?.componentId
         }
       );
     }
@@ -4021,22 +4052,22 @@ function RichText({
       Tag,
       {
         className,
-        "data-amplifyup-field": name,
-        "data-amplifyup-node-id": context.layoutNodeId || void 0,
+        "data-amplifyup-field": editName || void 0,
+        "data-amplifyup-node-id": context?.layoutNodeId || void 0,
         dangerouslySetInnerHTML: { __html: html }
       }
     );
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
+  if (composerEdit && canEdit) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ComposerInlineHtml,
       {
-        name,
+        name: editName,
         html,
         className,
         Tag,
-        layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId
+        layoutNodeId: context?.layoutNodeId,
+        componentId: context?.componentId
       }
     );
   }
@@ -4052,23 +4083,28 @@ function imageSrc(value) {
   if (isPortableImageValue(value)) return value.url.trim();
   return "";
 }
-function Image({
-  name,
-  alt: altProp,
-  className,
-  width: widthProp,
-  height: heightProp,
-  ...imgProps
-}) {
+function Image(props) {
+  const {
+    value,
+    name,
+    alt: altProp,
+    className,
+    width: widthProp,
+    height: heightProp,
+    ...imgProps
+  } = props;
   const context = React.useContext(ComponentContext);
+  const hasExplicitValue = hasOwnProp(props, "value");
+  const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
-    name,
-    context?.props?.[name]
+    hasExplicitValue ? "" : name || "",
+    sourceValue
   );
-  if (!context) {
+  warnProjectionProps("Image", name, hasExplicitValue);
+  if (!context && !hasExplicitValue) {
     console.warn(
-      `[AmplifyUp SDK] Image "${name}" used outside ComponentContextProvider`
+      "[AmplifyUp SDK] Image needs a `value` prop (or deprecated `name` alone)"
     );
     return null;
   }
@@ -4635,61 +4671,6 @@ function AmplifyPageContent({
     }
   );
 }
-
-// src/server.tsx
-var AMPLIFY_DEFAULT_REVALIDATE = 60;
-async function fetchPageConfigServer(route, trackingId, preview = false, options) {
-  const target = resolveAmplifyUpTarget({
-    configTarget: options?.target
-  });
-  const { orchestratorUrl, edgeUrl } = resolveAmplifyUpUrls(target);
-  const previewFlag = preview || (options?.searchParams ? isPreviewRequest(options.searchParams) : false);
-  const workingFlag = options?.searchParams ? isWorkingContentRequest(options.searchParams) : false;
-  const fetchOrchestratorPage = async (pageRoute, isPreview) => {
-    const params = new URLSearchParams({
-      route: pageRoute,
-      trackingId
-    });
-    if (isPreview) params.set("preview", "true");
-    if (workingFlag) params.set("working", "true");
-    if (options?.searchParams) {
-      const sp = options.searchParams instanceof URLSearchParams ? options.searchParams : new URLSearchParams(
-        Object.entries(options.searchParams).flatMap(
-          ([k, v]) => v == null ? [] : Array.isArray(v) ? v.map((item) => [k, item]) : [[k, v]]
-        )
-      );
-      const zoneId = sp.get("zoneId");
-      const compositionId = sp.get("compositionId");
-      if (zoneId) params.set("zoneId", zoneId);
-      if (compositionId) params.set("compositionId", compositionId);
-    }
-    const url = `${orchestratorUrl}/api/layout/provider?${params.toString()}`;
-    try {
-      const res = await fetch(url, {
-        cache: "no-store",
-        headers: { Accept: "application/json" }
-      });
-      if (!res.ok) return null;
-      const data = await res.json();
-      return data.page || null;
-    } catch {
-      return null;
-    }
-  };
-  const result = await fetchContent({
-    route,
-    trackingId,
-    anonId: options?.anonId,
-    siteId: options?.siteId,
-    preview: previewFlag,
-    orchestratorUrl,
-    edgeUrl,
-    fetchOrchestratorPage,
-    revalidate: previewFlag ? void 0 : options?.revalidate ?? AMPLIFY_DEFAULT_REVALIDATE,
-    variantKeys: previewFlag ? void 0 : options?.variantKeys
-  });
-  return result.pageConfig;
-}
 var usePathname = null;
 if (typeof window !== "undefined") {
   try {
@@ -4906,7 +4887,6 @@ exports.QueryContentError = QueryContentError;
 exports.RichText = RichText;
 exports.SelectVariantsError = SelectVariantsError;
 exports.Slot = Slot;
-exports.fetchPageConfigServer = fetchPageConfigServer;
 exports.isComposerPreview = isComposerPreview;
 exports.isPreviewRequest = isPreviewRequest;
 exports.isWorkingContentRequest = isWorkingContentRequest;