Fixes #37882 - Remove @theforeman/vendor

theforeman · Oct 8, 2024 · 2319c8b · 2319c8b
1 parent 56b034d
commit 2319c8b
Show file tree

Hide file tree

Showing 14 changed files with 290 additions and 31 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1 @@
 engine-strict=true
-legacy-peer-deps=true
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -80,7 +80,7 @@ function onContentLoad() {
   password_caps_lock_hint();
 
   tfm.i18n.intl.ready.then(function() {
-    var tz = jstz.determine();
+    var tz = tfm.jstz.determine();
     $.cookie('timezone', tz.name(), {
       path: '/',
       secure: location.protocol === 'https:',

diff --git a/app/assets/javascripts/host_edit.js b/app/assets/javascripts/host_edit.js
@@ -402,12 +402,12 @@ function serializeForm() {
 }
 
 function subnet_contains(network, cidr, ip) {
-  if (!ip || 0 === ip.length || !ipaddr.isValid(ip)) {
+  if (!ip || 0 === ip.length || !tfm.ipaddr.isValid(ip)) {
     return;
   }
 
-  var addr = ipaddr.parse(ip);
-  var range = ipaddr.parse(network);
+  var addr = tfm.ipaddr.parse(ip);
+  var range = tfm.ipaddr.parse(network);
 
   return addr.match(range, cidr);
 }

diff --git a/app/assets/javascripts/subnets.js b/app/assets/javascripts/subnets.js
@@ -69,7 +69,7 @@ function subnetMaskChanged(field) {
   }
   if ($('input[id^=subnet_type_]:checked').val() === 'Subnet::Ipv4') {
     try {
-      var cidr = ipaddr.IPv4.parse(mask).prefixLengthFromSubnetMask();
+      var cidr = tfm.ipaddr.IPv4.parse(mask).prefixLengthFromSubnetMask();
     } catch (err) {
       var cidr = '';
     }

diff --git a/app/helpers/reactjs_helper.rb b/app/helpers/reactjs_helper.rb
@@ -36,13 +36,8 @@ def get_webpack_chunk(name, extension)
     data['assetsByChunkName'][name]&.find { |value| value.end_with?(".#{extension}") }
   end
 
-  def get_webpack_foreman_vendor_js
-    foreman_vendor_js = get_webpack_chunk('foreman-vendor', 'js')
-    javascript_include_tag("/webpack/#{foreman_vendor_js}")
-  end
-
   def get_webpack_foreman_vendor_css
-    foreman_vendor_css = get_webpack_chunk('foreman-vendor', 'css')
+    foreman_vendor_css = get_webpack_chunk('vendorStyles', 'css')
     stylesheet_link_tag("/webpack/#{foreman_vendor_css}")
   end
 

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -10,6 +10,7 @@
 
     <%= favicon_link_tag "favicon.ico"%>
 
+    <%= get_webpack_foreman_vendor_css %>
     <%= stylesheet_link_tag 'application' %>
     <%= yield(:stylesheets) %>
 
@@ -35,10 +36,10 @@
   </head>
 
   <body class='<%= body_css_classes %>'>
-    <%= get_webpack_foreman_vendor_js %>
+
     <%= javascript_include_tag("/webpack/#{get_webpack_chunk('vendor', 'js')}") %>
-    <%= javascript_include_tag("/webpack/#{get_webpack_chunk('bundle', 'js')}") %>
     <%= javascript_include_tag("/webpack/#{get_webpack_chunk('reactExports', 'js')}") %>
+    <%= javascript_include_tag("/webpack/#{get_webpack_chunk('bundle', 'js')}") %>
 
     <%= javascript_include_tag 'application' %>
     <%= webpacked_plugins_with_global_js %>

diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -4,9 +4,10 @@
 var path = require('path');
 var webpack = require('webpack');
 const dotenv = require('dotenv');
+const root = path.resolve(__dirname, '..');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 dotenv.config();
-var ForemanVendorPlugin = require('@theforeman/vendor')
-  .WebpackForemanVendorPlugin;
 var StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
 var vendorEntry = require('./webpack.vendor');
 var fs = require('fs');
@@ -15,6 +16,18 @@ var pluginUtils = require('../script/plugin_webpack_directories');
 var { generateExportsFile }= require('../webpack/assets/javascripts/exportAll');
 var CompressionPlugin = require('compression-webpack-plugin');
 
+const packageJsonPath = path.resolve(__dirname,'..', 'package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+const dependencies = packageJson.dependencies || {};
+const devDependencies = packageJson.devDependencies || {};
+const allDependencies = { ...dependencies, ...devDependencies };
+const shared = isPlugin => Object.keys(allDependencies).map(dep => ({
+  [dep]: {
+    eager: !isPlugin, // core should load all dependencies eagerly so they will be available for plugins
+    singleton: true,
+    requiredVersion: allDependencies[dep],
+  }}));
+
 class AddRuntimeRequirement {
   // to avoid "webpackRequire.l is not a function" error
   // enables use of webpack require inside promise new promise
@@ -79,11 +92,18 @@ const commonConfig = function() {
         os: require.resolve('os-browserify'),
       },
       alias: {
+        'patternfly-react$': path.resolve(__dirname,'..', 'node_modules/patternfly-react/dist/js/index.js'), // to avoid circular dependency in dist/esm
+        '/node_modules/jquery': path.resolve(__dirname, '..', 'webpack/assets/javascripts/jquery.js'),
+        'jquery': path.resolve(__dirname, '..', 'webpack/assets/javascripts/jquery.js'),
         foremanReact: path.join(
           __dirname,
           '../webpack/assets/javascripts/react_app'
         ),
+        'react/jsx-runtime': 'react/jsx-runtime.js', // for react-dnd
+        'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js', // for react-dnd
+
       },
+
     },
     resolveLoader: {
       modules: [path.resolve(__dirname, '..', 'node_modules')],
@@ -117,9 +137,6 @@ const commonConfig = function() {
       ],
     },
     plugins: [
-      new ForemanVendorPlugin({
-        mode,
-      }),
       new webpack.DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify(mode),
@@ -160,13 +177,18 @@ const coreConfig = function() {
   }
 
   config.entry = {
+    /* keep bundle entry files and reactExports seperate to avoid late loading issues of mixed files, import in react_app only from react_app and node_modules */
     bundle: { import: bundleEntry, dependOn: ['vendor', 'reactExports'] },
-    vendor: vendorEntry,
-    reactExports: path.join(
+    reactExports: {
+      import: path.join(
       __dirname,
       '..',
       'webpack/assets/javascripts/all_react_app_exports.js'
-    ),
+      ),
+      dependOn: 'vendor',
+     },
+     vendor: vendorEntry,
+     vendorStyles: path.join(__dirname, '..', 'webpack/assets/javascripts/react_app/common/scss/vendor-core.scss'),
   };
   config.output = {
     path: path.join(__dirname, '..', 'public', 'webpack'),
@@ -179,9 +201,12 @@ const coreConfig = function() {
   };
   var plugins = config.plugins;
 
+  plugins.push(
+    new MiniCssExtractPlugin());
   plugins.push(
     new ModuleFederationPlugin({
       name: 'foremanReact',
+      shared: shared(false),
     })
   );
   plugins.push(
@@ -191,8 +216,10 @@ const coreConfig = function() {
   );
   config.plugins = plugins;
   var rules = config.module.rules;
+
   rules.push({
     test: /\.(sa|sc|c)ss$/,
+    exclude: /vendor-core/i,
     use: [
       {
         loader: 'style-loader',
@@ -205,6 +232,14 @@ const coreConfig = function() {
       'sass-loader',
     ],
   });
+  rules.push({
+    test: /vendor-core/i,
+    use: [
+      MiniCssExtractPlugin.loader,
+      'css-loader',
+      'sass-loader',
+    ],
+  });
   config.module.rules = rules;
   return config;
 };
@@ -276,8 +311,10 @@ const pluginConfig = function(plugin) {
       name: pluginName,
       filename: pluginName + '_remoteEntry.js',
       exposes: pluginEntries,
+      shared: shared(true),
     })
   );
+
   config.plugins = plugins;
   var rules = config.module.rules;
   rules.push({

diff --git a/config/webpack.vendor.js b/config/webpack.vendor.js
@@ -1 +1,122 @@
-module.exports = ['react-intl', 'intl'];
+/* eslint-disable */
+
+module.exports = [
+  'intl',
+  /**
+   * React related
+   */
+  '@apollo/client',
+  '@apollo/client/link/batch-http',
+  '@reduxjs/toolkit',
+  'core-js/shim',
+  'regenerator-runtime/runtime',
+  'formik',
+  'rc-input-number',
+  'react',
+  'react-ace',
+  'react-dom',
+  'react-dnd',
+  'react-dnd-html5-backend',
+  'react-debounce-input',
+  'react-diff-view',
+  'react-ellipsis-with-tooltip',
+  'react-onclickoutside',
+  'react-password-strength',
+  'react-router-dom',
+  'react-router-bootstrap',
+  'react-loading-skeleton',
+  'react-redux',
+  'redux',
+  'redux-logger',
+  'redux-thunk',
+  'reselect',
+  'prop-types',
+  'classnames',
+  'seamless-immutable',
+  'connected-react-router',
+  'react-helmet',
+  'react-intl',
+
+  /**
+   * Patternfly related
+   */
+  'patternfly-react',
+  'patternfly-react-extensions',
+  '@patternfly/react-core',
+  '@patternfly/react-icons',
+  '@patternfly/react-table',
+  '@patternfly/react-tokens',
+  '@patternfly/react-styles',
+  '@patternfly/react-charts',
+  // '@redhat-cloud-services/frontend-components',
+
+  /**
+   * ace-builds related
+   */
+  'ace-builds',
+  'ace-builds/src-noconflict/ace',
+  'ace-builds/src-noconflict/ext-language_tools',
+  'ace-builds/src-noconflict/mode-ruby',
+  'ace-builds/src-noconflict/mode-json',
+  'ace-builds/src-noconflict/mode-sh',
+  'ace-builds/src-noconflict/mode-html_ruby',
+  'ace-builds/src-noconflict/mode-xml',
+  'ace-builds/src-noconflict/mode-yaml',
+  'ace-builds/src-noconflict/theme-github',
+  'ace-builds/src-noconflict/theme-monokai',
+  'ace-builds/src-noconflict/keybinding-vim',
+  'ace-builds/src-noconflict/keybinding-emacs',
+  'ace-builds/src-min-noconflict/ext-searchbox',
+
+  /**
+   * UUID
+   */
+  'uuid',
+  'uuid/v1',
+  'uuid/v3',
+  'uuid/v4',
+  'uuid/v5',
+
+  'jstz',
+  'diff',
+  /**
+   * Custom modules
+   */
+  // {
+  //   name: 'jquery',
+  //   path: '@theforeman/vendor-core/lib/customModules/jquery.js',
+  // },
+  // {
+  //   name: 'jstz',
+  //   window: 'jstz',
+  // },
+  // {
+  //   name: 'ipaddr.js',
+  //   window: 'ipaddr',
+  // },
+  // {
+  //   name: 'diff',
+  //   window: 'diff',
+  // },
+
+  /**
+   * Other packages
+   */
+  'history',
+  'number_helpers',
+  'lodash',
+  'axios',
+  'file-saver',
+  'humanize-duration',
+  'unidiff',
+  'urijs',
+  'yup',
+  'select2',
+  'multiselect',
+  '@novnc/novnc/core/rfb',
+  '@novnc/novnc',
+
+  // '@spice-project/spice-html5',
+  // '@webcomponents/webcomponentsjs/webcomponents-bundle',
+  // '@webcomponents/webcomponentsjs/custom-elements-es5-adapter',
+];