@mark-sorcery/vue 0.1.0

package/README.md

@@ -0,0 +1,15 @@
+# @mark-3/vue
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.10. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/dist/index.cjs

@@ -0,0 +1,98 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let vue = require("vue");
+let _mark_sorcery_markdown_parser = require("@mark-sorcery/markdown-parser");
+
+//#region src/hast-to-vnodes.ts
+/**
+* Convert HAST node properties to Vue-compatible props.
+* - `className` array → `class` string
+* - `htmlFor` → `for`
+* - All other properties pass through as-is
+*/
+function convertProps(properties) {
+	const props = {};
+	for (const [key, value] of Object.entries(properties)) if (key === "className" && Array.isArray(value)) props["class"] = value.join(" ");
+	else if (key === "htmlFor") props["for"] = value;
+	else props[key] = value;
+	return props;
+}
+/** Resolve the tag/component for an element node from the Components option. */
+function resolveTag(node, components) {
+	return (typeof components === "function" ? components(node) : components[node.tagName]) ?? node.tagName;
+}
+/**
+* Internal recursive converter. `path` is a dot-separated string identifying
+* the node's position in the tree (e.g. `"0"`, `"0.1"`, `"0.1.2"`).
+*/
+function toVNodes(node, components, transition, path) {
+	if (Array.isArray(node)) return node.flatMap((n, i) => toVNodes(n, components, transition, `${path}.${i}`));
+	switch (node.type) {
+		case "root": return node.children.flatMap((child, i) => toVNodes(child, components, transition, String(i)));
+		case "element": {
+			const { properties = {}, children } = node;
+			const tag = resolveTag(node, components);
+			const props = convertProps(properties);
+			const childVNodes = children.flatMap((child, i) => toVNodes(child, components, transition, `${path}.${i}`));
+			const el = typeof tag === "string" ? (0, vue.h)(tag, props, childVNodes) : (0, vue.h)(tag, {
+				...props,
+				node
+			}, { default: () => childVNodes });
+			if (transition !== void 0) return [(0, vue.h)(vue.Transition, {
+				key: path,
+				...transition
+			}, { default: () => el })];
+			return [el];
+		}
+		case "text": return [node.value];
+		case "comment": return [(0, vue.createCommentVNode)(node.value)];
+		default: return [];
+	}
+}
+/**
+* Recursively convert a HAST node (or array of nodes) into Vue VNodeArrayChildren.
+*
+* @param node       - Root HAST node or array of nodes to convert.
+* @param components - Custom component map or resolver function.
+* @param transition - Optional `<Transition>` config applied to every element node.
+*/
+function hastToVNodes(node, components, transition) {
+	return toVNodes(node, components, transition, "");
+}
+
+//#endregion
+//#region src/Markdown.ts
+const Markdown = (0, vue.defineComponent)({
+	name: "Markdown",
+	props: {
+		markdown: {
+			type: String,
+			required: true
+		},
+		options: {
+			type: Object,
+			default: void 0
+		},
+		components: {
+			type: [Object, Function],
+			default: () => ({})
+		},
+		transition: {
+			type: [Boolean, Object],
+			default: false
+		}
+	},
+	setup(props) {
+		const hast = (0, vue.computed)(() => (0, _mark_sorcery_markdown_parser.parse)(props.markdown, props.options));
+		return () => {
+			const raw = props.components ?? {};
+			const components = typeof raw === "function" ? raw : Object.fromEntries(Object.entries(raw).map(([k, v]) => [k, typeof v === "string" || v == null ? v : (0, vue.markRaw)(v)]));
+			const transitionConfig = props.transition === true ? {} : props.transition || void 0;
+			return (0, vue.h)(vue.Fragment, hastToVNodes(hast.value, components, transitionConfig));
+		};
+	}
+});
+
+//#endregion
+exports.Markdown = Markdown;
+exports.hastToVNodes = hastToVNodes;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Transition","Fragment"],"sources":["../src/hast-to-vnodes.ts","../src/Markdown.ts"],"sourcesContent":["import { h, createCommentVNode, Transition } from 'vue';\r\nimport type { Element, Nodes } from 'hast';\r\nimport type { VNodeArrayChildren } from 'vue';\r\nimport type { ComponentResolution, Components, TransitionConfig } from './types.ts';\r\n\r\n/**\r\n * Convert HAST node properties to Vue-compatible props.\r\n * - `className` array → `class` string\r\n * - `htmlFor` → `for`\r\n * - All other properties pass through as-is\r\n */\r\nfunction convertProps(properties: Record<string, unknown>): Record<string, unknown> {\r\n  const props: Record<string, unknown> = {};\r\n\r\n  for (const [key, value] of Object.entries(properties)) {\r\n    if (key === 'className' && Array.isArray(value)) {\r\n      props['class'] = value.join(' ');\r\n    } else if (key === 'htmlFor') {\r\n      props['for'] = value;\r\n    } else {\r\n      props[key] = value;\r\n    }\r\n  }\r\n\r\n  return props;\r\n}\r\n\r\n/** Resolve the tag/component for an element node from the Components option. */\r\nfunction resolveTag(node: Element, components: Components): NonNullable<ComponentResolution> {\r\n  const resolved = typeof components === 'function'\r\n    ? components(node)\r\n    : components[node.tagName];\r\n  return resolved ?? node.tagName;\r\n}\r\n\r\n/**\r\n * Internal recursive converter. `path` is a dot-separated string identifying\r\n * the node's position in the tree (e.g. `\"0\"`, `\"0.1\"`, `\"0.1.2\"`).\r\n */\r\nfunction toVNodes(\r\n  node: Nodes | Nodes[],\r\n  components: Components,\r\n  transition: TransitionConfig | undefined,\r\n  path: string,\r\n): VNodeArrayChildren {\r\n  if (Array.isArray(node)) {\r\n    return node.flatMap((n, i) => toVNodes(n, components, transition, `${path}.${i}`));\r\n  }\r\n\r\n  switch (node.type) {\r\n    case 'root':\r\n      return node.children.flatMap((child, i) =>\r\n        toVNodes(child, components, transition, String(i)),\r\n      );\r\n\r\n    case 'element': {\r\n      const { properties = {}, children } = node;\r\n      const tag = resolveTag(node, components);\r\n      const props = convertProps(properties as Record<string, unknown>);\r\n      const childVNodes: VNodeArrayChildren = children.flatMap((child, i) =>\r\n        toVNodes(child, components, transition, `${path}.${i}`),\r\n      );\r\n\r\n      // Build the element VNode\r\n      // Custom Vue components also receive the raw HAST `node` prop so they\r\n      // can access the original element (e.g. to extract text content for\r\n      // syntax highlighting or diagram rendering).\r\n      const el = typeof tag === 'string'\r\n        ? h(tag, props, childVNodes)\r\n        : h(tag, { ...props, node }, { default: () => childVNodes });\r\n\r\n      // Wrap in <Transition> if requested, using the tree path as a stable key\r\n      if (transition !== undefined) {\r\n        return [h(Transition, { key: path, ...transition }, { default: () => el })];\r\n      }\r\n      return [el];\r\n    }\r\n\r\n    case 'text':\r\n      return [node.value];\r\n\r\n    case 'comment':\r\n      return [createCommentVNode(node.value)];\r\n\r\n    default:\r\n      return [];\r\n  }\r\n}\r\n\r\n/**\r\n * Recursively convert a HAST node (or array of nodes) into Vue VNodeArrayChildren.\r\n *\r\n * @param node       - Root HAST node or array of nodes to convert.\r\n * @param components - Custom component map or resolver function.\r\n * @param transition - Optional `<Transition>` config applied to every element node.\r\n */\r\nexport function hastToVNodes(\r\n  node: Nodes | Nodes[],\r\n  components: Components,\r\n  transition?: TransitionConfig,\r\n): VNodeArrayChildren {\r\n  return toVNodes(node, components, transition, '');\r\n}\r\n","import { computed, defineComponent, Fragment, h, markRaw } from 'vue';\r\nimport { parse } from '@mark-sorcery/markdown-parser';\r\nimport { hastToVNodes } from './hast-to-vnodes.ts';\r\nimport type { Components, MarkdownProps, ParseOptions, TransitionConfig } from './types.ts';\r\n\r\nexport const Markdown = defineComponent({\r\n  name: 'Markdown',\r\n\r\n  props: {\r\n    markdown: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    options: {\r\n      type: Object as () => ParseOptions,\r\n      default: undefined,\r\n    },\r\n    components: {\r\n      type: [Object, Function] as unknown as () => Components,\r\n      default: () => ({}),\r\n    },\r\n    transition: {\r\n      type: [Boolean, Object] as unknown as () => boolean | TransitionConfig,\r\n      default: false,\r\n    },\r\n  } satisfies {\r\n    [K in keyof MarkdownProps]-?: unknown;\r\n  },\r\n\r\n  setup(props) {\r\n    const hast = computed(() => parse(props.markdown, props.options));\r\n\r\n    return () => {\r\n      const raw = props.components ?? {};\r\n      // Function resolvers pass through; record values are wrapped in markRaw\r\n      // so Vue doesn't make component objects reactive (perf warning prevention)\r\n      const components: Components = typeof raw === 'function'\r\n        ? raw\r\n        : Object.fromEntries(\r\n            Object.entries(raw).map(([k, v]) =>\r\n              [k, typeof v === 'string' || v == null ? v : markRaw(v)],\r\n            ),\r\n          );\r\n\r\n      const transitionConfig: TransitionConfig | undefined =\r\n        props.transition === true\r\n          ? {}\r\n          : props.transition || undefined;\r\n\r\n      const vnodes = hastToVNodes(hast.value, components, transitionConfig);\r\n      return h(Fragment, vnodes);\r\n    };\r\n  },\r\n});\r\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,aAAa,YAA8D;CAClF,MAAM,QAAiC,EAAE;AAEzC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,WAAW,CACnD,KAAI,QAAQ,eAAe,MAAM,QAAQ,MAAM,CAC7C,OAAM,WAAW,MAAM,KAAK,IAAI;UACvB,QAAQ,UACjB,OAAM,SAAS;KAEf,OAAM,OAAO;AAIjB,QAAO;;;AAIT,SAAS,WAAW,MAAe,YAA0D;AAI3F,SAHiB,OAAO,eAAe,aACnC,WAAW,KAAK,GAChB,WAAW,KAAK,aACD,KAAK;;;;;;AAO1B,SAAS,SACP,MACA,YACA,YACA,MACoB;AACpB,KAAI,MAAM,QAAQ,KAAK,CACrB,QAAO,KAAK,SAAS,GAAG,MAAM,SAAS,GAAG,YAAY,YAAY,GAAG,KAAK,GAAG,IAAI,CAAC;AAGpF,SAAQ,KAAK,MAAb;EACE,KAAK,OACH,QAAO,KAAK,SAAS,SAAS,OAAO,MACnC,SAAS,OAAO,YAAY,YAAY,OAAO,EAAE,CAAC,CACnD;EAEH,KAAK,WAAW;GACd,MAAM,EAAE,aAAa,EAAE,EAAE,aAAa;GACtC,MAAM,MAAM,WAAW,MAAM,WAAW;GACxC,MAAM,QAAQ,aAAa,WAAsC;GACjE,MAAM,cAAkC,SAAS,SAAS,OAAO,MAC/D,SAAS,OAAO,YAAY,YAAY,GAAG,KAAK,GAAG,IAAI,CACxD;GAMD,MAAM,KAAK,OAAO,QAAQ,sBACpB,KAAK,OAAO,YAAY,cACxB,KAAK;IAAE,GAAG;IAAO;IAAM,EAAE,EAAE,eAAe,aAAa,CAAC;AAG9D,OAAI,eAAe,OACjB,QAAO,YAAGA,gBAAY;IAAE,KAAK;IAAM,GAAG;IAAY,EAAE,EAAE,eAAe,IAAI,CAAC,CAAC;AAE7E,UAAO,CAAC,GAAG;;EAGb,KAAK,OACH,QAAO,CAAC,KAAK,MAAM;EAErB,KAAK,UACH,QAAO,6BAAoB,KAAK,MAAM,CAAC;EAEzC,QACE,QAAO,EAAE;;;;;;;;;;AAWf,SAAgB,aACd,MACA,YACA,YACoB;AACpB,QAAO,SAAS,MAAM,YAAY,YAAY,GAAG;;;;;AChGnD,MAAa,oCAA2B;CACtC,MAAM;CAEN,OAAO;EACL,UAAU;GACR,MAAM;GACN,UAAU;GACX;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,YAAY;GACV,MAAM,CAAC,QAAQ,SAAS;GACxB,gBAAgB,EAAE;GACnB;EACD,YAAY;GACV,MAAM,CAAC,SAAS,OAAO;GACvB,SAAS;GACV;EACF;CAID,MAAM,OAAO;EACX,MAAM,wEAA4B,MAAM,UAAU,MAAM,QAAQ,CAAC;AAEjE,eAAa;GACX,MAAM,MAAM,MAAM,cAAc,EAAE;GAGlC,MAAM,aAAyB,OAAO,QAAQ,aAC1C,MACA,OAAO,YACL,OAAO,QAAQ,IAAI,CAAC,KAAK,CAAC,GAAG,OAC3B,CAAC,GAAG,OAAO,MAAM,YAAY,KAAK,OAAO,qBAAY,EAAE,CAAC,CACzD,CACF;GAEL,MAAM,mBACJ,MAAM,eAAe,OACjB,EAAE,GACF,MAAM,cAAc;AAG1B,qBAASC,cADM,aAAa,KAAK,OAAO,YAAY,iBAAiB,CAC3C;;;CAG/B,CAAC"}

package/dist/index.d.cts

@@ -0,0 +1,457 @@
+import * as vue from "vue";
+import { BaseTransitionProps, Component, VNodeArrayChildren } from "vue";
+import { ParseOptions } from "@mark-sorcery/markdown-parser";
+
+//#region ../../node_modules/.bun/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts
+// ## Interfaces
+/**
+ * Info associated with nodes by the ecosystem.
+ *
+ * This space is guaranteed to never be specified by unist or specifications
+ * implementing unist.
+ * But you can use it in utilities and plugins to store data.
+ *
+ * This type can be augmented to register custom data.
+ * For example:
+ *
+ * ```ts
+ * declare module 'unist' {
+ *   interface Data {
+ *     // `someNode.data.myId` is typed as `number | undefined`
+ *     myId?: number | undefined
+ *   }
+ * }
+ * ```
+ */
+interface Data$1 {}
+/**
+ * One place in a source file.
+ */
+interface Point {
+  /**
+   * Line in a source file (1-indexed integer).
+   */
+  line: number;
+  /**
+   * Column in a source file (1-indexed integer).
+   */
+  column: number;
+  /**
+   * Character in a source file (0-indexed integer).
+   */
+  offset?: number | undefined;
+}
+/**
+ * Position of a node in a source document.
+ *
+ * A position is a range between two points.
+ */
+interface Position {
+  /**
+   * Place of the first character of the parsed source region.
+   */
+  start: Point;
+  /**
+   * Place of the first character after the parsed source region.
+   */
+  end: Point;
+}
+/**
+ * Abstract unist node.
+ *
+ * The syntactic unit in unist syntax trees are called nodes.
+ *
+ * This interface is supposed to be extended.
+ * If you can use {@link Literal} or {@link Parent}, you should.
+ * But for example in markdown, a `thematicBreak` (`***`), is neither literal
+ * nor parent, but still a node.
+ */
+interface Node$1 {
+  /**
+   * Node type.
+   */
+  type: string;
+  /**
+   * Info from the ecosystem.
+   */
+  data?: Data$1 | undefined;
+  /**
+   * Position of a node in a source document.
+   *
+   * Nodes that are generated (not in the original source document) must not
+   * have a position.
+   */
+  position?: Position | undefined;
+}
+//#endregion
+//#region ../../node_modules/.bun/@types+hast@3.0.4/node_modules/@types/hast/index.d.ts
+// ## Interfaces
+/**
+ * Info associated with hast nodes by the ecosystem.
+ *
+ * This space is guaranteed to never be specified by unist or hast.
+ * But you can use it in utilities and plugins to store data.
+ *
+ * This type can be augmented to register custom data.
+ * For example:
+ *
+ * ```ts
+ * declare module 'hast' {
+ *   interface Data {
+ *     // `someNode.data.myId` is typed as `number | undefined`
+ *     myId?: number | undefined
+ *   }
+ * }
+ * ```
+ */
+interface Data extends Data$1 {}
+/**
+ * Info associated with an element.
+ */
+interface Properties {
+  [PropertyName: string]: boolean | number | string | null | undefined | Array<string | number>;
+}
+// ## Content maps
+/**
+ * Union of registered hast nodes that can occur in {@link Element}.
+ *
+ * To register mote custom hast nodes, add them to {@link ElementContentMap}.
+ * They will be automatically added here.
+ */
+type ElementContent = ElementContentMap[keyof ElementContentMap];
+/**
+ * Registry of all hast nodes that can occur as children of {@link Element}.
+ *
+ * For a union of all {@link Element} children, see {@link ElementContent}.
+ */
+interface ElementContentMap {
+  comment: Comment;
+  element: Element;
+  text: Text;
+}
+/**
+ * Union of registered hast nodes that can occur in {@link Root}.
+ *
+ * To register custom hast nodes, add them to {@link RootContentMap}.
+ * They will be automatically added here.
+ */
+type RootContent = RootContentMap[keyof RootContentMap];
+/**
+ * Registry of all hast nodes that can occur as children of {@link Root}.
+ *
+ * > 👉 **Note**: {@link Root} does not need to be an entire document.
+ * > it can also be a fragment.
+ *
+ * For a union of all {@link Root} children, see {@link RootContent}.
+ */
+interface RootContentMap {
+  comment: Comment;
+  doctype: Doctype;
+  element: Element;
+  text: Text;
+}
+/**
+ * Union of registered hast nodes.
+ *
+ * To register custom hast nodes, add them to {@link RootContentMap} and other
+ * places where relevant.
+ * They will be automatically added here.
+ */
+type Nodes = Root | RootContent;
+// ## Abstract nodes
+/**
+ * Abstract hast node.
+ *
+ * This interface is supposed to be extended.
+ * If you can use {@link Literal} or {@link Parent}, you should.
+ * But for example in HTML, a `Doctype` is neither literal nor parent, but
+ * still a node.
+ *
+ * To register custom hast nodes, add them to {@link RootContentMap} and other
+ * places where relevant (such as {@link ElementContentMap}).
+ *
+ * For a union of all registered hast nodes, see {@link Nodes}.
+ */
+interface Node extends Node$1 {
+  /**
+   * Info from the ecosystem.
+   */
+  data?: Data | undefined;
+}
+/**
+ * Abstract hast node that contains the smallest possible value.
+ *
+ * This interface is supposed to be extended if you make custom hast nodes.
+ *
+ * For a union of all registered hast literals, see {@link Literals}.
+ */
+interface Literal extends Node {
+  /**
+   * Plain-text value.
+   */
+  value: string;
+}
+/**
+ * Abstract hast node that contains other hast nodes (*children*).
+ *
+ * This interface is supposed to be extended if you make custom hast nodes.
+ *
+ * For a union of all registered hast parents, see {@link Parents}.
+ */
+interface Parent extends Node {
+  /**
+   * List of children.
+   */
+  children: RootContent[];
+}
+// ## Concrete nodes
+/**
+ * HTML comment.
+ */
+interface Comment extends Literal {
+  /**
+   * Node type of HTML comments in hast.
+   */
+  type: "comment";
+  /**
+   * Data associated with the comment.
+   */
+  data?: CommentData | undefined;
+}
+/**
+ * Info associated with hast comments by the ecosystem.
+ */
+interface CommentData extends Data {}
+/**
+ * HTML document type.
+ */
+interface Doctype extends Node$1 {
+  /**
+   * Node type of HTML document types in hast.
+   */
+  type: "doctype";
+  /**
+   * Data associated with the doctype.
+   */
+  data?: DoctypeData | undefined;
+}
+/**
+ * Info associated with hast doctypes by the ecosystem.
+ */
+interface DoctypeData extends Data {}
+/**
+ * HTML element.
+ */
+interface Element extends Parent {
+  /**
+   * Node type of elements.
+   */
+  type: "element";
+  /**
+   * Tag name (such as `'body'`) of the element.
+   */
+  tagName: string;
+  /**
+   * Info associated with the element.
+   */
+  properties: Properties;
+  /**
+   * Children of element.
+   */
+  children: ElementContent[];
+  /**
+   * When the `tagName` field is `'template'`, a `content` field can be
+   * present.
+   */
+  content?: Root | undefined;
+  /**
+   * Data associated with the element.
+   */
+  data?: ElementData | undefined;
+}
+/**
+ * Info associated with hast elements by the ecosystem.
+ */
+interface ElementData extends Data {}
+/**
+ * Document fragment or a whole document.
+ *
+ * Should be used as the root of a tree and must not be used as a child.
+ *
+ * Can also be used as the value for the content field on a `'template'` element.
+ */
+interface Root extends Parent {
+  /**
+   * Node type of hast root.
+   */
+  type: "root";
+  /**
+   * Children of root.
+   */
+  children: RootContent[];
+  /**
+   * Data associated with the hast root.
+   */
+  data?: RootData | undefined;
+}
+/**
+ * Info associated with hast root nodes by the ecosystem.
+ */
+interface RootData extends Data {}
+/**
+ * HTML character data (plain text).
+ */
+interface Text extends Literal {
+  /**
+   * Node type of HTML character data (plain text) in hast.
+   */
+  type: "text";
+  /**
+   * Data associated with the text.
+   */
+  data?: TextData | undefined;
+}
+/**
+ * Info associated with hast texts by the ecosystem.
+ */
+interface TextData extends Data {}
+//#endregion
+//#region src/types.d.ts
+/**
+ * Configuration forwarded to Vue's `<Transition>` component.
+ * All props are optional; when `transition: true` is used on `<Markdown>`,
+ * defaults to `{}` which activates Vue's default `v-enter-*` classes.
+ *
+ * @see https://vuejs.org/api/built-in-components.html#transition
+ */
+interface TransitionConfig {
+  name?: string;
+  css?: boolean;
+  appear?: boolean;
+  mode?: 'in-out' | 'out-in' | 'default';
+  enterFromClass?: string;
+  enterActiveClass?: string;
+  enterToClass?: string;
+  leaveFromClass?: string;
+  leaveActiveClass?: string;
+  leaveToClass?: string;
+  appearFromClass?: string;
+  appearActiveClass?: string;
+  appearToClass?: string;
+  onBeforeEnter?: BaseTransitionProps['onBeforeEnter'];
+  onEnter?: BaseTransitionProps['onEnter'];
+  onAfterEnter?: BaseTransitionProps['onAfterEnter'];
+  onEnterCancelled?: BaseTransitionProps['onEnterCancelled'];
+  onBeforeLeave?: BaseTransitionProps['onBeforeLeave'];
+  onLeave?: BaseTransitionProps['onLeave'];
+  onAfterLeave?: BaseTransitionProps['onAfterLeave'];
+  onLeaveCancelled?: BaseTransitionProps['onLeaveCancelled'];
+}
+/** A resolved component value: a Vue component, a tag string, or null/undefined to fall back to the default element. */
+type ComponentResolution = Component | string | null | undefined;
+/**
+ * Resolves which Vue component or tag to render for a given HAST element node.
+ *
+ * Can be:
+ * - A **record** mapping tag names to components or tag strings (e.g. `{ h1: MyHeading }`)
+ * - A **function** `(node: Element) => ComponentResolution` — called for every element;
+ *   return `null` or `undefined` to fall back to the default HTML element.
+ *
+ * @example — record form
+ * const components: Components = { h1: MyHeading, code: MyCode }
+ *
+ * @example — function form
+ * const components: Components = (node) => {
+ *   if (node.tagName === 'h1') return MyHeading
+ *   if (node.properties?.className?.includes('warning')) return MyWarning
+ * }
+ */
+type Components = Partial<Record<string, ComponentResolution>> | ((node: Element) => ComponentResolution);
+/**
+ * Props automatically injected into every custom Vue component rendered by
+ * `<Markdown>`. Use this to type your custom component's `node` prop.
+ *
+ * @example
+ * import type { NodeProps } from '@mark-sorcery/vue'
+ * const props = defineProps<NodeProps>()
+ * // props.node is the raw HAST Element
+ */
+interface NodeProps {
+  node: Element;
+}
+interface MarkdownProps {
+  /** The markdown string to render. May be a partial/streaming string. */
+  markdown: string;
+  /** Options forwarded to the underlying markdown parser. */
+  options?: ParseOptions;
+  /** Custom Vue components or tags to use in place of default HTML elements. */
+  components?: Components;
+  /**
+   * Optional Vue `<Transition>` configuration applied to every rendered element node.
+   *
+   * - `true` — enables transitions with Vue's default classes (`v-enter-*`).
+   * - `TransitionConfig` object — forwarded as props to each `<Transition>` wrapper.
+   * - `false` / `undefined` — no transitions (default).
+   *
+   * @example
+   * // Basic fade (add CSS: .fade-enter-active { transition: opacity 0.3s } .fade-enter-from { opacity: 0 })
+   * :transition="{ name: 'fade', appear: true }"
+   */
+  transition?: boolean | TransitionConfig;
+}
+//#endregion
+//#region src/Markdown.d.ts
+declare const Markdown: vue.DefineComponent<vue.ExtractPropTypes<{
+  markdown: {
+    type: StringConstructor;
+    required: boolean;
+  };
+  options: {
+    type: () => ParseOptions;
+    default: undefined;
+  };
+  components: {
+    type: () => Components;
+    default: () => {};
+  };
+  transition: {
+    type: () => boolean | TransitionConfig;
+    default: boolean;
+  };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+  markdown: {
+    type: StringConstructor;
+    required: boolean;
+  };
+  options: {
+    type: () => ParseOptions;
+    default: undefined;
+  };
+  components: {
+    type: () => Components;
+    default: () => {};
+  };
+  transition: {
+    type: () => boolean | TransitionConfig;
+    default: boolean;
+  };
+}>> & Readonly<{}>, {
+  options: ParseOptions;
+  components: Components;
+  transition: boolean | TransitionConfig;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/hast-to-vnodes.d.ts
+/**
+ * Recursively convert a HAST node (or array of nodes) into Vue VNodeArrayChildren.
+ *
+ * @param node       - Root HAST node or array of nodes to convert.
+ * @param components - Custom component map or resolver function.
+ * @param transition - Optional `<Transition>` config applied to every element node.
+ */
+declare function hastToVNodes(node: Nodes | Nodes[], components: Components, transition?: TransitionConfig): VNodeArrayChildren;
+//#endregion
+export { type Components, Markdown, type MarkdownProps, type NodeProps, type ParseOptions, type TransitionConfig, hastToVNodes };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -0,0 +1,457 @@
+import * as vue from "vue";
+import { BaseTransitionProps, Component, VNodeArrayChildren } from "vue";
+import { ParseOptions } from "@mark-sorcery/markdown-parser";
+
+//#region ../../node_modules/.bun/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts
+// ## Interfaces
+/**
+ * Info associated with nodes by the ecosystem.
+ *
+ * This space is guaranteed to never be specified by unist or specifications
+ * implementing unist.
+ * But you can use it in utilities and plugins to store data.
+ *
+ * This type can be augmented to register custom data.
+ * For example:
+ *
+ * ```ts
+ * declare module 'unist' {
+ *   interface Data {
+ *     // `someNode.data.myId` is typed as `number | undefined`
+ *     myId?: number | undefined
+ *   }
+ * }
+ * ```
+ */
+interface Data$1 {}
+/**
+ * One place in a source file.
+ */
+interface Point {
+  /**
+   * Line in a source file (1-indexed integer).
+   */
+  line: number;
+  /**
+   * Column in a source file (1-indexed integer).
+   */
+  column: number;
+  /**
+   * Character in a source file (0-indexed integer).
+   */
+  offset?: number | undefined;
+}
+/**
+ * Position of a node in a source document.
+ *
+ * A position is a range between two points.
+ */
+interface Position {
+  /**
+   * Place of the first character of the parsed source region.
+   */
+  start: Point;
+  /**
+   * Place of the first character after the parsed source region.
+   */
+  end: Point;
+}
+/**
+ * Abstract unist node.
+ *
+ * The syntactic unit in unist syntax trees are called nodes.
+ *
+ * This interface is supposed to be extended.
+ * If you can use {@link Literal} or {@link Parent}, you should.
+ * But for example in markdown, a `thematicBreak` (`***`), is neither literal
+ * nor parent, but still a node.
+ */
+interface Node$1 {
+  /**
+   * Node type.
+   */
+  type: string;
+  /**
+   * Info from the ecosystem.
+   */
+  data?: Data$1 | undefined;
+  /**
+   * Position of a node in a source document.
+   *
+   * Nodes that are generated (not in the original source document) must not
+   * have a position.
+   */
+  position?: Position | undefined;
+}
+//#endregion
+//#region ../../node_modules/.bun/@types+hast@3.0.4/node_modules/@types/hast/index.d.ts
+// ## Interfaces
+/**
+ * Info associated with hast nodes by the ecosystem.
+ *
+ * This space is guaranteed to never be specified by unist or hast.
+ * But you can use it in utilities and plugins to store data.
+ *
+ * This type can be augmented to register custom data.
+ * For example:
+ *
+ * ```ts
+ * declare module 'hast' {
+ *   interface Data {
+ *     // `someNode.data.myId` is typed as `number | undefined`
+ *     myId?: number | undefined
+ *   }
+ * }
+ * ```
+ */
+interface Data extends Data$1 {}
+/**
+ * Info associated with an element.
+ */
+interface Properties {
+  [PropertyName: string]: boolean | number | string | null | undefined | Array<string | number>;
+}
+// ## Content maps
+/**
+ * Union of registered hast nodes that can occur in {@link Element}.
+ *
+ * To register mote custom hast nodes, add them to {@link ElementContentMap}.
+ * They will be automatically added here.
+ */
+type ElementContent = ElementContentMap[keyof ElementContentMap];
+/**
+ * Registry of all hast nodes that can occur as children of {@link Element}.
+ *
+ * For a union of all {@link Element} children, see {@link ElementContent}.
+ */
+interface ElementContentMap {
+  comment: Comment;
+  element: Element;
+  text: Text;
+}
+/**
+ * Union of registered hast nodes that can occur in {@link Root}.
+ *
+ * To register custom hast nodes, add them to {@link RootContentMap}.
+ * They will be automatically added here.
+ */
+type RootContent = RootContentMap[keyof RootContentMap];
+/**
+ * Registry of all hast nodes that can occur as children of {@link Root}.
+ *
+ * > 👉 **Note**: {@link Root} does not need to be an entire document.
+ * > it can also be a fragment.
+ *
+ * For a union of all {@link Root} children, see {@link RootContent}.
+ */
+interface RootContentMap {
+  comment: Comment;
+  doctype: Doctype;
+  element: Element;
+  text: Text;
+}
+/**
+ * Union of registered hast nodes.
+ *
+ * To register custom hast nodes, add them to {@link RootContentMap} and other
+ * places where relevant.
+ * They will be automatically added here.
+ */
+type Nodes = Root | RootContent;
+// ## Abstract nodes
+/**
+ * Abstract hast node.
+ *
+ * This interface is supposed to be extended.
+ * If you can use {@link Literal} or {@link Parent}, you should.
+ * But for example in HTML, a `Doctype` is neither literal nor parent, but
+ * still a node.
+ *
+ * To register custom hast nodes, add them to {@link RootContentMap} and other
+ * places where relevant (such as {@link ElementContentMap}).
+ *
+ * For a union of all registered hast nodes, see {@link Nodes}.
+ */
+interface Node extends Node$1 {
+  /**
+   * Info from the ecosystem.
+   */
+  data?: Data | undefined;
+}
+/**
+ * Abstract hast node that contains the smallest possible value.
+ *
+ * This interface is supposed to be extended if you make custom hast nodes.
+ *
+ * For a union of all registered hast literals, see {@link Literals}.
+ */
+interface Literal extends Node {
+  /**
+   * Plain-text value.
+   */
+  value: string;
+}
+/**
+ * Abstract hast node that contains other hast nodes (*children*).
+ *
+ * This interface is supposed to be extended if you make custom hast nodes.
+ *
+ * For a union of all registered hast parents, see {@link Parents}.
+ */
+interface Parent extends Node {
+  /**
+   * List of children.
+   */
+  children: RootContent[];
+}
+// ## Concrete nodes
+/**
+ * HTML comment.
+ */
+interface Comment extends Literal {
+  /**
+   * Node type of HTML comments in hast.
+   */
+  type: "comment";
+  /**
+   * Data associated with the comment.
+   */
+  data?: CommentData | undefined;
+}
+/**
+ * Info associated with hast comments by the ecosystem.
+ */
+interface CommentData extends Data {}
+/**
+ * HTML document type.
+ */
+interface Doctype extends Node$1 {
+  /**
+   * Node type of HTML document types in hast.
+   */
+  type: "doctype";
+  /**
+   * Data associated with the doctype.
+   */
+  data?: DoctypeData | undefined;
+}
+/**
+ * Info associated with hast doctypes by the ecosystem.
+ */
+interface DoctypeData extends Data {}
+/**
+ * HTML element.
+ */
+interface Element extends Parent {
+  /**
+   * Node type of elements.
+   */
+  type: "element";
+  /**
+   * Tag name (such as `'body'`) of the element.
+   */
+  tagName: string;
+  /**
+   * Info associated with the element.
+   */
+  properties: Properties;
+  /**
+   * Children of element.
+   */
+  children: ElementContent[];
+  /**
+   * When the `tagName` field is `'template'`, a `content` field can be
+   * present.
+   */
+  content?: Root | undefined;
+  /**
+   * Data associated with the element.
+   */
+  data?: ElementData | undefined;
+}
+/**
+ * Info associated with hast elements by the ecosystem.
+ */
+interface ElementData extends Data {}
+/**
+ * Document fragment or a whole document.
+ *
+ * Should be used as the root of a tree and must not be used as a child.
+ *
+ * Can also be used as the value for the content field on a `'template'` element.
+ */
+interface Root extends Parent {
+  /**
+   * Node type of hast root.
+   */
+  type: "root";
+  /**
+   * Children of root.
+   */
+  children: RootContent[];
+  /**
+   * Data associated with the hast root.
+   */
+  data?: RootData | undefined;
+}
+/**
+ * Info associated with hast root nodes by the ecosystem.
+ */
+interface RootData extends Data {}
+/**
+ * HTML character data (plain text).
+ */
+interface Text extends Literal {
+  /**
+   * Node type of HTML character data (plain text) in hast.
+   */
+  type: "text";
+  /**
+   * Data associated with the text.
+   */
+  data?: TextData | undefined;
+}
+/**
+ * Info associated with hast texts by the ecosystem.
+ */
+interface TextData extends Data {}
+//#endregion
+//#region src/types.d.ts
+/**
+ * Configuration forwarded to Vue's `<Transition>` component.
+ * All props are optional; when `transition: true` is used on `<Markdown>`,
+ * defaults to `{}` which activates Vue's default `v-enter-*` classes.
+ *
+ * @see https://vuejs.org/api/built-in-components.html#transition
+ */
+interface TransitionConfig {
+  name?: string;
+  css?: boolean;
+  appear?: boolean;
+  mode?: 'in-out' | 'out-in' | 'default';
+  enterFromClass?: string;
+  enterActiveClass?: string;
+  enterToClass?: string;
+  leaveFromClass?: string;
+  leaveActiveClass?: string;
+  leaveToClass?: string;
+  appearFromClass?: string;
+  appearActiveClass?: string;
+  appearToClass?: string;
+  onBeforeEnter?: BaseTransitionProps['onBeforeEnter'];
+  onEnter?: BaseTransitionProps['onEnter'];
+  onAfterEnter?: BaseTransitionProps['onAfterEnter'];
+  onEnterCancelled?: BaseTransitionProps['onEnterCancelled'];
+  onBeforeLeave?: BaseTransitionProps['onBeforeLeave'];
+  onLeave?: BaseTransitionProps['onLeave'];
+  onAfterLeave?: BaseTransitionProps['onAfterLeave'];
+  onLeaveCancelled?: BaseTransitionProps['onLeaveCancelled'];
+}
+/** A resolved component value: a Vue component, a tag string, or null/undefined to fall back to the default element. */
+type ComponentResolution = Component | string | null | undefined;
+/**
+ * Resolves which Vue component or tag to render for a given HAST element node.
+ *
+ * Can be:
+ * - A **record** mapping tag names to components or tag strings (e.g. `{ h1: MyHeading }`)
+ * - A **function** `(node: Element) => ComponentResolution` — called for every element;
+ *   return `null` or `undefined` to fall back to the default HTML element.
+ *
+ * @example — record form
+ * const components: Components = { h1: MyHeading, code: MyCode }
+ *
+ * @example — function form
+ * const components: Components = (node) => {
+ *   if (node.tagName === 'h1') return MyHeading
+ *   if (node.properties?.className?.includes('warning')) return MyWarning
+ * }
+ */
+type Components = Partial<Record<string, ComponentResolution>> | ((node: Element) => ComponentResolution);
+/**
+ * Props automatically injected into every custom Vue component rendered by
+ * `<Markdown>`. Use this to type your custom component's `node` prop.
+ *
+ * @example
+ * import type { NodeProps } from '@mark-sorcery/vue'
+ * const props = defineProps<NodeProps>()
+ * // props.node is the raw HAST Element
+ */
+interface NodeProps {
+  node: Element;
+}
+interface MarkdownProps {
+  /** The markdown string to render. May be a partial/streaming string. */
+  markdown: string;
+  /** Options forwarded to the underlying markdown parser. */
+  options?: ParseOptions;
+  /** Custom Vue components or tags to use in place of default HTML elements. */
+  components?: Components;
+  /**
+   * Optional Vue `<Transition>` configuration applied to every rendered element node.
+   *
+   * - `true` — enables transitions with Vue's default classes (`v-enter-*`).
+   * - `TransitionConfig` object — forwarded as props to each `<Transition>` wrapper.
+   * - `false` / `undefined` — no transitions (default).
+   *
+   * @example
+   * // Basic fade (add CSS: .fade-enter-active { transition: opacity 0.3s } .fade-enter-from { opacity: 0 })
+   * :transition="{ name: 'fade', appear: true }"
+   */
+  transition?: boolean | TransitionConfig;
+}
+//#endregion
+//#region src/Markdown.d.ts
+declare const Markdown: vue.DefineComponent<vue.ExtractPropTypes<{
+  markdown: {
+    type: StringConstructor;
+    required: boolean;
+  };
+  options: {
+    type: () => ParseOptions;
+    default: undefined;
+  };
+  components: {
+    type: () => Components;
+    default: () => {};
+  };
+  transition: {
+    type: () => boolean | TransitionConfig;
+    default: boolean;
+  };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+  markdown: {
+    type: StringConstructor;
+    required: boolean;
+  };
+  options: {
+    type: () => ParseOptions;
+    default: undefined;
+  };
+  components: {
+    type: () => Components;
+    default: () => {};
+  };
+  transition: {
+    type: () => boolean | TransitionConfig;
+    default: boolean;
+  };
+}>> & Readonly<{}>, {
+  options: ParseOptions;
+  components: Components;
+  transition: boolean | TransitionConfig;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/hast-to-vnodes.d.ts
+/**
+ * Recursively convert a HAST node (or array of nodes) into Vue VNodeArrayChildren.
+ *
+ * @param node       - Root HAST node or array of nodes to convert.
+ * @param components - Custom component map or resolver function.
+ * @param transition - Optional `<Transition>` config applied to every element node.
+ */
+declare function hastToVNodes(node: Nodes | Nodes[], components: Components, transition?: TransitionConfig): VNodeArrayChildren;
+//#endregion
+export { type Components, Markdown, type MarkdownProps, type NodeProps, type ParseOptions, type TransitionConfig, hastToVNodes };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,96 @@
+import { Fragment, Transition, computed, createCommentVNode, defineComponent, h, markRaw } from "vue";
+import { parse } from "@mark-sorcery/markdown-parser";
+
+//#region src/hast-to-vnodes.ts
+/**
+* Convert HAST node properties to Vue-compatible props.
+* - `className` array → `class` string
+* - `htmlFor` → `for`
+* - All other properties pass through as-is
+*/
+function convertProps(properties) {
+	const props = {};
+	for (const [key, value] of Object.entries(properties)) if (key === "className" && Array.isArray(value)) props["class"] = value.join(" ");
+	else if (key === "htmlFor") props["for"] = value;
+	else props[key] = value;
+	return props;
+}
+/** Resolve the tag/component for an element node from the Components option. */
+function resolveTag(node, components) {
+	return (typeof components === "function" ? components(node) : components[node.tagName]) ?? node.tagName;
+}
+/**
+* Internal recursive converter. `path` is a dot-separated string identifying
+* the node's position in the tree (e.g. `"0"`, `"0.1"`, `"0.1.2"`).
+*/
+function toVNodes(node, components, transition, path) {
+	if (Array.isArray(node)) return node.flatMap((n, i) => toVNodes(n, components, transition, `${path}.${i}`));
+	switch (node.type) {
+		case "root": return node.children.flatMap((child, i) => toVNodes(child, components, transition, String(i)));
+		case "element": {
+			const { properties = {}, children } = node;
+			const tag = resolveTag(node, components);
+			const props = convertProps(properties);
+			const childVNodes = children.flatMap((child, i) => toVNodes(child, components, transition, `${path}.${i}`));
+			const el = typeof tag === "string" ? h(tag, props, childVNodes) : h(tag, {
+				...props,
+				node
+			}, { default: () => childVNodes });
+			if (transition !== void 0) return [h(Transition, {
+				key: path,
+				...transition
+			}, { default: () => el })];
+			return [el];
+		}
+		case "text": return [node.value];
+		case "comment": return [createCommentVNode(node.value)];
+		default: return [];
+	}
+}
+/**
+* Recursively convert a HAST node (or array of nodes) into Vue VNodeArrayChildren.
+*
+* @param node       - Root HAST node or array of nodes to convert.
+* @param components - Custom component map or resolver function.
+* @param transition - Optional `<Transition>` config applied to every element node.
+*/
+function hastToVNodes(node, components, transition) {
+	return toVNodes(node, components, transition, "");
+}
+
+//#endregion
+//#region src/Markdown.ts
+const Markdown = defineComponent({
+	name: "Markdown",
+	props: {
+		markdown: {
+			type: String,
+			required: true
+		},
+		options: {
+			type: Object,
+			default: void 0
+		},
+		components: {
+			type: [Object, Function],
+			default: () => ({})
+		},
+		transition: {
+			type: [Boolean, Object],
+			default: false
+		}
+	},
+	setup(props) {
+		const hast = computed(() => parse(props.markdown, props.options));
+		return () => {
+			const raw = props.components ?? {};
+			const components = typeof raw === "function" ? raw : Object.fromEntries(Object.entries(raw).map(([k, v]) => [k, typeof v === "string" || v == null ? v : markRaw(v)]));
+			const transitionConfig = props.transition === true ? {} : props.transition || void 0;
+			return h(Fragment, hastToVNodes(hast.value, components, transitionConfig));
+		};
+	}
+});
+
+//#endregion
+export { Markdown, hastToVNodes };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/hast-to-vnodes.ts","../src/Markdown.ts"],"sourcesContent":["import { h, createCommentVNode, Transition } from 'vue';\r\nimport type { Element, Nodes } from 'hast';\r\nimport type { VNodeArrayChildren } from 'vue';\r\nimport type { ComponentResolution, Components, TransitionConfig } from './types.ts';\r\n\r\n/**\r\n * Convert HAST node properties to Vue-compatible props.\r\n * - `className` array → `class` string\r\n * - `htmlFor` → `for`\r\n * - All other properties pass through as-is\r\n */\r\nfunction convertProps(properties: Record<string, unknown>): Record<string, unknown> {\r\n  const props: Record<string, unknown> = {};\r\n\r\n  for (const [key, value] of Object.entries(properties)) {\r\n    if (key === 'className' && Array.isArray(value)) {\r\n      props['class'] = value.join(' ');\r\n    } else if (key === 'htmlFor') {\r\n      props['for'] = value;\r\n    } else {\r\n      props[key] = value;\r\n    }\r\n  }\r\n\r\n  return props;\r\n}\r\n\r\n/** Resolve the tag/component for an element node from the Components option. */\r\nfunction resolveTag(node: Element, components: Components): NonNullable<ComponentResolution> {\r\n  const resolved = typeof components === 'function'\r\n    ? components(node)\r\n    : components[node.tagName];\r\n  return resolved ?? node.tagName;\r\n}\r\n\r\n/**\r\n * Internal recursive converter. `path` is a dot-separated string identifying\r\n * the node's position in the tree (e.g. `\"0\"`, `\"0.1\"`, `\"0.1.2\"`).\r\n */\r\nfunction toVNodes(\r\n  node: Nodes | Nodes[],\r\n  components: Components,\r\n  transition: TransitionConfig | undefined,\r\n  path: string,\r\n): VNodeArrayChildren {\r\n  if (Array.isArray(node)) {\r\n    return node.flatMap((n, i) => toVNodes(n, components, transition, `${path}.${i}`));\r\n  }\r\n\r\n  switch (node.type) {\r\n    case 'root':\r\n      return node.children.flatMap((child, i) =>\r\n        toVNodes(child, components, transition, String(i)),\r\n      );\r\n\r\n    case 'element': {\r\n      const { properties = {}, children } = node;\r\n      const tag = resolveTag(node, components);\r\n      const props = convertProps(properties as Record<string, unknown>);\r\n      const childVNodes: VNodeArrayChildren = children.flatMap((child, i) =>\r\n        toVNodes(child, components, transition, `${path}.${i}`),\r\n      );\r\n\r\n      // Build the element VNode\r\n      // Custom Vue components also receive the raw HAST `node` prop so they\r\n      // can access the original element (e.g. to extract text content for\r\n      // syntax highlighting or diagram rendering).\r\n      const el = typeof tag === 'string'\r\n        ? h(tag, props, childVNodes)\r\n        : h(tag, { ...props, node }, { default: () => childVNodes });\r\n\r\n      // Wrap in <Transition> if requested, using the tree path as a stable key\r\n      if (transition !== undefined) {\r\n        return [h(Transition, { key: path, ...transition }, { default: () => el })];\r\n      }\r\n      return [el];\r\n    }\r\n\r\n    case 'text':\r\n      return [node.value];\r\n\r\n    case 'comment':\r\n      return [createCommentVNode(node.value)];\r\n\r\n    default:\r\n      return [];\r\n  }\r\n}\r\n\r\n/**\r\n * Recursively convert a HAST node (or array of nodes) into Vue VNodeArrayChildren.\r\n *\r\n * @param node       - Root HAST node or array of nodes to convert.\r\n * @param components - Custom component map or resolver function.\r\n * @param transition - Optional `<Transition>` config applied to every element node.\r\n */\r\nexport function hastToVNodes(\r\n  node: Nodes | Nodes[],\r\n  components: Components,\r\n  transition?: TransitionConfig,\r\n): VNodeArrayChildren {\r\n  return toVNodes(node, components, transition, '');\r\n}\r\n","import { computed, defineComponent, Fragment, h, markRaw } from 'vue';\r\nimport { parse } from '@mark-sorcery/markdown-parser';\r\nimport { hastToVNodes } from './hast-to-vnodes.ts';\r\nimport type { Components, MarkdownProps, ParseOptions, TransitionConfig } from './types.ts';\r\n\r\nexport const Markdown = defineComponent({\r\n  name: 'Markdown',\r\n\r\n  props: {\r\n    markdown: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    options: {\r\n      type: Object as () => ParseOptions,\r\n      default: undefined,\r\n    },\r\n    components: {\r\n      type: [Object, Function] as unknown as () => Components,\r\n      default: () => ({}),\r\n    },\r\n    transition: {\r\n      type: [Boolean, Object] as unknown as () => boolean | TransitionConfig,\r\n      default: false,\r\n    },\r\n  } satisfies {\r\n    [K in keyof MarkdownProps]-?: unknown;\r\n  },\r\n\r\n  setup(props) {\r\n    const hast = computed(() => parse(props.markdown, props.options));\r\n\r\n    return () => {\r\n      const raw = props.components ?? {};\r\n      // Function resolvers pass through; record values are wrapped in markRaw\r\n      // so Vue doesn't make component objects reactive (perf warning prevention)\r\n      const components: Components = typeof raw === 'function'\r\n        ? raw\r\n        : Object.fromEntries(\r\n            Object.entries(raw).map(([k, v]) =>\r\n              [k, typeof v === 'string' || v == null ? v : markRaw(v)],\r\n            ),\r\n          );\r\n\r\n      const transitionConfig: TransitionConfig | undefined =\r\n        props.transition === true\r\n          ? {}\r\n          : props.transition || undefined;\r\n\r\n      const vnodes = hastToVNodes(hast.value, components, transitionConfig);\r\n      return h(Fragment, vnodes);\r\n    };\r\n  },\r\n});\r\n"],"mappings":";;;;;;;;;;AAWA,SAAS,aAAa,YAA8D;CAClF,MAAM,QAAiC,EAAE;AAEzC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,WAAW,CACnD,KAAI,QAAQ,eAAe,MAAM,QAAQ,MAAM,CAC7C,OAAM,WAAW,MAAM,KAAK,IAAI;UACvB,QAAQ,UACjB,OAAM,SAAS;KAEf,OAAM,OAAO;AAIjB,QAAO;;;AAIT,SAAS,WAAW,MAAe,YAA0D;AAI3F,SAHiB,OAAO,eAAe,aACnC,WAAW,KAAK,GAChB,WAAW,KAAK,aACD,KAAK;;;;;;AAO1B,SAAS,SACP,MACA,YACA,YACA,MACoB;AACpB,KAAI,MAAM,QAAQ,KAAK,CACrB,QAAO,KAAK,SAAS,GAAG,MAAM,SAAS,GAAG,YAAY,YAAY,GAAG,KAAK,GAAG,IAAI,CAAC;AAGpF,SAAQ,KAAK,MAAb;EACE,KAAK,OACH,QAAO,KAAK,SAAS,SAAS,OAAO,MACnC,SAAS,OAAO,YAAY,YAAY,OAAO,EAAE,CAAC,CACnD;EAEH,KAAK,WAAW;GACd,MAAM,EAAE,aAAa,EAAE,EAAE,aAAa;GACtC,MAAM,MAAM,WAAW,MAAM,WAAW;GACxC,MAAM,QAAQ,aAAa,WAAsC;GACjE,MAAM,cAAkC,SAAS,SAAS,OAAO,MAC/D,SAAS,OAAO,YAAY,YAAY,GAAG,KAAK,GAAG,IAAI,CACxD;GAMD,MAAM,KAAK,OAAO,QAAQ,WACtB,EAAE,KAAK,OAAO,YAAY,GAC1B,EAAE,KAAK;IAAE,GAAG;IAAO;IAAM,EAAE,EAAE,eAAe,aAAa,CAAC;AAG9D,OAAI,eAAe,OACjB,QAAO,CAAC,EAAE,YAAY;IAAE,KAAK;IAAM,GAAG;IAAY,EAAE,EAAE,eAAe,IAAI,CAAC,CAAC;AAE7E,UAAO,CAAC,GAAG;;EAGb,KAAK,OACH,QAAO,CAAC,KAAK,MAAM;EAErB,KAAK,UACH,QAAO,CAAC,mBAAmB,KAAK,MAAM,CAAC;EAEzC,QACE,QAAO,EAAE;;;;;;;;;;AAWf,SAAgB,aACd,MACA,YACA,YACoB;AACpB,QAAO,SAAS,MAAM,YAAY,YAAY,GAAG;;;;;AChGnD,MAAa,WAAW,gBAAgB;CACtC,MAAM;CAEN,OAAO;EACL,UAAU;GACR,MAAM;GACN,UAAU;GACX;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,YAAY;GACV,MAAM,CAAC,QAAQ,SAAS;GACxB,gBAAgB,EAAE;GACnB;EACD,YAAY;GACV,MAAM,CAAC,SAAS,OAAO;GACvB,SAAS;GACV;EACF;CAID,MAAM,OAAO;EACX,MAAM,OAAO,eAAe,MAAM,MAAM,UAAU,MAAM,QAAQ,CAAC;AAEjE,eAAa;GACX,MAAM,MAAM,MAAM,cAAc,EAAE;GAGlC,MAAM,aAAyB,OAAO,QAAQ,aAC1C,MACA,OAAO,YACL,OAAO,QAAQ,IAAI,CAAC,KAAK,CAAC,GAAG,OAC3B,CAAC,GAAG,OAAO,MAAM,YAAY,KAAK,OAAO,IAAI,QAAQ,EAAE,CAAC,CACzD,CACF;GAEL,MAAM,mBACJ,MAAM,eAAe,OACjB,EAAE,GACF,MAAM,cAAc;AAG1B,UAAO,EAAE,UADM,aAAa,KAAK,OAAO,YAAY,iBAAiB,CAC3C;;;CAG/B,CAAC"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@mark-sorcery/vue",
+  "version": "0.1.0",
+  "description": "Vue renderer for Mark Sorcery markdown.",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "prepublishOnly": "bun run build && bun run test",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@mark-sorcery/markdown-parser": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/hast": "^3.0.4",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^17.4.4",
+    "tsdown": "^0.21.0",
+    "vue": "^3.5.25"
+  },
+  "peerDependencies": {
+    "typescript": "^5",
+    "vue": "^3.5"
+  }
+}