From 23d73e92853f64ea2b95389e25131538057d6d36 Mon Sep 17 00:00:00 2001 From: turbocrime Date: Wed, 24 Jul 2024 11:27:10 -0700 Subject: [PATCH] watch pnpm overrides too --- .github/workflows/turbo-ci.yml | 2 +- README.md | 59 ++++++++++++++++++-------------- apps/extension/webpack.config.ts | 16 +++++++-- package.json | 1 - pnpm-lock.yaml | 40 ++++++++++++++++++++-- scripts/add-tgz.ts | 2 ++ 6 files changed, 88 insertions(+), 32 deletions(-) diff --git a/.github/workflows/turbo-ci.yml b/.github/workflows/turbo-ci.yml index e2dc6d1c..f610a8c2 100644 --- a/.github/workflows/turbo-ci.yml +++ b/.github/workflows/turbo-ci.yml @@ -55,7 +55,7 @@ jobs: - uses: pnpm/action-setup@v4 - uses: buildjet/setup-node@v4 with: - node-version: '22.4.1' + node-version: '22' cache: 'pnpm' - run: pnpm install --frozen-lockfile - run: pnpm turbo build --cache-dir=.turbo diff --git a/README.md b/README.md index 45b60f2d..01460e4a 100644 --- a/README.md +++ b/README.md @@ -19,14 +19,6 @@ You can talk to us on [Discord](https://discord.gg/hKvkrqa3zC). ### [Prax Marketing Site](https://praxwallet.com/): Marketing site for the Prax wallet -### Packages - -- context -- eslint-config -- tailwind-config -- tsconfig -- ui - ## Documentation General documentation is available in [docs/README.md](docs/README.md). Package-specific documentation is available in @@ -36,12 +28,9 @@ each respective package. ### Prerequisites -- [Install Rust and Cargo](https://doc.rust-lang.org/cargo/getting-started/installation.html) (probably with rustup) -- [Install Wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) -- Install [cargo-watch](https://crates.io/crates/cargo-watch): `cargo install cargo-watch` -- [Install Node.js](https://nodejs.org/en/download/package-manager) however you like (at least version 20) +- [Install Node.js](https://nodejs.org/en/download/package-manager) version 22 or greater - [Install pnpm](https://pnpm.io/installation) (probably via corepack) -- Install Google Chrome +- Install Google Chrome (Chromium works but we have encountered behavioral differences) ### Building @@ -51,26 +40,31 @@ Once you have all these tools, you can git clone https://github.com/prax-wallet/web cd web pnpm i -pnpm dev +CHROMIUM_PROFILE=chromium-profile pnpm dev ``` +The env var `CHROMIUM_PROFILE` is optional. You may simply execute `pnpm dev`, +or set the var to any path. Presence of a path will create and launch a +dedicated browser profile with the extension. The directory 'chromium-profile' +is gitignored. + +`CHROMIUM_PROFILE` names 'Chromium' but will launch Google Chrome if installed. +If you want to use a specific binary, you may need to specify a path with the +var `CHROME_PATH`. + You now have a local copy of the marketing site available at [`https://localhost:5175`](https://localhost:5173) and an unbundled Prax is -available at [`apps/extension/dist`](apps/extension/dist), ready to be loaded -into your browser. +available at [`apps/extension/dist`](apps/extension/dist). If you're working on Prax, Chrome will show extension page changes after a -manual refresh, but cannot reload the extension worker scripts or content -scripts. For worker script changes, you must manually reload the extension. For -content script changes, you must also manually reload pages hosting the injected -scripts. - -#### Loading your unbundled build of Prax into Chrome +manual page refresh, but it cannot simply reload the extension worker scripts or +content scripts. For worker script changes, you may need to manually reload the +extension. For content script changes, you must also manually reload pages +hosting the injected scripts. -After building Prax, you can load it into Chrome. +#### Manually loading your unbundled build of Prax into Chrome -It's recommended to use a dedicated browser profile for development, not your -personal profile. +If you don't want to use the profile tool, you must manually load the extension. 1. Go to the Extensions page [`chrome://extensions`](chrome://extensions) 2. Enable _Developer Mode_ by clicking the toggle switch at the top right @@ -81,6 +75,21 @@ personal profile. - You may set a blank password. - You can pin the Prax extension button to your toolbar for quick access. +#### Using local tarball packages + +If you're working on packages in another repository that you'd like to include +in your development cycle, tooling exists here to support use of local `*.tgz` +packages with `pnpm dev` for a fast watch-edit-rebuild cycle + +```sh +pnpm add:tgz ../path/to/somewhere/specific.tgz ../path/to/some/repo/packages/*/some-filename-*.tgz` +``` + +Your other workspace is responsible for rebuilding and repacking the tarballs. + +This script also handles peer dependency conflict issues that can arise from use +of local tarball packages. + ## Security If you believe you've found a security-related issue with Penumbra, diff --git a/apps/extension/webpack.config.ts b/apps/extension/webpack.config.ts index 646cfed7..16aa36f1 100644 --- a/apps/extension/webpack.config.ts +++ b/apps/extension/webpack.config.ts @@ -19,7 +19,16 @@ dotenv.config({ path: '.env' }); const keysPackage = path.dirname(url.fileURLToPath(import.meta.resolve('@penumbra-zone/keys'))); -const localPackages = Object.values(rootPackageJson.dependencies) +const localPackages = [ + ...Object.values(rootPackageJson.dependencies), + ...Object.values(rootPackageJson.devDependencies), + + /* eslint-disable */ + // typescript and eslint will recognize the literal type of local json. + // this is the simplest way to shut them both up. + ...Object.values(((rootPackageJson as any).pnpm?.overrides ?? {}) as Record), + /* eslint-enable */ +] .filter(specifier => specifier.endsWith('.tgz')) .map(tgzSpecifier => tgzSpecifier.startsWith('file:') ? url.fileURLToPath(tgzSpecifier) : tgzSpecifier, @@ -86,8 +95,9 @@ const PnpmInstallPlugin = { { stdio: 'inherit' }, ); pnpmInstall.on('exit', code => { - if (code) reject(new Error(`pnpm install failed ${code}`)); - else { + if (code) { + reject(new Error(`pnpm install failed ${code}`)); + } else { // clear webpack's cache to ensure new deps are used compiler.purgeInputFileSystem(); resolve(); diff --git a/package.json b/package.json index cf4c0550..1423aa7d 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "lint:prettier": "prettier --check .", "lint:rust": "turbo lint:rust", "lint:syncpack": "syncpack lint", - "postadd:tgz": "$npm_execpath install", "postinstall": "syncpack list-mismatches", "pretest": "playwright install", "test": "turbo test", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a11285ed..609a69b4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -91,7 +91,7 @@ importers: version: 5.5.3 vitest: specifier: ^1.6.0 - version: 1.6.0(@types/node@20.14.10)(@vitest/browser@1.6.0(playwright@1.45.1)(vitest@1.6.0))(jsdom@24.1.0)(terser@5.31.1) + version: 1.6.0(@types/node@20.14.10)(@vitest/browser@1.6.0)(jsdom@24.1.0)(terser@5.31.1) apps/extension: dependencies: @@ -14098,7 +14098,7 @@ snapshots: '@vitest/utils': 1.6.0 magic-string: 0.30.10 sirv: 2.0.4 - vitest: 1.6.0(@types/node@20.14.10)(@vitest/browser@1.6.0(playwright@1.45.1)(vitest@1.6.0))(jsdom@24.1.0)(terser@5.31.1) + vitest: 1.6.0(@types/node@20.14.10)(@vitest/browser@1.6.0)(jsdom@24.1.0)(terser@5.31.1) optionalDependencies: playwright: 1.45.1 @@ -20717,6 +20717,42 @@ snapshots: - sugarss - supports-color - terser + optional: true + + vitest@1.6.0(@types/node@20.14.10)(@vitest/browser@1.6.0)(jsdom@24.1.0)(terser@5.31.1): + dependencies: + '@vitest/expect': 1.6.0 + '@vitest/runner': 1.6.0 + '@vitest/snapshot': 1.6.0 + '@vitest/spy': 1.6.0 + '@vitest/utils': 1.6.0 + acorn-walk: 8.3.3 + chai: 4.4.1 + debug: 4.3.5 + execa: 8.0.1 + local-pkg: 0.5.0 + magic-string: 0.30.10 + pathe: 1.1.2 + picocolors: 1.0.1 + std-env: 3.7.0 + strip-literal: 2.1.0 + tinybench: 2.8.0 + tinypool: 0.8.4 + vite: 5.3.3(@types/node@20.14.10)(terser@5.31.1) + vite-node: 1.6.0(@types/node@20.14.10)(terser@5.31.1) + why-is-node-running: 2.2.2 + optionalDependencies: + '@types/node': 20.14.10 + '@vitest/browser': 1.6.0(playwright@1.45.1)(vitest@1.6.0) + jsdom: 24.1.0 + transitivePeerDependencies: + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser w3c-xmlserializer@5.0.0: dependencies: diff --git a/scripts/add-tgz.ts b/scripts/add-tgz.ts index 56519f20..76946d5e 100644 --- a/scripts/add-tgz.ts +++ b/scripts/add-tgz.ts @@ -64,3 +64,5 @@ for (const [name, tarballUrl] of Object.entries(overrides)) { await cmd('pnpm', ['pkg', 'set', `pnpm.overrides.${name}=${tarballUrl}`]); await cmd('pnpm', ['pkg', 'set', `pnpm.peerDependencyRules.allowAny[].=${name}`]); } + +await cmd('pnpm', ['install']);