@mochabug/adapt-react 1.0.0-rc16 → 1.0.0-rc17

package/dist/esm/AdaptCap.js

@@ -1,39 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AdaptCapWidget, } from "@mochabug/adapt-web";
-import { forwardRef, useEffect, useRef } from "react";
+import { AdaptCapElement, } from "@mochabug/adapt-web";
+import { forwardRef, useLayoutEffect, useRef } from "react";
 // Re-export for direct use
 export { AdaptCapWidget, } from "@mochabug/adapt-web";
+// Ensure custom element is registered
+void AdaptCapElement;
 /**
  * React component for Cap.js proof-of-work challenges.
- *
- * Use this component independently of the Adapt iframe component
- * to solve PoW challenges and get a token for starting sessions.
- *
- * @example
- * ```tsx
- * import { AdaptCap } from "@mochabug/adapt-react";
- * import { createConnectClient } from "@mochabug/adapt-core/connect";
- * import { createAdaptClient } from "@mochabug/adapt-core";
- *
- * function MyComponent() {
- *   const rawClient = createConnectClient({ id: "my-automation" });
- *
- *   return (
- *     <AdaptCap
- *       automationId="my-automation"
- *       client={rawClient}
- *       onSolve={async (token) => {
- *         const client = createAdaptClient(rawClient, "my-automation");
- *         await client.run({ challengeToken: token });
- *       }}
- *     />
- *   );
- * }
- * ```
+ * Renders `<adapt-cap>` custom element and syncs non-serializable properties via ref.
  */
 export const AdaptCap = forwardRef(function AdaptCap({ automationId, client, onSolve, onError, workerCount, i18n, darkMode, className, style, }, ref) {
     const internalRef = useRef(null);
-    const widgetRef = useRef(null);
     // Merge refs
     const setRef = (element) => {
         internalRef.current = element;
@@ -44,28 +21,15 @@ export const AdaptCap = forwardRef(function AdaptCap({ automationId, client, onS
             ref.current = element;
         }
     };
-    useEffect(() => {
-        if (!internalRef.current)
+    // Sync non-serializable properties
+    useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (!el)
             return;
-        widgetRef.current = new AdaptCapWidget({
-            container: internalRef.current,
-            automationId,
-            client,
-            onSolve,
-            onError,
-            ...(workerCount !== undefined && { workerCount }),
-            ...(i18n !== undefined && { i18n }),
-        });
-        return () => {
-            widgetRef.current?.destroy();
-            widgetRef.current = null;
-        };
-    }, [automationId, client]);
-    // Update dark mode
-    useEffect(() => {
-        if (darkMode !== undefined) {
-            widgetRef.current?.setDarkMode(darkMode);
-        }
-    }, [darkMode]);
-    return _jsx("div", { ref: setRef, className: className, style: style });
+        el.client = client;
+        el.i18n = i18n;
+        el.onSolveCallback = onSolve;
+        el.onErrorCallback = onError;
+    });
+    return (_jsx("adapt-cap", { ref: setRef, className: className, style: style, "automation-id": automationId, "dark-mode": darkMode ? "" : undefined, "worker-count": workerCount !== undefined ? String(workerCount) : undefined }));
 });

package/dist/esm/index.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AdaptWebClient, } from "@mochabug/adapt-web";
-import { forwardRef, useEffect, useRef } from "react";
+import { AdaptAutomationElement, } from "@mochabug/adapt-web";
+import { forwardRef, useLayoutEffect, useRef } from "react";
 // Re-export everything from web
 export * from "@mochabug/adapt-web";
 // Export standalone Cap widget component
 export { AdaptCap } from "./AdaptCap.js";
+// Ensure custom element is registered
+void AdaptAutomationElement;
 /**
  * React component for embedding Adapt automations.
+ * Renders `<adapt-automation>` custom element and syncs non-serializable properties via ref.
  */
