@infinite-table/infinite-react 0.4.12 → 0.5.0

package/src/components/hooks/useComponentState/index.tsx

@@ -0,0 +1,562 @@
+import * as React from 'react';
+import {
+  useReducer,
+  createContext,
+  useMemo,
+  useEffect,
+  useState,
+  useRef,
+  useLayoutEffect,
+} from 'react';
+
+import { dbg } from '../../../utils/debug';
+
+import { proxyFn } from '../../../utils/proxyFnCall';
+import { toUpperFirst } from '../../../utils/toUpperFirst';
+
+import { isControlled } from '../../utils/isControlled';
+import { useEffectOnce } from '../useEffectOnceWithProperUnmount';
+import { useLatest } from '../useLatest';
+import { usePrevious } from '../usePrevious';
+import {
+  ComponentInterceptedActions,
+  ComponentMappedCallbacks,
+  ComponentStateActions,
+  ComponentStateContext,
+  ComponentStateGeneratedActions,
+} from './types';
+
+export const notifyChange = (
+  props: any,
+  callbackPropName: string,
+  values: any[],
+) => {
+  const callbackProp = props[callbackPropName] as Function;
+
+  if (typeof callbackProp === 'function') {
+    callbackProp(...values);
+  }
+};
+
+const debug = dbg('rerender');
+
+let ComponentContext: any;
+
+export function getComponentStateContext<T>(): React.Context<T> {
+  if (ComponentContext as React.Context<T>) {
+    return ComponentContext;
+  }
+
+  return (ComponentContext = createContext<T>(null as any as T));
+}
+
+function getReducerGeneratedActions<T_STATE, T_PROPS>(
+  dispatch: React.Dispatch<any>,
+  getState: () => T_STATE,
+  getProps: () => T_PROPS,
+  propsToForward: ForwardPropsToStateFnResult<T_PROPS, T_STATE>,
+  allowedControlledPropOverrides?: Record<keyof T_PROPS, boolean>,
+  interceptedActions?: ComponentInterceptedActions<T_STATE>,
+  mappedCallbacks?: ComponentMappedCallbacks<T_STATE>,
+): ComponentStateGeneratedActions<T_STATE> {
+  const state = getState();
+  //@ts-ignore
+  return Object.keys(state).reduce((actions, stateKey) => {
+    const key = stateKey as any as keyof T_STATE;
+
+    const setter = (value: T_STATE[typeof key]) => {
+      const props = getProps();
+      const state = getState();
+      const currentValue = state[key];
+      if (currentValue === value) {
+        // #samevaluecheckfailswhennotflushed
+        // early exit, as no change detected - this works if state updates are flushed, but could fail us when state updates are batched
+        // as we could discard a valid update, since the last/previous value could have not been flushed yet
+        // eg: in DataSource.useLoadData we set actions.loading = true, but this is not written to the state right away but is batched
+        // so if on the same tick we do actions.loading = false, this will be discarded, as the state is still loading: false as the above/previous actions was batched and hasn't been applied
+        //
+        // so in order to avoid the above scenario, simply allow same value updates to be applied
+        // return;
+        // we skip this return, as starting with React 18 we have batched updates
+        // so if we return we could be discarding a valid update, since the last/previous value could not have been flushed yet
+        // so this current value could be the same as the old value, but different from the value that was not yet flushed
+        // and therefore the current value to be set could be a valid new value
+      }
+
+      let notifyTheChange = true;
+
+      if (interceptedActions && typeof interceptedActions[key] === 'function') {
+        if (interceptedActions[key]!(value, { actions, state }) === false) {
+          notifyTheChange = false;
+        }
+      }
+
+      // it's important that we notify with the value that we receive
+      // directly from the setter (see continuation below)
+      if (notifyTheChange) {
+        let callbackParams = [value];
+        let callbackName = `on${toUpperFirst(stateKey)}Change` as string;
+
+        if (mappedCallbacks && mappedCallbacks[key]) {
+          const res = mappedCallbacks[key](value, state);
+          callbackName = res.callbackName || callbackName;
+          callbackParams = res.callbackParams;
+        }
+
+        notifyChange(props, callbackName, callbackParams);
+      }
+
+      //@ts-ignore
+      const forwardFn = propsToForward[key];
+
+      if (typeof forwardFn === 'function') {
+        // and not with the modified value from the forwardFn
+        value = forwardFn(value);
+      }
+
+      const allowControlled =
+        !!allowedControlledPropOverrides?.[key as any as keyof T_PROPS];
+
+      if (isControlled(stateKey as keyof T_PROPS, props) && !allowControlled) {
+        return;
+      }
+
+      dispatch({
+        payload: {
+          updatedProps: null,
+          mappedState: {
+            [stateKey]: value,
+          },
+        },
+      });
+    };
+
+    Object.defineProperty(actions, stateKey, {
+      set: setter,
+    });
+
+    return actions;
+  }, {} as ComponentStateGeneratedActions<T_STATE>);
+}
+
+export type ForwardPropsToStateFnResult<TYPE_PROPS, TYPE_RESULT> = {
+  [propName in keyof TYPE_PROPS & keyof TYPE_RESULT]:
+    | 1
+    | ((value: TYPE_PROPS[propName]) => TYPE_RESULT[propName]);
+};
+
+function forwardProps<T_PROPS, T_RESULT>(
+  propsToForward: Partial<ForwardPropsToStateFnResult<T_PROPS, T_RESULT>>,
+  props: T_PROPS,
+): T_RESULT {
+  const mappedState = {} as T_RESULT;
+  for (let k in propsToForward)
+    if (propsToForward.hasOwnProperty(k)) {
+      const forwardFn = propsToForward[k as keyof typeof propsToForward];
+      let propValue = isControlled(k as keyof T_PROPS, props)
+        ? props[k as keyof T_PROPS]
+        : props[`default${toUpperFirst(k)}` as keyof T_PROPS];
+
+      if (typeof forwardFn === 'function') {
+        //@ts-ignore
+        propValue = forwardFn(propValue);
+      }
+      //@ts-ignore
+      mappedState[k as any as keyof T_RESULT] = propValue;
+    }
+
+  return mappedState;
+}
+
+type ComponentStateRootConfig<
+  T_PROPS,
+  COMPONENT_MAPPED_STATE,
+  COMPONENT_SETUP_STATE = {},
+  COMPONENT_DERIVED_STATE = {},
+  T_ACTIONS = {},
+  T_PARENT_STATE = {},
+> = {
+  debugName?: string;
+  initSetupState?: () => COMPONENT_SETUP_STATE;
+
+  layoutEffect?: boolean;
+
+  forwardProps?: (
+    setupState: COMPONENT_SETUP_STATE,
+  ) => ForwardPropsToStateFnResult<T_PROPS, COMPONENT_MAPPED_STATE>;
+  allowedControlledPropOverrides?: Record<keyof T_PROPS, true>;
+  interceptActions?: ComponentInterceptedActions<
+    COMPONENT_MAPPED_STATE & COMPONENT_DERIVED_STATE & COMPONENT_SETUP_STATE
+  >;
+  mappedCallbacks?: ComponentMappedCallbacks<
+    COMPONENT_MAPPED_STATE & COMPONENT_DERIVED_STATE & COMPONENT_SETUP_STATE
+  >;
+  onPropChange?: (
+    params: {
+      name: keyof T_PROPS;
+      oldValue: any;
+      newValue: any;
+    },
+    props: T_PROPS,
+    actions: ComponentStateActions<
+      COMPONENT_MAPPED_STATE & COMPONENT_DERIVED_STATE & COMPONENT_SETUP_STATE
+    >,
+  ) => void;
+  mapPropsToState?: (params: {
+    props: T_PROPS;
+    state: COMPONENT_MAPPED_STATE &
+      COMPONENT_SETUP_STATE &
+      Partial<COMPONENT_DERIVED_STATE>;
+    oldState:
+      | null
+      | (COMPONENT_MAPPED_STATE &
+          COMPONENT_SETUP_STATE &
+          Partial<COMPONENT_DERIVED_STATE>);
+    parentState: T_PARENT_STATE | null;
+  }) => COMPONENT_DERIVED_STATE;
+  concludeReducer?: (params: {
+    previousState: COMPONENT_MAPPED_STATE &
+      COMPONENT_SETUP_STATE &
+      COMPONENT_DERIVED_STATE;
+    state: COMPONENT_MAPPED_STATE &
+      COMPONENT_SETUP_STATE &
+      COMPONENT_DERIVED_STATE;
+    updatedProps: Partial<T_PROPS> | null;
+    parentState: T_PARENT_STATE | null;
+  }) => COMPONENT_MAPPED_STATE &
+    COMPONENT_SETUP_STATE &
+    COMPONENT_DERIVED_STATE;
+  getReducerActions?: (dispatch: React.Dispatch<any>) => T_ACTIONS;
+
+  getParentState?: () => T_PARENT_STATE;
+
+  cleanup?: (
+    state: COMPONENT_MAPPED_STATE &
+      COMPONENT_SETUP_STATE &
+      COMPONENT_DERIVED_STATE,
+  ) => void;
+
+  onControlledPropertyChange?: (
+    name: string,
+    newValue: any,
+    oldValue: any,
+  ) => void | ((value: any, oldValue: any) => any);
+};
+
+export function getComponentStateRoot<
+  T_PROPS,
+  COMPONENT_MAPPED_STATE extends object,
+  COMPONENT_SETUP_STATE extends object = {},
+  COMPONENT_DERIVED_STATE extends object = {},
+  T_ACTIONS = {},
+  T_PARENT_STATE = {},
+>(
+  config: ComponentStateRootConfig<
+    T_PROPS,
+    COMPONENT_MAPPED_STATE,
+    COMPONENT_SETUP_STATE,
+    COMPONENT_DERIVED_STATE,
+    T_ACTIONS,
+    T_PARENT_STATE
+  >,
+) {
+  /**
+   * since config is passed outside the cmp, we can skip it inside useMemo deps list
+   */
+  return React.memo(function ComponentStateRoot(
+    props: T_PROPS & { children: React.ReactNode },
+  ) {
+    const [initialSetupState] = useState<COMPONENT_SETUP_STATE>(() => {
+      return config.initSetupState
+        ? config.initSetupState()
+        : ({} as COMPONENT_SETUP_STATE);
+    });
+    const propsToStateSetRef = useRef<Set<string>>(new Set());
+    const propsToForward = useMemo<
+      Partial<ForwardPropsToStateFnResult<T_PROPS, COMPONENT_MAPPED_STATE>>
+    >(
+      () => (config.forwardProps ? config.forwardProps(initialSetupState) : {}),
+      [initialSetupState],
+    );
+
+    type COMPONENT_STATE = COMPONENT_MAPPED_STATE &
+      COMPONENT_DERIVED_STATE &
+      COMPONENT_SETUP_STATE;
+
+    const parentState = config.getParentState?.() ?? null;
+    const getParentState = useLatest(parentState);
+
+    function initStateOnce() {
+      // STEP 1: call setupState
+
+      let mappedState = {} as COMPONENT_MAPPED_STATE;
+
+      if (propsToForward) {
+        mappedState = forwardProps<T_PROPS, COMPONENT_MAPPED_STATE>(
+          propsToForward,
+          props,
+        );
+      }
+
+      const state = { ...initialSetupState, ...mappedState };
+
+      if (config.mapPropsToState) {
+        const { fn: mapPropsToState, propertyReads } = proxyFn(
+          config.mapPropsToState,
+          {
+            getProxyTargetFromArgs: (initialArg) => initialArg.props,
+            putProxyToArgs: (props: T_PROPS, initialArg) => {
+              return [{ ...initialArg, props }];
+            },
+          },
+        );
+        const stateFromProps = mapPropsToState({
+          props,
+          state,
+          oldState: null,
+          parentState,
+          // getState: getComponentState,
+        });
+
+        propsToStateSetRef.current = new Set([
+          ...propsToStateSetRef.current,
+          ...propertyReads,
+        ]);
+        return {
+          ...state,
+          ...stateFromProps,
+        };
+      }
+
+      return state as COMPONENT_MAPPED_STATE &
+        COMPONENT_DERIVED_STATE &
+        COMPONENT_SETUP_STATE;
+    }
+    const [wholeState] = useState<COMPONENT_STATE>(initStateOnce);
+
+    const getProps = useLatest(props);
+
+    const theReducer: React.Reducer<COMPONENT_STATE, any> = (
+      previousState: COMPONENT_STATE,
+      action: any,
+    ) => {
+      if (action.type === 'REPLACE_STATE') {
+        return action.payload;
+      }
+
+      const parentState = getParentState?.() ?? null;
+      const mappedState: Partial<COMPONENT_MAPPED_STATE> | null =
+        action.payload.mappedState;
+      const updatedProps: Partial<T_PROPS> | null =
+        action.payload.updatedPropsToState;
+
+      const newState: COMPONENT_STATE = Object.assign({}, previousState);
+
+      if (mappedState) {
+        Object.assign(newState, mappedState);
+      }
+
+      if (config.mapPropsToState) {
+        const { fn: mapPropsToState, propertyReads } = proxyFn(
+          config.mapPropsToState,
+          {
+            getProxyTargetFromArgs: (initialArg) => initialArg.props,
+            putProxyToArgs: (props: T_PROPS, initialArg) => {
+              return [{ ...initialArg, props }];
+            },
+          },
+        );
+
+        const stateFromProps = mapPropsToState({
+          props: getProps(),
+          state: newState,
+          oldState: previousState,
+          parentState,
+          // getState: getComponentState
+        });
+
+        propsToStateSetRef.current = new Set([
+          ...propsToStateSetRef.current,
+          ...propertyReads,
+        ]);
+
+        Object.assign(newState, stateFromProps);
+      }
+
+      const result = config.concludeReducer
+        ? config.concludeReducer({
+            previousState,
+            state: newState,
+            updatedProps,
+            parentState,
+          })
+        : newState;
+
+      return result;
+    };
+
+    const [state, dispatch] = useReducer<React.Reducer<COMPONENT_STATE, any>>(
+      theReducer,
+      wholeState,
+    );
+
+    const getComponentState = useLatest(state);
+
+    type ACTIONS_TYPE = ComponentStateActions<COMPONENT_STATE>;
+
+    const { allowedControlledPropOverrides } = config;
+
+    const actions = useMemo(() => {
+      const generatedActions = getReducerGeneratedActions<
+        COMPONENT_STATE,
+        T_PROPS
+      >(
+        dispatch,
+        getComponentState,
+        getProps,
+        propsToForward as ForwardPropsToStateFnResult<T_PROPS, COMPONENT_STATE>,
+        allowedControlledPropOverrides,
+        config.interceptActions,
+        config.mappedCallbacks,
+      );
+
+      return generatedActions;
+    }, [
+      dispatch,
+      propsToForward,
+      allowedControlledPropOverrides,
+    ]) as ACTIONS_TYPE;
+
+    const Context =
+      getComponentStateContext<
+        ComponentStateContext<COMPONENT_STATE, ACTIONS_TYPE>
+      >();
+
+    const contextValue = useMemo(
+      () => ({
+        componentState: state,
+        componentActions: actions,
+        getComponentState,
+      }),
+      [state, actions, getComponentState],
+    );
+
+    const prevProps = usePrevious(props);
+
+    const effectFn = config.layoutEffect ? useLayoutEffect : useEffect;
+    effectFn(() => {
+      const currentProps = props;
+      const newMappedState: Partial<COMPONENT_MAPPED_STATE> = {};
+      let newMappedStateCount = 0;
+
+      const updatedPropsToState: Partial<T_PROPS> = {};
+      let updatedPropsToStateCount = 0;
+
+      type UPDATED_PROPS = {
+        [key in keyof T_PROPS]?: {
+          newValue: T_PROPS[key];
+          oldValue: T_PROPS[key];
+        };
+      };
+      const rawUpdatedProps: UPDATED_PROPS = {};
+
+      for (var k in props) {
+        const key = k as string as keyof T_PROPS;
+        const oldValue = prevProps[key];
+        const newValue = currentProps[key];
+
+        if (key === 'children') {
+          continue;
+        }
+        if (oldValue === newValue) {
+          continue;
+        }
+        rawUpdatedProps[key] = { newValue, oldValue };
+
+        if (isControlled(key, props) || isControlled(key, prevProps)) {
+          if (propsToForward.hasOwnProperty(k)) {
+            let valueToSet = newValue;
+            const forwardFn = propsToForward[k as keyof typeof propsToForward];
+            if (typeof forwardFn === 'function') {
+              //@ts-ignore
+              valueToSet = forwardFn(newValue);
+            }
+            //@ts-ignore
+            if (state[key] !== valueToSet) {
+              //@ts-ignore
+              newMappedState[key] = valueToSet;
+              newMappedStateCount++;
+            }
+
+            // or even if there is not, but props from propsToStateSet have changed
+          } else if (propsToStateSetRef.current.has(k)) {
+            updatedPropsToState[key] = currentProps[key];
+            updatedPropsToStateCount++;
+          }
+        }
+      }
+
+      if (updatedPropsToStateCount > 0 || newMappedStateCount > 0) {
+        debug(
+          'Triggered by new values for the following props',
+          ...[
+            ...Object.keys(newMappedState ?? {}),
+            ...Object.keys(updatedPropsToState ?? {}),
+          ],
+        );
+        const action = {
+          payload: {
+            mappedState: newMappedStateCount ? newMappedState : null,
+            updatedPropsToState: updatedPropsToStateCount
+              ? updatedPropsToState
+              : null,
+          },
+        };
+
+        // const newState = theReducer(state, action);
+
+        dispatch(action);
+
+        if (config.onPropChange) {
+          for (var prop in rawUpdatedProps)
+            if (rawUpdatedProps.hasOwnProperty(prop)) {
+              const { newValue, oldValue } = rawUpdatedProps[prop]!;
+              config.onPropChange(
+                { name: prop, newValue, oldValue },
+                props,
+                actions,
+              );
+            }
+        }
+        // config.onPropChange?.(
+        //   { name: key, oldValue, newValue },
+
+        //   actions as ACTIONS_TYPE,
+        // );
+        // dispatch({
+        //   type: 'REPLACE_STATE',
+        //   payload: newState,
+        // });
+      }
+    });
+
+    useEffectOnce(() => {
+      return () => {
+        config.cleanup?.(getComponentState());
+      };
+    });
+
+    return (
+      <Context.Provider value={contextValue}>{props.children}</Context.Provider>
+    );
+  });
+}
+
+export function useComponentState<COMPONENT_STATE>() {
+  type ACTIONS_TYPE = ComponentStateActions<COMPONENT_STATE>;
+  const Context =
+    getComponentStateContext<
+      ComponentStateContext<COMPONENT_STATE, ACTIONS_TYPE>
+    >();
+  return React.useContext(Context);
+}

