@nuxtjs/mdc 0.1.0

package/dist/runtime/parser/options.mjs

@@ -0,0 +1,50 @@
+import handlers from "./handlers/index.mjs";
+import remarkEmoji from "remark-emoji";
+import remarkGFM from "remark-gfm";
+import rehypeExternalLinks from "rehype-external-links";
+import rehypeSortAttributeValues from "rehype-sort-attribute-values";
+import rehypeSortAttributes from "rehype-sort-attributes";
+import rehypeRaw from "rehype-raw";
+import { remarkPlugins, rehypePlugins, highlight } from "#mdc-imports";
+export const defaults = {
+  remark: {
+    plugins: {
+      "remark-emoji": {
+        instance: remarkEmoji
+      },
+      "remark-gfm": {
+        instance: remarkGFM
+      },
+      ...remarkPlugins
+    }
+  },
+  rehype: {
+    options: {
+      handlers,
+      allowDangerousHtml: true
+    },
+    plugins: {
+      "rehype-external-links": {
+        instance: rehypeExternalLinks
+      },
+      "rehype-sort-attribute-values": {
+        instance: rehypeSortAttributeValues
+      },
+      "rehype-sort-attributes": {
+        instance: rehypeSortAttributes
+      },
+      "rehype-raw": {
+        instance: rehypeRaw,
+        options: {
+          passThrough: ["element"]
+        }
+      },
+      ...rehypePlugins
+    }
+  },
+  highlight,
+  toc: {
+    searchDepth: 2,
+    depth: 2
+  }
+};

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

@@ -0,0 +1,8 @@
+import type { Root } from '../types/hast';
+import type { Highlighter, Theme } from '../shiki/types';
+interface RehypeShikiOption {
+    theme?: Theme;
+    highlighter?: Highlighter;
+}
+export declare function rehypeShiki(opts?: RehypeShikiOption): (tree: Root) => Promise<void>;
+export {};

package/dist/runtime/parser/shiki.mjs

@@ -0,0 +1,55 @@
+import { visit } from "unist-util-visit";
+import { toString } from "hast-util-to-string";
+import { defu } from "defu";
+const defaults = {
+  theme: {
+    default: "github-dark",
+    dark: "github-light"
+  },
+  highlighter: (code, lang, theme) => {
+    return $fetch("/api/_mdc/highlight", {
+      params: {
+        code,
+        lang,
+        theme: JSON.stringify(theme)
+      }
+    });
+  }
+};
+export function rehypeShiki(opts = {}) {
+  const options = defu(opts, defaults);
+  return async (tree) => {
+    const tasks = [];
+    const styles = [];
+    visit(
+      tree,
+      (node) => node.tagName === "pre" && !!node.properties?.language,
+      (node) => {
+        const _node = node;
+        const task = options.highlighter(toString(node), _node.properties.language, options.theme).then(({ tree: tree2, className, style }) => {
+          _node.properties.className = ((_node.properties.className || "") + " " + className).trim();
+          if (_node.children[0]?.tagName === "code") {
+            _node.children[0].children = tree2;
+          } else {
+            _node.children = tree2;
+          }
+          styles.push(style);
+        });
+        tasks.push(task);
+      }
+    );
+    if (tasks.length) {
+      await Promise.all(tasks);
+      tree.children.push({
+        type: "element",
+        tagName: "style",
+        children: [{ type: "text", value: cleanCSS(styles.join("")) }],
+        properties: {}
+      });
+    }
+  };
+}
+const cleanCSS = (css) => {
+  const styles = css.split("}").filter((s) => Boolean(s.trim())).map((s) => s.trim() + "}");
+  return Array.from(new Set(styles)).join("");
+};

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

