Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
Constructor
Methods
Server Side Compilations
TemplateCompiler
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/templating';
const compiler = new TemplateCompiler('<div>{{name}}</div>');Methods
compile
Compiles the template string into an Abstract Syntax Tree (AST).
Syntax
compiler.compile()Returns
Object - The compiled [AST]](/api/templating/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.
Syntax
TemplateCompiler.optimizeAST(ast)Parameters
| Name | Type | Description |
|---|---|---|
| ast | Object[] | The AST to optimize |
Returns
Object[] - The optimized AST.
Usage
const optimizedAST = TemplateCompiler.optimizeAST(ast);Server Side Compilations
You can precompile your templates on the serve 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/templating';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 });}