feat(vue): comprehensive Vue package improvements with devtools, Portal, and tests #485
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull request overview
This is a comprehensive update to the Vue package bringing it to feature parity with React/Solid implementations. The PR adds Vue Devtools integration, Portal component, new composables, extensive test coverage (96 test cases), and multiple example demos. Key improvements include support for TextareaRenderable, CodeRenderable, DiffRenderable, LineNumberRenderable, and text node rendering.
Key Changes
- Added Vue Devtools integration with inspector, timeline, and element highlighting
- Introduced Portal component for rendering children outside component hierarchy
- Added new composables:
useTimeline,usePaste,useSelectionHandler - Extended test coverage from ~0 to 96 test cases
- Added support for new renderables and text modifier components
Reviewed changes
Copilot reviewed 43 out of 44 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/vue/types/opentui.d.ts | Added type definitions for new components and improved type system |
| packages/vue/tsconfig.*.json | Added bun-types support and typecheck configuration |
| packages/vue/tests/*.test.ts | Added comprehensive test suite covering layout, events, control-flow, portal, devtools, text-nodes, diff, textarea, line-number, and link |
| packages/vue/src/test-utils.ts | New test utilities for rendering components in tests |
| packages/vue/src/renderer.ts | Enhanced renderer with support for new components and text nodes |
| packages/vue/src/nodes.ts | Added TextNodeRenderable support and CommentNode |
| packages/vue/src/noOps.ts | Improved text node handling with ghost nodes and cleanup |
| packages/vue/src/elements.ts | Added new renderable components (Code, Diff, LineNumber, Textarea, text modifiers) |
| packages/vue/src/devtools/*.ts | New devtools integration files |
| packages/vue/src/composables/*.ts | Enhanced and new composables |
| packages/vue/src/components/Portal.ts | New Portal component implementation |
| packages/vue/index.ts | Major refactor with devtools setup and component installation |
| packages/vue/example/*.vue | New and updated example components |
| packages/vue/package.json | Updated dependencies and added test/typecheck scripts |
| packages/vue/README.md | Fixed render API usage |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/vue/src/devtools/index.ts
Outdated
| if (value === null || value === undefined) return value | ||
| if (typeof value === "function") return "(function)" | ||
| if (typeof value === "symbol") return value.toString() | ||
| if (typeof value === "object" && value !== null) { |
There was a problem hiding this comment.
Variable 'value' is of type date, object or regular expression, but it is compared to an expression of type null.
…mples Devtools: - Add Vue DevTools integration with custom inspector for renderables - Add highlight overlay, timeline tracking, and element picker - Support auto-refresh, visibility toggle, and element focusing Components & Composables: - Add Portal component for rendering outside parent hierarchy - Add usePaste, useSelectionHandler, useTimeline composables - Update useCliRenderer and useKeyboard Renderer: - Improve createElement, patchProp for better Vue 3 compatibility - Add support for onKeyDown, onContentChange, onCursorChange events - Handle TextNode rendering with nodeRenderable Tests: - Add comprehensive test suite (control-flow, events, layout, portal, text-nodes) - Add test-utils.ts for testing infrastructure Examples: - Add Animation, Code, Diff, LineNumber, Textarea examples - Update existing examples for new patterns
…ayouts in Vue - Implement tests for unified and split diff rendering in `diff.test.ts` - Add tests for line number rendering and conditional removal in `line-number.test.ts` - Create comprehensive tests for textarea rendering, including basic, prompt-like, and complex layouts in `textarea.test.ts`
GreyElaina
force-pushed
the
vue-improvements
branch
from
d54207e to
bf3c557
Compare
Collaborator
|
Appreciate the effort, but moving forward the opentui repo will only support react/solid as official packages, Go and Vue were removed. I'll happily support external language/framework bindings though with whatever the core needs to do to support these properly (within means of possibility). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Major update to the Vue package bringing it to feature parity with React/Solid.
Highlights
New Features
render()now accepts existing CliRenderer - Aligns with Solid's API patternuseTimeline,usePaste,useSelectionHandlerTesting
Examples
Fixes
onKeyPressprop from TextareaProps (no implementation existed)testscript to package.jsonrender(App)notrender(createApp(App))Stats