@nuxtjs/mdc 0.16.0 → 0.17.0

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.4762b8bc.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 { BundledLanguage, LanguageRegistration, BundledTheme, ThemeRegistrationAny } from 'shiki';
 import { Options } from 'remark-rehype';
-import { R as RehypeHighlightOption, M as MdcConfig, a as MdcThemeOptions } from './shared/mdc.4762b8bc.mjs';
-export { A as Awaitable, b as HighlightResult, c as Highlighter, H as HighlighterOptions, d as defineConfig } from './shared/mdc.4762b8bc.mjs';
+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 = {
@@ -69,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.
      *
@@ -567,4 +578,5 @@ declare module '@nuxt/schema' {
     }
 }
 
-export { type Comment, type CommentData, type Content, type Data, DefaultHighlightLangs, type Doctype, type DoctypeData, type Element, type ElementContent, type ElementContentMap, type ElementData, type Literal, type Literals, type MDCComment, type MDCData, type MDCElement, type MDCNode, type MDCParseOptions, type MDCParserResult, type MDCRenderOptions, type MDCRoot, type MDCStringifyOptions, type MDCText, MdcConfig, MdcThemeOptions, type ModuleOptions, type Node, type Nodes, type Parent, type Parents, type Properties, RehypeHighlightOption, type RehypePlugin, type RemarkPlugin, type Root, type RootContent, type RootContentMap, type RootData, type Text, type TextData, type Toc, type TocLink, type UnistPlugin, _default as default };
+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.0",
+  "version": "0.17.0",
   "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';
 
@@ -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" });

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>

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

@@ -0,0 +1,155 @@
+import { type PropType, type DefineComponent } 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: 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;
+    };
+    /**
+     * The map of custom components to use for rendering.
+     */
+    components: {
+        type: PropType<Record<string, string | DefineComponent<any, any, any>>>;
+        default: () => {};
+    };
+}>, {}, {}, {}, {}, 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;
+    };
+    /**
+     * The map of custom components to use for rendering.
+     */
+    components: {
+        type: PropType<Record<string, string | DefineComponent<any, any, any>>>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    tag: string | boolean;
+    excerpt: boolean;
+    parserOptions: MDCParseOptions;
+    class: string | unknown[] | Record<string, any>;
+    unwrap: string | boolean;
+    cacheKey: string;
+    partial: boolean;
+    components: Record<string, string | DefineComponent<any, any, any>>;
+}, {}, {}, {}, 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;
+    };
+};