I'm at my wits end, how to compilerOptions plugin to get full typescript features on a custom SFC block?

[josh-hemphill]

I followed the now outdated Hebilicious/server-block-nuxt, and couldn't seem to get it working. Then tried using unique naming for the custom blocks, which didn't help, and poured over the VueSFC parsing, and found that identical names seem to overwrite each other, though when using the Volar Labs extension to inspect it, both are there but show up with the same name and create a jumbled virtual file...
I've mixed and matched the settings I can think of, to no avail.

So now I'm here; anyone have any idea how to get this working?

It's a small file, so I'll drop it here:

volar-plugin-sfc-custom-block.cjs

/** @type {import("@vue/language-core").VueLanguagePlugin} */
function plugin() {
	const importQueryConfig = null;// new URL(import.meta.url || 'http://none.org').searchParams.get('block-name');
	return {
		name: 'sfc-server-volar',
		version: 2.1,
		getEmbeddedCodes(fileName, sfc) {
			return sfc.customBlocks
				.flatMap((customBlock, i) => customBlock.type === 'server'
					? [{
							id: `native_block_${i}`,
							lang: customBlock.lang || 'ts',
						}]
					: []);
		},
		resolveEmbeddedCode(fileName, sfc, embeddedFile) {
			if (embeddedFile.id.startsWith('native_block_')
				&& embeddedFile.lang === 'ts') {
				console.log(sfc.customBlocks.map(({ name, type, lang }) => ({ name, type, lang })));
				for (const block of sfc.customBlocks) {
					if (block.type === 'server') {
						embeddedFile?.content?.push([
							block.content, // text to add
							block.name, // source
							0, // content offset in source
							{
								completion: true,
								format: true,
								navigation: true,
								semantic: true,
								structure: true,
								verification: true,
							},
						]);
					}
				}
			}
			else if (embeddedFile.id.startsWith('custom_block_')) {
				// Maybe clean up the internal custom block that overlaps
			}
		},
	};
}

module.exports = plugin;

[johnsoncodehk]

Due to limitations of TS server, it is not possible to enable semantic features in an additional virtual TS file, you can only merge the content of the custom block into script_ts to get TS support.

I am not quite sure what the expected behavior of this plugin in the server block is for you, if the behavior of this plugin is unexpected, providing an example repo would be helpful.

/** @type {import("@vue/language-core").VueLanguagePlugin} */
function plugin() {
	const importQueryConfig = null;// new URL(import.meta.url || 'http://none.org').searchParams.get('block-name');
	return {
		name: 'sfc-server-volar',
		version: 2.1,
		resolveEmbeddedCode(fileName, sfc, embeddedFile) {
			if (/script_(js|jsx|ts|tsx)/.test(embeddedFile.id)) {
				console.log(sfc.customBlocks.map(({ name, type, lang }) => ({ name, type, lang })));
				for (const block of sfc.customBlocks) {
					if (block.type === 'server') {
						embeddedFile?.content?.push([
							block.content, // text to add
							block.name, // source
							0, // content offset in source
							{
								completion: true,
								// format: true,
								navigation: true,
								semantic: true,
								// structure: true,
								verification: true,
							},
						]);
					}
				}
			}
			else if (embeddedFile.id.startsWith('custom_block_')) {
				// Maybe clean up the internal custom block that overlaps
			}
		},
	};
}

module.exports = plugin;