webpack watch tarballs (#86)

.syncpackrc

@@ -47,6 +47,15 @@
       "snapTo": [
         "prax-wallet"
       ]
+    },
+    {
+      "label": "Control @penumbra-zone packages from root",
+      "dependencies": [
+        "@penumbra-zone/*"
+      ],
+      "snapTo": [
+        "prax-wallet"
+      ]
     }
   ]
-}
+}

apps/extension/package.json

@@ -34,46 +34,44 @@
     "@penumbra-zone/transport-dom": "^7.2.0",
     "@penumbra-zone/types": "^12.0.0",
     "@penumbra-zone/wasm": "^12.0.0",
+    "@radix-ui/react-icons": "^1.3.0",
     "@repo/context": "workspace:*",
     "@repo/ui": "workspace:*",
     "@tanstack/react-query": "4.36.1",
-    "buffer": "^6.0.3",
     "exponential-backoff": "^3.1.1",
     "framer-motion": "^11.2.4",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.378.0",
-    "node-fetch": "^3.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.23.1",
-    "react-use-measure": "^2.1.1",
     "usehooks-ts": "^3.1.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@radix-ui/react-icons": "^1.3.0",
     "@types/chrome": "0.0.268",
     "@types/firefox-webext-browser": "^120.0.3",
     "@types/lodash": "^4.17.4",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/webpack": "^5.28.5",
     "autoprefixer": "^10.4.19",
+    "buffer": "^6.0.3",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.1",
     "dotenv": "^16.4.5",
     "html-webpack-plugin": "^5.6.0",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
-    "promise.withresolvers": "^1.0.3",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.4",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^5.10.0"
+    "webpack-merge": "^5.10.0",
+    "webpack-watch-external-files-plugin": "^3.1.0"
   }
 }

apps/extension/webpack.config.ts

@@ -1,37 +1,80 @@
-import * as dotenv from 'dotenv';
-import path from 'path';
+// eslint-disable-next-line import/no-relative-packages
+import rootPackageJson from '../../package.json' with { type: 'json' };
+
 import CopyPlugin from 'copy-webpack-plugin';
+import dotenv from 'dotenv';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import url from 'url';
-
+import { spawn } from 'node:child_process';
+import path from 'node:path';
+import url from 'node:url';
 import webpack from 'webpack';
+import WatchExternalFilesPlugin from 'webpack-watch-external-files-plugin';
 
 // Loads default vars from `.env` file in this directory.
 dotenv.config({ path: '.env' });
 
 const keysPackage = path.dirname(url.fileURLToPath(import.meta.resolve('@penumbra-zone/keys')));
 
+const localPackages = Object.values(rootPackageJson.dependencies)
+  .filter(specifier => specifier.endsWith('.tgz'))
+  .map(tgzSpecifier =>
+    tgzSpecifier.startsWith('file:') ? url.fileURLToPath(tgzSpecifier) : tgzSpecifier,
+  );
+
+const __dirname = new URL('.', import.meta.url).pathname;
+const srcDir = path.join(__dirname, 'src');
+const entryDir = path.join(srcDir, 'entry');
+const injectDir = path.join(srcDir, 'content-scripts');
+
 /*
- * The DefinePlugin replaces the specified values in the code during the build process.
- * - These are also declared in `prax.d.ts` for TypeScript compatibility.
- * - `process.env.NODE_ENV` and other environment variables are provided by the DefinePlugin.
- * - Since the plugin performs a direct text replacement, the values must be stringified.
- *   This is why `JSON.stringify()` is used, to ensure the values include quotes in the final output.
+ * The DefinePlugin replaces specified tokens with specified values.
+ * - These should be declared in `prax.d.ts` for TypeScript awareness.
+ * - `process.env.NODE_ENV` and other env vars are implicitly defined.
+ * - Replacement is literal, so the values must be stringified.
  */
