@mochabug/adapt-astro 1.0.0-rc1

package/README.md

@@ -0,0 +1,105 @@
+# @mochabug/adapt-astro
+
+Astro component for Adapt.
+
+```bash
+npm install @mochabug/adapt-astro
+```
+
+Requires Astro 3, 4, or 5.
+
+## Quickstart
+
+```astro
+---
+import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
+---
+
+<AdaptAutomation id="auto-123" style="height: 600px;" />
+```
+
+If the automation requires authentication:
+
+```astro
+<AdaptAutomation id="auto-123" authToken="your-token" style="height: 600px;" />
+```
+
+## SSR
+
+Keep auth token on server. Enable SSR in astro.config.mjs:
+
+```javascript
+// astro.config.mjs
+export default defineConfig({
+  output: 'server'
+});
+```
+
+```astro
+---
+import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
+import { startSession } from '@mochabug/adapt-core';
+
+const authToken = await getAuthTokenFromBackend();
+const { token } = await startSession({ id: 'auto-123' }, authToken);
+---
+
+<AdaptAutomation
+  id="auto-123"
+  sessionToken={token}
+  style="height: 600px;"
+/>
+```
+
+## Session inheritance
+
+```astro
+<!-- from URL hash: example.com#mb_session=xxx -->
+<AdaptAutomation
+  id="auto-123"
+  inheritFrom={{ hash: 'mb_session' }}
+/>
+
+<!-- from URL param: example.com?token=xxx -->
+<AdaptAutomation
+  id="auto-123"
+  inheritFrom={{ param: 'token' }}
+/>
+```
+
+## Fork display
+
+```astro
+<!-- side-by-side -->
+<AdaptAutomation
+  id="auto-123"
+  forkDisplayMode="side-by-side"
+  sideBySideSplit={60}
+/>
+
+<!-- dialog -->
+<AdaptAutomation
+  id="auto-123"
+  forkDisplayMode="dialog"
+  dialogBackdropClose
+/>
+```
+
+## Props
+
+| Prop | Type |
+|------|------|
+| `id` | `string` (required) |
+| `sessionToken` | `string` |
+| `authToken` | `string` |
+| `inheritToken` | `string` |
+| `inheritFrom` | `{ hash: string } \| { param: string }` |
+| `forkDisplayMode` | `'side-by-side' \| 'dialog'` |
+| `sideBySideSplit` | `number` (0-100) |
+| `dialogBackdropClose` | `boolean` |
+| `class` | `string` |
+| `style` | `string` |
+
+## License
+
+ISC © mochabug AB

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@mochabug/adapt-astro",
+  "version": "1.0.0-rc1",
+  "description": "Astro component for Adapt automation platform",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./AdaptAutomation.astro": "./src/AdaptAutomation.astro"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "echo 'Astro component distributes source - no build needed'",
+    "sample": "cd sample && npm install && npm run dev"
+  },
+  "keywords": [
+    "adapt",
+    "automations",
+    "mochabug",
+    "astro"
+  ],
+  "author": "mochabug AB",
+  "license": "ISC",
+  "peerDependencies": {
+    "astro": "^3.0.0 || ^4.0.0 || ^5.0.0"
+  },
+  "dependencies": {
+    "@mochabug/adapt-web": "^1.0.0-rc22"
+  }
+}

package/src/AdaptAutomation.astro

@@ -0,0 +1,109 @@
+---
+import type { AdaptWebClientOptions } from "@mochabug/adapt-web";
+
+export interface Props
+  extends Pick<
+    AdaptWebClientOptions,
+    | "id"
+    | "sessionToken"
+    | "authToken"
+    | "inheritToken"
+    | "inheritFrom"
+    | "forkDisplayMode"
+    | "sideBySideSplit"
+    | "dialogBackdropClose"
+    | "classNames"
+  > {
+  /** CSS class name for the container */
+  class?: string;
+  /** Inline styles for the container */
+  style?: string;
+}
+
+const {
+  id,
+  sessionToken,
+  authToken,
+  inheritToken,
+  inheritFrom,
+  forkDisplayMode = "side-by-side",
+  sideBySideSplit = 50,
+  dialogBackdropClose = false,
+  classNames,
+  class: className,
+  style,
+} = Astro.props;
+
+const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
+---
+
+<div
+  id={containerId}
+  class={className}
+  style={style}
+  data-adapt-id={id}
+  data-adapt-session-token={sessionToken}
+  data-adapt-auth-token={authToken}
+  data-adapt-inherit-token={inheritToken}
+  data-adapt-inherit-from={inheritFrom ? JSON.stringify(inheritFrom) : undefined}
+  data-adapt-fork-display-mode={forkDisplayMode}
+  data-adapt-side-by-side-split={sideBySideSplit}
+  data-adapt-dialog-backdrop-close={dialogBackdropClose}
+  data-adapt-class-names={classNames ? JSON.stringify(classNames) : undefined}
+></div>
+
+<script>
+  import { AdaptWebClient } from "@mochabug/adapt-web";
+
+  function initAdaptAutomation(container: HTMLElement) {
+    const id = container.dataset.adaptId;
+    if (!id) return;
+
+    const inheritFromStr = container.dataset.adaptInheritFrom;
+    const classNamesStr = container.dataset.adaptClassNames;
+
+    const client = new AdaptWebClient({
+      container: container.id,
+      id,
+      sessionToken: container.dataset.adaptSessionToken,
+      authToken: container.dataset.adaptAuthToken,
+      inheritToken: container.dataset.adaptInheritToken,
+      inheritFrom: inheritFromStr ? JSON.parse(inheritFromStr) : undefined,
+      forkDisplayMode: container.dataset.adaptForkDisplayMode as "side-by-side" | "dialog",
+      sideBySideSplit: Number(container.dataset.adaptSideBySideSplit) || 50,
+      dialogBackdropClose: container.dataset.adaptDialogBackdropClose === "true",
+      classNames: classNamesStr ? JSON.parse(classNamesStr) : undefined,
+    });
+
+    // Store reference for cleanup
+    (container as any).__adaptClient = client;
+  }
+
+  function cleanupAdaptAutomation(container: HTMLElement) {
+    const client = (container as any).__adaptClient;
+    if (client) {
+      client.destroy();
+      delete (container as any).__adaptClient;
+    }
+  }
+
+  // Initialize all Adapt containers on page load
+  function initAll() {
+    document.querySelectorAll<HTMLElement>("[data-adapt-id]").forEach((container) => {
+      if (!(container as any).__adaptClient) {
+        initAdaptAutomation(container);
+      }
+    });
+  }
+
+  // Initial load
+  initAll();
+
+  // Handle Astro View Transitions (page navigation without full reload)
+  document.addEventListener("astro:page-load", initAll);
+
+  // Cleanup before page swap (View Transitions)
+  document.addEventListener("astro:before-swap", () => {
+    document.querySelectorAll<HTMLElement>("[data-adapt-id]").forEach(cleanupAdaptAutomation);
+  });
+</script>

package/src/index.ts

@@ -0,0 +1,7 @@
+// Import the component directly from the .astro file
+// Usage: import { AdaptAutomation } from '@mochabug/adapt-astro';
+//    or: import AdaptAutomation from '@mochabug/adapt-astro/AdaptAutomation.astro';
+
+// Re-export types for convenience
+export type { Output, StatusJson } from "@mochabug/adapt-core";
+export type { AdaptWebClientOptions } from "@mochabug/adapt-web";