@nuxtjs/mdc 0.2.3 → 0.2.5

package/dist/module.json

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

package/dist/module.mjs

@@ -38,9 +38,9 @@ function processUnistPlugins(plugins) {
   const imports = [];
   const definitions = [];
   Object.entries(plugins).forEach(([name, plugin]) => {
-    imports.push(`import ${pascalCase(name)} from '${name}'`);
+    imports.push(`import ${pascalCase(name)} from '${plugin.src || name}'`);
     if (Object.keys(plugin).length) {
-      definitions.push(`  '${name}': { instance: ${pascalCase(name)}, options: ${JSON.stringify(plugin)} },`);
+      definitions.push(`  '${name}': { instance: ${pascalCase(name)}, options: ${JSON.stringify(plugin.options || plugin)} },`);
     } else {
       definitions.push(`  '${name}': { instance: ${pascalCase(name)} },`);
     }

package/dist/runtime/components/MDC.vue

@@ -19,11 +19,11 @@ import { hash } from 'ohash'
 import { useAsyncData } from 'nuxt/app'
 import { parseMarkdown } from '../parser'
 import { watch, computed, type PropType } from 'vue'
-import { MDCParseOptions } from '../types'
+import type { MDCParseOptions } from '../types'
 
 const props = defineProps({
   tag: {
-    type: String,
+    type: [String, Boolean],
     default: 'div'
   },
   /**
@@ -68,4 +68,4 @@ const { data, refresh } = await useAsyncData(key.value, async () => {
 watch(() => props.value, () => {
   refresh()
 })
-</script>
+</script>

package/dist/runtime/components/MDCRenderer.vue

@@ -10,7 +10,7 @@ const rxOn = /^@|^v-on:/;
 const rxBind = /^:|^v-bind:/;
 const rxModel = /^v-model/;
 const nativeInputs = ["select", "textarea", "input"];
-const proseComponentMap = Object.fromEntries(["p", "a", "blockquote", "code", "pre", "code", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "ul", "ol", "li", "strong", "table", "thead", "tbody", "td", "th", "tr"].map((t) => [t, `prose-${t}`]));
+const proseComponentMap = Object.fromEntries(["p", "a", "blockquote", "code", "pre", "code", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "ul", "ol", "li", "strong", "table", "thead", "tbody", "td", "th", "tr", "script"].map((t) => [t, `prose-${t}`]));
 export default defineComponent({
   name: "MDCRenderer",
   props: {
@@ -80,9 +80,6 @@ function renderNode(node, h2, documentMeta, parentScope = {}) {
   if (node.type === "text") {
     return h2(Text, node.value);
   }
-  if (node.tag === "script") {
-    return h2(Text, renderToText(node));
-  }
   const originalTag = node.tag;
   const renderTag = findMappedTag(node, documentMeta.tags);
   if (node.tag === "binding") {
@@ -99,15 +96,6 @@ function renderNode(node, h2, documentMeta, parentScope = {}) {
     renderSlots(node, h2, documentMeta, { ...parentScope, ...props })
   );
 }
-function renderToText(node) {
-  if (node.type === "text") {
-    return node.value;
-  }
-  if (!node.children?.length) {
-    return `<${node.tag}>`;
-  }
-  return `<${node.tag}>${node.children?.map(renderToText).join("") || ""}</${node.tag}>`;
-}
 function renderBinding(node, h2, documentMeta, parentScope = {}) {
   const data = {
     ...parentScope,

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

@@ -35,7 +35,4 @@ defineProps({
 pre code .line {
   display: block;
 }
-pre code .line:empty::before {
-  content: "\200b";
-}
 </style>

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

@@ -0,0 +1,14 @@
+<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>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  src: {
+    type: String,
+    default: ''
+  }
+})
+</script>

package/dist/runtime/parser/handlers/code.d.ts

@@ -1,5 +1,5 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element } from 'hast';
-import { type Code } from 'mdast';
+import type { Element } from 'hast';
+import type { Code } from 'mdast';
 declare const _default: (state: State, node: Code) => Element;
 export default _default;

package/dist/runtime/parser/handlers/containerComponent.d.ts

@@ -1,6 +1,6 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element, type Properties } from 'hast';
-import { type Nodes as MdastContent } from 'mdast';
+import type { Element, Properties } from 'hast';
+import type { Nodes as MdastContent } from 'mdast';
 type Node = MdastContent & {
     name: string;
     attributes?: Properties;

package/dist/runtime/parser/handlers/emphasis.d.ts

@@ -1,6 +1,6 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element, type Properties } from 'hast';
-import { type Emphasis } from 'mdast';
+import type { Element, Properties } from 'hast';
+import type { Emphasis } from 'mdast';
 export default function emphasis(state: State, node: Emphasis & {
     attributes?: Properties;
 }): Element;

package/dist/runtime/parser/handlers/html.d.ts

@@ -1,3 +1,3 @@
 import { type State, type Raw } from 'mdast-util-to-hast';
-import { type Html } from 'mdast';
+import type { Html } from 'mdast';
 export default function html(state: State, node: Html): import("hast").Element | Raw | undefined;

package/dist/runtime/parser/handlers/image.d.ts

@@ -1,6 +1,6 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element, type Properties } from 'hast';
-import { type Image } from 'mdast';
+import type { Element, Properties } from 'hast';
+import type { Image } from 'mdast';
 export default function image(state: State, node: Image & {
     attributes?: Properties;
 }): Element;

package/dist/runtime/parser/handlers/inlineCode.d.ts

@@ -1,6 +1,6 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element, type Properties } from 'hast';
-import { type InlineCode } from 'mdast';
+import type { Element, Properties } from 'hast';
+import type { InlineCode } from 'mdast';
 export default function inlineCode(state: State, node: InlineCode & {
     attributes?: Properties;
 }): Element;

package/dist/runtime/parser/handlers/link.d.ts

@@ -1,6 +1,6 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element, type Properties } from 'hast';
-import { type Link } from 'mdast';
+import type { Element, Properties } from 'hast';
+import type { Link } from 'mdast';
 export default function link(state: State, node: Link & {
     attributes?: Properties;
 }): Element;

package/dist/runtime/parser/handlers/list.d.ts

@@ -1,4 +1,4 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element } from 'hast';
-import { type List } from 'mdast';
+import type { Element } from 'hast';
+import type { List } from 'mdast';
 export default function list(state: State, node: List): Element;

package/dist/runtime/parser/handlers/paragraph.d.ts

@@ -1,4 +1,4 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element } from 'hast';
-import { type Paragraph } from 'mdast';
+import type { Element } from 'hast';
+import type { Paragraph } from 'mdast';
 export default function paragraph(state: State, node: Paragraph): Element | import("hast").ElementContent[];

package/dist/runtime/parser/handlers/strong.d.ts

@@ -1,6 +1,6 @@
 import { type State } from 'mdast-util-to-hast';
-import { type Element, type Properties } from 'hast';
-import { type Strong } from 'mdast';
+import type { Element, Properties } from 'hast';
+import type { Strong } from 'mdast';
 export default function strong(state: State, node: Strong & {
     attributes?: Properties;
 }): Element;

package/dist/runtime/parser/index.mjs

@@ -1,7 +1,7 @@
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remark2rehype from "remark-rehype";
-import remarkMDC, { parseFrontMatter } from "remark-mdc";
+import { parseFrontMatter } from "remark-mdc";
 import { defu } from "defu";
 import { useProcessorPlugins } from "./utils/plugins.mjs";
 import { compileHast } from "./compiler.mjs";
@@ -25,7 +25,6 @@ export const parseMarkdown = async (md, opts = {}) => {
   const { content, data: frontmatter } = await parseFrontMatter(md);
   const processor = unified();
   processor.use(remarkParse);
-  processor.use(remarkMDC);
   await useProcessorPlugins(processor, options.remark?.plugins);
   processor.use(remark2rehype, options.rehype?.options);
   if (options.highlight) {

package/dist/runtime/parser/options.mjs

@@ -1,6 +1,7 @@
 import handlers from "./handlers/index.mjs";
 import remarkEmoji from "remark-emoji";
 import remarkGFM from "remark-gfm";
+import remarkMDC from "remark-mdc";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeSortAttributeValues from "rehype-sort-attribute-values";
 import rehypeSortAttributes from "rehype-sort-attributes";
@@ -8,6 +9,9 @@ import rehypeRaw from "rehype-raw";
 export const defaults = {
   remark: {
     plugins: {
+      "remark-mdc": {
+        instance: remarkMDC
+      },
       "remark-emoji": {
         instance: remarkEmoji
       },

package/dist/runtime/shiki/index.mjs

@@ -5,15 +5,28 @@ const defaults = {
     default: "github-light",
     dark: "github-dark"
   },
-  highlighter: (code, lang, theme, highlights) => {
-    return $fetch("/api/_mdc/highlight", {
-      params: {
-        code,
-        lang,
-        theme: JSON.stringify(theme),
-        highlights: JSON.stringify(highlights)
+  async highlighter(code, lang, theme, highlights) {
+    if (process.browser && window.sessionStorage.getItem("mdc-shiki-highlighter") === "browser") {
+      return import("./highlighter").then(({ useShikiHighlighter }) => {
+        return useShikiHighlighter().getHighlightedAST(code, lang, theme, { highlights });
+      });
+    }
+    try {
+      return await $fetch("/api/_mdc/highlight", {
+        params: {
+          code,
+          lang,
+          theme: JSON.stringify(theme),
+          highlights: JSON.stringify(highlights)
+        }
+      });
+    } catch (e) {
+      if (process.browser && e?.response?.status === 404) {
+        window.sessionStorage.setItem("mdc-shiki-highlighter", "browser");
+        return this.highlighter?.(code, lang, theme, highlights);
       }
-    });
+    }
+    return Promise.resolve({ tree: [{ type: "text", value: code }], className: "", style: "" });
   }
 };
 export function rehypeShiki(opts = {}) {
@@ -37,7 +50,7 @@ export function rehypeShiki(opts = {}) {
           if (_node.children[0]?.tagName === "code") {
             _node.children[0].children = tree2;
           } else {
-            _node.children = tree2[0].children;
+            _node.children = tree2[0].children || tree2[0];
           }
           if (style)
             styles.push(style);

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

@@ -14,4 +14,6 @@ export type MDCRoot = {
     children: Array<MDCNode>;
 };
 export interface MDCData extends Record<string, any> {
+    title: string;
+    description: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/mdc",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Nuxt MDC module",
   "repository": "nuxt-modules/mdc",
   "license": "MIT",
@@ -23,10 +23,10 @@
   ],
   "scripts": {
     "prepack": "nuxi prepare playground; nuxt-module-build",
-    "build": "nuxi prepare playground; nuxt-module-build",
+    "build": "nuxi prepare playground; nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
     "dev:docs": "nuxi dev docs",
     "release": "release-it",
     "lint": "eslint .",
@@ -34,13 +34,13 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.7.4",
+    "@nuxt/kit": "^3.8.0",
     "@types/hast": "^3.0.2",
     "@types/mdast": "^4.0.2",
-    "@vue/compiler-core": "^3.3.4",
+    "@vue/compiler-core": "^3.3.7",
     "consola": "^3.2.3",
-    "defu": "^6.1.2",
-    "destr": "^2.0.1",
+    "defu": "^6.1.3",
+    "destr": "^2.0.2",
     "detab": "^3.0.2",
     "github-slugger": "^2.0.0",
     "hast-util-to-string": "^3.0.0",
@@ -55,7 +55,7 @@
     "rehype-sort-attributes": "^5.0.0",
     "remark-emoji": "^4.0.0",
     "remark-gfm": "^3.0.1",
-    "remark-mdc": "^2.0.0",
+    "remark-mdc": "^2.1.0",
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
     "scule": "^1.0.0",
@@ -69,14 +69,14 @@
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.2",
-    "@nuxt/schema": "^3.7.4",
-    "@nuxt/test-utils": "^3.7.4",
+    "@nuxt/schema": "^3.8.0",
+    "@nuxt/test-utils": "^3.8.0",
     "@nuxthq/ui": "^2.7.0",
     "@types/mdurl": "^1.0.4",
-    "@types/node": "^20.8.7",
+    "@types/node": "^20.8.8",
     "changelogen": "^0.5.5",
-    "eslint": "^8.51.0",
-    "nuxt": "^3.7.4",
+    "eslint": "^8.52.0",
+    "nuxt": "^3.8.0",
     "rehype": "^13.0.1",
     "release-it": "^16.2.1",
     "vitest": "^0.34.6"