@vuedx/template-ast-types

Template AST Helpers

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

Usage

npm add @vuedx/template-ast-types

API

createSimpleExpression

Create AST Node

More info

Signature:

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

Find the parent element node.

More info

Signature:

declare function findParentNode(
  ast: RootNode,
  node: Node,
): ElementNode | undefined

Parameter	Type	Description
ast	RootNode	-
node	Node	-

findTemplateChildNodeAt

Find a child (element, component, text, interpolation, or comment) node containing the given position.

More info

Signature:

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

Get all child (element, component, text, interpolation, or comment) nodes contained in given range. (partial overlaps are ignored)

More info

Signature:

declare function findTemplateChildrenInRange(
  ast: RootNode,
  start: number,
  end: number,
): Node[]

Parameter	Type	Description
ast	RootNode	-
start	number	-
end	number	-

findTemplateNodeAt

Find the deepest node containing the given position.

More info

Signature:

declare function findTemplateNodeAt(
  ast: RootNode,
  position: number,
): SearchResult

Parameter	Type	Description
ast	RootNode	-
position	number	-

findTemplateNodeInRange

Find the deepest node containing the given position.

More info

Signature:

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

Get all nodes contained in given range. (partial overlaps are ignored)

More info

Signature:

declare function findTemplateNodesInRange(
  ast: RootNode,
  start: number,
  end: number,
): Node[]

Parameter	Type	Description
ast	RootNode	-
start	number	-
end	number	-

isAttributeNode

Checks if it is an AST AttributeNode.

More info

Signature:

declare function isAttributeNode(node: unknown): node is AttributeNode

Parameter	Type	Description
node	unknown	-

isCommentNode

Checks if it is an AST CommentNode.

More info

Signature:

declare function isCommentNode(node: unknown): node is CommentNode

Parameter	Type	Description
node	unknown	-

isComponentNode

Checks if it is an AST ComponentNode.

More info

Signature:

declare function isComponentNode(node: unknown): node is ComponentNode

Parameter	Type	Description
node	unknown	-

isDirectiveNode

Checks if it is an AST DirectiveNode.

More info

Signature:

declare function isDirectiveNode(node: unknown): node is DirectiveNode

Parameter	Type	Description
node	unknown	-

isElementNode

Checks if it is an AST ElementNode.

More info

Signature:

declare function isElementNode(node: unknown): node is ElementNode

Parameter	Type	Description
node	unknown	-

isInterpolationNode

Checks if it is an AST InterpolationNode.

More info

Signature:

declare function isInterpolationNode(node: unknown): node is InterpolationNode

Parameter	Type	Description
node	unknown	-

isNode

Checks if it is Vue template AST Node.

More info

Signature:

declare function isNode(node: unknown): node is Node

Parameter	Type	Description
node	unknown	-

isPlainElementNode

Checks if it is an AST PlainElementNode.

More info

Signature:

declare function isPlainElementNode(node: unknown): node is PlainElementNode

Parameter	Type	Description
node	unknown	-

isRootNode

Checks if it is an AST RootNode.

More info

Signature:

declare function isRootNode(node: unknown): node is RootNode

Parameter	Type	Description
node	unknown	-

isSimpleExpressionNode

Checks if it is an AST ExpressionNode.

More info

Signature:

declare function isSimpleExpressionNode(
  node: unknown,
): node is SimpleExpressionNode

Parameter	Type	Description
node	unknown	-

isSimpleIdentifier

Checks if it is a valid JavaScript identifers.

More info

Signature:

declare function isSimpleIdentifier(content: string): boolean

Parameter	Type	Description
content	string	-

isTemplateNode

Checks if it is an AST TemplateNode.

More info

Signature:

declare function isTemplateNode(node: unknown): node is TemplateNode

Parameter	Type	Description
node	unknown	-

isTextNode

Checks if it is an AST TextNode.

More info

Signature:

declare function isTextNode(node: unknown): node is TextNode

Parameter	Type	Description
node	unknown	-

stringify

Convert template AST to template code.

More info

Signature:

declare function stringify(
  node: Node | Node[],
  options?: Partial<StringifyOptions>,
): string

Parameter	Type	Description
node	Node | Node[]	-
options	Partial<StringifyOptions>	-

traverse

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:

declare function traverse<T>(
  node: Node,
  handlers: TraversalHandler<T> | TraversalHandlers<T>,
  state?: T,
): void

Parameter	Type	Description
node	Node	-
handlers	TraversalHandler | TraversalHandlers	-
state	T	-

traverseEvery

An abortable AST traversal utility. Return false (or falsy value) to stop traversal.

More info

Signature:

declare function traverseEvery<T>(
  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

A faster AST traversal utility. It behaves same as [traverse()] but there is no ancestory data.

More info

Signature:

declare function traverseFast<T = any>(
  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

interface SearchResult {
  ancestors: TraversalAncestors
  node: Node | null
}

StringifyOptions

interface StringifyOptions {
  directive: 'shorthand' | 'longhand'
  indent: number
  initialIndent: number
  replaceNodes: Map<Node, Node | null>
}

TraversalHandlers

interface TraversalHandlers<T> {
  enter?: TraversalHandler<T>
  exit?: TraversalHandler<T>
}

Support

This package is part of VueDX project, maintained by Rahul Kadyan. You can 💖 sponsor him for continued development of this package and other VueDX tools.