use-context-selector - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4-beta.1

dist/index.modern.js

@@ -1,2 +0,2 @@
-import e from"react";const r=Symbol(),t="undefined"==typeof window||/ServerSideRendering/.test(window.navigator&&window.navigator.userAgent)?e=>e():e.useLayoutEffect,n=n=>{const o=e.createContext(n,()=>0);var c,u;return o[r]=new Set,o.Provider=(c=o.Provider,u=o[r],e.memo(({value:r,children:n})=>("production"!==process.env.NODE_ENV?t(()=>{u.forEach(e=>{e(r)})}):u.forEach(e=>{e(r)}),e.createElement(c,{value:r},n)))),delete o.Consumer,o},o=(n,o)=>{const c=n[r];if("production"!==process.env.NODE_ENV&&!c)throw new Error("useContextSelector requires special context");const[,u]=e.useReducer(e=>e+1,0),s=e.useContext(n),i=o(s),d=e.useRef(null);return t(()=>{d.current={f:o,v:s,s:i}}),t(()=>{const e=e=>{try{if(d.current.v===e||Object.is(d.current.s,d.current.f(e)))return}catch(e){}u()};return c.add(e),()=>{c.delete(e)}},[c]),i},c=e=>o(e,e=>e);export{n as createContext,c as useContext,o as useContextSelector,t as useIsoLayoutEffect};
+import e from"react";const r=Symbol(),t=Symbol(),n="undefined"==typeof window||/ServerSideRendering/.test(window.navigator&&window.navigator.userAgent)?e=>e():e.useLayoutEffect,o=o=>{const c=e.createContext(o,()=>0);var s,u;return c[r]=new Set,c[t]=c.Provider,c.Provider=(s=c.Provider,u=c[r],e.memo(({value:r,children:t})=>("production"!==process.env.NODE_ENV?n(()=>{u.forEach(e=>{e(r)})}):u.forEach(e=>{e(r)}),e.createElement(s,{value:r},t)))),delete c.Consumer,c},c=(t,o)=>{const c=t[r];if("production"!==process.env.NODE_ENV&&!c)throw new Error("useContextSelector requires special context");const[,s]=e.useReducer(e=>e+1,0),u=e.useContext(t),i=o(u),d=e.useRef(null);return n(()=>{d.current={f:o,v:u,s:i}}),n(()=>{const e=e=>{try{if(d.current.v===e||Object.is(d.current.s,d.current.f(e)))return}catch(e){}s()};return c.add(e),()=>{c.delete(e)}},[c]),i},s=t=>{const o=t[r];if("production"!==process.env.NODE_ENV&&!o)throw new Error("useContext requires special context");const[,c]=e.useReducer(e=>e+1,0),s=e.useContext(t);return n(()=>{const e=()=>{c()};return o.add(e),()=>{o.delete(e)}},[o]),s},u=({context:r,value:n,children:o})=>{const{[t]:c}=r;if("production"!==process.env.NODE_ENV&&!c)throw new Error("BridgeProvider requires special context");return e.createElement(c,{value:n},o)};export{u as BridgeProvider,o as createContext,s as useContext,c as useContextSelector,n as useIsoLayoutEffect};
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).useContextSelector={},e.react)}(this,function(e,t){t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var n=Symbol(),r="undefined"==typeof window||/ServerSideRendering/.test(window.navigator&&window.navigator.userAgent)?function(e){return e()}:t.useLayoutEffect,o=function(e,o){var u=e[n];if("production"!==process.env.NODE_ENV&&!u)throw new Error("useContextSelector requires special context");var c=t.useReducer(function(e){return e+1},0)[1],i=t.useContext(e),f=o(i),a=t.useRef(null);return r(function(){a.current={f:o,v:i,s:f}}),r(function(){var e=function(e){try{if(a.current.v===e||Object.is(a.current.s,a.current.f(e)))return}catch(e){}c()};return u.add(e),function(){u.delete(e)}},[u]),f};e.createContext=function(e){var o,u,c=t.createContext(e,function(){return 0});return c[n]=new Set,c.Provider=(o=c.Provider,u=c[n],t.memo(function(e){var n=e.value,c=e.children;return"production"!==process.env.NODE_ENV?r(function(){u.forEach(function(e){e(n)})}):u.forEach(function(e){e(n)}),t.createElement(o,{value:n},c)})),delete c.Consumer,c},e.useContext=function(e){return o(e,function(e){return e})},e.useContextSelector=o,e.useIsoLayoutEffect=r});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).useContextSelector={},e.react)}(this,function(e,t){t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var r=Symbol(),n=Symbol(),o="undefined"==typeof window||/ServerSideRendering/.test(window.navigator&&window.navigator.userAgent)?function(e){return e()}:t.useLayoutEffect;e.BridgeProvider=function(e){var r=e.value,o=e.children,u=e.context[n];if("production"!==process.env.NODE_ENV&&!u)throw new Error("BridgeProvider requires special context");return t.createElement(u,{value:r},o)},e.createContext=function(e){var u,c,i=t.createContext(e,function(){return 0});return i[r]=new Set,i[n]=i.Provider,i.Provider=(u=i.Provider,c=i[r],t.memo(function(e){var r=e.value,n=e.children;return"production"!==process.env.NODE_ENV?o(function(){c.forEach(function(e){e(r)})}):c.forEach(function(e){e(r)}),t.createElement(u,{value:r},n)})),delete i.Consumer,i},e.useContext=function(e){var n=e[r];if("production"!==process.env.NODE_ENV&&!n)throw new Error("useContext requires special context");var u=t.useReducer(function(e){return e+1},0)[1],c=t.useContext(e);return o(function(){var e=function(){u()};return n.add(e),function(){n.delete(e)}},[n]),c},e.useContextSelector=function(e,n){var u=e[r];if("production"!==process.env.NODE_ENV&&!u)throw new Error("useContextSelector requires special context");var c=t.useReducer(function(e){return e+1},0)[1],i=t.useContext(e),f=n(i),a=t.useRef(null);return o(function(){a.current={f:n,v:i,s:f}}),o(function(){var e=function(e){try{if(a.current.v===e||Object.is(a.current.s,a.current.f(e)))return}catch(e){}c()};return u.add(e),function(){u.delete(e)}},[u]),f},e.useIsoLayoutEffect=o});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "use-context-selector",
   "description": "React useContextSelector hook in userland",
