@amplifyup/sdk 0.1.77 → 0.1.79

package/README.md

@@ -28,42 +28,37 @@ export default function RootLayout({ children }) {
 }
 ```
 
-### 2. Page content
+### 2. Component registry
 
-```tsx
-import { AmplifyPageContent, ComponentContextProvider } from '@amplifyup/sdk/react';
-import { Hero } from '@/components/Hero';
+Wrap your Next config with `withAmplifyUp`. It builds your **component registry** from `src/components` (or `components/` when there is no `src/`) every time `next dev` or `next build` runs, and keeps it current while you work.
 
-const registry = { Hero };
+```js
+// next.config.js
+const { withAmplifyUp } = require('@amplifyup/sdk/next');
 
-function renderComponent(componentId, props, slots, context) {
-  const Component = registry[componentId];
-  if (!Component) return null;
-  return (
-    <ComponentContextProvider
-      props={props}
-      slots={slots}
-      layoutNodeId={context?.layoutNodeId}
-      componentId={componentId}
-    >
-      <Component {...props} />
-    </ComponentContextProvider>
-  );
-}
+module.exports = withAmplifyUp({
+  // your existing Next config
+});
+```
+
+You never register components by hand. Adding a component means adding a file.
+
+### 3. Page content
+
+Render `<AmplifyPage />` from the generated registry:
+
+```tsx
+import { AmplifyPage } from '@/.amplifyup/component-registry';
 
 export default function Page() {
-  return (
-    <AmplifyPageContent
-      renderComponent={renderComponent}
-      fallback={<YourStaticPage />}
-    />
-  );
+  return <AmplifyPage fallback={<YourStaticPage />} />;
 }
 ```
 
-### 3. Write a component
+### 4. Write a component
 
 ```tsx
+// src/components/Hero.tsx
 import { Field } from '@amplifyup/sdk/react';
 import type { Fields } from '@amplifyup/sdk/react';
 
@@ -84,6 +79,72 @@ That's the whole loop. The rest of this section is the detail.
 
 ---
 
+## Component registry
+
+The SDK owns how layout components are found and rendered. Your site supplies the components; the SDK builds the lookup, renders each component, and gives it the context `Field`, `Slot`, `Image` and `RichText` read. Writing that lookup yourself is not supported.
+
+### How components are found
+
+| File | Registry name |
+| --- | --- |
+| `src/components/Hero.tsx` | `Hero` |
+| `src/components/Hero/index.tsx` | `Hero` |
+| `src/components/marketing/promo-card.tsx` | `promo-card` |
+
+- Each file needs a default export, or a named export with the same name as the file (`export function Hero`).
+- Names match the component ID in AmplifyUp regardless of case and separators, so `Hero`, `hero` and `HERO` are the same component, and so are `promo-card` and `PromoCard`.
+- Tests, stories and type files are skipped. Files that don't export a component are listed as skipped when the registry builds.
+- Two files that resolve to the same name stop the build and name both files.
+
+### Settings
+
+`amplifyup.config.ts` in your project root is optional. Use it when your components live elsewhere:
+
+```ts
+import { defineAmplifyConfig } from '@amplifyup/sdk/config';
+
+export default defineAmplifyConfig({
+  components: {
+    roots: ['src/components', 'src/marketing'],
+    exclude: ['**/internal/**'],
+  },
+});
+```
+
+| Setting | Default |
+| --- | --- |
+| `roots` | `['src/components']`, or `['components']` without `src/` |
+| `exclude` | none (tests, stories and type files are always skipped) |
+| `output` | `.amplifyup/component-registry` next to your first root |
+
+The generated `.amplifyup` folder ignores itself in git. Don't edit it.
+
+### Without the Next plugin
+
+For CI steps or non-Next builds, run the CLI before your build:
+
+```bash
+npx amplifyup registry          # build once
+npx amplifyup registry --watch  # rebuild as files are added, renamed or removed
+```
+
+### Missing components
+
+If a page uses a component that isn't in your registry, Composer shows a placeholder naming it, and the live page renders nothing in its place. Add a file with that name to your components folder.
+
+---
+
+## Upgrading from 0.1
+
+0.2.0 removes hand-written rendering. `renderComponent` and the `ComponentContextProvider` export are gone, and passing `renderComponent` throws an error that points here.
+
+1. Delete your component lookup object and your `renderComponent` function.
+2. Wrap `next.config` with `withAmplifyUp` (see [Component registry](#2-component-registry)).
+3. Replace `<AmplifyPageContent renderComponent={…} />` with `<AmplifyPage />` from `@/.amplifyup/component-registry`. Every other prop (`fallback`, `pageConfig`, loading and empty states) stays the same.
+4. Check that each component file name matches its component ID in AmplifyUp (see [How components are found](#how-components-are-found)).
+
+---
+
 ## Working with `fields`
 
 Every component receives a `fields` prop. It is not raw CMS data — every entry is a **field envelope**:
@@ -431,7 +492,7 @@ export function TwoColumn() {
 }
 ```
 
