fix: empty string on firefox [close #14]

unplugin · Dec 18, 2023 · 46ed395 · 46ed395
1 parent 0ccec58
commit 46ed395
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 33 deletions.
diff --git a/src/core/transform/common.ts b/src/core/transform/common.ts
@@ -9,8 +9,8 @@ export function genConsoleString(genContext: GenContext) {
   const { options, originalColumn, originalLine, argType, id } = genContext
   let { argsName } = genContext
   const { prefix, suffix, disableLaunchEditor, port, disableHighlight } = options
-  const _prefix = prefix ? `${prefix} \\n` : ''
-  const _suffix = suffix ? `\\n ${suffix}` : ''
+  const _prefix = prefix ? `${prefix}\\n` : ''
+  const _suffix = suffix ? `\\n${suffix}` : ''
 
   const urlObject = new URL(id, 'file://')
   const filePath = urlObject.pathname
@@ -28,17 +28,29 @@ export function genConsoleString(genContext: GenContext) {
 
   let consoleString = ''
 
-  if (!disableHighlight && !disableHighlight)
-    consoleString = `"${_prefix}${lineInfo}${launchEditorString}","${getConsoleStyle(fileType)}","${launchEditorStyle}","\\n",`
+  if (!disableHighlight && !disableHighlight) {
+    consoleString = _prefix
+      ? `"${_prefix}${lineInfo}${launchEditorString}","${getConsoleStyle(fileType)}","${launchEditorStyle}","\\n",`
+      : `"${lineInfo}${launchEditorString}","${getConsoleStyle(fileType)}","${launchEditorStyle}","\\n",`
+  }
 
-  if (disableHighlight && !disableLaunchEditor)
-    consoleString = `"${_prefix}${launchEditorString}","${launchEditorStyle}","\\n",`
+  if (disableHighlight && !disableLaunchEditor) {
+    consoleString = _prefix
+      ? `"${_prefix}${launchEditorString}","${launchEditorStyle}","\\n",`
+      : `"${launchEditorString}","${launchEditorStyle}","\\n",`
+  }
 
-  if (!disableHighlight && disableLaunchEditor)
-    consoleString = `"${_prefix}${lineInfo}","${getConsoleStyle(fileType)}","\\n",`
+  if (!disableHighlight && disableLaunchEditor) {
+    consoleString = _prefix
+      ? `"${_prefix}${lineInfo}","${getConsoleStyle(fileType)}","\\n",`
+      : `"${lineInfo}","${getConsoleStyle(fileType)}","\\n",`
+  }
 
-  if (disableHighlight && disableLaunchEditor)
-    consoleString = `"${_prefix}",`
+  if (disableHighlight && disableLaunchEditor) {
+    consoleString = _prefix
+      ? `"${_prefix}","\\n",`
+      : ''
+  }
 
   return {
     consoleString,

diff --git a/src/core/transform/vite.ts b/src/core/transform/vite.ts
@@ -48,9 +48,8 @@ export function viteTransform(context: Context) {
           id,
         })
 
-        magicString
-          .appendLeft(argsStart, consoleString)
-          .appendRight(argsEnd, `,"${_suffix}"`)
+        consoleString && magicString.appendLeft(argsStart, consoleString)
+        _suffix && magicString.appendRight(argsEnd, `,"${_suffix}"`)
       }
     },
   })

diff --git a/src/core/transform/webpack.ts b/src/core/transform/webpack.ts
@@ -75,9 +75,8 @@ export async function webpackTransform(context: Context) {
           id,
         })
 
-        magicString
-          .appendLeft(argsStart, consoleString)
-          .appendRight(argsEnd, `,"${_suffix}"`)
+        consoleString && magicString.appendLeft(argsStart, consoleString)
+        _suffix && magicString.appendRight(argsEnd, `,"${_suffix}"`)
       }
     },
   })

diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -5,7 +5,7 @@ export const filter = createFilter(
   [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
 )
 
-const commonStyle = 'padding:2px 5px; border-radius:3px 0 0 3px;'
+const commonStyle = 'padding:2px 5px; border-radius:3px 0 0 3px;margin-bottom:5px;'
 
 const consoleStyles: Record<string, string> = {
   '.js': `${commonStyle}color: #111827; background: #F7DF1E`,

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🔦 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;margin-bottom:5px;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,iQAAY,qBAAkB",
+    "mappings": "AAAA,mRAAY",
     "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🔦 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;margin-bottom:5px;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,+PAAY,YAAS;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+    "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iRAAY;AACZ;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🔦 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;margin-bottom:5px;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,gQAAc,iBAAc;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;",
+    "mappings": "AAAA;AACA,kRAAc;AACd;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
@@ -2,10 +2,10 @@
 
 exports[`options > disable all 1`] = `
 {
-  "code": "console.log(\\"\\",'hello javascript',\\"\\")",
+  "code": "console.log('hello javascript')",
   "map": SourceMap {
     "file": undefined,
-    "mappings": "AAAA,eAAY,qBAAkB",
+    "mappings": "AAAA",
     "names": [],
     "sources": [
       "/home/runner/work/unplugin-turbo-console/src/App.vue",
@@ -18,10 +18,10 @@ exports[`options > disable all 1`] = `
 
 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',\\"\\")",
+  "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",
+    "mappings": "AAAA,mOAAY",
     "names": [],
     "sources": [
       "/home/runner/work/unplugin-turbo-console/src/App.vue",
@@ -34,10 +34,10 @@ exports[`options > disable highlight editor 1`] = `
 
 exports[`options > disable launch editor 1`] = `
 {
-  "code": "console.log(\\"%c🚀 App.vue:1\\",\\"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;margin-bottom:5px;color: #fff; background: #4FC08D\\",\\"\\\\n\\",'hello javascript')",
   "map": SourceMap {
     "file": undefined,
-    "mappings": "AAAA,gHAAY,qBAAkB",
+    "mappings": "AAAA,kIAAY",
     "names": [],
     "sources": [
       "/home/runner/work/unplugin-turbo-console/src/App.vue",
@@ -50,10 +50,10 @@ exports[`options > disable launch editor 1`] = `
 
 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',\\"\\")",
+  "code": "console.log(\\"%c🚀 App.vue:1%c🔦 http://localhost:undefined/client#Li4vLi4vaG9tZS9ydW5uZXIvd29yay91bnBsdWdpbi10dXJiby1jb25zb2xlL3NyYy9BcHAudnVlOjE6MQ==\\",\\"padding:2px 5px; border-radius:3px 0 0 3px;margin-bottom:5px;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,+TAAY,qBAAkB",
+    "mappings": "AAAA,iVAAY",
     "names": [],
     "sources": [
       "/home/runner/work/unplugin-turbo-console/src/App.vue",
@@ -66,10 +66,10 @@ exports[`options > empty option 1`] = `
 
 exports[`options > perfix suffix 1`] = `
 {
-  "code": "console.log(\\"xxxx \\\\n\\",'hello javascript',\\"\\\\n yyy\\")",
+  "code": "console.log(\\"xxxx\\\\n\\",\\"\\\\n\\",'hello javascript',\\"\\\\nyyy\\")",
   "map": SourceMap {
     "file": undefined,
-    "mappings": "AAAA,sBAAY,2BAAkB",
+    "mappings": "AAAA,0BAAY,0BAAkB",
     "names": [],
     "sources": [
       "/home/runner/work/unplugin-turbo-console/src/App.vue",