feat: add disableHighlight option

unplugin · Dec 4, 2023 · 54963a7 · 54963a7
1 parent c49ed95
commit 54963a7
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 23 deletions.
diff --git a/examples/vite-vue3/package.json b/examples/vite-vue3/package.json
@@ -20,8 +20,9 @@
     "@vue/tsconfig": "^0.4.0",
     "npm-run-all2": "^6.1.1",
     "typescript": "~5.2.0",
-    "vite": "^4.4.11",
     "unplugin-turbo-console": "workspace:*",
+    "vite": "^4.4.11",
+    "vite-plugin-inspect": "^0.7.41",
     "vue-tsc": "^1.8.19"
   }
 }
diff --git a/examples/vite-vue3/vite.config.ts b/examples/vite-vue3/vite.config.ts
@@ -3,13 +3,17 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import TurboConsole from 'unplugin-turbo-console/vite'
+import inspect from 'vite-plugin-inspect'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    inspect(),
     TurboConsole({
-      port: 3090
+      port: 3090,
+      disableHighlight: true,
+      disableLaunchEditor: true,
     })
   ],
   resolve: {

diff --git a/examples/vue3-cli/vue.config.js b/examples/vue3-cli/vue.config.js
@@ -5,8 +5,7 @@ module.exports = defineConfig({
   configureWebpack: {
     plugins: [
       require('unplugin-turbo-console/webpack')({
-        prefix: 'xxxx',
-        suffix: 'yyy',
+        disableHighlight: true
       })
     ]
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/constants.ts b/src/core/constants.ts
@@ -1,9 +1,12 @@
+import type { Options } from '../types'
+
 export const PLUGIN_NAME = 'unplugin-turbo-console'
 export const NUXT_CONFIG_KEY = 'turboConsole'
 
-export const DETAULT_OPTIONS = {
+export const DETAULT_OPTIONS: Options = {
   prefix: '',
   suffix: '',
   disableLaunchEditor: false,
+  disableHighlight: false,
   port: 3070,
 }
diff --git a/src/core/transform/common.ts b/src/core/transform/common.ts
@@ -8,8 +8,7 @@ import { getConsoleStyle, launchEditorStyle } from '../utils'
 export function genConsoleString(genContext: GenContext) {
   const { options, originalColumn, originalLine, argType, id } = genContext
   let { argsName } = genContext
-  const { prefix, suffix, disableLaunchEditor, port } = options
-
+  const { prefix, suffix, disableLaunchEditor, port, disableHighlight } = options
   const _prefix = prefix ? `${prefix} \\n` : ''
   const _suffix = suffix ? `\\n ${suffix}` : ''
 
@@ -29,11 +28,14 @@ export function genConsoleString(genContext: GenContext) {
 
   let consoleString = ''
 
-  if (!disableLaunchEditor)
-    consoleString = `"${lineInfo} %c${launchEditorString}","${getConsoleStyle(fileType)}","","${launchEditorStyle}","\\n",`
+  if (!disableHighlight && !disableHighlight)
+    consoleString = `"${lineInfo}${launchEditorString}","${getConsoleStyle(fileType)}","${launchEditorStyle}","\\n",`
+
+  if (disableHighlight && !disableLaunchEditor)
+    consoleString = `"${launchEditorString}","${launchEditorStyle}","\\n",`
 
-  else
-    consoleString = `"${lineInfo} %c\\n","${getConsoleStyle(fileType)}","\\n",`
+  if (!disableHighlight && disableLaunchEditor)
+    consoleString = `"${lineInfo}","${getConsoleStyle(fileType)}","\\n",`
 
   return {
     consoleString,

diff --git a/src/types.ts b/src/types.ts
@@ -19,6 +19,12 @@ export interface Options {
    * @default false
    */
   disableLaunchEditor?: boolean
+  /**
+   * Whether to disable the highlight output feature.
+   *
+   * @default false
+   */
+  disableHighlight?: boolean
   /**
    * The specific service port of launch editor server.
    *

diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`webpack js transform > script 1`] = `
 {
-  "code": "console.log(\\"%c🚀 main.js:1 %c%c🔦 http://localhost:3090/client#Li4vLi4vbWFpbi5qczoxOjE=\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #111827; background: #F7DF1E\\",\\"\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'hello javascript',\\"\\")",
+  "code": "console.log(\\"%c🚀 main.js:1%c🔦 http://localhost:3090/client#Li4vLi4vbWFpbi5qczoxOjE=\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #111827; background: #F7DF1E\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'hello javascript',\\"\\")",
   "map": SourceMap {
     "file": undefined,
-    "mappings": "AAAA,uQAAY,qBAAkB",
+    "mappings": "AAAA,iQAAY,qBAAkB",
     "names": [],
     "sources": [
       "main.js",
@@ -27,7 +27,7 @@ exports[`webpack vue transform > script 1`] = `
 import { defineComponent } from 'vue';
 import HelloWorld from './components/HelloWorld.vue';
 
-console.log(\\"%c🚀 App.vue:10 %c%c🔦 http://localhost:3070/client#Li4vLi4vQXBwLnZ1ZToxMDox\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'App.vue',\\"\\")
+console.log(\\"%c🚀 App.vue:10%c🔦 http://localhost:3070/client#Li4vLi4vQXBwLnZ1ZToxMDox\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'App.vue',\\"\\")
 
 export default defineComponent({
   name: 'App',
@@ -39,7 +39,7 @@ export default defineComponent({
 ",
   "map": SourceMap {
     "file": undefined,
-    "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qQAAY,YAAS;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+    "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+PAAY,YAAS;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
     "names": [],
     "sources": [
       "App.vue",
@@ -53,7 +53,7 @@ export default defineComponent({
 exports[`webpack vue transform > script setup 1`] = `
 {
   "code": "<script setup lang=\\"ts\\">
-  console.log(\\"%c🚀 App.vue:2 %c%c🔦 http://localhost:3090/client#Li4vLi4vQXBwLnZ1ZToyOjM=\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'script setup',\\"\\")
+  console.log(\\"%c🚀 App.vue:2%c🔦 http://localhost:3090/client#Li4vLi4vQXBwLnZ1ZToyOjM=\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'script setup',\\"\\")
   </script>
   
   <template>
@@ -64,7 +64,7 @@ exports[`webpack vue transform > script setup 1`] = `
 ",
   "map": SourceMap {
     "file": undefined,
-    "mappings": "AAAA;AACA,sQAAc,iBAAc;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;",
+    "mappings": "AAAA;AACA,gQAAc,iBAAc;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;",
     "names": [],
     "sources": [
       "App.vue",

diff --git a/test/__snapshots__/options.test.ts.snap b/test/__snapshots__/options.test.ts.snap
@@ -1,11 +1,59 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`options > disable all 1`] = `
+{
+  "code": "console.log('hello javascript',\\"\\")",
+  "map": SourceMap {
+    "file": undefined,
+    "mappings": "AAAA,YAAY,qBAAkB",
+    "names": [],
+    "sources": [
+      "/home/runner/work/unplugin-turbo-console/src/App.vue",
+    ],
+    "sourcesContent": undefined,
+    "version": 3,
+  },
+}
+`;
+
+exports[`options > disable highlight editor 1`] = `
+{
+  "code": "console.log(\\"%c🔦 http://localhost:undefined/client#Li4vLi4vaG9tZS9ydW5uZXIvd29yay91bnBsdWdpbi10dXJiby1jb25zb2xlL3NyYy9BcHAudnVlOjE6MQ==\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'hello javascript',\\"\\")",
+  "map": SourceMap {
+    "file": undefined,
+    "mappings": "AAAA,mOAAY,qBAAkB",
+    "names": [],
+    "sources": [
+      "/home/runner/work/unplugin-turbo-console/src/App.vue",
+    ],
+    "sourcesContent": undefined,
+    "version": 3,
+  },
+}
+`;
+
 exports[`options > disable launch editor 1`] = `
 {
-  "code": "console.log(\\"%c🚀 App.vue:1 %c\\\\n\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"\\\\n\\",'hello javascript',\\"\\")",
+  "code": "console.log(\\"%c🚀 App.vue:1\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"\\\\n\\",'hello javascript',\\"\\")",
+  "map": SourceMap {
+    "file": undefined,
+    "mappings": "AAAA,gHAAY,qBAAkB",
+    "names": [],
+    "sources": [
+      "/home/runner/work/unplugin-turbo-console/src/App.vue",
+    ],
+    "sourcesContent": undefined,
+    "version": 3,
+  },
+}
+`;
+
+exports[`options > empty option 1`] = `
+{
+  "code": "console.log(\\"%c🚀 App.vue:1%c🔦 http://localhost:undefined/client#Li4vLi4vaG9tZS9ydW5uZXIvd29yay91bnBsdWdpbi10dXJiby1jb25zb2xlL3NyYy9BcHAudnVlOjE6MQ==\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'hello javascript',\\"\\")",
   "map": SourceMap {
     "file": undefined,
-    "mappings": "AAAA,qHAAY,qBAAkB",
+    "mappings": "AAAA,+TAAY,qBAAkB",
     "names": [],
     "sources": [
       "/home/runner/work/unplugin-turbo-console/src/App.vue",
@@ -18,10 +66,10 @@ exports[`options > disable launch editor 1`] = `
 
 exports[`options > perfix suffix 1`] = `
 {
-  "code": "console.log(\\"xxxx \\\\n%c🚀 App.vue:1 %c%c🔦 http://localhost:undefined/client#Li4vLi4vaG9tZS9ydW5uZXIvd29yay91bnBsdWdpbi10dXJiby1jb25zb2xlL3NyYy9BcHAudnVlOjE6MQ==\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'hello javascript',\\"\\\\n yyy\\")",
+  "code": "console.log(\\"xxxx \\\\n%c🚀 App.vue:1%c🔦 http://localhost:undefined/client#Li4vLi4vaG9tZS9ydW5uZXIvd29yay91bnBsdWdpbi10dXJiby1jb25zb2xlL3NyYy9BcHAudnVlOjE6MQ==\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;color: #fff; background: #4FC08D\\",\\"background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px\\",\\"\\\\n\\",'hello javascript',\\"\\\\n yyy\\")",
   "map": SourceMap {
     "file": undefined,
-    "mappings": "AAAA,4UAAY,2BAAkB",
+    "mappings": "AAAA,sUAAY,2BAAkB",
     "names": [],
     "sources": [
       "/home/runner/work/unplugin-turbo-console/src/App.vue",

diff --git a/test/fixtures/option.ts b/test/fixtures/option.ts
@@ -15,3 +15,26 @@ export const optionWithDisableLaunchEditor = {
   code: `console.log('hello javascript')`,
   id: '/home/runner/work/unplugin-turbo-console/src/App.vue',
 }
+
+export const optionWithDisableHightlight = {
+  options: {
+    disableHighlight: true,
+  },
+  code: `console.log('hello javascript')`,
+  id: '/home/runner/work/unplugin-turbo-console/src/App.vue',
+}
+
+export const optionWithDisableAll = {
+  options: {
+    disableLaunchEditor: true,
+    disableHighlight: true,
+  },
+  code: `console.log('hello javascript')`,
+  id: '/home/runner/work/unplugin-turbo-console/src/App.vue',
+}
+
+export const emptyOption = {
+  options: {},
+  code: `console.log('hello javascript')`,
+  id: '/home/runner/work/unplugin-turbo-console/src/App.vue',
+}
diff --git a/test/options.test.ts b/test/options.test.ts
@@ -1,7 +1,7 @@
 import { join } from 'pathe'
 import { describe, expect, it, vi } from 'vitest'
 import { webpackTransform } from '../src/core/transform/webpack'
-import { optionWithDisableLaunchEditor, optionWithPrefix } from './fixtures/option'
+import { emptyOption, optionWithDisableAll, optionWithDisableHightlight, optionWithDisableLaunchEditor, optionWithPrefix } from './fixtures/option'
 
 vi.mock('node:process', () => {
   return {
@@ -10,6 +10,14 @@ vi.mock('node:process', () => {
 })
 
 describe('options', () => {
+  it('empty option', () => {
+    expect(
+      webpackTransform(
+        emptyOption,
+      ),
+    ).toMatchSnapshot()
+  })
+
   it('perfix suffix', () => {
     expect(
       webpackTransform(
@@ -25,4 +33,20 @@ describe('options', () => {
       ),
     ).toMatchSnapshot()
   })
+
+  it('disable highlight editor', () => {
+    expect(
+      webpackTransform(
+        optionWithDisableHightlight,
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('disable all', () => {
+    expect(
+      webpackTransform(
+        optionWithDisableAll,
+      ),
+    ).toMatchSnapshot()
+  })
 })