@withone/connect 0.12.0 → 0.12.2

package/src/react.ts

@@ -10,8 +10,8 @@ import type { CSSProperties, ReactElement } from "react";
 
 import {
   createConnectFlow,
-  mountConnectButton,
   readConnectReturn,
+  renderConnectButton,
   type ConnectButtonHandle,
   type ConnectButtonProps as ConnectButtonCoreProps,
   type ConnectFailureCode,
@@ -20,7 +20,7 @@ import {
 } from "@withone/connect";
 
 export interface ConnectButtonProps extends ConnectButtonCoreProps {
-  /** On the wrapper element around the button. */
+  /** On the host element, `<span class="one-connect">`. */
   className?: string;
   style?: CSSProperties;
 }
@@ -45,7 +45,7 @@ const visualKey = (props: ConnectButtonCoreProps): string =>
   ]);
 
 export function ConnectButton(props: ConnectButtonProps): ReactElement {
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  const hostRef = useRef<HTMLSpanElement | null>(null);
   const handleRef = useRef<ConnectButtonHandle | null>(null);
   const keyRef = useRef<string>("");
   const latest = useRef(props);
@@ -59,9 +59,9 @@ export function ConnectButton(props: ConnectButtonProps): ReactElement {
   });
 
   useEffect(() => {
-    if (!containerRef.current) return;
-    handleRef.current = mountConnectButton(
-      containerRef.current,
+    if (!hostRef.current) return;
+    handleRef.current = renderConnectButton(
+      hostRef.current,
       withLatestCallbacks(),
     );
     keyRef.current = visualKey(latest.current);
@@ -81,10 +81,17 @@ export function ConnectButton(props: ConnectButtonProps): ReactElement {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key]);
 
-  return createElement("div", {
-    ref: containerRef,
-    className: props.className,
+  // The host is rendered here, layout attributes included, so the server
+  // HTML and the hydrated element agree; the button lives in its shadow
+  // root, which React never sees.
+  return createElement("span", {
+    ref: hostRef,
+    className: props.className
+      ? `one-connect ${props.className}`
+      : "one-connect",
     style: props.style,
+    "data-variant": props.variant ?? "default",
+    "data-full-width": props.fullWidth ? "" : undefined,
   });
 }
 

package/src/vue.ts

@@ -21,7 +21,7 @@ import {
 import type { PropType } from "vue";
 
 import {
-  mountConnectButton,
+  renderConnectButton,
   type ConnectButtonHandle,
   type ConnectButtonPlatformInput,
   type ConnectButtonProps,
@@ -71,7 +71,7 @@ export const ConnectButton = defineComponent({
     cancel: () => true,
   },
   setup(props, { emit }) {
-    const container = ref<HTMLElement | null>(null);
+    const host = ref<HTMLElement | null>(null);
     let handle: ConnectButtonHandle | null = null;
 
     const current = (): ConnectButtonProps => ({
@@ -82,8 +82,7 @@ export const ConnectButton = defineComponent({
     });
 
     onMounted(() => {
-      if (container.value)
-        handle = mountConnectButton(container.value, current());
+      if (host.value) handle = renderConnectButton(host.value, current());
     });
     watch(
       () => ({ ...props }),
@@ -95,6 +94,14 @@ export const ConnectButton = defineComponent({
       handle = null;
     });
 
-    return () => h("div", { ref: container });
+    // The host carries its layout attributes from the render, so server
+    // and client HTML agree; the button lives in its shadow root.
+    return () =>
+      h("span", {
+        ref: host,
+        class: "one-connect",
+        "data-variant": props.variant ?? "default",
+        "data-full-width": props.fullWidth ? "" : undefined,
+      });
   },
 });