@mark-sorcery/vue 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from "vue";
-import { Component, VNodeArrayChildren } from "vue";
+import { BaseTransitionProps, Component, ComputedRef } from "vue";
 import * as _mark_sorcery_markdown_parser0 from "@mark-sorcery/markdown-parser";
 import { CorePluginOptions, MarkdownProcessor, ParseMemory, ParseOptions, ParserPlugin, createCorePlugin } from "@mark-sorcery/markdown-parser";
 
@@ -318,27 +318,36 @@ interface Text extends Literal {
 interface TextData extends Data {}
 //#endregion
 //#region src/types.d.ts
-type MarkdownOptions = Omit<ParseOptions, 'plugins'>;
-/** 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 }
+ * 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.
  *
- * @example — function form
- * const components: Components = (node) => {
- *   if (node.tagName === 'h1') return MyHeading
- *   if (node.properties?.className?.includes('warning')) return MyWarning
- * }
+ * @see https://vuejs.org/api/built-in-components.html#transition
  */
-type Components = Partial<Record<string, ComponentResolution>> | ((node: Element) => ComponentResolution);
+interface TransitionConfig {
+  name?: string;
+  css?: 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'];
+}
+type MarkdownOptions = Omit<ParseOptions, 'plugins'>;
 /**
  * Props automatically injected into every custom Vue component rendered by
  * `<Markdown>`. Use this to type your custom component's `node` prop.
@@ -361,8 +370,43 @@ interface MarkdownProps {
   /** Enables parse memory so growing markdown streams preserve confirmed blocks. */
   stream?: boolean;
   /** Custom Vue components or tags to use in place of default HTML elements. */
-  components?: Components;
+  components?: Record<string, Component>;
+  /**
+   * 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;
+}
+interface MarkdownNodeProps {
+  /** The HAST element to render. */
+  element: Element;
+  /** A unique key for the component instance. */
+  componentKey: string;
 }
+type ItemProps = {
+  nodeIdx?: number;
+  deep?: number;
+  nodeKey?: string;
+  parentNode?: Nodes;
+};
+type NodeListProps = ItemProps & {
+  nodes: Nodes[];
+  components: NonNullable<MarkdownProps['components']>;
+  transition: MarkdownProps['transition'];
+};
+type ElementProps = ItemProps & {
+  element: Element;
+};
+type TextProps = ItemProps & {
+  element: Text;
+};
 //#endregion
 //#region src/Markdown.d.ts
 declare const Markdown: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -371,7 +415,7 @@ declare const Markdown: vue.DefineComponent<vue.ExtractPropTypes<{
     required: boolean;
   };
   options: {
-    type: () => MarkdownOptions;
+    type: () => MarkdownProps["options"];
     default: undefined;
   };
   plugins: {
@@ -383,9 +427,13 @@ declare const Markdown: vue.DefineComponent<vue.ExtractPropTypes<{
     default: boolean;
   };
   components: {
-    type: () => Components;
+    type: () => MarkdownProps["components"];
     default: () => {};
   };
+  transition: {
+    type: () => MarkdownProps["transition"];
+    default: boolean;
+  };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -394,7 +442,7 @@ declare const Markdown: vue.DefineComponent<vue.ExtractPropTypes<{
     required: boolean;
   };
   options: {
-    type: () => MarkdownOptions;
+    type: () => MarkdownProps["options"];
     default: undefined;
   };
   plugins: {
@@ -406,25 +454,61 @@ declare const Markdown: vue.DefineComponent<vue.ExtractPropTypes<{
     default: boolean;
   };
   components: {
-    type: () => Components;
+    type: () => MarkdownProps["components"];
     default: () => {};
   };
+  transition: {
+    type: () => MarkdownProps["transition"];
+    default: boolean;
+  };
 }>> & Readonly<{}>, {
-  options: MarkdownOptions;
+  options: MarkdownOptions | undefined;
   plugins: _mark_sorcery_markdown_parser0.ParserPlugin[] | undefined;
   stream: boolean;
-  components: Components;
+  components: Record<string, vue.Component> | undefined;
+  transition: boolean | TransitionConfig | undefined;
 }, {}, {}, {}, 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): VNodeArrayChildren;
