fix(vue3): <script setup> use bindingMetadata instead of inlineTemplate

Author: FranckFreiburger

src/createVue3SFCModule.ts

@@ -143,10 +143,14 @@ export async function createSFCModule(source : string, filename : string, option
 				babelParserPlugins,
 				// doc: https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#inline-template-mode
 				// vue-loader next : https://github.com/vuejs/vue-loader/blob/12aaf2ea77add8654c50c8751bad135f1881e53f/src/resolveScript.ts#L59
-				inlineTemplate: true,
+				inlineTemplate: false,
 				templateOptions: compileTemplateOptions,
 			});
 
+			// see https://github.com/vuejs/vue-loader/blob/12aaf2ea77add8654c50c8751bad135f1881e53f/src/templateLoader.ts#L54
+			if ( compileTemplateOptions !== null )
+				compileTemplateOptions.compilerOptions.bindingMetadata = scriptBlock.bindings;
+
 			let ast;
 			if ( true /*!scriptBlock.scriptAst*/ ) {
 
@@ -183,7 +187,6 @@ export async function createSFCModule(source : string, filename : string, option
 				ast = t.file(t.program(scriptBlock.scriptAst, [], 'module'));
 			}
 
-
 			renameDynamicImport(ast);
 			const depsList = parseDeps(ast);
 

tests/basic.test.js

@@ -875,8 +875,31 @@ const { defaultFilesFactory, createPage } = require('./testsTools.js');
 			await expect(versions[0]).toBe(versions[1]);
 		});
 
+		if ( vueTarget === 3 ) { // Vue 3 does not have <script setup>
+		
+			test('should properly handle components in <script setup>', async () => {
 
+				const { page, output } = await createPage({
+					files: {
+						...files,
+						'/component.vue': `
+							<template>a<comp/>e</template>
+							<script setup>
+								import comp from "./comp.vue";
+							</script>
+						`,
+						'/comp.vue': `
+							<template>b{{ foo }}d</template>
+							<script setup>
+								const foo = 'c'
+							</script>
+						`,
+					}
+				});
 
+				await expect(page.$eval('#app', el => el.textContent.trim())).resolves.toBe('abcde');
+			});
+		}
 
 	});