@amplifyup/sdk 0.1.5 → 0.1.7

package/README.md

@@ -1,127 +1,86 @@
 # @amplifyup/sdk
 
-AmplifyUp Tracking SDK - CDP-agnostic event tracking library.
+Official JavaScript SDK for [AmplifyUp](https://amplifyup.ai) — event tracking, page layouts, personalization, and Composer preview on your site.
 
-## Overview
-
-This SDK provides event tracking and personalization against AmplifyUp backends.
-Configure a `trackingId`, and optionally a `target` for which environment to use.
-
-## Environment targets
-
-**Default: production (live).** Hosting your site on `localhost` does not switch environments.
-
-Opt into `local` only when developing inside the AmplifyUp monorepo:
-
-| Target | When | Layouts / config | Events + personalize |
-|--------|------|------------------|----------------------|
-| `production` (default) | Customer sites, staging, production | `https://amplifyup.ai` | `https://api.amplifyup.ai` |
-| `local` (explicit) | AmplifyUp monorepo dev | `NEXT_PUBLIC_ORCHESTRATOR_URL` | `https://api-dev.amplifyup.ai` |
-
-```bash
-# AmplifyUp monorepo only (apps/demo, apps/orchestrator locally)
-NEXT_PUBLIC_ORCHESTRATOR_URL=http://localhost:5001
-NEXT_PUBLIC_AMPLIFYUP_TARGET=local
-
-# Customer sites: omit NEXT_PUBLIC_AMPLIFYUP_TARGET — always live
-```
-
-Check active URLs in the browser: `AmplifyUp.getStatus()`
-
-## Installation
+## Install
 
 ```bash
 npm install @amplifyup/sdk
 ```
 
-## Usage
+## Quick start
 
-### Basic Setup
+### React / Next.js
 
-```typescript
-import { init } from '@amplifyup/sdk';
+Wrap your app with the provider and pass your site **tracking ID** from the AmplifyUp dashboard:
+
+```tsx
+import { AmplifyUpProvider } from '@amplifyup/sdk/react';
 
-await init({
-  trackingId: 'your-tracking-id',
-  debug: true,
-});
+export default function RootLayout({ children }) {
+  return (
+    <AmplifyUpProvider config={{ trackingId: 'your-tracking-id' }}>
+      {children}
+    </AmplifyUpProvider>
+  );
+}
 ```
 
-### Track Events
+### Track events
 
 ```typescript
-import { 
-  page, 
-  track, 
-  trackClick, 
-  trackFormSubmit,
-  trackContentView,
-  identify 
-} from '@amplifyup/sdk';
-
-// Track page view
-page('/home');
+import { init, page, track, identify } from '@amplifyup/sdk';
 
-// Track custom event
-track('Product Viewed', {
-  productId: '123',
-  productName: 'Widget',
-  price: 29.99
-});
-
-// Track button click
-trackClick('add-to-cart', 'Add to Cart', {
-  productId: '123'
-});
-
-// Track form submission
-trackFormSubmit('newsletter-signup', {
-  email: 'user@example.com'
-});
-
-// Track content view
-trackContentView('product-123', 'product', {
-  productName: 'Widget',
-  category: 'Electronics'
-});
-
-// Identify user
-identify('user-123', {
-  email: 'user@example.com',
-  name: 'John Doe'
-});
-```
+await init({ trackingId: 'your-tracking-id' });
 
-### Get Instance ID
+page('/home');
 
-```typescript
-import { getInstanceId } from '@amplifyup/sdk';
+track('Product Viewed', { productId: '123' });
 
-const instanceId = getInstanceId();
+identify('user-123', { email: 'user@example.com' });
 ```
 
-## Architecture
-
-The SDK sends events directly to AWS API Gateway:
-- Events are sent to `/v1/track` or `/v1/page` endpoints
-- All URLs are hardcoded in the SDK
-- No write keys or configuration needed
-- Personalization requests go to AWS Decision API Gateway
+## Composer and hybrid pages
+
+If a page has its own native content **and** can be edited in Composer, use `AmplifyPageContent`:
+
+- **Visitors** see your AmplifyUp layout, or your native content when no layout is configured yet.
+- **Composer preview** shows only the layout canvas — native fallback content is hidden.
+
+```tsx
+import { isPreviewRequest } from '@amplifyup/sdk';
+import { AmplifyPageContent } from '@amplifyup/sdk/react';
+
+export default async function Page({ searchParams }) {
+  const params = await searchParams;
+
+  if (isPreviewRequest(params)) {
+    return (
+      <Layout>
+        <AmplifyPageContent renderComponent={renderAmplifyComponent} />
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <AmplifyPageContent
+        fallback={<YourNativePage />}
+        renderComponent={renderAmplifyComponent}
+      />
+    </Layout>
+  );
+}
+```
 
-## Development
+## Debugging
 
-```bash
-# Build
-npm run build
+In the browser console (on your site):
 
-# Watch mode
-npm run dev
-
-# Lint
-npm run lint
+```js
+AmplifyUp.getStatus()
 ```
 
 ## License
 
 MIT
-

package/dist/AmplifyRenderer.js

@@ -407,6 +407,7 @@ var AmplifyUpSDK = class {
    */
   async init(config) {
     if (this.initialized && this.adapter?.isInitialized()) {
+      this.ensureWindowBridge();
       return;
     }
     if (this.initPromise) {
@@ -419,6 +420,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 +484,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 +1498,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);