Clean up extension system and improve documentation#1965
Conversation
- Consolidate ExtensionViewProps to re-export from @hypr/plugin-extensions - Remove unused registry functions (loadExtensionUI, registerExtensionComponent, etc.) - Create shared isExtHostPath utility for consistent ext-host path checking - Simplify index.html Tauri polyfill comments - Update extensions.mdx with comprehensive documentation: - Document @hypr/store, @hypr/tabs, and tinybase/ui-react globals - Add State Synchronization section with TinyBase examples - Add Opening Tabs section with useTabs examples - Expand Security Model with Tauri API isolation and state sync security - Add Calendar extension example Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughRemoves dynamic/bundled extension component registries and UI-loading APIs, adds an isExtHostPath helper used by routes, re-exports ExtensionViewProps from Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
⏰ 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). (8)
🔇 Additional comments (6)
Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/desktop/index.html(1 hunks)apps/desktop/src/components/main/body/extensions/registry.ts(0 hunks)apps/desktop/src/routes/__root.tsx(2 hunks)apps/desktop/src/routes/app/route.tsx(2 hunks)apps/desktop/src/types/extensions.ts(1 hunks)apps/desktop/src/utils/ext-host.ts(1 hunks)apps/web/content/docs/developers/8.extensions.mdx(3 hunks)
💤 Files with no reviewable changes (1)
- apps/desktop/src/components/main/body/extensions/registry.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Agent implementations should use TypeScript and follow the established architectural patterns defined in the agent framework
Agent communication should use defined message protocols and interfaces
Files:
apps/desktop/src/types/extensions.tsapps/desktop/src/utils/ext-host.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/desktop/src/types/extensions.tsapps/desktop/src/utils/ext-host.tsapps/desktop/src/routes/app/route.tsxapps/desktop/src/routes/__root.tsx
🧬 Code graph analysis (2)
apps/desktop/src/routes/app/route.tsx (1)
apps/desktop/src/utils/ext-host.ts (1)
isExtHostPath(1-3)
apps/desktop/src/routes/__root.tsx (1)
apps/desktop/src/utils/ext-host.ts (1)
isExtHostPath(1-3)
⏰ 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). (5)
- GitHub Check: ci (macos, macos-14)
- GitHub Check: ci (linux, depot-ubuntu-22.04-8)
- GitHub Check: ci (linux, depot-ubuntu-24.04-8)
- GitHub Check: ci (macos, depot-macos-14)
- GitHub Check: fmt
🔇 Additional comments (6)
apps/desktop/index.html (1)
17-17: Comment update correctly reflects the iframe TAURI polyfillThe shorter comment is accurate and helpfully points to the new extensions docs; behavior of the polyfill remains unchanged.
apps/desktop/src/types/extensions.ts (1)
1-1: CentralizingExtensionViewPropsvia re-export is a good simplificationRe-exporting the type from
@hypr/plugin-extensionsremoves duplication and keeps UI code aligned with the core extension API. Please just confirm the exported shape (e.g.extensionId,state) still matches consumer expectations and the documentation examples.apps/web/content/docs/developers/8.extensions.mdx (1)
128-143: Extension docs significantly improve clarity and security guidanceThe expanded sections on available globals, TinyBase-based state sync, tab navigation, and the iframe/Tauri security model make the extension story much clearer and align well with the new ext-host routing and polyfill behavior. The “Hello World” and “Calendar” walkthroughs are particularly helpful for onboarding.
Also applies to: 150-153, 209-235, 320-327, 331-333, 334-341, 348-349, 360-360, 362-369, 370-377
apps/desktop/src/routes/app/route.tsx (1)
7-7: UsingisExtHostPathhere keeps ext-host handling consistentSwitching to
isExtHostPath(location.pathname)nicely centralizes the ext-host detection logic with the root route, ensuring extension-host requests bypassListenerProviderand side effects in a consistent way.Also applies to: 19-21
apps/desktop/src/utils/ext-host.ts (1)
1-3: Helper cleanly defines the ext-host path contract
isExtHostPathcorrectly treats/app/ext-hostand/app/ext-host/...as ext-host routes while avoiding accidental matches like/app/ext-hosting, and centralizes this logic for reuse in routing.apps/desktop/src/routes/__root.tsx (1)
12-12: SharedisExtHostPathusage keeps root routing aligned with ext-host behaviorUsing
isExtHostPath(window.location.pathname)behind atypeof window !== "undefined"guard is a clean way to avoid SSR pitfalls while ensuring the root route consistently short‑circuits to<Outlet />for ext-host paths.Also applies to: 28-33
Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/content/docs/developers/8.extensions.mdx (1)
367-382: Consider adding code examples to the Calendar extension section for consistency.The Hello World section includes a full code walkthrough, but the Calendar section only describes features and shows build commands without code. Adding key code snippets (e.g., reading calendar data from store, opening tabs, calendar UI structure) would maintain documentation consistency and help readers understand the implementation.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/content/docs/developers/8.extensions.mdx(5 hunks)
⏰ 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). (7)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: ci (macos, macos-14)
- GitHub Check: fmt
- GitHub Check: ci (linux, depot-ubuntu-24.04-8)
- GitHub Check: ci (macos, depot-macos-14)
- GitHub Check: ci (linux, depot-ubuntu-22.04-8)
🔇 Additional comments (2)
apps/web/content/docs/developers/8.extensions.mdx (2)
68-91: Well-clarified runtime script purpose and logging API.The updated section now clearly explains that the runtime script primarily serves for logging and future extensibility, with the main functionality coming from UI panels. The
hypr.logAPI examples are helpful.
165-181: I'll verify the review comment by examining the documentation file and checking whetherExtensionViewPropsis properly imported and exported. Let me start by exploring the file.
<function_calls>
#!/bin/bashFirst, find and read the file to understand its structure and content
wc -l apps/web/content/docs/developers/8.extensions.mdx
</function_calls>
<function_calls>
#!/bin/bashRead the relevant sections of the file
First check lines around 152 (Available Globals), then 165-181, 188-212, 214-241
echo "=== Lines 145-160 (Available Globals area) ==="
sed -n '145,160p' apps/web/content/docs/developers/8.extensions.mdxecho -e "\n=== Lines 165-185 (First code example) ==="
sed -n '165,185p' apps/web/content/docs/developers/8.extensions.mdxecho -e "\n=== Lines 188-215 (Second code example) ==="
sed -n '188,215p' apps/web/content/docs/developers/8.extensions.mdxecho -e "\n=== Lines 214-245 (Third code example) ==="
sed -n '214,245p' apps/web/content/docs/developers/8.extensions.mdx
</function_calls>Let me get the actual file to examine the code examples:
<function_calls>
#!/bin/bashDisplay the file to see all relevant sections
cat -n apps/web/content/docs/developers/8.extensions.mdx | head -250
</function_calls>Now let me check if
ExtensionViewPropsis actually exported from the@hypr/plugin-extensionspackage:
<function_calls>
#!/bin/bashSearch for ExtensionViewProps in the codebase to see where it's defined/exported
echo "=== Searching for ExtensionViewProps exports ==="
rg "export.*ExtensionViewProps" --type ts --type tsx -A 2echo -e "\n=== Searching for ExtensionViewProps in plugin-extensions ==="
find . -path "/plugin-extensions" -type f ( -name ".ts" -o -name ".tsx" -o -name "*.d.ts" ) 2>/dev/null | head -20
</function_calls>
|
Devin is archived and cannot be woken up. Please unarchive Devin if you want to continue using it. |
Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
1 participant
Clean up extension system and improve documentation
Summary
This PR cleans up rough patches in the extension system code and significantly expands the developer documentation. The main changes are:
Code cleanup:
ExtensionViewPropsto re-export from@hypr/plugin-extensionsinstead of defining locally inapps/desktop/src/types/extensions.tsloadExtensionUI,registerExtensionComponent,getExtensionComponent,getBundledExtensions) that were part of an old registry-based UI loading pattern no longer used since extensions now load via iframeisExtHostPathutility for consistent ext-host path checking across__root.tsxandroute.tsxindex.htmlTauri polyfill sectionDocumentation improvements in
8.extensions.mdx:@hypr/tabs,tinybase/ui-reactuseTabsexamplesONBOARDING=0 pnpm -F desktop tauri devcommandUpdates since last revision
extensionStatedefinition (was using it without defining)storeInstancevariable and usetinybase/ui-reactdirectly@hypr/storereferences - Removed references to@hypr/storefrom docs since it's an internal esbuild alias, not a real npm package. Documentation now usestinybase/ui-reacthooks directly (matching the hello-world extension pattern)extension-globals.ts(Button, ButtonGroup, Card, Checkbox, Popover)Review & Testing Checklist for Human
loadExtensionUI,registerExtensionComponent,getExtensionComponent,getBundledExtensionsaren't called anywhereONBOARDING=0 pnpm -F desktop tauri dev, click profile area ("Unknown"), click "Hello World" extensiontinybase/ui-reactdirectly; verify they match actual API usage patterns in hello-world extensionRecommended test plan:
cd extensions && pnpm install && pnpm build && pnpm install:devONBOARDING=0 pnpm -F desktop tauri devNotes