@amplifyup/sdk 0.1.5 → 0.1.6

package/dist/preview-BMrIgUvp.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Composer / visual-editor preview detection.
+ * Shared by AmplifyPageContent, AmplifyUpProvider, and AmplifyRenderer.
+ */
+/** True when `preview=true` (or legacy visualEditor) is in request search params. */
+declare function isPreviewRequest(searchParams: Record<string, string | string[] | undefined> | URLSearchParams): boolean;
+/**
+ * Client-only: true when the page is loaded inside AmplifyUp Composer.
+ * Does NOT treat every iframe as preview — only Composer referrers / query flags.
+ */
+declare function isComposerPreview(): boolean;
+
+export { isPreviewRequest as a, isComposerPreview as i };

package/dist/react.d.mts

@@ -1,10 +1,36 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { A as AmplifyUpConfig, P as PageConfig } from './types-B2Swk8BW.mjs';
+import { P as PageConfig, A as AmplifyUpConfig } from './types-B2Swk8BW.mjs';
 export { Z as ZoneConfig } from './types-B2Swk8BW.mjs';
 export { AmplifyRenderer } from './AmplifyRenderer.mjs';
+export { i as isComposerPreview, a as isPreviewRequest } from './preview-BMrIgUvp.mjs';
 export { fetchPageConfigServer } from './server.mjs';
 
+type RenderComponentFn = (componentId: string, props: Record<string, any>, slots?: Record<string, ReactNode>) => ReactNode;
+interface AmplifyPageContentProps {
+    /**
+     * Native page content shown to visitors when no AmplifyUp layout is configured.
+     * Never rendered in Composer preview — only the layout canvas is shown there.
+     */
+    fallback?: ReactNode;
+    /** Maps AmplifyUp component IDs to your React components. */
+    renderComponent: RenderComponentFn;
+    /** Optional pre-fetched layout (e.g. from server in preview mode). */
+    pageConfig?: PageConfig | null;
+    /** Shown while layout loads in Composer (default: empty main canvas). */
+    previewLoadingComponent?: ReactNode;
+    /** Shown when no layout components exist yet in Composer (default: empty main canvas). */
+    previewEmptyComponent?: ReactNode;
+    loadingComponent?: ReactNode;
+    emptyComponent?: ReactNode;
+    errorComponent?: (error: string) => ReactNode;
+}
+/**
+ * Hybrid page wrapper: Composer shows only the AmplifyUp layout canvas;
+ * normal visits show the configured layout or your native `fallback`.
+ */
+declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * ComponentContextProvider - Provides slots and props to child components
  * This should wrap each component when rendering
@@ -86,4 +112,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyUpProvider, ComponentContextProvider, Field, PageConfig, Slot, useAmplifyUp };
+export { AmplifyPageContent, type AmplifyPageContentProps, AmplifyUpProvider, ComponentContextProvider, Field, PageConfig, Slot, useAmplifyUp };

package/dist/react.d.ts

@@ -1,10 +1,36 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { A as AmplifyUpConfig, P as PageConfig } from './types-B2Swk8BW.js';
+import { P as PageConfig, A as AmplifyUpConfig } from './types-B2Swk8BW.js';
 export { Z as ZoneConfig } from './types-B2Swk8BW.js';
 export { AmplifyRenderer } from './AmplifyRenderer.js';
+export { i as isComposerPreview, a as isPreviewRequest } from './preview-BMrIgUvp.js';
 export { fetchPageConfigServer } from './server.js';
 
+type RenderComponentFn = (componentId: string, props: Record<string, any>, slots?: Record<string, ReactNode>) => ReactNode;
+interface AmplifyPageContentProps {
+    /**
+     * Native page content shown to visitors when no AmplifyUp layout is configured.
+     * Never rendered in Composer preview — only the layout canvas is shown there.
+     */
+    fallback?: ReactNode;
+    /** Maps AmplifyUp component IDs to your React components. */
+    renderComponent: RenderComponentFn;
+    /** Optional pre-fetched layout (e.g. from server in preview mode). */
+    pageConfig?: PageConfig | null;
+    /** Shown while layout loads in Composer (default: empty main canvas). */
+    previewLoadingComponent?: ReactNode;
+    /** Shown when no layout components exist yet in Composer (default: empty main canvas). */
+    previewEmptyComponent?: ReactNode;
+    loadingComponent?: ReactNode;
+    emptyComponent?: ReactNode;
+    errorComponent?: (error: string) => ReactNode;
+}
+/**
+ * Hybrid page wrapper: Composer shows only the AmplifyUp layout canvas;
+ * normal visits show the configured layout or your native `fallback`.
+ */
+declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * ComponentContextProvider - Provides slots and props to child components
  * This should wrap each component when rendering
