feat(client): allow to open potential lazy load components in editor

[huang-julien]

🔗 Linked issue

📚 Description

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/hints@270

commit: 2ae01f0

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e7ef4783-7c2e-4c1e-8404-ff6da913650f

📥 Commits

Reviewing files that changed from the base of the PR and between 38a0851 and 6cc44f6.

📒 Files selected for processing (1)

• client/app/pages/component-lazy-load.vue

---

📝 Walkthrough

Walkthrough

This change updates client/app/pages/component-lazy-load.vue: it imports useDevtoolsClient from @nuxt/devtools-kit/iframe-client, instantiates a devtoolsClient, and replaces plain-text displays of imp.importSource and imp.importedBy with buttons that call devtoolsClient?.devtools.rpc.openInEditor(...) when clicked.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description is vague and generic, containing only boilerplate contributor guidelines and template placeholders with no actual details about the changes or their purpose.	Add a meaningful description explaining what problem this change solves, why it's needed, and how it improves the developer experience with lazy-load components.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main feature added: allowing users to open potential lazy-load components in an editor from the component-lazy-load.vue page.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/client_lazyload_openeditor

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@client/app/pages/component-lazy-load.vue`:
- Around line 85-92: The anchors used solely as click handlers (calling
devtoolsClient?.devtools.rpc.openInEditor with imp.importSource and
imp.importedBy) are semantic/accessibility issues; replace the <a href="">
elements with <button type="button"> elements (preserving the displayed text {{
imp.importSource }} and {{ imp.importedBy }}) and keep the `@click` handlers on
those buttons, or alternatively add `@click.prevent` to the existing anchors to
stop navigation—change the elements around the calls to
devtoolsClient?.devtools.rpc.openInEditor(imp.importSource) and
devtoolsClient?.devtools.rpc.openInEditor(imp.importedBy).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: aae2e72b-f92d-49a6-a94e-4e64c02e7d06

📥 Commits

Reviewing files that changed from the base of the PR and between 05c0148 and df534e4.

📒 Files selected for processing (1)

• client/app/pages/component-lazy-load.vue