Joker AST

Overview

The AST (Abstract Syntax Tree) is the structured data for templates in Joker. It is ultimately combined with component instances to render virtual nodes, which are then rendered onto the corresponding platform.

There are two sources for AST:

• Single File Components (SFCs): Written within the <template> tag of an SFC. Follow the syntax rules outlined in the Template Guide. These templates are converted into AST.Node[] via the CLI.
• JavaScript API: Using methods like createText and createCommand provided by the Joker Core to programmatically generate AST.Node[] in JavaScript. Assign the result to the template property of a component. Refer to the Component Properties documentation for details on the template property.

Both methods produce AST.Node[]. The AST.Node is the base class for all AST nodes and is categorized into four types based on functionality: Text, Element, Comment, and Component. The base AST.Node class has the following properties:

| Property | Description | Type | | --------- | ----------- | ---------- | | childrens | Child nodes | AST.Node[] | | type | Node type | NodeType |

Determine the specific type of an AST.Node by checking its type property against the NodeType enum:

// This enum is available as AST.NodeType
export enum NodeType {
    TEXT, // Text
    COMMENT, // Comment
    ELEMENT, // HTML Element
    COMMAND, // Directive
    COMPONENT // Dynamic Component
}

// Example usage:
item.type === AST.NodeType.COMMENT;

Documentation

Official Website

Help Documentation