refactor: add better playground

Author: posva

package.json

@@ -22,6 +22,8 @@
   "devDependencies": {
     "@types/node": "^16.11.29",
     "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vue/runtime-core": "^3.2.33",
     "c8": "^7.11.2",
     "chalk": "^5.0.1",
     "conventional-changelog-cli": "^2.2.2",
@@ -35,6 +37,7 @@
     "tsup": "^5.12.6",
     "typescript": "^4.6.3",
     "unplugin-auto-import": "^0.7.1",
+    "unplugin-vue-components": "^0.19.5",
     "vite": "^2.9.6",
     "vitest": "^0.10.0",
     "vue": "^3.2.33",

packages/cli/vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
-import VueTermui from 'vite-plugin-vue-termui'
-import Inspect from 'vite-plugin-inspect'
+// use dev version directly
+import VueTermui from '../vite-plugin-vue-termui/src'
 import { resolve } from 'path'
 
 export default defineConfig({
@@ -9,11 +9,9 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      // Use development version instead of dist
       'vue-termui': resolve('../core/src/index.ts'),
     },
   },
-  plugins: [
-    VueTermui(),
-    // Inspect()
-  ],
+  plugins: [VueTermui()],
 })

packages/core/package.json

@@ -61,7 +61,6 @@
     "@types/slice-ansi": "^5.0.0",
     "@types/wrap-ansi": "^8.0.1",
     "@types/ws": "^8.5.3",
-    "@vue/runtime-core": "^3.2.33",
     "ws": "^8.5.0"
   },
   "engines": {

packages/core/src/app/createApp.ts

@@ -13,20 +13,18 @@ import {
 } from '../injectionSymbols'
 import { createLog } from '../renderer/LogUpdate'
 import { baseCreateApp } from '../renderer'
-import { RootProps, TuiApp, TuiAppOptions } from './types'
+import type { RootProps, TuiApp, TuiAppOptions } from './types'
 import {
   isRawModeSupported,
   RESTORE_SCREEN_BUFFER,
   SAVE_SCREEN_BUFFER,
 } from '../input/inputSequences'
 import { createFocusManager, FocusManagerSymbol } from '../focus/FocusManager'
-
-const noop = () => {}
+import { noop } from '../utils'
 
 export function createApp(
   rootComponent: Component,
   {
-    // TODO: move this options to mount
     stdout = process.stdout,
     stdin = process.stdin,
     stderr = process.stderr,

packages/core/src/components/App.ts

@@ -30,7 +30,7 @@ export const TuiApp = defineComponent({
       required: true,
     },
 
-    // TODO: remove and useStdout() ?
+    // we need this as a prop instead of useStdout because we need to define the write function here based on the last final render output
     stdout: {
       type: Object as PropType<NodeJS.WriteStream>,
       required: true,

packages/core/src/components/Link.ts

@@ -1,12 +1,6 @@
-import {
-  defineComponent,
-  FunctionalComponent,
-  h,
-  toRef,
-} from '@vue/runtime-core'
+import { defineComponent, h, toRef } from '@vue/runtime-core'
 import { TuiTextTransform } from './TextTransform'
 import terminalLink from 'terminal-link'
-import { TuiText } from './Text'
 import { useFocus } from '../focus/Focusable'
 
 // export const TuiLink: FunctionalComponent<{

packages/core/src/components/TextTransform.ts

@@ -1,12 +1,5 @@
 import chalk, { ForegroundColor } from 'chalk'
-import {
-  PropType,
-  h,
-  inject,
-  defineComponent,
-  onUpdated,
-  FunctionalComponent,
-} from '@vue/runtime-core'
+import { h, inject, FunctionalComponent } from '@vue/runtime-core'
 import { scheduleUpdateSymbol } from '../injectionSymbols'
 import type { OutputTransformer } from '../renderer/Output'
 import { defaultStyle, TuiTextProps } from './Text'

packages/core/src/focus/FocusManager.ts

@@ -8,12 +8,7 @@ import {
 } from '@vue/runtime-core'
 import { nextSibling, previousSibling } from '../renderer/nodeOpts'
 import { DOMElement, DOMNode, isDOMElement } from '../renderer/dom'
-import {
-  checkCurrentInstance,
-  getElementFromInstance,
-  noop,
-  getVnodeFromInstance,
-} from '../utils'
+import { checkCurrentInstance, getElementFromInstance, noop } from '../utils'
 import { Focusable, FocusId } from './types'
 
 export interface FocusManager {

packages/playground/.gitignore renamed to packages/domino/.gitignore

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}