feat: client [wip]

Author: yuyinws

client/app/app.vue

@@ -1,3 +1,5 @@
 <template>
-  <NuxtPage />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

client/app/components/app-footer.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import PKG from '../../../package.json'
+</script>
+
+<template>
+  <footer class="p-8 flex justify-between items-center">
+    <a href="https://github.com/unplugin/unplugin-turbo-console" target="_blank" class="flex items-center gap-1 text-gray-400 hover:text-gray-500 transition-colors">
+      <Icon name="uil:github" class="text-2xl" />
+      Source Code
+    </a>
+
+    <div class="text-gray-400">
+      Version: {{ PKG.version }}
+    </div>
+  </footer>
+</template>

client/app/layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+  <main>
+    <slot />
+
+    <app-footer />
+  </main>
+</template>

client/app/pages/index.vue

@@ -19,6 +19,9 @@ const launchEditorServerResponse = ref<LaunchEditorServerResponse>()
 async function init() {
   try {
     const position = window.location.hash.slice(1)
+    if (!position) {
+      throw new Error('No position provided')
+    }
     const response = await $fetch<LaunchEditorServerResponse>(`/launchEditor?position=${(position)}`)
     if (response.status !== 'success') {
       throw new Error(response.message || 'Unknown error')
@@ -42,7 +45,7 @@ init()
 </script>
 
 <template>
-  <main class="h-screen w-screen p-8">
+  <main class="w-screen p-8">
     <div v-if="requestState.status === 'pending'" class="flex h-full justify-center">
       <div class="flex flex-col items-center gap-2">
         <Icon name="uil:spinner" class="text-2xl animate-spin" />

examples/vite-vue3/src/jsLog.js

@@ -1,4 +1,12 @@
 export function logJs() {
-  console.log('from js') // turbo-console-disable-line
+  console.info('from js')
+
+  console.warn('from js')
+
+  console.error('from js')
+
+  console.log('from js')
+  
+  
 }
 

examples/vite-vue3/src/tsLog.ts

@@ -1,4 +1,18 @@
 export function logTs() {
-  const a = '你好'
-  console.log(a)
+  const abc = '你4445jj5好'
+  console.log(abc)
+
+  const def = '你4445jj5好'
+  console.log(def)
+
+  // const ghi = '你4445jj5好'
+  // console.log(ghi)
+
+  // const jkl = '你4445jj5好'
+  // console.log(jkl)
+
+        const mno = '你4445jj5好'
+        console.log(mno)
+  
+  
 }

global.d.ts

@@ -3,10 +3,18 @@
 
 export interface global {}
 
+interface ExpressionMeta {
+  code: string
+  method: string
+  line: number
+  column: number
+}
+
 declare global {
   import type { Peer } from 'crossws'
 
   var TurboConsoleFilePathMap: Map<string, string>
+  var TurboConsoleExpressionsMap: Map<string, ExpressionMeta[]>
   var UNPLUGIN_TURBO_CONSOLE_LAUNCH_SERVER: boolean
   var UNPLUGIN_TURBO_CONSOLE_PEERS_SET: Set<Peer> | undefined
 }

src/core/server/filePathMap.ts

@@ -4,9 +4,12 @@ import { version } from '../../../package.json'
 export default defineEventHandler(async () => {
   try {
     const filePathMap = globalThis.TurboConsoleFilePathMap || new Map()
+    const expressionsMap = globalThis.TurboConsoleExpressionsMap || new Map()
+
     return {
       status: 'success',
       filePathMap: Object.fromEntries(filePathMap),
+      expressionsMap: Object.fromEntries(expressionsMap),
       version,
     }
   }

src/core/transform/compilers/sfc.ts

@@ -5,11 +5,13 @@ export async function sfcCompiler(context: Context): Promise<CompileResult> {
   try {
     const { code } = context
 
-    const scriptRegex = /<script(?:\s[^>]*?lang="([^"]*)")?\s*>([\s\S]*?)<\/script>/
+    const scriptRegex = /<script\s*([^>]*)>([\s\S]*?)<\/script>/
 
     const match = scriptRegex.exec(code)
     if (match) {
-      const lang = match[1] || 'js'
+      const attrs = match[1] || ''
+      const langMatch = attrs.match(/lang=["']([^"']*)["']/)
+      const lang = langMatch ? langMatch[1] : 'js'
       const content = match[2]
       const offset = code.indexOf(content)
       const line = offset ? code.substring(0, offset).split('\n').length - 1 : 0

src/core/transform/index.ts

@@ -75,6 +75,7 @@ export async function transform(context: Context) {
           return false
         }
 
+        const consoleMethod = (node as any).callee.property.name
         const args = (node as any).arguments
 
         const argsStart = calculateStart(compileResult.script, oxcMs.getLineColumnNumber(args[0].start))
@@ -90,6 +91,7 @@ export async function transform(context: Context) {
 
         const { consoleString, _suffix } = genConsoleString({
           options,
+          consoleMethod,
           originalLine,
           originalColumn,
           argType,