@joker.front/ast/README.md

### Overview

# Joker AST ![npm](https://img.shields.io/npm/v/%40joker.front%2Fast)![NPM Downloads](https://img.shields.io/npm/dw/%40joker.front%2Fast)

### 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](http://www.jokers.pub#/base/template). 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](http://www.jokers.pub#/base/component-property) 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:

```ts
// 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](http://www.jokers.pub)

[Help Documentation](http://front.jokers.pub)