@withone/connect 0.10.0 → 0.12.0

package/src/vue.ts

@@ -4,6 +4,7 @@
  *   <ConnectButton
  *     authorize-url="/api/one/authorize"
  *     :platforms="['stripe', 'notion']"
+ *     :connected="user.hasOneGrant"
  *     @success="onConnected"
  *   />
  *
@@ -21,59 +22,74 @@ import type { PropType } from "vue";
 
 import {
   mountConnectButton,
-  optionsFromProps,
-  propsIdentity,
   type ConnectButtonHandle,
   type ConnectButtonPlatformInput,
+  type ConnectButtonProps,
+  type ConnectButtonSize,
+  type ConnectButtonTheme,
   type ConnectButtonVariant,
+  type ConnectFailureCode,
   type OneConnectTheme,
 } from "@withone/connect";
 
+/** Booleans default to undefined, not false, so "not set" stays
+ *  distinguishable from "false" (it matters for `connected`). */
+const optionalBoolean = { type: Boolean, default: undefined };
+
 export const ConnectButton = defineComponent({
   name: "OneConnectButton",
   props: {
     authorizeUrl: { type: String, required: true },
-    appTheme: { type: String as PropType<OneConnectTheme>, default: undefined },
-    label: { type: String, default: undefined },
+    platforms: {
+      type: Array as PropType<ConnectButtonPlatformInput[]>,
+      default: undefined,
+    },
+    connected: optionalBoolean,
+    disabled: optionalBoolean,
     variant: {
       type: String as PropType<ConnectButtonVariant>,
       default: undefined,
     },
-    theme: { type: String as PropType<OneConnectTheme>, default: undefined },
-    platforms: {
-      type: Array as PropType<ConnectButtonPlatformInput[]>,
+    size: { type: String as PropType<ConnectButtonSize>, default: undefined },
+    fullWidth: optionalBoolean,
+    theme: { type: String as PropType<ConnectButtonTheme>, default: undefined },
+    connectTheme: {
+      type: String as PropType<OneConnectTheme>,
       default: undefined,
     },
-    description: { type: String, default: undefined },
+    /** @deprecated use connectTheme */
+    appTheme: { type: String as PropType<OneConnectTheme>, default: undefined },
     accentColor: { type: String, default: undefined },
+    label: { type: String, default: undefined },
     connectedLabel: { type: String, default: undefined },
+    description: { type: String, default: undefined },
   },
   emits: {
     success: () => true,
-    error: (message: string) => typeof message === "string",
+    error: (message: string, code: ConnectFailureCode) =>
+      typeof message === "string" && typeof code === "string",
+    cancel: () => true,
   },
   setup(props, { emit }) {
     const container = ref<HTMLElement | null>(null);
     let handle: ConnectButtonHandle | null = null;
 
-    const mount = () => {
-      handle?.destroy();
-      handle = null;
-      if (!container.value) return;
-      handle = mountConnectButton(
-        container.value,
-        optionsFromProps(
-          { ...props },
-          {
-            onSuccess: () => emit("success"),
-            onError: (message) => emit("error", message),
-          },
-        ),
-      );
-    };
+    const current = (): ConnectButtonProps => ({
+      ...props,
+      onSuccess: () => emit("success"),
+      onError: (message, code) => emit("error", message, code),
+      onCancel: () => emit("cancel"),
+    });
 
-    onMounted(mount);
-    watch(() => propsIdentity({ ...props }), mount);
+    onMounted(() => {
+      if (container.value)
+        handle = mountConnectButton(container.value, current());
+    });
+    watch(
+      () => ({ ...props }),
+      () => handle?.update(current()),
+      { deep: true },
+    );
     onBeforeUnmount(() => {
       handle?.destroy();
       handle = null;

package/dist/useOneConnect.d.ts

@@ -1,13 +0,0 @@
-import type { OneConnectHandle, OneConnectOptions } from "./types";
-/**
- * Wires the connect flow to any element. A plain function rather than a
- * React hook, so it works from every framework: call it once where the
- * button lives and pass `open` to a click.
- *
- * The flow is a full-page redirect: the tab goes to the app's authorize
- * route, on to One's hosted page, back to the app's callback route, and
- * home. On the way home the callback route appends `?one_connect=…` to
- * the URL it redirects to; this function reads that on load, fires
- * onSuccess or onError once, and removes the params from the address bar.
- */
-export declare const useOneConnect: (options: OneConnectOptions) => OneConnectHandle;

package/dist/wrapper-options.d.ts

@@ -1,28 +0,0 @@
-import type { ConnectButtonOptions, ConnectButtonPlatformInput, ConnectButtonVariant, OneConnectTheme } from "./types";
-/** The flat prop shape every framework wrapper exposes: React props,
- *  Vue props, the Svelte action's options. One place turns it into the
- *  core mountConnectButton options. */
-export interface ConnectButtonProps {
-    /** The app's own backend authorize route; relative is fine. */
-    authorizeUrl: string;
-    /** Theme of One's hosted page. */
-    appTheme?: OneConnectTheme;
-    onSuccess?: () => void;
-    onError?: (message: string) => void;
-    label?: string;
-    variant?: ConnectButtonVariant;
-    /** Matches the host page. */
-    theme?: OneConnectTheme;
-    /** Connector slugs, or objects to override name or logo. */
-    platforms?: ConnectButtonPlatformInput[];
-    description?: string;
-    accentColor?: string;
-    connectedLabel?: string;
-}
-export interface ConnectButtonCallbacks {
-    onSuccess?: () => void;
-    onError?: (message: string) => void;
-}
-export declare function optionsFromProps(props: ConnectButtonProps, callbacks?: ConnectButtonCallbacks): ConnectButtonOptions;
-/** The inputs whose change should remount the button. */
-export declare function propsIdentity(props: ConnectButtonProps): string;

package/src/useOneConnect.ts

@@ -1,72 +0,0 @@
-import { THEME_PARAM } from "./constants";
-import { hasReturnParams, parseReturn, stripReturnParams } from "./return";
-import type { OneConnectHandle, OneConnectOptions } from "./types";
-
-/** The return leg is a page load, so it is delivered exactly once, to
- *  the first instance that reads it. */
-let returnConsumed = false;
-
-const DEFAULT_ERROR = "The connection was not completed.";
-
-/**
- * Wires the connect flow to any element. A plain function rather than a
- * React hook, so it works from every framework: call it once where the
- * button lives and pass `open` to a click.
- *
- * The flow is a full-page redirect: the tab goes to the app's authorize
- * route, on to One's hosted page, back to the app's callback route, and
- * home. On the way home the callback route appends `?one_connect=…` to
- * the URL it redirects to; this function reads that on load, fires
- * onSuccess or onError once, and removes the params from the address bar.
- */
-export const useOneConnect = (options: OneConnectOptions): OneConnectHandle => {
-  const buildAuthorizeUrl = (): string => {
-    try {
-      const url = new URL(
-        options.authorizeUrl,
-        typeof window === "undefined" ? undefined : window.location.origin,
-      );
-      if (options.appTheme) url.hash = `${THEME_PARAM}=${options.appTheme}`;
-      return url.toString();
-    } catch {
-      return options.authorizeUrl;
-    }
-  };
-
-  const open = () => {
-    if (typeof window === "undefined") return;
-    window.location.assign(buildAuthorizeUrl());
-  };
-
-  if (typeof window !== "undefined" && !returnConsumed) {
-    const outcome = parseReturn(window.location.search);
-    if (outcome) {
-      returnConsumed = true;
-      // Frameworks that manage the history themselves (the Next.js App
-      // Router) sync the address bar back to their own URL when hydration
-      // completes, undoing a single replaceState. Scrub now and re-check a
-      // few beats later.
-      const scrub = () => {
-        if (!hasReturnParams(window.location.search)) return;
-        window.history.replaceState(
-          null,
-          "",
-          stripReturnParams(window.location),
-        );
-      };
-      scrub();
-      for (const delay of [50, 500, 2000]) window.setTimeout(scrub, delay);
-
-      window.setTimeout(() => {
-        try {
-          if (outcome.status === "success") options.onSuccess?.();
-          else options.onError?.(outcome.message ?? DEFAULT_ERROR);
-        } catch {
-          /* the app's own callback threw; not ours to handle */
-        }
-      }, 0);
-    }
-  }
-
-  return { open };
-};

package/src/wrapper-options.ts

@@ -1,68 +0,0 @@
-import type {
-  ConnectButtonOptions,
-  ConnectButtonPlatformInput,
-  ConnectButtonVariant,
-  OneConnectTheme,
-} from "./types";
-
-/** The flat prop shape every framework wrapper exposes: React props,
- *  Vue props, the Svelte action's options. One place turns it into the
- *  core mountConnectButton options. */
-export interface ConnectButtonProps {
-  /** The app's own backend authorize route; relative is fine. */
-  authorizeUrl: string;
-  /** Theme of One's hosted page. */
-  appTheme?: OneConnectTheme;
-  onSuccess?: () => void;
-  onError?: (message: string) => void;
-  label?: string;
-  variant?: ConnectButtonVariant;
-  /** Matches the host page. */
-  theme?: OneConnectTheme;
-  /** Connector slugs, or objects to override name or logo. */
-  platforms?: ConnectButtonPlatformInput[];
-  description?: string;
-  accentColor?: string;
-  connectedLabel?: string;
-}
-
-export interface ConnectButtonCallbacks {
-  onSuccess?: () => void;
-  onError?: (message: string) => void;
-}
-
-export function optionsFromProps(
-  props: ConnectButtonProps,
-  callbacks: ConnectButtonCallbacks = props,
-): ConnectButtonOptions {
-  return {
-    connect: {
-      authorizeUrl: props.authorizeUrl,
-      appTheme: props.appTheme,
-      onSuccess: () => callbacks.onSuccess?.(),
-      onError: (message) => callbacks.onError?.(message),
-    },
-    label: props.label,
-    variant: props.variant,
-    theme: props.theme,
-    platforms: props.platforms,
-    description: props.description,
-    accentColor: props.accentColor,
-    connectedLabel: props.connectedLabel,
-  };
-}
-
-/** The inputs whose change should remount the button. */
-export function propsIdentity(props: ConnectButtonProps): string {
-  return JSON.stringify([
-    props.authorizeUrl,
-    props.appTheme,
-    props.label,
-    props.variant,
-    props.theme,
-    props.platforms ?? [],
-    props.description,
-    props.accentColor,
-    props.connectedLabel,
-  ]);
-}