-const definitions = {
+const DefinePlugin = new webpack.DefinePlugin({
   PRAX: JSON.stringify(process.env['PRAX']),
   PRAX_ORIGIN: JSON.stringify(`chrome-extension://${process.env['PRAX']}`),
-  'globalThis.__DEV__': JSON.stringify(true),
+  'globalThis.__DEV__': JSON.stringify(process.env['NODE_ENV'] !== 'production'),
   'globalThis.__ASSERT_ROOT__': JSON.stringify(false),
-};
+});
 
-const __dirname = new URL('.', import.meta.url).pathname;
-const srcDir = path.join(__dirname, 'src');
-
-const entryDir = path.join(srcDir, 'entry');
-const injectDir = path.join(srcDir, 'content-scripts');
+/**
+ * This custom plugin will run `pnpm install` before each watch-mode build. This
+ * combined with WatchExternalFilesPlugin will ensure that tarball dependencies
+ * are updated when they change.
+ */
+const PnpmInstallPlugin = {
+  apply: ({ hooks }: webpack.Compiler) =>
+    hooks.watchRun.tapPromise(
+      { name: 'CustomPnpmInstallPlugin' },
+      compiler =>
+        new Promise<void>((resolve, reject) => {
+          const pnpmInstall = spawn(
+            'pnpm',
+            // --ignore-scripts because syncpack doesn't like to run under
+            // webpack for some reason. watch out for post-install scripts that
+            // dependencies might need.
+            ['-w', 'install', '--ignore-scripts'],
+            { stdio: 'inherit' },
+          );
+          pnpmInstall.on('exit', code => {
+            if (code) reject(new Error(`pnpm install failed ${code}`));
+            else {
+              // clear webpack's cache to ensure new deps are used
+              compiler.purgeInputFileSystem();
+              resolve();
+            }
+          });
+        }),
+    ),
+};
 
-const config: webpack.Configuration = {
+export default ({
+  WEBPACK_WATCH = false,
+}: {
+  ['WEBPACK_WATCH']?: boolean;
+}): webpack.Configuration => ({
   entry: {
     'injected-connection-port': path.join(injectDir, 'injected-connection-port.ts'),
     'injected-penumbra-global': path.join(injectDir, 'injected-penumbra-global.ts'),
@@ -117,7 +160,7 @@ const config: webpack.Configuration = {
         return /.*\/wordlists\/(?!english).*\.json/.test(resource);
       },
     }),
-    new webpack.DefinePlugin(definitions),
+    DefinePlugin,
     new CopyPlugin({
       patterns: [
         'public',
@@ -147,10 +190,11 @@ const config: webpack.Configuration = {
       filename: 'offscreen.html',
       chunks: ['offscreen-handler'],
     }),
+    // watch tarballs for changes
+    WEBPACK_WATCH && new WatchExternalFilesPlugin({ files: localPackages }),
+    WEBPACK_WATCH && PnpmInstallPlugin,
   ],
   experiments: {
     asyncWebAssembly: true,
   },
-};
-
-export default config;
+});

apps/prax-marketing-site/package.json

@@ -18,8 +18,10 @@
   "devDependencies": {
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.19",
     "firebase-tools": "^13.8.0",
-    "postcss": "^8.4.38"
+    "postcss": "^8.4.38",
+    "vite": "^5.3.1"
   }
 }

apps/prax-marketing-site/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 
 export default defineConfig({
+  clearScreen: false,
   base: './',
   plugins: [react()],
 });

package.json

@@ -23,8 +23,7 @@
     "postinstall": "syncpack list-mismatches",
     "pretest": "playwright install",
     "test": "turbo test",
