refactor: use webpack 5, needed for latex support

this allows us to use the publicPath: auto feature for loading
fonts.

packages/solara-vuetify-app/package.json

@@ -27,6 +27,6 @@
     "mini-css-extract-plugin": "^2.7.2",
     "style-loader": "^0.23.1",
     "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^5.1.4"
   }
 }

packages/solara-vuetify-app/webpack.config.js

@@ -6,8 +6,8 @@ var rules = [
     {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         loader: 'file-loader',
-    }
-]
+    },
+];
 
 module.exports = [
     {

packages/solara-widget-manager/package.json

@@ -35,15 +35,13 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "babel-loader": "^8.0.5",
-    "css-loader": "^5.0.0",
-    "file-loader": "^4.0.0",
+    "css-loader": "^6.8.1",
     "npm-run-all": "^4.1.5",
     "p-limit": "^2.2.2",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.3.3",
     "typescript": "~4.1.3",
-    "url-loader": "^1.0.0",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.2.3"
+    "webpack": "^5.87.0",
+    "webpack-cli": "^5.1.4"
   },
   "style": "style/index.css",
   "scripts": {

packages/solara-widget-manager/src/manager.ts

@@ -16,6 +16,12 @@ import { output } from '@jupyter-widgets/jupyterlab-manager';
 
 import * as base from '@jupyter-widgets/base';
 import * as controls from '@jupyter-widgets/controls';
+// there two imports came 'for free' with webpack 4, from the jupyter-lab-manager plugin
+// it seems webpack 5 is better at tree-shaking, so we didn't need to import them explicitly before
+import '@jupyter-widgets/base/css/index.css';
+import '@jupyter-widgets/controls/css/widgets-base.css';
+// Voila imports the following css file, not sure why
+// import '@jupyter-widgets/controls/css/widgets.built.css';
 
 import * as Application from '@jupyterlab/application';
 import * as AppUtils from '@jupyterlab/apputils';

packages/solara-widget-manager/webpack.config.js

@@ -6,27 +6,23 @@ var rules = [
   // required to load font-awesome
   {
     test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-    use:
-      'url-loader?limit=10000&mimetype=application/font-woff&publicPath=/voila/static/'
+    type: 'asset',
   },
   {
     test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-    use:
-      'url-loader?limit=10000&mimetype=application/font-woff&publicPath=/voila/static/'
+    type: 'asset',
   },
   {
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-    use:
-      'url-loader?limit=10000&mimetype=application/octet-stream&publicPath=/voila/static/'
+    type: 'asset',
   },
   {
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-    use: 'file-loader&publicPath=/voila/static/'
+    type: 'asset',
   },
   {
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-    use:
-      'url-loader?limit=10000&mimetype=image/svg+xml&publicPath=/voila/static/'
+    type: 'asset',
   }
 ];
 

pyproject.toml

@@ -133,4 +133,4 @@ timeout = 180
 
 
 [tool.codespell]
-skip='equis-in-vidi.md,substiterat-vati.md,.*,solara/website/build,*.svg,highlight-dark.css,packages/**/dist/*,node_modules,packages/assets,package-lock.json,tsconfig.tsbuildinfo'
+skip='equis-in-vidi.md,substiterat-vati.md,.*,solara/website/build,*.svg,highlight-dark.css,packages/**/dist/*,node_modules,packages/assets,package*.json,tsconfig.tsbuildinfo'