feat: variable binding

src/runtime/components/MarkdownRenderer.ts

@@ -5,7 +5,7 @@ import { find, html } from 'property-information'
 // eslint-disable-next-line import/no-named-as-default
 import htmlTags from 'html-tags'
 import type { VNode, ConcreteComponent } from 'vue'
-import { useRuntimeConfig } from '#app'
+import { useRuntimeConfig, useRoute } from '#app'
 import type { MarkdownNode, ParsedContentMeta } from '../types'
 
 type CreateElement = typeof h
@@ -106,58 +106,86 @@ export default defineComponent({
 /**
  * Render a markdown node
  */
-function renderNode (node: MarkdownNode, h: CreateElement, documentMeta: ParsedContentMeta): ContentVNode {
-  const originalTag = node.tag
-  // `_ignoreMap` is an special prop to disables tag-mapper
-  const renderTag: string = (typeof node.props?.__ignoreMap === 'undefined' && documentMeta.tags[node.tag]) || node.tag
-
+function renderNode (node: MarkdownNode, h: CreateElement, documentMeta: ParsedContentMeta, parentScope: any = {}): ContentVNode {
   /**
    * Render Text node
    */
   if (node.type === 'text') {
     return h(Text, node.value)
   }
 
+  const originalTag = node.tag!
+  // `_ignoreMap` is an special prop to disables tag-mapper
+  const renderTag: string = (typeof node.props?.__ignoreMap === 'undefined' && documentMeta.tags[originalTag]) || originalTag
+
+  if (node.tag === 'binding') {
+    return renderBinding(node, h, documentMeta, parentScope)
+  }
+
   const component = resolveVueComponent(renderTag)
   if (typeof component === 'object') {
     component.tag = originalTag
   }
 
+  const props = propsToData(node, documentMeta)
   return h(
     component as any,
-    propsToData(node, documentMeta),
-    renderSlots(node, h, documentMeta)
+    props,
+    renderSlots(node, h, documentMeta, { ...parentScope, ...props })
   )
 }
 
+function renderBinding (node: MarkdownNode, h: CreateElement, documentMeta: ParsedContentMeta, parentScope: any = {}): ContentVNode {
+  const data = {
+    ...parentScope,
+    $route: () => useRoute(),
+    $document: documentMeta,
+    $doc: documentMeta
+  }
+  const splitter = /\.|\[(\d+)\]/
+  const keys = node.props?.value.trim().split(splitter).filter(Boolean)
+  const value = keys.reduce((data, key) => {
+    if (key in data) {
+      if (typeof data[key] === 'function') {
+        return data[key]()
+      } else {
+        return data[key]
+      }
+    }
+    return {}
+  }, data)
+
+  return h(Text, value)
+}
+
 /**
  * Create slots from `node` template children.
  */
-function renderSlots (node: MarkdownNode, h: CreateElement, documentMeta: ParsedContentMeta) {
+function renderSlots (node: MarkdownNode, h: CreateElement, documentMeta: ParsedContentMeta, parentProps: any): ContentVNode[] {
   const children: MarkdownNode[] = node.children || []
 
   const slots: Record<string, Array<VNode | string>> = children.reduce((data, node) => {
     if (!isTemplate(node)) {
-      data[DEFAULT_SLOT].push(renderNode(node, h, documentMeta))
+      data[DEFAULT_SLOT].push(renderNode(node, h, documentMeta, parentProps))
       return data
     }
 
     if (isDefaultTemplate(node)) {
-      data[DEFAULT_SLOT].push(...node.children.map(child => renderNode(child, h, documentMeta)))
+      data[DEFAULT_SLOT].push(...(node.children || []).map(child => renderNode(child, h, documentMeta, parentProps)))
       return data
     }
 
     const slotName = getSlotName(node)
-    data[slotName] = node.children.map(child => renderNode(child, h, documentMeta))
+    data[slotName] = (node.children || []).map(child => renderNode(child, h, documentMeta, parentProps))
 
     return data
   }, {
-    [DEFAULT_SLOT]: []
+    [DEFAULT_SLOT]: [] as any[]
   })
 
-  return Object.fromEntries(
-    Object.entries(slots).map(([name, vDom]) => ([name, createSlotFunction(vDom)]))
-  )
+  const slotEntries = Object.entries(slots).map(([name, vDom]) => ([name, createSlotFunction(vDom)]))
+
+  return Object.fromEntries(slotEntries)
 }
 
 /**

src/runtime/markdown-parser/remark-mdc/from-markdown.ts

@@ -15,7 +15,7 @@ const enter = {
   componentContainerDataSection: enterContainerDataSection,
   componentContainerAttributes: enterAttributes,
   componentContainerLabel: enterContainerLabel,
-
+  bindingContent: enterBindingContent,
   componentLeaf: enterLeaf,
   componentLeafAttributes: enterAttributes,
 
@@ -24,6 +24,7 @@ const enter = {
   componentTextAttributes: enterAttributes
 }
 const exit = {
+  bindingContent: exitBindingContent,
   componentContainerSectionTitle: exitContainerSectionTitle,
   listUnordered: conditionalExit,
   listOrdered: conditionalExit,
@@ -63,6 +64,21 @@ const exit = {
   componentTextName: exitName
 }
 
+// Bindings
+function enterBindingContent (token) {
+  this.enter({
+    type: 'textComponent',
+    name: 'binding',
+    attributes: {
+      value: this.sliceSerialize(token).trim()
+    }
+  }, token)
+}
+
+function exitBindingContent (token) {
+  this.exit(token)
+}
+
 function enterContainer (token: Token) {
   enterToken.call(this, 'containerComponent', token)
 }

src/runtime/markdown-parser/remark-mdc/micromark-extension/index.ts

@@ -6,6 +6,7 @@
 
 import tokenizeSpan from './tokenize-span'
 import tokenizeAttribute from './tokenize-attribute'
+import tokenizeBinding from './tokenize-binding'
 import tokenizeInline from './tokenize-inline'
 import tokenizeContainer from './tokenize-container'
 import tokenizeContainerIndented from './tokenize-container-indented'
@@ -16,7 +17,7 @@ export default function micromarkComponentsExtension () {
     text: {
       [Codes.colon]: tokenizeInline,
       [Codes.openingSquareBracket]: [tokenizeSpan],
-      [Codes.openingCurlyBracket]: tokenizeAttribute
+      [Codes.openingCurlyBracket]: [tokenizeBinding, tokenizeAttribute]
     },
     flow: {
       [Codes.colon]: [tokenizeContainer]

src/runtime/markdown-parser/remark-mdc/micromark-extension/tokenize-binding.ts

@@ -0,0 +1,71 @@
+import type { Effects, State, Code, TokenizeContext } from 'micromark-util-types'
+import { Codes } from './constants'
+
+function attempClose (this: TokenizeContext, effects: Effects, ok: State, nok: State) {
+  return start
+
+  function start (code: Code) {
+    if (code !== Codes.closingCurlyBracket) {
+      return nok(code)
+    }
+    effects.exit('bindingContent')
+    effects.enter('bindingFence')
+    effects.consume(code)
+    return secondBracket
+  }
+
+  function secondBracket (code: Code) {
+    if (code !== Codes.closingCurlyBracket) {
+      return nok(code)
+    }
+    effects.consume(code)
+    effects.exit('bindingFence')
+
+    return ok
+  }
+}
+
+function tokenize (this: TokenizeContext, effects: Effects, ok: State, nok: State) {
+  return start
+
+  function start (code: Code): void | State {
+    if (code !== Codes.openingCurlyBracket) {
+      throw new Error('expected `{`')
+    }
+
+    effects.enter('bindingFence')
+    effects.consume(code)
+    return secondBracket
+  }
+
+  function secondBracket (code: Code): void | State {
+    if (code !== Codes.openingCurlyBracket) {
+      return nok(code)
+    }
+    effects.consume(code)
+    effects.exit('bindingFence')
+    effects.enter('bindingContent')
+
+    return content
+  }
+
+  function content (code: Code): void | State {
+    if (code === Codes.closingCurlyBracket) {
+      return effects.attempt({ tokenize: attempClose, partial: true }, close, (code) => {
+        effects.consume(code)
+        return content
+      })(code)
+    }
+
+    effects.consume(code)
+    return content
+  }
+
+  function close (code: Code): void | State {
+    return ok(code)
+  }
+}
+
+export default {
+  tokenize
+}