@centreon/js-config 24.5.0 → 24.5.1

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/e2e/configuration.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@centreon/js-config",
     "description": "Centreon Frontend shared build configuration",
-    "version": "24.5.0",
+    "version": "24.5.1",
     "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,21 +12,20 @@ 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,

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/{webpack → rspack}/patch/module.js

@@ -1,5 +1,3 @@
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-
 const WriteRemoteEntryNameToModuleFederation = require('../plugins/WriteRemoteEntryNameToModuleFederation');
 const TransformPreloadScript = require('../plugins/TransformPreloadScript');
 
@@ -9,11 +7,6 @@ module.exports = ({ outputPath, federatedComponentConfiguration }) => ({
     path: outputPath
   },
   plugins: [
-    new CleanWebpackPlugin({
-      cleanOnceBeforeBuildPatterns: [`${outputPath}/**/*.js`],
-      dangerouslyAllowCleanPatternsOutsideProject: true,
-      dry: false
-    }),
     new WriteRemoteEntryNameToModuleFederation(federatedComponentConfiguration),
     new TransformPreloadScript(federatedComponentConfiguration)
   ]

package/{webpack → rspack}/plugins/TransformPreloadScript.js

@@ -8,7 +8,7 @@ module.exports = class TransformPreloadScript {
   }
 
   apply(compiler) {
-    compiler.hooks.done.tap('CentreonModulePlugin', () => {
+    compiler.hooks.done.tap('TransformPreloadScript', () => {
       if (!fs.existsSync(compiler.options.output.path)) {
         fs.mkdirSync(compiler.options.output.path, { recursive: true });
       }

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',
-    },
-  }),
-};