Template AST Helpers

A collection of utility functions for Vue template AST traversal, transformation, assertion and creation.

## Support This package is part of [VueDX project](https://github.com/znck/vue-developer-experience), maintained by [Rahul Kadyan](https://github.com/znck). You can [💖 sponsor him](https://github.com/sponsors/znck) for continued development of this package and other VueDX tools. ## Usage ``` npm add @vuedx/template-ast-types ``` ## API ### [createSimpleExpression](#-vuedx-template-ast-types-createSimpleExpression-function-1-) Create AST Node
More info **Signature:** ```ts declare function createSimpleExpression(content: SimpleExpressionNode['content'], isStatic: SimpleExpressionNode['isStatic'], loc?: SourceLocation, isConstant?: boolean): SimpleExpressionNode; ``` | Parameter | Type | Description | | --- | --- | --- | | content | SimpleExpressionNode['content'] | - | | isStatic | SimpleExpressionNode['isStatic'] | - | | loc | SourceLocation | - | | isConstant | boolean | - |

### [findParentNode](#-vuedx-template-ast-types-findParentNode-function-1-) Find the parent element node.
More info **Signature:** ```ts declare function findParentNode(ast: RootNode, node: Node): ElementNode | undefined; ``` | Parameter | Type | Description | | --- | --- | --- | | ast | RootNode | - | | node | Node | - |

### [findTemplateChildNodeAt](#-vuedx-template-ast-types-findTemplateChildNodeAt-function-1-) Find a child (element, component, text, interpolation, or comment) node containing the given position.
More info **Signature:** ```ts declare function findTemplateChildNodeAt(ast: RootNode, position: number, mode?: 'start' | 'end'): SearchResult; ``` | Parameter | Type | Description | | --- | --- | --- | | ast | RootNode | - | | position | number | - | | mode | 'start' | 'end' | Open/close range comparison mode: • undefined - position in [start, end] • 'start' — position in [start, end) • 'end' - position in (start, end] |

### [findTemplateChildrenInRange](#-vuedx-template-ast-types-findTemplateChildrenInRange-function-1-) Get all child (element, component, text, interpolation, or comment) nodes contained in given range. (partial overlaps are ignored)
More info **Signature:** ```ts declare function findTemplateChildrenInRange(ast: RootNode, start: number, end: number): Node[]; ``` | Parameter | Type | Description | | --- | --- | --- | | ast | RootNode | - | | start | number | - | | end | number | - |

### [findTemplateNodeAt](#-vuedx-template-ast-types-findTemplateNodeAt-function-1-) Find the deepest node containing the given position.
More info **Signature:** ```ts declare function findTemplateNodeAt(ast: RootNode, position: number): SearchResult; ``` | Parameter | Type | Description | | --- | --- | --- | | ast | RootNode | - | | position | number | - |

### [findTemplateNodeInRange](#-vuedx-template-ast-types-findTemplateNodeInRange-function-1-) Find the deepest node containing the given position.
More info **Signature:** ```ts declare function findTemplateNodeInRange(ast: RootNode, start: number, end: number, mode?: 'start' | 'end'): SearchResult; ``` | Parameter | Type | Description | | --- | --- | --- | | ast | RootNode | - | | start | number | - | | end | number | - | | mode | 'start' | 'end' | Open/close range comparison mode: • undefined - position in [start, end] • 'start' — position in [start, end) • 'end' - position in (start, end] |

### [findTemplateNodesInRange](#-vuedx-template-ast-types-findTemplateNodesInRange-function-1-) Get all nodes contained in given range. (partial overlaps are ignored)
More info **Signature:** ```ts declare function findTemplateNodesInRange(ast: RootNode, start: number, end: number): Node[]; ``` | Parameter | Type | Description | | --- | --- | --- | | ast | RootNode | - | | start | number | - | | end | number | - |

