CompileTemplate generates a difference in the render function

[xjArea]

I tried compiling .vue files myself using compiler-sfc, I did succeed, but only for regular <script> tags, when I use <script setup>, the compiled render The function keeps reporting an error. I think it may be a problem with my parameter settings. The following two pieces of code are the results compiled by myself and compiled using Vite. It can be found that the parameters of the render function are different. Why is this so? , how should I set the parameters to be the same as the content compiled by Vite.

↓ This is the Counter.vue :

<template>
	<button type="button" @click="count++">{{ count }}</button>
</template>
<script setup>
import {ref, } from 'vue';
let count = ref(0);
</script>

↓ This is Vite compiled result, it has the $setup option, and it use $setup.count, it can run :

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("button", {
    type: "button",
    onClick: _cache[0] || (_cache[0] = $event => ($setup.count++))
  }, _toDisplayString($setup.count), 1 /* TEXT */))
}

↓ This is my compiled result, it use _ctx.count, has browser error : _ctx.count is undefined :

export function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("button", {
    type: "button",
    onClick: _cache[0] || (_cache[0] = $event => (_ctx.count++))
  }, _toDisplayString(_ctx.count), 1 /* TEXT */))
}

↓ This is the file I use to compile in NodeJS, my parameter settings are like this :

import n_fs from 'fs';
import n_url from 'url';
import n_path from 'path';

const __filename = n_url.fileURLToPath(import.meta.url);
const __dirname = n_path.dirname(__filename);

import * as m_compiler from '@vue/compiler-sfc';

// read .vue file
let filePath = n_path.resolve(__dirname, './Counter.vue');
let fileContent = n_fs.readFileSync(filePath, 'utf8');
let fileName = n_path.parse(filePath).name;

function transformVueSFC(source, filename){
	
	let {descriptor, errors, } = m_compiler.parse(source, {filename:filename, });
	if(errors.length !== 0){ throw new Error(errors.toString()) };
	let id = Math.random().toString(36).slice(2, 12);
	
	let hasScoped = descriptor.styles.some(function(e){ return e.scoped });
	let scopeId = hasScoped ? `data-v-${id}` : undefined;
	let templateOptions = {
		filename : descriptor.filename,
		id : id,
		scoped : hasScoped,
		slotted : descriptor.slotted,
		source : descriptor.template.content,
		compilerOptions : {
			scopeId : hasScoped ? scopeId : undefined,
			mode : 'module',
		},
	};
	
	let script = m_compiler.compileScript(descriptor, {id, templateOptions, sourceMap:true, });
	console.log(script.content);
	
	let template = m_compiler.compileTemplate({...templateOptions, sourceMap:true, });
	console.log(template.code);
	
};

transformVueSFC(fileContent, fileName);

I have been troubled by this problem for two days. I tried to find a way to solve it myself, but there is not much content related to the compiler. I have searched for a long time for the information but could not solve it. I have begun to despair. I really hope that someone can help me , thank you so much. 😭😭😭

[shenjunjian]

我也遇到一模一样的问题 // I had the same problem.

[shenjunjian]

在 @ShenQingchuan 的帮助下，解决了编译绑定变量的问题。比如下图：
With the help of @ShenQingchuan, the problem of compiling and binding variables is solved, as shown in the following figure.

使用 compileTemplate 编译模板时， 如何知道那3个变量到底来自于哪里呢？这3个变量的来源， 一定是通过 compileScript 时获取的。
When you compile a template using compileTemplate, how do you know where the three variables come from? The sources of the three variables must be obtained through compileScript.

code as below:

  const scripted= compiler.compileScript(......)

  const templated= compiler.compileTemplate( { ....,  compileOptions:{ inline:false,   bindingMetadata:   scripted.bindings }  }
// _________________________________________________________________________________________________________^^^^^^^^^^^^

通过compileOptions.bindingMetadata 属性，传入绑定元数据。
pass then bindingMetadata by compileOptions.bindingMetadata .