-  "version": "1.1.3",
+  "version": "1.1.4-beta.1",
+  "publishConfig": {
+    "tag": "beta"
+  },
   "author": "Daishi Kato",
@@ -6,0 +9,0 @@ "repository": {

README.md

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

src/index.d.ts

@@ -1,2 +0,2 @@
-import { Context } from 'react';
+import { Context, FC } from 'react';
 
@@ -13,1 +13,3 @@ export const createContext: <T>(defaultValue: T) => Context<T>;
 ) => T;
+
+export const BridgeProvider: FC<{ context: Context<unknown>; value: unknown }>;

src/index.js

 import React from 'react';
 
 const CONTEXT_LISTENERS = Symbol();
+const ORIGINAL_PROVIDER = Symbol();
 
@@ -47,2 +48,4 @@ const isSSR = typeof window === 'undefined'
   context[CONTEXT_LISTENERS] = new Set();
+  // original provider
+  context[ORIGINAL_PROVIDER] = context.Provider;
   // hacked provider
@@ -111,4 +114,48 @@ context.Provider = createProvider(context.Provider, context[CONTEXT_LISTENERS]);
  */
-// this is not best implemented for performance,
-// but this wouldn't be used very often.
-export const useContext = (context) => useContextSelector(context, (x) => x);
+export const useContext = (context) => {
+  const listeners = context[CONTEXT_LISTENERS];
+  if (process.env.NODE_ENV !== 'production') {
+    if (!listeners) {
+      throw new Error('useContext requires special context');
+    }
+  }
+  const [, forceUpdate] = React.useReducer((c) => c + 1, 0);
+  const value = React.useContext(context);
+  useIsoLayoutEffect(() => {
+    const callback = () => {
+      forceUpdate();
+    };
+    listeners.add(callback);
+    return () => {
+      listeners.delete(callback);
+    };
+  }, [listeners]);
+  return value;
+};
+
+/**
+ * This is a Provider component for bridging multiple react roots
+ * @param props
+ * @param {React.Context} props.context
+ * @param {*} props.value
+ * @param {React.ReactNote} props.children
+ * @returns {React.ReactElement}
+ * @example
+ * const valueToBridge = useContext(PersonContext);
+ * return (
+ *   <Renderer>
+ *     <BridgeProvider context={PersonContext} value={valueToBridge}>
+ *       {children}
+ *     </Bidge>
+ *   </Renderer>
+ * );
+ */
+export const BridgeProvider = ({ context, value, children }) => {
+  const { [ORIGINAL_PROVIDER]: Provider } = context;
+  if (process.env.NODE_ENV !== 'production') {
+    if (!Provider) {
+      throw new Error('BridgeProvider requires special context');
+    }
+  }
+  return React.createElement(Provider, { 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

32366

increased by24.98%

Lines of code

176

increased by39.68%

Number of lines in readme file

202

increased by14.77%

Worsened metrics

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

12

increased by100%

No dependency changes