@quiltt/react 3.8.1 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @quiltt/react
 
+## 3.9.0
+
+### Minor Changes
+
+- [#307](https://github.com/quiltt/quiltt-js/pull/307) [`d0033cd`](https://github.com/quiltt/quiltt-js/commit/d0033cdbdaf33f9227afa55c9a6078156809a563) Thanks [@rubendinho](https://github.com/rubendinho)! - - Significantly reduce bundle size by migrating @apollo/client to "deep entrypoint import style"
+  - Bump @apollo/client to v3.11.8
+
+### Patch Changes
+
+- [#305](https://github.com/quiltt/quiltt-js/pull/305) [`803a4d0`](https://github.com/quiltt/quiltt-js/commit/803a4d09e458ed2e72781fcd475ad5f9639f2bf2) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Optimize connector WebView implementation
+
+- Updated dependencies [[`803a4d0`](https://github.com/quiltt/quiltt-js/commit/803a4d09e458ed2e72781fcd475ad5f9639f2bf2), [`d0033cd`](https://github.com/quiltt/quiltt-js/commit/d0033cdbdaf33f9227afa55c9a6078156809a563)]:
+  - @quiltt/core@3.9.0
+
+## 3.8.2
+
+### Patch Changes
+
+- [#303](https://github.com/quiltt/quiltt-js/pull/303) [`d1ceb66`](https://github.com/quiltt/quiltt-js/commit/d1ceb6648f4c2747988f8d6cacbee9946beaea0c) Thanks [@rubendinho](https://github.com/rubendinho)! - Reduce bundle size
+
+- Updated dependencies [[`d1ceb66`](https://github.com/quiltt/quiltt-js/commit/d1ceb6648f4c2747988f8d6cacbee9946beaea0c)]:
+  - @quiltt/core@3.8.2
+
 ## 3.8.1
 
 ### Patch Changes

package/README.md

@@ -5,6 +5,8 @@
 
 `@quiltt/react` provides React Components and Hooks for integrating Quiltt into React-based applications.
 
+See the guides [here](https://www.quiltt.dev/connector/sdks/react).
+
 ## Installation
 
 ```shell
@@ -100,7 +102,9 @@ A provider component for passing Session and settings down to the rest of your a
 import { QuilttProvider } from '@quiltt/react'
 
 const Layout = ({ children }) => {
-  return <QuilttProvider token="{SESSION_TOKEN}">{children}</QuilttProvider>
+  const sessionToken = "<SESSION_TOKEN_FROM_SERVER>"
+
+  return <QuilttProvider token={sessionToken}>{children}</QuilttProvider>
 }
 
 export default Layout

package/dist/QuilttAuthProvider-client-pXeKB9BO.js

@@ -0,0 +1,137 @@
+'use client';
+import { useCallback, useMemo, useEffect } from 'react';
+import { JsonWebTokenParse, QuilttClient, InMemoryCache } from '@quiltt/core';
+import '@apollo/client/react/hooks';
+import './useQuilttSettings-client-DU_Qfc8X.js';
+import './useSession-client-CG5lGS9F.js';
+import { jsx } from 'react/jsx-runtime';
+import { ApolloProvider } from '@apollo/client/react';
+import { u as useQuilttSession } from './useQuilttSession-client-C0lMwHkc.js';
+
+const useIdentifySession = (auth, setSession)=>{
+    const identifySession = useCallback(async (payload, callbacks)=>{
+        const response = await auth.identify(payload);
+        switch(response.status){
+            case 201:
+                setSession(response.data.token);
+                if (callbacks.onSuccess) return callbacks.onSuccess();
+                break;
+            case 202:
+                if (callbacks.onChallenged) return callbacks.onChallenged();
+                break;
+            case 422:
+                if (callbacks.onError) return callbacks.onError(response.data);
+                break;
+            default:
+                throw new Error(`AuthAPI.identify: Unexpected response status ${response.status}`);
+        }
+    }, [
+        auth,
+        setSession
+    ]);
+    return identifySession;
+};
+
+const useAuthenticateSession = (auth, setSession)=>{
+    const authenticateSession = useCallback(async (payload, callbacks)=>{
+        const response = await auth.authenticate(payload);
+        switch(response.status){
+            case 201:
+                setSession(response.data.token);
+                if (callbacks.onSuccess) return callbacks.onSuccess();
+                break;
+            case 401:
+                if (callbacks.onFailure) return callbacks.onFailure();
+                break;
+            case 422:
+                if (callbacks.onError) return callbacks.onError(response.data);
+                break;
+            default:
+                throw new Error(`AuthAPI.authenticate: Unexpected response status ${response.status}`);
+        }
+    }, [
+        auth,
+        setSession
+    ]);
+    return authenticateSession;
+};
+
+/**
+ * Optionally Accepts environmentId to validate session is from with your desired environment
+ */ const useImportSession = (auth, session, setSession, environmentId)=>{
+    const importSession = useCallback(async (token)=>{
+        // Is there a token?
+        if (!token) return !!session;
+        // Is this token already imported?
+        if (session && session.token === token) return true;
+        const jwt = JsonWebTokenParse(token);
+        // Is this token a valid JWT?
+        if (!jwt) return false;
+        // Is this token within the expected environment?
+        if (environmentId && jwt.claims.eid !== environmentId) return false;
+        // Is this token active?
+        const response = await auth.ping(token);
+        switch(response.status){
+            case 200:
+                setSession(token);
+                return true;
+            case 401:
+                return false;
+            default:
+                throw new Error(`AuthAPI.ping: Unexpected response status ${response.status}`);
+        }
+    }, [
+        auth,
+        session,
+        setSession,
+        environmentId
+    ]);
+    return importSession;
+};
+
+const useRevokeSession = (auth, session, setSession)=>{
+    const revokeSession = useCallback(async ()=>{
+        if (!session) return;
+        await auth.revoke(session.token);
+        setSession(null);
+    }, [
+        auth,
+        session,
+        setSession
+    ]);
+    return revokeSession;
+};
+
+/**
+ * If a token is provided, will validate the token against the api and then import
+ * it into trusted storage. While this process is happening, the component is put
+ * into a loading state and the children are not rendered to prevent race conditions
+ * from triggering within the transitionary state.
+ *
+ */ const QuilttAuthProvider = ({ token, children })=>{
+    const { session, importSession } = useQuilttSession();
+    // @todo: extract into a provider so it can accessed by child components
+    const graphQLClient = useMemo(()=>new QuilttClient({
+            cache: new InMemoryCache()
+        }), []);
+    // Import passed in token
+    useEffect(()=>{
+        if (token) importSession(token);
+    }, [
+        token,
+        importSession
+    ]);
+    // Reset Client Store when logging in or out
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We should reset the store whenever the session changes
+    useEffect(()=>{
+        graphQLClient.resetStore();
+    }, [
+        session
+    ]);
+    return /*#__PURE__*/ jsx(ApolloProvider, {
+        client: graphQLClient,
+        children: children
+    });
+};
+
+export { QuilttAuthProvider as Q, useIdentifySession as a, useAuthenticateSession as b, useRevokeSession as c, useImportSession as u };

package/dist/{QuilttSettingsProvider-client-BJFjBWHn.js → QuilttSettingsProvider-client-DK_eTIy6.js}

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import '@quiltt/core';
+import '@apollo/client/react/hooks';
 import { Q as QuilttSettings } from './useQuilttSettings-client-DU_Qfc8X.js';
 import './useSession-client-CG5lGS9F.js';
 

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-import { Maybe, QuilttJWT, UsernamePayload, UnprocessableData, AuthAPI, PasscodePayload, ConnectorSDKConnectorOptions, QuilttClient, ConnectorSDKCallbacks } from '@quiltt/core';
+import { Maybe, QuilttJWT, UsernamePayload, UnprocessableData, AuthAPI, PasscodePayload, ConnectorSDKConnectorOptions, ConnectorSDKCallbacks } from '@quiltt/core';
 export * from '@quiltt/core';
 import * as react from 'react';
 import { RefObject, useLayoutEffect, Dispatch, SetStateAction, FC, PropsWithChildren, Component, ComponentType } from 'react';
-import { useApolloClient } from '@apollo/client/index.js';
-import * as _apollo_client from '@apollo/client';
+import { useApolloClient } from '@apollo/client/react/hooks';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function useEventListener<K extends keyof MediaQueryListEventMap>(eventName: K, handler: (event: MediaQueryListEventMap[K]) => void, element: RefObject<MediaQueryList>, options?: boolean | AddEventListenerOptions): void;
@@ -111,7 +110,6 @@ type QuilttAuthProviderProps = PropsWithChildren & {
     /** The Session token obtained from the server */
     token?: string;
 };
-declare const GraphQLClient: QuilttClient<_apollo_client.NormalizedCacheObject>;
 /**
  * If a token is provided, will validate the token against the api and then import
  * it into trusted storage. While this process is happening, the component is put
@@ -157,4 +155,4 @@ type QuilttContainerProps<T extends AnyTag> = PropsWithChildren<{
  */
 declare const QuilttContainer: <T extends AnyTag = "div">({ as, connectorId, connectionId, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props }: QuilttContainerProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
 
-export { type AuthenticateSession, GraphQLClient, type IdentifySession, type ImportSession, QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettings, QuilttSettingsProvider, type RevokeSession, type SetSession, type UseQuilttSession, useAuthenticateSession, useEventListener, useIdentifySession, useImportSession, useIsomorphicLayoutEffect, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useRevokeSession, useSession, useStorage };
+export { type AuthenticateSession, type IdentifySession, type ImportSession, QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettings, QuilttSettingsProvider, type RevokeSession, type SetSession, type UseQuilttSession, useAuthenticateSession, useEventListener, useIdentifySession, useImportSession, useIsomorphicLayoutEffect, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useRevokeSession, useSession, useStorage };

package/dist/index.js

@@ -1,16 +1,16 @@
 export * from '@quiltt/core';
 export { u as useEventListener } from './useEventListener-client-DVM5xwKY.js';
 export { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-client-DeTHOKz1.js';
-import { Q as QuilttAuthProvider } from './QuilttAuthProvider-client-Cp30Hh8M.js';
-export { G as GraphQLClient, c as useAuthenticateSession, b as useIdentifySession, a as useImportSession, d as useRevokeSession } from './QuilttAuthProvider-client-Cp30Hh8M.js';
-export { u as useQuilttClient } from './useQuilttClient-client-DFuCXCBx.js';
-import { u as useQuilttConnector } from './useQuilttConnector-client-65x8U9Mn.js';
-export { u as useQuilttSession } from './useQuilttSession-client-xfxBGnbt.js';
+import { Q as QuilttAuthProvider } from './QuilttAuthProvider-client-pXeKB9BO.js';
+export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-pXeKB9BO.js';
+export { u as useQuilttClient } from './useQuilttClient-client-vI5KrJv2.js';
+import { u as useQuilttConnector } from './useQuilttConnector-client-D1pfKDpI.js';
+export { u as useQuilttSession } from './useQuilttSession-client-C0lMwHkc.js';
 export { Q as QuilttSettings, u as useQuilttSettings } from './useQuilttSettings-client-DU_Qfc8X.js';
 export { u as useSession } from './useSession-client-CG5lGS9F.js';
 export { u as useStorage } from './useStorage-client-B3keU-oI.js';
 import { jsx } from 'react/jsx-runtime';
-import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-client-BJFjBWHn.js';
+import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-client-DK_eTIy6.js';
 
 const QuilttProvider = ({ clientId, token, children })=>{
     return /*#__PURE__*/ jsx(QuilttSettingsProvider, {

package/dist/{useQuilttClient-client-DFuCXCBx.js → useQuilttClient-client-vI5KrJv2.js}

@@ -1,5 +1,5 @@
 'use client';
-import { u as useApolloClient } from './QuilttAuthProvider-client-Cp30Hh8M.js';
+import { useApolloClient } from '@apollo/client/react/hooks';
 
 const useQuilttClient = useApolloClient;
 

package/dist/{useQuilttConnector-client-65x8U9Mn.js → useQuilttConnector-client-D1pfKDpI.js}

@@ -1,11 +1,10 @@
 'use client';
 import { useState, useEffect, useCallback } from 'react';
 import { cdnBase } from '@quiltt/core';
-import { u as useQuilttSession } from './useQuilttSession-client-xfxBGnbt.js';
+import { u as useQuilttSession } from './useQuilttSession-client-C0lMwHkc.js';
 import { u as useScript } from './useScript-client-Cx5nb9RW.js';
 
-// Generated by genversion.
-const version = '3.8.1';
+var version = "3.9.0";
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`);

package/dist/{useQuilttSession-client-xfxBGnbt.js → useQuilttSession-client-C0lMwHkc.js}

@@ -1,7 +1,7 @@
 'use client';
 import { useCallback } from 'react';
 import { AuthAPI } from '@quiltt/core';
-import { a as useImportSession, b as useIdentifySession, c as useAuthenticateSession, d as useRevokeSession } from './QuilttAuthProvider-client-Cp30Hh8M.js';
+import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-client-pXeKB9BO.js';
 import { u as useQuilttSettings } from './useQuilttSettings-client-DU_Qfc8X.js';
 import { u as useSession } from './useSession-client-CG5lGS9F.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "description": "React components and hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -35,12 +35,12 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@quiltt/core": "3.8.1"
+    "@apollo/client": "^3.11.8",
+    "@quiltt/core": "3.9.0"
   },
   "devDependencies": {
-    "@apollo/client": "3.9.11",
     "@biomejs/biome": "1.9.4",
-    "@types/node": "22.9.0",
+    "@types/node": "22.10.2",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "bunchee": "5.6.1",
@@ -57,8 +57,7 @@
     "access": "public"
   },
   "scripts": {
-    "addVersion": "genversion --esm -f src/version.ts",
-    "build": "pnpm run addVersion && bunchee",
+    "build": "bunchee",
     "clean": "rimraf .turbo dist",
     "dev": "bunchee --watch",
     "lint": "TIMING=1 biome check src/ tests/ --fix",

package/src/hooks/useQuilttClient.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useApolloClient } from '@apollo/client/index.js'
+import { useApolloClient } from '@apollo/client/react/hooks'
 
 export const useQuilttClient = useApolloClient
 

package/src/providers/QuilttAuthProvider.tsx

@@ -1,10 +1,12 @@
 'use client'
 
 import type { FC, PropsWithChildren } from 'react'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
+
+import { ApolloProvider } from '@apollo/client/react'
 
-import { ApolloProvider } from '@apollo/client'
 import { InMemoryCache, QuilttClient } from '@quiltt/core'
+
 import { useQuilttSession } from '../hooks'
 
 type QuilttAuthProviderProps = PropsWithChildren & {
@@ -12,10 +14,6 @@ type QuilttAuthProviderProps = PropsWithChildren & {
   token?: string
 }
 
-export const GraphQLClient = new QuilttClient({
-  cache: new InMemoryCache(),
-})
-
 /**
  * If a token is provided, will validate the token against the api and then import
  * it into trusted storage. While this process is happening, the component is put
@@ -26,6 +24,15 @@ export const GraphQLClient = new QuilttClient({
 export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({ token, children }) => {
   const { session, importSession } = useQuilttSession()
 
+  // @todo: extract into a provider so it can accessed by child components
+  const graphQLClient = useMemo(
+    () =>
+      new QuilttClient({
+        cache: new InMemoryCache(),
+      }),
+    []
+  )
+
   // Import passed in token
   useEffect(() => {
     if (token) importSession(token)
@@ -34,10 +41,10 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({ token, childre
   // Reset Client Store when logging in or out
   // biome-ignore lint/correctness/useExhaustiveDependencies: We should reset the store whenever the session changes
   useEffect(() => {
-    GraphQLClient.resetStore()
+    graphQLClient.resetStore()
   }, [session])
 
-  return <ApolloProvider client={GraphQLClient}>{children}</ApolloProvider>
+  return <ApolloProvider client={graphQLClient}>{children}</ApolloProvider>
 }
 
 export default QuilttAuthProvider

package/src/version.ts

@@ -1,2 +1 @@
-// Generated by genversion.
-export const version = '3.8.1'
+export { version } from '../package.json'