-`<Slot>` takes only `name` and `className`. It reads the slot content from `ComponentContextProvider`, so you never thread a `slots` prop through your component.
+`<Slot>` takes only `name` and `className`. The SDK hands each component its slot content when it renders it, so you never thread a `slots` prop through your component.
 
 ```tsx
 // ✗ — Slot has no `slots` prop
@@ -476,7 +537,9 @@ In development the SDK tells you exactly what is wrong. Production is silent.
 | `title has no write target; rendered read-only.` | A row field the SDK can't trace to a record | Bind the list to a connection, or query with the published spec |
 | `Field value={…} requires name="…" for computed values` | You passed `value` without `name` | Add `name={fields.x.name}` |
 | `Field needs field={fields.yourProp} (or value + name for computed values)` | No binding at all | Pass `field=` |
-| `Slot "left" used outside ComponentContextProvider` | The component wasn't wrapped when rendered | Wrap it in `renderComponent` |
+| `Slot "left" only works inside a component rendered from your component registry` | `Slot` is used in a component the SDK didn't render | Use `Slot` only inside components in your components folder |
+| `No component in your component registry matches "Hero"` | The page uses a component your site doesn't have | Add `Hero.tsx` (or a matching name) to your components folder |
+| `renderComponent was removed in @amplifyup/sdk 0.2.0` | Code from 0.1 is still passing a render function | Follow [Upgrading from 0.1](#upgrading-from-01) |
 
 ---
 
@@ -550,6 +613,8 @@ Pass `pageContext` at provider/init for From-page components. Do not wait until
 
 The SDK maps Edge's resolved tree into `layoutTree` and renders it. Edge already applies personalization and CMS projection — the site does not call CMS or Decision APIs for layout. After paint, the overlay calls `POST /v1/select` (or `selectVariants()`) then `/v1/resolve?variants=` so decisions stay on the edge (`clientPersonalization`).
 
+Wrap your whole site in `AmplifyUpProvider` so every page is tracked. The overlay only runs on pages that render `AmplifyPageContent` (or `AmplifyRenderer` without a `pageConfig`). Pages you build yourself are tracked but never request a layout.
+
 ## Runtime queries
 
 Page resolve covers data known at Deploy. For data a visitor asks for — search, load more, a picker — use `queryContent`. The browser asks AmplifyUp, AmplifyUp asks your content source, so no CMS credentials or query syntax live in your site.

package/dist/AmplifyRenderer-BNWBrFQN.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { P as PageConfig } from './types-ffQNIQCK.js';
+
+declare const REGISTRY_BRAND: unique symbol;
+type SiteComponent = ComponentType<any>;
+type ComponentRegistry = {
+    readonly [REGISTRY_BRAND]: true;
+    /** Components by registry name (file name), as generated. */
+    readonly components: Readonly<Record<string, SiteComponent>>;
+    /** Looks up a layout component ID with the shared matching rule. */
+    resolve: (componentId: string) => SiteComponent | undefined;
+};
+/** Called by the generated `component-registry` module — sites don't call this by hand. */
+declare const defineComponentRegistry: (components: Record<string, SiteComponent>) => ComponentRegistry;
+
+interface AmplifyRendererProps {
+    /** The generated component registry (see `withAmplifyUp`). */
+    registry: ComponentRegistry;
+    /**
+     * Optional page config for server-side rendering (SSR/SSG)
+     * If provided, the component will use this instead of fetching client-side
+     */
+    pageConfig?: PageConfig;
+    /**
+     * Optional loading component
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Optional error component
+     */
+    errorComponent?: (error: string) => ReactNode;
+    /**
+     * Optional empty state component (when no content is configured)
+     */
+    emptyComponent?: ReactNode;
+    /**
+     * Force Composer page-slot wrapper (avoids SSR miss when window isn't available yet).
+     * When true, root components stay under [data-slot-source="page"] so hierarchy can climb to Page.
+     */
+    composerPreview?: boolean;
+}
+declare function AmplifyRendererInner(rendererProps: AmplifyRendererProps): react_jsx_runtime.JSX.Element | null;
+declare const AmplifyRenderer: react.MemoExoticComponent<typeof AmplifyRendererInner>;
+
+export { AmplifyRenderer as A, type ComponentRegistry as C, defineComponentRegistry as d };

package/dist/AmplifyRenderer-CPUr9Bkc.d.mts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { P as PageConfig } from './types-ffQNIQCK.mjs';
+
+declare const REGISTRY_BRAND: unique symbol;
+type SiteComponent = ComponentType<any>;
+type ComponentRegistry = {
+    readonly [REGISTRY_BRAND]: true;
+    /** Components by registry name (file name), as generated. */
+    readonly components: Readonly<Record<string, SiteComponent>>;
+    /** Looks up a layout component ID with the shared matching rule. */
+    resolve: (componentId: string) => SiteComponent | undefined;
+};
+/** Called by the generated `component-registry` module — sites don't call this by hand. */
+declare const defineComponentRegistry: (components: Record<string, SiteComponent>) => ComponentRegistry;
+
+interface AmplifyRendererProps {
+    /** The generated component registry (see `withAmplifyUp`). */
+    registry: ComponentRegistry;
+    /**
+     * Optional page config for server-side rendering (SSR/SSG)
+     * If provided, the component will use this instead of fetching client-side
+     */
+    pageConfig?: PageConfig;
+    /**
+     * Optional loading component
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Optional error component
+     */
+    errorComponent?: (error: string) => ReactNode;
+    /**
+     * Optional empty state component (when no content is configured)
+     */
+    emptyComponent?: ReactNode;
+    /**
+     * Force Composer page-slot wrapper (avoids SSR miss when window isn't available yet).
+     * When true, root components stay under [data-slot-source="page"] so hierarchy can climb to Page.
+     */
+    composerPreview?: boolean;
+}
+declare function AmplifyRendererInner(rendererProps: AmplifyRendererProps): react_jsx_runtime.JSX.Element | null;
+declare const AmplifyRenderer: react.MemoExoticComponent<typeof AmplifyRendererInner>;
+
+export { AmplifyRenderer as A, type ComponentRegistry as C, defineComponentRegistry as d };

package/dist/AmplifyRenderer.d.mts

@@ -1,40 +1,4 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LayoutComponentProps, P as PageConfig } from './types-D4TSd2Yt.mjs';
-
-interface AmplifyRendererProps {
-    /**
-     * Component renderer function that maps componentId to React component
-     * This is site-specific and must be provided by the developer
-     */
-    renderComponent: (componentId: string, props: LayoutComponentProps, slots?: Record<string, ReactNode>, context?: {
-        layoutNodeId: string;
-    }) => ReactNode;
-    /**
-     * Optional page config for server-side rendering (SSR/SSG)
-     * If provided, the component will use this instead of fetching client-side
-     */
-    pageConfig?: PageConfig;
-    /**
-     * Optional loading component
-     */
-    loadingComponent?: ReactNode;
-    /**
-     * Optional error component
-     */
-    errorComponent?: (error: string) => ReactNode;
-    /**
-     * Optional empty state component (when no content is configured)
-     */
-    emptyComponent?: ReactNode;
-    /**
-     * Force Composer page-slot wrapper (avoids SSR miss when window isn't available yet).
-     * When true, root components stay under [data-slot-source="page"] so hierarchy can climb to Page.
-     */
-    composerPreview?: boolean;
-}
-declare function AmplifyRendererInner({ renderComponent, pageConfig: serverPageConfig, loadingComponent, errorComponent, emptyComponent, composerPreview, }: AmplifyRendererProps): react_jsx_runtime.JSX.Element | null;
-declare const AmplifyRenderer: react.MemoExoticComponent<typeof AmplifyRendererInner>;
-
-export { AmplifyRenderer };
+import 'react';
+import 'react/jsx-runtime';
+export { A as AmplifyRenderer } from './AmplifyRenderer-CPUr9Bkc.mjs';
+import './types-ffQNIQCK.mjs';

package/dist/AmplifyRenderer.d.ts

@@ -1,40 +1,4 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LayoutComponentProps, P as PageConfig } from './types-D4TSd2Yt.js';
-
-interface AmplifyRendererProps {
-    /**
-     * Component renderer function that maps componentId to React component
-     * This is site-specific and must be provided by the developer
-     */
-    renderComponent: (componentId: string, props: LayoutComponentProps, slots?: Record<string, ReactNode>, context?: {
-        layoutNodeId: string;
-    }) => ReactNode;
-    /**
-     * Optional page config for server-side rendering (SSR/SSG)
-     * If provided, the component will use this instead of fetching client-side
-     */
-    pageConfig?: PageConfig;
-    /**
-     * Optional loading component
-     */
-    loadingComponent?: ReactNode;
-    /**
-     * Optional error component
-     */
-    errorComponent?: (error: string) => ReactNode;
-    /**
-     * Optional empty state component (when no content is configured)
-     */
-    emptyComponent?: ReactNode;
-    /**
-     * Force Composer page-slot wrapper (avoids SSR miss when window isn't available yet).
-     * When true, root components stay under [data-slot-source="page"] so hierarchy can climb to Page.
-     */
-    composerPreview?: boolean;
-}
-declare function AmplifyRendererInner({ renderComponent, pageConfig: serverPageConfig, loadingComponent, errorComponent, emptyComponent, composerPreview, }: AmplifyRendererProps): react_jsx_runtime.JSX.Element | null;
-declare const AmplifyRenderer: react.MemoExoticComponent<typeof AmplifyRendererInner>;
-
-export { AmplifyRenderer };
+import 'react';
+import 'react/jsx-runtime';
+export { A as AmplifyRenderer } from './AmplifyRenderer-BNWBrFQN.js';
+import './types-ffQNIQCK.js';

package/dist/AmplifyRenderer.js

@@ -168,6 +168,7 @@ var AWSAdapter = class {
       return;
     }
     const trackingId = eventData?.trackingId || this.config?.trackingId;
+    const debug = this.config?.debug;
     const query = trackingId ? `?tid=${encodeURIComponent(trackingId)}` : "";
     const url = `${this.apiGatewayUrl}${endpoint}${query}`;
     try {
@@ -182,15 +183,15 @@ var AWSAdapter = class {
         keepalive: true
       });
       if (!response.ok) {
-        if (this.config.debug) {
+        if (debug) {
           console.warn(`AmplifyUp SDK: Event tracking failed: ${response.status} ${response.statusText}`);
         }
-      } else if (this.config.debug) {
+      } else if (debug) {
         const result = await response.json().catch(() => ({}));
         console.log("AmplifyUp SDK: Event tracked", result);
       }
     } catch (error) {
-      if (this.config.debug) {
+      if (debug) {
         console.error("AmplifyUp SDK: Event tracking error:", error);
       }
     }
@@ -3565,6 +3566,14 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+var PageContentRegistryContext = react.createContext(null);
+function useRegisterPageContent(enabled = true) {
+  const register = react.useContext(PageContentRegistryContext);
+  react.useEffect(() => {
+    if (!enabled || !register) return;
+    return register();
+  }, [enabled, register]);
+}
 function useInComposer(force = false) {
   const [detected, setDetected] = react.useState(false);
   react.useEffect(() => {
@@ -3703,7 +3712,89 @@ function MaybeComposerProvider({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ComposerProvider, { enabled, children: /* @__PURE__ */ jsxRuntime.jsx(ComposerNodeContext.Provider, { value: enabled ? layoutNodeId : void 0, children }) });
 }
-react.createContext(null);
+var ComponentContext = react.createContext(null);
+function ComponentContextProvider({
+  children,
+  slots,
+  props,
+  layoutNodeId,
+  componentId
+}) {
+  const next = hydratePageResourceProps(props || {}, getPageResourceFields());
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComponentContext.Provider,
+    {
+      value: { slots, props: next, layoutNodeId, componentId },
+      children
+    }
+  );
+}
+var REGISTRY_BRAND = Symbol.for("amplifyup.componentRegistry");
+var isComponentRegistry = (value) => !!value && typeof value === "object" && value[REGISTRY_BRAND] === true;
+var warnedMissing = /* @__PURE__ */ new Set();
+var warnMissingOnce = (componentId) => {
+  if (warnedMissing.has(componentId)) return;
+  warnedMissing.add(componentId);
+  console.warn(
+    `[Amplify UP] No component in your component registry matches "${componentId}". Add a file with that name to your components folder.`
+  );
+};
+var MissingComponentHint = ({ componentId }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    "data-amplifyup-missing-component": componentId,
+    style: {
+      margin: "0.5rem 0",
+      padding: "0.75rem 1rem",
+      border: "1.5px dashed currentColor",
+      borderRadius: 8,
+      opacity: 0.7,
+      fontSize: 14,
+      textAlign: "center"
+    },
+    children: [
+      "\u201C",
+      componentId,
+      "\u201D isn\u2019t set up on this site yet."
+    ]
+  }
+);
+var RegistryComponent = ({
+  registry,
+  componentId,
+  props,
+  slots,
+  layoutNodeId,
+  composerPreview
+}) => {
+  const Component2 = registry.resolve(componentId);
+  if (!Component2) {
+    warnMissingOnce(componentId);
+    return composerPreview ? /* @__PURE__ */ jsxRuntime.jsx(MissingComponentHint, { componentId }) : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComponentContextProvider,
+    {
+      props,
+      slots,
+      layoutNodeId,
+      componentId,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props })
+    }
+  );
+};
+var assertComponentRegistry = (owner, props) => {
+  if ("renderComponent" in props) {
+    throw new Error(
+      `[Amplify UP] ${owner}: renderComponent was removed in @amplifyup/sdk 0.2.0. Components now load automatically \u2014 wrap next.config with withAmplifyUp and render <AmplifyPage /> from the generated component registry. See "Upgrading from 0.1" in the SDK README.`
+    );
+  }
+  if (!isComponentRegistry(props.registry)) {
+    throw new Error(
+      `[Amplify UP] ${owner} needs your component registry. Render <AmplifyPage /> from the generated .amplifyup/component-registry module (created by withAmplifyUp or \`amplifyup registry\`).`
+    );
+  }
+};
 var usePathname = null;
 if (typeof window !== "undefined") {
   try {
@@ -3790,22 +3881,33 @@ function NodeWithFields({
   componentId,
   props,
   slots,
-  renderComponent,
+  registry,
   composerPreview
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MaybeComposerProvider, { enabled: !!composerPreview, layoutNodeId: nodeId, children: renderComponent(componentId, props, slots, {
-    layoutNodeId: nodeId
-  }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(MaybeComposerProvider, { enabled: !!composerPreview, layoutNodeId: nodeId, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RegistryComponent,
+    {
+      registry,
+      componentId,
+      props,
+      slots,
+      layoutNodeId: nodeId,
+      composerPreview: !!composerPreview
+    }
+  ) });
 }
-function AmplifyRendererInner({
-  renderComponent,
-  pageConfig: serverPageConfig,
-  loadingComponent,
-  errorComponent,
-  emptyComponent,
-  composerPreview
-}) {
+function AmplifyRendererInner(rendererProps) {
+  assertComponentRegistry("AmplifyRenderer", rendererProps);
+  const {
+    registry,
+    pageConfig: serverPageConfig,
+    loadingComponent,
+    errorComponent,
+    emptyComponent,
+    composerPreview
+  } = rendererProps;
   const clientHook = useAmplifyUp();
+  useRegisterPageContent(!serverPageConfig);
   const composerPreviewFlag = useComposerPreviewFlag(!!composerPreview);
   const pageConfig = serverPageConfig || clientHook.pageConfig || null;
   const loading = serverPageConfig ? false : clientHook.loading;
@@ -4139,7 +4241,7 @@ function AmplifyRendererInner({
                 componentId: node.componentId,
                 props: nodeRenderProps(node),
                 slots: slotsToPass,
-                renderComponent,
+                registry,
                 composerPreview: composerPreviewFlag
               }
             )