From 22f1102cd1b8b3b7d0be86d08611c98d1190ad91 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 | 62 +++++++++++++++++++------------- apps/extension/webpack.config.ts | 16 +++++++-- package.json | 7 +++- pnpm-lock.yaml | 9 +++++ scripts/add-tgz.ts | 2 ++ 6 files changed, 68 insertions(+), 30 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..317a9ad4 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. +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. -#### Loading your unbundled build of Prax into Chrome +#### Manually loading your unbundled build of Prax into Chrome -After building Prax, you can load it 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,24 @@ 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. + +A git pre-push hook exists to prevent you from pushing a `HEAD` with local path +references to a remote branch. + ## 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..33cadfb9 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,14 @@ "format": "turbo format", "format:prettier": "prettier --write .", "format:syncpack": "syncpack format", + "git:pre-push": "git diff --exit-code -S overrides --cached main ./package.json", "lint": "turbo lint -- --max-warnings 0", "lint:fix": "turbo lint -- --fix", "lint:prettier": "prettier --check .", "lint:rust": "turbo lint:rust", "lint:syncpack": "syncpack lint", - "postadd:tgz": "$npm_execpath install", "postinstall": "syncpack list-mismatches", + "prepare": "pnpx simple-git-hooks", "pretest": "playwright install", "test": "turbo test", "test:rust": "turbo test:rust", @@ -54,10 +55,14 @@ "jsdom": "^24.1.0", "playwright": "^1.44.1", "prettier": "^3.3.2", + "simple-git-hooks": "^2.11.1", "syncpack": "^12.3.2", "tailwindcss": "^3.4.4", "turbo": "^1.13.4", "typescript": "^5.5.3", "vitest": "^1.6.0" + }, + "simple-git-hooks": { + "pre-push": "pnpm git:pre-push" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3a8b0bf4..75f1ccb3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ importers: prettier: specifier: ^3.3.2 version: 3.3.2 + simple-git-hooks: + specifier: ^2.11.1 + version: 2.11.1 syncpack: specifier: ^12.3.2 version: 12.3.3(typescript@5.5.3) @@ -8649,6 +8652,10 @@ packages: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} engines: {node: '>=14'} + simple-git-hooks@2.11.1: + resolution: {integrity: sha512-tgqwPUMDcNDhuf1Xf6KTUsyeqGdgKMhzaH4PAZZuzguOgTl5uuyeYe/8mWgAr6IBxB5V06uqEf6Dy37gIWDtDg==} + hasBin: true + simple-swizzle@0.2.2: resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} @@ -19649,6 +19656,8 @@ snapshots: signal-exit@4.1.0: {} + simple-git-hooks@2.11.1: {} + simple-swizzle@0.2.2: dependencies: is-arrayish: 0.3.2 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']);