@nuxtjs/mdc 0.9.0 → 0.9.1

package/dist/module.d.mts

@@ -122,6 +122,15 @@ interface ModuleOptions {
          * Additional themes to be bundled loaded by Shiki
          */
         themes?: (BundledTheme | ThemeRegistrationAny)[];
+        /**
+         * Engine to be used for Shiki
+         *
+         * Note that the `javascript` engine still in experimental, use with caution.
+         *
+         * @see https://shiki.style/guide/regex-engines
+         * @default 'oniguruma'
+         */
+        shikiEngine?: 'oniguruma' | 'javascript';
         /**
          * Preloaded languages that will be available for highlighting code blocks.
          *
@@ -134,6 +143,7 @@ interface ModuleOptions {
          * @default false
          */
         wrapperStyle?: boolean | string;
+        noApiRoute?: boolean;
     } | false;
     headings?: {
         anchorLinks?: {
@@ -519,7 +529,6 @@ declare module '@nuxt/schema' {
                 map: Record<string, string>;
             };
             headings: ModuleOptions['headings'];
-            useNuxtImage?: boolean;
         };
     }
     interface ConfigSchema {

package/dist/module.d.ts

@@ -122,6 +122,15 @@ interface ModuleOptions {
          * Additional themes to be bundled loaded by Shiki
          */
         themes?: (BundledTheme | ThemeRegistrationAny)[];
+        /**
+         * Engine to be used for Shiki
+         *
+         * Note that the `javascript` engine still in experimental, use with caution.
+         *
+         * @see https://shiki.style/guide/regex-engines
+         * @default 'oniguruma'
+         */
+        shikiEngine?: 'oniguruma' | 'javascript';
         /**
          * Preloaded languages that will be available for highlighting code blocks.
          *
@@ -134,6 +143,7 @@ interface ModuleOptions {
          * @default false
          */
         wrapperStyle?: boolean | string;
+        noApiRoute?: boolean;
     } | false;
     headings?: {
         anchorLinks?: {
@@ -519,7 +529,6 @@ declare module '@nuxt/schema' {
                 map: Record<string, string>;
             };
             headings: ModuleOptions['headings'];
-            useNuxtImage?: boolean;
         };
     }
     interface ConfigSchema {

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxtjs/mdc",
   "configKey": "mdc",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import fs$1, { existsSync } from 'node:fs';
-import { extendViteConfig, useNitro, defineNuxtModule, createResolver, addServerHandler, addComponent, addImports, addServerImports, addComponentsDir, hasNuxtModule, addTemplate } from '@nuxt/kit';
+import { extendViteConfig, useNitro, defineNuxtModule, createResolver, addServerHandler, addComponent, addImports, addServerImports, addComponentsDir, addTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
 import { resolve } from 'pathe';
 import fs from 'node:fs/promises';
@@ -97,8 +97,12 @@ async function mdcHighlighter({
       ...typeof options?.theme === "string" ? [options?.theme] : Object.values(options?.theme || {}),
       ...options?.themes || []
     ]));
+    const {
+      shikiEngine = "oniguruma"
+    } = options;
     return [
       "import { getMdcConfigs } from '#mdc-configs'",
+      shikiEngine === "javascript" ? "import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'" : "import { createWasmOnigEngine } from 'shiki/engine/oniguruma'",
       code,
       "const bundledLangs = {",
       ...Array.from(langsMap.entries()).map(([name, lang]) => typeof lang === "string" ? JSON.stringify(name) + `: () => import('shiki/langs/${lang}.mjs'),` : JSON.stringify(name) + ": " + JSON.stringify(lang) + ","),
@@ -110,7 +114,8 @@ async function mdcHighlighter({
         theme: options.theme,
         wrapperStyle: options.wrapperStyle
       }),
-      "const highlighter = createShikiHighlighter({ bundledLangs, bundledThemes, options, getMdcConfigs })",
+      shikiEngine === "javascript" ? "const engine = createJavaScriptRegexEngine({ forgiving: true })" : `const engine = createWasmOnigEngine(() => import('shiki/wasm'))`,
+      "const highlighter = createShikiHighlighter({ bundledLangs, bundledThemes, options, getMdcConfigs, engine })",
       "export default highlighter"
     ].join("\n");
   }
@@ -248,10 +253,12 @@ const module = defineNuxtModule({
     });
     if (options.highlight) {
       addWasmSupport(nuxt);
-      addServerHandler({
-        route: "/api/_mdc/highlight",
-        handler: resolver.resolve("./runtime/highlighter/event-handler")
-      });
+      if (options.highlight?.noApiRoute !== true) {
+        addServerHandler({
+          route: "/api/_mdc/highlight",
+          handler: resolver.resolve("./runtime/highlighter/event-handler")
+        });
+      }
       options.rehypePlugins ||= {};
       options.rehypePlugins.highlight ||= {};
       options.rehypePlugins.highlight.src ||= await resolver.resolvePath("./runtime/highlighter/rehype-nuxt");
@@ -322,11 +329,10 @@ const module = defineNuxtModule({
         global: true
       });
     }
-    if (hasNuxtModule("@nuxt/image")) {
-      nuxt.options.runtimeConfig.public.mdc = defu(nuxt.options.runtimeConfig.public.mdc, {
-        useNuxtImage: true
-      });
-    }
+    addTemplate({
+      filename: "mdc-image-component.mjs",
+      getContents: ({ app }) => app.components.some((c) => c.pascalName === "NuxtImg" && !c.filePath.includes("nuxt/dist/app")) ? 'export { NuxtImg } from "#components"' : 'export default "img"'
+    });
     extendViteConfig((config) => {
       const include = [
         "remark-gfm",
@@ -393,6 +399,7 @@ function resolveOptions(options) {
       default: "github-light",
       dark: "github-dark"
     };
+    options.highlight.shikiEngine ||= "oniguruma";
     options.highlight.langs ||= DefaultHighlightLangs;
     if (options.highlight.preload) {
       options.highlight.langs.push(...options.highlight.preload || []);

package/dist/runtime/components/MDCRenderer.vue

@@ -29,7 +29,7 @@ export default defineComponent({
       default: () => ({})
     },
     /**
-     * Root tag to use for rendering
+     * Class(es) to bind to the component
      */
     class: {
       type: [String, Object],
@@ -234,11 +234,8 @@ function propsToDataRxBind(key, value, data, documentMeta) {
   return data;
 }
 const resolveVueComponent = (component) => {
-  if (!htmlTags.includes(component) && !component?.render && !component?.ssrRender) {
-    const componentFn = resolveComponent(pascalCase(component), false);
-    if (typeof componentFn === "object") {
-      return componentFn;
-    }
+  if (typeof component === "string") {
+    return htmlTags.includes(component) ? component : resolveComponent(pascalCase(component), false);
   }
   return component;
 };

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

@@ -16,7 +16,7 @@ declare const _default: DefineComponent<import("vue").ExtractPropTypes<{
         default: () => {};
     };
     /**
-     * Root tag to use for rendering
+     * Class(es) to bind to the component
      */
     class: {
         type: (ObjectConstructor | StringConstructor)[];
@@ -71,7 +71,7 @@ declare const _default: DefineComponent<import("vue").ExtractPropTypes<{
         default: () => {};
     };
     /**
-     * Root tag to use for rendering
+     * Class(es) to bind to the component
      */
     class: {
         type: (ObjectConstructor | StringConstructor)[];

package/dist/runtime/components/prose/ProseImg.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="imgComponent"
+    :is="ImageComponent"
     :src="refinedSrc"
     :alt="props.alt"
     :width="props.width"
@@ -10,9 +10,9 @@
 
 <script setup lang="ts">
 import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
-import { useRuntimeConfig, computed, resolveComponent } from '#imports'
+import { useRuntimeConfig, computed } from '#imports'
 
-const imgComponent = useRuntimeConfig().public.mdc.useNuxtImage ? resolveComponent('NuxtImg') : 'img'
+import ImageComponent from '#build/mdc-image-component.mjs'
 
 const props = defineProps({
   src: {

package/dist/runtime/highlighter/event-handler.js

@@ -1,8 +1,8 @@
 import { eventHandler, getQuery } from "h3";
-import highlighter from "#mdc-highlighter";
 export default eventHandler(async (event) => {
   const { code, lang, theme: themeString, options: optionsStr } = getQuery(event);
   const theme = JSON.parse(themeString);
   const options = optionsStr ? JSON.parse(optionsStr) : {};
+  const highlighter = await import("#mdc-highlighter").then((m) => m.default);
   return await highlighter(code, lang, theme, options);
 });

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

@@ -1,4 +1,4 @@
-import type { LanguageInput, ThemeInput } from 'shiki';
+import type { LanguageInput, ThemeInput, RegexEngine } from 'shiki';
 import type { MdcConfig, Highlighter } from '@nuxtjs/mdc';
 export interface CreateShikiHighlighterOptions {
     themes?: ThemeInput[];
@@ -9,5 +9,6 @@ export interface CreateShikiHighlighterOptions {
         wrapperStyle?: string;
     };
     getMdcConfigs?: () => Promise<MdcConfig[]>;
+    engine?: RegexEngine | Promise<RegexEngine>;
 }
-export declare function createShikiHighlighter({ langs, themes, bundledLangs, bundledThemes, getMdcConfigs, options: shikiOptions }?: CreateShikiHighlighterOptions): Highlighter;
+export declare function createShikiHighlighter({ langs, themes, bundledLangs, bundledThemes, getMdcConfigs, options: shikiOptions, engine }?: CreateShikiHighlighterOptions): Highlighter;

package/dist/runtime/highlighter/shiki.js

@@ -4,7 +4,8 @@ export function createShikiHighlighter({
   bundledLangs = {},
   bundledThemes = {},
   getMdcConfigs,
-  options: shikiOptions
+  options: shikiOptions,
+  engine
 } = {}) {
   let shiki;
   let configs;
@@ -14,7 +15,7 @@ export function createShikiHighlighter({
     const shiki2 = await createHighlighterCore({
       langs,
       themes,
-      loadWasm: () => import("shiki/wasm")
+      engine
     });
     for await (const config of await getConfigs()) {
       await config.shiki?.setup?.(shiki2);
@@ -65,14 +66,14 @@ export function createShikiHighlighter({
       lang = "vue";
       codeToHastOptions.grammarContextCode = "<template>";
     }
-    const themesObject = typeof theme === "string" ? { default: theme } : theme || {};
+    const themesObject = { ...typeof theme === "string" ? { default: theme } : theme || {} };
     const loadedThemes = shiki2.getLoadedThemes();
     const loadedLanguages = shiki2.getLoadedLanguages();
     if (typeof lang === "string" && !loadedLanguages.includes(lang) && !isSpecialLang(lang)) {
       if (bundledLangs[lang]) {
         await shiki2.loadLanguage(bundledLangs[lang]);
       } else {
-        if (import.meta.dev) {
+        if (process.dev) {
           console.warn(`[@nuxtjs/mdc] Language "${lang}" is not loaded to the Shiki highlighter, fallback to plain text. Add the language to "mdc.highlight.langs" to fix this.`);
         }
         lang = "text";
@@ -83,7 +84,7 @@ export function createShikiHighlighter({
         if (bundledThemes[theme2]) {
           await shiki2.loadTheme(bundledThemes[theme2]);
         } else {
-          if (import.meta.dev) {
+          if (process.dev) {
             console.warn(`[@nuxtjs/mdc] Theme "${theme2}" is not loaded to the Shiki highlighter. Add the theme to "mdc.highlight.themes" to fix this.`);
           }
           themesObject[color] = "none";

package/dist/runtime/parser/index.js

@@ -28,7 +28,7 @@ export const createMarkdownParser = async (inlineOptions = {}) => {
     ...inlineOptions.configs || []
   ];
   if (inlineOptions.highlight != null && inlineOptions.highlight != false && inlineOptions.highlight.highlighter !== void 0 && typeof inlineOptions.highlight.highlighter !== "function") {
-    if (import.meta.dev)
+    if (process.dev)
       console.warn("[@nuxtjs/mdc] `highlighter` passed to `parseMarkdown` is should be a function, but got " + JSON.stringify(inlineOptions.highlight.highlighter) + ", ignored.");
     inlineOptions = {
       ...inlineOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/mdc",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Nuxt MDC module",
   "repository": "nuxt-modules/mdc",
   "license": "MIT",
@@ -71,36 +71,36 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.1",
-    "@shikijs/transformers": "^1.17.0",
+    "@nuxt/kit": "^3.13.2",
+    "@shikijs/transformers": "^1.22.0",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
-    "@vue/compiler-core": "^3.5.4",
+    "@vue/compiler-core": "^3.5.12",
     "consola": "^3.2.3",
     "debug": "^4.3.7",
     "defu": "^6.1.4",
     "destr": "^2.0.3",
     "detab": "^3.0.2",
     "github-slugger": "^2.0.0",
-    "hast-util-to-string": "^3.0.0",
+    "hast-util-to-string": "^3.0.1",
     "mdast-util-to-hast": "^13.2.0",
     "micromark-util-sanitize-uri": "^2.0.0",
-    "ohash": "^1.1.3",
-    "parse5": "^7.1.2",
+    "ohash": "^1.1.4",
+    "parse5": "^7.2.0",
     "pathe": "^1.1.2",
     "property-information": "^6.5.0",
     "rehype-external-links": "^3.0.0",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
-    "rehype-sort-attribute-values": "^5.0.0",
-    "rehype-sort-attributes": "^5.0.0",
+    "rehype-sort-attribute-values": "^5.0.1",
+    "rehype-sort-attributes": "^5.0.1",
     "remark-emoji": "^5.0.1",
     "remark-gfm": "^4.0.0",
     "remark-mdc": "^3.2.1",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.0",
+    "remark-rehype": "^11.1.1",
     "scule": "^1.3.0",
-    "shiki": "^1.17.0",
+    "shiki": "^1.22.0",
     "ufo": "^1.5.4",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",
@@ -109,23 +109,23 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/eslint-config": "^0.6.0",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxt/test-utils": "^3.14.2",
-    "@nuxt/ui": "^2.18.4",
+    "@nuxt/schema": "^3.13.2",
+    "@nuxt/test-utils": "^3.14.3",
+    "@nuxt/ui": "^2.18.7",
     "@nuxtjs/mdc": "link:.",
-    "@types/node": "^22.5.4",
-    "changelogen": "^0.5.5",
-    "eslint": "^9.10.0",
-    "nuxt": "^3.13.1",
-    "rehype": "^13.0.1",
-    "release-it": "^17.6.0",
-    "typescript": "^5.6.2",
-    "vitest": "^2.0.5",
+    "@types/node": "^22.7.5",
+    "changelogen": "^0.5.7",
+    "eslint": "^9.12.0",
+    "nuxt": "^3.13.2",
+    "rehype": "^13.0.2",
+    "release-it": "^17.9.0",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.3",
     "vue-tsc": "^2.1.6"
   },
-  "packageManager": "pnpm@9.10.0",
+  "packageManager": "pnpm@9.12.1",
   "release-it": {
     "git": {
       "commitMessage": "chore(release): release v${version}"