@nuxtjs/mdc 0.1.0

package/dist/runtime/components/MDCRenderer.vue

@@ -0,0 +1,293 @@
+<script>
+import { h, resolveComponent, Text, defineComponent, toRaw } from "vue";
+import destr from "destr";
+import { pascalCase } from "scule";
+import { find, html } from "property-information";
+import { useRoute, useRuntimeConfig } from "#app";
+import htmlTags from "../parser/utils/html-tags-list";
+const DEFAULT_SLOT = "default";
+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}`]));
+export default defineComponent({
+  name: "MDCRenderer",
+  props: {
+    /**
+     * Content to render
+     */
+    body: {
+      type: Object,
+      required: true
+    },
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Render only the excerpt
+     */
+    excerpt: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Root tag to use for rendering
+     */
+    tag: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether or not to render Prose components instead of HTML tags
+     */
+    prose: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * The map of custom components to use for rendering.
+     */
+    components: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  async setup(props) {
+    const { mdc } = useRuntimeConfig().public;
+    const tags = {
+      ...mdc.components.prose && props.prose !== false ? proseComponentMap : {},
+      ...mdc.components.map,
+      ...toRaw(props.data?.mdc?.components || {}),
+      ...props.components
+    };
+    await resolveContentComponents(props.body, { tags });
+    return { tags };
+  },
+  render(ctx) {
+    const { tags, tag, body, data } = ctx;
+    if (!body) {
+      return null;
+    }
+    const meta = { ...data, tags };
+    let component = tag || meta.component?.name || meta.component || "div";
+    component = resolveVueComponent(component);
+    return h(
+      component,
+      {
+        ...meta.component?.props,
+        ...this.$attrs
+      },
+      renderSlots(body, h, meta, meta)
+    );
+  }
+});
+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 = typeof node.props?.__ignoreMap === "undefined" && documentMeta.tags[originalTag] || originalTag;
+  if (node.tag === "binding") {
+    return renderBinding(node, h2, documentMeta, parentScope);
+  }
+  const component = resolveVueComponent(renderTag);
+  if (typeof component === "object") {
+    component.tag = originalTag;
+  }
+  const props = propsToData(node, documentMeta);
+  return h2(
+    component,
+    props,
+    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,
+    $route: () => useRoute(),
+    $document: documentMeta,
+    $doc: documentMeta
+  };
+  const splitter = /\.|\[(\d+)\]/;
+  const keys = node.props?.value.trim().split(splitter).filter(Boolean);
+  const value = keys.reduce((data2, key) => {
+    if (key in data2) {
+      if (typeof data2[key] === "function") {
+        return data2[key]();
+      } else {
+        return data2[key];
+      }
+    }
+    return {};
+  }, data);
+  return h2(Text, value);
+}
+function renderSlots(node, h2, documentMeta, parentProps) {
+  const children = node.children || [];
+  const slotNodes = children.reduce((data, node2) => {
+    if (!isTemplate(node2)) {
+      data[DEFAULT_SLOT].push(node2);
+      return data;
+    }
+    const slotName = getSlotName(node2);
+    data[slotName] = data[slotName] || [];
+    if (node2.type === "element") {
+      data[slotName].push(...node2.children || []);
+    }
+    return data;
+  }, {
+    [DEFAULT_SLOT]: []
+  });
+  const slots = Object.entries(slotNodes).reduce((slots2, [name, children2]) => {
+    if (!children2.length) {
+      return slots2;
+    }
+    slots2[name] = () => {
+      const vNodes = children2.map((child) => renderNode(child, h2, documentMeta, parentProps));
+      return mergeTextNodes(vNodes);
+    };
+    return slots2;
+  }, {});
+  return slots;
+}
+function propsToData(node, documentMeta) {
+  const { tag = "", props = {} } = node;
+  return Object.keys(props).reduce(function(data, key) {
+    if (key === "__ignoreMap") {
+      return data;
+    }
+    const value = props[key];
+    if (rxModel.test(key) && !nativeInputs.includes(tag)) {
+      return propsToDataRxModel(key, value, data, documentMeta);
+    }
+    if (key === "v-bind") {
+      return propsToDataVBind(key, value, data, documentMeta);
+    }
+    if (rxOn.test(key)) {
+      return propsToDataRxOn(key, value, data, documentMeta);
+    }
+    if (rxBind.test(key)) {
+      return propsToDataRxBind(key, value, data, documentMeta);
+    }
+    const { attribute } = find(html, key);
+    if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+      data[attribute] = value.join(" ");
+      return data;
+    }
+    data[attribute] = value;
+    return data;
+  }, {});
+}
+function propsToDataRxModel(key, value, data, documentMeta) {
+  const number = (d) => +d;
+  const trim = (d) => d.trim();
+  const noop = (d) => d;
+  const mods = key.replace(rxModel, "").split(".").filter((d) => d).reduce((d, k) => {
+    d[k] = true;
+    return d;
+  }, {});
+  const field = "value";
+  const event = mods.lazy ? "change" : "input";
+  const processor = mods.number ? number : mods.trim ? trim : noop;
+  data[field] = evalInContext(value, documentMeta);
+  data.on = data.on || {};
+  data.on[event] = (e) => documentMeta[value] = processor(e);
+  return data;
+}
+function propsToDataVBind(_key, value, data, documentMeta) {
+  const val = evalInContext(value, documentMeta);
+  data = Object.assign(data, val);
+  return data;
+}
+function propsToDataRxOn(key, value, data, documentMeta) {
+  key = key.replace(rxOn, "");
+  data.on = data.on || {};
+  data.on[key] = () => evalInContext(value, documentMeta);
+  return data;
+}
+function propsToDataRxBind(key, value, data, documentMeta) {
+  key = key.replace(rxBind, "");
+  data[key] = evalInContext(value, documentMeta);
+  return data;
+}
+const resolveVueComponent = (component) => {
+  if (!htmlTags.includes(component) && !component?.render) {
+    const componentFn = resolveComponent(pascalCase(component), false);
+    if (typeof componentFn === "object") {
+      return componentFn;
+    }
+  }
+  return component;
+};
+function evalInContext(code, context) {
+  const result = code.split(".").reduce((o, k) => typeof o === "object" ? o[k] : void 0, context);
+  return typeof result === "undefined" ? destr(code) : result;
+}
+function getSlotName(node) {
+  let name = "";
+  for (const propName of Object.keys(node.props || {})) {
+    if (!propName.startsWith("#") && !propName.startsWith("v-slot:")) {
+      continue;
+    }
+    name = propName.split(/[:#]/, 2)[1];
+    break;
+  }
+  return name || DEFAULT_SLOT;
+}
+function isTemplate(node) {
+  return node.tag === "template";
+}
+function mergeTextNodes(nodes) {
+  const mergedNodes = [];
+  for (const node of nodes) {
+    const previousNode = mergedNodes[mergedNodes.length - 1];
+    if (node.type === Text && previousNode?.type === Text) {
+      previousNode.children = previousNode.children + node.children;
+    } else {
+      mergedNodes.push(node);
+    }
+  }
+  return mergedNodes;
+}
+async function resolveContentComponents(body, meta) {
+  const components = Array.from(new Set(loadComponents(body, meta)));
+  await Promise.all(components.map(async (c) => {
+    if (c?.render || c?.ssrRender) {
+      return;
+    }
+    const resolvedComponent = resolveComponent(c);
+    if (resolvedComponent?.__asyncLoader && !resolvedComponent.__asyncResolved) {
+      await resolvedComponent.__asyncLoader();
+    }
+  }));
+  function loadComponents(node, documentMeta) {
+    const tag = node.tag;
+    if (node.type === "text" || tag === "binding") {
+      return [];
+    }
+    const renderTag = typeof node.props?.__ignoreMap === "undefined" && documentMeta.tags[tag] || tag;
+    const components2 = [];
+    if (node.type !== "root" && !htmlTags.includes(renderTag)) {
+      components2.push(renderTag);
+    }
+    for (const child of node.children || []) {
+      components2.push(...loadComponents(child, documentMeta));
+    }
+    return components2;
+  }
+}
+</script>

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

@@ -0,0 +1,92 @@
+import type { PropType, DefineComponent } from 'vue';
+import type { MDCRoot } from '../types';
+declare const _default: DefineComponent<{
+    /**
+     * Content to render
+     */
+    body: {
+        type: PropType<MDCRoot>;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /**
+     * Render only the excerpt
+     */
+    excerpt: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Root tag to use for rendering
+     */
+    tag: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * Whether or not to render Prose components instead of HTML tags
+     */
+    prose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * The map of custom components to use for rendering.
+     */
+    components: {
+        type: PropType<Record<string, string | DefineComponent<any, any, any>>>;
+        default: () => {};
+    };
+}, {
+    tags: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Content to render
+     */
+    body: {
+        type: PropType<MDCRoot>;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /**
+     * Render only the excerpt
+     */
+    excerpt: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Root tag to use for rendering
+     */
+    tag: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * Whether or not to render Prose components instead of HTML tags
+     */
+    prose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * The map of custom components to use for rendering.
+     */
+    components: {
+        type: PropType<Record<string, string | DefineComponent<any, any, any>>>;
+        default: () => {};
+    };
+}>>, {
+    tag: string;
+    data: Record<string, any>;
+    components: Record<string, string | DefineComponent<any, any, any>>;
+    excerpt: boolean;
+    prose: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/MDCSlot.vue

@@ -0,0 +1,60 @@
+<script>
+import { defineComponent, getCurrentInstance, useSlots, computed, h } from "#imports";
+import { flatUnwrap } from "../utils/node";
+export default defineComponent({
+  name: "MDCSlot",
+  functional: true,
+  props: {
+    name: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * Tags to unwrap separated by spaces
+     * Example: 'ul li'
+     */
+    unwrap: {
+      type: [Boolean, String],
+      default: false
+    },
+    /**
+      * VNode to render
+      * This is only useful for render functions
+     */
+    use: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { parent } = getCurrentInstance();
+    const { default: fallbackSlot } = useSlots();
+    const tags = computed(() => {
+      if (typeof props.unwrap === "string") {
+        return props.unwrap.split(" ");
+      }
+      return ["*"];
+    });
+    return {
+      fallbackSlot,
+      tags,
+      parent
+    };
+  },
+  render({ use, unwrap, fallbackSlot, tags, parent }) {
+    try {
+      let slot = use;
+      if (typeof use === "string") {
+        slot = parent?.slots[use] || parent?.parent?.slots[use];
+        console.warn(`Please set :use="$slots.${use}" in <MDCSlot> component to enable reactivity`);
+      }
+      if (!slot) {
+        return fallbackSlot ? fallbackSlot() : h("div");
+      }
+      return unwrap ? flatUnwrap(slot(), tags) : [slot()];
+    } catch (e) {
+      return h("div");
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,5 @@
+/**
+ * MDCSlot component
+ */
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,22 @@
+<template>
+  <NuxtLink
+    :href="href"
+    :target="target"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: ''
+  },
+  target: {
+    type: String,
+    default: undefined,
+    required: false
+  }
+})
+</script>

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

@@ -0,0 +1,5 @@
+<template>
+  <blockquote>
+    <slot />
+  </blockquote>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <code><slot /></code>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <em>
+    <slot />
+  </em>
+</template>

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

@@ -0,0 +1,20 @@
+<template>
+  <h1 :id="id">
+    <a
+      v-if="generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h1>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings.anchorLinks.h1)
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <h2 :id="id">
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings.anchorLinks.h2)
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <h3 :id="id">
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h3>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings.anchorLinks.h3)
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <h4 :id="id">
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h4>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings.anchorLinks.h4)
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <h5 :id="id">
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h5>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings.anchorLinks.h5)
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <h6 :id="id">
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h6>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings.anchorLinks.h6)
+</script>

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

@@ -0,0 +1,3 @@
+<template>
+  <hr>
+</template>

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

@@ -0,0 +1,42 @@
+<template>
+  <img
+    :src="refinedSrc"
+    :alt="alt"
+    :width="width"
+    :height="height"
+  >
+</template>
+
+<script setup lang="ts">
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
+import { useRuntimeConfig, computed } from '#imports'
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  alt: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: [String, Number],
+    default: undefined
+  },
+  height: {
+    type: [String, Number],
+    default: undefined
+  }
+})
+
+const refinedSrc = computed(() => {
+  if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+    if (_base !== '/' && !props.src.startsWith(_base)) {
+      return joinURL(_base, props.src)
+    }
+  }
+  return props.src
+})
+</script>

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

@@ -0,0 +1,3 @@
+<template>
+  <li><slot /></li>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <ol>
+    <slot />
+  </ol>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <p><slot /></p>
+</template>