@mochabug/adapt-svelte 1.0.0-rc15 → 1.0.0-rc17

package/dist/Adapt.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { AdaptWebClient, type AdaptWebClientOptions, type Output, type SignalValue, type StatusJson } from '@mochabug/adapt-web';
-  import { onDestroy, onMount } from 'svelte';
+  import { AdaptAutomationElement, type AdaptWebClientOptions, type Output, type SignalValue, type StatusJson } from '@mochabug/adapt-web';
+  // Ensure custom element is registered
+  void AdaptAutomationElement;
 
-  // Props interface matching AdaptWebClientOptions
+  // Props interface
   interface Props {
     id: string;
     sessionToken?: string;
@@ -20,6 +21,7 @@
     darkMode?: boolean;
     autoResizing?: boolean;
     classNames?: AdaptWebClientOptions['classNames'];
+    styles?: Partial<CSSStyleDeclaration>;
     onsession?: (event: { status: StatusJson; fork?: string }) => void;
     onoutput?: (event: { output: Output }) => void;
     [key: string]: unknown;
@@ -42,81 +44,47 @@
     darkMode = false,
     autoResizing = false,
     classNames = undefined,
+    styles = undefined,
     onsession,
     onoutput,
     ...restProps
   }: Props = $props();
 
-  const containerId = `adapt-${Math.random().toString(36).slice(2, 11)}`;
-  let client: AdaptWebClient | null = null;
+  let element: AdaptAutomationElement;
 
-  function createClient() {
-    if (client) {
-      client.destroy();
-      client = null;
-    }
-
-    client = new AdaptWebClient({
-      container: containerId,
-      id,
-      sessionToken,
-      authToken,
-      transmitter,
-      signals,
-      challengeToken,
-      requiresChallenge,
-      capWidgetOptions,
-      inheritToken,
-      inheritFrom,
-      forkDisplayMode,
-      sideBySideSplit,
-      dialogBackdropClose,
-      darkMode,
-      autoResizing,
-      classNames,
-      onSession: (status, fork) => {
-        onsession?.({ status, fork });
-      },
-      onOutput: (output) => {
-        onoutput?.({ output });
-      },
-    });
+  function syncProperties() {
+    if (!element) return;
+    element.signals = signals;
+    element.capWidgetOptions = capWidgetOptions;
+    element.inheritFrom = inheritFrom;
+    element.classNames = classNames;
+    element.styles = styles;
+    element.onSessionCallback = (status, fork) => {
+      onsession?.({ status, fork });
+    };
+    element.onOutputCallback = (output) => {
+      onoutput?.({ output });
+    };
   }
 
-  onMount(() => {
-    createClient();
-  });
-
-  onDestroy(() => {
-    if (client) {
-      client.destroy();
-      client = null;
-    }
-  });
-
-  // Recreate client when id changes
-  $effect(() => {
-    if (id && typeof window !== 'undefined') {
-      createClient();
-    }
-  });
-
-  // Runtime updates
-  $effect(() => {
-    client?.setDarkMode(darkMode);
-  });
-
-  $effect(() => {
-    client?.setAutoResizing(autoResizing);
-  });
-
-  $effect(() => {
-    client?.setForkDisplayMode(forkDisplayMode);
-  });
-
   $effect(() => {
-    client?.setDialogBackdropClose(dialogBackdropClose);
+    syncProperties();
   });
 </script>
 
-<div id={containerId} {...restProps}></div>
+<adapt-automation
+  bind:this={element}
+  automation-id={id}
+  session-token={sessionToken}
+  auth-token={authToken}
+  transmitter={transmitter}
+  challenge-token={challengeToken}
+  requires-challenge={requiresChallenge ? '' : undefined}
+  inherit-token={inheritToken}
+  fork-display-mode={forkDisplayMode}
+  side-by-side-split={sideBySideSplit !== undefined ? String(sideBySideSplit) : undefined}
+  dialog-backdrop-close={dialogBackdropClose ? '' : undefined}
+  dark-mode={darkMode ? '' : undefined}
+  auto-resizing={autoResizing ? '' : undefined}
+  {...restProps}
+></adapt-automation>

package/dist/Adapt.svelte.d.ts

@@ -22,6 +22,7 @@ interface Props {
     darkMode?: boolean;
     autoResizing?: boolean;
     classNames?: AdaptWebClientOptions['classNames'];
+    styles?: Partial<CSSStyleDeclaration>;
     onsession?: (event: {
         status: StatusJson;
         fork?: string;

package/dist/AdaptCap.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { AutomationClient } from '@mochabug/adapt-core';
-  import { AdaptCapWidget, type CapWidgetI18n } from '@mochabug/adapt-web';
-  import { onDestroy, onMount } from 'svelte';
+  import { AdaptCapElement, type CapWidgetI18n } from '@mochabug/adapt-web';
+  // Ensure custom element is registered
+  void AdaptCapElement;
 
   // Props interface
   interface Props {
@@ -26,58 +27,29 @@
     ...restProps
   }: Props = $props();
 
-  let container: HTMLElement;
-  let widget: AdaptCapWidget | null = null;
-
-  function createWidget() {
-    if (!container || !client) return;
-
-    if (widget) {
-      widget.destroy();
-      widget = null;
-    }
-
-    widget = new AdaptCapWidget({
-      container,
-      automationId,
-      client,
-      onSolve: (token, expires) => {
-        onsolve?.({ token, expires });
-      },
-      onError: (error) => {
-        onerror?.({ error });
-      },
-      ...(workerCount !== undefined && { workerCount }),
-      ...(i18n !== undefined && { i18n }),
-    });
-
-    if (darkMode) {
-      widget.setDarkMode(true);
-    }
+  let element: AdaptCapElement;
+
+  function syncProperties() {
+    if (!element) return;
+    element.client = client;
+    element.i18n = i18n;
+    element.onSolveCallback = (token, expires) => {
+      onsolve?.({ token, expires });
+    };
+    element.onErrorCallback = (error) => {
+      onerror?.({ error });
+    };
   }
 
-  onMount(() => {
-    createWidget();
-  });
-
-  onDestroy(() => {
-    if (widget) {
-      widget.destroy();
-      widget = null;
-    }
-  });
-
-  // Recreate widget when automationId or client changes
-  $effect(() => {
-    if (automationId && client && typeof window !== 'undefined') {
-      createWidget();
-    }
-  });
-
-  // Update dark mode
   $effect(() => {
-    widget?.setDarkMode(darkMode);
+    syncProperties();
   });
 </script>
 
-<div bind:this={container} {...restProps}></div>
+<adapt-cap
+  bind:this={element}
+  automation-id={automationId}
+  dark-mode={darkMode ? '' : undefined}
+  worker-count={workerCount !== undefined ? String(workerCount) : undefined}
+  {...restProps}
+></adapt-cap>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mochabug/adapt-svelte",
-  "version": "1.0.0-rc15",
+  "version": "1.0.0-rc17",
   "description": "Svelte component for Adapt automation platform",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -33,10 +33,10 @@
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
-    "svelte": "^5.46.1",
+    "svelte": "^5.50.0",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@mochabug/adapt-web": "^1.0.0-rc37"
+    "@mochabug/adapt-web": "^1.0.0-rc39"
   }
 }