feat: support wrapperClasses and wrapperComponent as function

Author: antfu

src/markdown.ts

@@ -72,7 +72,13 @@ export function createMarkdown(options: ResolvedOptions) {
   options.markdownItSetup(markdown)
 
   return (id: string, raw: string): TransformResult => {
-    const { wrapperClasses, wrapperComponent, transforms, headEnabled, frontmatterPreprocess } = options
+    const {
+      wrapperClasses,
+      wrapperComponent,
+      transforms,
+      headEnabled,
+      frontmatterPreprocess,
+    } = options
 
     raw = raw.trimStart()
 
@@ -83,12 +89,32 @@ export function createMarkdown(options: ResolvedOptions) {
     let html = markdown.render(raw, env)
     const { excerpt = '', frontmatter: data = null } = env
 
-    if (wrapperClasses)
-      html = `<div class="${wrapperClasses}">${html}</div>`
+    const wrapperClassesResolved = toArray(
+      typeof wrapperClasses === 'function'
+        ? wrapperClasses(id, raw)
+        : wrapperClasses,
+    )
+      .filter(Boolean)
+      .join(' ')
+
+    if (wrapperClassesResolved)
+      html = `<div class="${wrapperClassesResolved}">${html}</div>`
     else
       html = `<div>${html}</div>`
-    if (wrapperComponent)
-      html = `<${wrapperComponent}${options.frontmatter ? ' :frontmatter="frontmatter"' : ''}${options.excerpt ? ' :excerpt="excerpt"' : ''}>${html}</${wrapperComponent}>`
+
+    const wrapperComponentName = typeof wrapperComponent === 'function'
+      ? wrapperComponent(id, raw)
+      : wrapperComponent
+
+    if (wrapperComponentName) {
+      const attrs = [
+        options.frontmatter && ':frontmatter="frontmatter"',
+        options.excerpt && ':excerpt="excerpt"',
+        wrapperClassesResolved && `class="${wrapperClassesResolved}"`,
+      ].filter(Boolean).join(' ')
+      html = `<${wrapperComponentName} ${attrs}>${html}</${wrapperComponent}>`
+    }
+
     if (transforms.after)
       html = transforms.after(html, id)
 

src/options.ts

@@ -1,4 +1,3 @@
-import { toArray } from '@antfu/utils'
 import type { Options, ResolvedOptions } from './types'
 import { getVueVersion, isUnheadVueInstalled } from './utils'
 
@@ -39,9 +38,5 @@ export function resolveOptions(userOptions: Options): ResolvedOptions {
   if (options.headEnabled === true)
     options.headEnabled = isUnheadVueInstalled() ? 'unhead' : 'vueuse'
 
-  options.wrapperClasses = toArray(options.wrapperClasses)
-    .filter((i?: string) => i)
-    .join(' ')
-
   return options as ResolvedOptions
 }

src/types.ts

@@ -165,14 +165,14 @@ export interface Options {
    *
    * @default 'markdown-body'
    */
-  wrapperClasses?: string | string[]
+  wrapperClasses?: string | string[] | undefined | null | ((id: string, code: string) => string | string[] | undefined | null)
 
   /**
    * Component name to wrapper with
    *
    * @default undefined
    */
-  wrapperComponent?: string | undefined | null
+  wrapperComponent?: string | undefined | null | ((id: string, code: string) => string | undefined | null)
 
   /**
    * Custom tranformations apply before and after the markdown transformation
@@ -188,7 +188,6 @@ export interface Options {
 
 export interface ResolvedOptions extends Required<Options> {
   headEnabled: 'unhead' | 'vueuse' | false
-  wrapperClasses: string
 }
 
 export interface MarkdownEnv extends MarkdownItEnv {