@quiltt/react 3.8.0 → 3.8.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- [#300](https://github.com/quiltt/quiltt-js/pull/300) [`a359810`](https://github.com/quiltt/quiltt-js/commit/a3598104565b4428beef9de37f85211e9caf465b) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Make @quiltt/react-native ESM only
+
+- Updated dependencies [[`a359810`](https://github.com/quiltt/quiltt-js/commit/a3598104565b4428beef9de37f85211e9caf465b)]:
+  - @quiltt/core@3.8.1
+
 ## 3.8.0
 
 ### Minor 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-CU478Ahm.js → QuilttAuthProvider-client-DE7DRmFG.js}

@@ -1,11 +1,10 @@
-'use strict';
 '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-C0NMXZs8.js';
+import { u as useQuilttSession } from './useQuilttSession-client-YSZevZF3.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
@@ -6947,6 +6946,10 @@ function supportsResultCaching(store) {
     return !!(store instanceof EntityStore && store.group.caching);
 }
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function shallowCopy(value) {
     if (isNonNullObject(value)) {
         return isArray(value) ? value.slice(0) : __assign({
@@ -12590,18 +12593,23 @@ if (globalThis.__DEV__ !== false) {
 
 setVerbosity(globalThis.__DEV__ !== false ? "log" : "silent");
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
+var rehackt;
+var hasRequiredRehackt;
 
-var rehackt = require$$0;
+function requireRehackt () {
+	if (hasRequiredRehackt) return rehackt;
+	hasRequiredRehackt = 1;
+	rehackt = require$$0;
+	return rehackt;
+}
 
-var index = /*@__PURE__*/getDefaultExportFromCjs(rehackt);
+var rehacktExports = requireRehackt();
+var index = /*@__PURE__*/getDefaultExportFromCjs(rehacktExports);
 
 var React = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   default: index
-}, [rehackt]);
+}, [rehacktExports]);
 
 // To make sure Apollo Client doesn't create more than one React context
 // (which can lead to problems like having an Apollo Client instance added
@@ -12610,10 +12618,10 @@ var React = /*#__PURE__*/_mergeNamespaces({
 var contextKey = canUseSymbol ? Symbol.for("__APOLLO_CONTEXT__") : "__APOLLO_CONTEXT__";
 function getApolloContext() {
     invariant("createContext" in React, 45);
-    var context = rehackt.createContext[contextKey];
+    var context = rehacktExports.createContext[contextKey];
     if (!context) {
-        Object.defineProperty(rehackt.createContext, contextKey, {
-            value: context = rehackt.createContext({}),
+        Object.defineProperty(rehacktExports.createContext, contextKey, {
+            value: context = rehacktExports.createContext({}),
             enumerable: false,
             writable: false,
             configurable: true
@@ -12626,8 +12634,8 @@ function getApolloContext() {
 var ApolloProvider = function(_a) {
     var client = _a.client, children = _a.children;
     var ApolloContext = getApolloContext();
-    var parentContext = rehackt.useContext(ApolloContext);
-    var context = rehackt.useMemo(function() {
+    var parentContext = rehacktExports.useContext(ApolloContext);
+    var context = rehacktExports.useMemo(function() {
         return __assign(__assign({}, parentContext), {
             client: client || parentContext.client
         });
@@ -12636,7 +12644,7 @@ var ApolloProvider = function(_a) {
         client
     ]);
     invariant(context.client, 46);
-    return rehackt.createElement(ApolloContext.Provider, {
+    return rehacktExports.createElement(ApolloContext.Provider, {
         value: context
     }, children);
 };
@@ -12656,7 +12664,7 @@ var ApolloProvider = function(_a) {
  * @since 3.0.0
  * @returns The `ApolloClient` instance being used by the application.
  */ function useApolloClient(override) {
-    var context = rehackt.useContext(getApolloContext());
+    var context = rehacktExports.useContext(getApolloContext());
     var client = override || context.client;
     invariant(!!client, 49);
     return client;
@@ -12951,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
@@ -12962,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);
@@ -12972,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-CU478Ahm.js';
-export { G as GraphQLClient, c as useAuthenticateSession, b as useIdentifySession, a as useImportSession, d as useRevokeSession } from './QuilttAuthProvider-client-CU478Ahm.js';
-export { u as useQuilttClient } from './useQuilttClient-client-Bwrsgaab.js';
-import { u as useQuilttConnector } from './useQuilttConnector-client-D_LGauFU.js';
-export { u as useQuilttSession } from './useQuilttSession-client-C0NMXZs8.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-Bwrsgaab.js → useQuilttClient-client-D5o2Whsn.js}

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

package/dist/{useQuilttConnector-client-D_LGauFU.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-C0NMXZs8.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.0';
+const version = '3.8.2';
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`);

package/dist/{useQuilttSession-client-C0NMXZs8.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-CU478Ahm.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.0",
+  "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.0"
+    "@quiltt/core": "3.8.2"
   },
   "devDependencies": {
     "@apollo/client": "3.9.11",
@@ -43,7 +43,7 @@
     "@types/node": "22.9.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "bunchee": "5.3.2",
+    "bunchee": "5.6.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",

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.0'
+export const version = '3.8.2'