chore(deps): update webpack-dev-server to v5 (#5133)

.changeset/brown-lions-talk.md

@@ -0,0 +1,6 @@
+---
+'@verdaccio/ui-theme': patch
+'@verdaccio/ui-components': patch
+---
+
+chore(deps): update webpack-dev-server to v5

packages/plugins/ui-theme/package.json

@@ -86,12 +86,12 @@
     "terser-webpack-plugin": "5.3.12",
     "url-loader": "4.1.1",
     "validator": "13.12.0",
-    "webpack": "5.98.0",
     "vite-plugin-markdown": "2.2.0",
+    "webpack": "5.98.0",
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-bundle-size-analyzer": "3.1.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "3.11.3",
+    "webpack-dev-server": "5.2.0",
     "webpack-manifest-plugin": "4.1.1",
     "webpack-merge": "5.10.0",
     "whatwg-fetch": "3.6.20"

packages/plugins/ui-theme/tools/dev.server.js

@@ -16,32 +16,32 @@ compiler.hooks.done.tap('Verdaccio Dev Server', () => {
   }
 });
 
-new WebpackDevServer(compiler, {
-  contentBase: env.DIST_PATH,
-  publicPath: config.output.publicPath,
-  hot: true,
-  historyApiFallback: {
-    disableDotRule: true,
-  },
-  quiet: true,
-  noInfo: false,
-  stats: {
-    assets: false,
-    colors: true,
-    version: true,
-    hash: true,
-    timings: true,
-    chunks: true,
-    chunkModules: false,
-  },
-  proxy: [
-    {
-      context: ['/-/verdaccio/**', '**/*.tgz'],
-      target: 'http://localhost:8000',
+// Create dev server instance with v5 configuration
+const devServer = new WebpackDevServer(
+  {
+    host: '0.0.0.0',
+    port,
+    static: {
+      directory: env.DIST_PATH,
+      publicPath: config.output.publicPath,
     },
-  ],
-}).listen(port, '0.0.0.0', function (err) {
+    historyApiFallback: {
+      disableDotRule: true,
+    },
+    proxy: [
+      {
+        context: ['/-/verdaccio/**', '**/*.tgz'],
+        target: 'http://localhost:8000',
+      },
+    ],
+  },
+  compiler
+);
+
+// Use the async start method
+devServer.startCallback((err) => {
   if (err) {
-    return console.log(err);
+    console.log(err);
+    return;
   }
 });

packages/plugins/ui-theme/tools/webpack.dev.config.babel.js

@@ -30,6 +30,15 @@ export default {
 
   devtool: 'inline-cheap-module-source-map',
 
+  resolve: {
+    ...baseConfig.resolve,
+    fallback: {
+      ...baseConfig.resolve.fallback,
+      './download_translations': false,
+      './crowdin': false,
+    },
+  },
+
   plugins: [
     new webpack.DefinePlugin({
       __DEBUG__: true,
@@ -47,7 +56,6 @@ export default {
       debug: true,
       inject: true,
     }),
-    new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     new FriendlyErrorsPlugin(),
     new StyleLintPlugin({

packages/plugins/ui-theme/tools/webpack.prod.config.babel.js

@@ -23,7 +23,7 @@ const banner = `
     `;
 
 const prodConf = {
-  mode: 'development',
+  mode: 'production',
   devtool: 'inline-cheap-module-source-map',
 
   entry: {

packages/ui-components/src/Theme/index.ts

@@ -1,4 +1,5 @@
 export * as colors from './colors';
 export { ThemeProvider, useCustomTheme } from './ThemeProvider';
 export { default as StyleBaseline } from './StyleBaseline';
-export { Theme, FontWeight, getTheme } from './theme';
+export { getTheme } from './theme';
+export type { Theme, FontWeight } from './theme';

packages/ui-components/src/components/Package/index.ts

@@ -1 +1,2 @@
-export { default, PackageInterface } from './Package';
+export { default } from './Package';
+export type { PackageInterface } from './Package';

packages/ui-components/src/index.ts

@@ -49,8 +49,8 @@ export { default as AppConfigurationProvider } from './providers/AppConfiguratio
 export { default as PersistenceSettingProvider } from './providers/PersistenceSettingProvider';
 
 export * from './providers/AppConfigurationProvider';
-export { TranslatorProvider, useLanguage, LanguageItem } from './providers/TranslatorProvider';
-export * from './providers/TranslatorProvider';
+export { TranslatorProvider, useLanguage } from './providers/TranslatorProvider';
+export type { LanguageItem } from './providers/TranslatorProvider';
 export { VersionProvider } from './providers/VersionProvider';
 export * from './providers/VersionProvider';
 
@@ -61,4 +61,6 @@ export { loadable, Route } from './utils';
 export * from './hooks';
 // others
 export * from './Theme';
-export { store, api, RootState, Dispatch, LoginError, LoginBody, LoginResponse } from './store';
+export { store, api } from './store';
+export type { RootState, Dispatch } from './store';
+export type { LoginError, LoginBody, LoginResponse } from './store/models/login';

packages/ui-components/src/providers/TranslatorProvider/index.ts

@@ -1 +1,2 @@
-export { default as TranslatorProvider, useLanguage, LanguageItem } from './TranslatorProvider';
+export { default as TranslatorProvider, useLanguage } from './TranslatorProvider';
+export type { LanguageItem } from './TranslatorProvider';

packages/ui-components/src/store/index.ts

@@ -1,3 +1,4 @@
-export { store, RootState, Dispatch } from './store';
-export { LoginError, LoginBody, LoginResponse } from './models/login';
+export { store } from './store';
+export type { RootState, Dispatch } from './store';
+export type { LoginError, LoginBody, LoginResponse } from './models/login';
 export { default as api } from './api';