chayns-api 2.0.10 → 2.1.1

package/dist/cjs/components/withCompatMode.js

@@ -68,18 +68,14 @@ const withCompatMode = Component => {
     }
   }
   return {
-    Component: /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
-      innerRef: ref
-    })))),
-    CompatComponent: /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(CompatComponent, _extends({}, props, {
-      innerRef: ref
-    }))),
+    Component: props => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Component, props)),
+    CompatComponent,
     // @ts-expect-error will be set by chayns-toolkit via DefinePlugin
     requiredVersion: __REQUIRED_REACT_VERSION__,
     environment: process.env.NODE_ENV,
     buildEnv: process.env.BUILD_ENV || process.env.NODE_ENV,
     appVersion: process.env.VERSION,
-    version: 2
+    version: 2.1
   };
 };
 exports.withCompatMode = withCompatMode;

package/dist/cjs/host/module/utils/loadComponent.js

@@ -51,7 +51,8 @@ const loadComponent = (scope, module, url, skipCompatMode = false, preventSingle
     console.warn('[chayns-api] skipCompatMode-option is deprecated and is set automatically now');
   }
   const {
-    loadShareSync
+    loadShareSync,
+    getInstance
   } = globalThis.moduleFederationRuntime;
   const {
     componentMap
@@ -69,23 +70,51 @@ const loadComponent = (scope, module, url, skipCompatMode = false, preventSingle
         requiredVersion,
         environment
       } = Module.default;
-      const shareScopes = await new Promise(resolve => {
+      const shareScopes = typeof getInstance === 'function' ? getInstance().shareScopeMap : await new Promise(resolve => {
         loadShareSync('react', {
           resolver: shareOptions => {
-            resolve(shareOptions);
+            const optionsMap = shareOptions.reduce((p, e) => {
+              p[e.version] = e;
+              e.version;
+              return p;
+            }, {});
+            resolve({
+              'chayns-api': optionsMap
+            });
             return shareOptions[0];
           }
         });
       });
-      const matchReactVersion = requiredVersion && _semver.default.satisfies(hostVersion, requiredVersion) && !shareScopes.some(({
+      const matchReactVersion = requiredVersion && _semver.default.satisfies(hostVersion, requiredVersion) && !Object.values(shareScopes['chayns-api'].react).some(({
         version,
         from
       }) => {
         return _semver.default.gt(version, hostVersion) && _semver.default.satisfies(version, requiredVersion) || scope === from.split('-').join('_');
       });
-      if (!matchReactVersion || environment !== 'production' || process.env.NODE_ENV === 'development' || Module.default.version !== 2) {
+      if (!matchReactVersion || environment !== 'production' || process.env.NODE_ENV === 'development' || (Module.default.version || 1) < 2) {
+        const OriginalCompatComponent = (Module.default.version || 1) < 2.1 ? Module.default.CompatComponent.render({}).type.prototype : Module.default.CompatComponent.prototype;
+        class CompatComponent extends _react.default.Component {
+          constructor(props) {
+            super(props);
+            this.ref = /*#__PURE__*/_react.default.createRef();
+          }
+          componentDidMount() {
+            OriginalCompatComponent.componentDidMount.apply(this);
+          }
+          componentDidUpdate(prevProps, prevState, snapshot) {
+            OriginalCompatComponent.componentDidUpdate.apply(this, prevProps, prevState, snapshot);
+          }
+          componentWillUnmount() {
+            OriginalCompatComponent.componentWillUnmount.apply(this);
+          }
+          render() {
+            return /*#__PURE__*/_react.default.createElement('div', {
+              ref: this.ref
+            });
+          }
+        }
         return {
-          default: Module.default.CompatComponent
+          default: CompatComponent
         };
       }
       return {

package/dist/cjs/util/initModuleFederationSharing.js

@@ -7,6 +7,12 @@ exports.initModuleFederationSharing = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let ReactDOMClient;
+try {
+  ReactDOMClient = require('react-dom/client');
+} catch (e) {
+  // do nothing
+}
 const initModuleFederationSharing = ({
   name
 }) => {
@@ -23,22 +29,30 @@ const initModuleFederationSharing = ({
   const {
     init
   } = globalThis.moduleFederationRuntime;
+  const shared = {
+    react: {
+      version: _react.default.version,
+      scope: 'chayns-api',
+      lib: () => _react.default
+    },
+    'react-dom': {
+      version: _react.default.version,
+      // intended, because react dom.version is not identical to package json react version (hash in version)
+      scope: 'chayns-api',
+      lib: () => _reactDom.default
+    }
+  };
+  if (ReactDOMClient) {
+    shared['react-dom/client'] = {
+      version: _react.default.version,
+      scope: 'chayns-api',
+      lib: () => ReactDOMClient
+    };
+  }
   init({
     name: name !== null && name !== void 0 ? name : '',
     remotes: [],
-    shared: {
-      react: {
-        version: _react.default.version,
-        scope: 'chayns-api',
-        lib: () => _react.default
-      },
-      'react-dom': {
-        version: _react.default.version,
-        // intended, because react dom.version is not identical to package json react version (hash in version)
-        scope: 'chayns-api',
-        lib: () => _reactDom.default
-      }
-    }
+    shared
   });
 };
 exports.initModuleFederationSharing = initModuleFederationSharing;

package/dist/esm/components/withCompatMode.js

@@ -61,17 +61,13 @@ export const withCompatMode = Component => {
     }
   }
   return {
-    Component: /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      innerRef: ref
-    })))),
-    CompatComponent: /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(CompatComponent, _extends({}, props, {
-      innerRef: ref
-    }))),
+    Component: props => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Component, props)),
+    CompatComponent,
     // @ts-expect-error will be set by chayns-toolkit via DefinePlugin
     requiredVersion: __REQUIRED_REACT_VERSION__,
     environment: process.env.NODE_ENV,
     buildEnv: process.env.BUILD_ENV || process.env.NODE_ENV,
     appVersion: process.env.VERSION,
-    version: 2
+    version: 2.1
   };
 };