@@ -0,0 +1,3 @@
+import { 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/toc.mjs

@@ -0,0 +1,59 @@
+import { flattenNode, flattenNodeText } from "../utils/ast.mjs";
+const TOC_TAGS = ["h2", "h3", "h4", "h5", "h6"];
+const TOC_TAGS_DEPTH = TOC_TAGS.reduce((tags, tag) => {
+  tags[tag] = Number(tag.charAt(tag.length - 1));
+  return tags;
+}, {});
+const getHeaderDepth = (node) => TOC_TAGS_DEPTH[node.tag];
+const getTocTags = (depth) => {
+  if (depth < 1 || depth > 5) {
+    console.log(`\`toc.depth\` is set to ${depth}. It should be a number between 1 and 5. `);
+    depth = 1;
+  }
+  return TOC_TAGS.slice(0, depth);
+};
+function nestHeaders(headers) {
+  if (headers.length <= 1) {
+    return headers;
+  }
+  const toc = [];
+  let parent;
+  headers.forEach((header) => {
+    if (!parent || header.depth <= parent.depth) {
+      header.children = [];
+      parent = header;
+      toc.push(header);
+    } else {
+      parent.children.push(header);
+    }
+  });
+  toc.forEach((header) => {
+    if (header.children?.length) {
+      header.children = nestHeaders(header.children);
+    } else {
+      delete header.children;
+    }
+  });
+  return toc;
+}
+export function generateFlatToc(body, options) {
+  const { searchDepth, depth, title = "" } = options;
+  const tags = getTocTags(depth);
+  const headers = flattenNode(body, searchDepth).filter((node) => tags.includes(node.tag || ""));
+  const links = headers.map((node) => ({
+    id: node.props?.id,
+    depth: getHeaderDepth(node),
+    text: flattenNodeText(node)
+  }));
+  return {
+    title,
+    searchDepth,
+    depth,
+    links
+  };
+}
+export function generateToc(body, options) {
+  const toc = generateFlatToc(body, options);
+  toc.links = nestHeaders(toc.links);
+  return toc;
+}

package/dist/runtime/parser/utils/html-tags-list.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

package/dist/runtime/parser/utils/html-tags-list.mjs

@@ -0,0 +1,119 @@
+export default [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "math",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rb",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "svg",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+];

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

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

package/dist/runtime/parser/utils/plugins.mjs

@@ -0,0 +1,10 @@
+export const useProcessorPlugins = async (processor, plugins = {}) => {
+  const toUse = Object.entries(plugins).filter((p) => p[1] !== false);
+  for (const plugin of toUse) {
+    const instance = plugin[1].instance || await import(
+      /* @vite-ignore */
+      plugin[0]
+    ).then((m) => m.default || m);
+    processor.use(instance, plugin[1].options);
+  }
+};

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

@@ -0,0 +1,5 @@
+export declare const unsafeLinkPrefix: string[];
+export declare const validateProp: (attribute: string, value: string) => boolean;
+export declare const validateProps: (props?: Record<string, any>) => {
+    [k: string]: any;
+};

package/dist/runtime/parser/utils/props.mjs

@@ -0,0 +1,33 @@
+export const unsafeLinkPrefix = [
+  "javascript:",
+  "data:text/html",
+  "vbscript:",
+  "data:text/javascript",
+  "data:text/vbscript",
+  "data:text/css",
+  "data:text/plain",
+  "data:text/xml"
+];
+export const validateProp = (attribute, value) => {
+  if (attribute.startsWith("on")) {
+    return false;
+  }
+  if (attribute === "href" || attribute === "src") {
+    return !unsafeLinkPrefix.some((prefix) => value.toLowerCase().startsWith(prefix));
+  }
+  return true;
+};
+export const validateProps = (props) => {
+  if (!props) {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(props).filter(([name, value]) => {
+      const isValid = validateProp(name, value);
+      if (!isValid) {
+        console.warn(`[@nuxtjs/mdc] removing unsafe attribute: ${name}="${value}"`);
+      }
+      return isValid;
+    })
+  );
+};

package/dist/runtime/shiki/event-handler.d.ts

@@ -0,0 +1,8 @@
+import type { TokenStyleMap } from './types';
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
+    tree: import("../types/hast").Element[];
+    className: string;
+    style: string;
+    styleMap: TokenStyleMap;
+}>>;
+export default _default;

package/dist/runtime/shiki/event-handler.mjs

@@ -0,0 +1,15 @@
+import { eventHandler, getQuery } from "h3";
+import { useShikiHighlighter } from "./highlighter.mjs";
+export default eventHandler(async (event) => {
+  const { code, lang, theme: themeString } = getQuery(event);
+  const theme = JSON.parse(themeString);
+  const shikiHighlighter = useShikiHighlighter({});
+  const styleMap = {};
+  const { tree, className } = await shikiHighlighter.getHighlightedAST(code, lang, theme, { styleMap });
+  return {
+    tree,
+    className,
+    style: shikiHighlighter.generateStyles(styleMap),
+    styleMap
+  };
+});

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

@@ -0,0 +1,25 @@
+import { Lang } from 'shiki-es';
+import type { HighlighterOptions, Theme, TokenStyleMap } from './types';
+import type { Element } from '../types/hast';
+export declare const useShikiHighlighter: (opts?: any) => {
+    getHighlightedTokens: (code: string, lang: Lang, theme: Theme) => Promise<{
+        code: string;
+        lang: Lang;
+        theme: {
+            [k: string]: import("shiki-es").IShikiTheme;
+        };
+        tokens: {
+            content: string;
+        }[][];
+    }>;
+    getHighlightedAST: (code: string, lang: Lang, theme: Theme, opts?: Partial<HighlighterOptions>) => Promise<{
+        tree: Element[];
+        className: string;
+    }>;
+    getHighlightedCode: (code: string, lang: Lang, theme: Theme, opts?: Partial<HighlighterOptions>) => Promise<{
+        code: string;
+        className: string;
+        styles: string;
+    }>;
+    generateStyles: (styleMap: TokenStyleMap) => string;
+};