fix: try to remove warn, add sourcemap (#104)

Co-authored-by: Yaël Guilloux <[email protected]>
Tahul · Aug 8, 2023 · b6c1ee5 · b6c1ee5
1 parent 4af476a
commit b6c1ee5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/src/runtime/features/debug.ts b/src/runtime/features/debug.ts
@@ -1,4 +1,3 @@
-import process from 'node:process'
 import { nextTick } from 'vue'
 import type { TokensFunctionOptions } from '../../types'
 
@@ -24,22 +23,32 @@ export function usePinceauRuntimeDebug(tokensHelperConfig: TokensFunctionOptions
     if (!nextTickCalled) {
       nextTick(() => {
         const title = '🖌️ Pinceau `runtime` encountered some errors!'
+        // @ts-ignore - Runtime debug
         if (import.meta.hot) { console.groupCollapsed(title) }
         else { console.log(title) }
         nextTickGroup.forEach((m) => {
+          // @ts-ignore - Runtime debug
+          // eslint-disable-next-line n/prefer-global/process
           if (!import.meta.hot && process.server) { console.log('\n') }
           console.log(m)
+
+          // @ts-ignore - Runtime debug
+          // eslint-disable-next-line n/prefer-global/process
           if (!import.meta.hot && process.server) { console.log('\n') }
         })
         console.log('‼️ This warning will be hidden from production and can be disabled using `dev: false` option.')
+
+        // @ts-ignore - Runtime debug
         if (import.meta.hot) { console.groupEnd() }
       })
       nextTickCalled = true
     }
   }
 
   // Reset on HMR
+  // @ts-ignore - Runtime debug
   if (import.meta.hot) {
+    // @ts-ignore - Runtime debug
     import.meta.hot.on('vite:afterUpdate', () => {
       nextTickGroup = []
       nextTickCalled = false

diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
@@ -1,4 +1,3 @@
-import process from 'node:process'
 import type { ComputedRef, Plugin, Ref } from 'vue'
 import { computed, getCurrentInstance, ref } from 'vue'
 import { nanoid } from 'nanoid'
@@ -16,6 +15,7 @@ const defaultRuntimeOptions: PinceauRuntimePluginOptions = {
   tokensHelperConfig: {},
   multiApp: false,
   colorSchemeMode: 'media',
+  // eslint-disable-next-line n/prefer-global/process
   dev: process.env.NODE_ENV !== 'production',
 }
 
@@ -31,7 +31,8 @@ export const plugin: Plugin = {
     // Resolve theme sheet
     const themeSheet = usePinceauThemeSheet(theme, tokensHelperConfig, colorSchemeMode)
 
-    // Runtime debug setup:
+    // @ts-ignore - Runtime debug
+    // eslint-disable-next-line n/prefer-global/process
     if (dev && (import.meta.hot || (process as any).server)) { import('./features/debug').then(({ usePinceauRuntimeDebug }) => usePinceauRuntimeDebug(tokensHelperConfig)) }
 
     // Sets a unique id for this plugin instance, as Pinceau can be used in multiple apps at the same time.
@@ -56,6 +57,8 @@ export const plugin: Plugin = {
       // Component LOC for debug in development
       // Only LOC variable passing should stay in bundle
       let loc: any
+      // @ts-ignore - Runtime debug
+      // eslint-disable-next-line n/prefer-global/process
       if (dev && (import.meta.hot || (process as any).server)) {
         // @ts-ignore
         const { __file: file, __name: name } = instance.vnode.type

diff --git a/src/unplugin.ts b/src/unplugin.ts
@@ -61,7 +61,7 @@ export default createUnplugin<PinceauOptions>((options) => {
   const { stopPerfTimer } = useDebugPerformance('Setup Unplugin', options?.debug)
   updateDebugContext({
     debugLevel: options?.dev ? options.debug : false,
-    logger: consola.withScope(' 🖌 '),
+    logger: consola.withTag(' 🖌 '),
     // chalk.bgBlue.blue
     tag: value => chalk.bgBlue.blue(value),
     // chalk.blue
@@ -199,17 +199,35 @@ export default createUnplugin<PinceauOptions>((options) => {
 
       try {
         // Handle $dt in JS(X)/TS(X) files
-        if (JS_EXTENSIONS.includes(query.ext)) { return { code: transformDtHelper(code, ctx) } }
+        if (JS_EXTENSIONS.includes(query.ext)) {
+          const transformedCode = transformDtHelper(code, ctx)
+          magicString.overwrite(0, code.length, transformedCode)
+          const sourceMap = magicString.generateMap({ file: query.filename, includeContent: true })
+          sourceMap.file = query.filename
+          sourceMap.sources = [query.filename]
+
+          return { code: transformedCode, map: sourceMap }
+        }
 
         // Handle CSS files & <style> tags scoped queries
-        if ((query.styles && !query.vue) || query.type === 'style') { return { code: resolveStyleQuery(code, magicString, query, ctx, loc).code } }
+        if ((query.styles && !query.vue) || query.type === 'style') {
+          const transformedCode = resolveStyleQuery(code, magicString, query, ctx, loc).code
+          magicString.overwrite(0, code.length, transformedCode)
+          const sourceMap = magicString.generateMap({ file: query.filename, includeContent: true })
+          sourceMap.file = query.filename
+          sourceMap.sources = [query.filename]
+          return { code: transformedCode, map: sourceMap }
+        }
 
         // Transform Vue
         code = transformVueSFC(code, query, magicString, ctx).code
       }
       catch (e) {
         message('TRANSFORM_ERROR', [id, e])
-        return { code }
+        const sourceMap = magicString.generateMap()
+        sourceMap.file = query.filename
+        sourceMap.sources = [query.filename]
+        return { code, map: sourceMap }
       }
 
       return result()