How does it work?
- unified uses unist, (Universal Syntax Tree) which is an AST specification so that utilities can be shared amongst all different formats
- supported syntaxes: remarkjs, HTML, retext, MDX.
Abstract syntax trees
- integral structure on unified
- most plugins operate solely on ASTs.
- almost all plugins receive ast as input, transforms it and return another ast.
Constructing an AST
- Parsers: takes a string and tokenizes depend on its syntax. it return nodes
- unified takes an input string and with a tokenizer and a lever, transforms it to a structured ast.
1[INPUT] => [TOKENIZER/LEXER] => [PARSER] => [AST]
- Compiler: turns AST into output (usually string)
- a compiler does the opposite, turns an ast into an string output.
1[AST] => [COMPILER] => [OUTPUT]
- all ASTs in unified conform to the unist spec!!
- this is the way unified makes it simpler to developer use their tools, and ensure there’s no extra overhead when working with multiple plugins/utilities
- “visiting” a node is a common task when working with ASTs. You “traverse the tree” by visiting the nodes you are interested in
- unified comes with visitor utilities so you don’t have to reinvent the wheel
- the cool thing about utilities like `unist-útil-visits is that it can work on subtrees, meaning that you can pass small chunks of the red to traverse into
- plugin-based markdown processor.
- highly configurable.
You can use the remark library directly in your scripts:
1remark().processSync('# Hello, world!')
Though, it's really a shortcut for:
1unified()2 .use(remarkParse)3 .use(remarkStringify)4 .processSync('# Hello, world!')
- you can use also remark-cli to automate tasks
- the same as remark, but for HTML
- uses remark and rehype internally
The flow of MDX
- Parse: MDX text => MDAST
- Transpile: MDAST => MDXAST (remark-mdx)
- Transform: remark plugins applied to AST
- Transpile: MDXAST => MDXHAST
- Transform: rehype plugins applied to AST
- Generate: MDXHAST => JSX text
The final result is JSX that can be used in React/Preact/Vue/etc.
MDX allows you to hook into this flow at step 3 and 5, where you can use remark and rehype plugins (respectively) to benefit from their ecosystems.
Working with a tree to search into it.
- Breadth-first traversal: traverse all siblings by level (all level-1 children, then all level-2 children...)
- Depth-first traversal: traverse by branches. this is the most common one
Depth-first traversal performs 3 steps:
- N: visit ~N~ itself
- L: traverse head
- R: traverse tail
This steps can be done in any order.