@@ -86,4 +112,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyUpProvider, ComponentContextProvider, Field, PageConfig, Slot, useAmplifyUp };
+export { AmplifyPageContent, type AmplifyPageContentProps, AmplifyUpProvider, ComponentContextProvider, Field, PageConfig, Slot, useAmplifyUp };

package/dist/react.js

@@ -285,6 +285,32 @@ function resolveAmplifyUpUrls(target) {
   };
 }
 
+// src/preview.ts
+function isPreviewRequest(searchParams) {
+  if (searchParams instanceof URLSearchParams) {
+    return searchParams.get("preview") === "true" || searchParams.get("visualEditor") === "true";
+  }
+  const preview = searchParams.preview;
+  const visualEditor = searchParams.visualEditor;
+  return preview === "true" || visualEditor === "true";
+}
+function isComposerPreview() {
+  if (typeof window === "undefined") return false;
+  if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) return true;
+  const params = new URLSearchParams(window.location.search);
+  if (isPreviewRequest(params)) return true;
+  if (window.self !== window.top && document.referrer) {
+    try {
+      const refUrl = new URL(document.referrer);
+      if (refUrl.hostname === "amplifyup.ai" || refUrl.hostname.endsWith(".amplifyup.ai") || refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer") || refUrl.pathname.includes("/dashboard/routes/")) {
+        return true;
+      }
+    } catch {
+    }
+  }
+  return false;
+}
+
 // src/index.ts
 function readPreviewQueryOverrides() {
   if (typeof window === "undefined") return {};
@@ -407,6 +433,7 @@ var AmplifyUpSDK = class {
    */
   async init(config) {
     if (this.initialized && this.adapter?.isInitialized()) {
+      this.ensureWindowBridge();
       return;
     }
     if (this.initPromise) {
@@ -419,6 +446,32 @@ var AmplifyUpSDK = class {
       this.initPromise = null;
     }
   }
+  /** Attach console helpers to window (idempotent; survives Fast Refresh). */
+  ensureWindowBridge() {
+    if (typeof window === "undefined") return;
+    window.AmplifyUp = {
+      getInstanceId: () => this.getInstanceId(),
+      getUserId: () => this.getUserId(),
+      getTrackingId: () => this.getTrackingId(),
+      getTarget: () => this.getTarget(),
+      getDiagnostics: () => this.getDiagnostics(),
+      getStatus: () => {
+        console.log(this.getStatus());
+        return this.getDiagnostics();
+      },
+      testTracking: () => this.testTracking(),
+      verifyAWSConnection: () => {
+        const result = this.verifyAWSConnection();
+        console.log("AWS Connection Verification:", result.message);
+        console.log("Full details:", result);
+        return result;
+      },
+      isInitialized: () => this.isInitialized(),
+      page: (url, properties) => this.page(url, properties),
+      track: (eventName, properties) => this.track(eventName, properties),
+      identify: (userId, traits) => this.identify(userId, traits)
+    };
+  }
   async performInit(config) {
     if (!this.adapter) {
       this.adapter = new AWSAdapter();
@@ -457,34 +510,10 @@ var AmplifyUpSDK = class {
       };
       await this.adapter.init(adapterConfig);
       this.initialized = this.adapter.isInitialized();
-      if (typeof window !== "undefined") {
-        window.AmplifyUp = {
-          getInstanceId: () => this.getInstanceId(),
-          getUserId: () => this.getUserId(),
-          getTrackingId: () => this.getTrackingId(),
-          getTarget: () => this.getTarget(),
-          getDiagnostics: () => this.getDiagnostics(),
-          getStatus: () => {
-            console.log(this.getStatus());
-            return this.getDiagnostics();
-          },
-          testTracking: () => this.testTracking(),
-          verifyAWSConnection: () => {
-            const result = this.verifyAWSConnection();
-            console.log("AWS Connection Verification:", result.message);
-            console.log("Full details:", result);
-            return result;
-          },
-          isInitialized: () => this.isInitialized(),
-          // Re-export main tracking methods for convenience
-          page: (url, properties) => this.page(url, properties),
-          track: (eventName, properties) => this.track(eventName, properties),
-          identify: (userId, traits) => this.identify(userId, traits)
-        };
-        if (this.config?.debug) {
-          console.log("AmplifyUp SDK: Diagnostic methods available on window.AmplifyUp");
-          console.log("Try: AmplifyUp.getStatus() or AmplifyUp.testTracking()");
-        }
+      this.ensureWindowBridge();
+      if (this.config?.debug) {
+        console.log("AmplifyUp SDK: Diagnostic methods available on window.AmplifyUp");
+        console.log("Try: AmplifyUp.getStatus() or AmplifyUp.testTracking()");
       }
       this.clearTrackingIntervals();
       if (this.isPreviewMode()) {
@@ -1495,10 +1524,17 @@ Available Console Commands:
   }
 };
 var sdkInstance = null;
+if (typeof window !== "undefined" && window.__AMPLIFYUP_SDK__) {
+  sdkInstance = window.__AMPLIFYUP_SDK__;
+}
 function getSDK(adapter) {
   if (!sdkInstance) {
     sdkInstance = new AmplifyUpSDK(adapter);
+    if (typeof window !== "undefined") {
+      window.__AMPLIFYUP_SDK__ = sdkInstance;
+    }
   }
+  sdkInstance.ensureWindowBridge();
   return sdkInstance;
 }
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
@@ -1801,6 +1837,62 @@ function AmplifyRenderer({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("main", { children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id)) });
 }
+function defaultPreviewCanvas() {
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { className: "min-h-[50vh]", "data-amplifyup-composer-canvas": true });
+}
+function hasAmplifyLayout(pageConfig) {
+  return !!(pageConfig && pageConfig.id !== "default" && Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length > 0);
+}
+function AmplifyPageContent({
+  fallback,
+  renderComponent,
+  pageConfig: pageConfigProp,
+  previewLoadingComponent,
+  previewEmptyComponent,
+  loadingComponent,
+  emptyComponent,
+  errorComponent
+}) {
+  const client = useAmplifyUp();
+  const preview = isComposerPreview();
+  const pageConfig = pageConfigProp ?? client.pageConfig;
+  const loading = pageConfigProp ? false : client.loading;
+  const error = pageConfigProp ? null : client.error;
+  const previewCanvas = previewEmptyComponent ?? defaultPreviewCanvas();
+  const previewLoading = previewLoadingComponent ?? previewCanvas;
+  if (preview) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AmplifyRenderer,
+      {
+        pageConfig: pageConfig ?? void 0,
+        renderComponent,
+        loadingComponent: loadingComponent ?? previewLoading,
+        emptyComponent: emptyComponent ?? previewCanvas,
+        errorComponent: errorComponent ?? (() => previewCanvas)
+      }
+    );
+  }
+  if (loading) {
+    return loadingComponent ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent }) : null;
+  }
+  if (error) {
+    if (errorComponent) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: errorComponent(error) });
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
+  }
+  if (!hasAmplifyLayout(pageConfig)) {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AmplifyRenderer,
+    {
+      pageConfig: pageConfig ?? void 0,
+      renderComponent,
+      loadingComponent,
+      emptyComponent,
+      errorComponent
+    }
+  );
+}
 
 // src/server.tsx
 async function fetchPageConfigServer(route, trackingId, preview = false, options) {
@@ -2030,7 +2122,7 @@ function AmplifyUpProvider({ children, config }) {
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [config.trackingId, config.target, config.debug, config.dev]);
   react.useEffect(() => {
     if (!initialized) return;
     const fetchConfig = async () => {
@@ -2043,24 +2135,7 @@ function AmplifyUpProvider({ children, config }) {
           return;
         }
         const sdk = getSDK();
-        const isPreviewContext = (() => {
-          if (typeof window === "undefined") return false;
-          if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) return true;
-          const params = new URLSearchParams(window.location.search);
-          if (params.get("preview") === "true" || params.get("visualEditor") === "true") return true;
-          if (window.self !== window.top) {
-            if (document.referrer) {
-              try {
-                const refUrl = new URL(document.referrer);
-                if (refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer") || refUrl.pathname.includes("/dashboard/routes/")) {
-                  return true;
-                }
-              } catch {
-              }
-            }
-          }
-          return false;
-        })();
+        const isPreviewContext = isComposerPreview();
         const page = await sdk.fetchPageConfig(actualRoute, isPreviewContext);
         if (!page) {
           setPageConfig({
@@ -2092,12 +2167,15 @@ function useAmplifyUp() {
   return context;
 }
 
+exports.AmplifyPageContent = AmplifyPageContent;
 exports.AmplifyRenderer = AmplifyRenderer;
 exports.AmplifyUpProvider = AmplifyUpProvider;
 exports.ComponentContextProvider = ComponentContextProvider;
 exports.Field = Field;
 exports.Slot = Slot;
 exports.fetchPageConfigServer = fetchPageConfigServer;
+exports.isComposerPreview = isComposerPreview;
+exports.isPreviewRequest = isPreviewRequest;
 exports.useAmplifyUp = useAmplifyUp;
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map