On This Page
Constructor
Methods
Server Side Compilations
The TemplateCompiler class is responsible for compiling template strings into an Abstract Syntax Tree (AST). This precompilation step enables efficient rendering and updates, especially useful for server-side rendering (SSR) and advanced use cases.
Constructor
Syntax
new TemplateCompiler(templateString)Parameters
| Name | Type | Description |
|---|---|---|
| templateString | string | The template string to compile |
Usage
import { TemplateCompiler } from '@semantic-ui/compiler';
const compiler = new TemplateCompiler('<div>{{name}}</div>');Methods
compile
Compiles the template string into an Abstract Syntax Tree (AST). By default the compiler condenses template whitespace: cross-line whitespace between tag or block boundaries is removed and other runs collapse to a single space. Same-line spacing is preserved.
Syntax
compiler.compile(templateString, options)Parameters
| Name | Type | Description |
|---|---|---|
| templateString | string | Template to compile. Defaults to the constructor string |
| options | Object | Compile options |
Options
| Name | Type | Description |
|---|---|---|
| preserveWhitespace | boolean | Skip whitespace condensing |
| includePositions | boolean | Add start/end source offsets to AST nodes. Skips condensing |
| recoverable | boolean | Collect errors on compiler.errors instead of throwing. Skips condensing |
Returns
Object[] - The compiled AST representation of the template.
Usage
const ast = compiler.compile();console.log(ast);parseTemplateString
Parses a template string, typically used for partial templates or snippets.
Syntax
TemplateCompiler.parseTemplateString(expression)Parameters
| Name | Type | Description |
|---|---|---|
| expression | string | The template string to parse |
Returns
Object - An object containing parsed template information.
Usage
const templateInfo = TemplateCompiler.parseTemplateString('{{> partialName data1=value1 data2=value2}}');console.log(templateInfo);detectSyntax
Detects whether the template uses single {} or double {{}} bracket syntax.
Syntax
TemplateCompiler.detectSyntax(templateString)Parameters
| Name | Type | Description |
|---|---|---|
| templateString | string | The template string to analyze |
Returns
string - Either 'singleBracket' or 'doubleBracket'.
Usage
const syntax = TemplateCompiler.detectSyntax('{{name}}');console.log(syntax); // 'doubleBracket'preprocessTemplate
Preprocesses the template string, handling special cases like self-closing web component tags.
Syntax
TemplateCompiler.preprocessTemplate(templateString)Parameters
| Name | Type | Description |
|---|---|---|
| templateString | string | The template string to preprocess |
Returns
string - The preprocessed template string.
Usage
const processed = TemplateCompiler.preprocessTemplate('<ui-icon icon="foo" />');console.log(processed); // '<ui-icon icon="foo"></ui-icon>'optimizeAST
Optimizes the compiled AST by joining neighboring HTML nodes and hoisting snippet definitions.
Syntax
TemplateCompiler.optimizeAST(ast, options)Parameters
| Name | Type | Description |
|---|---|---|
| ast | Object[] | The AST to optimize |
| options | Object | { condense } runs the whitespace condensing pass |
Returns
Object[] - The optimized AST.
Usage
const optimizedAST = TemplateCompiler.optimizeAST(ast);Server Side Compilations
You can precompile your templates on the server then load them on the client using modern build tooling like esbuild or rollup and JSON imports.
Server
On the server we want to render our templates to an AST.
import { TemplateCompiler } from '@semantic-ui/compiler';import fs from 'fs/promises';import path from 'path';import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
async function precompileTemplates(templateName) { const templatePath = path.join(__dirname, 'templates', `${templateName}.html`); const outputPath = path.join(__dirname, 'ast', `${templateName}.json`);
const template = await fs.readFile(templatePath, 'utf-8'); const compiler = new TemplateCompiler(template); const ast = compiler.compile();
await fs.writeFile(outputPath, JSON.stringify(ast, null, 2));}// somewhere elseprecompileTemplates('user-profile');Client
Then on the client we can import that files directly as JSON file directly and pass as the ast parameter in defineComponent.
import { defineComponent } from '@semantic-ui/component';import ast from './ast/user-profile.json' assert { type: 'json' };
export function defineUserProfile() { defineComponent({ tagName: 'user-profile', ast, // rest of component });}