@rc-component/context - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

es/context.d.ts

 import * as React from 'react';
-export declare type Selector<ContextProps, SelectorValue = ContextProps> = (value: ContextProps) => SelectorValue;
-export declare type Trigger<ContextProps> = (value: ContextProps) => void;
-export declare type Listeners<ContextProps> = Set<Trigger<ContextProps>>;
+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> {
@@ -6,0 +6,0 @@ getValue: () => ContextProps;

es/context.js

@@ -9,20 +9,17 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
   var Context = /*#__PURE__*/React.createContext(undefined);
-
   var Provider = function Provider(_ref) {
     var value = _ref.value,
-        children = _ref.children;
+      children = _ref.children;
     var valueRef = React.useRef(value);
     valueRef.current = value;
-
     var _React$useState = React.useState(function () {
-      return {
-        getValue: function getValue() {
-          return valueRef.current;
-        },
-        listeners: new Set()
-      };
-    }),
-        _React$useState2 = _slicedToArray(_React$useState, 1),
-        context = _React$useState2[0];
-
+        return {
+          getValue: function getValue() {
+            return valueRef.current;
+          },
+          listeners: new Set()
+        };
+      }),
+      _React$useState2 = _slicedToArray(_React$useState, 1),
+      context = _React$useState2[0];
     useLayoutEffect(function () {
@@ -39,3 +36,2 @@ unstable_batchedUpdates(function () {
   };
-
   return {
@@ -47,4 +43,11 @@ Context: Context,
 }
+
 /** e.g. useSelect(userContext) => user */
 
+/** e.g. useSelect(userContext, user => user.name) => user.name */
+
+/** e.g. useSelect(userContext, ['name', 'age']) => user { name, age } */
+
+/** e.g. useSelect(userContext, 'name') => user.name */
+
 export function useContext(holder, selector) {
@@ -55,7 +58,5 @@ var eventSelector = useEvent(typeof selector === 'function' ? selector : function (ctx) {
     }
-
     if (!Array.isArray(selector)) {
       return ctx[selector];
     }
-
     var obj = {};
@@ -68,14 +69,10 @@ selector.forEach(function (key) {
   var context = React.useContext(holder === null || holder === void 0 ? void 0 : holder.Context);
-
   var _ref2 = context || {},
-      listeners = _ref2.listeners,
-      getValue = _ref2.getValue;
-
+    listeners = _ref2.listeners,
+    getValue = _ref2.getValue;
   var valueRef = React.useRef();
   valueRef.current = eventSelector(context ? getValue() : holder === null || holder === void 0 ? void 0 : holder.defaultValue);
-
   var _React$useState3 = React.useState({}),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      forceUpdate = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    forceUpdate = _React$useState4[1];
   useLayoutEffect(function () {
@@ -85,6 +82,4 @@ if (!context) {
     }
-
     function trigger(nextValue) {
       var nextSelectorValue = eventSelector(nextValue);
-
       if (!isEqual(valueRef.current, nextSelectorValue, true)) {
@@ -94,3 +89,2 @@ forceUpdate({});
     }
-
     listeners.add(trigger);
@@ -97,0 +91,0 @@ return function () {

es/Immutable.d.ts

 import * as React from 'react';
-export declare type CompareProps<T extends React.ComponentType<any>> = (prevProps: Readonly<React.ComponentProps<T>>, nextProps: Readonly<React.ComponentProps<T>>) => boolean;
+export type CompareProps<T extends React.ComponentType<any>> = (prevProps: Readonly<React.ComponentProps<T>>, nextProps: Readonly<React.ComponentProps<T>>) => boolean;
 /**
- * Get render update mark by `makeImmutable` root.
- * Do not deps on the return value as render times
- * but only use for `useMemo` or `useCallback` deps.
+ * Create Immutable pair for `makeImmutable` and `responseImmutable`.
  */
-export declare function useImmutableMark(): number;
-/**
- * Wrapped Component will be marked as Immutable.
- * When Component parent trigger render,
- * it will notice children component (use with `responseImmutable`) node that parent has updated.
-
- * @param Component Passed Component
- * @param triggerRender Customize trigger `responseImmutable` children re-render logic. Default will always trigger re-render when this component re-render.
- */
-export declare function makeImmutable<T extends React.ComponentType<any>>(Component: T, shouldTriggerRender?: CompareProps<T>): T;
-/**
- * Wrapped Component with `React.memo`.
- * But will rerender when parent with `makeImmutable` rerender.
- */
-export declare function responseImmutable<T extends React.ComponentType<any>>(Component: T, propsAreEqual?: CompareProps<T>): T;
+export default function createImmutable(): {
+    makeImmutable: <T extends React.ComponentType<any>>(Component: T, shouldTriggerRender?: CompareProps<T>) => T;
+    responseImmutable: <T_1 extends React.ComponentType<any>>(Component: T_1, propsAreEqual?: CompareProps<T_1>) => T_1;
+    useImmutableMark: () => number;
+};

es/Immutable.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import { supportRef } from "rc-util/es/ref";
 import * as React from 'react';
-var ImmutableContext = /*#__PURE__*/React.createContext(0);
-
 /**
- * Get render update mark by `makeImmutable` root.
- * Do not deps on the return value as render times
- * but only use for `useMemo` or `useCallback` deps.
+ * Create Immutable pair for `makeImmutable` and `responseImmutable`.
  */
-export function useImmutableMark() {
-  return React.useContext(ImmutableContext);
-}
-/**
- * Wrapped Component will be marked as Immutable.
- * When Component parent trigger render,
- * it will notice children component (use with `responseImmutable`) node that parent has updated.
+export default function createImmutable() {
+  var ImmutableContext = /*#__PURE__*/React.createContext(null);
 
- * @param Component Passed Component
- * @param triggerRender Customize trigger `responseImmutable` children re-render logic. Default will always trigger re-render when this component re-render.
- */
+  /**
+   * Get render update mark by `makeImmutable` root.
+   * Do not deps on the return value as render times
+   * but only use for `useMemo` or `useCallback` deps.
+   */
+  function useImmutableMark() {
+    return React.useContext(ImmutableContext);
+  }
 
-export function makeImmutable(Component, shouldTriggerRender) {
-  var refAble = supportRef(Component);
+  /**
+  * Wrapped Component will be marked as Immutable.
+  * When Component parent trigger render,
+  * it will notice children component (use with `responseImmutable`) node that parent has updated.
+  * @param Component Passed Component
+  * @param triggerRender Customize trigger `responseImmutable` children re-render logic. Default will always trigger re-render when this component re-render.
+  */
+  function makeImmutable(Component, shouldTriggerRender) {
+    var refAble = supportRef(Component);
+    var ImmutableComponent = function ImmutableComponent(props, ref) {
+      var refProps = refAble ? {
+        ref: ref
+      } : {};
+      var renderTimesRef = React.useRef(0);
+      var prevProps = React.useRef(props);
 
-  var ImmutableComponent = function ImmutableComponent(props, ref) {
-    var refProps = refAble ? {
-      ref: ref
-    } : {};
-    var renderTimesRef = React.useRef(0);
-    var prevProps = React.useRef(props);
+      // If parent has the context, we do not wrap it
+      var mark = useImmutableMark();
+      if (mark !== null) {
+        return /*#__PURE__*/React.createElement(Component, _extends({}, props, refProps));
+      }
+      if (
+      // Always trigger re-render if not provide `notTriggerRender`
+      !shouldTriggerRender || shouldTriggerRender(prevProps.current, props)) {
+        renderTimesRef.current += 1;
+      }
+      prevProps.current = props;
+      return /*#__PURE__*/React.createElement(ImmutableContext.Provider, {
+        value: renderTimesRef.current
+      }, /*#__PURE__*/React.createElement(Component, _extends({}, props, refProps)));
+    };
+    if (process.env.NODE_ENV !== 'production') {
+      ImmutableComponent.displayName = "ImmutableRoot(".concat(Component.displayName || Component.name, ")");
+    }
+    return refAble ? /*#__PURE__*/React.forwardRef(ImmutableComponent) : ImmutableComponent;
+  }
 
-    if ( // Always trigger re-render if not provide `notTriggerRender`
-    !shouldTriggerRender || shouldTriggerRender(prevProps.current, props)) {
-      renderTimesRef.current += 1;
+  /**
+   * Wrapped Component with `React.memo`.
+   * But will rerender when parent with `makeImmutable` rerender.
+   */
+  function responseImmutable(Component, propsAreEqual) {
+    var refAble = supportRef(Component);
+    var ImmutableComponent = function ImmutableComponent(props, ref) {
+      var refProps = refAble ? {
+        ref: ref
+      } : {};
+      useImmutableMark();
+      return /*#__PURE__*/React.createElement(Component, _extends({}, props, refProps));
+    };
+    if (process.env.NODE_ENV !== 'production') {
+      ImmutableComponent.displayName = "ImmutableResponse(".concat(Component.displayName || Component.name, ")");
     }
-
-    prevProps.current = props;
-    return /*#__PURE__*/React.createElement(ImmutableContext.Provider, {
-      value: renderTimesRef.current
-    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, refProps)));
-  };
-
-  if (process.env.NODE_ENV !== 'production') {
-    ImmutableComponent.displayName = "ImmutableRoot(".concat(Component.displayName || Component.name, ")");
+    return refAble ? /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(ImmutableComponent), propsAreEqual) : /*#__PURE__*/React.memo(ImmutableComponent, propsAreEqual);
   }
-
-  return refAble ? /*#__PURE__*/React.forwardRef(ImmutableComponent) : ImmutableComponent;
-}
-/**
- * Wrapped Component with `React.memo`.
- * But will rerender when parent with `makeImmutable` rerender.
- */
-
-export function responseImmutable(Component, propsAreEqual) {
-  var refAble = supportRef(Component);
-
-  var ImmutableComponent = function ImmutableComponent(props, ref) {
-    var refProps = refAble ? {
-      ref: ref
-    } : {};
-    useImmutableMark();
-    return /*#__PURE__*/React.createElement(Component, _extends({}, props, refProps));
+  return {
+    makeImmutable: makeImmutable,
+    responseImmutable: responseImmutable,
+    useImmutableMark: useImmutableMark
   };
-
-  if (process.env.NODE_ENV !== 'production') {
-    ImmutableComponent.displayName = "ImmutableResponse(".concat(Component.displayName || Component.name, ")");
-  }
-
-  return refAble ? /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(ImmutableComponent), propsAreEqual) : /*#__PURE__*/React.memo(ImmutableComponent, propsAreEqual);
 }

es/index.d.ts

@@ -0,5 +1,7 @@
+/// <reference types="react" />
 import type { SelectorContext } from './context';
 import { createContext, useContext } from './context';
-import { makeImmutable, responseImmutable, useImmutableMark } from './Immutable';
-export { createContext, useContext, makeImmutable, responseImmutable, useImmutableMark };
+import createImmutable from './Immutable';
+declare const makeImmutable: <T extends import("react").ComponentType<any>>(Component: T, shouldTriggerRender?: import("./Immutable").CompareProps<T>) => T, responseImmutable: <T extends import("react").ComponentType<any>>(Component: T, propsAreEqual?: import("./Immutable").CompareProps<T>) => T, useImmutableMark: () => number;
+export { createContext, useContext, createImmutable, makeImmutable, responseImmutable, useImmutableMark, };
 export type { SelectorContext };

es/index.js

 import { createContext, useContext } from "./context";
-import { makeImmutable, responseImmutable, useImmutableMark } from "./Immutable";
-export { createContext, useContext, makeImmutable, responseImmutable, useImmutableMark };
+import createImmutable from "./Immutable";
+
+// For legacy usage, we export it directly
+var _createImmutable = createImmutable(),
+  makeImmutable = _createImmutable.makeImmutable,
+  responseImmutable = _createImmutable.responseImmutable,
+  useImmutableMark = _createImmutable.useImmutableMark;
+export { createContext, useContext, createImmutable, makeImmutable, responseImmutable, useImmutableMark };

lib/context.d.ts

 import * as React from 'react';
-export declare type Selector<ContextProps, SelectorValue = ContextProps> = (value: ContextProps) => SelectorValue;
-export declare type Trigger<ContextProps> = (value: ContextProps) => void;
-export declare type Listeners<ContextProps> = Set<Trigger<ContextProps>>;
+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> {
@@ -6,0 +6,0 @@ getValue: () => ContextProps;

lib/context.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -12,39 +10,27 @@ value: true
 exports.useContext = useContext;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
-
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
-
 var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function createContext(defaultValue) {
   var Context = /*#__PURE__*/React.createContext(undefined);
-
   var Provider = function Provider(_ref) {
     var value = _ref.value,
-        children = _ref.children;
+      children = _ref.children;
     var valueRef = React.useRef(value);
     valueRef.current = value;
-
     var _React$useState = React.useState(function () {
-      return {
-        getValue: function getValue() {
-          return valueRef.current;
-        },
-        listeners: new Set()
-      };
-    }),
-        _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
-        context = _React$useState2[0];
-
+        return {
+          getValue: function getValue() {
+            return valueRef.current;
+          },
+          listeners: new Set()
+        };
+      }),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
+      context = _React$useState2[0];
     (0, _useLayoutEffect.default)(function () {
@@ -61,3 +47,2 @@ (0, _reactDom.unstable_batchedUpdates)(function () {
   };
-
   return {
@@ -69,5 +54,11 @@ Context: Context,
 }
+
 /** e.g. useSelect(userContext) => user */
 
+/** e.g. useSelect(userContext, user => user.name) => user.name */
 
+/** e.g. useSelect(userContext, ['name', 'age']) => user { name, age } */
+
+/** e.g. useSelect(userContext, 'name') => user.name */
+
 function useContext(holder, selector) {
@@ -78,7 +69,5 @@ var eventSelector = (0, _useEvent.default)(typeof selector === 'function' ? selector : function (ctx) {
     }
-
     if (!Array.isArray(selector)) {
       return ctx[selector];
     }
-
     var obj = {};
@@ -91,14 +80,10 @@ selector.forEach(function (key) {
   var context = React.useContext(holder === null || holder === void 0 ? void 0 : holder.Context);
-
   var _ref2 = context || {},
-      listeners = _ref2.listeners,
-      getValue = _ref2.getValue;
-
+    listeners = _ref2.listeners,
+    getValue = _ref2.getValue;
   var valueRef = React.useRef();
   valueRef.current = eventSelector(context ? getValue() : holder === null || holder === void 0 ? void 0 : holder.defaultValue);
-
   var _React$useState3 = React.useState({}),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      forceUpdate = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    forceUpdate = _React$useState4[1];
   (0, _useLayoutEffect.default)(function () {
@@ -108,6 +93,4 @@ if (!context) {
     }
-
     function trigger(nextValue) {
       var nextSelectorValue = eventSelector(nextValue);
-
       if (!(0, _isEqual.default)(valueRef.current, nextSelectorValue, true)) {
@@ -117,3 +100,2 @@ forceUpdate({});
     }
-
     listeners.add(trigger);
@@ -120,0 +102,0 @@ return function () {

lib/Immutable.d.ts

 import * as React from 'react';
-export declare type CompareProps<T extends React.ComponentType<any>> = (prevProps: Readonly<React.ComponentProps<T>>, nextProps: Readonly<React.ComponentProps<T>>) => boolean;
+export type CompareProps<T extends React.ComponentType<any>> = (prevProps: Readonly<React.ComponentProps<T>>, nextProps: Readonly<React.ComponentProps<T>>) => boolean;
 /**
- * Get render update mark by `makeImmutable` root.
- * Do not deps on the return value as render times
- * but only use for `useMemo` or `useCallback` deps.
+ * Create Immutable pair for `makeImmutable` and `responseImmutable`.
  */
-export declare function useImmutableMark(): number;
-/**
- * Wrapped Component will be marked as Immutable.
- * When Component parent trigger render,
- * it will notice children component (use with `responseImmutable`) node that parent has updated.
-
- * @param Component Passed Component
- * @param triggerRender Customize trigger `responseImmutable` children re-render logic. Default will always trigger re-render when this component re-render.
- */
-export declare function makeImmutable<T extends React.ComponentType<any>>(Component: T, shouldTriggerRender?: CompareProps<T>): T;
-/**
- * Wrapped Component with `React.memo`.
- * But will rerender when parent with `makeImmutable` rerender.
- */
-export declare function responseImmutable<T extends React.ComponentType<any>>(Component: T, propsAreEqual?: CompareProps<T>): T;
+export default function createImmutable(): {
+    makeImmutable: <T extends React.ComponentType<any>>(Component: T, shouldTriggerRender?: CompareProps<T>) => T;
+    responseImmutable: <T_1 extends React.ComponentType<any>>(Component: T_1, propsAreEqual?: CompareProps<T_1>) => T_1;
+    useImmutableMark: () => number;
+};

lib/Immutable.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.makeImmutable = makeImmutable;
-exports.responseImmutable = responseImmutable;
-exports.useImmutableMark = useImmutableMark;
-
+exports.default = createImmutable;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _ref = require("rc-util/lib/ref");
-
 var React = _interopRequireWildcard(require("react"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var ImmutableContext = /*#__PURE__*/React.createContext(0);
-
 /**
- * Get render update mark by `makeImmutable` root.
- * Do not deps on the return value as render times
- * but only use for `useMemo` or `useCallback` deps.
+ * Create Immutable pair for `makeImmutable` and `responseImmutable`.
  */
-function useImmutableMark() {
-  return React.useContext(ImmutableContext);
-}
-/**
- * Wrapped Component will be marked as Immutable.
- * When Component parent trigger render,
- * it will notice children component (use with `responseImmutable`) node that parent has updated.
+function createImmutable() {
+  var ImmutableContext = /*#__PURE__*/React.createContext(null);
 
- * @param Component Passed Component
- * @param triggerRender Customize trigger `responseImmutable` children re-render logic. Default will always trigger re-render when this component re-render.
- */
+  /**
+   * Get render update mark by `makeImmutable` root.
+   * Do not deps on the return value as render times
+   * but only use for `useMemo` or `useCallback` deps.
+   */
+  function useImmutableMark() {
+    return React.useContext(ImmutableContext);
+  }
 
+  /**
+  * Wrapped Component will be marked as Immutable.
+  * When Component parent trigger render,
+  * it will notice children component (use with `responseImmutable`) node that parent has updated.
+  * @param Component Passed Component
+  * @param triggerRender Customize trigger `responseImmutable` children re-render logic. Default will always trigger re-render when this component re-render.
+  */
+  function makeImmutable(Component, shouldTriggerRender) {
+    var refAble = (0, _ref.supportRef)(Component);
+    var ImmutableComponent = function ImmutableComponent(props, ref) {
+      var refProps = refAble ? {
+        ref: ref
+      } : {};
+      var renderTimesRef = React.useRef(0);
+      var prevProps = React.useRef(props);
 
-function makeImmutable(Component, shouldTriggerRender) {
-  var refAble = (0, _ref.supportRef)(Component);
+      // If parent has the context, we do not wrap it
+      var mark = useImmutableMark();
+      if (mark !== null) {
+        return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, props, refProps));
+      }
+      if (
+      // Always trigger re-render if not provide `notTriggerRender`
+      !shouldTriggerRender || shouldTriggerRender(prevProps.current, props)) {
+        renderTimesRef.current += 1;
+      }
+      prevProps.current = props;
+      return /*#__PURE__*/React.createElement(ImmutableContext.Provider, {
+        value: renderTimesRef.current
+      }, /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, props, refProps)));
+    };
+    if (process.env.NODE_ENV !== 'production') {
+      ImmutableComponent.displayName = "ImmutableRoot(".concat(Component.displayName || Component.name, ")");
+    }
+    return refAble ? /*#__PURE__*/React.forwardRef(ImmutableComponent) : ImmutableComponent;
+  }
 
-  var ImmutableComponent = function ImmutableComponent(props, ref) {
-    var refProps = refAble ? {
-      ref: ref
-    } : {};
-    var renderTimesRef = React.useRef(0);
-    var prevProps = React.useRef(props);
-
-    if ( // Always trigger re-render if not provide `notTriggerRender`
-    !shouldTriggerRender || shouldTriggerRender(prevProps.current, props)) {
-      renderTimesRef.current += 1;
+  /**
+   * Wrapped Component with `React.memo`.
+   * But will rerender when parent with `makeImmutable` rerender.
+   */
+  function responseImmutable(Component, propsAreEqual) {
+    var refAble = (0, _ref.supportRef)(Component);
+    var ImmutableComponent = function ImmutableComponent(props, ref) {
+      var refProps = refAble ? {
+        ref: ref
+      } : {};
+      useImmutableMark();
+      return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, props, refProps));
+    };
+    if (process.env.NODE_ENV !== 'production') {
+      ImmutableComponent.displayName = "ImmutableResponse(".concat(Component.displayName || Component.name, ")");
     }
-
-    prevProps.current = props;
-    return /*#__PURE__*/React.createElement(ImmutableContext.Provider, {
-      value: renderTimesRef.current
-    }, /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, props, refProps)));
-  };
-
-  if (process.env.NODE_ENV !== 'production') {
-    ImmutableComponent.displayName = "ImmutableRoot(".concat(Component.displayName || Component.name, ")");
+    return refAble ? /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(ImmutableComponent), propsAreEqual) : /*#__PURE__*/React.memo(ImmutableComponent, propsAreEqual);
   }
-
-  return refAble ? /*#__PURE__*/React.forwardRef(ImmutableComponent) : ImmutableComponent;
-}
-/**
- * Wrapped Component with `React.memo`.
- * But will rerender when parent with `makeImmutable` rerender.
- */
-
-
-function responseImmutable(Component, propsAreEqual) {
-  var refAble = (0, _ref.supportRef)(Component);
-
-  var ImmutableComponent = function ImmutableComponent(props, ref) {
-    var refProps = refAble ? {
-      ref: ref
-    } : {};
-    useImmutableMark();
-    return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, props, refProps));
+  return {
+    makeImmutable: makeImmutable,
+    responseImmutable: responseImmutable,
+    useImmutableMark: useImmutableMark
   };
-
-  if (process.env.NODE_ENV !== 'production') {
-    ImmutableComponent.displayName = "ImmutableResponse(".concat(Component.displayName || Component.name, ")");
-  }
-
-  return refAble ? /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(ImmutableComponent), propsAreEqual) : /*#__PURE__*/React.memo(ImmutableComponent, propsAreEqual);
 }

lib/index.d.ts

@@ -0,5 +1,7 @@
+/// <reference types="react" />
 import type { SelectorContext } from './context';
 import { createContext, useContext } from './context';
-import { makeImmutable, responseImmutable, useImmutableMark } from './Immutable';
-export { createContext, useContext, makeImmutable, responseImmutable, useImmutableMark };
+import createImmutable from './Immutable';
+declare const makeImmutable: <T extends import("react").ComponentType<any>>(Component: T, shouldTriggerRender?: import("./Immutable").CompareProps<T>) => T, responseImmutable: <T extends import("react").ComponentType<any>>(Component: T, propsAreEqual?: import("./Immutable").CompareProps<T>) => T, useImmutableMark: () => number;
+export { createContext, useContext, createImmutable, makeImmutable, responseImmutable, useImmutableMark, };
 export type { SelectorContext };

lib/index.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -12,14 +13,9 @@ value: true
 });
-Object.defineProperty(exports, "makeImmutable", {
+Object.defineProperty(exports, "createImmutable", {
   enumerable: true,
   get: function get() {
-    return _Immutable.makeImmutable;
+    return _Immutable.default;
   }
 });
-Object.defineProperty(exports, "responseImmutable", {
-  enumerable: true,
-  get: function get() {
-    return _Immutable.responseImmutable;
-  }
-});
+exports.responseImmutable = exports.makeImmutable = void 0;
 Object.defineProperty(exports, "useContext", {
@@ -31,11 +27,12 @@ enumerable: true,
 });
-Object.defineProperty(exports, "useImmutableMark", {
-  enumerable: true,
-  get: function get() {
-    return _Immutable.useImmutableMark;
-  }
-});
-
+exports.useImmutableMark = void 0;
 var _context = require("./context");
-
-var _Immutable = require("./Immutable");
+var _Immutable = _interopRequireDefault(require("./Immutable"));
+// For legacy usage, we export it directly
+var _createImmutable = (0, _Immutable.default)(),
+  makeImmutable = _createImmutable.makeImmutable,
+  responseImmutable = _createImmutable.responseImmutable,
+  useImmutableMark = _createImmutable.useImmutableMark;
+exports.useImmutableMark = useImmutableMark;
+exports.responseImmutable = responseImmutable;
+exports.makeImmutable = makeImmutable;

package.json

 {
   "name": "@rc-component/context",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React way perf context selector",
@@ -47,2 +47,3 @@ "keywords": [
     "@types/warning": "^3.0.0",
+    "@umijs/fabric": "^3.0.0",
     "cross-env": "^7.0.3",
@@ -49,0 +50,0 @@ "dumi": "^2.0.15",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26321

increased by5.63%

Lines of code

468

increased by5.41%

Worsened metrics

Dev dependency count

15

increased by7.14%

No dependency changes