@mochabug/adapt-svelte 1.0.0-rc1

package/README.md

@@ -0,0 +1,111 @@
+# @mochabug/adapt-svelte
+
+Svelte component for Adapt.
+
+```bash
+npm install @mochabug/adapt-svelte
+```
+
+Requires Svelte 4 or 5.
+
+## Quickstart
+
+```svelte
+<script>
+  import { AdaptAutomation } from '@mochabug/adapt-svelte';
+</script>
+
+<AdaptAutomation id="auto-123" style="height: 600px;" />
+```
+
+If the automation requires authentication:
+
+```svelte
+<AdaptAutomation id="auto-123" authToken="your-token" style="height: 600px;" />
+```
+
+## SSR (SvelteKit)
+
+Keep auth token on server:
+
+```typescript
+// +page.server.ts
+import { startSession } from '@mochabug/adapt-core';
+
+export async function load() {
+  const authToken = await getAuthTokenFromBackend();
+  const { token } = await startSession({ id: 'auto-123' }, authToken);
+  return { sessionToken: token };
+}
+```
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import { AdaptAutomation } from '@mochabug/adapt-svelte';
+  export let data;
+</script>
+
+<AdaptAutomation
+  id="auto-123"
+  sessionToken={data.sessionToken}
+  style="height: 600px;"
+/>
+```
+
+## Session inheritance
+
+```svelte
+<!-- direct -->
+<AdaptAutomation id="auto-123" inheritToken="token-from-parent" />
+
+<!-- from URL hash: example.com#mb_session=xxx -->
+<AdaptAutomation id="auto-123" inheritFrom={{ hash: 'mb_session' }} />
+```
+
+## Fork display
+
+```svelte
+<!-- side-by-side -->
+<AdaptAutomation
+  id="auto-123"
+  forkDisplayMode="side-by-side"
+  sideBySideSplit={60}
+/>
+
+<!-- dialog -->
+<AdaptAutomation
+  id="auto-123"
+  forkDisplayMode="dialog"
+  dialogBackdropClose={true}
+/>
+```
+
+## Callbacks
+
+```svelte
+<AdaptAutomation
+  id="auto-123"
+  onsession={(e) => console.log(e.status, e.fork)}
+  onoutput={(e) => console.log(e.output)}
+/>
+```
+
+## 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` |
+| `onsession` | `(event) => void` |
+| `onoutput` | `(event) => void` |
+
+## License
+
+ISC © mochabug AB

package/dist/AdaptAutomation.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { AdaptWebClient, type AdaptWebClientOptions } from '@mochabug/adapt-web';
+  import type { Output, StatusJson } from '@mochabug/adapt-core';
+
+  // Props
+  interface Props {
+    id: string;
+    sessionToken?: string;
+    authToken?: string;
+    inheritToken?: string;
+    inheritFrom?: { hash: string } | { param: string };
+    forkDisplayMode?: 'side-by-side' | 'dialog';
+    sideBySideSplit?: number;
+    dialogBackdropClose?: boolean;
+    classNames?: AdaptWebClientOptions['classNames'];
+    onsession?: (event: { status: StatusJson; fork?: string }) => void;
+    onoutput?: (event: { output: Output }) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    id,
+    sessionToken = undefined,
+    authToken = undefined,
+    inheritToken = undefined,
+    inheritFrom = undefined,
+    forkDisplayMode = 'side-by-side',
+    sideBySideSplit = 50,
+    dialogBackdropClose = false,
+    classNames = undefined,
+    onsession,
+    onoutput,
+    ...restProps
+  }: Props = $props();
+
+  const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
+  let client: AdaptWebClient | null = null;
+
+  function createClient() {
+    if (client) {
+      client.destroy();
+      client = null;
+    }
+
+    client = new AdaptWebClient({
+      container: containerId,
+      id,
+      sessionToken,
+      authToken,
+      inheritToken,
+      inheritFrom,
+      forkDisplayMode,
+      sideBySideSplit,
+      dialogBackdropClose,
+      classNames,
+      onSession: (status, fork) => {
+        onsession?.({ status, fork });
+      },
+      onOutput: (output) => {
+        onoutput?.({ output });
+      },
+    });
+  }
+
+  onMount(() => {
+    createClient();
+  });
+
+  onDestroy(() => {
+    if (client) {
+      client.destroy();
+      client = null;
+    }
+  });
+
+  // Recreate client when id changes
+  $effect(() => {
+    if (id && typeof window !== 'undefined') {
+      createClient();
+    }
+  });
+</script>
+
+<div id={containerId} {...restProps}></div>

package/dist/AdaptAutomation.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type AdaptWebClientOptions } from '@mochabug/adapt-web';
+import type { Output, StatusJson } from '@mochabug/adapt-core';
+interface Props {
+    id: string;
+    sessionToken?: string;
+    authToken?: string;
+    inheritToken?: string;
+    inheritFrom?: {
+        hash: string;
+    } | {
+        param: string;
+    };
+    forkDisplayMode?: 'side-by-side' | 'dialog';
+    sideBySideSplit?: number;
+    dialogBackdropClose?: boolean;
+    classNames?: AdaptWebClientOptions['classNames'];
+    onsession?: (event: {
+        status: StatusJson;
+        fork?: string;
+    }) => void;
+    onoutput?: (event: {
+        output: Output;
+    }) => void;
+    [key: string]: unknown;
+}
+declare const AdaptAutomation: import("svelte").Component<Props, {}, "">;
+type AdaptAutomation = ReturnType<typeof AdaptAutomation>;
+export default AdaptAutomation;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AdaptAutomation } from './AdaptAutomation.svelte';
+export type { Output, StatusJson } from '@mochabug/adapt-core';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as AdaptAutomation } from './AdaptAutomation.svelte';

package/dist/svelte.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svelte' {
+  import type { ComponentType, SvelteComponent } from 'svelte';
+  const component: ComponentType<SvelteComponent>;
+  export default component;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mochabug/adapt-svelte",
+  "version": "1.0.0-rc1",
+  "description": "Svelte component for Adapt automation platform",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "sample": "cd sample && npm install && npm run dev"
+  },
+  "keywords": [
+    "adapt",
+    "automations",
+    "mochabug",
+    "svelte"
+  ],
+  "author": "mochabug AB",
+  "license": "ISC",
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.6",
+    "svelte": "^5.43.14",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@mochabug/adapt-web": "^1.0.0-rc22"
+  }
+}