@flung.dev/connect 0.1.2 → 0.4.0

package/dist/react/index.js

@@ -1,5 +1,7 @@
-import { createElement, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { initialConnectState } from '../core/controller.js';
 import { defineFlungConnect, TAG_NAME } from '../element/define.js';
+export { useFlungConnect } from './use-flung-connect.js';
 const EVENTS = { 'flung-load': 'onLoad', 'flung-connect': 'onConnect', 'flung-disconnect': 'onDisconnect', 'flung-error': 'onError' };
 const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 function FlungConnectInner(props, ref) {
@@ -36,15 +38,50 @@ function FlungConnectInner(props, ref) {
         if (node.token !== props.token)
             node.token = props.token;
     }, [props.token, props.labels]);
+    // The element's state, only when a render prop needs it, so a panel without them renders no more often than before.
+    const custom = props.renderPlatform !== undefined || props.renderAccount !== undefined;
+    const subscribe = useCallback((notify) => {
+        const node = element.current;
+        if (!custom || node === null)
+            return () => undefined;
+        node.addEventListener('flung-change', notify);
+        return () => node.removeEventListener('flung-change', notify);
+    }, [custom]);
+    const initial = initialConnectState(props.token !== null);
+    const state = useSyncExternalStore(subscribe, () => (custom ? (element.current?.state ?? initial) : initial), () => initial);
+    const actions = useMemo(() => {
+        const controller = () => element.current?.controller ?? null;
+        return {
+            connect: (platform, options) => controller()?.connect(platform, options),
+            submitHandle: (platform, handle) => controller()?.submitHandle(platform, handle),
+            reconnect: (accountId) => controller()?.reconnect(accountId),
+            requestDisconnect: (accountId) => controller()?.requestDisconnect(accountId),
+            confirmDisconnect: (platform) => controller()?.confirmDisconnect(platform) ?? Promise.resolve(),
+            cancel: (platform) => controller()?.cancel(platform),
+            dismissNotice: () => controller()?.dismissNotice(),
+            refresh: () => controller()?.refresh() ?? Promise.resolve(),
+        };
+    }, []);
+    // Each custom row goes into the light DOM with the element's slot name for it, so your CSS reaches it directly.
+    const children = custom
+        ? state.platforms.flatMap((platform) => [
+            props.renderPlatform === undefined ? null : createElement('div', { key: `platform-${platform.platform}`, slot: `platform-${platform.platform}` }, props.renderPlatform({ platform, actions, labels: state.labels })),
+            ...(props.renderAccount === undefined ? [] : platform.accounts.map((account) => createElement('div', { key: `account-${account.account.id}`, slot: `account-${account.account.id}` }, props.renderAccount?.({ account, platform, actions, labels: state.labels })))),
+        ])
+        : undefined;
     return createElement(TAG_NAME, {
         ref: element,
         'base-url': props.baseUrl,
         platforms: props.platforms?.join(','),
         mode: props.mode,
         theme: props.theme,
+        layout: props.layout,
+        variants: props.variants,
+        unstyled: props.unstyled === true ? '' : undefined,
         branding: props.branding,
         class: props.className,
         style: props.style,
-    });
+    }, children);
 }
+/** The `<flung-connect>` element as a React component. */
 export const FlungConnect = forwardRef(FlungConnectInner);

package/dist/react/use-flung-connect.d.ts

@@ -0,0 +1,13 @@
+import type { ConnectActions, ConnectControllerOptions, ConnectState } from '../core/controller.js';
+/** What `useFlungConnect` takes: the controller's options. Callbacks and a token function may be new on every render. */
+export type UseFlungConnectOptions = ConnectControllerOptions;
+/** What `useFlungConnect` returns: the state to draw, and the actions to call from your own buttons and forms. */
+export type UseFlungConnectResult = ConnectState & ConnectActions;
+/**
+ * The connect panel with none of Flung's markup, for drawing every piece with your own components and CSS. It runs a
+ * `createConnectController` for as long as the component is mounted, and a new one when the token string, `baseUrl`
+ * or whether there is a `fetch` changes. A token function, `fetch` and the callbacks are read fresh on every call, so
+ * they need no `useCallback`. Call `connect`, `submitHandle` and `reconnect` straight from a click or submit handler: a
+ * browser opens a window only during one.
+ */
+export declare function useFlungConnect(options: UseFlungConnectOptions): UseFlungConnectResult;

