feat: basic func

Author: zombieJ

docs/examples/simple.tsx

@@ -1 +1,46 @@
-export default () => 'Hello World';
+import { createContext, useContextSelector } from '@rc-component/context';
+import React from 'react';
+
+const CountContext = createContext<{
+  cnt1: number;
+  cnt2: number;
+}>();
+
+const useRenderTimes = () => {
+  const renderRef = React.useRef(0);
+  renderRef.current += 1;
+
+  return renderRef.current;
+};
+
+const MyConsumer = React.memo(({ name }: { name: any }) => {
+  const value = useContextSelector(CountContext, name);
+  const renderTimes = useRenderTimes();
+
+  return (
+    <div>
+      <label>{JSON.stringify(name)}:</label>
+      {value} ({renderTimes} times)
+    </div>
+  );
+});
+
+export default () => {
+  const [cnt1, setCnt1] = React.useState(0);
+  const [cnt2, setCnt2] = React.useState(0);
+  const renderTimes = useRenderTimes();
+
+  return (
+    <CountContext.Provider value={{ cnt1, cnt2 }}>
+      <button type="button" onClick={() => setCnt1(v => v + 1)}>
+        cnt 1: {cnt1}
+      </button>
+      <button type="button" onClick={() => setCnt2(v => v + 1)}>
+        cnt 2: {cnt2}
+      </button>
+      {renderTimes} times
+      <MyConsumer name="cnt1" />
+      <MyConsumer name="cnt2" />
+    </CountContext.Provider>
+  );
+};

package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
-    "rc-util": "^5.26.0"
+    "rc-util": "^5.27.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",

src/context.tsx

@@ -0,0 +1,122 @@
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import isEqual from 'rc-util/lib/isEqual';
+import * as React from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
+
+export type Selector<ContextProps, SelectorValue = ContextProps> = (
+  value: ContextProps,
+) => SelectorValue;
+
+export type Trigger<ContextProps> = (value: ContextProps) => void;
+
+export type Listeners<ContextProps> = Set<Trigger<ContextProps>>;
+
+export interface Context<ContextProps> {
+  getValue: () => ContextProps;
+  listeners: Listeners<ContextProps>;
+}
+
+export interface ContextSelectorProviderProps<T> {
+  value: T;
+  children?: React.ReactNode;
+}
+
+export interface SelectorContext<ContextProps> {
+  Context: React.Context<Context<ContextProps>>;
+  Provider: React.ComponentType<ContextSelectorProviderProps<ContextProps>>;
+}
+
+export function createContext<ContextProps>(
+  defaultContext?: ContextProps,
+): SelectorContext<ContextProps> {
+  const Context = React.createContext<Context<ContextProps>>(defaultContext as any);
+
+  const Provider = ({ value, children }: ContextSelectorProviderProps<ContextProps>) => {
+    const valueRef = React.useRef(value);
+    valueRef.current = value;
+
+    const [context] = React.useState<Context<ContextProps>>(() => ({
+      getValue: () => valueRef.current,
+      listeners: new Set(),
+    }));
+
+    useLayoutEffect(() => {
+      unstable_batchedUpdates(() => {
+        context.listeners.forEach(listener => {
+          listener(value);
+        });
+      });
+    }, [value]);
+
+    return <Context.Provider value={context}>{children}</Context.Provider>;
+  };
+
+  return { Context, Provider };
+}
+
+/** e.g. useSelect(userContext, user => user.name) => user.name */
+export function useContextSelector<ContextProps, SelectorValue>(
+  holder: SelectorContext<ContextProps>,
+  selector: Selector<ContextProps, SelectorValue>,
+): SelectorValue;
+
+/** e.g. useSelect(userContext, ['name', 'age']) => user { name, age } */
+export function useContextSelector<ContextProps, SelectorValue extends Partial<ContextProps>>(
+  holder: SelectorContext<ContextProps>,
+  selector: (keyof ContextProps)[],
+): SelectorValue;
+
+/** e.g. useSelect(userContext, 'name') => user.name */
+export function useContextSelector<ContextProps, PropName extends keyof ContextProps>(
+  holder: SelectorContext<ContextProps>,
+  selector: PropName,
+): ContextProps[PropName];
+
+export function useContextSelector<ContextProps, SelectorValue>(
+  holder: SelectorContext<ContextProps>,
+  selector: Selector<ContextProps, any> | (keyof ContextProps)[] | keyof ContextProps,
+) {
+  const eventSelector = useEvent<Selector<ContextProps, SelectorValue>>(
+    typeof selector === 'function'
+      ? selector
+      : ctx => {
+          if (!Array.isArray(selector)) {
+            return ctx[selector];
+          }
+
+          const obj = {} as SelectorValue;
+          selector.forEach(key => {
+            (obj as any)[key] = ctx[key];
+          });
+          return obj;
+        },
+  );
+  const context = React.useContext(holder?.Context);
+  const { listeners, getValue } = context || {};
+
+  const valueRef = React.useRef<SelectorValue>();
+  valueRef.current = eventSelector(context ? getValue() : null);
+  const [, forceUpdate] = React.useState({});
+
+  useLayoutEffect(() => {
+    if (!context) {
+      return;
+    }
+
+    function trigger(nextValue: ContextProps) {
+      const nextSelectorValue = eventSelector(nextValue);
+      if (!isEqual(valueRef.current, nextSelectorValue, true)) {
+        forceUpdate({});
+      }
+    }
+
+    listeners.add(trigger);
+
+    return () => {
+      listeners.delete(trigger);
+    };
+  }, [context]);
+
+  return valueRef.current;
+}

src/index.ts

@@ -0,0 +1,5 @@
+import type { SelectorContext } from './context';
+import { createContext, useContextSelector } from './context';
+
+export { createContext, useContextSelector };
+export type { SelectorContext };