-    "test:rust": "turbo test:rust",
-    "watch-and-repack": "./watch-and-repack.sh"
+    "test:rust": "turbo test:rust"
   },
   "dependencies": {
     "@buf/cosmos_ibc.bufbuild_es": "1.10.0-20240625204953-f66a294d94c4.1",
@@ -34,7 +33,21 @@
     "@buf/tendermint_tendermint.bufbuild_es": "1.10.0-20231117195010-33ed361a9051.1",
     "@bufbuild/protobuf": "^1.10.0",
     "@connectrpc/connect": "^1.4.0",
-    "@connectrpc/connect-web": "^1.4.0"
+    "@connectrpc/connect-web": "^1.4.0",
+    "@penumbra-zone/bech32m": "^6.1.0",
+    "@penumbra-zone/client": "^10.0.0",
+    "@penumbra-zone/crypto-web": "^8.0.0",
+    "@penumbra-zone/getters": "^10.0.0",
+    "@penumbra-zone/keys": "^4.2.0",
+    "@penumbra-zone/perspective": "^9.0.0",
+    "@penumbra-zone/protobuf": "^5.3.0",
+    "@penumbra-zone/query": "^10.0.0",
+    "@penumbra-zone/services": "^11.0.0",
+    "@penumbra-zone/storage": "^9.1.0",
+    "@penumbra-zone/transport-chrome": "^5.0.0",
+    "@penumbra-zone/transport-dom": "^7.2.0",
+    "@penumbra-zone/types": "^12.0.0",
+    "@penumbra-zone/wasm": "^12.0.0"
   },
   "devDependencies": {
     "@buf/connectrpc_eliza.bufbuild_es": "1.10.0-20230913231627-233fca715f49.1",
@@ -45,20 +58,15 @@
     "@repo/tsconfig": "workspace:*",
     "@storybook/react-vite": "8.1.1",
     "@turbo/gen": "^1.13.4",
-    "@types/chrome": "0.0.268",
     "@types/node": "^20.14.5",
-    "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/browser": "^1.6.0",
     "jsdom": "^24.1.0",
     "playwright": "^1.44.1",
     "prettier": "^3.3.2",
     "syncpack": "^12.3.2",
     "tailwindcss": "^3.4.4",
     "turbo": "^1.13.4",
-    "typescript": "^5.4.5",
-    "vite": "^5.3.1",
-    "vite-plugin-top-level-await": "^1.4.1",
-    "vite-plugin-wasm": "^3.3.0",
+    "typescript": "^5.5.3",
     "vitest": "^1.6.0"
   }
 }

packages/context/package.json

@@ -14,16 +14,14 @@
   "exports": {
     ".": "./src/index.ts"
   },
-  "dependencies": {
-    "@penumbra-zone/bech32m": "^6.1.0",
-    "@penumbra-zone/protobuf": "^5.3.0"
-  },
   "peerDependencies": {
     "@buf/cosmos_ibc.bufbuild_es": "1.10.0-20240625204953-f66a294d94c4.1",
     "@buf/penumbra-zone_penumbra.bufbuild_es": "1.10.0-20240625233123-429cb316aa7c.1",
     "@bufbuild/protobuf": "^1.10.0",
     "@penumbra-labs/registry": "9.2.0",
+    "@penumbra-zone/bech32m": "^6.1.0",
     "@penumbra-zone/crypto-web": "^8.0.0",
+    "@penumbra-zone/protobuf": "^5.3.0",
     "@penumbra-zone/query": "^10.0.0",
     "@penumbra-zone/storage": "^9.1.0",
     "@penumbra-zone/types": "^12.0.0",

packages/tsconfig/base.json

@@ -9,7 +9,6 @@
     "forceConsistentCasingInFileNames": true,
     "inlineSources": false,
     "isolatedModules": true,
-    "moduleResolution": "bundler",
     "preserveWatchOutput": true,
     "skipLibCheck": true,
     "strict": true,
@@ -24,7 +23,7 @@
     "noUnusedParameters": true,
     "resolveJsonModule": true,
     "target": "ESNext",
-    "module": "ES2022"
+    "module": "preserve"
   },
   "exclude": ["node_modules"]
 }