@nuxtjs/mdc 0.2.5 → 0.2.7

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { createResolver, extendViteConfig, defineNuxtModule, addTemplate, addComponent, addImports, addComponentsDir, addServerHandler } from '@nuxt/kit';
+import { createResolver, extendViteConfig, defineNuxtModule, addServerHandler, addTemplate, addComponent, addImports, addComponentsDir } from '@nuxt/kit';
 import fs from 'fs';
 import { pascalCase } from 'scule';
 import { defu } from 'defu';
@@ -132,6 +132,14 @@ const module = defineNuxtModule({
         "hast-util-raw"
       );
     });
+    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") });
+      options.rehypePlugins = options.rehypePlugins || {};
+      options.rehypePlugins.highlight = options.rehypePlugins.highlight || {};
+      options.rehypePlugins.highlight.src = options.rehypePlugins.highlight.src || resolver.resolve("./runtime/shiki/index");
+    }
     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 || {};
@@ -148,11 +156,6 @@ const module = defineNuxtModule({
         global: true
       });
     }
-    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

@@ -6,9 +6,10 @@
     :excerpt="data?.excerpt"
   >
     <MDCRenderer
+      v-if="body"
       :tag="tag"
       :class="props.class"
-      :body="excerpt ? data?.excerpt : data?.body"
+      :body="body"
       :data="data?.data"
     />
   </slot>
@@ -65,6 +66,8 @@ const { data, refresh } = await useAsyncData(key.value, async () => {
   return await parseMarkdown(props.value, props.parserOptions)
 })
 
+const body = computed(() => props.excerpt ? data.value?.excerpt : data.value?.body)
+
 watch(() => props.value, () => {
   refresh()
 })

package/dist/runtime/components/MDCRenderer.vue

@@ -3,7 +3,7 @@ import { h, resolveComponent, Text, defineComponent, toRaw, computed } from "vue
 import destr from "destr";
 import { kebabCase, pascalCase } from "scule";
 import { find, html } from "property-information";
-import { useRoute, useRuntimeConfig } from "#app";
+import { useRoute, useRuntimeConfig } from "#imports";
 import htmlTags from "../parser/utils/html-tags-list";
 const DEFAULT_SLOT = "default";
 const rxOn = /^@|^v-on:/;

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

@@ -1,14 +1,17 @@
 <template>
-  <div>
-    Rendering the <ProseCode>script</ProseCode> element is dangerous and is disabled by default. Consider implementing your own <ProseCode>ProseScript</ProseCode> element to have control over script rendering.
+  <div v-if="isDev">
+    Rendering the <code>script</code> element is dangerous and is disabled by default. Consider implementing your own <code>ProseScript</code> element to have control over script rendering.
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 defineProps({
   src: {
     type: String,
     default: ''
   }
 })
+const isDev = computed(() => process.dev)
 </script>

package/dist/runtime/parser/index.mjs

@@ -6,7 +6,6 @@ import { defu } from "defu";
 import { useProcessorPlugins } from "./utils/plugins.mjs";
 import { compileHast } from "./compiler.mjs";
 import { defaults } from "./options.mjs";
-import { rehypeShiki } from "../shiki/index.mjs";
 import { generateToc } from "./toc.mjs";
 import { nodeTextContent } from "../utils/node.mjs";
 let moduleOptions;
@@ -22,14 +21,14 @@ export const parseMarkdown = async (md, opts = {}) => {
     rehype: { plugins: moduleOptions?.rehypePlugins },
     highlight: moduleOptions?.highlight
   }, defaults);
+  if (options.rehype?.plugins?.highlight) {
+    options.rehype.plugins.highlight.options = options.highlight || {};
+  }
   const { content, data: frontmatter } = await parseFrontMatter(md);
   const processor = unified();
   processor.use(remarkParse);
   await useProcessorPlugins(processor, options.remark?.plugins);
   processor.use(remark2rehype, options.rehype?.options);
