@amplifyup/sdk 0.1.43 → 0.1.45

package/README.md

@@ -88,6 +88,27 @@ Field names must match the component registry in AmplifyUp. Connect CMS document
 | Composer preview | Orchestrator layout provider | `?preview=true` / Composer iframe |
 | Runtime queries | Edge `/v1/query` | `queryContent` — search, load more, pickers |
 
+## Pattern pages (From page)
+
+Components using Composer **From page** require `pageContext` on the provider (or `init`) so the first paint and first page view include fields. Late `setPageContext` is fine for subsequent events, not for rendering those components.
+
+`resource.key` is the URL param value. If a mapped entity field (for example `post.slug`) does not match that param, the SDK warns and uses the URL param.
+
+```tsx
+<AmplifyUpProvider
+  config={{ trackingId: 'your-tracking-id' }}
+  pageContext={{
+    resourceType: 'post',
+    key: slug,
+    fields: { title: post.title, slug: post.slug, category: post.category },
+  }}
+>
+  {children}
+</AmplifyUpProvider>
+```
+
+Pass `pageContext` at provider/init for From-page components. Do not wait until after first paint. Fixed (static) page fields still attach to events when `pageContext` is omitted.
+
 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`).
 
 ## Runtime queries

package/dist/AmplifyRenderer.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { P as PageConfig } from './types-DUP8Lb7R.mjs';
+import { P as PageConfig } from './types-NdLzHxZo.mjs';
 
 interface AmplifyRendererProps {
     /**

package/dist/AmplifyRenderer.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { P as PageConfig } from './types-DUP8Lb7R.js';
+import { P as PageConfig } from './types-NdLzHxZo.js';
 
 interface AmplifyRendererProps {
     /**

package/dist/AmplifyRenderer.js

@@ -407,6 +407,153 @@ function isComposerPreview() {
   return false;
 }
 
+// src/page-context.ts
+var defaultLog = {
+  warn: (...args) => {
+    if (typeof console !== "undefined") console.warn(...args);
+  }
+};
+function coerceField(def, raw, log) {
+  if (raw == null) return void 0;
+  if (def.multiValue) {
+    const list = Array.isArray(raw) ? raw : [raw];
+    const out = [];
+    for (const item of list) {
+      const coerced = coerceScalar(def, item, log);
+      if (coerced !== void 0) out.push(coerced);
+    }
+    return out;
+  }
+  return coerceScalar(def, raw, log);
+}
+function coerceScalar(def, raw, log) {
+  switch (def.dataType) {
+    case "string":
+      if (typeof raw === "string") return raw;
+      if (typeof raw === "number" || typeof raw === "boolean") return String(raw);
+      log.warn(`AmplifyUp: dropped field "${def.key}" (expected string)`);
+      return void 0;
+    case "number": {
+      if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+      if (typeof raw === "string" && raw.trim() !== "" && Number.isFinite(Number(raw))) {
+        return Number(raw);
+      }
+      log.warn(`AmplifyUp: dropped field "${def.key}" (expected number)`);
+      return void 0;
+    }
+    case "boolean": {
+      if (typeof raw === "boolean") return raw;
+      if (raw === "true") return true;
+      if (raw === "false") return false;
+      log.warn(`AmplifyUp: dropped field "${def.key}" (expected boolean)`);
+      return void 0;
+    }
+    case "date": {
+      if (typeof raw === "string" && !Number.isNaN(Date.parse(raw))) return raw;
+      log.warn(`AmplifyUp: dropped field "${def.key}" (expected date)`);
+      return void 0;
+    }
+    default:
+      return void 0;
+  }
+}
+function applyPageContext(input, opts) {
+  const log = opts.log || defaultLog;
+  const key = String(input.key || "").trim();
+  if (!key || !input.resourceType) {
+    log.warn("AmplifyUp: pageContext needs resourceType and key");
+    return null;
+  }
+  const resource = opts.pageData?.resources?.[0];
+  if (resource && resource.type && resource.type !== input.resourceType) {
+    log.warn(
+      `AmplifyUp: pageContext resourceType "${input.resourceType}" does not match page resource "${resource.type}"`
+    );
+    return null;
+  }
+  const fieldDefs = resource?.fields || [];
+  const defByKey = new Map(fieldDefs.map((f) => [f.key, f]));
+  const rawFields = input.fields && typeof input.fields === "object" ? input.fields : {};
+  const fields = {};
+  if (fieldDefs.length === 0) {
+    Object.assign(fields, rawFields);
+  } else {
+    for (const [k, v] of Object.entries(rawFields)) {
+      const def = defByKey.get(k);
+      if (!def) {
+        log.warn(`AmplifyUp: unknown resource field "${k}" dropped`);
+        continue;
+      }
+      const coerced = coerceField(def, v, log);
+      if (coerced !== void 0) fields[k] = coerced;
+    }
+  }
+  const params = { ...opts.routeParams || {} };
+  const mapping = resource?.urlParamMapping;
+  let resourceKey = key;
+  if (mapping) {
+    const fromUrl = params[mapping.param];
+    const fromField = fields[mapping.field];
+    if (fromUrl) resourceKey = String(fromUrl);
+    if (fromUrl && fromField != null && String(fromField) !== String(fromUrl)) {
+      log.warn(
+        `AmplifyUp: resource key mismatch \u2014 URL :${mapping.param} is "${fromUrl}" but ${mapping.field} is "${String(fromField)}". Using the URL param.`
+      );
+    }
+  }
+  const pageFields = {};
+  for (const pf of opts.pageData?.pageFields || []) {
+    if (pf.source === "static") {
+      if (pf.value !== void 0) pageFields[pf.key] = pf.value;
+      continue;
+    }
+    if (pf.source === "mapped" && pf.resource && pf.field) {
+      pageFields[pf.key] = fields[pf.field];
+    }
+  }
+  return {
+    resource: {
+      type: input.resourceType,
+      key: resourceKey,
+      params,
+      fields
+    },
+    page: { fields: pageFields },
+    pageRoute: opts.pageRoute || ""
+  };
+}
+function staticPageFieldsFromSnapshot(pageData) {
+  const pageFields = {};
+  for (const pf of pageData?.pageFields || []) {
+    if (pf.source === "static" && pf.value !== void 0) {
+      pageFields[pf.key] = pf.value;
+    }
+  }
+  return pageFields;
+}
+function attachStaticPageContext(pageData, pageRoute) {
+  if (!pageData) return null;
+  const fields = staticPageFieldsFromSnapshot(pageData);
+  const hasStatic = Object.keys(fields).length > 0;
+  const hasRoute = !!pageRoute;
+  if (!hasStatic && !hasRoute) return null;
+  return {
+    page: { fields },
+    pageRoute: pageRoute || ""
+  };
+}
+function mergeEventContext(properties, attached) {
+  if (!attached) return properties;
+  return {
+    ...properties,
+    ...attached.resource ? { resource: attached.resource } : {},
+    page: attached.page,
+    ...attached.pageRoute ? { pageRoute: attached.pageRoute } : {}
+  };
+}
+function setPageResourceFields(fields) {
+}
+
 // src/index.ts
 var DWELL_ACTIVITY_IDLE_MS = 2 * 60 * 1e3;
 var DWELL_POLL_MS = 5e3;
@@ -475,6 +622,11 @@ var AmplifyUpSDK = class {
     this.pageEngagementActive = false;
     /** Path of the last page() / routeChange — avoids duplicate SPA fires. */
     this.lastTrackedPath = null;
+    this.pendingPageContext = null;
+    this.attachedPageContext = null;
+    this.resolvedPageData = null;
+    this.resolvedPageRoute = "";
+    this.resolvedRouteParams = {};
     this.historyHooksInstalled = false;
     this.pageEngagementState = {
       reached: /* @__PURE__ */ new Set(),
@@ -637,8 +789,13 @@ var AmplifyUpSDK = class {
       // Enable debug by default
       target: this.target,
       dev: config.dev,
-      ...config.siteId ? { siteId: config.siteId } : {}
+      ...config.siteId ? { siteId: config.siteId } : {},
+      ...config.pageContext ? { pageContext: config.pageContext } : {}
     };
+    if (config.pageContext) {
+      this.pendingPageContext = config.pageContext;
+      this.recomputeAttachedContext();
+    }
     try {
       const adapterConfig = {
         ...this.config,
@@ -995,6 +1152,43 @@ var AmplifyUpSDK = class {
     this.componentViewObservers.forEach((obs) => obs.disconnect());
     this.componentViewObservers = [];
   }
+  /**
+   * Set resource context for this page. Prefer passing `pageContext` on
+   * AmplifyUpProvider / init — required for components using From page.
+   * Late calls still attach to subsequent events (not a second page view).
+   */
+  setPageContext(input) {
+    this.pendingPageContext = input;
+    this.recomputeAttachedContext();
+  }
+  /**
+   * Apply published pageData (from /v1/resolve) so field validation and
+   * mapped page fields can run.
+   */
+  applyResolvedPageData(pageData, pageRoute, routeParams) {
+    this.resolvedPageData = pageData || null;
+    if (pageRoute) this.resolvedPageRoute = pageRoute;
+    if (routeParams) this.resolvedRouteParams = routeParams;
+    this.recomputeAttachedContext();
+  }
+  recomputeAttachedContext() {
+    if (!this.pendingPageContext) {
+      this.attachedPageContext = attachStaticPageContext(
+        this.resolvedPageData,
+        this.resolvedPageRoute
+      );
+      return;
+    }
+    this.attachedPageContext = applyPageContext(this.pendingPageContext, {
+      pageData: this.resolvedPageData,
+      routeParams: this.resolvedRouteParams,
+      pageRoute: this.resolvedPageRoute
+    });
+    setPageResourceFields(this.attachedPageContext?.resource?.fields || null);
+  }
+  getAttachedPageContext() {
+    return this.attachedPageContext;
+  }
   /**
    * Track a page view
    */
@@ -1016,7 +1210,7 @@ var AmplifyUpSDK = class {
       sessionId,
       trackingId: this.config?.trackingId,
       // Timestamp is included in event payload
-      ...properties
+      ...mergeEventContext(properties || {}, this.attachedPageContext)
     };
     this.adapter.page(pageProperties);
     this.lastTrackedPath = url;
@@ -1040,7 +1234,7 @@ var AmplifyUpSDK = class {
       url: typeof window !== "undefined" ? window.location.href : void 0,
       path: properties?.path || (typeof window !== "undefined" ? window.location.pathname : void 0),
       // Timestamp is included in event payload
-      ...properties
+      ...mergeEventContext(properties || {}, this.attachedPageContext)
     };
     if (!trackProperties.path && typeof window !== "undefined") {
       trackProperties.path = window.location.pathname;