How to use @lwc/template-compiler - 4 common examples

function compileTemplate(source, config = {}) {
    const { modules = {} } = config;

    // Check if the same template has already been compiled
    if (!(source in TEMPLATE_CACHE)) {
        TEMPLATE_CACHE[source] = compileToFunction(source);
    }

    const templateFactory = TEMPLATE_CACHE[source];
    return registerTemplate(templateFactory(modules));
}

export default function templateTransform(
    src: string,
    filename: string,
    options: NormalizedTransformOptions
): FileTransformerResult {
    let result;

    try {
        result = compile(src, {
            experimentalDynamicDirective: !!options.experimentalDynamicComponent,
        });
    } catch (e) {
        throw normalizeToCompilerError(TransformerErrors.HTML_TRANSFORMER_ERROR, e, { filename });
    }

    const fatalError = result.warnings.find(warning => warning.level === DiagnosticLevel.Error);
    if (fatalError) {
        throw CompilerError.from(fatalError, { filename });
    }

    // Rollup only cares about the mappings property on the map. Since producing a source map for
    // the template doesn't make sense, the transform returns an empty mappings.
    return {
        code: serialize(result.code, filename, options),
        map: { mappings: '' },

export default function templateTransform(
    src: string,
    filename: string,
    options: NormalizedCompilerOptions
): FileTransformerResult {
    let result;

    try {
        result = compile(src, {
            experimentalDynamicDirective: !!options.experimentalDynamicComponent,
        });
    } catch (e) {
        throw normalizeToCompilerError(TransformerErrors.HTML_TRANSFORMER_ERROR, e, { filename });
    }

    const fatalError = result.warnings.find(warning => warning.level === DiagnosticLevel.Error);
    if (fatalError) {
        throw CompilerError.from(fatalError, { filename });
    }

    // Rollup only cares about the mappings property on the map. Since producing a source map for
    // the template doesn't make sense, the transform returns an empty mappings.
    return {
        code: serialize(result.code, filename, options),
        map: { mappings: '' },

export default function lint(document: TextDocument): Diagnostic[] {
    const source = document.getText();
    const { warnings } = templateCompiler(source, {});

    return warnings.map(warning => {
        const { start = 0, length = 0 } = warning.location || { start: 0, length: 0 };

        return {
            range: toRange(document, start, length),
            message: warning.message,
            severity: LEVEL_MAPPING.get(warning.level),
            source: DIAGNOSTIC_SOURCE,
        };
    });
}