@frontegg/react-hooks 7.0.0-alpha.1 → 7.0.0-alpha.10

package/useSnapshot/index.js

@@ -0,0 +1,128 @@
+/// <reference types="react/experimental" />
+
+import React, { useCallback, useDebugValue, useEffect, useMemo, useRef } from 'react';
+import { affectedToPathList, createProxy as createProxyToCompare, isChanged } from 'proxy-compare';
+
+// @ts-ignore
+import useSyncExternalStoreExports from 'use-sync-external-store/shim';
+import { snapshot, subscribe } from '@frontegg/redux-store';
+const {
+  useSyncExternalStore
+} = useSyncExternalStoreExports;
+const useAffectedDebugValue = (state, affected) => {
+  const pathList = useRef();
+  useEffect(() => {
+    pathList.current = affectedToPathList(state, affected, true);
+  });
+  useDebugValue(pathList.current);
+};
+
+// This is required only for performance.
+// Ref: https://github.com/pmndrs/valtio/issues/519
+const targetCache = new WeakMap();
+/**
+ * useSnapshot
+ *
+ * Create a local snapshot that catches changes. This hook actually returns a wrapped snapshot in a proxy for
+ * render optimization instead of a plain object compared to `snapshot()` method.
+ * Rule of thumb: read from snapshots, mutate the source.
+ * The component will only re-render when the parts of the state you access have changed, it is render-optimized.
+ *
+ * @example A
+ * function Counter() {
+ *   const snap = useSnapshot(state)
+ *   return (
+ *     <div>
+ *       {snap.count}
+ *       <button onClick={() => ++state.count}>+1</button>
+ *     </div>
+ *   )
+ * }
+ *
+ * [Notes]
+ * Every object inside your proxy also becomes a proxy (if you don't use "ref"), so you can also use them to create
+ * the local snapshot as seen on example B.
+ *
+ * @example B
+ * function ProfileName() {
+ *   const snap = useSnapshot(state.profile)
+ *   return (
+ *     <div>
+ *       {snap.name}
+ *     </div>
+ *   )
+ * }
+ *
+ * Beware that you still can replace the child proxy with something else so it will break your snapshot. You can see
+ * above what happens with the original proxy when you replace the child proxy.
+ *
+ * > console.log(state)
+ * { profile: { name: "valtio" } }
+ * > childState = state.profile
+ * > console.log(childState)
+ * { name: "valtio" }
+ * > state.profile.name = "react"
+ * > console.log(childState)
+ * { name: "react" }
+ * > state.profile = { name: "new name" }
+ * > console.log(childState)
+ * { name: "react" }
+ * > console.log(state)
+ * { profile: { name: "new name" } }
+ *
+ * `useSnapshot()` depends on the original reference of the child proxy so if you replace it with a new one, the component
+ * that is subscribed to the old proxy won't receive new updates because it is still subscribed to the old one.
+ *
+ * In this case we recommend the example C or D. On both examples you don't need to worry with re-render,
+ * because it is render-optimized.
+ *
+ * @example C
+ * const snap = useSnapshot(state)
+ * return (
+ *   <div>
+ *     {snap.profile.name}
+ *   </div>
+ * )
+ *
+ * @example D
+ * const { profile } = useSnapshot(state)
+ * return (
+ *   <div>
+ *     {profile.name}
+ *   </div>
+ * )
+ */
+export function useSnapshot(proxyObject, options) {
+  const notifyInSync = options == null ? void 0 : options.sync;
+  const lastSnapshot = useRef();
+  const lastAffected = useRef();
+  let inRender = true;
+  const currSnapshot = useSyncExternalStore(useCallback(callback => {
+    const unsub = subscribe(proxyObject, callback, notifyInSync);
+    callback(); // Note: do we really need this?
+    return unsub;
+  }, [proxyObject, notifyInSync]), () => {
+    const nextSnapshot = snapshot(proxyObject, React.use);
+    try {
+      if (!inRender && lastSnapshot.current && lastAffected.current && !isChanged(lastSnapshot.current, nextSnapshot, lastAffected.current, new WeakMap())) {
+        // not changed
+        return lastSnapshot.current;
+      }
+    } catch (e) {
+      // ignore if a promise or something is thrown
+    }
+    return nextSnapshot;
+  }, () => snapshot(proxyObject, React.use));
+  inRender = false;
+  const currAffected = new WeakMap();
+  useEffect(() => {
+    lastSnapshot.current = currSnapshot;
+    lastAffected.current = currAffected;
+  });
+  // if (import.meta.env?.MODE !== 'production') {
+  //   // eslint-disable-next-line react-hooks/rules-of-hooks
+  //   useAffectedDebugValue(currSnapshot, currAffected)
+  // }
+  const proxyCache = useMemo(() => new WeakMap(), []); // per-hook proxyCache
+  return createProxyToCompare(currSnapshot, currAffected, proxyCache, targetCache);
+}

