remark-ast-inline
An experimental package for adding nodes and values to a abstract syntax tree from template expressions, via a unified parser of the kind exposed by remark.
Usage
Import
import rai from 'remark-ast-express'Configure
const md = rai({
converter // Optional
})
function converter(value) {
return { type: 'value', value: value }
}The converter function is called (if present) with all the expressions that would be inserted into your template string. It can return either an unist node (an object with a type field containing a string) to later be inserted into the AST or a value to be inserted into the string. For example, to make this package completely useless:
function converter(value) {
return String(value) // Can't just be `return value` or nodes would still be inserted.
)Process Text
let { string, astInserter } = md`\
# This is some markdown...
I'm going to insert a value into the AST riiight ${"foobar"}here.
${{
type: 'strong',
children: [{type: 'text', value: 'not here'}]
}}
`
import remark from 'remark'
let tree = remark()
.use(...others...)
.use(astInserter) // The plugin returned above should be last
.parse(string) // The exact(!) string returned aboveGives:
{
"type": "root",
"children": [
{
"type": "heading",
"depth": 1,
"children": [
{
"type": "text",
"value": "This is some markdown...",
"position": ...
}
],
"position": ...
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "I'm going to insert a value into the AST riiight ",
"position": ...
},
{
"type": "value",
"value": "foobar",
"position": ...
},
{
"type": "text",
"value": "here.",
"position": ...
}
],
"position": ...
},
{
"type": "paragraph",
"children": [
{
"type": "value",
"value": {
"type": "strong",
"children": [
{
"type": "text",
"value": "not here"
}
]
},
"position": ...
}
],
"position": ...
}
],
"position": ...
}Or, with no converter:
{
"type": "root",
"children": [
{
"type": "heading",
"depth": 1,
"children": [
{
"type": "text",
"value": "This is some markdown...",
"position": ...
}
],
"position": ...
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "I'm going to insert a value into the AST riiight foobarhere.",
"position": ...
}
],
"position": ...
},
{
"type": "paragraph",
"children": [
{
"type": "strong",
"children": [
{
"type": "text",
"value": "not here"
}
],
"position": ...
}
],
"position": ...
}
],
"position": ...
}WTF? Why?
Well, this gives you a nice(ish) syntax in vanilla Javascript for programmatically inserting nodes into the AST inline; which might be useful...? I'm considering using it to implement a React/JS+Markdown website templating framework; it was the least awkward way to hack something together that I may like more than the alternatives (e.g. MDX).
How?
The code inserts tokens of the form <[prefix]:[index]> into the string, where the prefix is a random alphabetic (upper and lower) string that occurs nowhere else in the string (same across the tokens) and the index corresponds to which node should be inserted there. A prefix string and nodes array fields are included in the tag function output.
