@instructure/ui-react-utils - npm Package Compare versions

Comparing version 10.14.1-snapshot-9 to 10.15.0

CHANGELOG.md

@@ -6,10 +6,13 @@ # Change Log
 
-## [10.14.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-9) (2025-03-28)
+# [10.15.0](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.15.0) (2025-03-31)
 
-**Note:** Version bump only for package @instructure/ui-react-utils
 
+### Bug Fixes
 
+* **many:** fix having the same DOM ids if there are multiple instances of InstUI, e.g. module federation ([a0bb4d0](https://github.com/instructure/instructure-ui/commit/a0bb4d0a8d0f8bcca8f565883f56b599eec66fc9))
 
 
 
+
+
 # [10.14.0](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.14.0) (2025-03-17)
@@ -16,0 +19,0 @@

es/__new-tests__/DeterministicIdContext.test.js

@@ -1,2 +0,2 @@
-var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3;
+var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3, _div4;
 /*
@@ -29,3 +29,3 @@ * The MIT License (MIT)
 import '@testing-library/jest-dom';
-import { withDeterministicId, DeterministicIdContextProvider, generateInstanceCounterMap } from '../DeterministicIdContext';
+import { withDeterministicId, DeterministicIdContextProvider } from '../DeterministicIdContext';
 let TestComponent = (_dec = withDeterministicId(), _dec(_class = (_TestComponent = class TestComponent extends React.Component {
@@ -74,5 +74,3 @@ render() {
     }) => {
-      return /*#__PURE__*/React.createElement(DeterministicIdContextProvider, {
-        instanceCounterMap: generateInstanceCounterMap()
-      }, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(DeterministicIdContextProvider, null, /*#__PURE__*/React.createElement("div", {
         "data-testid": "wrapper"
@@ -91,2 +89,12 @@ }, children));
   });
+  it('should use a global object for ID counter', () => {
+    const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__';
+    const counterValue = 345;
+    globalThis[instUIInstanceCounter].set('TestComponent', counterValue);
+    render(_div4 || (_div4 = /*#__PURE__*/React.createElement("div", {
+      "data-testid": "test-components"
+    }, /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null))));
+    const instanceCounter = globalThis[instUIInstanceCounter];
+    expect(instanceCounter.get('TestComponent')).toBe(counterValue + 5);
+  });
 });

es/DeterministicIdContext/DeterministicIdContext.js

@@ -25,5 +25,20 @@ /*
 import React from 'react';
-import { generateInstanceCounterMap } from './generateInstanceCounterMap';
+const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__';
+
+/**
+ * Returns a global (window-level) instance counter map.
+ * This needs to be global so that IDs are unique across application instances,
+ * e.g. in module federation applications are loaded as a .js blob, this method
+ * makes sure that there are no duplicate IDs across instances.
+ */
+function generateInstanceCounterMap() {
+  if (globalThis[instUIInstanceCounter]) {
+    return globalThis[instUIInstanceCounter];
+  }
+  const map = new Map();
+  globalThis[instUIInstanceCounter] = map;
+  return map;
+}
 const defaultDeterministicIDMap = generateInstanceCounterMap();
 const DeterministicIdContext = /*#__PURE__*/React.createContext(defaultDeterministicIDMap);
 export { DeterministicIdContext, defaultDeterministicIDMap };

es/DeterministicIdContext/DeterministicIdContextProvider.js

@@ -38,3 +38,2 @@ /*
  */
-
 const DeterministicIdContextProvider = ({
@@ -41,0 +40,0 @@ children,

es/DeterministicIdContext/index.js

@@ -25,5 +25,4 @@ /*
 
-export { generateInstanceCounterMap } from './generateInstanceCounterMap';
 export { DeterministicIdContextProvider } from './DeterministicIdContextProvider';
 export { DeterministicIdContext } from './DeterministicIdContext';
 export { withDeterministicId } from './withDeterministicId';

es/index.js

@@ -40,2 +40,2 @@ /*
 export { windowMessageListener } from './windowMessageListener';
-export { DeterministicIdContext, generateInstanceCounterMap, DeterministicIdContextProvider, withDeterministicId } from './DeterministicIdContext';
+export { DeterministicIdContext, DeterministicIdContextProvider, withDeterministicId } from './DeterministicIdContext';

lib/__new-tests__/DeterministicIdContext.test.js

@@ -8,3 +8,3 @@ "use strict";
 var _DeterministicIdContext = require("../DeterministicIdContext");
-var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3;
+var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3, _div4;
 /*
@@ -76,5 +76,3 @@ * The MIT License (MIT)
     }) => {
-      return /*#__PURE__*/_react.default.createElement(_DeterministicIdContext.DeterministicIdContextProvider, {
-        instanceCounterMap: (0, _DeterministicIdContext.generateInstanceCounterMap)()
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_DeterministicIdContext.DeterministicIdContextProvider, null, /*#__PURE__*/_react.default.createElement("div", {
         "data-testid": "wrapper"
@@ -93,2 +91,12 @@ }, children));
   });
+  it('should use a global object for ID counter', () => {
+    const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__';
+    const counterValue = 345;
+    globalThis[instUIInstanceCounter].set('TestComponent', counterValue);
+    (0, _react2.render)(_div4 || (_div4 = /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "test-components"
+    }, /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null))));
+    const instanceCounter = globalThis[instUIInstanceCounter];
+    expect(instanceCounter.get('TestComponent')).toBe(counterValue + 5);
+  });
 });