+//#region src/components/NodeList.vue.d.ts
+declare const __VLS_export: vue.DefineComponent<NodeListProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<NodeListProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+//#region src/components/index.d.ts
+declare const DEFAULT_COMPONENTS: {
+  p: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  h1: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  h2: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  h3: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  h4: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  h5: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  h6: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  strong: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  em: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  del: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  blockquote: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  ul: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  ol: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  li: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  code: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  a: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  input: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  pre: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  table: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  thead: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  tbody: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  tr: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  th: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  td: vue.DefineComponent<ElementProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  text: vue.DefineComponent<TextProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<TextProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+  default: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+};
+//#endregion
+//#region src/composables/markdown.d.ts
+type MarkdownContext = {
+  components: ComputedRef<NonNullable<MarkdownProps['components']>>;
+  transition: ComputedRef<MarkdownProps['transition']>;
+};
+declare const useMarkdown: () => MarkdownContext;
 //#endregion
-export { type Components, type CorePluginOptions, Markdown, type MarkdownOptions, type MarkdownProcessor, type MarkdownProps, type NodeProps, type ParseMemory, type ParseOptions, type ParserPlugin, createCorePlugin, hastToVNodes };
+export { type CorePluginOptions, DEFAULT_COMPONENTS, type ElementProps, type ItemProps, Markdown, type MarkdownNodeProps, type MarkdownOptions, type MarkdownProcessor, type MarkdownProps, _default as NodeList, type NodeListProps, type NodeProps, type ParseMemory, type ParseOptions, type ParserPlugin, createCorePlugin, useMarkdown };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,69 +1,16 @@
-import { Fragment, computed, createCommentVNode, defineComponent, h, markRaw, shallowRef, watchEffect } from "vue";
+import { i as DEFAULT_COMPONENTS, n as useMarkdown, r as useProvideMarkdown, t as _sfc_main } from "./NodeList-BRtZi6mG.js";
+import { computed, defineComponent, h, shallowRef, watchEffect } from "vue";
 import { createCorePlugin, createMemory, createProcessor, parse } from "@mark-sorcery/markdown-parser";
+import { remove } from "unist-util-remove";
 
