use-context-selector - npm Package Compare versions

Comparing version 2.0.0-alpha.7 to 2.0.0-alpha.9

CHANGELOG.md

@@ -5,2 +5,10 @@ # Change Log
 
+## [1.1.4] - 2020-09-22
+### Added
+- BridgeProvider for multiple react roots
+
+## [1.1.3] - 2020-09-17
+### Changed
+- useIsoLayoutEffect for SSR
+
 ## [1.1.2] - 2020-07-02
@@ -7,0 +15,0 @@ ### Changed

dist/index.modern.js

@@ -1,2 +0,2 @@
-import{createContext as r,unstable_createMutableSource as e,useContext as n,useCallback as t,unstable_useMutableSource as o,useRef as s,useMemo as c,createElement as u,useLayoutEffect as i,useEffect as l}from"react";import{unstable_NormalPriority as a,unstable_getCurrentPriorityLevel as p,unstable_runWithPriority as d,unstable_ImmediatePriority as f}from"scheduler";const v="undefined"==typeof window||/ServerSideRendering/.test(window.navigator&&window.navigator.userAgent)?l:i,w=Symbol(),S=Symbol(),h=Symbol(),m=new WeakMap,g=r=>r,x=r=>{const n={current:{v:-1,p:r,s:r,l:new Set}};return e(n,()=>n.current.v)};function y(n){const t=r({[w]:x(n),[S]:r=>r()});var o;return t.Provider=(o=t.Provider,({value:r,children:n})=>{const t=s({v:0,p:r,s:r,l:new Set}),i=s(a),l=c(()=>({[w]:e(t,()=>t.current.v),[S]:r=>(i.current=p(),d(f,r))}),[]);return v(()=>{null!==l[w]._workInProgressVersionSecondary?t.current.s=r:t.current.p=r,t.current.v+=1,d(i.current,()=>{t.current.l.forEach(r=>r())}),i.current=a}),u(o,{value:l},n)}),delete t.Consumer,t}const E=(r,e)=>{const n=r.current.l;return n.add(e),()=>n.delete(e)};function C(r,e=g){const{[w]:s}=n(r);if("production"!==process.env.NODE_ENV&&!s)throw new Error("This useContext requires special context for selector support");const c=t(r=>{const n=e(null!==s._workInProgressVersionSecondary?r.current.s:r.current.p);if("function"==typeof n){if(m.has(n))return m.get(n);const r={[h]:n};return m.set(n,r),r}return n},[e,s]),u=o(s,c,E);return u&&u[h]?u[h]:u}function N(r){const{[S]:e}=n(r);if("production"!==process.env.NODE_ENV&&!e)throw new Error("This useContext requires special context for selector support");return e}export{y as createContext,C as useContext,N as useContextUpdate};
+import{createContext as r,unstable_createMutableSource as e,useContext as n,useCallback as t,unstable_useMutableSource as o,createElement as c,useRef as s,useMemo as u,useLayoutEffect as i}from"react";import{unstable_NormalPriority as l,unstable_getCurrentPriorityLevel as d,unstable_runWithPriority as a,unstable_UserBlockingPriority as p}from"scheduler";const v="undefined"==typeof window||/ServerSideRendering/.test(window.navigator&&window.navigator.userAgent)?r=>r():i,f=Symbol(),w=Symbol(),h=Symbol(),E=new WeakMap,S=Symbol(),m=r=>r,x=r=>{const n={current:{v:-1,p:r,s:r,l:new Set}};return e(n,()=>n.current.v)};function g(n){const t=r({[f]:x(n),[w]:r=>r()});var o;return t[S]=t.Provider,t.Provider=(o=t.Provider,({value:r,children:n})=>{const t=s({v:0,p:r,s:r,l:new Set}),i=s(l),h=u(()=>({[f]:e(t,()=>t.current.v),[w]:r=>(i.current=d(),a(p,r))}),[]);return v(()=>{null!==h[f]._workInProgressVersionSecondary?t.current.s=r:t.current.p=r,t.current.v+=1,a(i.current,()=>{t.current.l.forEach(r=>r())}),i.current=l}),c(o,{value:h},n)}),delete t.Consumer,t}const y=(r,e)=>{const n=r.current.l;return n.add(e),()=>n.delete(e)};function N(r,e=m){const{[f]:c}=n(r);if("production"!==process.env.NODE_ENV&&!c)throw new Error("This useContext requires special context for selector support");const s=t(r=>{const n=e(null!==c._workInProgressVersionSecondary?r.current.s:r.current.p);if("function"==typeof n){if(E.has(n))return E.get(n);const r={[h]:n};return E.set(n,r),r}return n},[e,c]),u=o(c,s,y);return u&&u[h]?u[h]:u}function P(r){const{[w]:e}=n(r);if("production"!==process.env.NODE_ENV&&!e)throw new Error("This useContext requires special context for selector support");return e}const C=({context:r,value:e,children:n})=>{const{[S]:t}=r;if("production"!==process.env.NODE_ENV&&!t)throw new Error("BridgeProvider requires special context");return c(t,{value:e},n)};export{C as BridgeProvider,g as createContext,N as useContext,P as useContextUpdate};
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("scheduler")):"function"==typeof define&&define.amd?define(["exports","react","scheduler"],r):r((e=e||self).useContextSelector={},e.react,e.scheduler)}(this,function(e,r,t){var n="undefined"==typeof window||/ServerSideRendering/.test(window.navigator&&window.navigator.userAgent)?r.useEffect:r.useLayoutEffect,u=Symbol(),o=Symbol(),i=Symbol(),c=new WeakMap,s=function(e){return e},a=function(e,r){var t=e.current.l;return t.add(r),function(){return t.delete(r)}};e.createContext=function(e){var i,c,s=r.createContext(((i={})[u]=function(e){var t={current:{v:-1,p:e,s:e,l:new Set}};return r.unstable_createMutableSource(t,function(){return t.current.v})}(e),i[o]=function(e){return e()},i));return s.Provider=(c=s.Provider,function(e){var i=e.value,s=e.children,a=r.useRef({v:0,p:i,s:i,l:new Set}),f=r.useRef(t.unstable_NormalPriority),l=r.useMemo(function(){var e;return(e={})[u]=r.unstable_createMutableSource(a,function(){return a.current.v}),e[o]=function(e){return f.current=t.unstable_getCurrentPriorityLevel(),t.unstable_runWithPriority(t.unstable_ImmediatePriority,e)},e},[]);return n(function(){null!==l[u]._workInProgressVersionSecondary?a.current.s=i:a.current.p=i,a.current.v+=1,t.unstable_runWithPriority(f.current,function(){a.current.l.forEach(function(e){return e()})}),f.current=t.unstable_NormalPriority}),r.createElement(c,{value:l},s)}),delete s.Consumer,s},e.useContext=function(e,t){void 0===t&&(t=s);var n=r.useContext(e)[u];if("production"!==process.env.NODE_ENV&&!n)throw new Error("This useContext requires special context for selector support");var o=r.useCallback(function(e){var r=t(null!==n._workInProgressVersionSecondary?e.current.s:e.current.p);if("function"==typeof r){var u;if(c.has(r))return c.get(r);var o=((u={})[i]=r,u);return c.set(r,o),o}return r},[t,n]),f=r.unstable_useMutableSource(n,o,a);return f&&f[i]?f[i]:f},e.useContextUpdate=function(e){var t=r.useContext(e)[o];if("production"!==process.env.NODE_ENV&&!t)throw new Error("This useContext requires special context for selector support");return t}});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("scheduler")):"function"==typeof define&&define.amd?define(["exports","react","scheduler"],r):r((e=e||self).useContextSelector={},e.react,e.scheduler)}(this,function(e,r,t){var n="undefined"==typeof window||/ServerSideRendering/.test(window.navigator&&window.navigator.userAgent)?function(e){return e()}:r.useLayoutEffect,u=Symbol(),o=Symbol(),i=Symbol(),c=new WeakMap,s=Symbol(),a=function(e){return e},l=function(e,r){var t=e.current.l;return t.add(r),function(){return t.delete(r)}};e.BridgeProvider=function(e){var t=e.value,n=e.children,u=e.context[s];if("production"!==process.env.NODE_ENV&&!u)throw new Error("BridgeProvider requires special context");return r.createElement(u,{value:t},n)},e.createContext=function(e){var i,c,a=r.createContext(((i={})[u]=function(e){var t={current:{v:-1,p:e,s:e,l:new Set}};return r.unstable_createMutableSource(t,function(){return t.current.v})}(e),i[o]=function(e){return e()},i));return a[s]=a.Provider,a.Provider=(c=a.Provider,function(e){var i=e.value,s=e.children,a=r.useRef({v:0,p:i,s:i,l:new Set}),l=r.useRef(t.unstable_NormalPriority),f=r.useMemo(function(){var e;return(e={})[u]=r.unstable_createMutableSource(a,function(){return a.current.v}),e[o]=function(e){return l.current=t.unstable_getCurrentPriorityLevel(),t.unstable_runWithPriority(t.unstable_UserBlockingPriority,e)},e},[]);return n(function(){null!==f[u]._workInProgressVersionSecondary?a.current.s=i:a.current.p=i,a.current.v+=1,t.unstable_runWithPriority(l.current,function(){a.current.l.forEach(function(e){return e()})}),l.current=t.unstable_NormalPriority}),r.createElement(c,{value:f},s)}),delete a.Consumer,a},e.useContext=function(e,t){void 0===t&&(t=a);var n=r.useContext(e)[u];if("production"!==process.env.NODE_ENV&&!n)throw new Error("This useContext requires special context for selector support");var o=r.useCallback(function(e){var r=t(null!==n._workInProgressVersionSecondary?e.current.s:e.current.p);if("function"==typeof r){var u;if(c.has(r))return c.get(r);var o=((u={})[i]=r,u);return c.set(r,o),o}return r},[t,n]),s=r.unstable_useMutableSource(n,o,l);return s&&s[i]?s[i]:s},e.useContextUpdate=function(e){var t=r.useContext(e)[o];if("production"!==process.env.NODE_ENV&&!t)throw new Error("This useContext requires special context for selector support");return t}});
 //# sourceMappingURL=index.umd.js.map

