feat: improve debug log

Author: posva

packages/cli/demo/Focusables.vue

@@ -9,6 +9,7 @@ import {
 } from 'vue-termui'
 import Input from './Input.vue'
 import { GlobalEvents } from './components/GlobalEvents'
+import { useDebugLog, onKeyData } from 'vue-termui'
 
 const [cols, rows] = useStdoutDimensions()
 
@@ -22,6 +23,16 @@ useInterval(() => {
   // write(`n: ${n.value}\n`)
 }, 300)
 useTitle(computed(() => `Counting ${n.value}...`))
+
+const root = useRootNode()
+const write = useDebugLog('logs.log')
+
+onKeyData('D', (event) => {
+  if (event.ctrlKey) {
+    write('\n' + root)
+    write('-'.repeat(80))
+  }
+})
 </script>
 
 <template>

packages/core/src/index.ts

@@ -33,6 +33,8 @@ export { onResize, useStdoutDimensions, useTitle } from './composables/screen'
 export { useStdout } from './composables/writeStreams'
 export type { UseStdoutReturn } from './composables/writeStreams'
 
+export { useDebugLog } from './utils'
+
 export { useFocus } from './focus/Focusable'
 export { useFocusManager } from './focus/FocusManager'
 export type { FocusableOptions } from './focus/Focusable'

packages/core/src/renderer/index.ts

@@ -30,4 +30,8 @@ export const { render, createApp: baseCreateApp } = createRenderer<
   createElement,
   createText,
   createComment,
+
+  cloneNode(node) {
+    return node.clone()
+  },
 })

packages/core/src/utils/fileLog.ts

@@ -0,0 +1,21 @@
+import { getCurrentScope, onScopeDispose } from '@vue/runtime-core'
+import { createWriteStream } from 'node:fs'
+
+export function useDebugLog(file = `debug-${Date.now()}.log`) {
+  const stream = createWriteStream(file, { flags: 'a' })
+
+  if (getCurrentScope())
+    onScopeDispose(() => {
+      stream.end()
+    })
+
+  function write(...args: any[]) {
+    stream.write(
+      `${new Date().toISOString()}: ${
+        'toString' in args ? args.toString() : String(args)
+      }\n`
+    )
+  }
+
+  return write
+}

packages/core/src/utils/indentHTML.ts

@@ -66,6 +66,7 @@ const INDENT = '  '
  */
 export function indentHTML(html: string): string {
   let indent = 0
+  let isOpen = false
 
   return html.split('\n').reduce((result, line) => {
     // if (line.includes('virtual-text')) {
@@ -75,14 +76,21 @@ export function indentHTML(html: string): string {
     if (line.startsWith('</')) {
       indent--
       // last line was just text
-      if (!result.trimEnd().endsWith('>')) {
+      if (!result.endsWith('>') && isOpen) {
+        isOpen = false
         return result + line
       }
+      isOpen = false
       return result + '\n' + INDENT.repeat(indent) + line
     }
 
     if (line.startsWith('<')) {
-      return result + (result ? '\n' : '') + INDENT.repeat(indent++) + line
+      const currentIndent = indent
+      if (!line.startsWith('<!--')) {
+        indent++
+        isOpen = true
+      }
+      return result + (result ? '\n' : '') + INDENT.repeat(currentIndent) + line
     }
     return result + line
   }, '')

packages/core/src/utils/index.ts

@@ -71,3 +71,6 @@ export function getElementFromInstance(
 ): DOMNode | null | undefined {
   return (instance?.vnode as VNode<DOMNode, DOMElement> | undefined)?.el
 }
+
+export * from './indentHTML'
+export * from './fileLog'

packages/domino/src/App.vue

@@ -1,5 +1,16 @@
 <script lang="ts" setup>
 import Game from './views/Game.vue'
+import { useDebugLog, onKeyData } from 'vue-termui'
+
+const root = useRootNode()
+const write = useDebugLog('logs.log')
+
+onKeyData('D', (event) => {
+  if (event.ctrlKey) {
+    write(root)
+    write('-'.repeat(80))
+  }
+})
 </script>
 
 <template>

packages/domino/src/components/HandDominoTile.vue

@@ -14,10 +14,10 @@ const { active } = useFocus({
 </script>
 
 <template>
-  <Text
-    ><Text :inverse="active">{{ tile }}</Text
-    >&nbsp;</Text
-  >
+  <Text>
+    <Text :inverse="active">{{ tile }}</Text>
+    <Text>&nbsp;</Text>
+  </Text>
 </template>
 
 <!-- <Box borderStyle="round" flexDirection="column">

packages/vite-plugin-vue-termui/src/index.ts

@@ -133,15 +133,25 @@ export default function VueTermui({
       },
     },
     Vue({
+      reactivityTransform: true,
       template: {
         compilerOptions: {
           whitespace: 'condense',
-          comments: false,
+          // comments: false,
           // term ui has no native tags
-          // isNativeTag: (tag) => tag.startsWith('tui:'),
-          isNativeTag: () => false,
+          isNativeTag: (tag) => tag.startsWith('tui:'),
+          // isNativeTag: () => false,
           // getTextMode: node => ???,
-          isCustomElement: (tag) => tag.startsWith('tui:'),
+          // isCustomElement: (tag) => tag.startsWith('tui:'),
+          isVoidTag: (tag) => tag.toLowerCase() === 'hr',
+
+          // nodeTransforms: [
+          //   (node, context) => {
+          //     console.log('---')
+          //     console.log(node)
+          //     console.log('---')
+          //   },
+          // ],
         },
       },
     }),