fix: make it work when a default lang was specified (#223)

Co-authored-by: sapphi-red <green@sapphi.red>

Fixes #17

Author: dargmuesli

packages/plugin-vue/src/main.ts

@@ -264,7 +264,7 @@ async function genTemplateCode(
   // If the template is not using pre-processor AND is not using external src,
   // compile and inline it directly in the main module. When served in vite this
   // saves an extra request per SFC which can improve load performance.
-  if (!template.lang && !template.src) {
+  if ((!template.lang || template.lang === 'html') && !template.src) {
     return transformTemplateInMain(
       template.content,
       descriptor,

packages/plugin-vue/src/script.ts

@@ -105,7 +105,7 @@ export function canInlineMain(
     return false
   }
   const lang = descriptor.script?.lang || descriptor.scriptSetup?.lang
-  if (!lang) {
+  if (!lang || lang === 'js') {
     return true
   }
   if (lang === 'ts' && options.devServer) {

packages/plugin-vue/src/template.ts

@@ -176,7 +176,7 @@ export function resolveTemplateCompilerOptions(
     ssr,
     ssrCssVars: cssVars,
     transformAssetUrls,
-    preprocessLang: block.lang,
+    preprocessLang: block.lang === 'html' ? undefined : block.lang,
     preprocessOptions,
     compilerOptions: {
       ...options.template?.compilerOptions,

playground/vue/DefaultLangs.vue

@@ -0,0 +1,16 @@
+<template lang="html">
+  <h2>default langs</h2>
+  <div>
+    default lang: <span class="default-langs">{{ foo }}</span>
+  </div>
+</template>
+
+<script setup lang="js">
+const foo = 'foo'
+</script>
+
+<style scoped lang="css">
+.default-langs {
+  color: blue;
+}
+</style>

playground/vue/Main.vue

@@ -29,6 +29,7 @@
   <WorkerTest />
   <Url />
   <TsGeneric msg="hello" />
+  <DefaultLangs />
 </template>
 
 <script setup lang="ts">
@@ -52,6 +53,7 @@ import WorkerTest from './worker.vue'
 import { ref } from 'vue'
 import Url from './Url.vue'
 import TypeProps from './TypeProps.vue'
+import DefaultLangs from './DefaultLangs.vue'
 
 const TsGeneric = defineAsyncComponent(() => import('./TsGeneric.vue'))
 

playground/vue/__tests__/vue.spec.ts

@@ -337,3 +337,10 @@ describe('macro imported types', () => {
 test('TS with generics', async () => {
   expect(await page.textContent('.generic')).toMatch('hello')
 })
+
+describe('default langs', () => {
+  test('should work', async () => {
+    expect(await page.textContent('.default-langs')).toBe('foo')
+    expect(await getColor('.default-langs')).toBe('blue')
+  })
+})

playground/vue/tsconfig.json

@@ -3,6 +3,7 @@
     // esbuild transpile should ignore this
     "target": "ES5",
     "jsx": "preserve",
+    "allowJs": true,
     "paths": {
       "~utils": ["../test-utils.ts"],
       "~types": ["./types-aliased.d.ts"]