How to build a syntax tree
It’s often useful to build new (fragments of) syntax trees when adding or replacing content. It’s possible to create trees with plain object and array literals (JSON) or programmatically with a small utility. Finally it’s even possible to use JSX to build trees.
JSON
The most basic way to create a tree is with plain object and arrays. To prevent type errors, this can be checked with the types for the given syntax tree language, in this case mdast:
import type {Root} from 'mdast'
// Note the `: Root` is a TypeScript annotation.
// For plain JavaScript, remove it (and the import).
const mdast: Root = {
type: 'root',
children: [
{
type: 'paragraph',
children: [
{
type: 'text',
value: 'example'
}
]
}
]
}
(alias) interface Root
import Root
Document fragment or a whole document.
Should be used as the root of a tree and must not be used as a child.
(alias) interface Root
import Root
Document fragment or a whole document.
Should be used as the root of a tree and must not be used as a child.
(property) Root.type: "root"
(property) Parent.children: RootContent[]
(property) Paragraph.type: "paragraph"
Node type of mdast paragraph.
(property) Paragraph.children: PhrasingContent[]
(property) Text.type: "text"
(property) Literal.value: string
unist-builder
It’s also possible to build trees with unist-builder. It allows a more concise, “hyperscript” like syntax (which is also like React.createElement):
/**
* @import {Root} from 'mdast'
*/
import {u} from 'unist-builder'
/** @type {Root} */
const mdast = u('root', [
u('paragraph', [
u('text', 'example')
])
])
(alias) function u<T extends string, P extends Record<string, unknown>, C extends Node[]>(type: T): {
type: T;
} (+5 overloads)
import u
(alias) u<"root", Record<string, unknown>, {
type: "paragraph";
children: {
type: "text";
value: string;
}[];
}[]>(type: "root", children: {
type: "paragraph";
children: {
type: "text";
value: string;
}[];
}[]): {
...;
} (+5 overloads)
import u
(alias) u<"paragraph", Record<string, unknown>, {
type: "text";
value: string;
}[]>(type: "paragraph", children: {
type: "text";
value: string;
}[]): {
type: "paragraph";
children: {
type: "text";
value: string;
}[];
} (+5 overloads)
import u
(alias) u<"text", Record<string, unknown>, Node[]>(type: "text", value: string): {
type: "text";
value: string;
} (+5 overloads)
import u
hastscript
When working with hast (HTML), hastscript can be used.
import {h, s} from 'hastscript'
console.log(
h('div#some-id.foo', [
h('span', 'some text'),
h('input', {type: 'text', value: 'foo'}),
h('a.alpha.bravo.charlie', {download: true}, 'delta')
])
)
// SVG:
console.log(
s('svg', {viewBox: '0 0 500 500', xmlns: 'http://www.w3.org/2000/svg'}, [
s('title', 'SVG `<circle>` element'),
s('circle', {cx: 120, cy: 120, r: 100})
])
)
(alias) namespace h
(alias) const h: {
(selector?: null | undefined, ...children: Child[]): Root;
(selector: string, properties: Properties, ...children: Child[]): Element;
(selector: string, ...children: Child[]): Element;
}
import h
(alias) namespace s
(alias) const s: {
(selector?: null | undefined, ...children: Child[]): Root;
(selector: string, properties: Properties, ...children: Child[]): Element;
(selector: string, ...children: Child[]): Element;
}
import s
namespace console
var console: Console
The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
The module exports two specific components:
- A
Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. - A global
console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.
Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
(method) Console.log(message?: any, ...optionalParams: any[]): void
Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
(alias) h(selector: string, ...children: Child[]): Element (+2 overloads)
import h
Hyperscript compatible DSL for creating virtual hast trees.
- @overload
- @overload
- @overload
- @param selector Selector.
- @param properties Properties (or first child) (default:
undefined). - @param children Children.
- @returns Result.
(alias) h(selector: string, ...children: Child[]): Element (+2 overloads)
import h
Hyperscript compatible DSL for creating virtual hast trees.
- @overload
- @overload
- @overload
- @param selector Selector.
- @param properties Properties (or first child) (default:
undefined). - @param children Children.
- @returns Result.
(alias) h(selector: string, properties: Properties, ...children: Child[]): Element (+2 overloads)
import h
Hyperscript compatible DSL for creating virtual hast trees.
- @overload
- @overload
- @overload
- @param selector Selector.
- @param properties Properties (or first child) (default:
undefined). - @param children Children.
- @returns Result.
(alias) h(selector: string, properties: Properties, ...children: Child[]): Element (+2 overloads)
import h
Hyperscript compatible DSL for creating virtual hast trees.
- @overload
- @overload
- @overload
- @param selector Selector.
- @param properties Properties (or first child) (default:
undefined). - @param children Children.
- @returns Result.
(property) download: true
namespace console
var console: Console
The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
The module exports two specific components:
- A
Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. - A global
console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.
Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
(method) Console.log(message?: any, ...optionalParams: any[]): void
Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
(alias) s(selector: string, properties: Properties, ...children: Child[]): Element (+2 overloads)
import s
Hyperscript compatible DSL for creating virtual hast trees.
- @overload
- @overload
- @overload
- @param selector Selector.
- @param properties Properties (or first child) (default:
undefined). - @param children Children.
- @returns Result.
(property) viewBox: string
(alias) s(selector: string, ...children: Child[]): Element (+2 overloads)
import s
Hyperscript compatible DSL for creating virtual hast trees.
- @overload
- @overload
- @overload
- @param selector Selector.
- @param properties Properties (or first child) (default:
undefined). - @param children Children.
- @returns Result.
(alias) s(selector: string, properties: Properties, ...children: Child[]): Element (+2 overloads)
import s
Hyperscript compatible DSL for creating virtual hast trees.
- @overload
- @overload
- @overload
- @param selector Selector.
- @param properties Properties (or first child) (default:
undefined). - @param children Children.
- @returns Result.
hastscript can also be used as a JSX configuration comment:
/** @jsxImportSource hastscript */
console.log(
<form method="POST">
<input type="text" name="foo" />
<input type="text" name="bar" />
<input type="submit" name="send" />
</form>
)
namespace console
var console: Console
The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
The module exports two specific components:
- A
Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. - A global
console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.
Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
(method) Console.log(message?: any, ...optionalParams: any[]): void
Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
(index) IntrinsicElements[string]: any
(property) method: string
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
xastscript
When working with xast (XML), xastscript can be used.
import {x} from 'xastscript'
console.log(
x('album', {id: 123}, [
x('name', 'Exile in Guyville'),
x('artist', 'Liz Phair'),
x('releasedate', '1993-06-22')
])
)
(alias) function x(): Root (+3 overloads)
(alias) namespace x
import x
namespace console
var console: Console
The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
The module exports two specific components:
- A
Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. - A global
console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.
Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
(method) Console.log(message?: any, ...optionalParams: any[]): void
Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
(alias) x(name: string, attributes?: Attributes, ...children: Array<Child>): Element (+3 overloads)
import x
(alias) x(name: string, ...children: Array<Child>): Element (+3 overloads)
import x
(alias) x(name: string, ...children: Array<Child>): Element (+3 overloads)
import x
(alias) x(name: string, ...children: Array<Child>): Element (+3 overloads)
import x
xastscript can also be used as a JSX configuration comment:
/** @jsxImportSource xastscript */
console.log(
<album id={123}>
<name>Born in the U.S.A.</name>
<artist>Bruce Springsteen</artist>
<releasedate>1984-04-06</releasedate>
</album>
)
namespace console
var console: Console
The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
The module exports two specific components:
- A
Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. - A global
console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.
Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
(method) Console.log(message?: any, ...optionalParams: any[]): void
Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any
(index) IntrinsicElements[string]: any