dist/src/index.d.ts

@@ -35,1 +35,18 @@ import { ComponentType } from 'react';
 export declare function useContextUpdate(context: Context<unknown>): <T>(thunk: () => T) => T;
+/**
+ * This is a Provider component for bridging multiple react roots
+ *
+ * @example
+ * const valueToBridge = useContext(PersonContext);
+ * return (
+ *   <Renderer>
+ *     <BridgeProvider context={PersonContext} value={valueToBridge}>
+ *       {children}
+ *     </BridgeProvider>
+ *   </Renderer>
+ * );
+ */
+export declare const BridgeProvider: React.FC<{
+    context: Context<any>;
+    value: any;
+}>;

package.json

 {
   "name": "use-context-selector",
   "description": "React useContext with selector support in userland",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.9",
   "publishConfig": {
@@ -6,0 +6,0 @@ "tag": "next"

README.md

@@ -176,2 +176,28 @@ # use-context-selector
 
+### BridgeProvider
+
+This is a Provider component for bridging multiple react roots
+
+Type: React.FC<{context: Context<any>, value: any}>
+
+#### Parameters
+
+-   `$0` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+    -   `$0.context`  
+    -   `$0.value`  
+    -   `$0.children`  
+
+#### Examples
+
+```javascript
+const valueToBridge = useContext(PersonContext);
+return (
+  <Renderer>
+    <BridgeProvider context={PersonContext} value={valueToBridge}>
+      {children}
+    </BridgeProvider>
+  </Renderer>
+);
+```
+
 ## Limitations
@@ -178,0 +204,0 @@

src/index.ts

@@ -16,3 +16,2 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
   useLayoutEffect,
-  useEffect,
   useMemo,
@@ -24,3 +23,3 @@ // @ts-ignore
 import {
-  unstable_ImmediatePriority as ImmediatePriority,
+  unstable_UserBlockingPriority as UserBlockingPriority,
   unstable_NormalPriority as NormalPriority,
@@ -31,8 +30,8 @@ unstable_runWithPriority as runWithPriority,
 
-const isClient = (
-  typeof window !== 'undefined'
-  && !/ServerSideRendering/.test(window.navigator && window.navigator.userAgent)
-);
+const isSSR = typeof window === 'undefined'
+  || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
 
-const useIsomorphicLayoutEffect = isClient ? useLayoutEffect : useEffect;
+const useIsoLayoutEffect = isSSR
+  ? (fn: () => void) => fn()
+  : useLayoutEffect;
 
@@ -46,2 +45,4 @@ const SOURCE_SYMBOL = Symbol();
 
+const ORIGINAL_PROVIDER = Symbol();
+
 // @ts-ignore
@@ -78,6 +79,6 @@ type ContextValue<Value> = {
         priorityRef.current = getCurrentPriorityLevel();
-        return runWithPriority(ImmediatePriority, thunk);
+        return runWithPriority(UserBlockingPriority, thunk);
       },
     }), []);