-export const Adapt = forwardRef(function Adapt({ id, sessionToken, authToken, transmitter, signals, challengeToken, requiresChallenge, capWidgetOptions, inheritToken, inheritFrom, forkDisplayMode, sideBySideSplit, dialogBackdropClose, darkMode, autoResizing, onSession, onOutput, classNames, className, style, }, ref) {
-    const clientRef = useRef(null);
+export const Adapt = forwardRef(function Adapt({ id, sessionToken, authToken, transmitter, signals, challengeToken, requiresChallenge, capWidgetOptions, inheritToken, inheritFrom, forkDisplayMode, sideBySideSplit, dialogBackdropClose, darkMode, autoResizing, onSession, onOutput, classNames, styles, className, style, }, ref) {
     const internalRef = useRef(null);
-    const containerIdRef = useRef(`adapt-${Math.random().toString(36).slice(2, 11)}`);
-    const containerId = containerIdRef.current;
     // Merge refs
     const setRef = (element) => {
         internalRef.current = element;
@@ -23,57 +23,20 @@ export const Adapt = forwardRef(function Adapt({ id, sessionToken, authToken, tr
             ref.current = element;
         }
     };
-    useEffect(() => {
-        clientRef.current = new AdaptWebClient({
-            container: containerId,
-            id,
-            sessionToken,
-            authToken,
-            transmitter,
-            signals,
-            challengeToken,
-            requiresChallenge,
-            capWidgetOptions,
-            inheritToken,
-            inheritFrom,
-            forkDisplayMode,
-            sideBySideSplit,
-            dialogBackdropClose,
-            darkMode,
-            autoResizing,
-            onSession,
-            onOutput,
-            classNames,
-        });
-        return () => {
-            clientRef.current?.destroy();
-            clientRef.current = null;
-        };
-        // Only recreate client if automation ID changes
-    }, [id]);
-    // Runtime updates for darkMode
-    useEffect(() => {
-        if (darkMode !== undefined) {
-            clientRef.current?.setDarkMode(darkMode);
-        }
-    }, [darkMode]);
-    // Runtime updates for autoResizing
-    useEffect(() => {
-        if (autoResizing !== undefined) {
-            clientRef.current?.setAutoResizing(autoResizing);
-        }
-    }, [autoResizing]);
-    // Runtime updates for forkDisplayMode
-    useEffect(() => {
-        if (forkDisplayMode !== undefined) {
-            clientRef.current?.setForkDisplayMode(forkDisplayMode);
-        }
-    }, [forkDisplayMode]);
-    // Runtime updates for dialogBackdropClose
-    useEffect(() => {
-        if (dialogBackdropClose !== undefined) {
-            clientRef.current?.setDialogBackdropClose(dialogBackdropClose);
-        }
-    }, [dialogBackdropClose]);
-    return (_jsx("div", { ref: setRef, id: containerId, className: className, style: style }));
+    // Sync non-serializable properties to the element
+    useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (!el)
+            return;
+        el.signals = signals;
+        el.capWidgetOptions = capWidgetOptions;
+        el.inheritFrom = inheritFrom;
+        el.classNames = classNames;
+        el.styles = styles;
+        el.onSessionCallback = onSession;
+        el.onOutputCallback = onOutput;
+    });
+    // React doesn't natively set properties on custom elements (pre-19),
+    // so we use attributes for serializable values and ref for the rest.
+    return (_jsx("adapt-automation", { ref: setRef, className: className, style: style, "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 }));
 });

package/dist/types/AdaptCap.d.ts

@@ -1,42 +1,35 @@
-import { type AdaptCapWidgetOptions } from "@mochabug/adapt-web";
+import type { AutomationClient } from "@mochabug/adapt-core";
+import { AdaptCapElement, type CapWidgetI18n } from "@mochabug/adapt-web";
 export { AdaptCapWidget, type AdaptCapWidgetOptions, } from "@mochabug/adapt-web";
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "adapt-cap": React.DetailedHTMLProps<React.HTMLAttributes<AdaptCapElement> & {
+                "automation-id"?: string;
+                "dark-mode"?: string;
+                "worker-count"?: string;
+            }, AdaptCapElement>;
+        }
+    }
+}
 /**
  * Props for the AdaptCap React component.
  */
-export interface AdaptCapProps extends Omit<AdaptCapWidgetOptions, "container"> {
+export interface AdaptCapProps {
+    automationId: string;
+    client: AutomationClient;
+    workerCount?: number;
+    i18n?: CapWidgetI18n;
+    darkMode?: boolean;
+    onSolve?: (token: string, expires: Date) => void;
+    onError?: (error: Error) => void;
     /** CSS class name for the container */
     className?: string;
     /** Inline styles for the container */
     style?: React.CSSProperties;
-    /** Enable dark mode styling */
-    darkMode?: boolean;
 }
 /**
  * React component for Cap.js proof-of-work challenges.
- *
- * Use this component independently of the Adapt iframe component
- * to solve PoW challenges and get a token for starting sessions.
- *
- * @example
- * ```tsx
- * import { AdaptCap } from "@mochabug/adapt-react";
- * import { createConnectClient } from "@mochabug/adapt-core/connect";
- * import { createAdaptClient } from "@mochabug/adapt-core";
- *
- * function MyComponent() {
- *   const rawClient = createConnectClient({ id: "my-automation" });
- *
- *   return (
- *     <AdaptCap
- *       automationId="my-automation"
- *       client={rawClient}
- *       onSolve={async (token) => {
- *         const client = createAdaptClient(rawClient, "my-automation");
- *         await client.run({ challengeToken: token });
- *       }}
- *     />
- *   );
- * }
- * ```
+ * Renders `<adapt-cap>` custom element and syncs non-serializable properties via ref.
  */
-export declare const AdaptCap: import("react").ForwardRefExoticComponent<AdaptCapProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AdaptCap: import("react").ForwardRefExoticComponent<AdaptCapProps & import("react").RefAttributes<AdaptCapElement>>;

package/dist/types/index.d.ts

@@ -1,16 +1,62 @@
-import { type AdaptWebClientOptions } from "@mochabug/adapt-web";
+import { AdaptAutomationElement, type AdaptWebClientOptions, type Output, type SignalValue, type StatusJson } from "@mochabug/adapt-web";
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "adapt-automation": React.DetailedHTMLProps<React.HTMLAttributes<AdaptAutomationElement> & {
+                "automation-id"?: string;
+                "session-token"?: string;
+                "auth-token"?: string;
+                transmitter?: string;
+                "challenge-token"?: string;
+                "requires-challenge"?: string;
+                "inherit-token"?: string;
+                "fork-display-mode"?: string;
+                "side-by-side-split"?: string;
+                "dialog-backdrop-close"?: string;
+                "dark-mode"?: string;
+                "auto-resizing"?: string;
+            }, AdaptAutomationElement>;
+        }
+    }
+}
 export * from "@mochabug/adapt-web";
 export { AdaptCap, type AdaptCapProps } from "./AdaptCap.js";
 /**
  * Props for the Adapt React component.
  */
