[PR #485] [CLOSED] feat(vue): comprehensive Vue package improvements with devtools, Portal, and tests #1354

New issue

Closed

opened 2026-03-14 09:32:15 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:32:15 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/485
Author: @GreyElaina
Created: 1/7/2026
Status: ❌ Closed

Base: main ← Head: vue-improvements

📝 Commits (7)

1f848dd feat(vue): comprehensive update with devtools, tests, Portal, and examples
e3dfa5b feat(vue): refactor render function to accept CliRenderer or config
c562f52 test(vue): add tests for diff rendering, line numbers, and textarea layouts in Vue
f9761a2 chore(vue): remove unused onKeyPress prop from TextareaProps
bf3c557 chore(vue): add test script to package.json
762c52e feat(vue): add clear highlight action to devtools
1555134 refactor(vue): use kebab-case for multi-word component names

📊 Changes

52 files changed (+6503 additions, -195 deletions)

View changed files

📝 packages/vue/README.md (+20 -21)
📝 packages/vue/example/ASCII.vue (+11 -9)
➕ packages/vue/example/Animation.vue (+182 -0)
📝 packages/vue/example/App.vue (+22 -8)
➕ packages/vue/example/Code.vue (+74 -0)
📝 packages/vue/example/Counter.vue (+9 -16)
➕ packages/vue/example/Diff.vue (+105 -0)
📝 packages/vue/example/ExtendExample.vue (+4 -4)
➕ packages/vue/example/LineNumber.vue (+142 -0)
📝 packages/vue/example/LoginForm.vue (+13 -22)
📝 packages/vue/example/ScrollBox.vue (+5 -5)
📝 packages/vue/example/Styled-Text.vue (+3 -3)
📝 packages/vue/example/TabSelect.vue (+6 -6)
➕ packages/vue/example/Textarea.vue (+124 -0)
📝 packages/vue/example/main.ts (+1 -1)
📝 packages/vue/index.ts (+122 -4)
📝 packages/vue/package.json (+31 -4)
➖ packages/vue/src/cli-renderer-ref.ts (+0 -14)
➕ packages/vue/src/components/Portal.ts (+121 -0)
📝 packages/vue/src/composables/index.ts (+4 -1)

...and 32 more files

📄 Description

Major update to the Vue package bringing it to feature parity with React/Solid.

Highlights

New Features

Vue Devtools integration - Full inspector, timeline, and element highlighting
Portal component - Render children outside the component hierarchy
render() now accepts existing CliRenderer - Aligns with Solid's API pattern
New composables - useTimeline, usePaste, useSelectionHandler

Testing

96 test cases (up from ~0)
Coverage for: layout, events, control-flow, portal, devtools, text-nodes, diff, textarea, line-number, link

Examples

Added: Animation, Code, Diff, LineNumber, Textarea demos

Fixes

Remove unused onKeyPress prop from TextareaProps (no implementation existed)
Add test script to package.json
Fix README: render(App) not render(createApp(App))

Stats

+6,286 lines across 47 files
5 commits

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/485 **Author:** [@GreyElaina](https://github.com/GreyElaina) **Created:** 1/7/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `vue-improvements` --- ### 📝 Commits (7) - [`1f848dd`](https://github.com/anomalyco/opentui/commit/1f848dda647fc968a6a64094c6f21f029f88e2ee) feat(vue): comprehensive update with devtools, tests, Portal, and examples - [`e3dfa5b`](https://github.com/anomalyco/opentui/commit/e3dfa5b4e2e08e718e97214a4008be3d57514c0a) feat(vue): refactor render function to accept CliRenderer or config - [`c562f52`](https://github.com/anomalyco/opentui/commit/c562f52c0346e9eb2d807e8824b509e4c9f9b973) test(vue): add tests for diff rendering, line numbers, and textarea layouts in Vue - [`f9761a2`](https://github.com/anomalyco/opentui/commit/f9761a21f367a3f2a13d78873c38997bc1b19742) chore(vue): remove unused onKeyPress prop from TextareaProps - [`bf3c557`](https://github.com/anomalyco/opentui/commit/bf3c55714b1c4a0b0bcd14002bc354cbd20bc0b4) chore(vue): add test script to package.json - [`762c52e`](https://github.com/anomalyco/opentui/commit/762c52ec59872141f9b9b6955e3b847e92e526a0) feat(vue): add clear highlight action to devtools - [`1555134`](https://github.com/anomalyco/opentui/commit/155513485af590684ae6661613d5c18865dcaf5a) refactor(vue): use kebab-case for multi-word component names ### 📊 Changes **52 files changed** (+6503 additions, -195 deletions) <details> <summary>View changed files</summary> 📝 `packages/vue/README.md` (+20 -21) 📝 `packages/vue/example/ASCII.vue` (+11 -9) ➕ `packages/vue/example/Animation.vue` (+182 -0) 📝 `packages/vue/example/App.vue` (+22 -8) ➕ `packages/vue/example/Code.vue` (+74 -0) 📝 `packages/vue/example/Counter.vue` (+9 -16) ➕ `packages/vue/example/Diff.vue` (+105 -0) 📝 `packages/vue/example/ExtendExample.vue` (+4 -4) ➕ `packages/vue/example/LineNumber.vue` (+142 -0) 📝 `packages/vue/example/LoginForm.vue` (+13 -22) 📝 `packages/vue/example/ScrollBox.vue` (+5 -5) 📝 `packages/vue/example/Styled-Text.vue` (+3 -3) 📝 `packages/vue/example/TabSelect.vue` (+6 -6) ➕ `packages/vue/example/Textarea.vue` (+124 -0) 📝 `packages/vue/example/main.ts` (+1 -1) 📝 `packages/vue/index.ts` (+122 -4) 📝 `packages/vue/package.json` (+31 -4) ➖ `packages/vue/src/cli-renderer-ref.ts` (+0 -14) ➕ `packages/vue/src/components/Portal.ts` (+121 -0) 📝 `packages/vue/src/composables/index.ts` (+4 -1) _...and 32 more files_ </details> ### 📄 Description Major update to the Vue package bringing it to feature parity with React/Solid. ## Highlights ### New Features - **Vue Devtools integration** - Full inspector, timeline, and element highlighting - **Portal component** - Render children outside the component hierarchy - **`render()` now accepts existing CliRenderer** - Aligns with Solid's API pattern - **New composables** - `useTimeline`, `usePaste`, `useSelectionHandler` ### Testing - 96 test cases (up from ~0) - Coverage for: layout, events, control-flow, portal, devtools, text-nodes, diff, textarea, line-number, link ### Examples - Added: Animation, Code, Diff, LineNumber, Textarea demos ### Fixes - Remove unused `onKeyPress` prop from TextareaProps (no implementation existed) - Add `test` script to package.json - Fix README: `render(App)` not `render(createApp(App))` ## Stats - **+6,286 lines** across 47 files - 5 commits --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>