package/dist/esm/host/module/utils/loadComponent.js

@@ -46,7 +46,8 @@ const loadComponent = function (scope, module, url) {
     console.warn('[chayns-api] skipCompatMode-option is deprecated and is set automatically now');
   }
   const {
-    loadShareSync
+    loadShareSync,
+    getInstance
   } = globalThis.moduleFederationRuntime;
   const {
     componentMap
@@ -64,24 +65,52 @@ const loadComponent = function (scope, module, url) {
         requiredVersion,
         environment
       } = Module.default;
-      const shareScopes = await new Promise(resolve => {
+      const shareScopes = typeof getInstance === 'function' ? getInstance().shareScopeMap : await new Promise(resolve => {
         loadShareSync('react', {
           resolver: shareOptions => {
-            resolve(shareOptions);
+            const optionsMap = shareOptions.reduce((p, e) => {
+              p[e.version] = e;
+              e.version;
+              return p;
+            }, {});
+            resolve({
+              'chayns-api': optionsMap
+            });
             return shareOptions[0];
           }
         });
       });
-      const matchReactVersion = requiredVersion && semver.satisfies(hostVersion, requiredVersion) && !shareScopes.some(_ref => {
+      const matchReactVersion = requiredVersion && semver.satisfies(hostVersion, requiredVersion) && !Object.values(shareScopes['chayns-api'].react).some(_ref => {
         let {
           version,
           from
         } = _ref;
         return semver.gt(version, hostVersion) && semver.satisfies(version, requiredVersion) || scope === from.split('-').join('_');
       });
-      if (!matchReactVersion || environment !== 'production' || process.env.NODE_ENV === 'development' || Module.default.version !== 2) {
+      if (!matchReactVersion || environment !== 'production' || process.env.NODE_ENV === 'development' || (Module.default.version || 1) < 2) {
+        const OriginalCompatComponent = (Module.default.version || 1) < 2.1 ? Module.default.CompatComponent.render({}).type.prototype : Module.default.CompatComponent.prototype;
+        class CompatComponent extends React.Component {
+          constructor(props) {
+            super(props);
+            this.ref = /*#__PURE__*/React.createRef();
+          }
+          componentDidMount() {
+            OriginalCompatComponent.componentDidMount.apply(this);
+          }
+          componentDidUpdate(prevProps, prevState, snapshot) {
+            OriginalCompatComponent.componentDidUpdate.apply(this, prevProps, prevState, snapshot);
+          }
+          componentWillUnmount() {
+            OriginalCompatComponent.componentWillUnmount.apply(this);
+          }
+          render() {
+            return /*#__PURE__*/React.createElement('div', {
+              ref: this.ref
+            });
+          }
+        }
         return {
-          default: Module.default.CompatComponent
+          default: CompatComponent
         };
       }
       return {

package/dist/esm/util/initModuleFederationSharing.js

@@ -1,5 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+let ReactDOMClient;
+try {
+  ReactDOMClient = require('react-dom/client');
+} catch (e) {
+  // do nothing
+}
 export const initModuleFederationSharing = _ref => {
   let {
     name
@@ -17,21 +23,29 @@ export const initModuleFederationSharing = _ref => {
   const {
     init
   } = globalThis.moduleFederationRuntime;
+  const shared = {
+    react: {
+      version: React.version,
+      scope: 'chayns-api',
+      lib: () => React
+    },
+    'react-dom': {
+      version: React.version,
+      // intended, because react dom.version is not identical to package json react version (hash in version)
+      scope: 'chayns-api',
+      lib: () => ReactDOM
+    }
+  };
+  if (ReactDOMClient) {
+    shared['react-dom/client'] = {
+      version: React.version,
+      scope: 'chayns-api',
+      lib: () => ReactDOMClient
+    };
+  }
   init({
     name: name !== null && name !== void 0 ? name : '',
     remotes: [],
-    shared: {
-      react: {
-        version: React.version,
-        scope: 'chayns-api',
-        lib: () => React
-      },
-      'react-dom': {
-        version: React.version,
-        // intended, because react dom.version is not identical to package json react version (hash in version)
-        scope: 'chayns-api',
-        lib: () => ReactDOM
-      }
-    }
+    shared
   });
 };

package/dist/types/components/withCompatMode.d.ts

@@ -1,10 +1,39 @@
+/// <reference types="node" />
 import React, { RefObject } from 'react';
 type Props = {
     innerRef?: RefObject<unknown>;
 } & object;
 export declare const withCompatMode: <P extends Props>(Component: React.ComponentType<P>) => {
-    Component: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-    CompatComponent: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+    Component: (props: any) => React.JSX.Element;
+    CompatComponent: {
+        new (props: P): {
+            ref: RefObject<HTMLDivElement>;
+            root: any;
+            timeout?: NodeJS.Timeout | undefined;
+            componentDidMount(): void;
+            componentDidUpdate(): void;
+            componentWillUnmount(): void;
+            render(): React.JSX.Element;
+            context: unknown;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<P>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        contextType?: React.Context<any> | undefined;
+    };
     requiredVersion: any;
     environment: string | undefined;
     buildEnv: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "chayns-api",
-    "version": "2.0.10",
+    "version": "2.1.1",
     "description": "new chayns api",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -82,7 +82,7 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "react": "^16.8 || ^17.0.1 || ^18.0.0",
-        "react-dom": "^16.8 || ^17.0.1 || ^18.0.0"
+        "react": "^16.8 || ^17.0.1 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8 || ^17.0.1 || ^18.0.0 || ^19.0.0"
     }
 }