lib/DeterministicIdContext/DeterministicIdContext.js

@@ -9,3 +9,2 @@ "use strict";
 var _react = _interopRequireDefault(require("react"));
-var _generateInstanceCounterMap = require("./generateInstanceCounterMap");
 /*
@@ -35,3 +34,19 @@ * The MIT License (MIT)
 
-const defaultDeterministicIDMap = exports.defaultDeterministicIDMap = (0, _generateInstanceCounterMap.generateInstanceCounterMap)();
+const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__';
+
+/**
+ * Returns a global (window-level) instance counter map.
+ * This needs to be global so that IDs are unique across application instances,
+ * e.g. in module federation applications are loaded as a .js blob, this method
+ * makes sure that there are no duplicate IDs across instances.
+ */
+function generateInstanceCounterMap() {
+  if (globalThis[instUIInstanceCounter]) {
+    return globalThis[instUIInstanceCounter];
+  }
+  const map = new Map();
+  globalThis[instUIInstanceCounter] = map;
+  return map;
+}
+const defaultDeterministicIDMap = exports.defaultDeterministicIDMap = generateInstanceCounterMap();
 const DeterministicIdContext = exports.DeterministicIdContext = /*#__PURE__*/_react.default.createContext(defaultDeterministicIDMap);

lib/DeterministicIdContext/DeterministicIdContextProvider.js

@@ -46,3 +46,2 @@ "use strict";
  */
-
 const DeterministicIdContextProvider = ({
@@ -49,0 +48,0 @@ children,

lib/DeterministicIdContext/index.js

@@ -18,8 +18,2 @@ "use strict";
 });
-Object.defineProperty(exports, "generateInstanceCounterMap", {
-  enumerable: true,
-  get: function () {
-    return _generateInstanceCounterMap.generateInstanceCounterMap;
-  }
-});
 Object.defineProperty(exports, "withDeterministicId", {
@@ -31,5 +25,4 @@ enumerable: true,
 });
-var _generateInstanceCounterMap = require("./generateInstanceCounterMap");
 var _DeterministicIdContextProvider = require("./DeterministicIdContextProvider");
 var _DeterministicIdContext = require("./DeterministicIdContext");
 var _withDeterministicId = require("./withDeterministicId");

lib/index.js

@@ -42,8 +42,2 @@ "use strict";
 });
