fix: do not read comments in SFC, close #61

Author: antfu

package.json

@@ -43,18 +43,18 @@
     "test:update": "jest -u"
   },
   "dependencies": {
+    "@antfu/utils": "^0.3.0",
     "@babel/core": "^7.15.5",
     "@babel/generator": "^7.15.4",
     "@babel/parser": "^7.15.6",
     "@babel/traverse": "^7.15.4",
     "@babel/types": "^7.15.6",
+    "@rollup/pluginutils": "^4.1.1",
     "@vue/ref-transform": "^3.2.11",
     "@vue/shared": "^3.2.11",
     "defu": "^5.0.0",
     "htmlparser2": "^7.1.2",
     "magic-string": "^0.25.7",
-    "@rollup/pluginutils": "^4.1.1",
-    "@antfu/utils": "^0.3.0",
     "unplugin": "^0.2.11"
   },
   "devDependencies": {

src/core/parseSFC.ts

@@ -5,6 +5,9 @@ import { ParsedSFC, ScriptSetupTransformOptions, ScriptTagMeta } from '../types'
 import { getIdentifierUsages } from './identifiers'
 import { parse } from './babel'
 
+const multilineCommentsRE = /\/\*\s(.|[\r\n])*?\*\//gm
+const singlelineCommentsRE = /\/\/\s.*/g
+
 export function parseSFC(code: string, id?: string, options?: ScriptSetupTransformOptions): ParsedSFC {
   const components = new Set<string>()
   const expressions = new Set<string>()
@@ -14,6 +17,10 @@ export function parseSFC(code: string, id?: string, options?: ScriptSetupTransfo
   let inScriptSetup = false
   let inScript = false
 
+  const striped = code
+    .replace(multilineCommentsRE, r => ' '.repeat(r.length))
+    .replace(singlelineCommentsRE, r => ' '.repeat(r.length))
+
   const scriptSetup: ScriptTagMeta = {
     start: 0,
     end: 0,
@@ -122,7 +129,7 @@ export function parseSFC(code: string, id?: string, options?: ScriptSetupTransfo
       if (name === 'template') {
         templateLevel -= 1
         if (templateLevel === 0 && pugStart != null)
-          handlePugTemplate(code.slice(pugStart, parser.startIndex), id)
+          handlePugTemplate(striped.slice(pugStart, parser.startIndex), id)
       }
 
       if (inScriptSetup && name === 'script') {
@@ -140,7 +147,7 @@ export function parseSFC(code: string, id?: string, options?: ScriptSetupTransfo
     },
   }, htmlParserOptions)
 
-  parser.write(code)
+  parser.write(striped)
   parser.end()
 
   expressions.forEach((exp) => {

test/__snapshots__/transform.test.ts.snap

@@ -575,12 +575,18 @@ export default __sfc_main;
 
 exports[`transform fixtures test/fixtures/ScriptOnly.vue 1`] = `
 "<script lang=\\"ts\\">
-import { defineComponent } from '@vue/composition-api'
+// <script setup> in comment should not be matched
+import { defineComponent } from '@vue/composition-api';
 
-export default defineComponent({
-  name: 'Hi',
-})
+const __sfc_main = defineComponent({
+  name: 'Hi'
+});
+
+export default __sfc_main;
 </script>
+
+
+<!-- <script setup> -->
 "
 `;
 

test/fixtures/ScriptOnly.vue

@@ -1,7 +1,10 @@
 <script lang="ts">
+// <script setup> in comment should not be matched
 import { defineComponent } from '@vue/composition-api'
 
 export default defineComponent({
   name: 'Hi',
 })
 </script>
+
+<!-- <script setup> -->