-//#region src/hast-to-vnodes.ts
-function createNodeKey(node, path) {
-	const start = node.position?.start?.offset;
-	const end = node.position?.end?.offset;
-	if (typeof start === "number" && typeof end === "number") return `${node.tagName}:${start}-${end}`;
-	if (typeof start === "number") return `${node.tagName}:${start}`;
-	return path;
-}
-/**
-* 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, path) {
-	if (Array.isArray(node)) return node.flatMap((n, i) => toVNodes(n, components, `${path}.${i}`));
-	switch (node.type) {
-		case "root": return node.children.flatMap((child, i) => toVNodes(child, components, String(i)));
-		case "element": {
-			const { properties = {}, children } = node;
-			const tag = resolveTag(node, components);
-			const nodeKey = createNodeKey(node, path);
-			const props = convertProps(properties);
-			const childVNodes = children.flatMap((child, i) => toVNodes(child, components, `${path}.${i}`));
-			return [typeof tag === "string" ? h(tag, {
-				...props,
-				key: nodeKey
-			}, childVNodes) : h(tag, {
-				...props,
-				key: nodeKey,
-				node
-			}, { default: () => childVNodes })];
-		}
-		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) {
-	return toVNodes(node, components, "");
-}
+//#region src/plugins/remove-line-jump-nodes.ts
+const rehypeRemoveLineJumpNodes = () => (tree) => {
+	remove(tree, {
+		type: "text",
+		value: "\n"
+	});
+};
+const removeLineJumpNodesPlugin = () => ({ rehype: [[rehypeRemoveLineJumpNodes]] });
 
 //#endregion
 //#region src/Markdown.ts
@@ -87,8 +34,12 @@ const Markdown = defineComponent({
 			default: false
 		},
 		components: {
-			type: [Object, Function],
+			type: Object,
 			default: () => ({})
+		},
+		transition: {
+			type: [Boolean, Object],
+			default: false
 		}
 	},
 	setup(props) {
@@ -98,7 +49,7 @@ const Markdown = defineComponent({
 			const propPlugins = props.plugins ?? [];
 			return createProcessor({
 				...options,
-				plugins: propPlugins
+				plugins: [...propPlugins, removeLineJumpNodesPlugin()]
 			});
 		});
 		const hast = shallowRef(parse(processor.value, getMarkdown()));
@@ -121,14 +72,20 @@ const Markdown = defineComponent({
 			}
 			hast.value = parse(currentProcessor, markdown);
 		});
+		const { components: providedComponents, transition: providedTransition } = useProvideMarkdown(computed(() => props.components), computed(() => props.transition));
 		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)]));
-			return h(Fragment, hastToVNodes(hast.value, components));
+			return h(_sfc_main, {
+				nodes: hast.value.children,
+				nodeKey: "root",
+				deep: 0,
+				parentNode: hast.value,
+				components: providedComponents.value,
+				transition: providedTransition.value
+			});
 		};
 	}
 });
 
 //#endregion
-export { Markdown, createCorePlugin, hastToVNodes };
+export { DEFAULT_COMPONENTS, Markdown, _sfc_main as NodeList, createCorePlugin, useMarkdown };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/hast-to-vnodes.ts","../src/Markdown.ts"],"sourcesContent":["import { h, createCommentVNode } from 'vue';\nimport type { Element, Nodes } from 'hast';\nimport type { VNodeArrayChildren } from 'vue';\nimport type { ComponentResolution, Components } from './types.ts';\n\nfunction createNodeKey(node: Element, path: string): string {\n  const start = node.position?.start?.offset;\n  const end = node.position?.end?.offset;\n\n  if (typeof start === 'number' && typeof end === 'number') {\n    return `${node.tagName}:${start}-${end}`;\n  }\n\n  if (typeof start === 'number') {\n    return `${node.tagName}:${start}`;\n  }\n\n  return path;\n}\n\n/**\n * Convert HAST node properties to Vue-compatible props.\n * - `className` array → `class` string\n * - `htmlFor` → `for`\n * - All other properties pass through as-is\n */\nfunction convertProps(properties: Record<string, unknown>): Record<string, unknown> {\n  const props: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(properties)) {\n    if (key === 'className' && Array.isArray(value)) {\n      props['class'] = value.join(' ');\n    } else if (key === 'htmlFor') {\n      props['for'] = value;\n    } else {\n      props[key] = value;\n    }\n  }\n\n  return props;\n}\n\n/** Resolve the tag/component for an element node from the Components option. */\nfunction resolveTag(node: Element, components: Components): NonNullable<ComponentResolution> {\n  const resolved = typeof components === 'function'\n    ? components(node)\n    : components[node.tagName];\n  return resolved ?? node.tagName;\n}\n\n/**\n * Internal recursive converter. `path` is a dot-separated string identifying\n * the node's position in the tree (e.g. `\"0\"`, `\"0.1\"`, `\"0.1.2\"`).\n */\nfunction toVNodes(\n  node: Nodes | Nodes[],\n  components: Components,\n  path: string,\n): VNodeArrayChildren {\n  if (Array.isArray(node)) {\n    return node.flatMap((n, i) => toVNodes(n, components, `${path}.${i}`));\n  }\n\n  switch (node.type) {\n    case 'root':\n      return node.children.flatMap((child, i) =>\n        toVNodes(child, components, String(i)),\n      );\n\n    case 'element': {\n      const { properties = {}, children } = node;\n      const tag = resolveTag(node, components);\n      const nodeKey = createNodeKey(node, path);\n      const props = convertProps(properties as Record<string, unknown>);\n      const childVNodes: VNodeArrayChildren = children.flatMap((child, i) =>\n        toVNodes(child, components, `${path}.${i}`),\n      );\n\n      // Build the element VNode\n      // Custom Vue components also receive the raw HAST `node` prop so they\n      // can access the original element (e.g. to extract text content for\n      // syntax highlighting or diagram rendering).\n      const el = typeof tag === 'string'\n        ? h(tag, { ...props, key: nodeKey }, childVNodes)\n        : h(tag, { ...props, key: nodeKey, node }, { default: () => childVNodes });\n\n      return [el];\n    }\n\n    case 'text':\n      return [node.value];\n\n    case 'comment':\n      return [createCommentVNode(node.value)];\n\n    default:\n      return [];\n  }\n}\n\n/**\n * Recursively convert a HAST node (or array of nodes) into Vue VNodeArrayChildren.\n *\n * @param node       - Root HAST node or array of nodes to convert.\n * @param components - Custom component map or resolver function.\n * @param transition - Optional `<Transition>` config applied to every element node.\n */\nexport function hastToVNodes(\n  node: Nodes | Nodes[],\n  components: Components,\n): VNodeArrayChildren {\n  return toVNodes(node, components, '');\n}\n","import { computed, defineComponent, Fragment, h, markRaw, shallowRef, watchEffect } from 'vue';\nimport { createMemory, createProcessor, parse } from '@mark-sorcery/markdown-parser';\nimport { hastToVNodes } from './hast-to-vnodes.ts';\nimport type {\n  Components,\n  MarkdownProcessor,\n  MarkdownOptions,\n  MarkdownProps,\n  ParseMemory,\n} from './types.ts';\n\nexport const Markdown = defineComponent({\n  name: 'Markdown',\n\n  props: {\n    markdown: {\n      type: String,\n      required: true,\n    },\n    options: {\n      type: Object as () => MarkdownOptions,\n      default: undefined,\n    },\n    plugins: {\n      type: Array as () => MarkdownProps['plugins'],\n      default: undefined,\n    },\n    stream: {\n      type: Boolean,\n      default: false,\n    },\n    components: {\n      type: [Object, Function] as unknown as () => Components,\n      default: () => ({}),\n    },\n  } satisfies {\n    [K in keyof MarkdownProps]-?: unknown;\n  },\n\n  setup(props) {\n    const getMarkdown = () => props.markdown ?? '';\n\n    const processor = computed<MarkdownProcessor>(() => {\n      const options = props.options;\n      const propPlugins = props.plugins ?? [];\n\n      return createProcessor({\n        ...options,\n        plugins: propPlugins,\n      });\n    });\n\n    const hast = shallowRef(parse(processor.value, getMarkdown()));\n    let streamMemory: ParseMemory | undefined;\n    let activeProcessor: MarkdownProcessor | undefined;\n\n    watchEffect(() => {\n      const currentProcessor = processor.value;\n      const markdown = getMarkdown();\n\n      if (activeProcessor && activeProcessor !== currentProcessor) {\n        streamMemory = props.stream ? createMemory() : undefined;\n      }\n\n      activeProcessor = currentProcessor;\n\n      if (props.stream) {\n        streamMemory ??= createMemory();\n        hast.value = parse(currentProcessor, markdown, streamMemory);\n        return;\n      }\n\n      if (streamMemory) {\n        streamMemory.flush = true;\n        streamMemory = undefined;\n        return;\n      }\n\n      hast.value = parse(currentProcessor, markdown);\n    });\n\n    return () => {\n      const raw = props.components ?? {};\n      // Function resolvers pass through; record values are wrapped in markRaw\n      // so Vue doesn't make component objects reactive (perf warning prevention)\n      const components: Components = typeof raw === 'function'\n        ? raw\n        : Object.fromEntries(\n          Object.entries(raw).map(([k, v]) =>\n            [k, typeof v === 'string' || v == null ? v : markRaw(v)],\n          ),\n        );\n      const vnodes = hastToVNodes(hast.value, components);\n      return h(Fragment, vnodes);\n    };\n  },\n});\n"],"mappings":";;;;AAKA,SAAS,cAAc,MAAe,MAAsB;CAC1D,MAAM,QAAQ,KAAK,UAAU,OAAO;CACpC,MAAM,MAAM,KAAK,UAAU,KAAK;AAEhC,KAAI,OAAO,UAAU,YAAY,OAAO,QAAQ,SAC9C,QAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,GAAG;AAGrC,KAAI,OAAO,UAAU,SACnB,QAAO,GAAG,KAAK,QAAQ,GAAG;AAG5B,QAAO;;;;;;;;AAST,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,MACoB;AACpB,KAAI,MAAM,QAAQ,KAAK,CACrB,QAAO,KAAK,SAAS,GAAG,MAAM,SAAS,GAAG,YAAY,GAAG,KAAK,GAAG,IAAI,CAAC;AAGxE,SAAQ,KAAK,MAAb;EACE,KAAK,OACH,QAAO,KAAK,SAAS,SAAS,OAAO,MACnC,SAAS,OAAO,YAAY,OAAO,EAAE,CAAC,CACvC;EAEH,KAAK,WAAW;GACd,MAAM,EAAE,aAAa,EAAE,EAAE,aAAa;GACtC,MAAM,MAAM,WAAW,MAAM,WAAW;GACxC,MAAM,UAAU,cAAc,MAAM,KAAK;GACzC,MAAM,QAAQ,aAAa,WAAsC;GACjE,MAAM,cAAkC,SAAS,SAAS,OAAO,MAC/D,SAAS,OAAO,YAAY,GAAG,KAAK,GAAG,IAAI,CAC5C;AAUD,UAAO,CAJI,OAAO,QAAQ,WACtB,EAAE,KAAK;IAAE,GAAG;IAAO,KAAK;IAAS,EAAE,YAAY,GAC/C,EAAE,KAAK;IAAE,GAAG;IAAO,KAAK;IAAS;IAAM,EAAE,EAAE,eAAe,aAAa,CAAC,CAEjE;;EAGb,KAAK,OACH,QAAO,CAAC,KAAK,MAAM;EAErB,KAAK,UACH,QAAO,CAAC,mBAAmB,KAAK,MAAM,CAAC;EAEzC,QACE,QAAO,EAAE;;;;;;;;;;AAWf,SAAgB,aACd,MACA,YACoB;AACpB,QAAO,SAAS,MAAM,YAAY,GAAG;;;;;ACpGvC,MAAa,WAAW,gBAAgB;CACtC,MAAM;CAEN,OAAO;EACL,UAAU;GACR,MAAM;GACN,UAAU;GACX;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,YAAY;GACV,MAAM,CAAC,QAAQ,SAAS;GACxB,gBAAgB,EAAE;GACnB;EACF;CAID,MAAM,OAAO;EACX,MAAM,oBAAoB,MAAM,YAAY;EAE5C,MAAM,YAAY,eAAkC;GAClD,MAAM,UAAU,MAAM;GACtB,MAAM,cAAc,MAAM,WAAW,EAAE;AAEvC,UAAO,gBAAgB;IACrB,GAAG;IACH,SAAS;IACV,CAAC;IACF;EAEF,MAAM,OAAO,WAAW,MAAM,UAAU,OAAO,aAAa,CAAC,CAAC;EAC9D,IAAI;EACJ,IAAI;AAEJ,oBAAkB;GAChB,MAAM,mBAAmB,UAAU;GACnC,MAAM,WAAW,aAAa;AAE9B,OAAI,mBAAmB,oBAAoB,iBACzC,gBAAe,MAAM,SAAS,cAAc,GAAG;AAGjD,qBAAkB;AAElB,OAAI,MAAM,QAAQ;AAChB,qBAAiB,cAAc;AAC/B,SAAK,QAAQ,MAAM,kBAAkB,UAAU,aAAa;AAC5D;;AAGF,OAAI,cAAc;AAChB,iBAAa,QAAQ;AACrB,mBAAe;AACf;;AAGF,QAAK,QAAQ,MAAM,kBAAkB,SAAS;IAC9C;AAEF,eAAa;GACX,MAAM,MAAM,MAAM,cAAc,EAAE;GAGlC,MAAM,aAAyB,OAAO,QAAQ,aAC1C,MACA,OAAO,YACP,OAAO,QAAQ,IAAI,CAAC,KAAK,CAAC,GAAG,OAC3B,CAAC,GAAG,OAAO,MAAM,YAAY,KAAK,OAAO,IAAI,QAAQ,EAAE,CAAC,CACzD,CACF;AAEH,UAAO,EAAE,UADM,aAAa,KAAK,OAAO,WAAW,CACzB;;;CAG/B,CAAC"}
+{"version":3,"file":"index.js","names":["NodeList"],"sources":["../src/plugins/remove-line-jump-nodes.ts","../src/Markdown.ts"],"sourcesContent":["import type { ParserPlugin } from \"@mark-sorcery/markdown-parser\";\r\nimport type { Root } from \"hast\";\r\nimport type { Plugin } from \"unified\";\r\nimport { remove } from \"unist-util-remove\";\r\n\r\nconst rehypeRemoveLineJumpNodes: Plugin<[string[]], Root> =\r\n    () => (tree: Root) => {\r\n        remove(tree, {\r\n            type: \"text\",\r\n            value: \"\\n\",\r\n        })\r\n    };\r\n\r\nexport const removeLineJumpNodesPlugin = (): ParserPlugin => ({\r\n    rehype: [[rehypeRemoveLineJumpNodes]],\r\n});","import { computed, defineComponent, h, shallowRef, watchEffect } from 'vue';\nimport { createMemory, createProcessor, parse } from '@mark-sorcery/markdown-parser';\nimport type {\n  MarkdownProcessor,\n  MarkdownProps,\n  ParseMemory,\n} from './types.ts';\nimport NodeList from './components/NodeList.vue';\nimport { useProvideMarkdown } from './composables/markdown.ts';\nimport { removeLineJumpNodesPlugin } from './plugins/remove-line-jump-nodes.ts';\n\nexport const Markdown = defineComponent({\n  name: 'Markdown',\n\n  props: {\n    markdown: {\n      type: String,\n      required: true,\n    },\n    options: {\n      type: Object as () => MarkdownProps['options'],\n      default: undefined,\n    },\n    plugins: {\n      type: Array as () => MarkdownProps['plugins'],\n      default: undefined,\n    },\n    stream: {\n      type: Boolean,\n      default: false,\n    },\n    components: {\n      type: Object as unknown as () => MarkdownProps['components'],\n      default: () => ({}),\n    },\n    transition: {\n      type: [Boolean, Object] as unknown as () => MarkdownProps['transition'],\n      default: false,\n    },\n  } satisfies {\n    [K in keyof MarkdownProps]-?: unknown;\n  },\n\n  setup(props) {\n    const getMarkdown = () => props.markdown ?? '';\n\n    const processor = computed<MarkdownProcessor>(() => {\n      const options = props.options;\n      const propPlugins = props.plugins ?? [];\n\n      return createProcessor({\n        ...options,\n        plugins: [...propPlugins, removeLineJumpNodesPlugin()],\n      });\n    });\n\n    const hast = shallowRef(parse(processor.value, getMarkdown()));\n    let streamMemory: ParseMemory | undefined;\n    let activeProcessor: MarkdownProcessor | undefined;\n\n    watchEffect(() => {\n      const currentProcessor = processor.value;\n      const markdown = getMarkdown();\n\n      if (activeProcessor && activeProcessor !== currentProcessor) {\n        streamMemory = props.stream ? createMemory() : undefined;\n      }\n\n      activeProcessor = currentProcessor;\n\n      if (props.stream) {\n        streamMemory ??= createMemory();\n        hast.value = parse(currentProcessor, markdown, streamMemory);\n        return;\n      }\n\n      if (streamMemory) {\n        streamMemory.flush = true;\n        streamMemory = undefined;\n        return;\n      }\n\n      hast.value = parse(currentProcessor, markdown);\n    });\n\n    const { components: providedComponents, transition: providedTransition } = useProvideMarkdown(computed(() => props.components), computed(() => props.transition));\n\n    return () => {\n      return h(NodeList, {\n        nodes: hast.value.children,\n        nodeKey: 'root',\n        deep: 0,\n        parentNode: hast.value,\n        components: providedComponents.value,\n        transition: providedTransition.value,\n      });\n    };\n  },\n});\n"],"mappings":";;;;;;AAKA,MAAM,mCACK,SAAe;AAClB,QAAO,MAAM;EACT,MAAM;EACN,OAAO;EACV,CAAC;;AAGV,MAAa,mCAAiD,EAC1D,QAAQ,CAAC,CAAC,0BAA0B,CAAC,EACxC;;;;ACJD,MAAa,WAAW,gBAAgB;CACtC,MAAM;CAEN,OAAO;EACL,UAAU;GACR,MAAM;GACN,UAAU;GACX;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,YAAY;GACV,MAAM;GACN,gBAAgB,EAAE;GACnB;EACD,YAAY;GACV,MAAM,CAAC,SAAS,OAAO;GACvB,SAAS;GACV;EACF;CAID,MAAM,OAAO;EACX,MAAM,oBAAoB,MAAM,YAAY;EAE5C,MAAM,YAAY,eAAkC;GAClD,MAAM,UAAU,MAAM;GACtB,MAAM,cAAc,MAAM,WAAW,EAAE;AAEvC,UAAO,gBAAgB;IACrB,GAAG;IACH,SAAS,CAAC,GAAG,aAAa,2BAA2B,CAAC;IACvD,CAAC;IACF;EAEF,MAAM,OAAO,WAAW,MAAM,UAAU,OAAO,aAAa,CAAC,CAAC;EAC9D,IAAI;EACJ,IAAI;AAEJ,oBAAkB;GAChB,MAAM,mBAAmB,UAAU;GACnC,MAAM,WAAW,aAAa;AAE9B,OAAI,mBAAmB,oBAAoB,iBACzC,gBAAe,MAAM,SAAS,cAAc,GAAG;AAGjD,qBAAkB;AAElB,OAAI,MAAM,QAAQ;AAChB,qBAAiB,cAAc;AAC/B,SAAK,QAAQ,MAAM,kBAAkB,UAAU,aAAa;AAC5D;;AAGF,OAAI,cAAc;AAChB,iBAAa,QAAQ;AACrB,mBAAe;AACf;;AAGF,QAAK,QAAQ,MAAM,kBAAkB,SAAS;IAC9C;EAEF,MAAM,EAAE,YAAY,oBAAoB,YAAY,uBAAuB,mBAAmB,eAAe,MAAM,WAAW,EAAE,eAAe,MAAM,WAAW,CAAC;AAEjK,eAAa;AACX,UAAO,EAAEA,WAAU;IACjB,OAAO,KAAK,MAAM;IAClB,SAAS;IACT,MAAM;IACN,YAAY,KAAK;IACjB,YAAY,mBAAmB;IAC/B,YAAY,mBAAmB;IAChC,CAAC;;;CAGP,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mark-sorcery/vue",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Vue renderer for Mark Sorcery markdown.",
   "license": "MIT",
   "files": [
@@ -27,14 +27,18 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@mark-sorcery/markdown-parser": "^0.2.0"
+    "@mark-sorcery/markdown-parser": "^0.4.2",
+    "unified": "^11.0.5",
+    "unist-util-remove": "^4.0.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"
+    "unplugin-vue": "^7.1.1",
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.2.5"
   },
   "peerDependencies": {
     "typescript": "^5",