Enter a search term above to see results...
On This Page
Abstract Syntax Tree (AST)
The Abstract Syntax Tree (AST) is a representation of your template that is used by a rendering pipeline to generate your component.
Overview
When the TemplateCompiler
compiles a template string, it generates an AST. This intermediate representation serves several purposes:
- Can be used to precompile templates for use with SSR.
- Allows for render immutability if templating syntax is adjusted
- Can be used in development to debug issues with templates
- Can be used to render an AST to different rendering pipelines outside of default Lit rendering engine.
AST Node Types
The AST consists of various node types, each representing a specific element or control structure in the template. Below are the main types of nodes you’ll encounter in the AST:
HTML
Represents static HTML content.
Example
Expression
Represents a dynamic expression to be evaluated.
Example
If Conditional
Represents an if/else if/else control structure.
Example
Each Loop
Represents a loop structure for iterating over arrays or objects.
Example
Template
Represents a nested template or partial.
Example
Snippet
Represents a reusable template snippet.
Example
Slot
Represents a slot for content projection in web components.
Example
SVG
Represents SVG content, which may require special handling during rendering.
Example
Rendering Engines
Semantic UI ships with a Lit rendering engine, but Semantic UI templates can hypothetically be used with any custom renderering engine that supports dynamic expressions.
For example, a basic renderer might:
- Render ‘html’ nodes directly
- Evaluate and insert the results of ‘expression’ nodes
- Conditionally render the content of ‘if’ nodes based on the condition
- Iterate over the ‘over’ property for ‘each’ nodes, rendering the content for each iteration
- Recursively render nested templates and snippets
By working with this AST structure, you can create highly optimized and flexible rendering systems that suit your specific needs while leveraging the powerful parsing capabilities of the Semantic UI Templating system.