### [isAttributeNode](#-vuedx-template-ast-types-isAttributeNode-function-1-) Checks if it is an AST AttributeNode.
More info **Signature:** ```ts declare function isAttributeNode(node: unknown): node is AttributeNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isCommentNode](#-vuedx-template-ast-types-isCommentNode-function-1-) Checks if it is an AST CommentNode.
More info **Signature:** ```ts declare function isCommentNode(node: unknown): node is CommentNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isComponentNode](#-vuedx-template-ast-types-isComponentNode-function-1-) Checks if it is an AST ComponentNode.
More info **Signature:** ```ts declare function isComponentNode(node: unknown): node is ComponentNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isDirectiveNode](#-vuedx-template-ast-types-isDirectiveNode-function-1-) Checks if it is an AST DirectiveNode.
More info **Signature:** ```ts declare function isDirectiveNode(node: unknown): node is DirectiveNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isElementNode](#-vuedx-template-ast-types-isElementNode-function-1-) Checks if it is an AST ElementNode.
More info **Signature:** ```ts declare function isElementNode(node: unknown): node is ElementNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isInterpolationNode](#-vuedx-template-ast-types-isInterpolationNode-function-1-) Checks if it is an AST InterpolationNode.
More info **Signature:** ```ts declare function isInterpolationNode(node: unknown): node is InterpolationNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isNode](#-vuedx-template-ast-types-isNode-function-1-) Checks if it is Vue template AST Node.
More info **Signature:** ```ts declare function isNode(node: unknown): node is Node; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isPlainElementNode](#-vuedx-template-ast-types-isPlainElementNode-function-1-) Checks if it is an AST PlainElementNode.
More info **Signature:** ```ts declare function isPlainElementNode(node: unknown): node is PlainElementNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isRootNode](#-vuedx-template-ast-types-isRootNode-function-1-) Checks if it is an AST RootNode.
More info **Signature:** ```ts declare function isRootNode(node: unknown): node is RootNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isSimpleExpressionNode](#-vuedx-template-ast-types-isSimpleExpressionNode-function-1-) Checks if it is an AST ExpressionNode.
More info **Signature:** ```ts declare function isSimpleExpressionNode(node: unknown): node is SimpleExpressionNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isSimpleIdentifier](#-vuedx-template-ast-types-isSimpleIdentifier-function-1-) Checks if it is a valid JavaScript identifers.
More info **Signature:** ```ts declare function isSimpleIdentifier(content: string): boolean; ``` | Parameter | Type | Description | | --- | --- | --- | | content | string | - |

### [isTemplateNode](#-vuedx-template-ast-types-isTemplateNode-function-1-) Checks if it is an AST TemplateNode.
More info **Signature:** ```ts declare function isTemplateNode(node: unknown): node is TemplateNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [isTextNode](#-vuedx-template-ast-types-isTextNode-function-1-) Checks if it is an AST TextNode.
More info **Signature:** ```ts declare function isTextNode(node: unknown): node is TextNode; ``` | Parameter | Type | Description | | --- | --- | --- | | node | unknown | - |

### [stringify](#-vuedx-template-ast-types-stringify-function-1-) Convert template AST to template code.
More info **Signature:** ```ts declare function stringify(node: Node | Node[], options?: Partial): string; ``` | Parameter | Type | Description | | --- | --- | --- | | node | Node | Node[] | - | | options | Partial<StringifyOptions> | - |

### [traverse](#-vuedx-template-ast-types-traverse-function-1-) A general AST traversal utility with both prefix and postfix handlers, and a state object. Exposes ancestry data to each handler so that more complex AST data can be taken into account.
More info **Signature:** ```ts declare function traverse(node: Node, handlers: TraversalHandler | TraversalHandlers, state?: T): void; ``` | Parameter | Type | Description | | --- | --- | --- | | node | Node | - | | handlers | TraversalHandler | TraversalHandlers | - | | state | T | - |

### [traverseEvery](#-vuedx-template-ast-types-traverseEvery-function-1-) An abortable AST traversal utility. Return false (or falsy value) to stop traversal.
More info **Signature:** ```ts declare function traverseEvery(node: Node, enter: (node: Node, ancestors: TraversalAncestors, state: T) => boolean, state?: any, ancestors?: TraversalAncestors): void; ``` | Parameter | Type | Description | | --- | --- | --- | | node | Node | - | | enter | (node: Node, ancestors: TraversalAncestors, state: T) => boolean | - | | state | any | - | | ancestors | TraversalAncestors | - |

### [traverseFast](#-vuedx-template-ast-types-traverseFast-function-1-) A faster AST traversal utility. It behaves same as [traverse()] but there is no ancestory data.
More info **Signature:** ```ts declare function traverseFast(node: object, enter: (node: Node, state: T, stop: () => void) => void, state?: T): void; ``` | Parameter | Type | Description | | --- | --- | --- | | node | object | - | | enter | (node: Node, state: T, stop: () => void) => void | - | | state | T | - |

## Types ### [SearchResult](#-vuedx-template-ast-types-SearchResult-interface) ```ts interface SearchResult { ancestors: TraversalAncestors; node: Node | null; } ```
### [StringifyOptions](#-vuedx-template-ast-types-StringifyOptions-interface) ```ts interface StringifyOptions { directive: 'shorthand' | 'longhand'; indent: number; initialIndent: number; replaceNodes: Map; } ```
### [TraversalHandlers](#-vuedx-template-ast-types-TraversalHandlers-interface) ```ts interface TraversalHandlers { enter?: TraversalHandler; exit?: TraversalHandler; } ```