svmarkdown 0.1.0 → 0.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svmarkdown",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Runtime markdown renderer for Svelte based on markdown-it and AST blocks.",
   "author": "grtsinry43",
   "license": "MIT",
@@ -14,14 +14,20 @@
     "url": "https://github.com/grtsinry43/svmarkdown/issues"
   },
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "svelte": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "svelte": "./src/index.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"

package/src/Markdown.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { createParser, inferComponentBlocksFromMap } from './parser'
+  import RenderNodes from './internal/RenderNodes.svelte'
+  import type {
+    SvmdComponentMap,
+    SvmdComponentBlocks,
+    SvmdParseOptions,
+    SvmdRenderOptions,
+    SvmdRoot,
+  } from './types'
+
+  interface Props {
+    content: string
+    components?: SvmdComponentMap
+    parseOptions?: SvmdParseOptions
+    renderOptions?: SvmdRenderOptions
+    inferComponentBlocks?: boolean
+  }
+
+  let {
+    content,
+    components = {},
+    parseOptions = {},
+    renderOptions,
+    inferComponentBlocks = true,
+  }: Props = $props()
+
+  const effectiveParseOptions = $derived(resolveParseOptions(parseOptions, components, inferComponentBlocks))
+  const parser = $derived(createParser(effectiveParseOptions))
+  const ast: SvmdRoot = $derived(parser(content))
+
+  function resolveParseOptions(
+    options: SvmdParseOptions,
+    componentMap: SvmdComponentMap,
+    shouldInferComponentBlocks: boolean,
+  ): SvmdParseOptions {
+    if (!shouldInferComponentBlocks) {
+      return options
+    }
+
+    const inferredBlocks = inferComponentBlocksFromMap(componentMap)
+    const mergedBlocks: SvmdComponentBlocks = {
+      ...inferredBlocks,
+      ...(options.componentBlocks ?? {}),
+    }
+
+    return {
+      ...options,
+      componentBlocks: mergedBlocks,
+    }
+  }
+</script>
+
+{#if ast.children.length > 0}
+  <RenderNodes nodes={ast.children} {components} {renderOptions} />
+{/if}

package/src/SvmdChildren.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import RenderNodes from './internal/RenderNodes.svelte'
+  import type { SvmdComponentMap, SvmdNode, SvmdRenderOptions } from './types'
+
+  interface Props {
+    nodes: SvmdNode[]
+    components?: SvmdComponentMap
+    renderOptions?: SvmdRenderOptions
+  }
+
+  let { nodes, components = {}, renderOptions }: Props = $props()
+</script>
+
+<RenderNodes {nodes} {components} {renderOptions} />

package/src/index.ts

@@ -0,0 +1,21 @@
+export { default as Markdown } from './Markdown.svelte'
+export { default as SvmdChildren } from './SvmdChildren.svelte'
+export { createParser, inferComponentBlocksFromMap, parseMarkdown } from './parser'
+export type {
+  SvmdBreakNode,
+  SvmdCodeNode,
+  SvmdComponent,
+  SvmdComponentBlockConfig,
+  SvmdComponentBlocks,
+  SvmdComponentMap,
+  SvmdComponentNode,
+  SvmdElementNode,
+  SvmdHtmlNode,
+  SvmdMarkdownItPlugin,
+  SvmdNode,
+  SvmdParseOptions,
+  SvmdProps,
+  SvmdRenderOptions,
+  SvmdRoot,
+  SvmdTextNode,
+} from './types'

package/src/internal/RenderNode.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type {
+    SvmdCodeNode,
+    SvmdComponentMap,
+    SvmdElementNode,
+    SvmdNode,
+    SvmdRenderOptions,
+  } from '../types'
+  import RenderNodes from './RenderNodes.svelte'
+
+  const VOID_TAGS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+  ])
+
+  interface Props {
+    node: SvmdNode
+    components?: SvmdComponentMap
+    renderOptions?: SvmdRenderOptions
+  }
+
+  let { node, components = {}, renderOptions }: Props = $props()
+
+  function isVoidElement(elementNode: SvmdElementNode): boolean {
+    return VOID_TAGS.has(elementNode.name)
+  }
+
+  function codeClassName(codeNode: SvmdCodeNode): string | undefined {
+    if (!codeNode.lang) {
+      return undefined
+    }
+
+    return `language-${codeNode.lang}`
+  }
+</script>
+
+{#if node.kind === 'text'}
+  {node.value}
+{:else if node.kind === 'break'}
+  {#if node.hard}
+    <br />
+  {:else}
+    {'\n'}
+  {/if}
+{:else if node.kind === 'html'}
+  {#if renderOptions?.allowDangerousHtml}
+    {@html node.value}
+  {:else}
+    {node.value}
+  {/if}
+{:else if node.kind === 'code'}
+  {@const CodeRenderer = components.code}
+
+  {#if CodeRenderer}
+    <CodeRenderer
+      node={node}
+      inline={node.inline}
+      text={node.text}
+      lang={node.lang}
+      info={node.info}
+      attrs={node.attrs}
+    />
+  {:else if node.inline}
+    <code {...node.attrs}>{node.text}</code>
+  {:else}
+    <pre>
+      <code class={codeClassName(node)} {...node.attrs}>{node.text}</code>
+    </pre>
+  {/if}
+{:else if node.kind === 'component'}
+  {@const ComponentRenderer = components[node.name]}
+
+  {#if ComponentRenderer}
+    <ComponentRenderer {...node.props} node={node} syntax={node.syntax} source={node.source}>
+      {#if node.children.length > 0}
+        <RenderNodes nodes={node.children} {components} {renderOptions} />
+      {/if}
+    </ComponentRenderer>
+  {:else}
+    {#if node.children.length > 0}
+      <RenderNodes nodes={node.children} {components} {renderOptions} />
+    {:else if node.source}
+      <pre><code>{node.source}</code></pre>
+    {/if}
+  {/if}
+{:else}
+  {@const ElementRenderer = components[node.name]}
+
+  {#if ElementRenderer}
+    <ElementRenderer {...node.attrs} node={node}>
+      {#if node.children.length > 0}
+        <RenderNodes nodes={node.children} {components} {renderOptions} />
+      {/if}
+    </ElementRenderer>
+  {:else if isVoidElement(node)}
+    <svelte:element this={node.name} {...node.attrs} />
+  {:else}
+    <svelte:element this={node.name} {...node.attrs}>
+      {#if node.children.length > 0}
+        <RenderNodes nodes={node.children} {components} {renderOptions} />
+      {/if}
+    </svelte:element>
+  {/if}
+{/if}

package/src/internal/RenderNodes.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { SvmdComponentMap, SvmdNode, SvmdRenderOptions } from '../types'
+  import RenderNode from './RenderNode.svelte'
+
+  interface Props {
+    nodes: SvmdNode[]
+    components?: SvmdComponentMap
+    renderOptions?: SvmdRenderOptions
+  }
+
+  let { nodes, components = {}, renderOptions }: Props = $props()
+</script>
+
+{#each nodes as node (node.key)}
+  <RenderNode {node} {components} {renderOptions} />
+{/each}

package/src/parser.ts

@@ -0,0 +1,626 @@
+import MarkdownIt from 'markdown-it'
+import markdownItContainer from 'markdown-it-container'
+import type Token from 'markdown-it/lib/token.mjs'
+import type {
+  SvmdCodeNode,
+  SvmdComponentBlockConfig,
+  SvmdComponentBlocks,
+  SvmdComponentNode,
+  SvmdNode,
+  SvmdParseOptions,
+  SvmdProps,
+  SvmdRoot,
+} from './types'
+
+const FENCE_COMPONENT_PREFIX = 'component:'
+
+interface NormalizedComponentBlock extends Required<Omit<SvmdComponentBlockConfig, 'parseProps'>> {
+  parseProps: (raw: string, context: { name: string; syntax: 'container' | 'fence' }) => SvmdProps
+}
+
+interface ParseState {
+  keySeed: number
+  md: MarkdownIt
+  options: SvmdParseOptions
+  componentBlocks: Map<string, NormalizedComponentBlock>
+  parseFragment: (markdown: string) => SvmdNode[]
+}
+
+export type SvmdParser = (markdown: string) => SvmdRoot
+
+export function createParser(options: SvmdParseOptions = {}): SvmdParser {
+  const componentBlocks = normalizeComponentBlocks(options.componentBlocks)
+  const md = createMarkdownIt(options, componentBlocks)
+
+  const parse = (markdown: string): SvmdRoot => {
+    const state: ParseState = {
+      keySeed: 0,
+      md,
+      options,
+      componentBlocks,
+      parseFragment: (fragment) => {
+        const fragmentTokens = md.parse(fragment, {})
+        return parseBlockTokens(fragmentTokens, state)
+      },
+    }
+
+    const tokens = md.parse(markdown, {})
+
+    return {
+      kind: 'root',
+      children: parseBlockTokens(tokens, state),
+    }
+  }
+
+  return parse
+}
+
+export function parseMarkdown(markdown: string, options: SvmdParseOptions = {}): SvmdRoot {
+  return createParser(options)(markdown)
+}
+
+export function inferComponentBlocksFromMap(components: Record<string, unknown>): SvmdComponentBlocks {
+  const inferred: SvmdComponentBlocks = {}
+
+  for (const name of Object.keys(components)) {
+    if (!isLikelyCustomComponentName(name)) {
+      continue
+    }
+
+    inferred[name] = {
+      container: true,
+      fence: true,
+      parseFenceBodyAsMarkdown: false,
+    }
+  }
+
+  return inferred
+}
+
+function isLikelyCustomComponentName(name: string): boolean {
+  return /^[A-Z]/.test(name)
+}
+
+function createMarkdownIt(
+  options: SvmdParseOptions,
+  componentBlocks: Map<string, NormalizedComponentBlock>,
+): MarkdownIt {
+  const markdownIt =
+    options.markdownIt ??
+    new MarkdownIt({
+      html: false,
+      linkify: true,
+      typographer: true,
+      ...options.markdownItOptions,
+    })
+
+  for (const [name, config] of componentBlocks) {
+    if (!config.container) {
+      continue
+    }
+
+    markdownIt.use(markdownItContainer, name)
+  }
+
+  for (const plugin of options.markdownItPlugins ?? []) {
+    if (Array.isArray(plugin)) {
+      const [pluginFn, ...params] = plugin
+      markdownIt.use(pluginFn, ...params)
+      continue
+    }
+
+    markdownIt.use(plugin)
+  }
+
+  return markdownIt
+}
+
+function normalizeComponentBlocks(componentBlocks?: SvmdComponentBlocks): Map<string, NormalizedComponentBlock> {
+  const normalized = new Map<string, NormalizedComponentBlock>()
+
+  for (const [name, blockConfig] of Object.entries(componentBlocks ?? {})) {
+    if (!blockConfig) {
+      continue
+    }
+
+    if (blockConfig === true) {
+      normalized.set(name, {
+        container: true,
+        fence: true,
+        parseFenceBodyAsMarkdown: false,
+        parseProps: defaultParseProps,
+      })
+      continue
+    }
+
+    normalized.set(name, {
+      container: blockConfig.container ?? true,
+      fence: blockConfig.fence ?? true,
+      parseFenceBodyAsMarkdown: blockConfig.parseFenceBodyAsMarkdown ?? false,
+      parseProps: blockConfig.parseProps ?? defaultParseProps,
+    })
+  }
+
+  return normalized
+}
+
+function parseBlockTokens(tokens: Token[], state: ParseState): SvmdNode[] {
+  const nodes: SvmdNode[] = []
+
+  let index = 0
+  while (index < tokens.length) {
+    const token = tokens[index]
+
+    if (token.hidden && token.nesting !== 0) {
+      index += 1
+      continue
+    }
+
+    if (isContainerOpenToken(token, state.componentBlocks)) {
+      const componentName = getContainerName(token.type)
+      if (componentName) {
+        const closeType = `container_${componentName}_close`
+        const closeIndex = findCloseIndex(tokens, index, token.type, closeType)
+
+        if (closeIndex !== -1) {
+          const config = state.componentBlocks.get(componentName)
+          const propsRaw = extractContainerPropsRaw(componentName, token.info)
+          const props = (config?.parseProps ?? defaultParseProps)(propsRaw, {
+            name: componentName,
+            syntax: 'container',
+          })
+
+          nodes.push({
+            key: nextKey(state),
+            kind: 'component',
+            name: componentName,
+            syntax: 'container',
+            props,
+            children: parseBlockTokens(tokens.slice(index + 1, closeIndex), state),
+          })
+
+          index = closeIndex + 1
+          continue
+        }
+      }
+    }
+
+    if (token.nesting === 1 && token.type.endsWith('_open')) {
+      const closeType = openTypeToCloseType(token.type)
+      const closeIndex = findCloseIndex(tokens, index, token.type, closeType)
+
+      if (closeIndex === -1) {
+        index += 1
+        continue
+      }
+
+      const children = parseBlockTokens(tokens.slice(index + 1, closeIndex), state)
+
+      if (token.hidden) {
+        nodes.push(...children)
+      } else {
+        nodes.push({
+          key: nextKey(state),
+          kind: 'element',
+          name: normalizeNodeName(token),
+          attrs: attrsToRecord(token.attrs),
+          children,
+          block: token.block,
+        })
+      }
+
+      index = closeIndex + 1
+      continue
+    }
+
+    if (token.nesting === 0) {
+      const parsed = parseBlockLeafToken(token, state)
+      if (parsed) {
+        nodes.push(...parsed)
+      }
+    }
+
+    index += 1
+  }
+
+  return nodes
+}
+
+function parseBlockLeafToken(token: Token, state: ParseState): SvmdNode[] | null {
+  if (token.type === 'inline') {
+    return parseInlineTokens(token.children ?? [], state)
+  }
+
+  if (token.type === 'fence') {
+    const maybeComponent = parseFenceComponent(token, state)
+    if (maybeComponent) {
+      return [maybeComponent]
+    }
+
+    const [lang] = token.info.trim().split(/\s+/, 1)
+
+    return [
+      {
+        key: nextKey(state),
+        kind: 'code',
+        inline: false,
+        text: token.content,
+        lang: lang || undefined,
+        info: token.info,
+        attrs: attrsToRecord(token.attrs),
+      } satisfies SvmdCodeNode,
+    ]
+  }
+
+  if (token.type === 'code_block') {
+    return [
+      {
+        key: nextKey(state),
+        kind: 'code',
+        inline: false,
+        text: token.content,
+        attrs: attrsToRecord(token.attrs),
+      } satisfies SvmdCodeNode,
+    ]
+  }
+
+  if (token.type === 'html_block') {
+    return [
+      {
+        key: nextKey(state),
+        kind: 'html',
+        value: token.content,
+        block: true,
+      },
+    ]
+  }
+
+  if (token.type === 'hr') {
+    return [
+      {
+        key: nextKey(state),
+        kind: 'element',
+        name: 'hr',
+        attrs: attrsToRecord(token.attrs),
+        children: [],
+        block: true,
+      },
+    ]
+  }
+
+  if (token.content) {
+    return [
+      {
+        key: nextKey(state),
+        kind: 'text',
+        value: token.content,
+      },
+    ]
+  }
+
+  return null
+}
+
+function parseInlineTokens(tokens: Token[], state: ParseState): SvmdNode[] {
+  const nodes: SvmdNode[] = []
+
+  let index = 0
+  while (index < tokens.length) {
+    const token = tokens[index]
+
+    if (token.type === 'text') {
+      nodes.push({
+        key: nextKey(state),
+        kind: 'text',
+        value: token.content,
+      })
+      index += 1
+      continue
+    }
+
+    if (token.type === 'softbreak' || token.type === 'hardbreak') {
+      nodes.push({
+        key: nextKey(state),
+        kind: 'break',
+        hard: token.type === 'hardbreak',
+      })
+      index += 1
+      continue
+    }
+
+    if (token.type === 'html_inline') {
+      nodes.push({
+        key: nextKey(state),
+        kind: 'html',
+        value: token.content,
+        block: false,
+      })
+      index += 1
+      continue
+    }
+
+    if (token.type === 'code_inline') {
+      nodes.push({
+        key: nextKey(state),
+        kind: 'code',
+        inline: true,
+        text: token.content,
+        attrs: attrsToRecord(token.attrs),
+      })
+      index += 1
+      continue
+    }
+
+    if (token.type === 'image') {
+      const attrs = attrsToRecord(token.attrs)
+      if (!attrs.alt && token.content) {
+        attrs.alt = token.content
+      }
+
+      nodes.push({
+        key: nextKey(state),
+        kind: 'element',
+        name: token.tag || 'img',
+        attrs,
+        children: [],
+        block: false,
+      })
+      index += 1
+      continue
+    }
+
+    if (token.nesting === 1 && token.type.endsWith('_open')) {
+      const closeType = openTypeToCloseType(token.type)
+      const closeIndex = findCloseIndex(tokens, index, token.type, closeType)
+
+      if (closeIndex !== -1) {
+        const children = parseInlineTokens(tokens.slice(index + 1, closeIndex), state)
+
+        nodes.push({
+          key: nextKey(state),
+          kind: 'element',
+          name: normalizeNodeName(token),
+          attrs: attrsToRecord(token.attrs),
+          children,
+          block: false,
+        })
+
+        index = closeIndex + 1
+        continue
+      }
+    }
+
+    if (token.content) {
+      nodes.push({
+        key: nextKey(state),
+        kind: 'text',
+        value: token.content,
+      })
+    }
+
+    index += 1
+  }
+
+  return nodes
+}
+
+function parseFenceComponent(token: Token, state: ParseState): SvmdComponentNode | null {
+  const info = token.info.trim()
+  if (!info) {
+    return null
+  }
+
+  const prefix = state.options.fenceComponentPrefix ?? FENCE_COMPONENT_PREFIX
+  if (!info.startsWith(prefix)) {
+    return null
+  }
+
+  const spec = info.slice(prefix.length).trim()
+  if (!spec) {
+    return null
+  }
+
+  const { name, propsRaw } = parseComponentSpec(spec)
+  if (!name) {
+    return null
+  }
+
+  const config = state.componentBlocks.get(name)
+  if (config && !config.fence) {
+    return null
+  }
+
+  const parseProps = config?.parseProps ?? defaultParseProps
+  const props = parseProps(propsRaw, { name, syntax: 'fence' })
+
+  const children = config?.parseFenceBodyAsMarkdown ? state.parseFragment(token.content) : []
+
+  return {
+    key: nextKey(state),
+    kind: 'component',
+    name,
+    syntax: 'fence',
+    props,
+    children,
+    source: token.content,
+  }
+}
+
+function parseComponentSpec(spec: string): { name: string; propsRaw: string } {
+  const firstSpace = spec.search(/\s/)
+  if (firstSpace === -1) {
+    return { name: spec.trim(), propsRaw: '' }
+  }
+
+  return {
+    name: spec.slice(0, firstSpace).trim(),
+    propsRaw: spec.slice(firstSpace).trim(),
+  }
+}
+
+function extractContainerPropsRaw(name: string, info: string): string {
+  const trimmed = info.trim()
+  if (!trimmed) {
+    return ''
+  }
+
+  if (!trimmed.startsWith(name)) {
+    return trimmed
+  }
+
+  return trimmed.slice(name.length).trim()
+}
+
+function attrsToRecord(attrs: Token['attrs']): Record<string, string> {
+  if (!attrs || attrs.length === 0) {
+    return {}
+  }
+
+  return Object.fromEntries(attrs)
+}
+
+function isContainerOpenToken(token: Token, componentBlocks: Map<string, NormalizedComponentBlock>): boolean {
+  if (!token.type.startsWith('container_') || !token.type.endsWith('_open')) {
+    return false
+  }
+
+  const name = getContainerName(token.type)
+  if (!name) {
+    return false
+  }
+
+  const config = componentBlocks.get(name)
+  return Boolean(config?.container)
+}
+
+function getContainerName(type: string): string | null {
+  if (!type.startsWith('container_') || !type.endsWith('_open')) {
+    return null
+  }
+
+  return type.slice('container_'.length, -'_open'.length)
+}
+
+function openTypeToCloseType(openType: string): string {
+  if (!openType.endsWith('_open')) {
+    return openType
+  }
+
+  return `${openType.slice(0, -'_open'.length)}_close`
+}
+
+function findCloseIndex(tokens: Token[], startIndex: number, openType: string, closeType: string): number {
+  let depth = 0
+
+  for (let index = startIndex; index < tokens.length; index += 1) {
+    const token = tokens[index]
+
+    if (token.type === openType) {
+      depth += 1
+      continue
+    }
+
+    if (token.type === closeType) {
+      depth -= 1
+      if (depth === 0) {
+        return index
+      }
+    }
+  }
+
+  return -1
+}
+
+function normalizeNodeName(token: Token): string {
+  if (token.tag) {
+    return token.tag
+  }
+
+  const type = token.type
+  if (type.endsWith('_open')) {
+    return type.slice(0, -'_open'.length)
+  }
+
+  if (type.endsWith('_close')) {
+    return type.slice(0, -'_close'.length)
+  }
+
+  return type
+}
+
+function defaultParseProps(raw: string): SvmdProps {
+  const source = raw.trim()
+  if (!source) {
+    return {}
+  }
+
+  const jsonProps = parseJsonProps(source)
+  if (jsonProps) {
+    return jsonProps
+  }
+
+  const kvProps = parseKeyValueProps(source)
+  if (Object.keys(kvProps).length > 0) {
+    return kvProps
+  }
+
+  return { value: coercePrimitive(source) }
+}
+
+function parseJsonProps(source: string): SvmdProps | null {
+  if (!(source.startsWith('{') && source.endsWith('}'))) {
+    return null
+  }
+
+  try {
+    const parsed = JSON.parse(source) as unknown
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      return parsed as SvmdProps
+    }
+  } catch {
+    return null
+  }
+
+  return null
+}
+
+function parseKeyValueProps(source: string): SvmdProps {
+  const props: SvmdProps = {}
+  const keyValuePattern = /([A-Za-z_][\w-]*)=(?:"([^"]*)"|'([^']*)'|([^\s]+))/g
+
+  for (const match of source.matchAll(keyValuePattern)) {
+    const [, key, dqValue, sqValue, rawValue] = match
+    const value = dqValue ?? sqValue ?? rawValue ?? ''
+    props[key] = coercePrimitive(value)
+  }
+
+  return props
+}
+
+function coercePrimitive(value: string): SvmdProps[string] {
+  const trimmed = value.trim()
+
+  if (trimmed === 'true') {
+    return true
+  }
+
+  if (trimmed === 'false') {
+    return false
+  }
+
+  if (trimmed === 'null') {
+    return null
+  }
+
+  if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+    return Number(trimmed)
+  }
+
+  return trimmed
+}
+
+function nextKey(state: ParseState): string {
+  const key = state.keySeed
+  state.keySeed += 1
+  return `n_${key}`
+}

package/src/types.ts

@@ -0,0 +1,100 @@
+import type MarkdownIt from 'markdown-it'
+import type {
+  Options as MarkdownItOptions,
+  PluginSimple as MarkdownItPluginSimple,
+  PluginWithOptions as MarkdownItPluginWithOptions,
+  PluginWithParams as MarkdownItPluginWithParams,
+} from 'markdown-it'
+import type { Component } from 'svelte'
+
+export type SvmdPrimitive = string | number | boolean | null
+export type SvmdPropValue = SvmdPrimitive | SvmdPropValue[] | { [key: string]: SvmdPropValue }
+export type SvmdProps = Record<string, SvmdPropValue>
+
+interface SvmdNodeBase {
+  key: string
+}
+
+export interface SvmdRoot {
+  kind: 'root'
+  children: SvmdNode[]
+}
+
+export interface SvmdTextNode extends SvmdNodeBase {
+  kind: 'text'
+  value: string
+}
+
+export interface SvmdBreakNode extends SvmdNodeBase {
+  kind: 'break'
+  hard: boolean
+}
+
+export interface SvmdHtmlNode extends SvmdNodeBase {
+  kind: 'html'
+  value: string
+  block: boolean
+}
+
+export interface SvmdElementNode extends SvmdNodeBase {
+  kind: 'element'
+  name: string
+  attrs: Record<string, string>
+  children: SvmdNode[]
+  block: boolean
+}
+
+export interface SvmdCodeNode extends SvmdNodeBase {
+  kind: 'code'
+  inline: boolean
+  text: string
+  lang?: string
+  info?: string
+  attrs: Record<string, string>
+}
+
+export interface SvmdComponentNode extends SvmdNodeBase {
+  kind: 'component'
+  name: string
+  syntax: 'container' | 'fence'
+  props: SvmdProps
+  children: SvmdNode[]
+  source?: string
+}
+
+export type SvmdNode =
+  | SvmdTextNode
+  | SvmdBreakNode
+  | SvmdHtmlNode
+  | SvmdElementNode
+  | SvmdCodeNode
+  | SvmdComponentNode
+
+export type SvmdComponent = Component<any>
+export type SvmdComponentMap = Record<string, SvmdComponent | undefined>
+
+export type SvmdMarkdownItPlugin =
+  | MarkdownItPluginSimple
+  | MarkdownItPluginWithParams
+  | [MarkdownItPluginSimple | MarkdownItPluginWithOptions<any> | MarkdownItPluginWithParams, ...unknown[]]
+
+export interface SvmdComponentBlockConfig {
+  container?: boolean
+  fence?: boolean
+  parseFenceBodyAsMarkdown?: boolean
+  parseProps?: (raw: string, context: { name: string; syntax: 'container' | 'fence' }) => SvmdProps
+}
+
+export type SvmdComponentBlocks = Record<string, boolean | SvmdComponentBlockConfig>
+
+export interface SvmdParseOptions {
+  markdownIt?: MarkdownIt
+  markdownItOptions?: MarkdownItOptions
+  markdownItPlugins?: SvmdMarkdownItPlugin[]
+  componentBlocks?: SvmdComponentBlocks
+  fenceComponentPrefix?: string
+}
+
+export interface SvmdRenderOptions {
+  allowDangerousHtml?: boolean
+}