Upgrade to Webpack 5 (#6200)

build-scripts/bundle.js

@@ -62,6 +62,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
       { loose: true, useBuiltIns: true },
     ],
     // Only support the syntax, Webpack will handle it.
+    "@babel/plugin-syntax-import-meta",
     "@babel/syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",

build-scripts/webpack.js

@@ -2,7 +2,6 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
-const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle");
 
@@ -55,7 +54,6 @@ const createWebpackConfig = ({
       ],
     },
     plugins: [
-      new WorkerPlugin(),
       new ManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),

package.json

@@ -136,6 +136,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.9.0",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -206,12 +207,11 @@
     "typescript": "^3.8.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^4.40.2",
-    "webpack-cli": "^3.3.9",
+    "webpack": "5.0.0-rc.3",
+    "webpack-cli": "4.0.0-rc.0",
     "webpack-dev-server": "^3.10.3",
-    "webpack-manifest-plugin": "^2.0.4",
-    "workbox-build": "^5.1.3",
-    "worker-plugin": "^4.0.3"
+    "webpack-manifest-plugin": "3.0.0-rc.0",
+    "workbox-build": "^5.1.3"
   },
   "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
   "_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",

src/components/data-table/sort-filter.ts

@@ -16,7 +16,7 @@ export const filterData = async (
   filter: FilterDataParamTypes[2]
 ): Promise<ReturnType<FilterDataType>> => {
   if (!worker) {
-    worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+    worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
   }
 
   return await worker.filterData(data, columns, filter);
@@ -29,7 +29,7 @@ export const sortData = async (
   sortColumn: SortDataParamTypes[3]
 ): Promise<ReturnType<SortDataType>> => {
   if (!worker) {
-    worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+    worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
   }
 
   return await worker.sortData(data, columns, direction, sortColumn);

src/resources/render-markdown.ts

@@ -13,7 +13,7 @@ export const renderMarkdown = async (
   hassOptions?: renderMarkdownParamTypes[2]
 ): Promise<ReturnType<RenderMarkdownType>> => {
   if (!worker) {
-    worker = wrap(new Worker("./markdown_worker", { type: "module" }));
+    worker = wrap(new Worker(new URL("./markdown_worker", import.meta.url)));
   }
 
   return await worker.renderMarkdown(content, markedOptions, hassOptions);

src/types.ts

@@ -43,6 +43,11 @@ declare global {
     };
     change: undefined;
   }
+
+  // For loading workers in webpack
+  interface ImportMeta {
+    url: string;
+  }
 }
 
 export type Constructor<T = {}> = new (...args: any[]) => T;