fix(core): missing bindingMetadata in scriptSetup cache

Franck Freiburger · Franck Freiburger · commit a6d93fb60883 · 2024-01-16T15:53:41.000+01:00
diff --git a/src/createVue3SFCModule.ts b/src/createVue3SFCModule.ts
@@ -131,7 +131,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 
 		// TBD: handle <script setup src="...
 
-		const [depsList, transformedScriptSource] =
+		const [bindingMetadata, depsList, transformedScriptSource] =
 			await withCache(
 				compiledCache,
 				[
@@ -167,18 +167,17 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 				templateOptions: compileTemplateOptions,
 			});
 
-			// see https://github.com/vuejs/vue-loader/blob/12aaf2ea77add8654c50c8751bad135f1881e53f/src/templateLoader.ts#L54
-			if ( compileTemplateOptions?.compilerOptions !== undefined )
-				compileTemplateOptions.compilerOptions.bindingMetadata = scriptBlock.bindings;
-
-
 			// note:
 			//   scriptBlock.content is the script code after vue transformations
 			//   scriptBlock.scriptAst is the script AST before vue transformations
-			return await transformJSCode(scriptBlock.content, true, strFilename, [ ...contextBabelParserPlugins, ...additionalBabelParserPlugins ], { ...contextBabelPlugins, ...additionalBabelPlugins }, log, devMode);
+			return [scriptBlock.bindings, ...await transformJSCode(scriptBlock.content, true, strFilename, [ ...contextBabelParserPlugins, ...additionalBabelParserPlugins ], { ...contextBabelPlugins, ...additionalBabelPlugins }, log, devMode)];
 
 		});
 
+		// see https://github.com/vuejs/vue-loader/blob/12aaf2ea77add8654c50c8751bad135f1881e53f/src/templateLoader.ts#L54
+		if ( compileTemplateOptions?.compilerOptions !== undefined )
+			compileTemplateOptions.compilerOptions.bindingMetadata = bindingMetadata;
+
 		await loadDeps(filename, depsList, options);
 		Object.assign(component, interopRequireDefault(createCJSModule(filename, transformedScriptSource, options).exports).default);
 	}
@@ -196,6 +195,7 @@ export async function createSFCModule(source : string, filename : AbstractPath,
 					compileTemplateOptions.compilerOptions.delimiters,
 					compileTemplateOptions.compilerOptions.whitespace,
 					compileTemplateOptions.compilerOptions.scopeId,
+					compileTemplateOptions.compilerOptions.bindingMetadata ? Object.entries(compileTemplateOptions.compilerOptions.bindingMetadata) : '',
 				],
 				async ({ preventCache }) => {
 
diff --git a/tests/basic.test.js b/tests/basic.test.js
@@ -1198,7 +1198,77 @@ const { defaultFilesFactory, createPage } = require('./testsTools.js');
 			await expect(page.$eval('#app', el => el.textContent.trim())).resolves.toBe('hello');
 		});
 
-	});
 
+		if ( vueTarget === 3 ) { // 
+
+			test('fix bindingMetadata missing in cache data', async () => {
+
+				const { page, output } = await createPage({
+					files: {
+						...files,
+						'/index.html': `
+<!DOCTYPE html>
+<html><body>
+	<script src="vue"></script>
+	<script src="vue${ vueTarget }-sfc-loader.js"></script>
+	<div id="app"></div>
+	<script>
+
+	;(async () => {
+
+		const { loadModule } = window['vue3-sfc-loader'];
+
+		/* <!-- */
+		const config = {
+			files: {
+				'/comp.vue': '<template>comp_1</template>',
+				'/main.vue': '<script setup> import comp from "./comp.vue" </script><template>main_comp <comp/></template>',
+			}
+		};
+		/* --> */
+
+		const options = {
+			getFile: async url => config.files[url],
+			addStyle() {},
+		}
+
+		const cache = {}
+		const compiledCache = {
+			get: key => cache[key],
+			set: (key, value) => cache[key] = value,
+		}
+
+		let moduleCache = {
+			vue: Vue,
+		}
+
+		// first run
+		await loadModule('/main.vue', { moduleCache, compiledCache, ...options });
 
+		// second run, reset moduleCache
+		moduleCache = {
+			vue: Vue,
+		}
+
+		// get the cache item of the main.vue script (find "main_comp" string)
+		const mainKey = Object.entries(cache).find(([k,v]) => v.includes('main_comp')).at(0);
+		
+		// delete only main.vue script cache item
+		delete cache[mainKey];
+		
+		const app = Vue.createApp(await loadModule('/main.vue', { moduleCache, compiledCache, ...options }));
+
+		app.mount('#app');
+
+	})().catch(ex => console.error(ex));
+
+	</script>
+</body></html>
+					`}
+				});
+
+				await expect(page.$eval('#app', el => el.textContent.trim())).resolves.toBe('main_comp comp_1');
+			});
+		}
+	});
 })