-Object.defineProperty(exports, "generateInstanceCounterMap", {
-  enumerable: true,
-  get: function () {
-    return _DeterministicIdContext.generateInstanceCounterMap;
-  }
-});
 Object.defineProperty(exports, "getDisplayName", {
@@ -50,0 +44,0 @@ enumerable: true,

package.json

 {
   "name": "@instructure/ui-react-utils",
-  "version": "10.14.1-snapshot-9",
+  "version": "10.15.0",
   "description": "A React utility library made by Instructure Inc.",
@@ -25,3 +25,3 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.14.1-snapshot-9",
+    "@instructure/ui-babel-preset": "10.15.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -34,7 +34,7 @@ "@testing-library/react": "^16.0.1",
     "@emotion/is-prop-valid": "^1.3.1",
-    "@instructure/console": "10.14.1-snapshot-9",
-    "@instructure/shared-types": "10.14.1-snapshot-9",
-    "@instructure/ui-decorator": "10.14.1-snapshot-9",
-    "@instructure/ui-dom-utils": "10.14.1-snapshot-9",
-    "@instructure/ui-utils": "10.14.1-snapshot-9",
+    "@instructure/console": "10.15.0",
+    "@instructure/shared-types": "10.15.0",
+    "@instructure/ui-decorator": "10.15.0",
+    "@instructure/ui-dom-utils": "10.15.0",
+    "@instructure/ui-utils": "10.15.0",
     "hoist-non-react-statics": "^3.3.2",
@@ -41,0 +41,0 @@ "prop-types": "^15.8.1"

src/DeterministicIdContext/DeterministicIdContext.ts

@@ -25,7 +25,29 @@ /*
 import React from 'react'
-import { generateInstanceCounterMap } from './generateInstanceCounterMap'
+import type { DeterministicIdProviderValue } from './DeterministicIdContextProvider'
 
+declare global {
+  // eslint-disable-next-line no-var
+  var __INSTUI_GLOBAL_INSTANCE_COUNTER__: Map<string, number>
+}
+const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__'
+
+/**
+ * Returns a global (window-level) instance counter map.
+ * This needs to be global so that IDs are unique across application instances,
+ * e.g. in module federation applications are loaded as a .js blob, this method
+ * makes sure that there are no duplicate IDs across instances.
+ */
+function generateInstanceCounterMap(): DeterministicIdProviderValue {
+  if (globalThis[instUIInstanceCounter]) {
+    return globalThis[instUIInstanceCounter]
+  }
+  const map = new Map<string, number>()
+  globalThis[instUIInstanceCounter] = map
+  return map
+}
+
 const defaultDeterministicIDMap = generateInstanceCounterMap()
+
 const DeterministicIdContext = React.createContext(defaultDeterministicIDMap)
 
 export { DeterministicIdContext, defaultDeterministicIDMap }

src/DeterministicIdContext/index.ts

@@ -25,3 +25,2 @@ /*
 
-export { generateInstanceCounterMap } from './generateInstanceCounterMap'
 export { DeterministicIdContextProvider } from './DeterministicIdContextProvider'
@@ -28,0 +27,0 @@ export { DeterministicIdContext } from './DeterministicIdContext'

src/index.ts

@@ -42,3 +42,2 @@ /*
   DeterministicIdContext,
-  generateInstanceCounterMap,
   DeterministicIdContextProvider,
@@ -45,0 +44,0 @@ withDeterministicId

types/DeterministicIdContext/DeterministicIdContext.d.ts

 import React from 'react';
-declare const defaultDeterministicIDMap: import("./DeterministicIdContextProvider").DeterministicIdProviderValue;
-declare const DeterministicIdContext: React.Context<import("./DeterministicIdContextProvider").DeterministicIdProviderValue>;
+import type { DeterministicIdProviderValue } from './DeterministicIdContextProvider';
+declare global {
+    var __INSTUI_GLOBAL_INSTANCE_COUNTER__: Map<string, number>;
+}
+declare const defaultDeterministicIDMap: DeterministicIdProviderValue;
+declare const DeterministicIdContext: React.Context<DeterministicIdProviderValue>;
 export { DeterministicIdContext, defaultDeterministicIDMap };
 //# sourceMappingURL=DeterministicIdContext.d.ts.map

types/DeterministicIdContext/DeterministicIdContextProvider.d.ts

 import React from 'react';
 type DeterministicIdProviderValue = Map<string, number>;
 type DeterministicIdProviderProps = React.PropsWithChildren<{
+    /**
+     * @deprecated the `instanceCounterMap` prop is deprecated. You don't need to
+     * supply the `instanceCounterMap` to the component. It handles it internally.
+     * If you use this make sure that it generates unique IDs across app instances
+     * like in module federation.
+     */
     instanceCounterMap?: DeterministicIdProviderValue;
@@ -5,0 +11,0 @@ }>;

types/DeterministicIdContext/index.d.ts

@@ -1,2 +0,1 @@
-export { generateInstanceCounterMap } from './generateInstanceCounterMap';
 export { DeterministicIdContextProvider } from './DeterministicIdContextProvider';
@@ -3,0 +2,0 @@ export { DeterministicIdContext } from './DeterministicIdContext';

types/index.d.ts

@@ -15,3 +15,3 @@ export { callRenderProp } from './callRenderProp';
 export { windowMessageListener } from './windowMessageListener';
-export { DeterministicIdContext, generateInstanceCounterMap, DeterministicIdContextProvider, withDeterministicId } from './DeterministicIdContext';
+export { DeterministicIdContext, DeterministicIdContextProvider, withDeterministicId } from './DeterministicIdContext';
 export type { GetInteractionOptions } from './getInteraction';
@@ -18,0 +18,0 @@ export type { InteractionType } from './getInteraction';

Fixed alerts

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

Improved metrics

Number of low quality alerts

0

-100%

Worsened metrics

Total package byte prevSize

455854

-0.29%

Number of package files

152

-3.18%

Lines of code

7795

-0.19%

Dependency changes

• + Added

  @instructure/console@10.15.0
  (transitive)

• + Added

  @instructure/shared-types@10.15.0
  (transitive)

• + Added

  @instructure/ui-decorator@10.15.0
  (transitive)

• + Added

  @instructure/ui-dom-utils@10.15.0
  (transitive)

• + Added

  @instructure/ui-utils@10.15.0
  (transitive)

• - Removed

  @instructure/console@10.14.1-snapshot-9
  (transitive)

• - Removed

  @instructure/shared-types@10.14.1-snapshot-9
  (transitive)

• - Removed

  @instructure/ui-decorator@10.14.1-snapshot-9
  (transitive)

• - Removed

  @instructure/ui-dom-utils@10.14.1-snapshot-9
  (transitive)

• - Removed

  @instructure/ui-utils@10.14.1-snapshot-9
  (transitive)

• Updated

  @instructure/console@10.15.0

• Updated

  @instructure/shared-types@10.15.0

• Updated

  @instructure/ui-decorator@10.15.0

• Updated

  @instructure/ui-dom-utils@10.15.0

• Updated

  @instructure/ui-utils@10.15.0