@centreon/js-config 24.5.7 → 24.5.8

package/cypress/component/configuration.js

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

package/cypress/component/enableVisualTesting.ts

@@ -13,7 +13,7 @@ const enableVisualTesting = (cypressFolder = 'cypress'): void => {
     capture: 'viewport',
     customDiffConfig: { threshold: 0.01 },
     customSnapshotsDir: `${cypressFolder}/visual-testing-snapshots`,
-    failureThreshold: 0.07,
+    failureThreshold: Cypress.env('updateSnapshots') === true ? 0 : 0.07,
     failureThresholdType: 'percent'
   });
 };

package/cypress/e2e/commands.ts

@@ -518,6 +518,10 @@ 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(
@@ -743,7 +747,7 @@ Cypress.Commands.add(
 
 Cypress.Commands.add('getTimeFromHeader', (): Cypress.Chainable => {
   return cy
-    .get('header div[data-cy="clock"]', { timeout: 10000 })
+    .get('header div[data-cy="clock"]', { timeout: 20000 })
     .should('be.visible')
     .then(($time) => {
       const headerTime = $time.children()[1].textContent;

package/cypress/e2e/configuration.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable import/extensions */
 /* eslint-disable import/no-unresolved */
 
@@ -38,7 +39,7 @@ export default ({
 
   return defineConfig({
     chromeWebSecurity: false,
-    defaultCommandTimeout: 6000,
+    defaultCommandTimeout: 20000,
     downloadsFolder: `${resultsFolder}/downloads`,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
@@ -66,10 +67,10 @@ export default ({
       WEB_IMAGE_VERSION: webImageVersion
     },
     execTimeout: 60000,
-    requestTimeout: 10000,
+    requestTimeout: 20000,
     retries: 0,
     screenshotsFolder: `${resultsFolder}/screenshots`,
-    video: isDevelopment,
+    video: true,
     videoCompression: 0,
     videosFolder: `${resultsFolder}/videos`
   });

package/cypress/e2e/plugins.ts

@@ -23,11 +23,10 @@ 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.7",
+    "version": "24.5.8",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/centreon/centreon-frontend.git"
@@ -16,13 +16,6 @@
         "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/{webpack → rspack}/base/globalConfig.js

@@ -1,76 +1,71 @@
-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
-  }
-};
+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
+  }
+};

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

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

package/rspack/patch/dev.js

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

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

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

package/rspack/patch/module.js

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,21 @@
+{
+  "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"
+  ],
+}

package/webpack/patch/dev.js

@@ -1,24 +0,0 @@
-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/webpack/patch/module.js

@@ -1,46 +0,0 @@
-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),
-  ],
-});