-    useIsomorphicLayoutEffect(() => {
+    useIsoLayoutEffect(() => {
       if (contextValue[SOURCE_SYMBOL]._workInProgressVersionSecondary !== null) {
@@ -130,2 +131,5 @@ ref.current.s = value; // update secondary value
   });
+  (context as unknown as {
+    [ORIGINAL_PROVIDER]: Provider<ContextValue<Value>>;
+  })[ORIGINAL_PROVIDER] = context.Provider;
   (context as unknown as Context<Value>).Provider = createProvider(context.Provider);
@@ -227,1 +231,29 @@ delete context.Consumer; // no support for Consumer
 }
+
+/**
+ * This is a Provider component for bridging multiple react roots
+ *
+ * @example
+ * const valueToBridge = useContext(PersonContext);
+ * return (
+ *   <Renderer>
+ *     <BridgeProvider context={PersonContext} value={valueToBridge}>
+ *       {children}
+ *     </BridgeProvider>
+ *   </Renderer>
+ * );
+ */
+export const BridgeProvider: React.FC<{
+  context: Context<any>;
+  value: any;
+}> = ({ context, value, children }) => {
+  const { [ORIGINAL_PROVIDER]: ProviderOrig } = context as unknown as {
+    [ORIGINAL_PROVIDER]: Provider<unknown>;
+  };
+  if (process.env.NODE_ENV !== 'production') {
+    if (!ProviderOrig) {
+      throw new Error('BridgeProvider requires special context');
+    }
+  }
+  return createElement(ProviderOrig, { value }, children);
+};

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

45982

increased by11.89%

Lines of code

305

increased by19.14%

Number of lines in readme file

228

increased by12.87%

Worsened metrics

Number of low supply chain risk alerts

6

increased by50%

No dependency changes