@mark-sorcery/vue 0.1.0 → 0.3.0

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, 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"}
+{"version":3,"file":"index.js","names":["NodeList"],"sources":["../src/Markdown.ts"],"sourcesContent":["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';\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,\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":";;;;;AAUA,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;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;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.1.0",
+  "version": "0.3.0",
   "description": "Vue renderer for Mark Sorcery markdown.",
   "license": "MIT",
   "files": [
@@ -27,14 +27,16 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@mark-sorcery/markdown-parser": "^0.1.0"
+    "@mark-sorcery/markdown-parser": "^0.3.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",