fix: handle script tags with attributes (#12)

unjs · Oct 13, 2021 · 19f9d5d · 19f9d5d
1 parent b3c5366
commit 19f9d5d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/loaders/vue.ts b/src/loaders/vue.ts
@@ -6,7 +6,8 @@ export const vueLoader: Loader = async (input, { loadFile }) => {
   }
 
   const contents = await input.getContents()
-  const [scriptBlock, attrs = '', script] = contents.match(/<script(\s[^>\s]*)*>([\S\s.]*?)<\/script>/) || []
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [scriptBlock, attrs = '', _lastAttr, script] = contents.match(/<script((\s[^>\s]*)*)>([\S\s.]*?)<\/script>/) || []
   if (!scriptBlock || !script) {
     return
   }
@@ -26,10 +27,12 @@ export const vueLoader: Loader = async (input, { loadFile }) => {
     return
   }
 
+  const newAttrs = attrs.replace(new RegExp(`\\s?lang="${lang}"`), '')
+
   return [
     {
       path: input.path,
-      contents: contents.replace(scriptBlock, `<script>\n${scriptFile.contents}</script>`)
+      contents: contents.replace(scriptBlock, `<script${newAttrs}>\n${scriptFile.contents}</script>`)
     },
     ...files.filter(f => f !== scriptFile)
   ]

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -67,6 +67,18 @@ describe('createLoader', () => {
     expect(results).toMatchObject([{ raw: true }])
   })
 
+  it('vueLoader handles script tags with attributes', async () => {
+    const { loadFile } = createLoader({
+      loaders: [vueLoader, jsLoader]
+    })
+    const results = await loadFile({
+      extension: '.vue',
+      getContents: () => '<script setup lang="ts">Test</script>',
+      path: 'test.vue'
+    })
+    expect(results).toMatchObject([{ contents: ['<script setup>', 'Test;', '</script>'].join('\n') }])
+  })
+
   it('vueLoader will generate dts file', async () => {
     const { loadFile } = createLoader({
       loaders: [vueLoader, jsLoader],