Add rspack build tooling for primer-miso frontend#1393
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| "scripts": { | ||
| "build": "rspack build --mode=development", | ||
| "build:prod": "rspack build --mode=production", | ||
| "watch": "rspack watch", | ||
| "serve": "rspack serve" |
There was a problem hiding this comment.
Define rspack entry for frontend assets
The npm scripts call rspack with its default configuration, which looks for ./src/index.js. Primer-miso’s browser code resides in the frontend/ directory and no rspack.config.* was introduced, so running npm run build or npm run serve will error because the expected entry file does not exist. Point the scripts at frontend/index.js (or add a config) so the new build tooling actually runs.
Useful? React with 👍 / 👎.
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const wasmUrl = new URL("./bin.wasm", import.meta.url); | ||
| const ghcModule = await import(/* webpackIgnore: true */ ghc_wasm_jsffiUrl); | ||
| const ghc_wasm_jsffi = | ||
| ghcModule && typeof ghcModule === "object" && "default" in ghcModule ? ghcModule.default : ghcModule; | ||
| if (typeof ghc_wasm_jsffi !== "function") { | ||
| throw new Error("Failed to load ghc_wasm_jsffi module"); | ||
| } | ||
|
|
||
| const instance_exports = {}; | ||
| const { instance } = await WebAssembly.instantiateStreaming(fetch("bin.wasm"), { | ||
| const { instance } = await WebAssembly.instantiateStreaming(fetch(wasmUrl), { |
There was a problem hiding this comment.
Reference generated Wasm at its actual path
The build script now writes the compiled module to frontend/generated/bin.wasm (see build-frontend.sh), but the bundled frontend still resolves new URL("./bin.wasm", import.meta.url) here. Rspack statically resolves new URL() calls during compilation, so it will look for frontend/bin.wasm and abort the build with a "Module not found" error because that file is never created. Update the import to point at ./generated/bin.wasm (or copy the file to the expected location) so the bundler can locate the artifact.
Useful? React with 👍 / 👎.
|
I was considering the Miso UI approach of using Tailwind, ShadCN, Basecoat, and TweakCN for a Primer design system, in which case, as far as I understand it, it'd be nice to have a proper bundler so that we don't have to rely on loading pre-baked shims and stylesheets from CDNs. However, upon further reflection, I think it's a bit mad to pull in this many frameworks/libraries/whatever just to avoid writing some CSS. I may change my mind later if dealing with browser quirks etc. becomes too painful, but for now, let's drop this approach and stick with raw CSS and Haskell as we currently do. |
Summary
Testing
Codex Task