package/useSnapshot/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/useSnapshot/index.js",
+  "types": "./index.d.ts"
+}

package/vendor/hooks.d.ts

@@ -1,6 +1,5 @@
 import { VendorActions, VendorState } from '@frontegg/redux-store';
 export declare type VendorStateMapper<S> = (state: VendorState) => S;
-export declare type StateHookFunction<T> = (() => T) & (<S extends object>(mapper: (state: T) => S) => S);
 export declare function useVendorState(): VendorState;
 export declare function useVendorState<S>(stateMapper: VendorStateMapper<S>): S;
 export declare const useVendorActions: () => VendorActions;

package/vendor/hooks.js

@@ -1,12 +1,14 @@
-import { useMemo } from 'react';
-import { bindActionCreators, vendorActions, vendorStoreName } from '@frontegg/redux-store';
-import { shallowEqual } from 'react-redux';
-import { useSelector, useDispatch } from '../FronteggStoreContext';
+import { useStore } from '../FronteggStoreContext';
+import { useSnapshot } from '../useSnapshot';
+
+// TODO: remove useless stateMapper, valtio already does this
+
 const defaultMapper = state => state;
+// @deprecated use useVendorState() instead
 export function useVendorState(stateMapper = defaultMapper) {
-  return useSelector(state => stateMapper(state[vendorStoreName]), shallowEqual);
+  const state = useStore().store.vendor;
+  return stateMapper(useSnapshot(state));
 }
 export const useVendorActions = () => {
-  const dispatch = useDispatch();
-  return useMemo(() => bindActionCreators(vendorActions, dispatch), [vendorActions]);
+  return useStore().stateActions.vendor;
 };

package/auth/MSP/allAccounts.js

@@ -1,15 +0,0 @@
-import { allAccountsActions, allAccountsReducers, allAccountsDialogsReducers } from '@frontegg/redux-store';
-import { reducerActionsGenerator, stateHookGenerator } from '../hooks';
-const defaultMapper = state => state;
-export function useAllAccountsState(stateMapper = defaultMapper) {
-  return stateHookGenerator(stateMapper, 'allAccountsState');
-}
-export const useAllAccountsActions = () => reducerActionsGenerator(allAccountsActions, allAccountsReducers);
-
-//dialogs
-
-const defaultDialogsMapper = state => state;
-export function useAllAccountsDialogsState(stateMapper = defaultDialogsMapper) {
-  return stateHookGenerator(stateMapper, 'allAccountsDialogsState');
-}
-export const useAllAccountsDialogsActions = () => reducerActionsGenerator({}, allAccountsDialogsReducers);

package/node/auth/MSP/allAccounts.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAllAccountsDialogsActions = exports.useAllAccountsActions = void 0;
-exports.useAllAccountsDialogsState = useAllAccountsDialogsState;
-exports.useAllAccountsState = useAllAccountsState;
-var _reduxStore = require("@frontegg/redux-store");
-var _hooks = require("../hooks");
-const defaultMapper = state => state;
-function useAllAccountsState(stateMapper = defaultMapper) {
-  return (0, _hooks.stateHookGenerator)(stateMapper, 'allAccountsState');
-}
-const useAllAccountsActions = () => (0, _hooks.reducerActionsGenerator)(_reduxStore.allAccountsActions, _reduxStore.allAccountsReducers);
-
-//dialogs
-exports.useAllAccountsActions = useAllAccountsActions;
-const defaultDialogsMapper = state => state;
-function useAllAccountsDialogsState(stateMapper = defaultDialogsMapper) {
-  return (0, _hooks.stateHookGenerator)(stateMapper, 'allAccountsDialogsState');
-}
-const useAllAccountsDialogsActions = () => (0, _hooks.reducerActionsGenerator)({}, _reduxStore.allAccountsDialogsReducers);
-exports.useAllAccountsDialogsActions = useAllAccountsDialogsActions;