@quiltt/react 3.8.1 → 3.8.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @quiltt/react
 
+## 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-Cp30Hh8M.js → QuilttAuthProvider-client-DE7DRmFG.js}

@@ -1,10 +1,10 @@
 'use client';
-import require$$0, { useCallback, useEffect } from 'react';
+import require$$0, { useCallback, useMemo, useEffect } from 'react';
 import { JsonWebTokenParse, QuilttClient, InMemoryCache as InMemoryCache$1 } from '@quiltt/core';
 import './useQuilttSettings-client-DU_Qfc8X.js';
 import './useSession-client-CG5lGS9F.js';
 import { jsx } from 'react/jsx-runtime';
-import { u as useQuilttSession } from './useQuilttSession-client-xfxBGnbt.js';
+import { u as useQuilttSession } from './useQuilttSession-client-YSZevZF3.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
@@ -12959,9 +12959,6 @@ var OBSERVED_CHANGED_OPTIONS = [
     return InternalQueryReference;
 })();
 
-const GraphQLClient = new QuilttClient({
-    cache: new InMemoryCache$1()
-});
 /**
  * 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
@@ -12970,6 +12967,10 @@ const GraphQLClient = new QuilttClient({
  *
  */ 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$1()
+        }), []);
     // Import passed in token
     useEffect(()=>{
         if (token) importSession(token);
@@ -12980,14 +12981,14 @@ const GraphQLClient = new QuilttClient({
     // 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 /*#__PURE__*/ jsx(ApolloProvider, {
-        client: GraphQLClient,
+        client: graphQLClient,
         children: children
     });
 };
 
-export { GraphQLClient as G, QuilttAuthProvider as Q, useImportSession as a, useIdentifySession as b, useAuthenticateSession as c, useRevokeSession as d, useApolloClient as u };
+export { QuilttAuthProvider as Q, useImportSession as a, useIdentifySession as b, useAuthenticateSession as c, useRevokeSession as d, useApolloClient as u };

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 * 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,11 +1,11 @@
 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-DE7DRmFG.js';
+export { c as useAuthenticateSession, b as useIdentifySession, a as useImportSession, d as useRevokeSession } from './QuilttAuthProvider-client-DE7DRmFG.js';
+export { u as useQuilttClient } from './useQuilttClient-client-D5o2Whsn.js';
+import { u as useQuilttConnector } from './useQuilttConnector-client-_DPRlIM5.js';
+export { u as useQuilttSession } from './useQuilttSession-client-YSZevZF3.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';

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

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

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

@@ -1,11 +1,11 @@
 '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-YSZevZF3.js';
 import { u as useScript } from './useScript-client-Cx5nb9RW.js';
 
 // Generated by genversion.
-const version = '3.8.1';
+const version = '3.8.2';
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`);

package/dist/{useQuilttSession-client-xfxBGnbt.js → useQuilttSession-client-YSZevZF3.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 { a as useImportSession, b as useIdentifySession, c as useAuthenticateSession, d as useRevokeSession } from './QuilttAuthProvider-client-DE7DRmFG.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.8.2",
   "description": "React components and hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -35,7 +35,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@quiltt/core": "3.8.1"
+    "@quiltt/core": "3.8.2"
   },
   "devDependencies": {
     "@apollo/client": "3.9.11",

package/src/providers/QuilttAuthProvider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { FC, PropsWithChildren } from 'react'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 
 import { ApolloProvider } from '@apollo/client'
 import { InMemoryCache, QuilttClient } from '@quiltt/core'
@@ -12,10 +12,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 +22,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 +39,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,2 @@
 // Generated by genversion.
-export const version = '3.8.1'
+export const version = '3.8.2'