Support for import as module, wabac.js 2.20 (#364)

- Extensibility for AWP (customizable toolbar, pass replay iframe messages to parent)
- Support export as module, build separate index.js for module in addition to ui.js
- Update to wabac.js 2.20.0
- bump to 2.2.0

webpack.config.js

@@ -94,6 +94,92 @@ const electronPreloadConfig = (/*env, argv*/) => {
   return merge(tsConfig, config);
 };
 
+const libConfig = (env, argv) => {
+  /** @type {import('webpack').Configuration['entry']} */
+  const entry = {
+    index: "./src/index.ts",
+  };
+
+  const extraPlugins = [];
+
+  const patterns = [
+    { from: "node_modules/@webrecorder/wabac/dist/sw.js", to: "sw.js" },
+  ];
+  extraPlugins.push(new CopyPlugin({ patterns }));
+
+  /** @type {import('webpack').Configuration} */
+  const config = {
+    target: "web",
+    mode: "production",
+    cache: {
+      type: "filesystem",
+    },
+    resolve: {
+      fallback: { crypto: false },
+    },
+    entry,
+    optimization,
+    output: {
+      path: path.join(__dirname, "dist"),
+      filename: "[name].js",
+      globalObject: "self",
+      library: {
+        type: "module",
+      },
+      publicPath: "/",
+    },
+    experiments: {
+      outputModule: true,
+    },
+
+    devtool: argv.mode === "production" ? undefined : "source-map",
+
+    plugins: [
+      new webpack.NormalModuleReplacementPlugin(/^node:*/, (resource) => {
+        switch (resource.request) {
+          case "node:stream":
+            resource.request = "stream-browserify";
+            break;
+        }
+      }),
+
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+      new webpack.ProvidePlugin({
+        process: "process/browser",
+      }),
+      new MiniCssExtractPlugin(),
+      new webpack.DefinePlugin({
+        __SW_NAME__: JSON.stringify("sw.js"),
+        __HELPER_PROXY__: JSON.stringify(HELPER_PROXY),
+        __GDRIVE_CLIENT_ID__: JSON.stringify(GDRIVE_CLIENT_ID),
+        __VERSION__: JSON.stringify(package_json.version),
+      }),
+      new webpack.BannerPlugin(BANNER_TEXT),
+      ...extraPlugins,
+    ],
+
+    module: {
+      rules: [
+        {
+          test: /\.svg$/,
+          use: ["raw-loader"],
+        },
+        {
+          test: /main.scss$/,
+          use: ["css-loader", "sass-loader"],
+        },
+        {
+          test: /wombat.js|wombatWorkers.js|index.html$/i,
+          use: ["raw-loader"],
+        },
+      ],
+    },
+  };
+  return merge(tsConfig, config);
+};
+
 const browserConfig = (/*env, argv*/) => {
   const isDevServer = process.env.WEBPACK_SERVE;
 
@@ -104,14 +190,14 @@ const browserConfig = (/*env, argv*/) => {
 
   const extraPlugins = [];
 
-  if (isDevServer) {
-    entry["sw"] = "@webrecorder/wabac/src/sw.js";
-  } else {
-    const patterns = [
-      { from: "node_modules/@webrecorder/wabac/dist/sw.js", to: "sw.js" },
-    ];
-    extraPlugins.push(new CopyPlugin({ patterns }));
-  }
+  //if (isDevServer) {
+  //  entry["sw"] = "@webrecorder/wabac/src/sw.js";
+  //} else {
+  const patterns = [
+    { from: "node_modules/@webrecorder/wabac/dist/sw.js", to: "sw.js" },
+  ];
+  extraPlugins.push(new CopyPlugin({ patterns }));
+  //}
 
   /** @type {import('webpack').Configuration} */
   const config = {
@@ -125,7 +211,6 @@ const browserConfig = (/*env, argv*/) => {
     },
     entry,
     optimization,
-
     output: {
       path: path.join(__dirname),
       filename: "[name].js",
@@ -133,7 +218,6 @@ const browserConfig = (/*env, argv*/) => {
       globalObject: "self",
       publicPath: "/",
     },
-
     devServer: {
       compress: true,
       port: 9990,
@@ -188,81 +272,9 @@ const browserConfig = (/*env, argv*/) => {
   return merge(tsConfig, config);
 };
 
-const miscConfig = (/*env, argv*/) => {
-  /** @type {import('webpack').Configuration['entry']} */
-  const entry = {
-    misc: "./src/misc.ts",
-  };
-
-  /** @type {import('webpack').Configuration} */
-  const config = {
-    target: "web",
-    mode: "production",
-    cache: {
-      type: "filesystem"
-    },
-    resolve: {
-      fallback: { crypto: false },
-    },
-    entry,
-    optimization,
-
-    output: {
-      path: path.join(__dirname, "dist"),
-      filename: "[name].js",
-      libraryTarget: "self",
-      globalObject: "self",
-      publicPath: "/",
-    },
-
-    plugins: [
-      new webpack.NormalModuleReplacementPlugin(/^node:*/, (resource) => {
-        switch (resource.request) {
-          case "node:stream":
-            resource.request = "stream-browserify";
-            break;
-        }
-      }),
-
-      new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 1,
-      }),
-      new webpack.ProvidePlugin({
-        process: "process/browser",
-      }),
-      new MiniCssExtractPlugin(),
-      new webpack.DefinePlugin({
-        __SW_NAME__: JSON.stringify("sw.js"),
-        __HELPER_PROXY__: JSON.stringify(HELPER_PROXY),
-        __GDRIVE_CLIENT_ID__: JSON.stringify(GDRIVE_CLIENT_ID),
-        __VERSION__: JSON.stringify(package_json.version),
-      }),
-      new webpack.BannerPlugin(BANNER_TEXT),
-    ],
-
-    module: {
-      rules: [
-        {
-          test: /\.svg$/,
-          use: ["raw-loader"],
-        },
-        {
-          test: /main.scss$/,
-          use: ["css-loader", "sass-loader"],
-        },
-        {
-          test: /wombat.js|wombatWorkers.js|index.html$/i,
-          use: ["raw-loader"],
-        },
-      ],
-    },
-  };
-  return merge(tsConfig, config);
-};
-
 module.exports = [
+  libConfig,
   browserConfig,
-  miscConfig,
   electronMainConfig,
   electronPreloadConfig,
 ];