@dynamic-labs/react-hooks 4.0.0-alpha.3 → 4.0.0-alpha.31

package/index.cjs

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var assertPackageVersion = require('@dynamic-labs/assert-package-version');
+var react = require('react');
+var reactivity = require('@vue/reactivity');
+
+var version = "4.0.0-alpha.31";
+
+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
+ * @param callback - The callback to call when the source changes
+ * @returns The unsubscribe function
+ */
+const watch = (source, callback) => {
+  let isWatching = false;
+  const runner = reactivity.effect(source, {
+    onTrack: () => isWatching = true,
+    scheduler: callback
+  });
+  if (!isWatching) return undefined;
+  return () => {
+    reactivity.stop(runner);
+  };
+};
+const useReactivityProxy = target => {
+  /**
+   * Stores all unsubscribe functions in a particular render
+   */
+  const unsubscribeFunctionsRef = react.useRef(new Set());
+  /**
+   * Store all new proxy objects references created when accessed to present unnecessary reactivity.
+   * When an attribute is accessed by the customer and we create a proxy for it, we store it here
+   * so in the next render, we can reuse the same proxy object and that way not cause a new render
+   * by creating a new proxy object reference
+   */
+  const proxyObjectCacheRef = react.useRef(new Map());
+  // Rerender count to force rerender when the target changes
+  const [, setRerenderCount] = react.useState(0);
+  const unsubscribeAll = react.useCallback(() => {
+    unsubscribeFunctionsRef.current.forEach(unsubscribeFunction => unsubscribeFunction());
+    unsubscribeFunctionsRef.current.clear();
+  }, []);
+  const rerender = react.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();
+  const addSubscriptionProxy = (target, proxyCacheKey) => {
+    // Check if object path is already cached
+    if (proxyObjectCacheRef.current.has(proxyCacheKey)) {
+      return proxyObjectCacheRef.current.get(proxyCacheKey);
+    }
+    // Create a proxy object to subscribe to the accessed attribute
+    const proxyObject = new Proxy(target, {
+      get: (target, prop, receiver) => {
+        const value = Reflect.get(target, prop, receiver);
+        // Subscribe to the accessed attribute
+        const unsubscribeFunction = watch(() => Reflect.get(target, prop, receiver), rerender);
+        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
+        // 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);
+        }
+        return value;
+      }
+    });
+    // Cache the proxy object
+    proxyObjectCacheRef.current.set(proxyCacheKey, proxyObject);
+    return proxyObject;
+  };
+  return react.useMemo(() => {
+    // target changed, clear all proxy cache to allow for the new object to be proxied
+    proxyObjectCacheRef.current.clear();
+    return addSubscriptionProxy(target, '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target]);
+};
+
+assertPackageVersion.assertPackageVersion('@dynamic-labs/react-hooks', version);
+
+exports.useReactiveClient = useReactivityProxy;