@mui/x-internals - npm Package Compare versions

Comparing version 8.19.0 to 8.21.0

esm/export/loadStyleSheets.js

@@ -13,3 +13,3 @@ /**
     const node = headStyleElements[i];
-    const newHeadStyleElements = document.createElement(node.tagName);
+    const newHeadStyleElement = document.createElement(node.tagName);
     if (node.tagName === 'STYLE') {
@@ -24,3 +24,3 @@ const sheet = node.sheet;
         }
-        newHeadStyleElements.appendChild(document.createTextNode(styleCSS));
+        newHeadStyleElement.appendChild(document.createTextNode(styleCSS));
       }
@@ -31,15 +31,20 @@ } else if (node.getAttribute('href')) {
         if (attr) {
-          newHeadStyleElements.setAttribute(attr.nodeName, attr.nodeValue || '');
+          newHeadStyleElement.setAttribute(attr.nodeName, attr.nodeValue || '');
         }
       }
       stylesheetLoadPromises.push(new Promise(resolve => {
-        newHeadStyleElements.addEventListener('load', () => resolve());
+        newHeadStyleElement.addEventListener('load', () => resolve());
       }));
     }
     if (nonce) {
-      newHeadStyleElements.nonce = nonce;
+      newHeadStyleElement.setAttribute('nonce', nonce);
     }
-    document.head.appendChild(newHeadStyleElements);
+    document.head.appendChild(newHeadStyleElement);
+    if (nonce) {
+      // I don't understand why we need to set the nonce again after appending the element, but I've tested it, and it's
+      // the only way I could find to fix Chrome's warning about a CSP violation.
+      newHeadStyleElement.setAttribute('nonce', nonce);
+    }
   }
   return stylesheetLoadPromises;
 }

esm/store/Store.d.ts

@@ -13,4 +13,7 @@ type Listener<T> = (value: T) => void;
   set<Key extends keyof State, T extends State[Key]>(key: Key, value: T): void;
+  use: <F extends (...args: any) => any>(selector: F, ...args: SelectorArgs<F>) => ReturnType<F>;
 }
 export type ReadonlyStore<State> = Pick<Store<State>, 'getSnapshot' | 'subscribe' | 'state'>;
+type SelectorArgs<Selector> = Selector extends ((...params: infer Params) => any) ? Tail<Params> : never;
+type Tail<T extends readonly any[]> = T extends readonly [any, ...infer Rest] ? Rest : [];
 export {};

esm/store/Store.js

 import _extends from "@babel/runtime/helpers/esm/extends";
+import { useStore } from "./useStore.js";
 /* eslint-disable no-cond-assign */
@@ -57,2 +58,5 @@
   }
+  use = (() => (selector, a1, a2, a3) => {
+    return useStore(this, selector, a1, a2, a3);
+  })();
 }

esm/store/useStore.js

@@ -0,7 +1,20 @@
+import * as React from 'react';
 /* We need to import the shim because React 17 does not support the `useSyncExternalStore` API.
  * More info: https://github.com/mui/mui-x/issues/18303#issuecomment-2958392341 */
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import reactMajor from "../reactMajor/index.js";
+/* Some tests fail in R18 with the raw useSyncExternalStore. It may be possible to make it work
+ * but for now we only enable it for R19+. */
+const canUseRawUseSyncExternalStore = reactMajor >= 19;
+const useStoreImplementation = canUseRawUseSyncExternalStore ? useStoreR19 : useStoreLegacy;
 export function useStore(store, selector, a1, a2, a3) {
-  const selectorWithArgs = state => selector(state, a1, a2, a3);
-  return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs);
+  return useStoreImplementation(store, selector, a1, a2, a3);
+}
+function useStoreR19(store, selector, a1, a2, a3) {
+  const getSelection = React.useCallback(() => selector(store.getSnapshot(), a1, a2, a3), [store, selector, a1, a2, a3]);
+  return useSyncExternalStore(store.subscribe, getSelection, getSelection);
+}
+function useStoreLegacy(store, selector, a1, a2, a3) {
+  return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, state => selector(state, a1, a2, a3));
 }

export/loadStyleSheets.js

@@ -19,3 +19,3 @@ "use strict";
     const node = headStyleElements[i];
-    const newHeadStyleElements = document.createElement(node.tagName);
+    const newHeadStyleElement = document.createElement(node.tagName);
     if (node.tagName === 'STYLE') {
@@ -30,3 +30,3 @@ const sheet = node.sheet;
         }