-export interface AdaptProps extends Pick<AdaptWebClientOptions, "id" | "sessionToken" | "authToken" | "transmitter" | "signals" | "challengeToken" | "requiresChallenge" | "capWidgetOptions" | "inheritToken" | "inheritFrom" | "forkDisplayMode" | "sideBySideSplit" | "dialogBackdropClose" | "darkMode" | "autoResizing" | "onSession" | "onOutput" | "classNames"> {
-    /** CSS class name for the container */
+export interface AdaptProps {
+    id: string;
+    sessionToken?: string;
+    authToken?: string;
+    transmitter?: string;
+    signals?: {
+        [key: string]: SignalValue;
+    };
+    challengeToken?: string;
+    requiresChallenge?: boolean;
+    capWidgetOptions?: AdaptWebClientOptions["capWidgetOptions"];
+    inheritToken?: string;
+    inheritFrom?: {
+        hash: string;
+    } | {
+        param: string;
+    };
+    forkDisplayMode?: "side-by-side" | "dialog";
+    sideBySideSplit?: number;
+    dialogBackdropClose?: boolean;
+    darkMode?: boolean;
+    autoResizing?: boolean;
+    onSession?: (status: StatusJson, fork?: string) => void;
+    onOutput?: (output: Output) => void;
+    classNames?: AdaptWebClientOptions["classNames"];
+    styles?: Partial<CSSStyleDeclaration>;
+    /** CSS class name for the host element */
     className?: string;
-    /** Inline styles for the container */
+    /** Inline styles for the host element */
     style?: React.CSSProperties;
 }
 /**
  * React component for embedding Adapt automations.
+ * Renders `<adapt-automation>` custom element and syncs non-serializable properties via ref.
  */
-export declare const Adapt: import("react").ForwardRefExoticComponent<AdaptProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Adapt: import("react").ForwardRefExoticComponent<AdaptProps & import("react").RefAttributes<AdaptAutomationElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mochabug/adapt-react",
-  "version": "1.0.0-rc16",
+  "version": "1.0.0-rc17",
   "description": "React component for Adapt automation platform",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -32,11 +32,11 @@
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.13",
     "react": "^19.2.4",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@mochabug/adapt-web": "^1.0.0-rc38"
+    "@mochabug/adapt-web": "^1.0.0-rc39"
   }
 }