@quiltt/react 3.9.1 → 3.9.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @quiltt/react
 
+## 3.9.2
+
+### Patch Changes
+
+- [#316](https://github.com/quiltt/quiltt-js/pull/316) [`de5d43e`](https://github.com/quiltt/quiltt-js/commit/de5d43e664a8bbb04595816718f5c645a9c3df27) Thanks [@rubendinho](https://github.com/rubendinho)! - Updated `main` param to `package.json` to improve analyzing the package.
+
+- [#313](https://github.com/quiltt/quiltt-js/pull/313) [`3b789c9`](https://github.com/quiltt/quiltt-js/commit/3b789c9413ab2f9bdda965248ed7a8ccaf270172) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Update typings for QuilttButton onLoad handler
+
+- [#312](https://github.com/quiltt/quiltt-js/pull/312) [`11ba6a3`](https://github.com/quiltt/quiltt-js/commit/11ba6a3af1975349a63640bb99ed0e34ffee3f1c) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Update session handling in QuilttAuthProvider
+
+- Updated dependencies [[`de5d43e`](https://github.com/quiltt/quiltt-js/commit/de5d43e664a8bbb04595816718f5c645a9c3df27), [`3b789c9`](https://github.com/quiltt/quiltt-js/commit/3b789c9413ab2f9bdda965248ed7a8ccaf270172), [`11ba6a3`](https://github.com/quiltt/quiltt-js/commit/11ba6a3af1975349a63640bb99ed0e34ffee3f1c)]:
+  - @quiltt/core@3.9.2
+
 ## 3.9.1
 
 ### Patch Changes

package/README.md

@@ -9,17 +9,27 @@ See the guides [here](https://www.quiltt.dev/connector/sdks/react).
 
 ## Installation
 
+With `npm`:
+
 ```shell
 $ npm install @quiltt/react
-# or
+```
+
+With `yarn`:
+
+```shell
 $ yarn add @quiltt/react
-# or
+```
+
+With `pnpm`:
+
+```shell
 $ pnpm add @quiltt/react
 ```
 
 ## Core Modules and Types
 
-The `@quiltt/react` library ships with `@quiltt/core`, which provides an Auth API and essential functionality for building Javascript-based applications with Quiltt. See the [Core README](../core/README.md) for more information.
+The `@quiltt/react` library ships with `@quiltt/core`, which provides an API clients and essential functionality for building Javascript-based applications with Quiltt. See the [Core README](../core/README.md) for more information.
 
 ## React Components
 
@@ -38,10 +48,11 @@ By default, the rendered component will be a `<button>` element, but you can sup
 ```tsx
 import { useState } from 'react'
 import { QuilttButton } from '@quiltt/react'
+import type { ConnectorSDKCallbackMetadata } from '@quiltt/react'
 
 export const App = () => {
   const [connectionId, setConnectionId] = useState<string>()
-  const handleExitSuccess = (metadata) => {
+  const handleExitSuccess = (metadata: ConnectorSDKCallbackMetadata) => {
     setConnectionId(metadata?.connectionId)
   }
 
@@ -71,10 +82,11 @@ By default, the rendered component will be a `<div>` element, but you can supply
 ```tsx
 import { useState } from 'react'
 import { QuilttContainer } from '@quiltt/react'
+import type { ConnectorSDKCallbackMetadata } from '@quiltt/react'
 
 export const App = () => {
   const [connectionId, setConnectionId] = useState<string>()
-  const handleExitSuccess = (metadata) => {
+  const handleExitSuccess = (metadata: ConnectorSDKCallbackMetadata) => {
     setConnectionId(metadata?.connectionId)
   }
 
@@ -184,7 +196,7 @@ export default App
 
 ## Typescript support
 
-`@quiltt/react` is written in Typescript and ships with its own type definitions. It also ships with the type definitions from `@quiltt/core`.
+`@quiltt/react` is written in Typescript and ships with its own type definitions, as well as the type definitions from `@quiltt/core`.
 
 ## License
 

package/dist/{QuilttAuthProvider-client-CqVLC1w4.js → QuilttAuthProvider-client-D6Iok6TS.js}

@@ -1,12 +1,12 @@
 'use client';
-import { useCallback, useMemo, useEffect } from 'react';
+import { useCallback, useRef, useMemo, useEffect } from 'react';
 import { JsonWebTokenParse, QuilttClient, InMemoryCache } from '@quiltt/core';
 import '@apollo/client/react/hooks/useApolloClient.js';
 import './useQuilttSettings-client-DU_Qfc8X.js';
 import './useSession-client-CG5lGS9F.js';
 import { jsx } from 'react/jsx-runtime';
 import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js';
-import { u as useQuilttSession } from './useQuilttSession-client-DA9F_3KG.js';
+import { u as useQuilttSession } from './useQuilttSession-client-KZRjdl5I.js';
 
 const useIdentifySession = (auth, setSession)=>{
     const identifySession = useCallback(async (payload, callbacks)=>{
@@ -102,14 +102,64 @@ const useRevokeSession = (auth, session, setSession)=>{
     return revokeSession;
 };
 
+/**
+ * Performs a deep equality comparison between two values
+ *
+ * This function recursively compares all properties to determine if they are equal.
+ *
+ * @example
+ * ```ts
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
+ * ```
+ */ const isDeepEqual = (obj1, obj2)=>{
+    // Handle primitive types and null/undefined
+    if (obj1 === obj2) return true;
+    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
+    // Handle special object types
+    if (obj1 instanceof Date && obj2 instanceof Date) {
+        return obj1.getTime() === obj2.getTime();
+    }
+    if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
+        return obj1.toString() === obj2.toString();
+    }
+    if (obj1 instanceof Map && obj2 instanceof Map) {
+        if (obj1.size !== obj2.size) return false;
+        for (const [key, value] of obj1){
+            if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false;
+        }
+        return true;
+    }
+    if (obj1 instanceof Set && obj2 instanceof Set) {
+        if (obj1.size !== obj2.size) return false;
+        for (const item of obj1){
+            if (!Array.from(obj2).some((value)=>isDeepEqual(item, value))) return false;
+        }
+        return true;
+    }
+    // Handle arrays
+    if (Array.isArray(obj1) && Array.isArray(obj2)) {
+        if (obj1.length !== obj2.length) return false;
+        return obj1.every((value, index)=>isDeepEqual(value, obj2[index]));
+    }
+    // If one is array and other isn't, they're not equal
+    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    return keys1.every((key)=>{
+        return Object.prototype.hasOwnProperty.call(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
+    });
+};
+
 /**
  * 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();
+    const previousSessionRef = useRef(session);
     // @todo: extract into a provider so it can accessed by child components
     const graphQLClient = useMemo(()=>new QuilttClient({
             cache: new InMemoryCache()
@@ -121,12 +171,15 @@ const useRevokeSession = (auth, session, setSession)=>{
         token,
         importSession
     ]);
-    // Reset Client Store when logging in or out
-    // biome-ignore lint/correctness/useExhaustiveDependencies: We should reset the store whenever the session changes
+    // Reset Client Store when session changes (using deep comparison)
     useEffect(()=>{
-        graphQLClient.resetStore();
+        if (!isDeepEqual(session, previousSessionRef.current)) {
+            graphQLClient.resetStore();
+            previousSessionRef.current = session;
+        }
     }, [
-        session
+        session,
+        graphQLClient
     ]);
     return /*#__PURE__*/ jsx(ApolloProvider, {
         client: graphQLClient,

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 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 { RefObject, useLayoutEffect, Dispatch, SetStateAction, FC, PropsWithChildren, Component, ComponentType, MouseEvent } from 'react';
 import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -115,7 +115,6 @@ type QuilttAuthProviderProps = PropsWithChildren & {
  * 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.
- *
  */
 declare const QuilttAuthProvider: FC<QuilttAuthProviderProps>;
 
@@ -136,13 +135,19 @@ declare const QuilttSettingsProvider: FC<QuilttSettingsProviderProps>;
 type AnyTag = string | FC<any> | (new (props: any) => Component);
 type PropsOf<Tag> = Tag extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[Tag] : Tag extends ComponentType<infer Props> ? Props & JSX.IntrinsicAttributes : never;
 
-type QuilttButtonProps<T extends AnyTag> = PropsWithChildren<{
+type BaseQuilttButtonProps<T extends AnyTag> = {
     as?: T;
     connectorId: string;
     connectionId?: string;
     institution?: string;
-} & ConnectorSDKCallbacks>;
-declare const QuilttButton: <T extends AnyTag = "button">({ as, connectorId, connectionId, institution, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props }: QuilttButtonProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+};
+type QuilttCallbackProps = Omit<ConnectorSDKCallbacks, 'onLoad'> & {
+    onLoad?: ConnectorSDKCallbacks['onLoad'];
+    onHtmlLoad?: React.ReactEventHandler<HTMLElement>;
+};
+type QuilttButtonProps<T extends AnyTag> = PropsWithChildren<BaseQuilttButtonProps<T> & QuilttCallbackProps>;
+declare const QuilttButton: <T extends AnyTag = "button">({ as, connectorId, connectionId, institution, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, onClick, onHtmlLoad, children, ...props }: QuilttButtonProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
 
 type QuilttContainerProps<T extends AnyTag> = PropsWithChildren<{
     as?: T;

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-CqVLC1w4.js';
-export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-CqVLC1w4.js';
+import { Q as QuilttAuthProvider } from './QuilttAuthProvider-client-D6Iok6TS.js';
+export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-D6Iok6TS.js';
 export { u as useQuilttClient } from './useQuilttClient-client-CAAUait1.js';
-import { u as useQuilttConnector } from './useQuilttConnector-client-L80c55xy.js';
-export { u as useQuilttSession } from './useQuilttSession-client-DA9F_3KG.js';
+import { u as useQuilttConnector } from './useQuilttConnector-client-BPcRwcNX.js';
+export { u as useQuilttSession } from './useQuilttSession-client-KZRjdl5I.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';
@@ -22,7 +22,7 @@ const QuilttProvider = ({ clientId, token, children })=>{
     });
 };
 
-const QuilttButton = ({ as, connectorId, connectionId, institution, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props })=>{
+const QuilttButton = ({ as, connectorId, connectionId, institution, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, onClick, onHtmlLoad, children, ...props })=>{
     const { open } = useQuilttConnector(connectorId, {
         connectionId,
         institution,
@@ -35,8 +35,18 @@ const QuilttButton = ({ as, connectorId, connectionId, institution, onEvent, onO
         onExitError
     });
     const Button = as || 'button';
+    const handleClick = (event)=>{
+        // Call the user's onClick handler first to allow for:
+        // 1. Pre-open validation
+        // 2. Preventing opening via event.preventDefault()
+        // 3. Setting up state before connector opens
+        if (onClick) onClick(event);
+        // Then open the Quiltt connector
+        open();
+    };
     return /*#__PURE__*/ jsx(Button, {
-        onClick: open,
+        onClick: handleClick,
+        onLoad: onHtmlLoad,
         "quiltt-connection": connectionId,
         ...props,
         children: children

package/dist/{useQuilttConnector-client-L80c55xy.js → useQuilttConnector-client-BPcRwcNX.js}

@@ -1,10 +1,10 @@
 'use client';
 import { useState, useEffect, useCallback } from 'react';
 import { cdnBase } from '@quiltt/core';
-import { u as useQuilttSession } from './useQuilttSession-client-DA9F_3KG.js';
+import { u as useQuilttSession } from './useQuilttSession-client-KZRjdl5I.js';
 import { u as useScript } from './useScript-client-Cx5nb9RW.js';
 
-var version = "3.9.1";
+var version = "3.9.2";
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`);

package/dist/{useQuilttSession-client-DA9F_3KG.js → useQuilttSession-client-KZRjdl5I.js}

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quiltt/react",
-  "version": "3.9.1",
-  "description": "React components and hooks for Quiltt Connector",
+  "version": "3.9.2",
+  "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
     "quiltt-connector",
@@ -15,12 +15,10 @@
     "directory": "packages/react"
   },
   "license": "MIT",
-  "sideEffects": [
-    "./src/hooks/useQuilttConnector.ts",
-    "./src/hooks/useQuilttSettings.ts",
-    "./src/hooks/useSession.ts",
-    "./src/hooks/useStorage.ts"
-  ],
+  "bugs": {
+    "url": "https://github.com/quiltt/quiltt-js/issues"
+  },
+  "sideEffects": [],
   "type": "module",
   "exports": {
     ".": {
@@ -34,9 +32,10 @@
     "src/**",
     "CHANGELOG.md"
   ],
+  "main": "dist/index.js",
   "dependencies": {
     "@apollo/client": "^3.11.8",
-    "@quiltt/core": "3.9.1"
+    "@quiltt/core": "3.9.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -47,12 +46,16 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "typescript": "5.6.3"
+    "typescript": "5.7.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
+  "tags": [
+    "quiltt",
+    "react"
+  ],
   "publishConfig": {
     "access": "public"
   },

package/src/components/QuilttButton.tsx

@@ -1,17 +1,30 @@
-import type { PropsWithChildren } from 'react'
+import type { MouseEvent, PropsWithChildren } from 'react'
 
 import type { ConnectorSDKCallbacks } from '@quiltt/core'
 
 import { useQuilttConnector } from '../hooks/useQuilttConnector'
 import type { AnyTag, PropsOf } from '../types'
 
+// Base button props without callback-specific properties
+type BaseQuilttButtonProps<T extends AnyTag> = {
+  as?: T
+  connectorId: string
+  connectionId?: string // For Reconnect Mode
+  institution?: string // For Connect Mode
+  // Override the native onClick handler
+  onClick?: (event: MouseEvent<HTMLElement>) => void
+}
+
+// Separate SDK callback types
+type QuilttCallbackProps = Omit<ConnectorSDKCallbacks, 'onLoad'> & {
+  // Separate the SDK onLoad from the HTML onLoad to avoid conflicts
+  onLoad?: ConnectorSDKCallbacks['onLoad'] // Handles SDK initialization
+  onHtmlLoad?: React.ReactEventHandler<HTMLElement> // Handles DOM element load
+}
+
+// Combined type for the full component
 type QuilttButtonProps<T extends AnyTag> = PropsWithChildren<
-  {
-    as?: T
-    connectorId: string
-    connectionId?: string // For Reconnect Mode
-    institution?: string // For Connect Mode
-  } & ConnectorSDKCallbacks
+  BaseQuilttButtonProps<T> & QuilttCallbackProps
 >
 
 export const QuilttButton = <T extends AnyTag = 'button'>({
@@ -26,6 +39,8 @@ export const QuilttButton = <T extends AnyTag = 'button'>({
   onExitSuccess,
   onExitAbort,
   onExitError,
+  onClick,
+  onHtmlLoad,
   children,
   ...props
 }: QuilttButtonProps<T> & PropsOf<T>) => {
@@ -43,8 +58,19 @@ export const QuilttButton = <T extends AnyTag = 'button'>({
 
   const Button = as || 'button'
 
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    // Call the user's onClick handler first to allow for:
+    // 1. Pre-open validation
+    // 2. Preventing opening via event.preventDefault()
+    // 3. Setting up state before connector opens
+    if (onClick) onClick(event)
+
+    // Then open the Quiltt connector
+    open()
+  }
+
   return (
-    <Button onClick={open} quiltt-connection={connectionId} {...props}>
+    <Button onClick={handleClick} onLoad={onHtmlLoad} quiltt-connection={connectionId} {...props}>
       {children}
     </Button>
   )

package/src/providers/QuilttAuthProvider.tsx

@@ -1,13 +1,13 @@
 'use client'
 
+import { useEffect, useMemo, useRef } from 'react'
 import type { FC, PropsWithChildren } from 'react'
-import { useEffect, useMemo } from 'react'
 
 import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js'
-
 import { InMemoryCache, QuilttClient } from '@quiltt/core'
 
-import { useQuilttSession } from '../hooks'
+import { useQuilttSession } from '@/hooks'
+import { isDeepEqual } from '@/utils'
 
 type QuilttAuthProviderProps = PropsWithChildren & {
   /** The Session token obtained from the server */
@@ -19,10 +19,10 @@ type QuilttAuthProviderProps = PropsWithChildren & {
  * 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.
- *
  */
 export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({ token, children }) => {
   const { session, importSession } = useQuilttSession()
+  const previousSessionRef = useRef(session)
 
   // @todo: extract into a provider so it can accessed by child components
   const graphQLClient = useMemo(
@@ -38,11 +38,13 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({ token, childre
     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
+  // Reset Client Store when session changes (using deep comparison)
   useEffect(() => {
-    graphQLClient.resetStore()
-  }, [session])
+    if (!isDeepEqual(session, previousSessionRef.current)) {
+      graphQLClient.resetStore()
+      previousSessionRef.current = session
+    }
+  }, [session, graphQLClient])
 
   return <ApolloProvider client={graphQLClient}>{children}</ApolloProvider>
 }

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './isDeepEqual'

package/src/utils/isDeepEqual.ts

@@ -0,0 +1,60 @@
+/**
+ * Performs a deep equality comparison between two values
+ *
+ * This function recursively compares all properties to determine if they are equal.
+ *
+ * @example
+ * ```ts
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
+ * ```
+ */
+export const isDeepEqual = (obj1: unknown, obj2: unknown): boolean => {
+  // Handle primitive types and null/undefined
+  if (obj1 === obj2) return true
+  if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object')
+    return false
+
+  // Handle special object types
+  if (obj1 instanceof Date && obj2 instanceof Date) {
+    return obj1.getTime() === obj2.getTime()
+  }
+  if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
+    return obj1.toString() === obj2.toString()
+  }
+  if (obj1 instanceof Map && obj2 instanceof Map) {
+    if (obj1.size !== obj2.size) return false
+    for (const [key, value] of obj1) {
+      if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false
+    }
+    return true
+  }
+  if (obj1 instanceof Set && obj2 instanceof Set) {
+    if (obj1.size !== obj2.size) return false
+    for (const item of obj1) {
+      if (!Array.from(obj2).some((value) => isDeepEqual(item, value))) return false
+    }
+    return true
+  }
+
+  // Handle arrays
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) return false
+    return obj1.every((value, index) => isDeepEqual(value, obj2[index]))
+  }
+
+  // If one is array and other isn't, they're not equal
+  if (Array.isArray(obj1) || Array.isArray(obj2)) return false
+
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  if (keys1.length !== keys2.length) return false
+
+  return keys1.every((key) => {
+    return (
+      Object.prototype.hasOwnProperty.call(obj2, key) &&
+      isDeepEqual((obj1 as any)[key], (obj2 as any)[key])
+    )
+  })
+}