wip(core): add buildTemplateProcessor function (closes #35)

Author: FranckFreiburger

src/index.ts

@@ -3,7 +3,7 @@ import { posix as Path } from 'path'
 import { createJSModule, loadModuleInternal } from './tools'
 import { createSFCModule } from './createSFCModule'
 
-import { ModuleExport, ModuleHandler, PathHandlers, Options, File, Resource, PathContext } from './types'
+import { ModuleExport, ModuleHandler, PathHandlers, Options, File, Resource, PathContext, LangProcessor } from './types'
 
 /**
  * the version of the library (process.env.VERSION is set by webpack, at compile-time)
@@ -138,3 +138,28 @@ export async function loadModule(path : string, options_ : Options = throwNotDef
 
 	return await loadModuleInternal( { refPath: '/', relPath: path }, options);
 }
+
+/**
+ * Convert a function to template processor interface (consolidate)
+ */
+ export function buildTemplateProcessor(processor: LangProcessor) {
+	return {
+		render: (source: string, preprocessOptions: string, cb: (_err : any, _res : any) => void) => {
+			try {
+				const ret = processor(source, preprocessOptions)
+				if (typeof ret === 'string') {
+					cb(null, ret)
+				} else {
+					ret.then(processed => {
+						cb(null, processed)
+					})
+					ret.catch(err => {
+						cb(err, null)
+					})
+				}
+			} catch (err) {
+				cb(err, null)
+			}
+		}
+	}
+}

src/types.ts

@@ -363,3 +363,6 @@ export type Options = {
  	customBlockHandler?(block : CustomBlock, filename : string, options : Options) : Promise<CustomBlockCallback | undefined>,
 
 }
+
+
+export type LangProcessor = (source: string, preprocessOptions?: any) => Promise<string> | string

tests/basic.test.js

@@ -520,6 +520,62 @@ const { defaultFilesFactory, createPage } = require('./testsTools.js');
 		});
 
 
+		test('custom template language with sync buildTemplateProcessor (sync)', async () => {
+			const { page, output } = await createPage({
+				files: {
+					...files,
+					'/component.vue': `
+						<template lang="custom">
+							<span>Hello World !</span>
+						</template>
+					`,
+					'/optionsOverride.js': `
+						const { buildTemplateProcessor } = window['vue${ vueTarget }-sfc-loader'];
+					
+						export default (options) => {
+							options.moduleCache.custom = buildTemplateProcessor(s => s.replace("Hello World !", "Custom Hello World !"))
+						};
+					`,
+				}
+			});
+
+			await expect(page.$eval('#app', el => el.textContent.trim())).resolves.toBe('Custom Hello World !');
+
+			await page.close();
+		});
+
+
+		if ( vueTarget !== 3 ) {
+
+			// Vue3 doesn't support async template engine
+			// https://github.com/vuejs/vue-next/blob/1fb6fbc8b8c8225441fb23918f128f7994c365ca/packages/compiler-sfc/src/compileTemplate.ts#L82-L85
+			test('custom template language with buildTemplateProcessor (async)', async () => {
+				const { page, output } = await createPage({
+					files: {
+						...files,
+						'/component.vue': `
+							<template lang="custom">
+								<span>Hello World !</span>
+							</template>
+						`,
+						'/optionsOverride.js': `
+							const { buildTemplateProcessor } = window['vue${ vueTarget }-sfc-loader'];
+						
+							export default (options) => {
+								options.moduleCache.custom = buildTemplateProcessor(s => new Promise((resolve, reject) => {
+									resolve(s.replace("Hello World !", "Custom Hello World !"))
+							}))};
+						`,
+					}
+				});
+
+				await expect(page.$eval('#app', el => el.textContent.trim())).resolves.toBe('Custom Hello World !');
+
+				await page.close();
+			});
+		}
+
+
 		test('custom style language', async () => {
 			const { page, output } = await createPage({
 				files: {