package/src/components/hooks/useComponentState/types.ts

@@ -0,0 +1,32 @@
+export type ComponentStateContext<T_STATE, T_ACTIONS> = {
+  getComponentState: () => T_STATE;
+  componentState: T_STATE;
+  componentActions: T_ACTIONS;
+};
+
+export type ComponentStateGeneratedActions<T_STATE> = {
+  [k in keyof T_STATE]: T_STATE[k] | React.SetStateAction<T_STATE[k]>;
+};
+
+export type ComponentInterceptedActions<T_STATE> = {
+  [k in keyof T_STATE]?: (
+    value: T_STATE[k],
+    {
+      actions,
+      state,
+    }: { actions: ComponentStateGeneratedActions<T_STATE>; state: T_STATE },
+  ) => void | boolean;
+};
+
+export type ComponentMappedCallbacks<T_STATE> = {
+  [k in keyof T_STATE]: (
+    value: T_STATE[k],
+    state: T_STATE,
+  ) => {
+    callbackName: string;
+    callbackParams: any[];
+  };
+};
+
+export type ComponentStateActions<T_STATE> =
+  ComponentStateGeneratedActions<T_STATE>;

package/src/components/hooks/useEffectOnceWithProperUnmount.ts

@@ -0,0 +1,33 @@
+import { EffectCallback, useCallback, useEffect, useRef } from 'react';
+import { useRerender } from './useRerender';
+
+export const useEffectOnce = (effectCallback: EffectCallback) => {
+  const effectFunction = useCallback<EffectCallback>(effectCallback, []);
+  const effectCalled = useRef(false);
+  const componentRendered = useRef(false);
+  const destroyFn = useRef<void | VoidFunction>();
+  const [_, rerender] = useRerender();
+
+  if (effectCalled.current) {
+    componentRendered.current = true;
+  }
+
+  useEffect(() => {
+    if (!effectCalled.current) {
+      destroyFn.current = effectFunction;
+      effectCalled.current = true;
+    }
+
+    rerender();
+
+    return () => {
+      if (!componentRendered.current) {
+        return;
+      }
+
+      if (destroyFn.current) {
+        destroyFn.current();
+      }
+    };
+  }, []);
+};

