Configure package exports explicitly (#336)

Closes #337
Blocks https://github.com/webrecorder/archiveweb.page/issues/198

Adds a dedicated `misc` export, as well as explicitly exporting the
`electron-*` files and the `index.html` file. This restricts imports to
only these files, and allows us to not have to exactly match webpack
configs between RWP and AWP.

package.json

@@ -7,8 +7,18 @@
   "homepage": "https://replayweb.page/",
   "author": "Webrecorder Software",
   "license": "AGPL-3.0-or-later",
-  "main": "ui.js",
+  "exports": {
-  "types": "dist/types/index.d.ts",
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./ui.js"
+    },
+    "./misc": {
+      "types": "./dist/types/misc.d.ts",
+      "default": "./dist/misc.js"
+    },
+    "./src/electron-*": "./src/electron-*.ts",
+    "./index.html": "./index.html"
+  },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@shoelace-style/shoelace": "~2.15.1",

src/components/labeled-field.ts

@@ -8,7 +8,7 @@ import faX from "@fortawesome/fontawesome-free/svgs/solid/times.svg";
 
 import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/icon-library.js";
 
-import systemLibrary from "@shoelace-style/shoelace/dist/components/icon/library.system";
+import systemLibrary from "@shoelace-style/shoelace/dist/components/icon/library.system.js";
 
 // disable system library to prevent loading of unused data: URLs
 // allow only "x-lg" as it is needed for sl-dialog

tsconfig.json

@@ -3,7 +3,7 @@
     "outDir": "./dist/",
     "module": "esnext",
     "target": "es6",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "allowJs": true,
     "strict": true,
     "declaration": true,

webpack.config.js

@@ -188,4 +188,91 @@ const browserConfig = (/*env, argv*/) => {
   return merge(tsConfig, config);
 };
 
-module.exports = [browserConfig, electronMainConfig, electronPreloadConfig];
+const miscConfig = (/*env, argv*/) => {
+  const isDevServer = process.env.WEBPACK_SERVE;
+
+  /** @type {import('webpack').Configuration['entry']} */
+  const entry = {
+    misc: "./src/misc.ts",
+  };
+
+  /** @type {import('webpack').Configuration} */
+  const config = {
+    target: "web",
+    mode: "production",
+    cache: {
+      type: isDevServer ? "memory" : "filesystem",
+    },
+    resolve: {
+      fallback: { crypto: false },
+    },
+    entry,
+    optimization,
+
+    output: {
+      path: path.join(__dirname, "dist"),
+      filename: "[name].js",
+      libraryTarget: "self",
+      globalObject: "self",
+      publicPath: "/",
+    },
+
+    devServer: {
+      compress: true,
+      port: 9990,
+      open: false,
+      static: __dirname,
+      //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 = [
+  browserConfig,
+  miscConfig,
+  electronMainConfig,
+  electronPreloadConfig,
+];