@nuxtjs/mdc 0.1.6 → 0.2.1

package/dist/runtime/shiki/highlighter.mjs

@@ -1,29 +1,13 @@
-import { getHighlighter, BUNDLED_LANGUAGES, BUNDLED_THEMES, FontStyle } from "shiki-es";
-import { consola } from "consola";
-import mdcTMLanguage from "./mdc.tmLanguage.mjs";
-const logger = consola.withTag("@nuxtjs/mdc");
-const resolveLang = (lang) => BUNDLED_LANGUAGES.find((l) => l.id === lang || l.aliases?.includes(lang));
-const resolveTheme = (theme) => {
-  if (!theme) {
-    return;
-  }
-  if (typeof theme === "string") {
-    theme = {
-      default: theme
-    };
-  }
-  return Object.entries(theme).reduce((acc, [key, value]) => {
-    acc[key] = BUNDLED_THEMES.find((t) => t === value);
-    return acc;
-  }, {});
-};
+import { getHighlighter } from "shikiji";
 export const useShikiHighlighter = createSingleton((opts) => {
-  const { theme, preload } = opts || {};
+  const { theme, preload, wrapperStyle } = opts || {};
   let promise;
   const getShikiHighlighter = () => {
     if (!promise) {
       promise = getHighlighter({
-        theme: theme?.default || theme || "dark-plus",
+        themes: [
+          theme?.default || theme || "dark-plus"
+        ],
         langs: [
           ...preload || [],
           "diff",
@@ -36,13 +20,7 @@ export const useShikiHighlighter = createSingleton((opts) => {
           "md",
           "yaml",
           "vue",
-          {
-            id: "md",
-            scopeName: "text.markdown.mdc",
-            path: "mdc.tmLanguage.json",
-            aliases: ["markdown", "md", "mdc"],
-            grammar: mdcTMLanguage
-          }
+          "mdc"
         ]
       }).then((highlighter) => {
         const themes = Object.values(typeof theme === "string" ? { default: theme } : theme || {});
@@ -54,239 +32,55 @@ export const useShikiHighlighter = createSingleton((opts) => {
     }
     return promise;
   };
-  const splitCodeToLines = (code) => {
-    const lines = code.split(/\r\n|\r|\n/);
-    return [...lines.map((line) => [{ content: line }])];
-  };
-  const getHighlightedTokens = async (code, lang, theme2) => {
+  const getHighlightedAST = async (code, lang, theme2, opts2) => {
     const highlighter = await getShikiHighlighter();
-    code = code.replace(/\n+$/, "");
-    lang = resolveLang(lang || "")?.id || lang;
-    theme2 = resolveTheme(theme2 || "") || { default: highlighter.getTheme() };
-    const newThemes = Object.values(theme2).filter((t) => !highlighter.getLoadedThemes().includes(t));
-    if (newThemes.length) {
-      await Promise.all(newThemes.map(highlighter.loadTheme));
+    const { highlights = [] } = opts2 || {};
+    const themesObject = typeof theme2 === "string" ? { default: theme2 } : theme2 || {};
+    const themeNames = Object.values(themesObject);
+    if (themeNames.length) {
+      await Promise.all(themeNames.map((theme3) => highlighter.loadTheme(theme3)));
     }
-    const result = {
-      code,
-      lang,
-      theme: Object.fromEntries(Object.entries(theme2).map(([n, t]) => [n, highlighter.getTheme(t)])),
-      tokens: splitCodeToLines(code)
-    };
-    if (!lang) {
-      return result;
-    }
-    if (!highlighter.getLoadedLanguages().includes(lang)) {
-      const languageRegistration = resolveLang(lang);
-      if (languageRegistration) {
-        await highlighter.loadLanguage(languageRegistration);
-      } else {
-        logger.warn(`Language '${lang}' is not supported by shiki. Skipping highlight.`);
-        return result;
-      }
-    }
-    const coloredTokens = Object.entries(theme2).map(([key, theme3]) => {
-      const tokens = highlighter.codeToThemedTokens(code, lang, theme3, { includeExplanation: false }).map((line) => line.map((token) => ({
-        content: token.content,
-        style: {
-          [key]: { color: token.color, fontStyle: token.fontStyle }
-        }
-      })));
-      return {
-        key,
-        theme: theme3,
-        tokens
-      };
-    });
-    const highlightedCode = [];
-    for (const line in coloredTokens[0].tokens) {
-      highlightedCode[line] = coloredTokens.reduce((acc, color) => {
-        return mergeLines({
-          key: coloredTokens[0].key,
-          tokens: acc
-        }, {
-          key: color.key,
-          tokens: color.tokens[line]
-        });
-      }, coloredTokens[0].tokens[line]);
+    if (lang && !highlighter.getLoadedLanguages().includes(lang)) {
+      await highlighter.loadLanguage(lang);
     }
-    result.tokens = highlightedCode;
-    return result;
-  };
-  const getHighlightedAST = async (code, lang, theme2, opts2) => {
-    const { tokens, theme: themeMap } = await getHighlightedTokens(code, lang, theme2);
-    const { highlights = [], styleMap = {} } = opts2 || {};
-    const className = Object.values(themeMap).map((th) => th.name).join("_").replace(".", "");
-    styleMap[className] = {
-      style: Object.entries(themeMap).reduce((acc, [key, th]) => {
-        acc[key] = {
-          background: th.bg,
-          color: th.fg
-        };
-        return acc;
-      }, {}),
-      className
-    };
-    const tree = tokens.map((line, lineIndex) => {
-      if (lineIndex !== tokens.length - 1) {
-        if (line.length === 0) {
-          line.push({ content: "" });
+    const root = highlighter.codeToHast(code.trimEnd(), {
+      lang,
+      themes: themesObject,
+      defaultColor: "default",
+      transforms: {
+        line(node, line) {
+          node.properties ||= {};
+          if (highlights.includes(line)) {
+            node.properties.class = (node.properties.class || "") + " highlight";
+          }
+          node.properties.line = line;
         }
-        line[line.length - 1].content += "\n";
       }
-      return {
-        type: "element",
-        tagName: "span",
-        properties: {
-          class: ["line", highlights.includes(lineIndex + 1) ? "highlight" : ""].join(" ").trim(),
-          line: lineIndex + 1
-        },
-        children: line.map(tokenSpan)
-      };
     });
+    const preEl = root.children[0];
+    const codeEl = preEl.children[0];
+    preEl.properties.style = wrapperStyle ? typeof wrapperStyle === "string" ? wrapperStyle : preEl.properties.style : "";
+    const style = Object.keys(themesObject).filter((color) => color !== "default").map((color) => [
+      wrapperStyle ? `html.${color} .shiki,` : "",
+      `html.${color} .shiki span {`,
+      `color: var(--shiki-${color}) !important;`,
+      `background: var(--shiki-${color}-bg) !important;`,
+      `font-style: var(--shiki-${color}-font-style) !important;`,
+      `font-weight: var(--shiki-${color}-font-weight) !important;`,
+      `text-decoration: var(--shiki-${color}-text-decoration) !important;`,
+      "}"
+    ].join("").trim()).join("\n");
     return {
-      tree,
-      className
-    };
-    function getSpanProps(token) {
-      if (!token.style) {
-        return {};
-      }
-      const key = Object.values(token.style).map((themeStyle) => Object.values(themeStyle).join("")).join("");
-      if (!styleMap[key]) {
-        styleMap[key] = {
-          style: token.style,
-          // Using the hash value of the style as the className,
-          // ensure that the className remains stable over multiple compilations,
-          // which facilitates content caching.
-          className: "ct-" + hash(key)
-        };
-      }
-      return { class: styleMap[key].className };
-    }
-    function tokenSpan(token) {
-      return {
-        type: "element",
-        tagName: "span",
-        properties: getSpanProps(token),
-        children: [{ type: "text", value: token.content }]
-      };
-    }
-  };
-  const getHighlightedCode = async (code, lang, theme2, opts2) => {
-    const styleMap = opts2?.styleMap || {};
-    const highlights = opts2?.highlights || [];
-    const { tree, className } = await getHighlightedAST(code, lang, theme2, { styleMap, highlights });
-    function renderNode(node) {
-      if (node.type === "text") {
-        return node.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      }
-      const children = node.children.map(renderNode).join("");
-      return `<${node.tag} class="${node.props.class}">${children}</${node.tag}>`;
-    }
-    return {
-      code: tree.map(renderNode).join(""),
-      className,
-      styles: generateStyles(styleMap)
+      tree: codeEl.children,
+      className: preEl.properties.class,
+      inlineStyle: preEl.properties.style,
+      style
     };
   };
-  const generateStyles = (styleMap) => {
-    const styles = [];
-    for (const styleToken of Object.values(styleMap)) {
-      const defaultStyle = styleToken.style.default;
-      const hasColor = !!defaultStyle?.color;
-      const hasBold = isBold(defaultStyle);
-      const hasItalic = isItalic(defaultStyle);
-      const hasUnderline = isUnderline(defaultStyle);
-      const themeStyles = Object.entries(styleToken.style).map(([variant, style]) => {
-        const styleText = [
-          // If the default theme has a style, but the current theme does not have one,
-          // we need to override to reset style
-          ["color", style.color || (hasColor ? "unset" : "")],
-          ["font-weight", isBold(style) ? "bold" : hasBold ? "unset" : ""],
-          ["font-style", isItalic(style) ? "italic" : hasItalic ? "unset" : ""],
-          ["text-decoration", isUnderline(style) ? "bold" : hasUnderline ? "unset" : ""],
-          ["background", style.background || ""]
-        ].filter((kv) => kv[1]).map((kv) => kv.join(":") + ";").join("");
-        return { variant, styleText };
-      });
-      const defaultThemeStyle = themeStyles.find((themeStyle) => themeStyle.variant === "default");
-      themeStyles.forEach((themeStyle) => {
-        if (themeStyle.variant === "default") {
-          styles.push(`.${styleToken.className}{${themeStyle.styleText}}`);
-        } else if (themeStyle.styleText !== defaultThemeStyle?.styleText) {
-          styles.push(`.${themeStyle.variant} .${styleToken.className}{${themeStyle.styleText}}`);
-        }
-      });
-    }
-    return styles.join("\n");
-  };
   return {
-    getHighlightedTokens,
-    getHighlightedAST,
-    getHighlightedCode,
-    generateStyles
+    getHighlightedAST
   };
 });
-function mergeLines(line1, line2) {
-  const mergedTokens = [];
-  const right = {
-    key: line1.key,
-    tokens: line1.tokens.slice()
-  };
-  const left = {
-    key: line2.key,
-    tokens: line2.tokens.slice()
-  };
-  let index = 0;
-  while (index < right.tokens.length) {
-    const rightToken = right.tokens[index];
-    const leftToken = left.tokens[index];
-    if (rightToken.content === leftToken.content) {
-      mergedTokens.push({
-        content: rightToken.content,
-        style: {
-          ...right.tokens[index].style,
-          ...left.tokens[index].style
-        }
-      });
-      index += 1;
-      continue;
-    }
-    if (rightToken.content.startsWith(leftToken.content)) {
-      const nextRightToken = {
-        ...rightToken,
-        content: rightToken.content.slice(leftToken.content.length)
-      };
-      rightToken.content = leftToken.content;
-      right.tokens.splice(index + 1, 0, nextRightToken);
-      continue;
-    }
-    if (leftToken.content.startsWith(rightToken.content)) {
-      const nextLeftToken = {
-        ...leftToken,
-        content: leftToken.content.slice(rightToken.content.length)
-      };
-      leftToken.content = rightToken.content;
-      left.tokens.splice(index + 1, 0, nextLeftToken);
-      continue;
-    }
-    throw new Error("Unexpected token");
-  }
-  return mergedTokens;
-}
-function isBold(style) {
-  return style && style.fontStyle === FontStyle.Bold;
-}
-function isItalic(style) {
-  return style && style.fontStyle === FontStyle.Italic;
-}
-function isUnderline(style) {
-  return style && style.fontStyle === FontStyle.Underline;
-}
-function hash(str) {
-  return Array.from(str).reduce((s, c) => Math.imul(31, s) + c.charCodeAt(0) | 0, 0).toString().slice(-6);
-}
 function createSingleton(fn) {
   let instance;
   return (...args) => {

package/dist/runtime/{parser/shiki.d.ts → shiki/index.d.ts}

@@ -1,5 +1,5 @@
 import type { Root } from '../types/hast';
-import type { Highlighter, Theme } from '../shiki/types';
+import type { Highlighter, Theme } from './types';
 interface RehypeShikiOption {
     theme?: Theme;
     highlighter?: Highlighter;

package/dist/runtime/{parser/shiki.mjs → shiki/index.mjs}

@@ -3,15 +3,16 @@ import { toString } from "hast-util-to-string";
 import { defu } from "defu";
 const defaults = {
   theme: {
-    default: "github-dark",
-    dark: "github-light"
+    default: "github-light",
+    dark: "github-dark"
   },
-  highlighter: (code, lang, theme) => {
+  highlighter: (code, lang, theme, highlights) => {
     return $fetch("/api/_mdc/highlight", {
       params: {
         code,
         lang,
-        theme: JSON.stringify(theme)
+        theme: JSON.stringify(theme),
+        highlights: JSON.stringify(highlights)
       }
     });
   }
@@ -23,17 +24,24 @@ export function rehypeShiki(opts = {}) {
     const styles = [];
     visit(
       tree,
-      (node) => node.tagName === "pre" && !!node.properties?.language,
+      (node) => ["pre", "code"].includes(node.tagName) && !!node.properties?.language,
       (node) => {
         const _node = node;
-        const task = options.highlighter(toString(node), _node.properties.language, options.theme).then(({ tree: tree2, className, style }) => {
+        const task = options.highlighter(
+          toString(node),
+          _node.properties.language,
+          options.theme,
+          _node.properties.highlights ?? []
+        ).then(({ tree: tree2, className, style, inlineStyle }) => {
           _node.properties.className = ((_node.properties.className || "") + " " + className).trim();
+          _node.properties.style = ((_node.properties.style || "") + " " + inlineStyle).trim();
           if (_node.children[0]?.tagName === "code") {
             _node.children[0].children = tree2;
           } else {
-            _node.children = tree2;
+            _node.children = tree2[0].children;
           }
-          styles.push(style);
+          if (style)
+            styles.push(style);
         });
         tasks.push(task);
       }

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

@@ -1,32 +1,13 @@
 import type { Element } from '../types/hast';
-import type { Theme as ShikiTheme, IThemedToken } from 'shiki-es';
-export type Theme = ShikiTheme | Record<string, ShikiTheme>;
-export type HighlightThemedTokenStyle = Pick<IThemedToken, 'color' | 'fontStyle'> & {
-    background?: string;
-};
-export type TokenStyleMap = Record<string, {
-    style: Record<string, HighlightThemedTokenStyle>;
-    className: string;
-}>;
-export interface HighlightParams {
-    code: string;
-    lang: string;
-    theme: Theme;
-}
+import type { BuiltinTheme } from 'shikiji';
+export type Theme = BuiltinTheme | Record<string, BuiltinTheme>;
 export interface HighlighterOptions {
-    styleMap: TokenStyleMap;
-    highlights: Array<number>;
-}
-export interface HighlightThemedToken {
-    content: string;
-    style?: Record<string, HighlightThemedTokenStyle>;
+    highlights: number[];
 }
-export interface HighlightThemedTokenLine {
-    key: string;
-    tokens: HighlightThemedToken[];
-}
-export type Highlighter = (code: string, lang: string, theme: Theme) => Promise<{
+export interface HighlightResult {
     tree: Element[];
     className: string;
     style: string;
-}>;
+    inlineStyle: string;
+}
+export type Highlighter = (code: string, lang: string, theme: Theme, highlights: number[]) => Promise<HighlightResult>;

package/dist/runtime/utils/node.d.ts

@@ -1,4 +1,4 @@
-import { type VNode } from 'vue';
+import type { VNode } from 'vue';
 import type { MDCElement, MDCNode } from '../types';
 /**
  * List of text nodes
@@ -34,4 +34,4 @@ export declare function nodeTextContent(node: VNode | MDCNode): string;
  * @returns
  */
 export declare function unwrap(vnode: VNode, tags?: string[]): VNode | VNode[];
-export declare function flatUnwrap(vnodes: VNode | VNode[], tags?: string[]): Array<VNode | string>;
+export declare function flatUnwrap(vnodes: VNode | VNode[], tags?: string | string[]): Array<VNode | string> | VNode;

package/dist/runtime/utils/node.mjs

@@ -1,4 +1,3 @@
-import { Text } from "vue";
 export const TEXT_TAGS = ["p", "h1", "h2", "h3", "h4", "h5", "h6", "li"];
 export function isTag(vnode, tag) {
   if (vnode.type === tag) {
@@ -13,7 +12,7 @@ export function isTag(vnode, tag) {
   return false;
 }
 export function isText(vnode) {
-  return isTag(vnode, "text") || isTag(vnode, Text);
+  return isTag(vnode, "text") || isTag(vnode, Symbol.for("v-txt"));
 }
 export function nodeChildren(node) {
   if (Array.isArray(node.children) || typeof node.children === "string") {
@@ -40,7 +39,7 @@ export function nodeTextContent(node) {
   }
   return "";
 }
-export function unwrap(vnode, tags = ["p"]) {
+export function unwrap(vnode, tags = []) {
   if (Array.isArray(vnode)) {
     return vnode.flatMap((node) => unwrap(node, tags));
   }
@@ -53,14 +52,20 @@ export function unwrap(vnode, tags = ["p"]) {
   }
   return result;
 }
-function _flatUnwrap(vnodes, tags = ["p"]) {
+function _flatUnwrap(vnodes, tags = []) {
   vnodes = Array.isArray(vnodes) ? vnodes : [vnodes];
   if (!tags.length) {
     return vnodes;
   }
   return vnodes.flatMap((vnode) => _flatUnwrap(unwrap(vnode, [tags[0]]), tags.slice(1))).filter((vnode) => !(isText(vnode) && nodeTextContent(vnode).trim() === ""));
 }
-export function flatUnwrap(vnodes, tags = ["p"]) {
+export function flatUnwrap(vnodes, tags = []) {
+  if (typeof tags === "string") {
+    tags = tags.split(",").map((tag) => tag.trim()).filter(Boolean);
+  }
+  if (!tags.length) {
+    return vnodes;
+  }
   return _flatUnwrap(vnodes, tags).reduce((acc, item) => {
     if (isText(item)) {
       if (typeof acc[acc.length - 1] === "string") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/mdc",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "description": "Nuxt MDC module",
   "repository": "nuxt-modules/mdc",
   "license": "MIT",
@@ -35,8 +35,8 @@
   },
   "dependencies": {
     "@nuxt/kit": "latest",
-    "@types/hast": "^3.0.0",
-    "@types/mdast": "^4.0.0",
+    "@types/hast": "^3.0.1",
+    "@types/mdast": "^4.0.1",
     "@vue/compiler-core": "^3.3.4",
     "consola": "^3.2.3",
     "defu": "^6.1.2",
@@ -47,10 +47,10 @@
     "mdast-util-to-hast": "^13.0.2",
     "micromark-util-sanitize-uri": "^2.0.0",
     "ohash": "^1.1.3",
-    "property-information": "^6.2.0",
-    "rehype-external-links": "^2.1.0",
+    "property-information": "^6.3.0",
+    "rehype-external-links": "^3.0.0",
     "rehype-raw": "^6.1.1",
-    "rehype-slug": "^5.1.0",
+    "rehype-slug": "^6.0.0",
     "rehype-sort-attribute-values": "^5.0.0",
     "rehype-sort-attributes": "^5.0.0",
     "remark-emoji": "^4.0.0",
@@ -59,29 +59,29 @@
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
     "scule": "^1.0.0",
-    "shiki-es": "^0.14.0",
-    "ufo": "^1.3.0",
-    "unified": "^11.0.2",
+    "shikiji": "^0.6.8",
+    "ufo": "^1.3.1",
+    "unified": "^11.0.3",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.0",
-    "@nuxt/schema": "^3.7.0",
-    "@nuxt/test-utils": "^3.7.0",
+    "@nuxt/module-builder": "^0.5.2",
+    "@nuxt/schema": "^3.7.4",
+    "@nuxt/test-utils": "^3.7.4",
     "@nuxthq/ui": "^2.7.0",
-    "@types/mdurl": "^1.0.2",
-    "@types/node": "^20.5.7",
+    "@types/mdurl": "^1.0.3",
+    "@types/node": "^20.7.1",
     "changelogen": "^0.5.5",
-    "eslint": "^8.48.0",
-    "nuxt": "^3.7.0",
-    "rehype": "^12.0.1",
-    "release-it": "^16.1.5",
-    "vitest": "^0.34.3"
+    "eslint": "^8.50.0",
+    "nuxt": "^3.7.4",
+    "rehype": "^13.0.1",
+    "release-it": "^16.2.1",
+    "vitest": "^0.34.5"
   },
-  "packageManager": "pnpm@8.7.0",
+  "packageManager": "pnpm@8.8.0",
   "release-it": {
     "git": {
       "commitMessage": "chore(release): release v${version}"