Merge pull request #3464 from jasongrout/publicpath

Update public path to auto, and update example configs

Author: ibdafna

examples/web1/package.json

@@ -23,7 +23,6 @@
   "devDependencies": {
     "chai": "^4.0.0",
     "css-loader": "^6.5.1",
-    "file-loader": "^6.2.0",
     "karma": "^6.3.3",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",

examples/web1/webpack.config.js

@@ -3,18 +3,14 @@ var webpack = require('webpack');
 
 module.exports = {
   mode: 'development',
+  devtool: 'source-map',
   entry: './index.js',
   output: {
     filename: 'index.built.js',
     path: path.resolve(__dirname, 'built'),
-    publicPath: 'built/',
   },
   module: {
-    rules: [
-      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      // jquery-ui loads some images
-      { test: /\.(jpg|png|gif)$/, use: 'file-loader' },
-    ],
+    rules: [{ test: /\.css$/i, use: ['style-loader', 'css-loader'] }],
   },
   plugins: [
     new webpack.DefinePlugin({

examples/web2/index.js

@@ -7,7 +7,7 @@ require('@jupyter-widgets/controls/css/widgets.css');
 require('font-awesome/css/font-awesome.css');
 
 document.addEventListener('DOMContentLoaded', function (event) {
-  var code = require('./widget_code.py').default;
+  var code = require('./widget_code.py');
   var inputarea = document.getElementsByClassName('inputarea')[0];
   new CodeMirror(inputarea, {
     value: code,

examples/web2/package.json

@@ -21,10 +21,7 @@
   },
   "devDependencies": {
     "css-loader": "^6.5.1",
-    "file-loader": "^6.2.0",
-    "raw-loader": "^4.0.2",
     "style-loader": "^3.3.1",
-    "url-loader": "^4.1.1",
     "webpack": "^5.65.0"
   }
 }

examples/web2/webpack.config.js

@@ -3,60 +3,19 @@ var webpack = require('webpack');
 
 module.exports = {
   mode: 'development',
+  devtool: 'source-map',
   entry: './index.js',
   output: {
     filename: 'index.built.js',
     path: path.resolve(__dirname, 'built'),
-    publicPath: 'built/',
   },
   module: {
     rules: [
-      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.py$/, use: 'raw-loader' },
-      // jquery-ui loads some images
-      { test: /\.(jpg|png|gif)$/, use: 'file-loader' },
+      { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
+      { test: /\.py$/i, type: 'asset/source' },
       // required to load font-awesome
-      {
-        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
-        },
-      },
-      {
-        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
-        },
-      },
-      {
-        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/octet-stream',
-          },
-        },
-      },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
-      {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'image/svg+xml',
-          },
-        },
-      },
+      { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
+      { test: /\.svg$/i, type: 'asset' },
     ],
   },
   plugins: [

examples/web3/package.json

@@ -26,16 +26,10 @@
     "@types/codemirror": "^5.60.0",
     "@types/node": "^17.0.2",
     "css-loader": "^6.5.1",
-    "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
-    "postcss": "^8.3.2",
-    "postcss-cssnext": "^3.1.0",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.1.0",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
     "typescript": "~4.3.2",
-    "url-loader": "^4.1.1",
     "webpack": "^5.65.0"
   }
 }

examples/web3/webpack.config.js

@@ -4,90 +4,18 @@ const webpack = require('webpack');
 
 module.exports = {
   mode: 'development',
+  devtool: 'source-map',
   entry: './lib/index.js',
   output: {
     filename: 'index.built.js',
     path: path.resolve(__dirname, 'built'),
-    publicPath: 'built/',
   },
   module: {
     rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: [
-                  postcss.plugin('delete-tilde', function () {
-                    return function (css) {
-                      css.walkAtRules('import', function (rule) {
-                        rule.params = rule.params.replace('~', '');
-                      });
-                    };
-                  }),
-                  postcss.plugin('prepend', function () {
-                    return function (css) {
-                      css.prepend(
-                        "@import '@jupyter-widgets/controls/css/labvariables.css';"
-                      );
-                    };
-                  }),
-                  require('postcss-import')(),
-                  require('postcss-cssnext')(),
-                ],
-              },
-            },
-          },
-        ],
-      },
-      // jquery-ui loads some images
-      { test: /\.(jpg|png|gif)$/, use: 'file-loader' },
+      { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
       // required to load font-awesome
-      {
-        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
-        },
-      },
-      {
-        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
-        },
-      },
-      {
-        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/octet-stream',
-          },
-        },
-      },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
-      {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'image/svg+xml',
-          },
-        },
-      },
+      { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
+      { test: /\.svg$/i, type: 'asset' },
     ],
   },
   plugins: [

examples/web4/README.md

@@ -20,6 +20,17 @@ semver range. For example:
 
 `<script src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@^0.8.0/dist/embed.js" crossorigin="anonymous"></script>`
 
+The widget data in this example was generated from the following code:
+
+```python
+from ipywidgets import VBox, jsdlink, IntSlider, Button
+
+s1, s2 = IntSlider(max=200, value=100), IntSlider(value=40)
+b = Button(icon='legal')
+jsdlink((s1, 'value'), (s2, 'max'))
+VBox([s1, s2, b])
+```
+
 ## Try it
 
 1. Start with a repository checkout, and run `yarn install` in the root directory.