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

package/subscriptions/hooks.js

@@ -1,77 +1,109 @@
-import { bindActionCreators, subscriptionActions, subscriptionsStoreName } from '@frontegg/redux-store';
-import { useDispatch, useSelector } from '../FronteggStoreContext';
-import { shallowEqual } from 'react-redux';
-import { useMemo } from 'react';
-function getSubscriptionState(state) {
-  return state[subscriptionsStoreName];
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useStore } from '../FronteggStoreContext';
+import { useSnapshot } from '../useSnapshot';
+function getSubscriptionsState() {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useStore().store.subscriptions;
 }
 export const usePaymentProvider = () => {
-  return useSelector(state => getSubscriptionState(state).config, shallowEqual);
+  const {
+    config
+  } = getSubscriptionsState();
+  return useSnapshot(config);
 };
 export const usePaymentProviderActions = () => {
-  const dispatch = useDispatch();
-  return useMemo(() => bindActionCreators(subscriptionActions.config, dispatch), [dispatch]);
+  return useStore().stateActions.subscriptions.config;
 };
 export const usePlans = () => {
-  return useSelector(state => getSubscriptionState(state).plans, shallowEqual);
+  const {
+    plans
+  } = getSubscriptionsState();
+  return useSnapshot(plans);
 };
 export const usePlansActions = () => {
-  const dispatch = useDispatch();
-  return useMemo(() => bindActionCreators(subscriptionActions.plans, dispatch), [dispatch]);
+  return useStore().stateActions.subscriptions.plans;
 };
 export const useCheckout = () => {
-  return useSelector(state => getSubscriptionState(state).checkout, shallowEqual);
+  const {
+    checkout
+  } = getSubscriptionsState();
+  return useSnapshot(checkout);
 };
 export const useCheckoutActions = () => {
-  const dispatch = useDispatch();
-  return useMemo(() => bindActionCreators(subscriptionActions.checkout, dispatch), [dispatch]);
+  return useStore().stateActions.subscriptions.checkout;
 };
 const useBillingActions = billingKey => {
-  const dispatch = useDispatch();
-  return useMemo(() => bindActionCreators(subscriptionActions.billing[billingKey], dispatch), [billingKey, dispatch]);
-};
-export const useBillingInformation = () => useSelector(state => getSubscriptionState(state).billing.information, shallowEqual);
-export const useBillingInformationActions = () => useBillingActions('information');
-export const usePaymentMethod = () => useSelector(state => getSubscriptionState(state).billing.paymentMethod, shallowEqual);
-export const usePaymentMethodActions = () => useBillingActions('paymentMethod');
-export const useInvoices = () => useSelector(state => getSubscriptionState(state).billing.invoices, shallowEqual);
-export const useInvoicesActions = () => useBillingActions('invoices');
-export const useStripeState = () => {
-  return useSelector(state => getSubscriptionState(state).stripe, shallowEqual);
+  return useStore().stateActions.subscriptions.billing[billingKey];
 };