package/dist/react/use-flung-connect.js

@@ -0,0 +1,65 @@
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { createConnectController, initialConnectState } from '../core/controller.js';
+const noSubscribe = () => () => undefined;
+/**
+ * The connect panel with none of Flung's markup, for drawing every piece with your own components and CSS. It runs a
+ * `createConnectController` for as long as the component is mounted, and a new one when the token string, `baseUrl`
+ * or whether there is a `fetch` changes. A token function, `fetch` and the callbacks are read fresh on every call, so
+ * they need no `useCallback`. Call `connect`, `submitHandle` and `reconnect` straight from a click or submit handler: a
+ * browser opens a window only during one.
+ */
+export function useFlungConnect(options) {
+    const latest = useRef(options);
+    latest.current = options;
+    const current = useRef(null);
+    const [controller, setController] = useState(null);
+    const { token, baseUrl } = options;
+    const tokenKey = token === null ? null : typeof token === 'string' ? `token:${token}` : 'function';
+    const hasFetch = options.fetch !== undefined;
+    useEffect(() => {
+        const source = latest.current.token;
+        const made = createConnectController({
+            token: typeof source === 'function'
+                ? () => {
+                    const now = latest.current.token;
+                    return typeof now === 'function' ? now() : Promise.resolve(now ?? '');
+                }
+                : source,
+            baseUrl,
+            platforms: latest.current.platforms,
+            mode: latest.current.mode,
+            labels: latest.current.labels,
+            readRedirect: latest.current.readRedirect,
+            fetch: hasFetch ? (input, init) => (latest.current.fetch ?? fetch)(input, init) : undefined,
+            onLoad: (detail) => latest.current.onLoad?.(detail),
+            onConnect: (detail) => latest.current.onConnect?.(detail),
+            onDisconnect: (detail) => latest.current.onDisconnect?.(detail),
+            onError: (detail) => latest.current.onError?.(detail),
+        });
+        current.current = made;
+        setController(made);
+        return () => {
+            made.destroy();
+            if (current.current === made)
+                current.current = null;
+        };
+    }, [tokenKey, baseUrl, hasFetch]);
+    const platformsKey = options.platforms?.join(',') ?? '';
+    const labelsKey = JSON.stringify(options.labels ?? {});
+    useEffect(() => {
+        controller?.configure({ platforms: latest.current.platforms ?? null, mode: latest.current.mode ?? 'popup', labels: latest.current.labels });
+    }, [controller, platformsKey, options.mode, labelsKey]);
+    const initial = initialConnectState(token !== null);
+    const state = useSyncExternalStore(controller?.subscribe ?? noSubscribe, controller?.getState ?? (() => initial), () => initial);
+    const actions = useMemo(() => ({
+        connect: (platform, options) => current.current?.connect(platform, options),
+        submitHandle: (platform, handle) => current.current?.submitHandle(platform, handle),
+        reconnect: (accountId) => current.current?.reconnect(accountId),
+        requestDisconnect: (accountId) => current.current?.requestDisconnect(accountId),
+        confirmDisconnect: (platform) => current.current?.confirmDisconnect(platform) ?? Promise.resolve(),
+        cancel: (platform) => current.current?.cancel(platform),
+        dismissNotice: () => current.current?.dismissNotice(),
+        refresh: () => current.current?.refresh() ?? Promise.resolve(),
+    }), []);
+    return { ...state, ...actions };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flung.dev/connect",
-  "version": "0.1.2",
+  "version": "0.4.0",
   "description": "Let people connect and disconnect their social accounts from your page: a <flung-connect> web component and a React component for Flung, with no runtime dependencies.",
   "license": "MIT",
   "type": "module",