-        newHeadStyleElements.appendChild(document.createTextNode(styleCSS));
+        newHeadStyleElement.appendChild(document.createTextNode(styleCSS));
       }
@@ -37,15 +37,20 @@ } else if (node.getAttribute('href')) {
         if (attr) {
-          newHeadStyleElements.setAttribute(attr.nodeName, attr.nodeValue || '');
+          newHeadStyleElement.setAttribute(attr.nodeName, attr.nodeValue || '');
         }
       }
       stylesheetLoadPromises.push(new Promise(resolve => {
-        newHeadStyleElements.addEventListener('load', () => resolve());
+        newHeadStyleElement.addEventListener('load', () => resolve());
       }));
     }
     if (nonce) {
-      newHeadStyleElements.nonce = nonce;
+      newHeadStyleElement.setAttribute('nonce', nonce);
     }
-    document.head.appendChild(newHeadStyleElements);
+    document.head.appendChild(newHeadStyleElement);
+    if (nonce) {
+      // I don't understand why we need to set the nonce again after appending the element, but I've tested it, and it's
+      // the only way I could find to fix Chrome's warning about a CSP violation.
+      newHeadStyleElement.setAttribute('nonce', nonce);
+    }
   }
   return stylesheetLoadPromises;
 }

package.json

 {
   "name": "@mui/x-internals",
-  "version": "8.19.0",
+  "version": "8.21.0",
   "author": "MUI Team",
@@ -5,0 +5,0 @@ "description": "Utility functions for the MUI X packages (internal use only).",

store/Store.d.ts

@@ -13,4 +13,7 @@ type Listener<T> = (value: T) => void;
   set<Key extends keyof State, T extends State[Key]>(key: Key, value: T): void;
+  use: <F extends (...args: any) => any>(selector: F, ...args: SelectorArgs<F>) => ReturnType<F>;
 }
 export type ReadonlyStore<State> = Pick<Store<State>, 'getSnapshot' | 'subscribe' | 'state'>;
+type SelectorArgs<Selector> = Selector extends ((...params: infer Params) => any) ? Tail<Params> : never;
+type Tail<T extends readonly any[]> = T extends readonly [any, ...infer Rest] ? Rest : [];
 export {};

store/Store.js

@@ -9,2 +9,3 @@ "use strict";
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useStore = require("./useStore");
 /* eslint-disable no-cond-assign */
@@ -65,3 +66,6 @@
   }
+  use = (selector, a1, a2, a3) => {
+    return (0, _useStore.useStore)(this, selector, a1, a2, a3);
+  };
 }
 exports.Store = Store;

store/useStore.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -7,9 +9,22 @@ value: true
 exports.useStore = useStore;
+var React = _interopRequireWildcard(require("react"));
+var _shim = require("use-sync-external-store/shim");
 var _withSelector = require("use-sync-external-store/shim/with-selector");
+var _reactMajor = _interopRequireDefault(require("../reactMajor"));
 /* We need to import the shim because React 17 does not support the `useSyncExternalStore` API.
  * More info: https://github.com/mui/mui-x/issues/18303#issuecomment-2958392341 */
 
+/* Some tests fail in R18 with the raw useSyncExternalStore. It may be possible to make it work
+ * but for now we only enable it for R19+. */
+const canUseRawUseSyncExternalStore = _reactMajor.default >= 19;
+const useStoreImplementation = canUseRawUseSyncExternalStore ? useStoreR19 : useStoreLegacy;
 function useStore(store, selector, a1, a2, a3) {
-  const selectorWithArgs = state => selector(state, a1, a2, a3);
-  return (0, _withSelector.useSyncExternalStoreWithSelector)(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs);
+  return useStoreImplementation(store, selector, a1, a2, a3);
+}
+function useStoreR19(store, selector, a1, a2, a3) {
+  const getSelection = React.useCallback(() => selector(store.getSnapshot(), a1, a2, a3), [store, selector, a1, a2, a3]);
+  return (0, _shim.useSyncExternalStore)(store.subscribe, getSelection, getSelection);
+}
+function useStoreLegacy(store, selector, a1, a2, a3) {
+  return (0, _withSelector.useSyncExternalStoreWithSelector)(store.subscribe, store.getSnapshot, store.getSnapshot, state => selector(state, a1, a2, a3));
 }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

674816

1.59%

Lines of code

3584

1.47%

No dependency changes