package/src/components/hooks/useEffectWithChanges.ts

@@ -0,0 +1,56 @@
+import { EffectCallback, useEffect, useRef } from 'react';
+
+export function useEffectWithChanges<T>(
+  fn: (
+    changes: Record<keyof T, any>,
+    prevValues: Record<string, any>,
+  ) => void | (() => void),
+  deps: Record<keyof T, any>,
+) {
+  const prevRef = useRef({});
+
+  const oldValuesRef = useRef<Record<string, any>>({});
+  const oldValues: Record<string, any> = oldValuesRef.current;
+
+  const changesRef = useRef<Record<keyof T, any>>({} as Record<keyof T, any>);
+  const changes: Record<string, any> = changesRef.current;
+
+  const useEffectDeps: any[] = [];
+
+  for (const k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      if (deps[k] !== (prevRef.current as any)[k]) {
+        changes[k] = deps[k];
+        oldValues[k] = (prevRef.current as any)[k];
+      }
+      useEffectDeps.push(deps[k]);
+    }
+  }
+
+  prevRef.current = deps;
+
+  useEffect(() => {
+    const changes = changesRef.current;
+
+    const result = fn(changes, oldValues);
+
+    changesRef.current = {} as Record<keyof T, any>;
+    oldValuesRef.current = {};
+    return result;
+  }, useEffectDeps);
+}
+
+export function useEffectWithObject(
+  fn: EffectCallback,
+  deps: Record<string, any>,
+) {
+  const useEffectDeps: any[] = [];
+
+  for (const k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      useEffectDeps.push(deps[k]);
+    }
+  }
+
+  useEffect(fn, useEffectDeps);
+}

package/src/components/hooks/useImmutableRef.ts

@@ -0,0 +1,7 @@
+import { useRef } from 'react';
+
+const useImmutableRef = <T>(value: T) => {
+  return useRef<T>(value).current;
+};
+
+export default useImmutableRef;