@nuxtjs/mdc 0.1.6 → 0.2.1

package/README.md

@@ -9,6 +9,10 @@
 
 MDC supercharges regular Markdown to write documents interacting deeply with any Vue component. MDC stands for MarkDown Components.
 
+- [✨  Release Notes](https://github.com/nuxt-modules/mdc/releases)
+- [🏀  Online Playground](https://stackblitz.com/github/nuxt-modules/mdc?file=playground%2Fapp.vue)
+- [🧩  VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc)
+
 ## Features
 
 - Mix Markdown syntax with HTML tags or Vue components
@@ -83,7 +87,6 @@ Hello MDC
 
 [MIT](./LICENSE) - Made with 💚
 
-
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/mdc/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://npmjs.com/package/@nuxtjs/mdc

package/dist/module.d.mts

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { Theme as Theme$1 } from 'shiki-es';
+import { BuiltinTheme } from 'shikiji';
 
-type Theme = Theme$1 | Record<string, Theme$1>;
+type Theme = BuiltinTheme | Record<string, BuiltinTheme>;
 
 interface UnistPlugin {
     src?: string;
@@ -11,8 +11,21 @@ interface ModuleOptions {
     remarkPlugins?: Record<string, UnistPlugin>;
     rehypePlugins?: Record<string, UnistPlugin>;
     highlight?: {
-        theme?: Theme;
         highlighter?: string;
+        /**
+         * Default theme that will be used for highlighting code blocks.
+         */
+        theme?: Theme;
+        /**
+         * Preloaded languages that will be available for highlighting code blocks.
+         */
+        preload?: string[];
+        /**
+         * Inject background color to code block wrapper
+         *
+         * @default false
+         */
+        wrapperStyle?: boolean | string;
     } | false;
     headings?: {
         anchorLinks?: {
@@ -28,6 +41,15 @@ interface ModuleOptions {
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
 declare module '@nuxt/schema' {
+    interface RuntimeConfig {
+        mdc: {
+            highlight: {
+                theme?: Theme;
+                preload?: string[];
+                wrapperStyle?: boolean | string;
+            };
+        };
+    }
     interface PublicRuntimeConfig {
         mdc: {
             components: {

package/dist/module.d.ts

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { Theme as Theme$1 } from 'shiki-es';
+import { BuiltinTheme } from 'shikiji';
 
-type Theme = Theme$1 | Record<string, Theme$1>;
+type Theme = BuiltinTheme | Record<string, BuiltinTheme>;
 
 interface UnistPlugin {
     src?: string;
@@ -11,8 +11,21 @@ interface ModuleOptions {
     remarkPlugins?: Record<string, UnistPlugin>;
     rehypePlugins?: Record<string, UnistPlugin>;
     highlight?: {
-        theme?: Theme;
         highlighter?: string;
+        /**
+         * Default theme that will be used for highlighting code blocks.
+         */
+        theme?: Theme;
+        /**
+         * Preloaded languages that will be available for highlighting code blocks.
+         */
+        preload?: string[];
+        /**
+         * Inject background color to code block wrapper
+         *
+         * @default false
+         */
+        wrapperStyle?: boolean | string;
     } | false;
     headings?: {
         anchorLinks?: {
@@ -28,6 +41,15 @@ interface ModuleOptions {
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
 declare module '@nuxt/schema' {
+    interface RuntimeConfig {
+        mdc: {
+            highlight: {
+                theme?: Theme;
+                preload?: string[];
+                wrapperStyle?: boolean | string;
+            };
+        };
+    }
     interface PublicRuntimeConfig {
         mdc: {
             components: {

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@nuxtjs/mdc",
   "configKey": "mdc",
-  "version": "0.1.6"
+  "version": "0.2.1"
 }

package/dist/module.mjs

@@ -2,6 +2,7 @@ import { createResolver, extendViteConfig, defineNuxtModule, addTemplate, addCom
 import fs from 'fs';
 import { pascalCase } from 'scule';
 import { defu } from 'defu';
+import { pathToFileURL } from 'url';
 
 const mdcImportTemplate = async ({ nuxt, options }) => {
   const resolver = createResolver(import.meta.url);
@@ -114,6 +115,13 @@ const module = defineNuxtModule({
       },
       headings: options.headings
     });
+    nuxt.options.runtimeConfig.mdc = defu(nuxt.options.runtimeConfig.mdc, {
+      highlight: options.highlight ? {
+        theme: options.highlight.theme,
+        preload: options.highlight.preload,
+        wrapperStyle: options.highlight.wrapperStyle
+      } : {}
+    });
     nuxt.hook("vite:extendConfig", (viteConfig) => {
       viteConfig.optimizeDeps?.include?.push(
         "is-buffer",
@@ -124,7 +132,8 @@ const module = defineNuxtModule({
         "hast-util-raw"
       );
     });
-    nuxt.options.alias["#mdc-imports"] = addTemplate({ filename: "mdc-imports.mjs", getContents: mdcImportTemplate, options, write: true }).dst;
+    const { dst: templatePath } = addTemplate({ filename: "mdc-imports.mjs", getContents: mdcImportTemplate, options, write: true });
+    nuxt.options.alias["#mdc-imports"] = process.env.NODE_ENV === "development" ? pathToFileURL(templatePath).href : templatePath;
     nuxt.options.nitro.alias = nuxt.options.nitro.alias || {};
     nuxt.options.nitro.alias["#mdc-imports"] = nuxt.options.alias["#mdc-imports"];
     addComponent({ name: "MDC", filePath: resolver.resolve("./runtime/components/MDC") });
@@ -139,7 +148,11 @@ const module = defineNuxtModule({
         global: true
       });
     }
-    addServerHandler({ route: "/api/_mdc/highlight", handler: resolver.resolve("./runtime/shiki/event-handler") });
+    if (options.highlight) {
+      nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {};
+      nuxt.options.nitro.experimental.wasm = true;
+      addServerHandler({ route: "/api/_mdc/highlight", handler: resolver.resolve("./runtime/shiki/event-handler") });
+    }
     extendViteConfig((config) => {
       config.optimizeDeps = config.optimizeDeps || {};
       config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];

package/dist/runtime/components/MDC.vue

@@ -3,9 +3,11 @@
     <slot
       :data="data?.data"
       :body="data?.body"
+      :toc="data?.toc"
+      :excerpt="data?.excerpt"
     >
       <MDCRenderer
-        :body="data?.body"
+        :body="excerpt ? data?.excerpt : data?.body"
         :data="data?.data"
       />
     </slot>
@@ -16,22 +18,45 @@
 import { hash } from 'ohash'
 import { useAsyncData } from 'nuxt/app'
 import { parseMarkdown } from '../parser'
-import { watch, computed } from 'vue'
+import { watch, computed, type PropType } from 'vue'
+import { MDCParseOptions } from '../types'
 
 const props = defineProps({
   tag: {
     type: String,
     default: 'div'
   },
+  /**
+   * Raw markdown string or parsed markdown object from `parseMarkdown`
+   */
   value: {
-    type: String,
+    type: [String, Object],
     required: true
+  },
+  /**
+   * Render only the excerpt
+   */
+  excerpt: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Options for `parseMarkdown`
+   */
+  parserOptions: {
+    type: Object as PropType<MDCParseOptions>,
+    default: () => ({})
   }
 })
 
 const key = computed(() => hash(props.value))
 
-const { data, refresh } = await useAsyncData(key.value, async () => await parseMarkdown(props.value, { highlight: {}}))
+const { data, refresh } = await useAsyncData(key.value, async () => {
+  if (typeof props.value !== 'string') {
+    return props.value
+  }
+  return await parseMarkdown(props.value, props.parserOptions)
+})
 
 watch(() => props.value, () => {
   refresh()

package/dist/runtime/components/MDCRenderer.vue

@@ -21,17 +21,13 @@ export default defineComponent({
       type: Object,
       required: true
     },
+    /**
+     * Document meta data
+     */
     data: {
       type: Object,
       default: () => ({})
     },
-    /**
-     * Render only the excerpt
-     */
-    excerpt: {
-      type: Boolean,
-      default: false
-    },
     /**
      * Root tag to use for rendering
      */
@@ -264,6 +260,9 @@ function mergeTextNodes(nodes) {
   return mergedNodes;
 }
 async function resolveContentComponents(body, meta) {
+  if (!body) {
+    return;
+  }
   const components = Array.from(new Set(loadComponents(body, meta)));
   await Promise.all(components.map(async (c) => {
     if (c?.render || c?.ssrRender) {

package/dist/runtime/components/MDCRenderer.vue.d.ts

@@ -8,17 +8,13 @@ declare const _default: DefineComponent<{
         type: PropType<MDCRoot>;
         required: true;
     };
+    /**
+     * Document meta data
+     */
     data: {
         type: ObjectConstructor;
         default: () => {};
     };
-    /**
-     * Render only the excerpt
-     */
-    excerpt: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     /**
      * Root tag to use for rendering
      */
@@ -50,17 +46,13 @@ declare const _default: DefineComponent<{
         type: PropType<MDCRoot>;
         required: true;
     };
+    /**
+     * Document meta data
+     */
     data: {
         type: ObjectConstructor;
         default: () => {};
     };
-    /**
-     * Render only the excerpt
-     */
-    excerpt: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     /**
      * Root tag to use for rendering
      */
@@ -86,7 +78,6 @@ declare const _default: DefineComponent<{
     tag: string;
     data: Record<string, any>;
     components: Record<string, string | DefineComponent<any, any, any>>;
-    excerpt: boolean;
     prose: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/parser/compiler.mjs

@@ -32,7 +32,7 @@ export function compileHast() {
           return child;
         });
       }
-      if (node.tagName.startsWith("h")) {
+      if (node.tagName?.match(/^h\d$/)) {
         node.properties = node.properties || {};
         node.properties.id = String(node.properties?.id || slugs.slug(toString(node))).replace(/-+/g, "-").replace(/^-|-$/g, "").replace(/^(\d)/, "_$1");
       }

package/dist/runtime/parser/handlers/code.mjs

@@ -10,10 +10,10 @@ export default (state, node) => {
     properties: { __ignoreMap: "" },
     children: [{ type: "text", value }]
   };
-  if (node.meta) {
+  if (meta) {
     result.data = {
       // @ts-ignore
-      meta: node.meta
+      meta
     };
   }
   state.patch(node, result);
@@ -25,8 +25,8 @@ export default (state, node) => {
     meta,
     code: value
   };
-  if (node.lang) {
-    properties.className = ["language-" + node.lang];
+  if (language) {
+    properties.className = ["language-" + language];
   }
   result = { type: "element", tagName: "pre", properties, children: [result] };
   state.patch(node, result);

package/dist/runtime/parser/handlers/inlineCode.mjs

@@ -1,4 +1,5 @@
 export default function inlineCode(state, node) {
+  const language = node.attributes?.language || node.attributes?.lang;
   const text = { type: "text", value: node.value.replace(/\r?\n|\r/g, " ") };
   state.patch(node, text);
   const result = {
@@ -7,6 +8,14 @@ export default function inlineCode(state, node) {
     properties: node.attributes || {},
     children: [text]
   };
+  const classes = (result.properties.class || "").split(" ");
+  delete result.properties.class;
+  if (language) {
+    result.properties.language = language;
+    delete result.properties.lang;
+    classes.push("language-" + language);
+  }
+  result.properties.className = classes.join(" ");
   state.patch(node, result);
   return state.applyData(node, result);
 }

package/dist/runtime/parser/handlers/utils.d.ts

@@ -6,14 +6,12 @@
 export declare function parseThematicBlock(lang: string): {
     language: undefined;
     highlights: undefined;
-    fileName: undefined;
+    filename: undefined;
     meta: undefined;
-    filename?: undefined;
 } | {
     language: string | undefined;
     highlights: number[] | undefined;
     filename: string | undefined;
     meta: string;
-    fileName?: undefined;
 };
 export declare function getTagName(value: string): string | null;

package/dist/runtime/parser/handlers/utils.mjs

@@ -3,7 +3,7 @@ export function parseThematicBlock(lang) {
     return {
       language: void 0,
       highlights: void 0,
-      fileName: void 0,
+      filename: void 0,
       meta: void 0
     };
   }

package/dist/runtime/parser/index.mjs

@@ -6,11 +6,22 @@ import { defu } from "defu";
 import { useProcessorPlugins } from "./utils/plugins.mjs";
 import { compileHast } from "./compiler.mjs";
 import { defaults } from "./options.mjs";
-import { rehypeShiki } from "./shiki.mjs";
+import { rehypeShiki } from "../shiki/index.mjs";
 import { generateToc } from "./toc.mjs";
 import { nodeTextContent } from "../utils/node.mjs";
+let moduleOptions;
 export const parseMarkdown = async (md, opts = {}) => {
-  const options = defu(opts, defaults);
+  if (!moduleOptions) {
+    moduleOptions = await import(
+      "#mdc-imports"
+      /* @vite-ignore */
+    ).catch(() => ({}));
+  }
+  const options = defu(opts, {
+    remark: { plugins: moduleOptions?.remarkPlugins },
+    rehype: { plugins: moduleOptions?.rehypePlugins },
+    highlight: moduleOptions?.highlight
+  }, defaults);
   const { content, data: frontmatter } = await parseFrontMatter(md);
   const processor = unified();
   processor.use(remarkParse);

package/dist/runtime/parser/options.mjs

@@ -5,7 +5,6 @@ import rehypeExternalLinks from "rehype-external-links";
 import rehypeSortAttributeValues from "rehype-sort-attribute-values";
 import rehypeSortAttributes from "rehype-sort-attributes";
 import rehypeRaw from "rehype-raw";
-import { remarkPlugins, rehypePlugins, highlight } from "#mdc-imports";
 export const defaults = {
   remark: {
     plugins: {
@@ -14,8 +13,7 @@ export const defaults = {
       },
       "remark-gfm": {
         instance: remarkGFM
-      },
-      ...remarkPlugins
+      }
     }
   },
   rehype: {
@@ -39,11 +37,10 @@ export const defaults = {
         options: {
           passThrough: ["element"]
         }
-      },
-      ...rehypePlugins
+      }
     }
   },
-  highlight,
+  highlight: false,
   toc: {
     searchDepth: 2,
     depth: 2

package/dist/runtime/shiki/event-handler.d.ts

@@ -1,8 +1,2 @@
-import type { TokenStyleMap } from './types';
-declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
-    tree: import("../types/hast").Element[];
-    className: string;
-    style: string;
-    styleMap: TokenStyleMap;
-}>>;
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<import("./types").HighlightResult>>;
 export default _default;

package/dist/runtime/shiki/event-handler.mjs

@@ -1,15 +1,20 @@
-import { eventHandler, getQuery } from "h3";
+import { loadWasm } from "shikiji";
+import { eventHandler, getQuery, lazyEventHandler } from "h3";
 import { useShikiHighlighter } from "./highlighter.mjs";
-export default eventHandler(async (event) => {
-  const { code, lang, theme: themeString } = getQuery(event);
-  const theme = JSON.parse(themeString);
-  const shikiHighlighter = useShikiHighlighter({});
-  const styleMap = {};
-  const { tree, className } = await shikiHighlighter.getHighlightedAST(code, lang, theme, { styleMap });
-  return {
-    tree,
-    className,
-    style: shikiHighlighter.generateStyles(styleMap),
-    styleMap
-  };
+import { useRuntimeConfig } from "#imports";
+export default lazyEventHandler(async () => {
+  const { highlight } = useRuntimeConfig().mdc;
+  try {
+    const wasm = await import("shikiji/onig.wasm").then((r) => r.default);
+    await loadWasm(async (obj) => WebAssembly.instantiate(wasm, obj));
+  } catch {
+    await loadWasm({ data: await import("shikiji/wasm").then((r) => r.getWasmInlined()).then((r) => r.data) });
+  }
+  const shiki = useShikiHighlighter(highlight);
+  return eventHandler(async (event) => {
+    const { code, lang, theme: themeString, highlights: highlightsString } = getQuery(event);
+    const theme = JSON.parse(themeString);
+    const highlights = highlightsString ? JSON.parse(highlightsString) : void 0;
+    return await shiki.getHighlightedAST(code, lang, theme, { highlights });
+  });
 });

package/dist/runtime/shiki/highlighter.d.ts

@@ -1,25 +1,5 @@
-import { Lang } from 'shiki-es';
-import type { HighlighterOptions, Theme, TokenStyleMap } from './types';
-import type { Element } from '../types/hast';
+import { type BuiltinLanguage } from 'shikiji';
+import type { HighlightResult, HighlighterOptions, Theme } from './types';
 export declare const useShikiHighlighter: (opts?: any) => {
-    getHighlightedTokens: (code: string, lang: Lang, theme: Theme) => Promise<{
-        code: string;
-        lang: Lang;
-        theme: {
-            [k: string]: import("shiki-es").IShikiTheme;
-        };
-        tokens: {
-            content: string;
-        }[][];
-    }>;
-    getHighlightedAST: (code: string, lang: Lang, theme: Theme, opts?: Partial<HighlighterOptions>) => Promise<{
-        tree: Element[];
-        className: string;
-    }>;
-    getHighlightedCode: (code: string, lang: Lang, theme: Theme, opts?: Partial<HighlighterOptions>) => Promise<{
-        code: string;
-        className: string;
-        styles: string;
-    }>;
-    generateStyles: (styleMap: TokenStyleMap) => string;
+    getHighlightedAST: (code: string, lang: BuiltinLanguage, theme: Theme, opts?: Partial<HighlighterOptions>) => Promise<HighlightResult>;
 };