@flung.dev/connect 0.1.1 → 0.3.0

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.1",
+  "version": "0.3.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",