TECH-1166: Removed dependency to redux, add compatibility ranges

packages/design-system-kit/src/components/LeftNavigation/BurgerMenuButton.jsx

@@ -15,14 +15,14 @@ const styles = () => ({
         background: 'url(' + contextJsParameters.contextPath + '/engines/jahia-anthracite/images/dx_logo_solid.png) center/100% no-repeat'
     }
 });
-/* eslint-disable react/jsx-no-bind */
-export const BurgerMenuButton = ({classes, isDrawerOpen, title}) => {
-    function openMenu() {
-        const clickEvent = window.top.document.createEvent('MouseEvents');
-        clickEvent.initEvent('click', true, true);
-        window.top.document.getElementsByClassName('editmode-managers-menu')[0].dispatchEvent(clickEvent);
-    }
 
+function openMenu() {
+    const clickEvent = window.top.document.createEvent('MouseEvents');
+    clickEvent.initEvent('click', true, true);
+    window.top.document.getElementsByClassName('editmode-managers-menu')[0].dispatchEvent(clickEvent);
+}
+
+export const BurgerMenuButton = ({classes, isDrawerOpen, title}) => {
     if (isDrawerOpen) {
         return (
             <div className={classNames(classes.menuButton, classes.menuButtonBlue)}

packages/ui-extender/package.json

@@ -21,8 +21,6 @@
     "prop-types": "^15.6.1",
     "react": "^16.12.0",
     "react-iframe": "^1.8.0",
-    "react-redux": "^7.2.0",
-    "redux": "^4.0.5",
     "rxjs": "^6.5.3"
   }
 }

packages/ui-extender/src/IframeRenderer/IframeRenderer.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import Iframe from 'react-iframe';
 import PropTypes from 'prop-types';
 
-export const IframeRenderer = props => (
-    <Iframe width="100%"
-            height="100%"
-            {...props}
-            url={props.url}/>
-);
+export const IframeRenderer = props => {
+    if (window?.jahia?.ui?.IframeRenderer) {
+        // eslint-disable-next-line react/jsx-no-undef
+        return <window.jahia.ui.IframeRenderer {...props}/>;
+    }
+
+    return 'Jahia UI not loaded';
+};
 
 export const getIframeRenderer = url => {
     return <IframeRenderer url={url}/>;

packages/ui-extender/src/IframeRenderer/index.js

@@ -1 +1,2 @@
-export {IframeRendererContainer as IframeRenderer, getIframeRendererContainer as getIframeRenderer} from './IframeRenderer.container';
+export * from './IframeRenderer';
+

packages/webpack-config/getModuleFederationConfig.js

@@ -1,4 +1,5 @@
 const camelCase = require('camelcase').default;
+const semver = require('semver');
 
 const sharedDeps = [
     '@babel/polyfill',
@@ -60,12 +61,35 @@ const singletonDeps = [
     'formik'
 ];
 
+const compatRanges = {
+    react: ['16 - 18'],
+    'react-dom': ['16 - 18'],
+    'react-redux': ['7 - 8'],
+    '@jahia/moonstone': ['1 - 2']
+};
+
+const rangeRegexp = /([<>=.0-9-]+) ([<>=.0-9-]+)/;
+const getExtendedRange = (item, definedRange) => {
+    if (compatRanges[item]) {
+        const compatRange = compatRanges[item].find(r => semver.subset(definedRange, r));
+        if (compatRange) {
+            const definedRangeMatch = (new semver.Range(definedRange)).range.match(rangeRegexp);
+            const compatRangeMatch = (new semver.Range(compatRange)).range.match(rangeRegexp);
+            if (definedRangeMatch && compatRangeMatch) {
+                return definedRangeMatch[1] + ' ' + compatRangeMatch[2];
+            }
+        }
+    }
+
+    return definedRange;
+};
+
 var getModuleFederationConfig = (packageJson, config = {}, importList = []) => {
     const deps = packageJson.dependencies;
     const shared = sharedDeps.filter(item => deps[item]).reduce((acc, item) => ({
         ...acc,
         [item]: {
-            requiredVersion: deps[item],
+            requiredVersion: getExtendedRange(item, deps[item]),
             import: false
         }
     }), config.shared || {});

packages/webpack-config/getModuleFederationConfig.spec.js

@@ -7,7 +7,8 @@ const packageJson = {
     main: 'index.js',
     license: 'MIT',
     dependencies: {
-        react: '^16',
+        react: '^16.1.5',
+        i18next: '^16',
         dayjs: '1.8.21'
     }
 };
@@ -17,9 +18,9 @@ describe('getModuleFederationConfig', () => {
         const config = getModuleFederationConfig(packageJson);
         expect(config.name).toBe('testName');
         expect(config.library.name).toBe('appShell.remotes.testName');
-        expect(config.shared.react.requiredVersion).toBe(packageJson.dependencies.react);
-        expect(config.shared.react.import).toBe(false);
-        expect(config.shared.react.singleton).toBe(true);
+        expect(config.shared.i18next.requiredVersion).toBe(packageJson.dependencies.i18next);
+        expect(config.shared.i18next.import).toBe(false);
+        expect(config.shared.i18next.singleton).toBe(true);
         expect(config.shared.dayjs.requiredVersion).toBe(packageJson.dependencies.dayjs);
         expect(config.shared.dayjs.import).toBe(false);
         expect(config.shared.dayjs.singleton).toBe(undefined);
@@ -33,10 +34,10 @@ describe('getModuleFederationConfig', () => {
     });
 
     it('should accept import', () => {
-        const config = getModuleFederationConfig(packageJson, {}, ['react', 'dayjs']);
-        expect(config.shared.react.requiredVersion).toBe(packageJson.dependencies.react);
-        expect(config.shared.react.import).toBe(undefined);
-        expect(config.shared.react.singleton).toBe(true);
+        const config = getModuleFederationConfig(packageJson, {}, ['i18next', 'dayjs']);
+        expect(config.shared.i18next.requiredVersion).toBe(packageJson.dependencies.i18next);
+        expect(config.shared.i18next.import).toBe(undefined);
+        expect(config.shared.i18next.singleton).toBe(true);
         expect(config.shared.dayjs.requiredVersion).toBe(packageJson.dependencies.dayjs);
         expect(config.shared.dayjs.import).toBe(undefined);
         expect(config.shared.dayjs.singleton).toBe(undefined);
@@ -65,11 +66,16 @@ describe('getModuleFederationConfig', () => {
                 myLib: '^1.0.0'
             }
         }, []);
-        expect(config.shared.react.requiredVersion).toBe(packageJson.dependencies.react);
-        expect(config.shared.react.import).toBe(false);
-        expect(config.shared.react.singleton).toBe(true);
-        expect(config.shared.react.requiredVersion).toBe(packageJson.dependencies.react);
-        expect(config.shared.react.import).toBe(false);
+        expect(config.shared.i18next.requiredVersion).toBe(packageJson.dependencies.i18next);
+        expect(config.shared.i18next.import).toBe(false);
+        expect(config.shared.i18next.singleton).toBe(true);
+        expect(config.shared.dayjs.requiredVersion).toBe(packageJson.dependencies.dayjs);
+        expect(config.shared.dayjs.import).toBe(false);
         expect(config.shared.myLib).toBe('^1.0.0');
     });
+
+    it('should create base config', () => {
+        const config = getModuleFederationConfig(packageJson, {}, ['i18next', 'dayjs']);
+        expect(config.shared.react.requiredVersion).toBe('>=16.1.5 <19.0.0-0');
+    });
 });

packages/webpack-config/package.json

@@ -8,6 +8,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "camelcase": "5"
+    "camelcase": "5",
+    "semver": "^7.4.0"
   }
 }