@nuxtjs/mdc 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) NuxtLabs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# Nuxt MDC
+
+MDC supercharges regular Markdown to write documents interacting deeply with any Vue component.
+
+## Install
+
+```bash
+# Using Yarn
+yarn add --dev @nuxtjs/mdc
+# Using NPM
+npm install --save-dev @nuxtjs/mdc
+```
+
+Then, add `@nuxtjs/mdc` to the modules section of your `nuxt.config.ts`
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/mdc']
+})
+```
+
+## Use
+
+Parse MDC content in any environment:
+
+```ts [parse-mdc.ts]
+import { parseMarkdown } from '@nuxtjs/mdc/runtime'
+
+async function main(mdc: string) {
+  const ast = await parseMarkdown(mdc)
+
+  // Do your magic with parsed AST tree
+
+  return ast
+}
+```
+
+Render MDC content with `<MDC>` component:
+
+```html
+<template>
+  <MDC :value="md"  tag="article" />
+</template>
+
+<script setup lang="ts">
+const md = `
+::alert
+Hello MDC
+::
+`
+</script>
+```
+
+
+## 💻 Development
+
+- Clone repository
+- Install dependencies using `pnpm install`
+- Prepare using `pnpm dev:prepare`
+- Try playground using `pnpm dev`
+
+## License
+
+[MIT](./LICENSE) - Made with 💚

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,55 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { Theme as Theme$1 } from 'shiki-es';
+
+type Theme = Theme$1 | Record<string, Theme$1>;
+
+interface UnistPlugin {
+    src?: string;
+    options?: Record<string, any>;
+}
+interface ModuleOptions {
+    remarkPlugins?: Record<string, UnistPlugin>;
+    rehypePlugins?: Record<string, UnistPlugin>;
+    highlight?: {
+        theme?: Theme;
+        highlighter?: string;
+    } | false;
+    headings?: {
+        anchorLinks?: {
+            [heading in 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6']?: boolean;
+        };
+    };
+    components?: {
+        prose?: boolean;
+        map?: Record<string, string>;
+    };
+}
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+declare module '@nuxt/schema' {
+    interface PublicRuntimeConfig {
+        mdc: {
+            components: {
+                prose: boolean;
+                map: Record<string, string>;
+            };
+            headings: ModuleOptions['headings'];
+        };
+    }
+    interface ConfigSchema {
+        runtimeConfig: {
+            public?: {
+                mdc: {
+                    components: {
+                        prose: boolean;
+                        map: Record<string, string>;
+                    };
+                };
+                headings: ModuleOptions['headings'];
+            };
+        };
+    }
+}
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,55 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { Theme as Theme$1 } from 'shiki-es';
+
+type Theme = Theme$1 | Record<string, Theme$1>;
+
+interface UnistPlugin {
+    src?: string;
+    options?: Record<string, any>;
+}
+interface ModuleOptions {
+    remarkPlugins?: Record<string, UnistPlugin>;
+    rehypePlugins?: Record<string, UnistPlugin>;
+    highlight?: {
+        theme?: Theme;
+        highlighter?: string;
+    } | false;
+    headings?: {
+        anchorLinks?: {
+            [heading in 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6']?: boolean;
+        };
+    };
+    components?: {
+        prose?: boolean;
+        map?: Record<string, string>;
+    };
+}
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+declare module '@nuxt/schema' {
+    interface PublicRuntimeConfig {
+        mdc: {
+            components: {
+                prose: boolean;
+                map: Record<string, string>;
+            };
+            headings: ModuleOptions['headings'];
+        };
+    }
+    interface ConfigSchema {
+        runtimeConfig: {
+            public?: {
+                mdc: {
+                    components: {
+                        prose: boolean;
+                        map: Record<string, string>;
+                    };
+                };
+                headings: ModuleOptions['headings'];
+            };
+        };
+    }
+}
+
+export { _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,174 @@
+import { createResolver, extendViteConfig, defineNuxtModule, addTemplate, addComponent, addComponentsDir, addServerHandler } from '@nuxt/kit';
+import fs from 'fs';
+import { pascalCase } from 'scule';
+import { defu } from 'defu';
+import { RENDER_SLOT } from '@vue/compiler-core';
+
+const mdcImportTemplate = async ({ nuxt, options }) => {
+  const resolver = createResolver(import.meta.url);
+  const imports = [];
+  const { imports: remarkImports, definitions: remarkDefinitions } = processUnistPlugins(options.remarkPlugins);
+  const { imports: rehypeImports, definitions: rehypeDefinitions } = processUnistPlugins(options.rehypePlugins);
+  let highlighter = "false";
+  if (options.highlight) {
+    highlighter = JSON.stringify(options.highlight);
+    if (options.highlight.highlighter) {
+      const path = await resolver.resolvePath(options.highlight.highlighter, { alias: nuxt.options.alias });
+      imports.push(`import syntaxHighlighter from '${path}'`);
+      highlighter = highlighter.replace(`"${options.highlight.highlighter}"`, "syntaxHighlighter");
+    }
+  }
+  return [
+    ...remarkImports,
+    ...rehypeImports,
+    ...imports,
+    "",
+    "export const remarkPlugins = {",
+    ...remarkDefinitions,
+    "}",
+    "",
+    "export const rehypePlugins = {",
+    ...rehypeDefinitions,
+    "}",
+    "",
+    `export const highlight = ${highlighter}`
+  ].join("\n");
+};
+function processUnistPlugins(plugins) {
+  const imports = [];
+  const definitions = [];
+  Object.entries(plugins).forEach(([name, plugin]) => {
+    imports.push(`import ${pascalCase(name)} from '${name}'`);
+    if (Object.keys(plugin).length) {
+      definitions.push(`  '${name}': { instance: ${pascalCase(name)}, ...(${JSON.stringify(plugin)}) },`);
+    } else {
+      definitions.push(`  '${name}': { instance: ${pascalCase(name)} },`);
+    }
+  });
+  return { imports, definitions };
+}
+
+const registerMDCSlotTransformer = (resolver) => {
+  extendViteConfig((config) => {
+    const compilerOptions = config.vue.template.compilerOptions;
+    config.plugins = config.plugins || [];
+    config.plugins.push({
+      name: "mdc-render-slot-import",
+      enforce: "post",
+      transform(code) {
+        if (code.includes("_renderMDCSlot")) {
+          return {
+            code: `import { renderSlot as _renderMDCSlot } from '${resolver.resolve("./runtime/utils/slot")}';
+${code}`,
+            map: { mappings: "" }
+          };
+        }
+        if (code.includes("_ssrRenderMDCSlot")) {
+          return {
+            code: `import { ssrRenderSlot as _ssrRenderMDCSlot } from '${resolver.resolve("./runtime/utils/ssrSlot")}';
+${code}`,
+            map: { mappings: "" }
+          };
+        }
+      }
+    });
+    compilerOptions.nodeTransforms = [
+      function viteMDCSlot(node, context) {
+        if (node.tag === "MDCSlot") {
+          const transform = context.ssr ? context.nodeTransforms.find((nt) => nt.name === "ssrTransformSlotOutlet") : context.nodeTransforms.find((nt) => nt.name === "transformSlotOutlet");
+          return () => {
+            node.tag = "slot";
+            node.type = 1;
+            node.tagType = 2;
+            transform?.(node, context);
+            const codegen = context.ssr ? node.ssrCodegenNode : node.codegenNode;
+            codegen.callee = codegen.callee === RENDER_SLOT ? "_renderMDCSlot" : "_ssrRenderMDCSlot";
+          };
+        }
+        if (context.nodeTransforms[0].name !== "viteMDCSlot") {
+          const index = context.nodeTransforms.findIndex((f) => f.name === "viteMDCSlot");
+          const nt = context.nodeTransforms.splice(index, 1);
+          context.nodeTransforms.unshift(nt[0]);
+        }
+      }
+    ];
+  });
+};
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@nuxtjs/mdc",
+    configKey: "mdc"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {
+    remarkPlugins: {},
+    rehypePlugins: {},
+    highlight: false,
+    headings: {
+      anchorLinks: {
+        h2: true,
+        h3: true,
+        h4: true
+      }
+    },
+    components: {
+      prose: true,
+      map: {}
+    }
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.public.mdc = defu(nuxt.options.runtimeConfig.public.mdc, {
+      components: {
+        prose: options.components.prose,
+        map: options.components.map
+      },
+      headings: options.headings
+    });
+    nuxt.hook("vite:extendConfig", (viteConfig) => {
+      viteConfig.optimizeDeps?.include?.push(
+        "is-buffer",
+        "debug",
+        "flat",
+        "node-emoji",
+        "extend",
+        "hast-util-raw"
+      );
+    });
+    nuxt.options.alias["#mdc-imports"] = addTemplate({ filename: "mdc-imports.mjs", getContents: mdcImportTemplate, options, write: true }).dst;
+    nuxt.options.nitro.alias = nuxt.options.nitro.alias || {};
+    nuxt.options.nitro.alias["#mdc-imports"] = nuxt.options.alias["#mdc-imports"];
+    addComponent({ name: "MDC", filePath: resolver.resolve("./runtime/components/MDC") });
+    addComponent({ name: "MDCRenderer", filePath: resolver.resolve("./runtime/components/MDCRenderer") });
+    addComponent({ name: "MDCSlot", filePath: resolver.resolve("./runtime/components/MDCSlot") });
+    if (options.components?.prose) {
+      addComponentsDir({
+        path: resolver.resolve("./runtime/components/prose"),
+        pathPrefix: false,
+        prefix: "",
+        global: true
+      });
+    }
+    addServerHandler({ route: "/api/_mdc/highlight", handler: resolver.resolve("./runtime/shiki/event-handler") });
+    const _layers = [...nuxt.options._layers].reverse();
+    for (const layer of _layers) {
+      const srcDir = layer.config.srcDir;
+      const globalComponents = resolver.resolve(srcDir, "components/mdc");
+      const dirStat = await fs.promises.stat(globalComponents).catch(() => null);
+      if (dirStat && dirStat.isDirectory()) {
+        nuxt.hook("components:dirs", (dirs) => {
+          dirs.unshift({
+            path: globalComponents,
+            global: true,
+            pathPrefix: false,
+            prefix: ""
+          });
+        });
+      }
+    }
+    registerMDCSlotTransformer(resolver);
+  }
+});
+
+export { module as default };

package/dist/runtime/components/MDC.vue

@@ -0,0 +1,36 @@
+<template>
+  <component :is="tag">
+    <slot
+      :data="data?.data"
+      :body="data?.body"
+    >
+      <MDCRenderer
+        :body="data?.body"
+        :data="data?.data"
+      />
+    </slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { useAsyncData } from 'nuxt/app'
+import { parseMarkdown } from '../parser'
+import { watch } from 'vue'
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { data, refresh } = await useAsyncData(async () => await parseMarkdown(props.value, { highlight: {}}))
+
+watch(() => props.value, () => {
+  refresh()
+})
+</script>