@quiltt/react 2.1.2 → 2.2.1

package/src/hooks/useQuilttConnector.ts

@@ -1,39 +1,97 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useQuilttSession } from './useQuilttSession'
+import { useScript } from './useScript'
+import { ConnectorSDK, ConnectorSDKConnector, ConnectorSDKConnectorOptions } from '@quiltt/core'
 
 const QUILTT_CDN_BASE = process.env.QUILTT_CDN_BASE || 'https://cdn.quiltt.io'
 
-// Script Element Singleton
-let scriptElement: HTMLScriptElement
+declare const Quiltt: ConnectorSDK
 
-export const useQuilttConnector = () => {
+export const useQuilttConnector = (
+  connectorId?: string,
+  options?: ConnectorSDKConnectorOptions
+) => {
+  const status = useScript(`${QUILTT_CDN_BASE}/v1/connector.js`)
   const { session } = useQuilttSession()
+  const [connector, setConnector] = useState<ConnectorSDKConnector>()
+  const [isOpening, setIsOpening] = useState<boolean>(false)
 
-  // Create Script Element
+  // Set Session
   useEffect(() => {
-    if (scriptElement) return
+    if (typeof Quiltt === 'undefined') return
 
-    scriptElement = document.createElement('script')
-    scriptElement.src = `${QUILTT_CDN_BASE}/v1/connector.js`
+    Quiltt.authenticate(session?.token)
+  }, [status, session])
 
-    if (session?.token) {
-      scriptElement.setAttribute('quiltt-token', session.token)
+  // Set Connector
+  useEffect(() => {
+    if (typeof Quiltt === 'undefined' || !connectorId) return
+
+    if (options?.connectionId) {
+      setConnector(Quiltt.reconnect(connectorId, { connectionId: options.connectionId }))
+    } else {
+      setConnector(Quiltt.connect(connectorId))
     }
+  }, [status, connectorId, options?.connectionId])
+
+  // onEvent
+  useEffect(() => {
+    if (!connector || !options?.onEvent) return
+
+    connector.onEvent(options.onEvent)
+    return () => connector.offEvent(options.onEvent as any)
+  }, [connector, options?.onEvent])
+
+  // onExit
+  useEffect(() => {
+    if (!connector || !options?.onExit) return
+
+    connector.onExit(options.onExit)
+    return () => connector.offExit(options.onExit as any)
+  }, [connector, options?.onExit])
+
+  // onExitSuccess
+  useEffect(() => {
+    if (!connector || !options?.onExitSuccess) return
 
-    document.head.appendChild(scriptElement)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    connector.onExitSuccess(options.onExitSuccess)
+    return () => connector.offExitSuccess(options.onExitSuccess as any)
+  }, [connector, options?.onExitSuccess])
 
-  // Update Script Element
+  // onExitAbort
   useEffect(() => {
-    if (!scriptElement) return
+    if (!connector || !options?.onExitAbort) return
+
+    connector.onExitAbort(options.onExitAbort)
+    return () => connector.offExitAbort(options.onExitAbort as any)
+  }, [connector, options?.onExitAbort])
+
+  // onExitError
+  useEffect(() => {
+    if (!connector || !options?.onExitError) return
+
+    connector.onExitError(options.onExitError)
+    return () => connector.offExitError(options.onExitError as any)
+  }, [connector, options?.onExitError])
 
-    if (session?.token && session.token !== scriptElement.getAttribute('quiltt-token')) {
-      scriptElement.setAttribute('quiltt-token', session.token)
-    } else if (!session?.token && scriptElement.getAttribute('quiltt-token')) {
-      scriptElement.removeAttribute('quiltt-token')
+  // This is used to hide any potential race conditions from usage; allowing
+  // interaction before the script may have loaded.
+  useEffect(() => {
+    if (connector && isOpening) {
+      setIsOpening(false)
+      connector.open()
+    }
+  }, [connector, isOpening])
+
+  const open = useCallback(() => {
+    if (connectorId) {
+      setIsOpening(true)
+    } else {
+      throw new Error('Must provide `connectorId` to `open` Quiltt Connector with Method Call')
     }
-  }, [session?.token])
+  }, [connectorId, setIsOpening])
+
+  return { open }
 }

package/src/hooks/useScript.ts

@@ -0,0 +1,105 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+export type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error'
+export interface UseScriptOptions {
+  shouldPreventLoad?: boolean
+  removeOnUnmount?: boolean
+}
+
+// Cached script statuses
+const cachedScriptStatuses: Record<string, UseScriptStatus | undefined> = {}
+
+function getScriptNode(src: string) {
+  const node: HTMLScriptElement | null = document.querySelector(`script[src="${src}"]`)
+  const status = node?.getAttribute('data-status') as UseScriptStatus | undefined
+
+  return {
+    node,
+    status,
+  }
+}
+
+// @see https://usehooks-ts.com/react-hook/use-script
+export function useScript(src: string | null, options?: UseScriptOptions): UseScriptStatus {
+  const [status, setStatus] = useState<UseScriptStatus>(() => {
+    if (!src || options?.shouldPreventLoad) {
+      return 'idle'
+    }
+
+    if (typeof window === 'undefined') {
+      // SSR Handling - always return 'loading'
+      return 'loading'
+    }
+
+    return cachedScriptStatuses[src] ?? 'loading'
+  })
+
+  useEffect(() => {
+    if (!src || options?.shouldPreventLoad) {
+      return
+    }
+
+    const cachedScriptStatus = cachedScriptStatuses[src]
+    if (cachedScriptStatus === 'ready' || cachedScriptStatus === 'error') {
+      // If the script is already cached, set its status immediately
+      setStatus(cachedScriptStatus)
+      return
+    }
+
+    // Fetch existing script element by src
+    // It may have been added by another instance of this hook
+    const script = getScriptNode(src)
+    let scriptNode = script.node
+
+    if (!scriptNode) {
+      // Create script element and add it to document body
+      scriptNode = document.createElement('script')
+      scriptNode.src = src
+      scriptNode.async = true
+      scriptNode.setAttribute('data-status', 'loading')
+      document.body.appendChild(scriptNode)
+
+      // Store status in attribute on script
+      // This can be read by other instances of this hook
+      const setAttributeFromEvent = (event: Event) => {
+        const scriptStatus: UseScriptStatus = event.type === 'load' ? 'ready' : 'error'
+
+        scriptNode?.setAttribute('data-status', scriptStatus)
+      }
+
+      scriptNode.addEventListener('load', setAttributeFromEvent)
+      scriptNode.addEventListener('error', setAttributeFromEvent)
+    } else {
+      // Grab existing script status from attribute and set to state.
+      setStatus(script.status ?? cachedScriptStatus ?? 'loading')
+    }
+
+    // Script event handler to update status in state
+    // Note: Even if the script already exists we still need to add
+    // event handlers to update the state for *this* hook instance.
+    const setStateFromEvent = (event: Event) => {
+      const newStatus = event.type === 'load' ? 'ready' : 'error'
+      setStatus(newStatus)
+      cachedScriptStatuses[src] = newStatus
+    }
+
+    // Add event listeners
+    scriptNode.addEventListener('load', setStateFromEvent)
+    scriptNode.addEventListener('error', setStateFromEvent)
+
+    // Remove event listeners on cleanup
+    return () => {
+      if (scriptNode) {
+        scriptNode.removeEventListener('load', setStateFromEvent)
+        scriptNode.removeEventListener('error', setStateFromEvent)
+      }
+
+      if (scriptNode && options?.removeOnUnmount) {
+        scriptNode.remove()
+      }
+    }
+  }, [src, options?.shouldPreventLoad, options?.removeOnUnmount])
+
+  return status
+}