feat: theme detect for highlight output

unplugin · Jul 29, 2024 · 2860a36 · 2860a36
1 parent 1c138f0
commit 2860a36
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 48 deletions.
diff --git a/client.d.ts b/client.d.ts
@@ -1,3 +1,7 @@
 declare module '~console' {
 
 }
+
+declare module '~console/theme-detect' {
+
+}
diff --git a/examples/nuxt/app.vue b/examples/nuxt/app.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import "~console";
+import '~console/theme-detect';
 
 function makeFetch() {
   fetch("/api/test");

diff --git a/src/core/constants.ts b/src/core/constants.ts
@@ -1,4 +1,7 @@
 export const PLUGIN_NAME = 'unplugin-turbo-console'
 export const NUXT_CONFIG_KEY = 'turboConsole'
-export const virtualModuleId = `~console`
-export const resolvedVirtualModuleId = `\0${virtualModuleId}`
+
+export const VirtualModules = {
+  Init: '~console',
+  ThemeDetect: '~console/theme-detect',
+}
diff --git a/src/core/utils/codegen.ts b/src/core/utils/codegen.ts
@@ -84,23 +84,24 @@ export function genConsoleString(genContext: GenContext) {
   const launchEditorString = `%c${builtInThemes.launchEditor.icon} http://localhost:${port}#${codePosition}`
 
   let consoleString = ''
+  const lineWrap = `"\\n"`
 
   if (!disableHighlight && !disableHighlight) {
     consoleString = _prefix
-      ? `"${_prefix}${lineInfo}${launchEditorString}","${getStyleCode(fileType).highlight}","${getStyleCode(fileType).launchEditor}","\\n",`
-      : `"${lineInfo}${launchEditorString}","${getStyleCode(fileType).highlight}","${getStyleCode(fileType).launchEditor}","\\n",`
+      ? `"${_prefix}${lineInfo}${launchEditorString}",${getStyleCode(fileType).highlight},${getStyleCode(fileType).launchEditor},${lineWrap},`
+      : `"${lineInfo}${launchEditorString}",${getStyleCode(fileType).highlight},${getStyleCode(fileType).launchEditor},${lineWrap},`
   }
 
   if (disableHighlight && !disableLaunchEditor) {
     consoleString = _prefix
-      ? `"${_prefix}${launchEditorString}","${getStyleCode(fileType).launchEditor}","\\n",`
-      : `"${launchEditorString}","${getStyleCode(fileType).launchEditor}","\\n",`
+      ? `"${_prefix}${launchEditorString}",${getStyleCode(fileType).launchEditor},${lineWrap},`
+      : `"${launchEditorString}",${getStyleCode(fileType).launchEditor},${lineWrap},`
   }
 
   if (!disableHighlight && disableLaunchEditor) {
     consoleString = _prefix
-      ? `"${_prefix}${lineInfo}","${getStyleCode(fileType).highlight}","\\n",`
-      : `"${lineInfo}","${getStyleCode(fileType).highlight}","\\n",`
+      ? `"${_prefix}${lineInfo}",${getStyleCode(fileType).highlight},${lineWrap},`
+      : `"${lineInfo}",${getStyleCode(fileType).highlight},${lineWrap},`
   }
 
   if (disableHighlight && disableLaunchEditor) {

diff --git a/src/core/utils/themes.ts b/src/core/utils/themes.ts
@@ -35,12 +35,12 @@ export const builtInThemes: Themes = {
     js: {
       ...commonStyle,
       color: '#fff',
-      background: '#4FC08D',
+      background: '#F7DF1E',
     },
     jsx: {
       ...commonStyle,
       color: '#fff',
-      background: '#4FC08D',
+      background: '#F7DF1E',
     },
     ts: {
       ...commonStyle,
@@ -81,6 +81,8 @@ export function getStyleCode(fileType: FileExt) {
   const theme = builtInThemes.highlight[fileType]!
 
   const highlight = Object.entries(theme).map(([key, value]) => {
+    if (key === 'background')
+      return `${key}:\${globalThis._UTC_DETECT_DARK && globalThis._UTC_DETECT_DARK() ? '${value}90;' : '${value};'\}`
     return `${key}:${value};`
   }).join('')
 
@@ -91,7 +93,7 @@ export function getStyleCode(fileType: FileExt) {
   }).join('')
 
   return {
-    launchEditor,
-    highlight,
+    launchEditor: `\`${launchEditor}\``,
+    highlight: `\`${highlight}\``,
   }
 }
diff --git a/src/core/virtualModules.ts b/src/core/virtualModules.ts
@@ -1,4 +1,4 @@
-export function virtualModulesGenerator(port: number, isProd: boolean) {
+export function initVirtualModulesGenerator(port: number, isProd: boolean) {
   if (isProd)
     return /* js */`;(() => {})()`
 
@@ -21,3 +21,13 @@ export function virtualModulesGenerator(port: number, isProd: boolean) {
   })()
 `
 }
+
+export function themeDetectVirtualModule() {
+  return /* js */`
+  ;(() => {
+    if (globalThis.matchMedia) {
+      globalThis._UTC_DETECT_DARK = () => (globalThis.matchMedia('(prefers-color-scheme: dark)').matches)
+    }
+  })()
+  `
+}
diff --git a/src/index.ts b/src/index.ts
@@ -4,12 +4,12 @@ import { createUnplugin } from 'unplugin'
 import { checkPort, getRandomPort } from 'get-port-please'
 import { relative } from 'pathe'
 import type { Context, Options } from './types'
-import { PLUGIN_NAME, resolvedVirtualModuleId, virtualModuleId } from './core/constants'
+import { PLUGIN_NAME, VirtualModules } from './core/constants'
 import { createServer } from './core/server/index'
 import { filter, loadPkg, printInfo } from './core/utils'
 import { resolveOptions } from './core/options'
 import { transform } from './core/transform/index'
-import { virtualModulesGenerator } from './core/virtualModules'
+import { initVirtualModulesGenerator, themeDetectVirtualModule } from './core/virtualModules'
 
 export const unpluginFactory: UnpluginFactory<Options | undefined> = (rawOptions = {}) => {
   const options = resolveOptions(rawOptions)
@@ -37,16 +37,26 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = (rawOptions
       return filter(id)
     },
     resolveId(id) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId
+      if (Object.values(VirtualModules).includes(id)) {
+        return `\0${id}`
       }
     },
     loadInclude(id) {
-      return id === resolvedVirtualModuleId
+      if (!id.startsWith('\0'))
+        return false
+      id = id.slice(1)
+      return Object.values(VirtualModules).includes(id)
     },
     load(id) {
-      if (id === resolvedVirtualModuleId) {
-        return virtualModulesGenerator(options.port!, env.NODE_ENV === 'production')
+      if (!id.startsWith('\0'))
+        return
+      id = id.slice(1)
+
+      if (id === VirtualModules.Init) {
+        return initVirtualModulesGenerator(options.port!, env.NODE_ENV === 'production')
+      }
+      else if (id === VirtualModules.ThemeDetect) {
+        return themeDetectVirtualModule()
       }
     },
     async transform(code, id) {

diff --git a/test/__snapshots__/comment.test.ts.snap b/test/__snapshots__/comment.test.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`disable by comments > on current line 1`] = `
 {
-  "code": "console.log("%c🚀 comments.js·1%c🔦 http://localhost:3070#commsx,1,1","padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:#4FC08D;","background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;","\\n",'hello javascript')
+  "code": "console.log("%c🚀 comments.js·1%c🔦 http://localhost:3070#commsx,1,1",\`padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:\${globalThis._UTC_DETECT_DARK && globalThis._UTC_DETECT_DARK() ? '#F7DF1E90;' : '#F7DF1E;'}\`,\`background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;\`,"\\n",'hello javascript')
   console.log('hello javascript2') // turbo-console-disable-line
   ",
   "map": SourceMap {
     "file": "comments.js",
-    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,+OAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChE,CAAC",
+    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kUAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChE,CAAC",
     "names": [],
     "sources": [
       "comments.js",
@@ -24,13 +24,13 @@ exports[`disable by comments > on current line 1`] = `
 
 exports[`disable by comments > on next line 1`] = `
 {
-  "code": "console.log("%c🚀 comments.js·1%c🔦 http://localhost:3070#commsx,1,1","padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:#4FC08D;","background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;","\\n",'hello javascript')
+  "code": "console.log("%c🚀 comments.js·1%c🔦 http://localhost:3070#commsx,1,1",\`padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:\${globalThis._UTC_DETECT_DARK && globalThis._UTC_DETECT_DARK() ? '#F7DF1E90;' : '#F7DF1E;'}\`,\`background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;\`,"\\n",'hello javascript')
   // turbo-console-disable-next-line
   console.log('hello javascript2')
   ",
   "map": SourceMap {
     "file": "comments.js",
-    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,+OAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACpC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC",
+    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kUAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACpC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC",
     "names": [],
     "sources": [
       "comments.js",

diff --git a/test/__snapshots__/options.test.ts.snap b/test/__snapshots__/options.test.ts.snap
@@ -20,7 +20,7 @@ exports[`transform options > disable all 1`] = `
 
 exports[`transform options > disable highlight 1`] = `
 {
-  "code": "console.log("%c🔦 http://localhost:3070#fgsss,1,1","background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;","\\n",'hello javascript')",
+  "code": "console.log("%c🔦 http://localhost:3070#fgsss,1,1",\`background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;\`,"\\n",'hello javascript')",
   "map": SourceMap {
     "file": "main.js",
     "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gIAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
@@ -38,10 +38,10 @@ exports[`transform options > disable highlight 1`] = `
 
 exports[`transform options > disable launch editor 1`] = `
 {
-  "code": "console.log("%c🚀 main.js·1","padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:#4FC08D;","\\n",'hello javascript')",
+  "code": "console.log("%c🚀 main.js·1",\`padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:\${globalThis._UTC_DETECT_DARK && globalThis._UTC_DETECT_DARK() ? '#F7DF1E90;' : '#F7DF1E;'}\`,"\\n",'hello javascript')",
   "map": SourceMap {
     "file": "main.js",
-    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mHAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
+    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sMAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
     "names": [],
     "sources": [
       "main.js",
@@ -56,10 +56,10 @@ exports[`transform options > disable launch editor 1`] = `
 
 exports[`transform options > empty option 1`] = `
 {
-  "code": "console.log("%c🚀 main.js·1%c🔦 http://localhost:3070#fgsss,1,1","padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:#4FC08D;","background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;","\\n",'hello javascript')",
+  "code": "console.log("%c🚀 main.js·1%c🔦 http://localhost:3070#fgsss,1,1",\`padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:\${globalThis._UTC_DETECT_DARK && globalThis._UTC_DETECT_DARK() ? '#F7DF1E90;' : '#F7DF1E;'}\`,\`background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;\`,"\\n",'hello javascript')",
   "map": SourceMap {
     "file": "main.js",
-    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,0OAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
+    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,6TAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
     "names": [],
     "sources": [
       "main.js",
@@ -74,10 +74,10 @@ exports[`transform options > empty option 1`] = `
 
 exports[`transform options > extended path option 1`] = `
 {
-  "code": "console.log("%c🚀 runner/index.js·1%c🔦 http://localhost:3070#sfgha,1,1","padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:#4FC08D;","background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;","\\n",'hello javascript')",
+  "code": "console.log("%c🚀 runner/index.js·1%c🔦 http://localhost:3070#sfgha,1,1",\`padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:\${globalThis._UTC_DETECT_DARK && globalThis._UTC_DETECT_DARK() ? '#F7DF1E90;' : '#F7DF1E;'}\`,\`background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;\`,"\\n",'hello javascript')",
   "map": SourceMap {
     "file": "index.js",
-    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kPAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
+    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,qUAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
     "names": [],
     "sources": [
       "index.js",
@@ -92,10 +92,10 @@ exports[`transform options > extended path option 1`] = `
 
 exports[`transform options > with prefix suffix 1`] = `
 {
-  "code": "console.log("-------\\n%c🚀 main.js·1%c🔦 http://localhost:3070#fgsss,1,1","padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:#4FC08D;","background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;","\\n",'hello javascript',"\\n-------")",
+  "code": "console.log("-------\\n%c🚀 main.js·1%c🔦 http://localhost:3070#fgsss,1,1",\`padding:2px 5px;border-radius:3px 0 0 3px;margin:0 0 5px 0;color:#fff;background:\${globalThis._UTC_DETECT_DARK && globalThis._UTC_DETECT_DARK() ? '#F7DF1E90;' : '#F7DF1E;'}\`,\`background:#00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin:0 0 5px 0;\`,"\\n",'hello javascript',"\\n-------")",
   "map": SourceMap {
     "file": "main.js",
-    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mPAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAC",
+    "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sUAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAC",
     "names": [],
     "sources": [
       "main.js",