@nuxtjs/mdc 0.16.1 → 0.17.1

package/README.md

@@ -22,7 +22,7 @@ MDC supercharges regular Markdown to write documents interacting deeply with any
 - Support asynchronous rendering of nested components
 - Add attributes and classes to inline HTML tags
 
-Learn more about the MDC syntax on https://content.nuxtjs.org/guide/writing/mdc
+Learn more about the MDC syntax on https://content.nuxt.com/docs/files/markdown
 
 > [!Note]
 > You may utilize this package inside of your Nuxt project (standard configuration) or within any Vue project.
@@ -381,13 +381,13 @@ import {
   createShikiHighlighter,
 } from '@nuxtjs/mdc/runtime'
 // Import desired Shiki themes and languages
-import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
-import HtmlLang from 'shiki/langs/html.mjs'
-import MdcLang from 'shiki/langs/mdc.mjs'
-import TsLang from 'shiki/langs/typescript.mjs'
-import VueLang from 'shiki/langs/vue.mjs'
-import ScssLang from 'shiki/langs/scss.mjs'
-import YamlLang from 'shiki/langs/yaml.mjs'
+import MaterialThemePalenight from '@shikijs/themes/material-theme-palenight'
+import HtmlLang from '@shikijs/langs/html'
+import MdcLang from '@shikijs/langs/mdc'
+import TsLang from '@shikijs/langs/typescript'
+import VueLang from '@shikijs/langs/vue'
+import ScssLang from '@shikijs/langs/scss'
+import YamlLang from '@shikijs/langs/yaml'
 
 export default function useMarkdownParser() {
   let parser: Awaited<ReturnType<typeof createMarkdownParser>>

package/dist/config.d.mts

@@ -1,4 +1,4 @@
-export { d as defineConfig } from './shared/mdc.86c0ccda.mjs';
+export { d as defineConfig } from './shared/mdc.BkZUOs7X.mjs';
 import 'shiki';
 import 'unified';
 import 'hast';

package/dist/module.d.mts

@@ -1,25 +1,32 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import type { BundledLanguage, BundledTheme, LanguageRegistration, ThemeRegistrationAny } from 'shiki';
-import type { Options } from 'remark-rehype';
-import type { M as MdcConfig, R as RehypeHighlightOption, a as MdcThemeOptions } from './shared/mdc.86c0ccda.mjs';
-export { A as Awaitable, b as HighlightResult, c as Highlighter, H as HighlighterOptions, d as defineConfig } from './shared/mdc.86c0ccda.mjs';
-import type { Options as Options$1 } from 'remark-stringify';
+import { BundledLanguage, LanguageRegistration, BundledTheme, ThemeRegistrationAny } from 'shiki';
+import { Options } from 'remark-rehype';
+import { R as RehypeHighlightOption, M as MdcConfig, a as MdcThemeOptions } from './shared/mdc.BkZUOs7X.mjs';
+export { A as Awaitable, b as HighlightResult, c as Highlighter, H as HighlighterOptions, d as defineConfig } from './shared/mdc.BkZUOs7X.mjs';
+import { Options as Options$1 } from 'remark-stringify';
 import 'unified';
 import 'hast';
 
+type NodePosition = {
+    start: number;
+    end: number;
+};
 type MDCText = {
     type: 'text';
     value: string;
+    position?: NodePosition;
 };
 type MDCComment = {
     type: 'comment';
     value: string;
+    position?: NodePosition;
 };
 type MDCElement = {
     type: 'element';
     tag: string;
     props: Record<string, any> | undefined;
     children: Array<MDCElement | MDCText | MDCComment>;
+    position?: NodePosition;
 };
 type MDCNode = MDCElement | MDCText | MDCComment;
 type MDCRoot = {
@@ -44,14 +51,6 @@ interface Toc {
     links: TocLink[];
 }
 
-
-
-
-
-
-
-
-
 interface RemarkPlugin {
     instance?: any;
     options?: Array<any> | Record<string, any>;
@@ -77,6 +76,10 @@ interface MDCParseOptions {
         searchDepth?: number;
     } | false;
     keepComments?: boolean;
+    /**
+     * Keep the position of the node
+     */
+    keepPosition?: boolean;
     /**
      * Extract content heading from the markdown file.
      *
@@ -95,8 +98,6 @@ interface MDCParserResult {
     toc: Toc | undefined;
 }
 
-
-
 interface MDCStringifyOptions {
     plugins?: {
         remarkStringify?: {
@@ -105,15 +106,6 @@ interface MDCStringifyOptions {
     };
 }
 
-
-
-
-
-
-
-
-
-
 interface UnistPlugin {
     src?: string;
     options?: Record<string, any>;
@@ -300,14 +292,6 @@ interface Parent$1 extends Node$1 {
     children: Node$1[];
 }
 
-
-
-
-
-
-
-
-
 /**
  * Info associated with hast nodes by the ecosystem.
  *
@@ -557,17 +541,12 @@ interface Text extends Literal {
  */
 type TextData = Data;
 
-
-
 interface MDCRenderOptions {
     documentMeta: MDCData;
     parentScope: any;
     resolveComponent: (component: any) => any;
 }
 
-
-
-
 declare const DefaultHighlightLangs: BundledLanguage[];
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
@@ -599,5 +578,5 @@ declare module '@nuxt/schema' {
     }
 }
 
-export { DefaultHighlightLangs, _default as default };
-export type { Comment, CommentData, Content, Data, Doctype, DoctypeData, Element, ElementContent, ElementContentMap, ElementData, Literal, Literals, MDCComment, MDCData, MDCElement, MDCNode, MDCParseOptions, MDCParserResult, MDCRenderOptions, MDCRoot, MDCStringifyOptions, MDCText, MdcConfig, MdcThemeOptions, ModuleOptions, Node, Nodes, Parent, Parents, Properties, RehypeHighlightOption, RehypePlugin, RemarkPlugin, Root, RootContent, RootContentMap, RootData, Text, TextData, Toc, TocLink, UnistPlugin };
+export { DefaultHighlightLangs, MdcConfig, MdcThemeOptions, RehypeHighlightOption, _default as default };
+export type { Comment, CommentData, Content, Data, Doctype, DoctypeData, Element, ElementContent, ElementContentMap, ElementData, Literal, Literals, MDCComment, MDCData, MDCElement, MDCNode, MDCParseOptions, MDCParserResult, MDCRenderOptions, MDCRoot, MDCStringifyOptions, MDCText, ModuleOptions, Node, NodePosition, Nodes, Parent, Parents, Properties, RehypePlugin, RemarkPlugin, Root, RootContent, RootContentMap, RootData, Text, TextData, Toc, TocLink, UnistPlugin };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@nuxtjs/mdc",
   "configKey": "mdc",
-  "version": "0.16.1",
+  "version": "0.17.1",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
   }
 }

