Feat/upt chore: update dependencies and improve documentation across inspector packages for better performance and usability #42
Conversation
… packages for better performance and usability
WalkthroughPatch releases across multiple @hyperse packages, large SWC crate upgrades, documentation additions and README rewrites, dev/tooling dependency bumps, example config tweaks (Next.js hotkey and types), CI node-version bumps, and a key SWC transform change deferring file-info lookup and handling dummy spans in JSX transforms. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev as Developer
participant UI as Inspector Component (client)
participant Trans as Build Plugin (SWC/Babel)
participant MW as Dev Server Middleware
participant Launch as Launcher (launch-editor)
participant IDE as IDE
rect rgb(250,250,255)
note right of Trans: Transform change — file-info lookup deferred until JSX eligibility checks pass
Trans->>Trans: When element eligible -> compute filename:line:col -> inject data-hps-file-name
end
Dev->>UI: Press hotkey / click inspect
UI->>MW: HTTP request with file, line, column
alt Valid request
MW->>Launch: Invoke launcher with file:line:col
Launch->>IDE: Open file at location
IDE-->>Dev: Focused at target
else Invalid / unknown
MW-->>UI: Error response
UI-->>Dev: Show error state
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 25
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (9)
packages/inspector-common/package.json (1)
6-9: repository.directory points to the wrong path.This package lives under packages/inspector-common, not packages/inspector-vite. Incorrect metadata affects npm/GitHub links.
"repository": { "type": "git", "url": "https://github.com/hyperse-io/code-inspector", - "directory": "packages/inspector-vite" + "directory": "packages/inspector-common" },packages/next-inspector/package.json (2)
8-9: Wrong repository.directory path.Should point to this package folder.
- "directory": "packages/inspector-vite" + "directory": "packages/next-inspector"
100-102: Update Node engine range in package.json
File: packages/next-inspector/package.json (lines 100–102)
Replace"engines": { "node": ">=18.0.0" }with
"engines": { "node": "^18.18.0 || ^19.8.0 || >=20.0.0" }examples/example-webpack/package.json (1)
5-9: Repository/homepage URLs point to example-rspack — fix to example-webpack.These links are misleading in npm and GitHub UI.
Apply:
- "homepage": "https://github.com/hyperse-io/code-inspector/examples/example-rspack", + "homepage": "https://github.com/hyperse-io/code-inspector/examples/example-webpack", "repository": { "type": "git", - "url": "https://github.com/hyperse-io/code-inspector/examples/example-rspack", + "url": "https://github.com/hyperse-io/code-inspector/examples/example-webpack", "directory": "examples/example-webpack" },README.md (2)
14-18: TOC anchor mismatch.Section is “Features” but TOC links to “Key Features”.
-- [Key Features](#key-features) +- [Features](#features)
198-206: Example config uses mod+g; align with new default mod+i.Inconsistency with “Default Hotkeys” and PR intent.
- keys: ['$mod', 'g'], // Customize hotkeys + keys: ['$mod', 'i'], // Customize hotkeyscrates/inspector-swc-plugin/package.json (2)
8-9: repository.directory points to packages/, but file lives under crates/.This breaks GitHub linking on npm. Fix path.
- "directory": "packages/inspector-swc-plugin" + "directory": "crates/inspector-swc-plugin"
23-31: Fix missing types declaration
dist/index.d.tsis not generated by the build (verified via your script). Ensure the build emitsindex.d.tsunderdist/or remove the"types": "./dist/index.d.ts"entry fromcrates/inspector-swc-plugin/package.json.crates/inspector-swc-plugin/transform/src/lib.rs (1)
71-78: Invalid JS identifier: using filename as an Ident will generate broken code.Filenames contain
/,.,:etc., which are not valid identifier characters. This will create an illegal binding name at module scope.Apply this diff to use a safe constant identifier:
- if self.file_name_identifier.is_none() { - self.file_name_identifier = Some(Ident::new( - filename.clone().into(), - DUMMY_SP, - SyntaxContext::empty(), - )); - } + if self.file_name_identifier.is_none() { + self.file_name_identifier = Some(Ident::new( + "__HPS_SOURCE_FILE__".into(), + DUMMY_SP, + SyntaxContext::empty(), + )); + }
🧹 Nitpick comments (28)
examples/example-webpack/CHANGELOG.md (1)
7-9: Remove empty bracket list in “Updated dependencies”.The “[]” placeholder renders oddly and is inconsistent with prior entries that include commit refs.
- - Updated dependencies []: + - Updated dependencies:packages/next-inspector/README.md (1)
17-28: Add a short “Usage” snippet after installation.Show how to wire the plugin in next.config.mjs to reduce setup friction.
I can draft a concise Usage block if you’d like.
examples/example-rspack/CHANGELOG.md (1)
7-9: Remove empty bracket list in “Updated dependencies”.Match the formatting used in previous entries.
- - Updated dependencies []: + - Updated dependencies:package.json (1)
73-78: Consider updating/removing engines.yarn.With packageManager set to [email protected], engines.yarn ">=1.22.0" is misleading. Either raise to ">=3.0.0" or drop it to avoid confusing environments.
"engines": { "node": ">=18.0.0", "npm": "please-use-yarn", - "yarn": ">=1.22.0" + "yarn": ">=3.0.0" },packages/inspector-component/CHANGELOG.md (1)
7-7: Polish wording for consistency and clarity.Avoid mixed numbering and duplicate “fix”.
-- [#28](https://github.com/hyperse-io/code-inspector/pull/28) [`677f427`](https://github.com/hyperse-io/code-inspector/commit/677f427e99cd7eff979e6384289e43b4a989a916) Thanks [@tclxshunquan-wang](https://github.com/tclxshunquan-wang)! - 1、fix: fix basePath when using next.config.mjs +- [#28](https://github.com/hyperse-io/code-inspector/pull/28) [`677f427`](https://github.com/hyperse-io/code-inspector/commit/677f427e99cd7eff979e6384289e43b4a989a916) Thanks [@tclxshunquan-wang](https://github.com/tclxshunquan-wang)! - fix: correct basePath when using next.config.mjspackages/inspector-common/README.md (1)
3-3: Minor wording tweak (optional).Drop “common” redundancy.
-`@hyperse/inspector-common` is a common package that provides shared utilities for the Hyperse Inspector. +`@hyperse/inspector-common` provides shared utilities for the Hyperse Inspector.packages/next-inspector/package.json (1)
92-94: Tighten Next peer range to avoid unintended majors.Consider constraining to <16 if 16 isn’t tested yet.
- "next": ">=15.3.4", + "next": ">=15.3.4 <16",packages/inspector-component/README.md (1)
17-21: Remove duplicate “Installation” heading.Keep a single H2 to satisfy MD024.
-## Installation - -## Installation +## Installationpackages/next-inspector/CHANGELOG.md (2)
7-7: Polish: fix punctuation and redundancy in the change note.Trim the leading “1、” and avoid double “fix”.
-- [#28](https://github.com/hyperse-io/code-inspector/pull/28) [`677f427`](https://github.com/hyperse-io/code-inspector/commit/677f427e99cd7eff979e6384289e43b4a989a916) Thanks [@tclxshunquan-wang](https://github.com/tclxshunquan-wang)! - 1、fix: fix basePath when using next.config.mjs +- [#28](https://github.com/hyperse-io/code-inspector/pull/28) [`677f427`](https://github.com/hyperse-io/code-inspector/commit/677f427e99cd7eff979e6384289e43b4a989a916) Thanks [@tclxshunquan-wang](https://github.com/tclxshunquan-wang)! - fix: correct basePath handling when using next.config.mjs
9-11: Minor Markdown rendering tweak for dependency list.Add a blank line before nested bullets to avoid renderer quirks.
-- Updated dependencies [[`677f427`](https://github.com/hyperse-io/code-inspector/commit/677f427e99cd7eff979e6384289e43b4a989a916)]: - - @hyperse/[email protected] - - @hyperse/[email protected] +- Updated dependencies [[`677f427`](https://github.com/hyperse-io/code-inspector/commit/677f427e99cd7eff979e6384289e43b4a989a916)]: + + - @hyperse/[email protected] + - @hyperse/[email protected]packages/inspector/package.json (3)
3-3: Version mismatch: confirm intended release version.Changeset/PR suggests a bump; file still shows 1.1.8. Align or confirm no publish intended.
-"version": "1.1.8", +"version": "1.1.9",
55-57: Keep React and React DOM dev versions in lockstep.react-dom is ^19.1.1 while react is ^19.1.0. Bump react for consistency.
- "react": "^19.1.0", + "react": "^19.1.1",
47-60: Toolchain/node compatibility check.ESLint 9 and Vitest 3 may require Node >=18.18.x. Engines say ">=18.0.0". If CI uses older 18.x, tasks can fail. Consider documenting required Node version in repo toolchain or raising engines if appropriate.
crates/inspector-swc-plugin/README.md (3)
3-3: Clarify scope: the SWC plugin doesn’t provide the UI.Rephrase to avoid implying this package ships UI; it enables integration by transforming code.
-`@hyperse/inspector-swc-plugin` is a plugin for the SWC compiler that enables seamless integration of the Hyperse Inspector into your application. It provides the UI and logic for activating inspector mode, allowing developers to select elements in the browser and quickly jump to their source code in the IDE. This package is designed to be lightweight, easy to use, and works out of the box with the rest of the Hyperse Inspector ecosystem. +`@hyperse/inspector-swc-plugin` is an SWC plugin that enables seamless integration of the Hyperse Inspector into your application. It injects the necessary code hooks for activating inspector mode so developers can select elements in the browser and quickly jump to their source code in the IDE. This package is lightweight, easy to use, and works out of the box with the rest of the Hyperse Inspector ecosystem.
5-9: Fix badge typos: use “flat-square”, not “flat-quare”.The style parameter is misspelled in two badges.
-[](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) +[](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) ... -[](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) +[](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE)
12-16: Optional: add a short “Usage” snippet.A minimal swc config example will help users get started faster.
Example to add below Installation:
// swc config example (swc.config.ts or .swcrc) export default { jsc: { experimental: { plugins: [ ["@hyperse/inspector-swc-plugin", {}] ] } } };packages/inspector-component/package.json (1)
63-67: styled-components resolution is redundant with dependency.You already depend on styled-components ^6.1.19 and also force it via resolutions "^6". If you don’t have transitive v5 consumers, consider dropping the resolutions block to reduce constraint surface.
Also applies to: 69-70
packages/inspector/README.md (1)
438-446: Build-time source info note: clarify whether your plugins inject when __source is absent.Small wording tweak to avoid implying users must enable Babel’s jsx-source manually if your plugins already inject.
- It adds `__source` ... The `@hyperse/inspector-*` plugin leverages this or injects similar information... + Babel or SWC may add `__source` ... The `@hyperse/inspector-*` plugins inject or normalize this information even when `__source` is absent..changeset/good-ears-relate.md (2)
13-13: Tighten “Fixed” wording for clarity.Suggest active voice and parallel structure.
-- `@hyperse/inspector-swc-plugin`: Improve transform stability and fix location shifts caused by JSX prop order; align behavior with the Babel plugin. +- `@hyperse/inspector-swc-plugin`: Improves transform stability, fixes location shifts caused by JSX prop order, and aligns behavior with the Babel plugin.
26-26: Minor style: pluralization/consistency.“README” vs “READMEs” — prefer “README files” for clarity.
-- Update package READMEs to reflect latest usage and configuration guidance. +- Update package README files to reflect the latest usage and configuration guidance.examples/example-nextjs/package.json (2)
23-39: Runtime vs dev-only deps: confirm intent.inspector-component is runtime, but inspector-middleware is dev-only. If not required at runtime, move middleware to devDependencies to reduce install size for the example.
- "dependencies": { + "dependencies": { "@hyperse/inspector": "workspace:*", "@hyperse/inspector-babel-plugin": "workspace:*", "@hyperse/inspector-common": "workspace:*", - "@hyperse/inspector-component": "workspace:*", - "@hyperse/inspector-middleware": "workspace:*", + "@hyperse/inspector-component": "workspace:*", "@hyperse/next-inspector": "workspace:*", ... - }, + }, + "devDependencies": { + "@hyperse/inspector-middleware": "workspace:*", + ... + },
41-65: Verify Node engine compatibility.Next 15.5.x, TypeScript 5.9.x, and @types/node 24.x typically assume Node ≥18.18 or ≥20. Consider adding an engines field or documenting required Node version.
"browserslist": { + }, + "engines": { + "node": ">=18.18.0" }README.md (1)
60-63: Default hotkey consistency.Docs say default is mod+i. Ensure examples and defaults match.
- If default truly is mod+i, add a short note: “Default: ⌘/Ctrl + i”.
examples/example-rspack/package.json (2)
22-36: Deps look consistent; confirm runtime vs dev-only.As with Next.js example, consider moving inspector-middleware to devDependencies if not required at runtime.
42-44: Rspack 1.5.x engine/compat check.Add engines.node or docs note to ensure Node version compatibility across examples.
crates/inspector-swc-plugin/package.json (1)
46-59: SWC/tooling bumps LGTM; pinning is appropriate.Consider aligning @swc/* versions with Rust SWC workspace versions in Cargo for easier maintenance; add a comment noting the intended sync.
crates/inspector-swc-plugin/transform/src/lib.rs (2)
80-86: Comment says “data-hps-file-name” but code writes “data-hps-source”.Align the comment to avoid confusion in future edits.
- // Add data-hps-file-name attribute + // Add data-hps-source attribute
80-106: Optional: reuse the module-scoped filename to cut repeated string payloads.Right now each attribute embeds the full filename string. Consider emitting
${__HPS_SOURCE_FILE__}:${line}:${col}:${tag}via a binary+chain or template literal to reduce bundle bloat.Would you like a patch converting this to a
Tpl(template literal) that references the ident?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (2)
Cargo.lockis excluded by!**/*.lockyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (33)
.changeset/good-ears-relate.md(1 hunks).changeset/old-clouds-brake.md(0 hunks)Cargo.toml(1 hunks)README.md(3 hunks)crates/inspector-swc-plugin/README.md(1 hunks)crates/inspector-swc-plugin/package.json(1 hunks)crates/inspector-swc-plugin/transform/src/lib.rs(2 hunks)examples/example-nextjs/CHANGELOG.md(1 hunks)examples/example-nextjs/next-env.d.ts(1 hunks)examples/example-nextjs/next.config.mjs(1 hunks)examples/example-nextjs/package.json(3 hunks)examples/example-rspack/CHANGELOG.md(1 hunks)examples/example-rspack/package.json(2 hunks)examples/example-webpack/CHANGELOG.md(1 hunks)examples/example-webpack/package.json(2 hunks)package.json(1 hunks)packages/inspector-babel-plugin/README.md(1 hunks)packages/inspector-babel-plugin/package.json(1 hunks)packages/inspector-common/README.md(1 hunks)packages/inspector-common/package.json(1 hunks)packages/inspector-component/CHANGELOG.md(1 hunks)packages/inspector-component/README.md(1 hunks)packages/inspector-component/package.json(2 hunks)packages/inspector-middleware/README.md(1 hunks)packages/inspector-middleware/package.json(1 hunks)packages/inspector/CHANGELOG.md(1 hunks)packages/inspector/README.md(1 hunks)packages/inspector/package.json(2 hunks)packages/next-inspector/CHANGELOG.md(1 hunks)packages/next-inspector/README.md(1 hunks)packages/next-inspector/package.json(2 hunks)packages/next-inspector/vitest.config.ts(1 hunks)website/package.json(1 hunks)
💤 Files with no reviewable changes (1)
- .changeset/old-clouds-brake.md
🧰 Additional context used
🧬 Code graph analysis (1)
crates/inspector-swc-plugin/transform/src/lib.rs (1)
crates/inspector-swc-plugin/transform/src/utils.rs (1)
get_file_info(4-18)
🪛 ESLint
examples/example-nextjs/next-env.d.ts
[error] 3-3: Do not use a triple slash reference for ./.next/types/routes.d.ts, use import style instead.
(@typescript-eslint/triple-slash-reference)
🪛 LanguageTool
packages/inspector/CHANGELOG.md
[grammar] ~7-~7: There might be a mistake here.
Context: ...f427e99cd7eff979e6384289e43b4a989a916)]: - @hyperse/[email protected] ## 1...
(QB_NEW_EN)
examples/example-nextjs/CHANGELOG.md
[grammar] ~7-~7: There might be a mistake here.
Context: ...f427e99cd7eff979e6384289e43b4a989a916)]: - @hyperse/[email protected] - @...
(QB_NEW_EN)
[grammar] ~8-~8: There might be a mistake here.
Context: ...: - @hyperse/[email protected] - @hyperse/[email protected] - @hyper...
(QB_NEW_EN)
[grammar] ~9-~9: There might be a mistake here.
Context: [email protected] - @hyperse/[email protected] - @hyperse/[email protected] ## 1.1.8 ### ...
(QB_NEW_EN)
packages/next-inspector/README.md
[grammar] ~6-~6: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
[grammar] ~15-~15: There might be a mistake here.
Context: ...imal dependencies and easy to customize. ## Installation ```bash # npm npm install ...
(QB_NEW_EN)
crates/inspector-swc-plugin/README.md
[grammar] ~6-~6: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
[grammar] ~15-~15: There might be a mistake here.
Context: ...imal dependencies and easy to customize. ## Installation ```bash # npm npm install ...
(QB_NEW_EN)
.changeset/good-ears-relate.md
[grammar] ~26-~26: There might be a mistake here.
Context: ...umentation - Update package READMEs to reflect latest usage and configuration guidance...
(QB_NEW_EN)
[grammar] ~26-~26: There might be a mistake here.
Context: ...latest usage and configuration guidance.
(QB_NEW_EN)
packages/inspector-common/README.md
[grammar] ~6-~6: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
[grammar] ~12-~12: There might be a mistake here.
Context: ...red utilities for the Hyperse Inspector. ## Installation ```bash # npm npm install ...
(QB_NEW_EN)
packages/inspector-middleware/README.md
[grammar] ~6-~6: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
[grammar] ~15-~15: There might be a mistake here.
Context: ...imal dependencies and easy to customize. ## Installation ```bash # npm npm install ...
(QB_NEW_EN)
packages/inspector-component/README.md
[grammar] ~6-~6: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
[grammar] ~15-~15: There might be a mistake here.
Context: ...imal dependencies and easy to customize. ## Installation ## Installation Choose yo...
(QB_NEW_EN)
packages/inspector/README.md
[grammar] ~8-~8: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
[grammar] ~15-~15: There might be a mistake here.
Context: ...](#why-hyperseinspector) - Key Features - Default Hotkeys - [Qu...
(QB_NEW_EN)
[grammar] ~16-~16: There might be a mistake here.
Context: ...tures](#key-features) - Default Hotkeys - Quick Look - [Installation...
(QB_NEW_EN)
[grammar] ~17-~17: There might be a mistake here.
Context: ...Hotkeys](#default-hotkeys) - Quick Look - Installation - [How to U...
(QB_NEW_EN)
[grammar] ~18-~18: There might be a mistake here.
Context: ...Quick Look](#quick-look) - Installation - [How to Use and Configure](#how-to-use-an...
(QB_NEW_EN)
[grammar] ~19-~19: There might be a mistake here.
Context: ...nstallation) - How to Use and Configure - [Step 1: Install Packages](#step-1-instal...
(QB_NEW_EN)
[grammar] ~20-~20: There might be a mistake here.
Context: ...configure) - Step 1: Install Packages - [Step 2: Add the Inspector Component to Y...
(QB_NEW_EN)
[grammar] ~21-~21: There might be a mistake here.
Context: ... Add the Inspector Component to Your App](#step-2-add-the-inspector-component-to-your-app) - [Step 3: Configure the Build Tool Plugin ...
(QB_NEW_EN)
[grammar] ~22-~22: There might be a mistake here.
Context: ...ure the Build Tool Plugin (Babel or SWC)](#step-3-configure-the-build-tool-plugin-babel-or-swc) - [Step 4: Configure the Dev Server Middlew...
(QB_NEW_EN)
[grammar] ~23-~23: There might be a mistake here.
Context: ...p 4: Configure the Dev Server Middleware](#step-4-configure-the-dev-server-middleware) - Webpack - Vite ...
(QB_NEW_EN)
[grammar] ~24-~24: There might be a mistake here.
Context: ...he-dev-server-middleware) - Webpack - Vite - Rspack ...
(QB_NEW_EN)
[grammar] ~25-~25: There might be a mistake here.
Context: ...e) - Webpack - Vite - Rspack - [Next.js](#nextjs...
(QB_NEW_EN)
[grammar] ~26-~26: There might be a mistake here.
Context: ...bpack) - Vite - Rspack - Next.js - [Customization](#cus...
(QB_NEW_EN)
[grammar] ~27-~27: There might be a mistake here.
Context: ...) - Rspack - Next.js - Customization - [Cust...
(QB_NEW_EN)
[grammar] ~28-~28: There might be a mistake here.
Context: ... - Next.js - Customization - Custom Hotkeys - [Co...
(QB_NEW_EN)
[grammar] ~29-~29: There might be a mistake here.
Context: ...ion](#customization) - Custom Hotkeys - Controlled Mode - [Ho...
(QB_NEW_EN)
[grammar] ~30-~30: There might be a mistake here.
Context: ...s](#custom-hotkeys) - Controlled Mode - How It Works - [Supporte...
(QB_NEW_EN)
[grammar] ~31-~31: There might be a mistake here.
Context: ... Mode](#controlled-mode) - How It Works - [Supported IDEs/Editors](#supported-idese...
(QB_NEW_EN)
[grammar] ~32-~32: There might be a mistake here.
Context: ...#how-it-works) - Supported IDEs/Editors - Troubleshooting - [Co...
(QB_NEW_EN)
[grammar] ~33-~33: There might be a mistake here.
Context: ...upported-ideseditors) - Troubleshooting - Contributing - [License]...
(QB_NEW_EN)
[grammar] ~34-~34: There might be a mistake here.
Context: ...oting](#troubleshooting) - Contributing - License - [Acknowledgements](...
(QB_NEW_EN)
[grammar] ~35-~35: There might be a mistake here.
Context: ...Contributing - License - Acknowledgements ##...
(QB_NEW_EN)
[grammar] ~40-~40: There might be a mistake here.
Context: ...ou ever run into any of these issues 🤔: - You need to fix bugs in a team project, ...
(QB_NEW_EN)
[grammar] ~43-~43: There might be a mistake here.
Context: ...ntation of a specific page or component. - You're thinking about a component and wa...
(QB_NEW_EN)
[style] ~44-~44: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...tion of a specific page or component. - You're thinking about a component and want ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~46-~46: Consider an alternative for the overused word “exactly”.
Context: ...rough deeply nested file paths. That's exactly why @hyperse/inspector was created ...
(EXACTLY_PRECISELY)
[grammar] ~51-~51: There might be a mistake here.
Context: ...gration:** Launches your configured IDE/Editor pointing to the exact file and line num...
(QB_NEW_EN)
[grammar] ~51-~51: There might be a mistake here.
Context: ...nting to the exact file and line number. - 🛠️ Multi-framework Support: Works w...
(QB_NEW_EN)
[grammar] ~56-~56: There might be a mistake here.
Context: ...ned to work with various project setups. ### Default Hotkeys - macOS: ⌘ + i - Wind...
(QB_NEW_EN)
[grammar] ~60-~60: There might be a mistake here.
Context: ... setups. ### Default Hotkeys - macOS: ⌘ + i - Windows/Linux: Ctrl + i You can custo...
(QB_NEW_EN)
[grammar] ~97-~97: There might be a mistake here.
Context: ... 4. For Next.js projects, also install: - @hyperse/next-inspector: The Next.js plugin ### Step 2: Add th...
(QB_NEW_EN)
[grammar] ~217-~217: There might be a mistake here.
Context: ...ojectCwd: Your project's root directory - trustedEditor`: Your preferred IDE (e.g., 'cursor', 'v...
(QB_NEW_EN)
[grammar] ~218-~218: There might be a mistake here.
Context: ...E (e.g., 'cursor', 'vscode', 'webstorm') - customLaunchEditorEndpoint: Custom endpoint for launching the edit...
(QB_NEW_EN)
[grammar] ~219-~219: There might be a mistake here.
Context: ...Custom endpoint for launching the editor - keys: Custom hotkey configuration - `hideDom...
(QB_NEW_EN)
[grammar] ~220-~220: There might be a mistake here.
Context: ...or - keys: Custom hotkey configuration - hideDomPathAttr: Whether to hide DOM path attributes in...
(QB_NEW_EN)
[grammar] ~456-~456: There might be a mistake here.
Context: ...include: - Visual Studio Code (VS Code) - WebStorm / IntelliJ IDEA / PhpStorm / Py...
(QB_NEW_EN)
[grammar] ~457-~457: There might be a mistake here.
Context: ...orm / PyCharm (and other JetBrains IDEs) - Sublime Text - Atom - Vim / Neovim - Ema...
(QB_NEW_EN)
[grammar] ~458-~458: There might be a mistake here.
Context: ...and other JetBrains IDEs) - Sublime Text - Atom - Vim / Neovim - Emacs - And more.....
(QB_NEW_EN)
[grammar] ~459-~459: There might be a mistake here.
Context: ...er JetBrains IDEs) - Sublime Text - Atom - Vim / Neovim - Emacs - And more... Ensu...
(QB_NEW_EN)
[grammar] ~460-~460: There might be a mistake here.
Context: ...Es) - Sublime Text - Atom - Vim / Neovim - Emacs - And more... Ensure your chosen ...
(QB_NEW_EN)
[grammar] ~461-~461: There might be a mistake here.
Context: ...blime Text - Atom - Vim / Neovim - Emacs - And more... Ensure your chosen IDE is c...
(QB_NEW_EN)
[style] ~475-~475: Consider shortening or rephrasing this to strengthen your wording.
Context: ...r development server and terminal after making changes to environment variables. - **Component so...
(MAKE_CHANGES)
[grammar] ~476-~476: There might be a mistake here.
Context: ...t source not found / incorrect location:** - Verify that the Babel or SWC plugin is c...
(QB_NEW_EN)
[grammar] ~477-~477: There might be a mistake here.
Context: ...ed and running only in development mode. - Ensure source maps are being generated c...
(QB_NEW_EN)
packages/inspector-babel-plugin/README.md
[grammar] ~6-~6: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
[grammar] ~15-~15: There might be a mistake here.
Context: ...imal dependencies and easy to customize. ## Installation ```bash # npm npm install ...
(QB_NEW_EN)
README.md
[grammar] ~8-~8: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
packages/next-inspector/CHANGELOG.md
[grammar] ~9-~9: There might be a mistake here.
Context: ...f427e99cd7eff979e6384289e43b4a989a916)]: - @hyperse/[email protected] - @...
(QB_NEW_EN)
[grammar] ~10-~10: There might be a mistake here.
Context: ...: - @hyperse/[email protected] - @hyperse/[email protected] ## 1.1.2 ### ...
(QB_NEW_EN)
🪛 markdownlint-cli2 (0.17.2)
packages/inspector-component/README.md
19-19: Multiple headings with the same content
(MD024, no-duplicate-heading)
🔇 Additional comments (13)
packages/inspector/CHANGELOG.md (1)
3-9: LGTM: clear dependency bump entry.Entry correctly records the @hyperse/inspector-component 1.1.3 update with commit reference.
examples/example-nextjs/next.config.mjs (1)
10-10: Ensure legacy hotkey references are fully removed
Search yielded nomod+gor['$mod','g']patterns; manually verify documentation (README, docs/) and example files for any lingering mentions.packages/inspector-common/package.json (1)
47-58: Dev dependency bumps LGTM.Versions align with the repo-wide toolchain upgrades.
examples/example-webpack/package.json (1)
31-36: Version bumps look compatible with React 19 and Webpack 5.Nothing concerning stands out in these ranges; good housekeeping.
Also applies to: 38-64
website/package.json (1)
49-61: Deps matrix verified: React 19.1.1 and React-DOM 19.1.1 satisfy Docusaurus 3.8.1 peer ranges (^18.0.0 || ^19.0.0), @mdx-js/react 3.1.0 satisfies ^3.0.0, and Yarn 4.9.1 with Node v24.3.0 is compatible.packages/inspector-middleware/package.json (2)
58-58: Express v5 dependency, not peer — intentional?If consumers run the middleware inside their own Express 5 servers, consider
peerDependenciesto avoid duplicate instances; otherwise bundling Express is fine if you create your own server. Clarify intent.
59-60: launch-editor@^2.11.1 supportscursorout-of-the-box
Verified that v2.11.1 includes built-in support for thecursoreditor id (per the merged PR on June 16, 2024 and published npm release), so no changes are needed.README.md (2)
291-315: Vite snippet: import path comment and middleware use look good.The import source and conditional middleware are correct for Vite dev.
418-424: Ignore outdated attribute suggestion
Both the Babel and SWC plugins only emit a singledata-hps-sourceattribute. The SWC plugin’s transform declaresconst TRACE_SOURCE: &str = "data-hps-source";and all its tests assert on
data-hps-source【run_scripts】. The Babel plugin likewise injects onlydata-hps-sourceinto JSX elements【run_scripts】. Nodata-hps-file-nameordata-hps-locattributes are produced.Likely an incorrect or invalid review comment.
examples/example-rspack/package.json (1)
3-3: Version bump LGTM.Cargo.toml (1)
28-28: Double Rayon enablement can increase CPU usage and binary size.You enable
features = ["parallel_rayon"]onswc_coreand["rayon"]onswc_parallel. Confirm this won’t oversubscribe threads or inflate code size unexpectedly.If needed, gate one of these via a workspace feature and perf-test with large inputs.
Also applies to: 34-34
crates/inspector-swc-plugin/transform/src/lib.rs (2)
53-66: Early exits cover dummy spans, duplicates, and fragments—LGTM.The eligibility checks are correct and cheap; good placement before any source-map work.
68-70: Potential PII leak: absolute paths may end up in client bundles.
get_file_infocan return absolute paths whenproject_cwdis set. Ensure production builds don’t emit absolute filesystem paths intodata-hps-source.Consider an option to emit project-relative paths or a hashed path in release mode.
| swc = { version = "36.0.0", default-features = false } | ||
| swc_common = { version = "14.0.3" } | ||
| swc_config = { version = "3.1.1" } | ||
| swc_core = { version = "37.0.0", default-features = false, features = ["parallel_rayon"] } | ||
| swc_ecma_minifier = { version = "=31.0.0", default-features = false } | ||
| swc_error_reporters = { version = "=16.0.1" } | ||
| swc_html = { version = "=26.0.0" } | ||
| swc_html_minifier = { version = "=31.0.0", default-features = false } | ||
| swc_node_comments = { version = "=14.0.0" } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Make SWC version pinning consistent to avoid lockfile drift.
Some SWC crates are pinned with =, others are caret-ranged. For reproducible builds across the workspace (per the “Must be pinned” note), pin all SWC-family crates to exact versions or none. Mixed strategy risks accidental minor/patch drift.
Apply this diff (example set pins; adjust if you prefer caret everywhere instead):
-swc = { version = "36.0.0", default-features = false }
-swc_common = { version = "14.0.3" }
-swc_config = { version = "3.1.1" }
+swc = { version = "=36.0.0", default-features = false }
+swc_common = { version = "=14.0.3" }
+swc_config = { version = "=3.1.1" }
-swc_ecma_ast = { version = "15.0.0" }
-swc_ecma_utils = { version = "21.0.0" }
-swc_ecma_visit = { version = "15.0.0" }
+swc_ecma_ast = { version = "=15.0.0" }
+swc_ecma_utils = { version = "=21.0.0" }
+swc_ecma_visit = { version = "=15.0.0" }
-swc_atoms = { version = "7.0.0" }
+swc_atoms = { version = "=7.0.0" }
-swc_ecma_transforms_react = { version = "28.0.0" }
-swc_ecma_transforms_testing = { version = "28.0.0" }
+swc_ecma_transforms_react = { version = "=28.0.0" }
+swc_ecma_transforms_testing = { version = "=28.0.0" }To verify, run a quick check for unpinned SWC crates:
Also applies to: 35-37, 39-39, 41-42, 44-44
🏁 Script executed:
#!/bin/bash
rg -nP '^\s*swc(_[a-z0-9]+)?\s*=\s*\{\s*version\s*=\s*"(?!\=)' -n -C0 Cargo.tomlLength of output: 601
Pin all unpinned SWC crates to exact versions in Cargo.toml.
The unpinned SWC-family crates are swc, swc_common, swc_config, swc_core, swc_parallel, swc_atoms and swc_cached; prepend “=” to their version values (e.g. version = "=36.0.0") to ensure reproducible builds.
🤖 Prompt for AI Agents
In Cargo.toml around lines 25–33, several SWC-family dependencies are not pinned
to exact versions; update their version fields to use exact version pins by
prepending "=" (for example change version = "36.0.0" to version = "=36.0.0")
for the unpinned entries shown (swc, swc_common, swc_config, swc_core) and also
ensure any other SWC-family crates in the file (swc_parallel, swc_atoms,
swc_cached, etc.) are similarly changed to exact pins so all SWC crates use
"="-prefixed versions for reproducible builds.
💡 Verification agent
🧩 Analysis chain
Confirm MSRV compatibility after SWC upgrades.
Workspace rust-version = "1.70" may be below the MSRV required by newer SWC crates.
🌐 Web query:
What is the current MSRV for swc_core 37.x and swc_common 14.x?
💡 Result:
As of the current package docs, SWC's crates (including swc_core 37.x and swc_common 14.x) declare an MSRV of Rust 1.73. [1][2]
Sources:
- swc crates documentation/listings (lib.rs). [1]
- @swc/core npm package readme (notes MSRV = 1.73). [2]
Bump workspace MSRV to ≥1.73
The SWC crates (swc_core 37.x, swc_common 14.x, etc.) now require Rust 1.73, but rust-version = "1.70" in Cargo.toml is too low. Update the rust-version field in your workspace Cargo.toml to "1.73" (or higher).
🤖 Prompt for AI Agents
In Cargo.toml around lines 25 to 33, the workspace rust-version is currently set
to "1.70" but the SWC crates require ≥1.73; update the rust-version field in the
workspace Cargo.toml to "1.73" (or a later version you support) and ensure any
toolchain/CI configs (rust-toolchain, CI pipeline) are aligned to the same
version so builds use the updated Rust toolchain.
| fn visit_mut_module(&mut self, module: &mut Module) { | ||
| let (_, _, filename) = | ||
| get_file_info(self.project_cwd.clone(), &self.source_map, module.span.lo); | ||
| let filename = if module.span.is_dummy() { | ||
| String::new() | ||
| } else { | ||
| let (_, _, f) = | ||
| get_file_info(self.project_cwd.clone(), &self.source_map, module.span.lo); | ||
| f | ||
| }; |
There was a problem hiding this comment.
Module var likely never inserted; traverse children first and ensure ident exists.
visit_mut_module inserts the var before visiting children, but file_name_identifier is set in the JSX visitor, so it’s None here. Result: no insertion. Also ensure the identifier is always initialized.
Apply this diff:
fn visit_mut_module(&mut self, module: &mut Module) {
- let filename = if module.span.is_dummy() {
+ let filename = if module.span.is_dummy() {
String::new()
} else {
let (_, _, f) =
get_file_info(self.project_cwd.clone(), &self.source_map, module.span.lo);
f
};
-
- // Add file name variable declaration at the start of the module
- if let Some(file_name_id) = &self.file_name_identifier {
- module.body.insert(
- 0,
- ModuleItem::Stmt(Stmt::Decl(Decl::Var(Box::new(VarDecl {
- span: DUMMY_SP,
- kind: VarDeclKind::Var,
- declare: false,
- decls: vec![VarDeclarator {
- span: DUMMY_SP,
- name: Pat::Ident(BindingIdent {
- id: file_name_id.clone(),
- type_ann: None,
- }),
- init: Some(Box::new(Expr::Lit(Lit::Str(Str {
- span: DUMMY_SP,
- value: filename.clone().into(),
- raw: None,
- })))),
- definite: false,
- }],
- ctxt: SyntaxContext::empty(),
- })))),
- );
- }
-
- module.visit_mut_children_with(self);
+ // Visit children first so JSX visitors can set up state.
+ module.visit_mut_children_with(self);
+
+ // Ensure we always have a JS-safe identifier.
+ if self.file_name_identifier.is_none() {
+ self.file_name_identifier = Some(Ident::new(
+ "__HPS_SOURCE_FILE__".into(),
+ DUMMY_SP,
+ SyntaxContext::empty(),
+ ));
+ }
+
+ if let Some(file_name_id) = &self.file_name_identifier {
+ module.body.insert(
+ 0,
+ ModuleItem::Stmt(Stmt::Decl(Decl::Var(Box::new(VarDecl {
+ span: DUMMY_SP,
+ kind: VarDeclKind::Var,
+ declare: false,
+ decls: vec![VarDeclarator {
+ span: DUMMY_SP,
+ name: Pat::Ident(BindingIdent {
+ id: file_name_id.clone(),
+ type_ann: None,
+ }),
+ init: Some(Box::new(Expr::Lit(Lit::Str(Str {
+ span: DUMMY_SP,
+ value: filename.into(),
+ raw: None,
+ })))),
+ definite: false,
+ }],
+ ctxt: SyntaxContext::empty(),
+ })))),
+ );
+ }
}Also applies to: 120-147
🤖 Prompt for AI Agents
In crates/inspector-swc-plugin/transform/src/lib.rs around lines 111-118 (and
similarly 120-147), the module-level var insert runs before children are
traversed so file_name_identifier (set in JSX visitor) is still None and the var
is never inserted; change to traverse children first (call visit_mut_module on
super or visit_mut_children) and only after visiting children, ensure
file_name_identifier is initialized (create a new Ident if still None using the
source_map filename or an empty string) and then insert the var into the module
body; also make sure the identifier is created once and reused rather than
relying solely on the JSX visitor.
| @@ -1,5 +1,14 @@ | |||
| # @example/example-rspack | |||
There was a problem hiding this comment.
Fix package name in heading.
Changelog title references rspack instead of nextjs.
-# @example/example-rspack
+# @example/example-nextjs📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # @example/example-rspack | |
| # @example/example-nextjs |
🤖 Prompt for AI Agents
In examples/example-nextjs/CHANGELOG.md around line 1, the changelog heading
incorrectly references "@example/example-rspack" instead of the example's
package name; update the first line to the correct package/heading (e.g., "#
@example/example-nextjs" or the intended canonical title) so the changelog title
matches the project directory and content.
| @@ -1,5 +1,6 @@ | |||
| /// <reference types="next" /> | |||
| /// <reference types="next/image-types/global" /> | |||
| /// <reference path="./.next/types/routes.d.ts" /> | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid editing next-env.d.ts; move typed routes reference to a separate ambient types file.
This file is generated and the linter flags triple-slash refs. Put the reference in a dedicated .d.ts instead and revert this line.
-/// <reference path="./.next/types/routes.d.ts" />Create a new file (outside this diff) to load the routes types:
TypeScript (new file: examples/example-nextjs/types/next-routes.d.ts)
// Keep this committed; TS will load it via tsconfig "include".
import '../.next/types/routes.d.ts';Ensure tsconfig.json includes "examples/example-nextjs/types/**/*.d.ts".
🧰 Tools
🪛 ESLint
[error] 3-3: Do not use a triple slash reference for ./.next/types/routes.d.ts, use import style instead.
(@typescript-eslint/triple-slash-reference)
🤖 Prompt for AI Agents
In examples/example-nextjs/next-env.d.ts around line 3, revert the added
triple-slash reference; do not edit this generated file. Instead create a new
ambient types file at examples/example-nextjs/types/next-routes.d.ts that
imports the generated routes types (e.g., import '../.next/types/routes.d.ts';)
and commit it so TypeScript loads it, and update
examples/example-nextjs/tsconfig.json to include
"examples/example-nextjs/types/**/*.d.ts" in the "include" array so the new file
is picked up by the compiler.
| "type": "module", | ||
| "scripts": { | ||
| "dev": "next dev --turbopack", | ||
| "dev": "RUST_BACKTRACE=full next dev --turbopack", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Make dev script cross-platform.
Setting env vars inline breaks on Windows. Use cross-env.
- "dev": "RUST_BACKTRACE=full next dev --turbopack",
+ "dev": "cross-env RUST_BACKTRACE=full next dev --turbopack",Also add the dependency:
"devDependencies": {
+ "cross-env": "^7.0.3",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "dev": "RUST_BACKTRACE=full next dev --turbopack", | |
| "scripts": { | |
| "dev": "cross-env RUST_BACKTRACE=full next dev --turbopack", | |
| // …other scripts… | |
| }, | |
| "devDependencies": { | |
| "cross-env": "^7.0.3", | |
| // …other devDependencies… | |
| } |
🤖 Prompt for AI Agents
In examples/example-nextjs/package.json around line 17 the dev script sets
RUST_BACKTRACE inline which breaks on Windows; change the script to prefix with
cross-env (e.g. "dev": "cross-env RUST_BACKTRACE=full next dev --turbopack") and
add cross-env to devDependencies (or run npm/yarn/pnpm install --save-dev
cross-env) so the script is cross-platform.
| const plugins = [ | ||
| withNextInspector({ | ||
| projectCwd: resolve(process.cwd()), | ||
| trustedEditor: 'cursor', // or 'vscode', 'webstorm', etc. | ||
| customLaunchEditorEndpoint: '/hps_inspector', | ||
| keys: ['$mod', 'g'], // Customize hotkeys | ||
| hideDomPathAttr: false, | ||
| }), | ||
| ]; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify Next.js plugin API and editor id values.
Double-check createNextConfig import path and that trustedEditor: 'cursor' matches what your middleware/launcher expects.
Also applies to: 215-222
🏁 Script executed:
#!/bin/bash
# Verify we actually export createNextConfig and the plugin path
rg -nP "(export\\s+)?function\\s+createNextConfig|export\\s+default\\s+createNextConfig" -C2
rg -n "@hyperse/next-inspector/plugin" -C2Length of output: 1654
🏁 Script executed:
#!/bin/bash
# Locate the withNextInspector implementation and inspect trustedEditor options
rg -n "function withNextInspector" -C3 packages/inspector
rg -n "trustedEditor" -C3 packages/inspector
rg -n "cursor" -C3 packages/inspectorLength of output: 2835
🏁 Script executed:
#!/bin/bash
# List all packages to confirm structure
ls packages
# Inspect next-config package details and export path
sed -n '1,200p' packages/next-config/package.json
# Find createNextConfig implementation in next-config
rg -n "createNextConfig" -C5 packages/next-config/src
# Dump helper-editor.ts to verify supported editor IDs
sed -n '1,200p' packages/inspector/src/helpers/helper-editor.tsLength of output: 4026
🏁 Script executed:
#!/bin/bash
# Verify the package name and existence of createNextConfig in next-inspector
sed -n '1,200p' packages/next-inspector/package.json
rg -n "createNextConfig" -C5 packages/next-inspector/srcLength of output: 3309
🏁 Script executed:
#!/bin/bash
# Confirm packages/next-inspector directory contents
ls packages/next-inspector
# Search for createNextConfig across all packages
rg -n "createNextConfig" -C3 packagesLength of output: 1028
Fix createNextConfig import in README
Change the example in packages/inspector/README.md lines 194–196, 212 from:
import { createNextConfig } from '@hyperse/next-config';to:
import { createNextConfig } from '@hyperse/next-inspector';(@hyperse/next-config doesn’t exist in this monorepo). trustedEditor: 'cursor' is valid and aligns with the supported editor URLs.
🤖 Prompt for AI Agents
In packages/inspector/README.md around lines 194–196 and 212 (example snippet
shown at 198–206), the README imports createNextConfig from the non-existent
package @hyperse/next-config; update the import to use createNextConfig from
@hyperse/next-inspector and leave the trustedEditor: 'cursor' value as shown so
the example references the correct package in this monorepo.
| // If using SWC (default for @vitejs/plugin-react v3+), | ||
| // ensure @hyperse/inspector-swc-plugin is in your .swcrc | ||
| // or configure it via swc options if available in plugin-react. | ||
| }), |
There was a problem hiding this comment.
Vite note is inaccurate — SWC is not the default for @vitejs/plugin-react.
Use @vitejs/plugin-react (Babel) or @vitejs/plugin-react-swc (SWC). Adjust the note and import accordingly if you intend to show SWC usage.
-import react from '@vitejs/plugin-react';
+// For Babel:
+import react from '@vitejs/plugin-react';
+// For SWC:
+// import react from '@vitejs/plugin-react-swc';
@@
- // If using SWC (default for @vitejs/plugin-react v3+),
- // ensure @hyperse/inspector-swc-plugin is in your .swcrc
- // or configure it via swc options if available in plugin-react.
+ // If using SWC (via @vitejs/plugin-react-swc),
+ // ensure @hyperse/inspector-swc-plugin is in your .swcrc
+ // or configure it via the SWC plugin options.Also applies to: 288-291
🤖 Prompt for AI Agents
In packages/inspector/README.md around lines 288-291 and 305-308, the note
incorrectly states that SWC is the default for @vitejs/plugin-react; update the
text to clarify that @vitejs/plugin-react uses Babel by default and that SWC is
available via @vitejs/plugin-react-swc (or by explicitly using
@vitejs/plugin-react with swc options if applicable), and update example imports
or instructions to show both alternatives (Babel: @vitejs/plugin-react, SWC:
@vitejs/plugin-react-swc) and how to configure @hyperse/inspector-swc-plugin in
.swcrc when using the SWC plugin.
| [](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) | ||
| [](https://www.npmjs.com/package/@hyperse/inspector) | ||
| [](https://github.com/hyperse-io/code-inspector/search?l=typescript) | ||
| [](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) |
There was a problem hiding this comment.
Fix badges: typo in style and wrong npm package target.
- “flat-quare” → “flat-square”.
- Version badge should point to @hyperse/next-inspector, not @hyperse/inspector.
-[](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI)
-[](https://www.npmjs.com/package/@hyperse/inspector)
+[](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI)
+[](https://www.npmjs.com/package/@hyperse/next-inspector)
[](https://github.com/hyperse-io/code-inspector/search?l=typescript)
-[](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE)
+[](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| [](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) | |
| [](https://www.npmjs.com/package/@hyperse/inspector) | |
| [](https://github.com/hyperse-io/code-inspector/search?l=typescript) | |
| [](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) | |
| [](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) | |
| [](https://www.npmjs.com/package/@hyperse/next-inspector) | |
| [](https://github.com/hyperse-io/code-inspector/search?l=typescript) | |
| [](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) |
🧰 Tools
🪛 LanguageTool
[grammar] ~6-~6: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
🤖 Prompt for AI Agents
In packages/next-inspector/README.md around lines 5 to 8, there are badge typos
and an incorrect npm package target: replace every occurrence of "flat-quare"
with "flat-square" in the badge URLs/styles, and update the Version badge's npm
link and encoded package path from @hyperse/inspector to @hyperse/next-inspector
(e.g. change npm URL and the percent-encoded package segment from
%40hyperse%2Finspector to %40hyperse%2Fnext-inspector) so the badge points to
the correct package and displays with the correct style.
|
|
||
| export default defineConfig({ | ||
| plugins: [tsconfigPaths()], | ||
| plugins: [tsconfigPaths() as any], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid any in plugins; use proper Vite types.
Cast to PluginOption (or use satisfies) to keep type safety.
-import tsconfigPaths from 'vite-tsconfig-paths';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import type { PluginOption } from 'vite';
export default defineConfig({
- plugins: [tsconfigPaths() as any],
+ plugins: [tsconfigPaths() as PluginOption],Alternative:
import type { PluginOption } from 'vite';
const paths = tsconfigPaths() satisfies PluginOption;
export default defineConfig({ plugins: [paths] });🤖 Prompt for AI Agents
In packages/next-inspector/vitest.config.ts around line 5, the plugins array
currently casts tsconfigPaths() to any which loses type safety; import the Vite
PluginOption type (or use the TypeScript satisfies operator) and type/cast the
tsconfigPaths value to PluginOption so the plugins array is strongly typed
(e.g., import PluginOption from 'vite' and replace the as any with PluginOption,
or assign tsconfigPaths() to a const typed with satisfies PluginOption and place
that const in the plugins array).
| [](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) | ||
| [](https://www.npmjs.com/package/@hyperse/inspector) | ||
| [](https://github.com/hyperse-io/code-inspector/search?l=typescript) | ||
| [](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) |
There was a problem hiding this comment.
Badges: “flat-quare” typo breaks styling.
Should be “flat-square”.
-[]
+[]
-[]
+[]
-[]
+[]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| [](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) | |
| [](https://www.npmjs.com/package/@hyperse/inspector) | |
| [](https://github.com/hyperse-io/code-inspector/search?l=typescript) | |
| [](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) | |
| [](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) | |
| [](https://www.npmjs.com/package/@hyperse/inspector) | |
| [](https://github.com/hyperse-io/code-inspector/search?l=typescript) | |
| [](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) |
🧰 Tools
🪛 LanguageTool
[grammar] ~8-~8: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
🤖 Prompt for AI Agents
In README.md around lines 7 to 10 the badge URLs use the misspelled style value
"flat-quare" which breaks badge styling; update every occurrence of
"style=flat-quare" to the correct "style=flat-square" so the shields.io badges
render properly (verify each badge line in that block is corrected).
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
examples/example-nextjs/package.json (1)
17-17: Make dev script cross-platform with cross-env.Inline env vars break on Windows shells.
- "dev": "RUST_BACKTRACE=full next dev --turbopack", + "dev": "cross-env RUST_BACKTRACE=full next dev --turbopack",Also add the dependency:
"devDependencies": { + "cross-env": "^7.0.3",
🧹 Nitpick comments (5)
examples/example-nextjs/package.json (3)
50-50: Avoid double-transform for styled-components in Next.js.Prefer Next’s built-in compiler.styledComponents over SWC plugin; using both can cause duplication.
- "@swc/plugin-styled-components": "9.0.3",If needed, enable in next.config:
// next.config.js/ts export default { compiler: { styledComponents: true }, };
46-48: Verify necessity of Rspack deps in Next.js example.If unused, drop to reduce install size; if needed, align with example-rspack versions.
Option A (remove if unused):
- "@rspack/cli": "1.4.11", - "@rspack/core": "1.4.11", - "@rspack/plugin-react-refresh": "1.4.3",Option B (align to ^1.5.x if required):
- "@rspack/cli": "1.4.11", - "@rspack/core": "1.4.11", - "@rspack/plugin-react-refresh": "1.4.3", + "@rspack/cli": "^1.5.1", + "@rspack/core": "^1.5.1", + "@rspack/plugin-react-refresh": "^1.5.1",
5-9: Fix homepage/repository URLs for a subdirectory package.For npm metadata, repository.url should be the repo root, and homepage can point to the tree path.
- "homepage": "https://github.com/hyperse-io/code-inspector/examples/example-nextjs", + "homepage": "https://github.com/hyperse-io/code-inspector/tree/main/examples/example-nextjs", "repository": { "type": "git", - "url": "https://github.com/hyperse-io/code-inspector/examples/example-nextjs", + "url": "https://github.com/hyperse-io/code-inspector", "directory": "examples/example-nextjs" },examples/example-rspack/package.json (2)
38-60: Align Rspack plugin version with core/cli.Use the same minor for @rspack/plugin-react-refresh to avoid subtle mismatch.
- "@rspack/plugin-react-refresh": "^1.5.0", + "@rspack/plugin-react-refresh": "^1.5.1",
5-9: Correct homepage/repository metadata for subfolder.Point homepage to tree URL and keep repository.url at repo root.
- "homepage": "https://github.com/hyperse-io/code-inspector/examples/example-rspack", + "homepage": "https://github.com/hyperse-io/code-inspector/tree/main/examples/example-rspack", "repository": { "type": "git", - "url": "https://github.com/hyperse-io/code-inspector/examples/example-rspack", + "url": "https://github.com/hyperse-io/code-inspector", "directory": "examples/example-rspack" },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (10)
crates/inspector-swc-plugin/package.json(1 hunks)examples/example-nextjs/package.json(2 hunks)examples/example-rspack/package.json(1 hunks)examples/example-webpack/package.json(1 hunks)packages/inspector-babel-plugin/package.json(1 hunks)packages/inspector-common/package.json(1 hunks)packages/inspector-component/package.json(1 hunks)packages/inspector-middleware/package.json(1 hunks)packages/inspector/package.json(1 hunks)packages/next-inspector/package.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
- packages/next-inspector/package.json
- crates/inspector-swc-plugin/package.json
- packages/inspector-middleware/package.json
- packages/inspector-common/package.json
- examples/example-webpack/package.json
- packages/inspector-babel-plugin/package.json
- packages/inspector-component/package.json
- packages/inspector/package.json
🔇 Additional comments (1)
examples/example-rspack/package.json (1)
22-36: Deps bump looks good.React 19.1.1 and tailwind/postcss updates are consistent with workspace.
… workflows; update package dependencies to use caret (^) versioning for better compatibility
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
website/package.json (1)
83-84: Align website packageManager with workspace Yarn (or remove it)This subpackage pins [email protected] while root uses 4.9.4, which can break installs in subdir. Prefer removing this field so the root governs, or match 4.9.4.
- "packageManager": "[email protected]" + "packageManager": "[email protected]"—or—
- "packageManager": "[email protected]" + // Inherit from monorepo rootexamples/example-webpack/package.json (1)
5-9: Fix incorrect repo/homepage paths (point to webpack, not rspack).
Both fields reference example-rspack. Update to example-webpack for accurate links.- "homepage": "https://github.com/hyperse-io/code-inspector/examples/example-rspack", + "homepage": "https://github.com/hyperse-io/code-inspector/examples/example-webpack", "repository": { "type": "git", - "url": "https://github.com/hyperse-io/code-inspector/examples/example-rspack", + "url": "https://github.com/hyperse-io/code-inspector/examples/example-webpack", "directory": "examples/example-webpack" },
♻️ Duplicate comments (2)
packages/inspector-component/package.json (1)
47-47: @flatjs/cli v3 exposesflat, update script usingflatjs-forgeThe major bump to @flatjs/cli@^3 means the bin is flat, not flatjs-forge. Update build:forge or builds will fail.
- "build:forge": "npx flatjs-forge build -d", + "build:forge": "npx flat build -d",examples/example-nextjs/package.json (1)
17-17: Make dev script cross-platform with cross-env.
Inline env vars break on Windows. Use cross-env and add it as a devDependency.- "dev": "RUST_BACKTRACE=full next dev --turbopack", + "dev": "cross-env RUST_BACKTRACE=full next dev --turbopack","devDependencies": { + "cross-env": "^7.0.3",
🧹 Nitpick comments (11)
.github/workflows/ci-inspector-swc-plugin.yml (1)
48-48: Node 20.x upgrade looks good; consider enabling Corepack and adding Rust cache for speed.
- Add a small step after setup-node to ensure Yarn 4 from .yarnrc.yml is used.
- Optional: cache Rust build artifacts to materially cut CI time on rebuilds.
- name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} + - name: Enable Corepack (Yarn 4) + run: corepack enable + - name: 📥 Monorepo install uses: ./.github/actions/yarn-nm-install + + - name: Cache Rust build artifacts + uses: Swatinem/rust-cache@v2 + with: + workspaces: | + crates/inspector-swc-plugin -> target.github/workflows/ci-inspector.yml (1)
44-44: LGTM on Node 20.x; optionally test 22.x and enable Corepack.
- If the packages support current LTS, consider a matrix like [20.x, 22.x] to catch forward-compat.
- Add Corepack enable so Yarn 4 is consistently activated.
matrix: - node-version: [20.x] + node-version: [20.x] + # Optional: + # matrix: + # node-version: [20.x, 22.x] @@ - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} + + - name: Enable Corepack (Yarn 4) + run: corepack enable.github/workflows/ci-integrity.yml (1)
35-35: Upgrade acknowledged; add Corepack enable to align Yarn version with repo pin.This avoids accidental use of the system Yarn.
- name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} + - name: Enable Corepack (Yarn 4) + run: corepack enable.github/workflows/ci-inspector-babel-plugin.yml (1)
44-44: Node 20.x change is fine; mirror the Corepack step used elsewhere for consistency.- name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} + - name: Enable Corepack (Yarn 4) + run: corepack enable.github/workflows/release-or-version-pr.yml (1)
41-44: Release workflow: add registry-url and enable Corepack
In .github/workflows/release-or-version-pr.yml, update the setup-node step and add a Corepack step:- uses: actions/setup-node@v4 with: node-version: 20.x registry-url: 'https://registry.npmjs.org' … - name: Enable Corepack run: corepack enableThis ensures
.npmrcis generated for auth when NODE_AUTH_TOKEN is set (docs.github.com) and activates Yarn 4 via Corepack (yarnpkg.com).package.json (1)
72-76: Align engines.yarn with actual Yarn 4 usage (optional)Consider setting "engines.yarn" to ">=4.0.0" (or drop it) since the repo pins Yarn 4.9.4 via packageManager.
"engines": { "node": ">=18.0.0", "npm": "please-use-yarn", - "yarn": ">=1.22.0" + "yarn": ">=4.0.0" },packages/next-inspector/package.json (2)
8-9: Fix repository.directory to this package’s pathLikely should be packages/next-inspector, not packages/inspector-vite.
- "directory": "packages/inspector-vite" + "directory": "packages/next-inspector"
76-79: Match dev React to peer rangedevDependency react is ^19.1.0 while peer requires >=19.1.1. Bump to avoid drift.
- "react": "^19.1.0", + "react": "^19.1.1", "react-dom": "^19.1.1",examples/example-nextjs/package.json (2)
49-49: Consider dropping @swc/helpers from devDependencies if unused.
Next bundles helpers; keep only if a plugin requires it.- "@swc/helpers": "^0.5.17",
52-54: Node types v24 vs CI/runtime.
If CI runs Node 20/22, consider aligning @types/node to the minimum supported runtime to avoid accidental type usage.examples/example-rspack/package.json (1)
45-45: Align @swc/helpers version specifier across examples.
Pinned here but caret in Next.js example. Use one policy for consistency.- "@swc/helpers": "0.5.17", + "@swc/helpers": "^0.5.17",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (2)
.yarn/releases/yarn-4.9.4.cjsis excluded by!**/.yarn/**yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (18)
.github/workflows/ci-inspector-babel-plugin.yml(1 hunks).github/workflows/ci-inspector-swc-plugin.yml(1 hunks).github/workflows/ci-inspector.yml(1 hunks).github/workflows/ci-integrity.yml(1 hunks).github/workflows/release-or-version-pr.yml(1 hunks).yarnrc.yml(1 hunks)crates/inspector-swc-plugin/package.json(1 hunks)examples/example-nextjs/package.json(2 hunks)examples/example-rspack/package.json(1 hunks)examples/example-webpack/package.json(1 hunks)package.json(1 hunks)packages/inspector-babel-plugin/package.json(1 hunks)packages/inspector-common/package.json(1 hunks)packages/inspector-component/package.json(1 hunks)packages/inspector-middleware/package.json(1 hunks)packages/inspector/package.json(1 hunks)packages/next-inspector/package.json(1 hunks)website/package.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/inspector-babel-plugin/package.json
- crates/inspector-swc-plugin/package.json
- packages/inspector-common/package.json
- packages/inspector/package.json
- packages/inspector-middleware/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test (20.x)
🔇 Additional comments (10)
.yarnrc.yml (1)
3-3: Bump acknowledged; verify binary is committed and CI uses itEnsure .yarn/releases/yarn-4.9.4.cjs is committed and CI runners use Corepack/Node 20 with Yarn 4.9.4 to avoid drift.
package.json (2)
59-71: Tooling bumps LGTMTS/Eslint/Changesets/lint-staged updates align workspace-wide. No concerns.
77-77: Yarn packageManager pin LGTMMatches .yarnrc.yml (4.9.4).
packages/next-inspector/package.json (1)
92-94: Peer ranges LGTMnext/react peers align with workspace targets.
packages/inspector-component/package.json (1)
56-57: React 19 alignment LGTMdevDependencies and peers both target React/DOM 19.1.x.
Also applies to: 72-74
website/package.json (1)
49-61: Docs stack/tooling bumps LGTMDocusaurus/React/Tailwind and lint/type upgrades look consistent.
Also applies to: 64-82
examples/example-webpack/package.json (1)
22-36: Verify peer deps with workspace context
Run dependency resolution from the monorepo root and target the example-webpack workspace:npm install --workspaces --package-lock-only npm ls --workspace=examples/example-webpack react react-dom @heroui/react webpack webpack-cli html-webpack-plugin || trueConfirm there are no peer/version conflicts, then refresh lockfiles.
Applies to lines 22–36 and 38–64.examples/example-nextjs/package.json (2)
50-50: Keep @swc/plugin-styled-components (no double-transform)
examples/example-nextjs/next.config.mjs does not enable compiler.styledComponents, so the SWC plugin is required.Likely an incorrect or invalid review comment.
32-35: Manually verify peer dependency compatibility for Next 15.5.2, React 19.1.1, react-dom 19.1.1, and SWC packages in examples/example-nextjs (lines 32–35, 41–49). Automatic npm peer-check failed due to workspace protocol error—ensure no unmet peers post-upgrade.examples/example-rspack/package.json (1)
22-36: Validate peer compatibility after rspack/Babel/Tailwind bumps for workspace deps. Run install via Yarn (which supportsworkspace:*) in examples/example-rspack and then runnpm ls react react-dom @heroui/react @rspack/core @rspack/cli @rspack/plugin-react-refreshto catch any peer conflicts. Applies to lines 22–36 and 38–60.
…m for inspector pipeline; improve documentation clarity and structure
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
README.md (5)
15-15: TOC anchor mismatch: “Key Features” ➜ “Features”.-- [Key Features](#key-features) +- [Features](#features)
17-17: Remove TOC item without section: “Quick Look”.-- [Quick Look](#quick-look)
36-36: Remove TOC item “Acknowledgements” or add a section.-- [Acknowledgements](#acknowledgements)
195-196: Fix Next.js example import: use @hyperse/next-inspector for createNextConfig.-import { createNextConfig } from '@hyperse/next-config'; +import { createNextConfig } from '@hyperse/next-inspector'; ... -export default createNextConfig(nextConfig, plugins); +export default createNextConfig(nextConfig, plugins);Also applies to: 212-212
288-308: Correct Vite note: SWC is via @vitejs/plugin-react-swc, not default.-import react from '@vitejs/plugin-react'; +// Babel (default): +import react from '@vitejs/plugin-react'; +// Or SWC: +// import react from '@vitejs/plugin-react-swc'; @@ - // If using SWC (default for @vitejs/plugin-react v3+), - // ensure @hyperse/inspector-swc-plugin is in your .swcrc - // or configure it via swc options if available in plugin-react. + // If using SWC (via @vitejs/plugin-react-swc), + // ensure @hyperse/inspector-swc-plugin is in your .swcrc + // or via the SWC plugin options. @@ -_For SWC with Vite: If `@vitejs/plugin-react` uses SWC, ensure `@hyperse/inspector-swc-plugin` is configured in your project's `.swcrc` file. Vite's React plugin will pick it up._ +_For SWC with Vite: when using `@vitejs/plugin-react-swc`, ensure `@hyperse/inspector-swc-plugin` is configured in your `.swcrc`._Also applies to: 322-323
packages/inspector-component/src/components/Panel.styled.tsx (1)
126-141: Use a real button for the item action control (keyboard/a11y)This interactive control is a div styled as a button, which misses semantics, keyboard focus, and default accessibility. Switch to a button and add a visible focus style.
-export const PanelListItemActionButton = styled.div` +export const PanelListItemActionButton = styled.button` display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 12px; background-color: transparent; border: none; + appearance: none; cursor: pointer; color: rgba(255, 255, 255, 0.6); transition: transform 200ms ease-in-out; + &:focus-visible { + outline: 2px solid rgba(255, 255, 255, 0.9); + outline-offset: 2px; + } &:hover { transform: scale(1.2); color: rgba(255, 255, 255, 0.9); } `Note: when used inside forms, set
type="button"at the callsite to avoid unintended form submissions.
♻️ Duplicate comments (6)
packages/inspector/README.md (5)
7-10: Fix shields style typo: flat-quare ➜ flat-square.Badges won’t render with the misspelled style param.
Apply:
-[](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) -[](https://www.npmjs.com/package/@hyperse/inspector) +[](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) +[](https://www.npmjs.com/package/@hyperse/inspector) -[](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) +[](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE)
15-15: TOC anchor mismatch: “Key Features” ➜ “Features”.The section header is “## Features”.
-- [Key Features](#key-features) +- [Features](#features)
17-17: Remove TOC item without section: “Quick Look”.-- [Quick Look](#quick-look)
195-196: Fix Next.js example import: use @hyperse/next-inspector for createNextConfig.-import { createNextConfig } from '@hyperse/next-config'; +import { createNextConfig } from '@hyperse/next-inspector'; ... -export default createNextConfig(nextConfig, plugins); +export default createNextConfig(nextConfig, plugins);Also applies to: 212-212
288-308: Correct Vite note: SWC is via @vitejs/plugin-react-swc, not default in @vitejs/plugin-react.-import react from '@vitejs/plugin-react'; +// Babel (default): +import react from '@vitejs/plugin-react'; +// Or SWC: +// import react from '@vitejs/plugin-react-swc'; @@ - // If using SWC (default for @vitejs/plugin-react v3+), - // ensure @hyperse/inspector-swc-plugin is in your .swcrc - // or configure it via swc options if available in plugin-react. + // If using SWC (via @vitejs/plugin-react-swc), + // ensure @hyperse/inspector-swc-plugin is in your .swcrc + // or configure it via the SWC plugin options. @@ -_For SWC with Vite: If `@vitejs/plugin-react` uses SWC, ensure `@hyperse/inspector-swc-plugin` is configured in your project's `.swcrc` file. Vite's React plugin will pick it up._ +_For SWC with Vite: when using `@vitejs/plugin-react-swc`, ensure `@hyperse/inspector-swc-plugin` is configured in your `.swcrc`._Also applies to: 322-323
README.md (1)
7-10: Fix shields style typo: flat-quare ➜ flat-square.Same badge issue as package README.
-[](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) -[](https://www.npmjs.com/package/@hyperse/inspector) +[](https://github.com/hyperse-io/code-inspector/actions?query=workflow%3ACI) +[](https://www.npmjs.com/package/@hyperse/inspector) -[](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE) +[](https://github.com/hyperse-io/code-inspector/blob/main/LICENSE)
🧹 Nitpick comments (8)
packages/inspector/README.md (2)
9-9: Nit: normalize labelColor to 6-hex.Keep badge params consistent.
-[](https://github.com/hyperse-io/code-inspector/search?l=typescript) +[](https://github.com/hyperse-io/code-inspector/search?l=typescript)
464-471: Optional: remove “Atom” from supported editors (deprecated) or note deprecation.README.md (2)
9-9: Nit: normalize labelColor to 6-hex.-[](https://github.com/hyperse-io/code-inspector/search?l=typescript) +[](https://github.com/hyperse-io/code-inspector/search?l=typescript)
464-471: Optional: drop “Atom” (deprecated) or mark as archived.packages/inspector-component/src/components/Panel.styled.tsx (4)
94-100: Reveal actions on keyboard focus too, not just hoverAdd a
:focus-withinstate and move the opacity transition to the base layout to improve keyboard navigation.export const PanelListItemActionLayout = styled.div` display: flex; align-items: center; flex-direction: row; gap: 2px; opacity: 0; + transition: opacity 0.2s ease-in-out; `; export const PanelListItem = styled.div` @@ &:hover { background-color: rgba(255, 255, 255, 0.2); ${PanelListItemActionLayout} { opacity: 1; - transition: opacity 0.2s ease-in-out; } } + &:focus-within { + background-color: rgba(255, 255, 255, 0.2); + ${PanelListItemActionLayout} { + opacity: 1; + } + } `;Also applies to: 76-82
43-55: Persist transition and add a visible focus style for buttonsMove the transition to the base rule (avoid redefining it on hover) and add
:focus-visiblefor accessibility.export const PanelActionButton = styled.button` cursor: pointer; padding: 6px 8px; font-size: 14px; border-radius: 4px; font-weight: 600; background-color: transparent; border: none; + transition: background-color 0.2s ease-in-out; + &:focus-visible { + outline: 2px solid rgba(255, 255, 255, 0.9); + outline-offset: 2px; + } &:hover { background-color: rgba(255, 255, 255, 0.1); - transition: background-color 0.2s ease-in-out; } `;
20-31: Make the drag handle keyboard-discernibleConsider adding a visible focus style here; ensure the consuming component sets
tabIndex={0}and appropriate ARIA (e.g., role and aria-label) so the handle is focusable and announced.export const PanelDragHandle = styled.div` position: absolute; top: 0; right: -20px; z-index: 10001001; border-radius: 4px; background-color: #333740; cursor: grab; + &:focus-visible { + outline: 2px solid rgba(255, 255, 255, 0.9); + outline-offset: 2px; + } &:active { cursor: grabbing; } `;
5-6: Consider z-index tokens/layering schemeHard-coded very large z-index values can cause stacking wars across packages. Consider centralizing via a design token (e.g., theme.zIndices.inspectorPanel, inspectorHandle).
Also applies to: 24-24
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (9)
README.md(4 hunks)packages/inspector-babel-plugin/CHANGELOG.md(0 hunks)packages/inspector-component/CHANGELOG.md(0 hunks)packages/inspector-component/src/components/Panel.styled.tsx(1 hunks)packages/inspector-component/src/components/index.ts(1 hunks)packages/inspector-middleware/CHANGELOG.md(0 hunks)packages/inspector/CHANGELOG.md(0 hunks)packages/inspector/README.md(1 hunks)packages/next-inspector/CHANGELOG.md(0 hunks)
💤 Files with no reviewable changes (5)
- packages/inspector-babel-plugin/CHANGELOG.md
- packages/inspector-component/CHANGELOG.md
- packages/inspector-middleware/CHANGELOG.md
- packages/next-inspector/CHANGELOG.md
- packages/inspector/CHANGELOG.md
✅ Files skipped from review due to trivial changes (1)
- packages/inspector-component/src/components/index.ts
🧰 Additional context used
🪛 LanguageTool
README.md
[grammar] ~8-~8: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
packages/inspector/README.md
[grammar] ~8-~8: There might be a mistake here.
Context: ...ww.npmjs.com/package/@hyperse/inspector) [
[grammar] ~15-~15: There might be a mistake here.
Context: ...](#why-hyperseinspector) - Key Features - Default Hotkeys - [Qu...
(QB_NEW_EN)
[grammar] ~16-~16: There might be a mistake here.
Context: ...tures](#key-features) - Default Hotkeys - Quick Look - [Installation...
(QB_NEW_EN)
[grammar] ~17-~17: There might be a mistake here.
Context: ...Hotkeys](#default-hotkeys) - Quick Look - Installation - [How to U...
(QB_NEW_EN)
[grammar] ~18-~18: There might be a mistake here.
Context: ...Quick Look](#quick-look) - Installation - [How to Use and Configure](#how-to-use-an...
(QB_NEW_EN)
[grammar] ~19-~19: There might be a mistake here.
Context: ...nstallation) - How to Use and Configure - [Step 1: Install Packages](#step-1-instal...
(QB_NEW_EN)
[grammar] ~20-~20: There might be a mistake here.
Context: ...configure) - Step 1: Install Packages - [Step 2: Add the Inspector Component to Y...
(QB_NEW_EN)
[grammar] ~21-~21: There might be a mistake here.
Context: ... Add the Inspector Component to Your App](#step-2-add-the-inspector-component-to-your-app) - [Step 3: Configure the Build Tool Plugin ...
(QB_NEW_EN)
[grammar] ~22-~22: There might be a mistake here.
Context: ...ure the Build Tool Plugin (Babel or SWC)](#step-3-configure-the-build-tool-plugin-babel-or-swc) - [Step 4: Configure the Dev Server Middlew...
(QB_NEW_EN)
[grammar] ~23-~23: There might be a mistake here.
Context: ...p 4: Configure the Dev Server Middleware](#step-4-configure-the-dev-server-middleware) - Webpack - Vite ...
(QB_NEW_EN)
[grammar] ~24-~24: There might be a mistake here.
Context: ...he-dev-server-middleware) - Webpack - Vite - Rspack ...
(QB_NEW_EN)
[grammar] ~25-~25: There might be a mistake here.
Context: ...e) - Webpack - Vite - Rspack - [Next.js](#nextjs...
(QB_NEW_EN)
[grammar] ~26-~26: There might be a mistake here.
Context: ...bpack) - Vite - Rspack - Next.js - [Customization](#cus...
(QB_NEW_EN)
[grammar] ~27-~27: There might be a mistake here.
Context: ...) - Rspack - Next.js - Customization - [Cust...
(QB_NEW_EN)
[grammar] ~28-~28: There might be a mistake here.
Context: ... - Next.js - Customization - Custom Hotkeys - [Co...
(QB_NEW_EN)
[grammar] ~29-~29: There might be a mistake here.
Context: ...ion](#customization) - Custom Hotkeys - Controlled Mode - [Ho...
(QB_NEW_EN)
[grammar] ~30-~30: There might be a mistake here.
Context: ...s](#custom-hotkeys) - Controlled Mode - How It Works - [Supporte...
(QB_NEW_EN)
[grammar] ~31-~31: There might be a mistake here.
Context: ... Mode](#controlled-mode) - How It Works - [Supported IDEs/Editors](#supported-idese...
(QB_NEW_EN)
[grammar] ~32-~32: There might be a mistake here.
Context: ...#how-it-works) - Supported IDEs/Editors - Troubleshooting - [Co...
(QB_NEW_EN)
[grammar] ~33-~33: There might be a mistake here.
Context: ...upported-ideseditors) - Troubleshooting - Contributing - [License]...
(QB_NEW_EN)
[grammar] ~34-~34: There might be a mistake here.
Context: ...oting](#troubleshooting) - Contributing - License - [Acknowledgements](...
(QB_NEW_EN)
[grammar] ~35-~35: There might be a mistake here.
Context: ...Contributing - License - Acknowledgements ##...
(QB_NEW_EN)
[grammar] ~40-~40: There might be a mistake here.
Context: ...ou ever run into any of these issues 🤔: - You need to fix bugs in a team project, ...
(QB_NEW_EN)
[grammar] ~43-~43: There might be a mistake here.
Context: ...ntation of a specific page or component. - You're thinking about a component and wa...
(QB_NEW_EN)
[style] ~44-~44: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...tion of a specific page or component. - You're thinking about a component and want ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~46-~46: Consider an alternative for the overused word “exactly”.
Context: ...rough deeply nested file paths. That's exactly why @hyperse/inspector was created ...
(EXACTLY_PRECISELY)
[grammar] ~51-~51: There might be a mistake here.
Context: ...gration:** Launches your configured IDE/Editor pointing to the exact file and line num...
(QB_NEW_EN)
[grammar] ~51-~51: There might be a mistake here.
Context: ...nting to the exact file and line number. - 🛠️ Multi-framework Support: Works w...
(QB_NEW_EN)
[grammar] ~56-~56: There might be a mistake here.
Context: ...ned to work with various project setups. ### Default Hotkeys - macOS: ⌘ + i - Wind...
(QB_NEW_EN)
[grammar] ~60-~60: There might be a mistake here.
Context: ... setups. ### Default Hotkeys - macOS: ⌘ + i - Windows/Linux: Ctrl + i You can custo...
(QB_NEW_EN)
[grammar] ~97-~97: There might be a mistake here.
Context: ... 4. For Next.js projects, also install: - @hyperse/next-inspector: The Next.js plugin ### Step 2: Add th...
(QB_NEW_EN)
[grammar] ~217-~217: There might be a mistake here.
Context: ...ojectCwd: Your project's root directory - trustedEditor`: Your preferred IDE (e.g., 'cursor', 'v...
(QB_NEW_EN)
[grammar] ~218-~218: There might be a mistake here.
Context: ...E (e.g., 'cursor', 'vscode', 'webstorm') - customLaunchEditorEndpoint: Custom endpoint for launching the edit...
(QB_NEW_EN)
[grammar] ~219-~219: There might be a mistake here.
Context: ...Custom endpoint for launching the editor - keys: Custom hotkey configuration - `hideDom...
(QB_NEW_EN)
[grammar] ~220-~220: There might be a mistake here.
Context: ...or - keys: Custom hotkey configuration - hideDomPathAttr: Whether to hide DOM path attributes in...
(QB_NEW_EN)
[grammar] ~464-~464: There might be a mistake here.
Context: ...include: - Visual Studio Code (VS Code) - WebStorm / IntelliJ IDEA / PhpStorm / Py...
(QB_NEW_EN)
[grammar] ~465-~465: There might be a mistake here.
Context: ...orm / PyCharm (and other JetBrains IDEs) - Sublime Text - Atom - Vim / Neovim - Ema...
(QB_NEW_EN)
[grammar] ~466-~466: There might be a mistake here.
Context: ...and other JetBrains IDEs) - Sublime Text - Atom - Vim / Neovim - Emacs - And more.....
(QB_NEW_EN)
[grammar] ~467-~467: There might be a mistake here.
Context: ...er JetBrains IDEs) - Sublime Text - Atom - Vim / Neovim - Emacs - And more... Ensu...
(QB_NEW_EN)
[grammar] ~468-~468: There might be a mistake here.
Context: ...Es) - Sublime Text - Atom - Vim / Neovim - Emacs - And more... Ensure your chosen ...
(QB_NEW_EN)
[grammar] ~469-~469: There might be a mistake here.
Context: ...blime Text - Atom - Vim / Neovim - Emacs - And more... Ensure your chosen IDE is c...
(QB_NEW_EN)
[style] ~483-~483: Consider shortening or rephrasing this to strengthen your wording.
Context: ...r development server and terminal after making changes to environment variables. - **Component so...
(MAKE_CHANGES)
[grammar] ~484-~484: There might be a mistake here.
Context: ...t source not found / incorrect location:** - Verify that the Babel or SWC plugin is c...
(QB_NEW_EN)
[grammar] ~485-~485: There might be a mistake here.
Context: ...ed and running only in development mode. - Ensure source maps are being generated c...
(QB_NEW_EN)
🪛 markdownlint-cli2 (0.17.2)
packages/inspector/README.md
15-15: Link fragments should be valid
(MD051, link-fragments)
17-17: Link fragments should be valid
(MD051, link-fragments)
34-34: Link fragments should be valid
(MD051, link-fragments)
36-36: Link fragments should be valid
(MD051, link-fragments)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test (20.x)
🔇 Additional comments (1)
packages/inspector-component/src/components/Panel.styled.tsx (1)
1-1: styled-components v6+ confirmed—no changes neededpackages/inspector-component/package.json specifies styled-components ^6.1.19, which exposes the named styled export. examples/example-nextjs/package.json includes @swc/plugin-styled-components ^9.0.3 for transform support. Consumers using Babel/SWC should still install a styled-components plugin (e.g. @swc/plugin-styled-components v9+ or babel-plugin-styled-components v2+) to enable SSR/displayName but no modifications are required here.
| - [Troubleshooting](#troubleshooting) | ||
| - [Contributing](#contributing) | ||
| - [License](#license) | ||
| - [Acknowledgements](#acknowledgements) |
There was a problem hiding this comment.
Remove TOC item “Acknowledgements” or add a section.
No matching heading exists.
-- [Acknowledgements](#acknowledgements)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - [Acknowledgements](#acknowledgements) | |
| * Contributing | |
| * License |
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
36-36: Link fragments should be valid
(MD051, link-fragments)
🤖 Prompt for AI Agents
In packages/inspector/README.md around line 36 the table-of-contents references
an "Acknowledgements" entry that has no corresponding heading; either remove the
"[Acknowledgements](#acknowledgements)" TOC line or add an actual
"Acknowledgements" section heading and content below the TOC; if adding the
section ensure the heading text matches the anchor (e.g., "## Acknowledgements")
so the link resolves correctly.
2 participants
Summary by CodeRabbit