-export const useStripeActions = () => {
-  const dispatch = useDispatch();
-  return useMemo(() => bindActionCreators(subscriptionActions.stripe, dispatch), [dispatch]);
+export const useBillingInformation = () => {
+  const {
+    billing
+  } = getSubscriptionsState();
+  return useSnapshot(billing.information);
+};
+export const useBillingInformationActions = () => {
+  return useBillingActions('information');
+};
+export const usePaymentMethod = () => {
+  const {
+    billing
+  } = getSubscriptionsState();
+  return useSnapshot(billing.paymentMethod);
+};
+export const usePaymentMethodActions = () => {
+  return useBillingActions('paymentMethod');
+};
+export const useInvoices = () => {
+  const {
+    billing
+  } = getSubscriptionsState();
+  return useSnapshot(billing.invoices);
+};
+export const useInvoicesActions = () => {
+  return useBillingActions('invoices');
 };
 export const useSubscriptionCancellation = () => {
-  return useSelector(state => getSubscriptionState(state).billing.subscription.cancellation, shallowEqual);
+  const {
+    billing
+  } = getSubscriptionsState();
+  const {
+    cancellation
+  } = useSnapshot(billing.subscription);
+  return cancellation;
 };
 export const useSubscriptionRenewal = () => {
-  return useSelector(state => getSubscriptionState(state).billing.subscription.renewal, shallowEqual);
+  const {
+    billing
+  } = getSubscriptionsState();
+  const {
+    renewal
+  } = useSnapshot(billing.subscription);
+  return renewal;
 };
 export const useSubscription = () => {
-  return useSelector(state => {
-    const {
-      billing: {
-        subscription
-      }
-    } = getSubscriptionState(state);
-    return subscription;
-  }, shallowEqual);
+  const {
+    billing
+  } = getSubscriptionsState();
+  return useSnapshot(billing.subscription);
 };
 export const useSubscriptionActions = () => {
-  const dispatch = useDispatch();
-  return useMemo(() => bindActionCreators(subscriptionActions.billing.subscription, dispatch), [dispatch]);
+  const actions = useStore().stateActions.subscriptions.billing.subscription;
+  return _extends({}, actions, {
+    load: actions.loadSubscription
+  });
+};
+export const useStripeState = () => {
+  const {
+    stripe
+  } = getSubscriptionsState();
+  return useSnapshot(stripe);
+};
+export const useStripeActions = () => {
+  return useStore().stateActions.subscriptions.stripe;
 };
 export const useVendorPublicConfig = () => {
-  return useSelector(state => {
-    const {
-      vendorPublicConfig
-    } = getSubscriptionState(state);
-    return vendorPublicConfig;
-  }, shallowEqual);
+  return useSnapshot(useStore().store.subscriptions.vendorPublicConfig);
 };
 export const useVendorPublicConfigActions = () => {
-  const dispatch = useDispatch();
-  return useMemo(() => bindActionCreators(subscriptionActions.vendorPublicConfig, dispatch), [dispatch]);
+  return useStore().stateActions.subscriptions.vendorPublicConfig;
 };

package/tests/hooks.tsc-test.js

@@ -0,0 +1,338 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+// noinspection JSUnusedLocalSymbols
+
+import { useAcceptInvitationActions, useAcceptInvitationState, useActivateAccountActions, useActivateAccountState, useApiTokensActions, useApiTokensState, useAuditsActions, useAuditsState, useAuth, useAuthActions, useConnectivityActions, useConnectivityState, useForgotPasswordActions, useForgotPasswordState, useLoginActions, useLoginState, useMfaActions, useMfaState, useProfileActions, useProfileState, useResetPhoneNumberActions, useResetPhoneNumberState, useRolesActions, useRolesState, useSecurityPolicyActions, useSecurityPolicyState, useSessionsActions, useSessionsPolicyActions, useSessionsPolicyState, useSessionsState, useSignUpActions, useSignUpState, useSocialLoginActions, useSocialLoginState, useSSOActions, useSSOState, useTenantsActions, useTenantsState, useVendorActions, useVendorState } from '../';
+
+/**
+ * useAuth hook typescript tests
+ */
+{
+  const {
+    isAuthenticated,
+    isLoading
+  } = useAuth();
+  const isLoadingDirect = useAuth(state => state.isLoading);
+  isLoadingDirect.valueOf();
+  const {
+    user
+  } = useAuth(state => ({
+    user: state.user
+  }));
+  const {
+    loginUrl
+  } = useAuth(state => state.routes);
+  const {
+    loadProfile,
+    setLoginState
+  } = useAuthActions();
+}
+
+/**
+ * useAcceptInvitationState hook typescript tests
+ */
+{
+  const {
+    step
+  } = useAcceptInvitationState();
+  const errorDirect = useAcceptInvitationState(state => state.error);
+  errorDirect == null ? void 0 : errorDirect.substring(0);
+  const {
+    acceptInvitation
+  } = useAcceptInvitationActions();
+}
+
+/**
+ * useActivateAccountState hook typescript tests
+ */
+{
+  const {
+    step
+  } = useActivateAccountState();
+  const loadingDirect = useActivateAccountState(state => state.loading);
+  loadingDirect.valueOf();
+  const {
+    activateAccount
+  } = useActivateAccountActions();
+}
+
+/**
+ * useApiTokensState hook typescript tests
+ */
+{
+  const {
+    roles
+  } = useApiTokensState();
+  const {
+    loaders: loadingDirect
+  } = useApiTokensState();
+  const m = loadingDirect.LOAD_API_TOKENS;
+  const {
+    loadUserApiTokens
+  } = useApiTokensActions();
+}
+
+/**
+ * useForgotPasswordState hook typescript tests
+ */
+{
+  const {
+    step
+  } = useForgotPasswordState();
+  const {
+    email: emailDirect
+  } = useForgotPasswordState();
+  emailDirect.substring(0);
+  const {
+    forgotPassword
+  } = useForgotPasswordActions();
+}
+
+/**
+ * useMfaState hook typescript tests
+ */
+{
+  const {
+    step
+  } = useMfaState();
+  const loadingDirect = useMfaState(state => state.loading);
+  loadingDirect.valueOf();
+  const {
+    enrollMfa
+  } = useMfaActions();
+}
+
+/**
+ * useLoginState hook typescript tests
+ */
+{
+  const {
+    step
+  } = useLoginState();
+  const {
+    loading: loadingDirect
+  } = useLoginState();
+  loadingDirect.valueOf();
+  const {
+    logout
+  } = useLoginActions();
+}
+
+/**
+ * useLoginState hook typescript tests
+ */
+{
+  const {
+    profile
+  } = useProfileState();
+  const {
+    loading: loadingDirect
+  } = useProfileState();
+  loadingDirect.valueOf();
+  const {
+    loadProfile
+  } = useProfileActions();
+}
+
+/**
+ * useResetPhoneNumberState hook typescript tests
+ */
+{
+  const {
+    step
+  } = useResetPhoneNumberState();
+  const {
+    loading: loadingDirect
+  } = useResetPhoneNumberState();
+  loadingDirect.valueOf();
+  const {
+    resetPhoneNumber
+  } = useResetPhoneNumberActions();
+}
+
+/**
+ * useRolesState hook typescript tests
+ */
+{
+  var _loadingDirect$loadRo;
+  const {
+    saving
+  } = useRolesState();
+  const {
+    loaders: loadingDirect
+  } = useRolesState();
+  loadingDirect == null ? void 0 : (_loadingDirect$loadRo = loadingDirect.loadRoles) == null ? void 0 : _loadingDirect$loadRo.valueOf();
+  const {
+    loadRolesAndPermissions
+  } = useRolesActions();
+}
+
+/**
+ * useSecurityPolicyState hook typescript tests
+ */
+{
+  const {
+    lockoutPolicy
+  } = useSecurityPolicyState();
+  const captchaPolicy = useSecurityPolicyState(state => state.captchaPolicy);
+  captchaPolicy.loading.valueOf();
+  const {
+    loadPublicSecurityPolicy
+  } = useSecurityPolicyActions();
+}
+
+/**
+ * useSessionsState hook typescript tests
+ */
+{
+  const {
+    sessions
+  } = useSessionsState();
+  const {
+    loading: loadingDirect
+  } = useSessionsState();
+  loadingDirect.valueOf();
+  const {
+    deleteUserSession
+  } = useSessionsActions();
+}
+
+/**
+ * useSessionsPolicyState hook typescript tests
+ */
+{
+  const {
+    configurations
+  } = useSessionsPolicyState();
+  const {
+    loading: loadingDirect
+  } = useSessionsPolicyState();
+  loadingDirect.valueOf();
+  const {
+    resetSessionsPolicyState
+  } = useSessionsPolicyActions();
+}
+
+/**
+ * useSSOState hook typescript tests
+ */
+{
+  const {
+    authorizationRoles
+  } = useSSOState();
+  const {
+    loading: loadingDirect
+  } = useSSOState();
+  loadingDirect.valueOf();
+  const {
+    loadSSOConfigurationsV2
+  } = useSSOActions();
+}
+
+/**
+ * useSignUpState hook typescript tests
+ */
+{
+  const {
+    stage
+  } = useSignUpState();
+  const loadingDirect = useSignUpState(state => state.loading);
+  loadingDirect.valueOf();
+  const {
+    setSignUpState
+  } = useSignUpActions();
+}
+
+/**
+ * useSocialLoginState hook typescript tests
+ */
+{
+  const {
+    socialLoginsConfig
+  } = useSocialLoginState();
+  const loadingDirect = useSocialLoginState(state => state.loading);
+  loadingDirect.valueOf();
+  const {
+    loadSocialLoginsConfiguration
+  } = useSocialLoginActions();
+}
+
+/**
+ * useSocialLoginState hook typescript tests
+ */
+{
+  const {
+    tenants
+  } = useTenantsState();
+  const {
+    loading: loadingDirect
+  } = useTenantsState();
+  loadingDirect.valueOf();
+  const {
+    loadTenants
+  } = useTenantsActions();
+}
+
+/**
+ * useVendorState hook typescript tests
+ */
+{
+  const {
+    loading
+  } = useVendorState();
+  const {
+    loading: isLoadingDirect
+  } = useVendorState();
+  isLoadingDirect.valueOf();
+  const {
+    whiteLabelMode
+  } = useVendorState(state => ({
+    whiteLabelMode: state.whiteLabelMode
+  }));
+  const {
+    loadVendorPublicInfo
+  } = useVendorActions();
+}
+
+/**
+ * useConnectivityState hook typescript tests
+ */
+{
+  const {
+    isLoading,
+    error
+  } = useConnectivityState();
+  const {
+    processIds
+  } = useConnectivityState();
+  processIds.map(id => id);
+  const {
+    email = []
+  } = useConnectivityState();
+  email.length;
+  const {
+    loadScope,
+    loadDataAction
+  } = useConnectivityActions();
+}
+
+/**
+ * useAuditsState hook typescript tests
+ */
+{
+  const {
+    auditLogsState
+  } = useAuditsState();
+  const {
+    columns
+  } = useAuditsState(state => state.auditsMetadataState);
+  const {
+    loading
+  } = useAuditsState(state => ({
+    loading: state.auditLogsState.loading
+  }));
+  loading.valueOf();
+  const x = columns == null ? void 0 : columns.length;
+  const {
+    loadAuditLogs
+  } = useAuditsActions();
+}

package/useSnapshot/index.d.ts

@@ -0,0 +1,78 @@
+import { Snapshot } from '@frontegg/redux-store';
+declare type Options = {
+    sync?: boolean;
+};
+/**
+ * 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 declare function useSnapshot<T extends object>(proxyObject: T, options?: Options): Snapshot<T>;
+export {};

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"
+}