package/dist/module.mjs

@@ -3,6 +3,7 @@ import { extendViteConfig, useNitro, defineNuxtModule, createResolver, addServer
 import { defu } from 'defu';
 import { resolve } from 'pathe';
 import fs from 'node:fs/promises';
+import { bundledLanguagesInfo } from 'shiki/bundle/full';
 import { pascalCase } from 'scule';
 export { defineConfig } from './config.mjs';
 
@@ -11,7 +12,7 @@ const registerMDCSlotTransformer = (resolver) => {
     const compilerOptions = config.vue.template.compilerOptions;
     compilerOptions.nodeTransforms = [
       function viteMDCSlot(node, context) {
-        const isVueSlotWithUnwrap = node.tag === "slot" && node.props.find((p) => p.name === "mdc-unwrap" || p.name === "bind" && p.rawName === ":mdc-unwrap");
+        const isVueSlotWithUnwrap = node.tag === "slot" && node.props.find((p) => p.name === "mdc-unwrap" || p.name === "mdcUnwrap" || p.name === "bind" && p.rawName === ":mdc-unwrap");
         const isMDCSlot = node.tag === "MDCSlot";
         if (isVueSlotWithUnwrap || isMDCSlot) {
           const transform = context.ssr ? context.nodeTransforms.find((nt) => nt.name === "ssrTransformSlotOutlet") : context.nodeTransforms.find((nt) => nt.name === "transformSlotOutlet");
@@ -79,7 +80,10 @@ async function mdcHighlighter({
         "import.meta.client ? import('shiki/wasm') : import('shiki/onig.wasm')"
       );
     }
-    const { bundledLanguagesInfo } = await import('shiki/langs');
+    code = code.replace(
+      /from\s+(['"])shiki\1/,
+      'from "shiki/engine/javascript"'
+    );
     const langsMap = /* @__PURE__ */ new Map();
     options.langs?.forEach((lang) => {
       if (typeof lang === "string") {
@@ -104,13 +108,13 @@ async function mdcHighlighter({
     } = options;
     return [
       "import { getMdcConfigs } from '#mdc-configs'",
-      shikiEngine === "javascript" ? "import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'" : "import { createOnigurumaEngine } from 'shiki/engine/oniguruma'",
+      shikiEngine === "javascript" ? "" : "import { createOnigurumaEngine } 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) + ","),
+      ...Array.from(langsMap.entries()).map(([name, lang]) => typeof lang === "string" ? JSON.stringify(name) + `: () => import('@shikijs/langs/${lang}').then(r => r.default || r),` : JSON.stringify(name) + ": " + JSON.stringify(lang) + ","),
       "}",
       "const bundledThemes = {",
-      ...themes.map((theme) => typeof theme === "string" ? JSON.stringify(theme) + `: () => import('shiki/themes/${theme}.mjs').then(r => r.default),` : JSON.stringify(theme.name) + ": " + JSON.stringify(theme) + ","),
+      ...themes.map((theme) => typeof theme === "string" ? JSON.stringify(theme) + `: () => import('@shikijs/themes/${theme}').then(r => r.default || r),` : JSON.stringify(theme.name) + ": " + JSON.stringify(theme) + ","),
       "}",
       "const options = " + JSON.stringify({
         theme: options.theme,
@@ -326,6 +330,7 @@ const module = defineNuxtModule({
       options
     });
     addComponent({ name: "MDC", filePath: resolver.resolve("./runtime/components/MDC") });
+    addComponent({ name: "MDCCached", filePath: resolver.resolve("./runtime/components/MDCCached") });
     addComponent({ name: "MDCRenderer", filePath: resolver.resolve("./runtime/components/MDCRenderer") });
     addComponent({ name: "MDCSlot", filePath: resolver.resolve("./runtime/components/MDCSlot") });
     addImports({ from: resolver.resolve("./runtime/utils/node"), name: "flatUnwrap", as: "unwrapSlot" });
@@ -345,7 +350,7 @@ const module = defineNuxtModule({
       filename: "mdc-image-component.mjs",
       write: true,
       getContents: ({ app }) => {
-        const image = app.components.find((c) => c.pascalName === "NuxtImg" && !c.filePath.includes("nuxt/dist/app"));
+        const image = app.components.find((c) => c.pascalName === "NuxtImg" && !c.filePath.includes("nuxt/dist/app") && !c.filePath.includes("nuxt-nightly/dist/app"));
         return image ? `export { default } from "${image.filePath}"` : 'export default "img"';
       }
     });

package/dist/runtime/components/MDC.vue

@@ -17,16 +17,13 @@
   </slot>
 </template>
 
-<script setup lang="ts">
-import { useAsyncData } from 'nuxt/app'
-import { watch, computed, type PropType } from 'vue'
-import type { MDCParseOptions } from '@nuxtjs/mdc'
-import { parseMarkdown } from '../parser'
-
+<script setup>
+import { useAsyncData } from "nuxt/app";
+import { watch, computed } from "vue";
 const props = defineProps({
   tag: {
     type: [String, Boolean],
-    default: 'div'
+    default: "div"
   },
   /**
    * Raw markdown string or parsed markdown object from `parseMarkdown`
@@ -46,7 +43,7 @@ const props = defineProps({
    * Options for `parseMarkdown`
    */
   parserOptions: {
-    type: Object as PropType<MDCParseOptions>,
+    type: Object,
     default: () => ({})
   },
   /**
@@ -54,7 +51,7 @@ const props = defineProps({
    */
   class: {
     type: [String, Array, Object],
-    default: ''
+    default: ""
   },
   /**
    * Tags to unwrap separated by spaces
@@ -70,7 +67,7 @@ const props = defineProps({
    */
   cacheKey: {
     type: String,
-    default: undefined
+    default: void 0
   },
   /**
    * Partial parsing (if partial is `true`, title and toc generation will not be generated)
@@ -79,38 +76,33 @@ const props = defineProps({
     type: Boolean,
     default: true
   }
-})
-
-const key = computed(() => props.cacheKey ?? hashString(props.value))
-
+});
+const key = computed(() => props.cacheKey ?? hashString(props.value));
 const { data, refresh, error } = await useAsyncData(key.value, async () => {
-  if (typeof props.value !== 'string') {
-    return props.value
+  if (typeof props.value !== "string") {
+    return props.value;
   }
+  const { parseMarkdown } = await import("@nuxtjs/mdc/runtime");
   return await parseMarkdown(props.value, {
     ...props.parserOptions,
     toc: props.partial ? false : props.parserOptions?.toc,
     contentHeading: props.partial ? false : props.parserOptions?.contentHeading
-  })
-})
-
-const body = computed(() => props.excerpt ? data.value?.excerpt : data.value?.body)
-
+  });
+});
+const body = computed(() => props.excerpt ? data.value?.excerpt : data.value?.body);
 watch(() => props.value, () => {
-  refresh()
-})
-
-// Simple string hashing function
-function hashString(str: string | object) {
-  if (typeof str !== 'string') {
-    str = JSON.stringify(str || '')
+  refresh();
+});
+function hashString(str) {
+  if (typeof str !== "string") {
+    str = JSON.stringify(str || "");
   }
-  let hash = 0
+  let hash = 0;
   for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i)
-    hash = ((hash << 6) - hash) + char
-    hash = hash & hash // Convert to 64bit integer
+    const char = str.charCodeAt(i);
+    hash = (hash << 6) - hash + char;
+    hash = hash & hash;
   }
-  return `mdc-${hash === 0 ? '0000' : hash.toString(36)}-key`
+  return `mdc-${hash === 0 ? "0000" : hash.toString(36)}-key`;
 }
 </script>

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

@@ -0,0 +1,140 @@
+import type { PropType } from 'vue';
+import type { MDCParseOptions } from '@nuxtjs/mdc';
+declare var __VLS_1: {
+    data: any;
+    body: any;
+    toc: any;
+    excerpt: any;
+    error: import("nuxt/app").NuxtError<unknown> | null;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tag: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: string;
+    };
+    /**
+     * Raw markdown string or parsed markdown object from `parseMarkdown`
+     */
+    value: {
+        type: (StringConstructor | ObjectConstructor)[];
+        required: true;
+    };
+    /**
+     * Render only the excerpt
+     */
+    excerpt: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Options for `parseMarkdown`
+     */
+    parserOptions: {
+        type: PropType<MDCParseOptions>;
+        default: () => {};
+    };
+    /**
+     * Class to be applied to the root element
+     */
+    class: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * Tags to unwrap separated by spaces
+     * Example: 'ul li'
+     */
+    unwrap: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    /**
+     * Async Data Unique Key
+     * @default `hash(props.value)`
+     */
+    cacheKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * Partial parsing (if partial is `true`, title and toc generation will not be generated)
+     */
+    partial: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: string;
+    };
+    /**
+     * Raw markdown string or parsed markdown object from `parseMarkdown`
+     */
+    value: {
+        type: (StringConstructor | ObjectConstructor)[];
+        required: true;
+    };
+    /**
+     * Render only the excerpt
+     */
+    excerpt: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Options for `parseMarkdown`
+     */
+    parserOptions: {
+        type: PropType<MDCParseOptions>;
+        default: () => {};
+    };
+    /**
+     * Class to be applied to the root element
+     */
+    class: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    /**
+     * Tags to unwrap separated by spaces
+     * Example: 'ul li'
+     */
+    unwrap: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    /**
+     * Async Data Unique Key
+     * @default `hash(props.value)`
+     */
+    cacheKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * Partial parsing (if partial is `true`, title and toc generation will not be generated)
+     */
+    partial: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    tag: string | boolean;
+    excerpt: boolean;
+    parserOptions: MDCParseOptions;
+    class: string | unknown[] | Record<string, any>;
+    unwrap: string | boolean;
+    cacheKey: string;
+    partial: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MDCCached.vue

@@ -0,0 +1,117 @@
+<template>
+  <slot
+    :data="data?.data"
+    :body="data?.body"
+    :toc="data?.toc"
+    :excerpt="data?.excerpt"
+    :error="error"
+  >
+    <MDCRenderer
+      v-if="body"
+      :tag="props.tag"
+      :class="props.class"
+      :body="body"
+      :data="data?.data"
+      :unwrap="props.unwrap"
+      :components="props.components"
+    />
+  </slot>
+</template>
+
+<script setup>
+import { useAsyncData } from "nuxt/app";
+import { watch, computed } from "vue";
+import { createCachedParser } from "@nuxtjs/mdc/runtime";
+const props = defineProps({
+  tag: {
+    type: [String, Boolean],
+    default: "div"
+  },
+  /**
+   * Raw markdown string or parsed markdown object from `parseMarkdown`
+   */
+  value: {
+    type: [String, Object],
+    required: true
+  },
+  /**
+   * Render only the excerpt
+   */
+  excerpt: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Options for `parseMarkdown`
+   */
+  parserOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * Class to be applied to the root element
+   */
+  class: {
+    type: [String, Array, Object],
+    default: ""
+  },
+  /**
+   * Tags to unwrap separated by spaces
+   * Example: 'ul li'
+   */
+  unwrap: {
+    type: [Boolean, String],
+    default: false
+  },
+  /**
+   * Async Data Unique Key
+   * @default `hash(props.value)`
+   */
+  cacheKey: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * Partial parsing (if partial is `true`, title and toc generation will not be generated)
+   */
+  partial: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * The map of custom components to use for rendering.
+   */
+  components: {
+    type: Object,
+    default: () => ({})
+  }
+});
+const key = computed(() => props.cacheKey ?? hashString(props.value));
+const parse = createCachedParser({
+  ...props.parserOptions,
+  toc: props.partial ? false : props.parserOptions?.toc,
+  contentHeading: props.partial ? false : props.parserOptions?.contentHeading
+});
+const { data, refresh, error } = await useAsyncData(key.value, async () => {
+  if (typeof props.value !== "string") {
+    return props.value;
+  }
+  return await parse(props.value);
+});
+const body = computed(() => props.excerpt ? data.value?.excerpt : data.value?.body);
+watch(() => props.value, () => {
+  refresh();
+});
+function hashString(str) {
+  if (typeof str !== "string") {
+    str = JSON.stringify(str || "");
+  }
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 6) - hash + char;
+    hash = hash & hash;
+  }
+  return `mdc-${hash === 0 ? "0000" : hash.toString(36)}-key`;
+}
+</script>