-  if (options.highlight) {
-    processor.use(rehypeShiki, options.highlight);
-  }
   await useProcessorPlugins(processor, options.rehype?.plugins);
   processor.use(compileHast);
   const processedFile = await processor.process({ value: content, data: frontmatter });

package/dist/runtime/parser/toc.d.ts

@@ -1,3 +1,3 @@
-import { MDCNode, Toc, MDCElement, MDCRoot } from '../types';
+import type { MDCNode, Toc, MDCElement, MDCRoot } from '../types';
 export declare function generateFlatToc(body: MDCNode, options: Toc): Toc;
 export declare function generateToc(body: MDCElement | MDCRoot, options: Toc): Toc;

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

@@ -1,3 +1,3 @@
-import { Processor } from 'remark-rehype/lib';
-import { MDCParseOptions } from '../../types';
+import type { Processor } from 'remark-rehype/lib';
+import type { MDCParseOptions } from '../../types';
 export declare const useProcessorPlugins: (processor: Processor, plugins?: Exclude<MDCParseOptions['rehype'] | MDCParseOptions['remark'], undefined>['plugins']) => Promise<void>;

package/dist/runtime/shiki/highlighter.mjs

@@ -55,21 +55,23 @@ export const useShikiHighlighter = createSingleton((opts) => {
               node.properties.class = (node.properties.class || "") + " highlight";
             }
             node.properties.line = line;
-            if (node.children.length === 0) {
-              node.children.push({
-                type: "element",
-                tagName: "span",
-                properties: {
-                  emptyLinePlaceholder: true
-                },
-                children: [{ type: "text", value: "" }]
-              });
-            }
-            const last = node.children.at(-1);
-            if (last?.type === "element" && last.tagName === "span") {
-              const text = last.children.at(-1);
-              if (text?.type === "text")
-                text.value += "\n";
+            if (code?.includes("\n")) {
+              if (node.children.length === 0) {
+                node.children.push({
+                  type: "element",
+                  tagName: "span",
+                  properties: {
+                    emptyLinePlaceholder: true
+                  },
+                  children: [{ type: "text", value: "" }]
+                });
+              }
+              const last = node.children.at(-1);
+              if (last?.type === "element" && last.tagName === "span") {
+                const text = last.children.at(-1);
+                if (text?.type === "text")
+                  text.value += "\n";
+              }
             }
           }
         }

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

@@ -4,5 +4,5 @@ interface RehypeShikiOption {
     theme?: Theme;
     highlighter?: Highlighter;
 }
+export default rehypeShiki;
 export declare function rehypeShiki(opts?: RehypeShikiOption): (tree: Root) => Promise<void>;
-export {};

package/dist/runtime/shiki/index.mjs

@@ -29,6 +29,7 @@ const defaults = {
     return Promise.resolve({ tree: [{ type: "text", value: code }], className: "", style: "" });
   }
 };
+export default rehypeShiki;
 export function rehypeShiki(opts = {}) {
   const options = { ...defaults, ...opts };
   return async (tree) => {

package/dist/runtime/types/parser.d.ts

@@ -1,5 +1,5 @@
 import type { Options as RehypeOption } from 'remark-rehype';
-import { Theme, Highlighter } from '../shiki/types';
+import type { Theme, Highlighter } from '../shiki/types';
 export interface RemarkPlugin {
     instance?: any;
     options?: Array<any> | Record<string, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/mdc",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Nuxt MDC module",
   "repository": "nuxt-modules/mdc",
   "license": "MIT",
@@ -58,7 +58,7 @@
     "remark-mdc": "^2.1.0",
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
-    "scule": "^1.0.0",
+    "scule": "^1.1.0",
     "shikiji": "^0.6.10",
     "ufo": "^1.3.1",
     "unified": "^11.0.3",
@@ -73,7 +73,7 @@
     "@nuxt/test-utils": "^3.8.0",
     "@nuxthq/ui": "^2.7.0",
     "@types/mdurl": "^1.0.4",
-    "@types/node": "^20.8.8",
+    "@types/node": "^20.8.9",
     "changelogen": "^0.5.5",
     "eslint": "^8.52.0",
     "nuxt": "^3.8.0",