@centreon/js-config 24.5.5 → 24.5.7

package/cypress/component/configuration.js

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { devServer } = require('cypress-rspack-dev-server');
 const { defineConfig } = require('cypress');
 const {
   addMatchImageSnapshotPlugin
@@ -7,22 +6,22 @@ const {
 const cypressCodeCoverageTask = require('@cypress/code-coverage/task');
 
 module.exports = ({
-  rspackConfig,
+  webpackConfig,
   cypressFolder,
   specPattern,
   env,
+  useVite = false,
   excludeSpecPattern
 }) => {
   const mainCypressFolder = cypressFolder || 'cypress';
 
   return defineConfig({
     component: {
-      devServer: (devServerConfig) =>
-        devServer({
-          ...devServerConfig,
-          framework: 'react',
-          rspackConfig
-        }),
+      devServer: {
+        bundler: useVite ? 'vite' : 'webpack',
+        framework: 'react',
+        webpackConfig
+      },
       excludeSpecPattern,
       setupNodeEvents: (on, config) => {
         addMatchImageSnapshotPlugin(on, config);

package/cypress/e2e/commands.ts

@@ -518,10 +518,6 @@ Cypress.Commands.add('stopContainers', (): Cypress.Chainable => {
     .createDirectory(logDirectory)
     .getContainersLogs()
     .then((containersLogs: Array<Array<string>>) => {
-      if (!containersLogs) {
-        return;
-      }
-
       Object.entries(containersLogs).forEach(([containerName, logs]) => {
         cy.writeFile(
           `results/logs/${Cypress.spec.name.replace(
@@ -747,7 +743,7 @@ Cypress.Commands.add(
 
 Cypress.Commands.add('getTimeFromHeader', (): Cypress.Chainable => {
   return cy
-    .get('header div[data-cy="clock"]', { timeout: 20000 })
+    .get('header div[data-cy="clock"]', { timeout: 10000 })
     .should('be.visible')
     .then(($time) => {
       const headerTime = $time.children()[1].textContent;

package/cypress/e2e/configuration.ts

@@ -38,7 +38,7 @@ export default ({
 
   return defineConfig({
     chromeWebSecurity: false,
-    defaultCommandTimeout: 20000,
+    defaultCommandTimeout: 6000,
     downloadsFolder: `${resultsFolder}/downloads`,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
@@ -66,7 +66,7 @@ export default ({
       WEB_IMAGE_VERSION: webImageVersion
     },
     execTimeout: 60000,
-    requestTimeout: 20000,
+    requestTimeout: 10000,
     retries: 0,
     screenshotsFolder: `${resultsFolder}/screenshots`,
     video: isDevelopment,

package/cypress/e2e/plugins.ts

@@ -23,10 +23,11 @@ export default (
       launchOptions.args.push('--hide-scrollbars');
       launchOptions.args.push('--mute-audio');
 
+      launchOptions.args.push(`--window-size=${width},${height}`);
+
       // force screen to be non-retina and just use our given resolution
       launchOptions.args.push('--force-device-scale-factor=1');
     }
-
     launchOptions.args.push(`--window-size=${width},${height}`);
 
     return launchOptions;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@centreon/js-config",
     "description": "Centreon Frontend shared build configuration",
-    "version": "24.5.5",
+    "version": "24.5.7",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/centreon/centreon-frontend.git"
@@ -16,6 +16,13 @@
         "url": "https://github.com/centreon/centreon-frontend/issues"
     },
     "homepage": "https://github.com/centreon/centreon-frontend#readme",
+    "files": [
+        "eslint",
+        "jest",
+        "tsconfig",
+        "webpack",
+        "cypress"
+    ],
     "peerDependencies": {
         "eslint": "^8.53.0",
         "prettier": "^3.0.0"

package/{rspack → webpack}/base/globalConfig.js

@@ -1,71 +1,76 @@
-const isDev = process.env.NODE_ENV !== 'production';
-
-const excludeNodeModulesExceptCentreonUi =
-  /node_modules(\\|\/)\.pnpm(\\|\/)(?!(@centreon|file\+packages\+ui-context))/;
-
-module.exports = {
-  cache: false,
-  excludeNodeModulesExceptCentreonUi,
-  getModuleConfiguration: (enableCoverage) => ({
-    rules: [
-      {
-        exclude: [excludeNodeModulesExceptCentreonUi],
-        test: /\.[jt]sx?$/,
-        use: {
-          loader: 'swc-loader',
-          options: {
-            jsc: {
-              experimental: {
-                plugins: [
-                  enableCoverage && ['swc-plugin-coverage-instrument', {}]
-                ].filter(Boolean)
-              },
-              parser: {
-                syntax: 'typescript',
-                tsx: true
-              },
-              transform: {
-                react: {
-                  development: isDev,
-                  refresh: isDev
-                }
-              }
-            }
-          }
-        }
-      },
-      {
-        test: /\.icon.svg$/,
-        use: ['@svgr/webpack']
-      },
-      {
-        exclude: excludeNodeModulesExceptCentreonUi,
-        test: /\.(bmp|png|jpg|jpeg|gif|svg)$/,
-        type: 'asset/inline'
-      },
-      {
-        generator: {
-          filename: '[name][ext]'
-        },
-        test: /\.(woff|woff2|eot|ttf|otf)$/i,
-        type: 'asset/resource'
-      },
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader']
-      }
-    ]
-  }),
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      maxSize: 400 * 1024
-    }
-  },
-  output: {
-    chunkFilename: '[name].[chunkhash:8].chunk.js',
-    filename: '[name].[chunkhash:8].js',
-    libraryTarget: 'umd',
-    umdNamedDefine: true
-  }
-};
+const excludeNodeModulesExceptCentreonUi =
+  /node_modules(\\|\/)\.pnpm(\\|\/)(?!(@centreon|file\+packages\+ui-context))/;
+
+module.exports = {
+  cache: false,
+  excludeNodeModulesExceptCentreonUi,
+  getModuleConfiguration: (jscTransformConfiguration, enableCoverage) => ({
+    rules: [
+      {
+        parser: { system: false },
+        test: /\.[cm]?(j|t)sx?$/
+      },
+      {
+        exclude: [excludeNodeModulesExceptCentreonUi],
+        test: /\.[jt]sx?$/,
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              experimental: {
+                plugins: [
+                  enableCoverage && ['swc-plugin-coverage-instrument', {}]
+                ].filter(Boolean)
+              },
+              parser: {
+                syntax: 'typescript',
+                tsx: true
+              },
+              transform: jscTransformConfiguration
+            }
+          }
+        }
+      },
+      {
+        test: /\.icon.svg$/,
+        use: ['@svgr/webpack']
+      },
+      {
+        exclude: excludeNodeModulesExceptCentreonUi,
+        test: /\.(bmp|png|jpg|jpeg|gif|svg)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              name: '[name].[hash:8].[ext]'
+            }
+          }
+        ]
+      },
+      {
+        generator: {
+          filename: '[name][ext]'
+        },
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource'
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  }),
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      maxSize: 400 * 1024
+    }
+  },
+  output: {
+    chunkFilename: '[name].[chunkhash:8].chunk.js',
+    filename: '[name].[chunkhash:8].js',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  }
+};

package/{rspack → webpack}/base/index.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
-const rspack = require('@rspack/core');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { ModuleFederationPlugin } = require('webpack').container;
 
 const {
   getModuleConfiguration,
@@ -12,27 +13,28 @@ const {
 const getBaseConfiguration = ({
   moduleName,
   moduleFederationConfig,
+  jscTransformConfiguration,
   enableCoverage
 }) => ({
   cache,
-  module: getModuleConfiguration(enableCoverage),
+  module: getModuleConfiguration(jscTransformConfiguration, enableCoverage),
   optimization,
   output: {
     ...output,
-    clean: true,
     library: moduleName,
     uniqueName: moduleName
   },
   plugins: [
+    new CleanWebpackPlugin(),
     moduleName &&
-      new rspack.container.ModuleFederationPlugin({
+      new ModuleFederationPlugin({
         filename: 'remoteEntry.[chunkhash:8].js',
         library: { name: moduleName, type: 'umd' },
         name: moduleName,
         shared: [
           {
             '@centreon/ui-context': {
-              requiredVersion: '1.x',
+              requiredVersion: '24.x',
               singleton: true
             }
           },

package/webpack/patch/dev.js

@@ -0,0 +1,24 @@
+module.exports = {
+  devJscTransformConfiguration: {
+    react: {
+      development: true,
+      refresh: false,
+    },
+  },
+  devRefreshJscTransformConfiguration: {
+    react: {
+      development: true,
+      refresh: true,
+    },
+  },
+  getDevConfiguration: () => ({
+    cache: true,
+    devtool: 'eval-cheap-module-source-map',
+    optimization: {
+      splitChunks: false,
+    },
+    output: {
+      filename: '[name].js',
+    },
+  }),
+};

package/{rspack → webpack}/patch/devServer.js

@@ -1,6 +1,6 @@
 const os = require('os');
 
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const devServerPort = 9090;
 
@@ -19,9 +19,10 @@ const devServerAddress = externalInterface
 
 const publicPath = `http://${devServerAddress}:${devServerPort}/static/`;
 
-const isDevelopmentMode = process.env.NODE_ENV !== 'production';
+const isServeMode = process.env.WEBPACK_ENV === 'serve';
+const isDevelopmentMode = process.env.WEBPACK_ENV === 'development';
 
-const devServerPlugins = isDevelopmentMode ? [new ReactRefreshPlugin()] : [];
+const devServerPlugins = isServeMode ? [new ReactRefreshWebpackPlugin()] : [];
 
 module.exports = {
   devServer: {
@@ -31,5 +32,6 @@ module.exports = {
   },
   devServerPlugins,
   isDevelopmentMode,
+  isServeMode,
   publicPath
 };

package/webpack/patch/module.js

@@ -0,0 +1,46 @@
+const fs = require('fs');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+class CentreonModulePlugin {
+  constructor(federatedComponentConfiguration) {
+    this.federatedComponentConfiguration = federatedComponentConfiguration;
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap('CentreonModulePlugin', (stats) => {
+      const newFederatedComponentConfiguration = {
+        ...this.federatedComponentConfiguration,
+        remoteEntry: Object.keys(stats.compilation.assets).find((assetName) =>
+          assetName.match(/(^remoteEntry)\S+.js$/),
+        ),
+      };
+
+      if (!fs.existsSync(compiler.options.output.path)) {
+        fs.mkdirSync(compiler.options.output.path, { recursive: true });
+      }
+
+      fs.writeFileSync(
+        `${compiler.options.output.path}/moduleFederation.json`,
+        JSON.stringify(newFederatedComponentConfiguration, null, 2),
+      );
+    });
+  }
+}
+
+module.exports = ({
+  outputPath,
+  federatedComponentConfiguration,
+}) => ({
+  output: {
+    library: '[chunkhash:8]',
+    path: outputPath,
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [`${outputPath}/**/*.js`],
+      dangerouslyAllowCleanPatternsOutsideProject: true,
+      dry: false,
+    }),
+    new CentreonModulePlugin(federatedComponentConfiguration),
+  ],
+});

package/rspack/patch/dev.js

@@ -1,12 +0,0 @@
-module.exports = {
-  getDevConfiguration: () => ({
-    cache: true,
-    devtool: 'eval-cheap-module-source-map',
-    optimization: {
-      splitChunks: false
-    },
-    output: {
-      filename: '[name].js'
-    }
-  })
-};

package/rspack/patch/module.js

@@ -1,13 +0,0 @@
-const WriteRemoteEntryNameToModuleFederation = require('../plugins/WriteRemoteEntryNameToModuleFederation');
-const TransformPreloadScript = require('../plugins/TransformPreloadScript');
-
-module.exports = ({ outputPath, federatedComponentConfiguration }) => ({
-  output: {
-    library: '[chunkhash:8]',
-    path: outputPath
-  },
-  plugins: [
-    new WriteRemoteEntryNameToModuleFederation(federatedComponentConfiguration),
-    new TransformPreloadScript(federatedComponentConfiguration)
-  ]
-});

package/rspack/plugins/TransformPreloadScript.js

@@ -1,37 +0,0 @@
-const fs = require('fs');
-
-const swc = require('@swc/core');
-
-module.exports = class TransformPreloadScript {
-  constructor(federatedComponentConfiguration) {
-    this.federatedComponentConfiguration = federatedComponentConfiguration;
-  }
-
-  apply(compiler) {
-    compiler.hooks.done.tap('TransformPreloadScript', () => {
-      if (!fs.existsSync(compiler.options.output.path)) {
-        fs.mkdirSync(compiler.options.output.path, { recursive: true });
-      }
-
-      if (this.federatedComponentConfiguration.preloadScript) {
-        const { code } = swc.transformFileSync(
-          `./${this.federatedComponentConfiguration.preloadScript}.ts`,
-          {
-            filename: `${this.federatedComponentConfiguration.preloadScript}.ts`,
-            jsc: {
-              parser: {
-                syntax: 'typescript'
-              }
-            },
-            minify: true
-          }
-        );
-
-        fs.writeFileSync(
-          `${compiler.options.output.path}/${this.federatedComponentConfiguration.preloadScript}.js`,
-          code
-        );
-      }
-    });
-  }
-};

package/rspack/plugins/WriteRemoteEntryNameToModuleFederation.js

@@ -1,30 +0,0 @@
-const fs = require('fs');
-
-module.exports = class WriteRemoteEntryNameToModuleFederation {
-  constructor(federatedComponentConfiguration) {
-    this.federatedComponentConfiguration = federatedComponentConfiguration;
-  }
-
-  apply(compiler) {
-    compiler.hooks.done.tap(
-      'WriteRemoteEntryNameToModuleFederation',
-      (stats) => {
-        const newFederatedComponentConfiguration = {
-          ...this.federatedComponentConfiguration,
-          remoteEntry: Object.keys(stats.compilation.assets).find((assetName) =>
-            assetName.match(/(^remoteEntry)\S+.js$/)
-          )
-        };
-
-        if (!fs.existsSync(compiler.options.output.path)) {
-          fs.mkdirSync(compiler.options.output.path, { recursive: true });
-        }
-
-        fs.writeFileSync(
-          `${compiler.options.output.path}/moduleFederation.json`,
-          JSON.stringify(newFederatedComponentConfiguration, null, 2)
-        );
-      }
-    );
-  }
-};

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "extends": "./tsconfig/index.json",
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist",
-    "declaration": true,
-    "skipLibCheck": true,
-    "pretty": true,
-    "emitDeclarationOnly": true,
-    "types": ["cypress", "cypress-wait-until"],
-    "esModuleInterop": true,
-    "paths": {
-      "@badeball/cypress-cucumber-preprocessor/*": ["./node_modules/@badeball/cypress-cucumber-preprocessor/dist/subpath-entrypoints/*"]
-    }
-  },
-  "exclude": [
-    "./node_modules",
-    "./dist",
-    "../../node_modules"
-  ],
-}