@mochabug/adapt-svelte

Svelte component for Adapt.

npm install @mochabug/adapt-svelte

Requires Svelte 4 or 5.

Quickstart

<script>
  import { Adapt } from '@mochabug/adapt-svelte';
</script>

<Adapt id="auto-123" style="height: 600px;" />

If the automation requires authentication:

<Adapt id="auto-123" authToken="your-token" style="height: 600px;" />

SSR (SvelteKit)

Keep auth token on server:

// +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 };
}

<!-- +page.svelte -->
<script>
  import { Adapt } from '@mochabug/adapt-svelte';
  export let data;
</script>

<Adapt id="auto-123" sessionToken={data.sessionToken} style="height: 600px;" />

Session inheritance

<!-- direct -->
<Adapt id="auto-123" inheritToken="token-from-parent" />

<!-- from URL hash: example.com#mb_session=xxx -->
<Adapt id="auto-123" inheritFrom={{ hash: 'mb_session' }} />

Fork display

<!-- side-by-side -->
<Adapt id="auto-123" forkDisplayMode="side-by-side" sideBySideSplit={60} />

<!-- dialog -->
<Adapt id="auto-123" forkDisplayMode="dialog" dialogBackdropClose={true} />

Callbacks

<Adapt
  id="auto-123"
  onsession={(e) => console.log(e.status, e.fork)}
  onoutput={(e) => console.log(e.output)}
/>

Advanced: Multiple transmitters or initial signals

For automations with multiple entry points or when you need to pass initial data:

<script>
  import { Adapt, type SignalDataJson } from '@mochabug/adapt-svelte';

  // Start with initial signals (data must be base64 encoded)
  const signals: { [key: string]: SignalDataJson } = {
    'input': {
      mimeType: 'text/plain',
      data: btoa('Hello World')
    }
  };
</script>

<!-- Start from a specific transmitter -->
<Adapt
  id="auto-123"
  authToken="your-token"
  transmitter="my-transmitter"
  style="height: 600px;"
/>

<!-- Start with initial signals -->
<Adapt
  id="auto-123"
  authToken="your-token"
  transmitter="file-processor"
  {signals}
  style="height: 600px;"
/>

Props

| Prop | Type | |------|------| | id | string (required) | | sessionToken | string | | authToken | string | | transmitter | string | | signals | { [key: string]: SignalDataJson } | | 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