@dynamic-labs/react-hooks 2.1.0-alpha.0 → 2.1.0-alpha.10

package/index.js

@@ -1,5 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useEffect, useMemo, useContext, createContext } from 'react';
+import { useRef, useState, useCallback, useMemo } from 'react';
 import { effect, stop } from '@vue/reactivity';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1546,7 +1545,7 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-const isObject = value => typeof value === 'object' && value !== null && value !== undefined;
+const isObject = value => typeof value === 'object' && value !== null && value !== undefined && typeof value !== 'function' && typeof value !== 'symbol' && typeof value !== 'bigint' && !Array.isArray(value) && !(value instanceof Date);
 /**
  * Watches for changes in the source and calls the callback when the source changes
  * @param source - The source to watch for changes
@@ -1554,9 +1553,12 @@ const isObject = value => typeof value === 'object' && value !== null && value !
  * @returns The unsubscribe function
  */
 const watch = (source, callback) => {
+  let isWatching = false;
   const runner = effect(source, {
+    onTrack: () => isWatching = true,
     scheduler: callback
   });
+  if (!isWatching) return undefined;
   return () => {
     stop(runner);
   };
@@ -1575,20 +1577,19 @@ const useReactivityProxy = target => {
   const proxyObjectCacheRef = useRef(new Map());
   // Rerender count to force rerender when the target changes
   const [, setRerenderCount] = useState(0);
-  const rerender = useCallback(() => setRerenderCount(rerenderCount => rerenderCount + 1), [setRerenderCount]);
   const unsubscribeAll = useCallback(() => {
     unsubscribeFunctionsRef.current.forEach(unsubscribeFunction => unsubscribeFunction());
     unsubscribeFunctionsRef.current.clear();
   }, []);
+  const rerender = useCallback(() => {
+    unsubscribeAll();
+    setRerenderCount(rerenderCount => rerenderCount + 1);
+  }, [setRerenderCount, unsubscribeAll]);
   /**
    * On every render it cleans the previous subscriptions.
    * This is necessary because different renders can have different subscriptions.
    */
   unsubscribeAll();
-  /**
-   * Unsubscribe all subscriptions when the component is unmounted
-   */
-  useEffect(() => () => unsubscribeAll(), [unsubscribeAll]);
   const addSubscriptionProxy = (target, proxyCacheKey) => {
     // Check if object path is already cached
     if (proxyObjectCacheRef.current.has(proxyCacheKey)) {
@@ -1600,9 +1601,13 @@ const useReactivityProxy = target => {
         const value = Reflect.get(target, prop, receiver);
         // Subscribe to the accessed attribute
         const unsubscribeFunction = watch(() => Reflect.get(target, prop, receiver), rerender);
-        unsubscribeFunctionsRef.current.add(unsubscribeFunction);
+        if (unsubscribeFunction) {
+          unsubscribeFunctionsRef.current.add(unsubscribeFunction);
+        }
+        const isReactiveValue = Boolean(unsubscribeFunction);
         // If the value is an object, we need to create a proxy for it too
-        if (isObject(value)) {
+        // but not when the value is reactive, if it is reactive we wanna stop creating proxies
+        if (isObject(value) && !isReactiveValue) {
           const propCachePath = `${proxyCacheKey}.${String(prop)}`;
           return addSubscriptionProxy(value, propCachePath);
         }
@@ -1621,28 +1626,4 @@ const useReactivityProxy = target => {
   }, [target]);
 };
 
-const dynamicClientContext = /*#__PURE__*/createContext(undefined);
-const DynamicClientProvider = ({
-  client,
-  children
-}) => jsx(dynamicClientContext.Provider, {
-  value: {
-    client
-  },
-  children: children
-});
-const useDynamicClient = ({
-  watch: _watch = true
-} = {}) => {
-  const context = useContext(dynamicClientContext);
-  if (context === undefined) {
-    throw new Error('useDynamicClient must be used within a DynamicClientProvider');
-  }
-  const reactiveClient = useReactivityProxy(context.client);
-  if (_watch) {
-    return reactiveClient;
-  }
-  return context.client;
-};
-
-export { DynamicClientProvider, useDynamicClient };
+export { useReactivityProxy as useReactiveClient };

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@dynamic-labs/react-hooks",
-  "version": "2.1.0-alpha.0",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "@vue/reactivity": "^3.4.21",
-    "@dynamic-labs/client": "2.1.0-alpha.0"
-  },
-  "module": "./index.js",
+  "version": "2.1.0-alpha.10",
   "main": "./index.js",
-  "type": "module",
+  "module": "./index.js",
   "types": "./src/index.d.ts",
-  "dependencies": {}
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "require": "./src/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@vue/reactivity": "3.4.21"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  }
 }

package/src/index.d.ts

@@ -1,2 +1 @@
-export type { DefaultClient } from './lib/types/DefaultClient';
-export { DynamicClientProvider, useDynamicClient, } from './lib/context/DynamicClientContext';
+export { useReactivityProxy as useReactiveClient } from './hooks/useReactivityProxy';

package/src/lib/context/DynamicClientContext.d.ts

@@ -1,11 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { DefaultClient } from '../types/DefaultClient';
-type DynamicClientProviderProps = {
-    client: DefaultClient;
-};
-export declare const DynamicClientProvider: FC<PropsWithChildren<DynamicClientProviderProps>>;
-type UseDynamicClientProps = {
-    watch?: boolean;
-};
-export declare const useDynamicClient: ({ watch, }?: UseDynamicClientProps) => DefaultClient;
-export {};

package/src/lib/types/DefaultClient.d.ts

@@ -1,2 +0,0 @@
-import { createClient } from '@dynamic-labs/client';
-export type DefaultClient = ReturnType<typeof createClient>;