@markdown-next/vue 0.0.2-alpha → 1.0.0

package/dist/components/MarkdownRenderer.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { ParserOptions } from '@markdown-next/parser';
-import type { MarkdownComponent, MarkdownComponents } from '../types';
+import type { LoadingSlot, MarkdownComponent, MarkdownComponents } from '../types';
 export declare const MarkdownRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     markdown: {
         type: StringConstructor;
@@ -29,6 +29,11 @@ export declare const MarkdownRenderer: import("vue").DefineComponent<import("vue
         type: NumberConstructor;
         default: number;
     };
+    loadingSlot: {
+        type: PropType<LoadingSlot>;
+        required: false;
+        default: undefined;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     markdown: {
         type: StringConstructor;
@@ -57,10 +62,16 @@ export declare const MarkdownRenderer: import("vue").DefineComponent<import("vue
         type: NumberConstructor;
         default: number;
     };
+    loadingSlot: {
+        type: PropType<LoadingSlot>;
+        required: false;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
     parserOptions: ParserOptions;
     codeRenderer: MarkdownComponent;
     components: MarkdownComponents;
     dynamic: boolean;
     debounceMs: number;
+    loadingSlot: LoadingSlot;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/index.mjs

@@ -1,13 +1,13 @@
-import { h, Fragment as W, shallowRef as O, ref as k, watch as v, unref as x, onBeforeUnmount as C, defineComponent as T, useAttrs as F, toRef as E, inject as L, computed as y, onErrorCaptured as j, createVNode as g, mergeProps as H, createTextVNode as b, provide as J } from "vue";
-import { createParser as X, createWorkerPool as G } from "@markdown-next/parser";
-const R = Symbol("MarkdownWorkerPoll"), I = {
+import { h, Fragment as O, shallowRef as j, ref as k, watch as C, unref as x, onBeforeUnmount as R, defineComponent as T, useAttrs as E, toRef as L, inject as H, computed as b, onErrorCaptured as J, createVNode as y, mergeProps as G, createTextVNode as S, provide as D } from "vue";
+import { createParser as I, createWorkerPool as U } from "@markdown-next/parser";
+const M = Symbol("MarkdownWorkerPoll"), V = {
   color: "#1f2328",
   backgroundColor: "#ffffff",
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
   fontSize: "16px",
   lineHeight: "1.5",
   wordWrap: "break-word"
-}, M = {
+}, P = {
   h1: {
     fontSize: "2em",
     fontWeight: 600,
@@ -124,47 +124,47 @@ const R = Symbol("MarkdownWorkerPoll"), I = {
   del: {
     color: "#656d76"
   }
-}, D = "mjx-", U = /* @__PURE__ */ new Set(["math"]);
-function P(e) {
+}, _ = "mjx-", K = /* @__PURE__ */ new Set(["math"]);
+function N(e) {
   if (!e) return {};
   const n = { ...e };
   return "className" in n && (n.class = n.className, delete n.className), "htmlFor" in n && (n.for = n.htmlFor, delete n.htmlFor), n;
 }
-function N(e, n) {
+function q(e, n) {
   return n ? Array.isArray(n) ? [e ?? {}, ...n] : [e ?? {}, n] : e;
 }
 function c(e) {
   return (n) => {
-    const { children: r, style: t, ...a } = n, i = { ...a };
+    const { children: t, style: r, ...l } = n, i = { ...l };
     delete i.node;
-    const d = r ?? void 0, s = { ...i, style: N(M[e], t) };
-    return d === void 0 ? h(e, s) : h(e, s, d);
+    const d = t ?? void 0, u = { ...i, style: q(P[e], r) };
+    return d === void 0 ? h(e, u) : h(e, u, d);
   };
 }
-function V() {
+function X() {
   return (e) => {
     const {
       children: n,
-      style: r,
-      class: t,
-      className: a,
+      style: t,
+      class: r,
+      className: l,
       ...i
     } = e, d = { ...i };
     delete d.node;
-    const s = t ?? a, f = typeof s == "string" ? s : void 0, p = !!(f && f.includes("language-")), u = M.code ?? {}, o = p ? {
-      fontFamily: u.fontFamily,
-      fontSize: u.fontSize,
+    const u = r ?? l, m = typeof u == "string" ? u : void 0, p = !!(m && m.includes("language-")), f = P.code ?? {}, s = p ? {
+      fontFamily: f.fontFamily,
+      fontSize: f.fontSize,
       padding: 0,
       backgroundColor: "transparent"
-    } : u, l = n ?? void 0, m = {
+    } : f, g = n ?? void 0, o = {
       ...d,
-      class: s,
-      style: N(o, r)
+      class: u,
+      style: q(s, t)
     };
-    return l === void 0 ? h("code", m) : h("code", m, l);
+    return g === void 0 ? h("code", o) : h("code", o, g);
   };
 }
-function _() {
+function Q() {
   return {
     h1: c("h1"),
     h2: c("h2"),
@@ -181,7 +181,7 @@ function _() {
     th: c("th"),
     td: c("td"),
     pre: c("pre"),
-    code: V(),
+    code: X(),
     a: c("a"),
     hr: c("hr"),
     img: c("img"),
@@ -189,52 +189,52 @@ function _() {
     del: c("del")
   };
 }
-const K = _();
-function Q(e) {
+const Y = Q();
+function Z(e) {
   const n = { ...e };
-  for (const r of Object.keys(n))
-    (r.startsWith(D) || U.has(r)) && delete n[r];
+  for (const t of Object.keys(n))
+    (t.startsWith(_) || K.has(t)) && delete n[t];
   return n;
 }
-function Y(e) {
+function $(e) {
   const n = {
-    ...K,
+    ...Y,
     ...(e == null ? void 0 : e.components) ?? {}
   };
-  return e != null && e.codeRenderer && (n.code = e.codeRenderer), Q(n);
+  return e != null && e.codeRenderer && (n.code = e.codeRenderer), Z(n);
 }
-const S = (e, n, r) => {
-  const t = P(n), { children: a, ...i } = t, d = r == null ? i : { ...i, key: r };
+const w = (e, n, t) => {
+  const r = N(n), { children: l, ...i } = r, d = t == null ? i : { ...i, key: t };
   if (typeof e == "string") {
-    const f = { ...d };
-    return delete f.node, a == null ? h(e, f) : h(e, f, a);
+    const m = { ...d };
+    return delete m.node, l == null ? h(e, m) : h(e, m, l);
   }
-  if (a == null)
+  if (l == null)
     return h(e, d);
-  const s = { ...d, children: a };
-  return h(e, s, a);
+  const u = { ...d, children: l };
+  return h(e, u, l);
 };
-function w(e, n) {
-  const r = [];
-  for (let t = 0; t < e.children.length; t += 1) {
-    const a = q(e.children[t], n, t);
-    a != null && r.push(a);
+function v(e, n) {
+  const t = [];
+  for (let r = 0; r < e.children.length; r += 1) {
+    const l = z(e.children[r], n, r);
+    l != null && t.push(l);
   }
-  return r;
+  return t;
 }
-function q(e, n, r) {
+function z(e, n, t) {
   switch (e.type) {
     case "root": {
-      const t = w(e, n);
-      return t.length ? S(W, { children: t }, void 0) : null;
+      const r = v(e, n);
+      return r.length ? w(O, { children: r }, void 0) : null;
     }
     case "element": {
-      const t = e, a = n[t.tagName] ?? t.tagName, i = P(
-        t.properties ?? {}
+      const r = e, l = n[r.tagName] ?? r.tagName, i = N(
+        r.properties ?? {}
       );
-      i.node = t;
-      const d = t.tagName === "template" && t.content ? t.content : t, s = w(d, n);
-      return s.length && (i.children = s), S(a, i, r == null ? void 0 : r.toString());
+      i.node = r;
+      const d = r.tagName === "template" && r.content ? r.content : r, u = v(d, n);
+      return u.length && (i.children = u), w(l, i, t == null ? void 0 : t.toString());
     }
     case "text":
       return e.value;
@@ -244,11 +244,11 @@ function q(e, n, r) {
       return null;
   }
 }
-function z(e, n) {
-  const r = Y(n);
-  return q(e, r);
+function A(e, n) {
+  const t = $(n);
+  return z(e, t);
 }
-function A(e) {
+function B(e) {
   if (e instanceof Error) return e;
   if (typeof e == "string") return new Error(e);
   try {
@@ -257,79 +257,79 @@ function A(e) {
     return new Error("Unknown error");
   }
 }
-function B(e, n, r) {
-  const t = O(null), a = k(!1), i = k(null);
-  let d = null, s = 0;
-  const f = async (u, o) => {
-    const l = ++s;
-    a.value = !0, i.value = null;
+function W(e, n, t) {
+  const r = j(null), l = k(!1), i = k(null);
+  let d = null, u = 0;
+  const m = async (f, s) => {
+    const g = ++u;
+    l.value = !0, i.value = null;
     try {
-      const m = await n(u, o);
-      l === s && (t.value = m);
-    } catch (m) {
-      l === s && (i.value = A(m));
+      const o = await n(f, s);
+      g === u && (r.value = o);
+    } catch (o) {
+      g === u && (i.value = B(o));
     } finally {
-      l === s && (a.value = !1);
+      g === u && (l.value = !1);
     }
-  }, p = (u, o) => {
-    const l = (o == null ? void 0 : o.dynamic) ?? !1, m = (o == null ? void 0 : o.debounceMs) ?? 250;
-    if (d != null && (globalThis.clearTimeout(d), d = null), l) {
+  }, p = (f, s) => {
+    const g = (s == null ? void 0 : s.dynamic) ?? !1, o = (s == null ? void 0 : s.debounceMs) ?? 250;
+    if (d != null && (globalThis.clearTimeout(d), d = null), g) {
       d = globalThis.setTimeout(() => {
-        f(u, o);
-      }, m);
+        m(f, s);
+      }, o);
       return;
     }
-    f(u, o);
+    m(f, s);
   };
-  return v(
-    () => [x(e), r ? x(r) : void 0],
-    ([u, o]) => {
-      p(u ?? "", o);
+  return C(
+    () => [x(e), t ? x(t) : void 0],
+    ([f, s]) => {
+      p(f ?? "", s);
     },
     { immediate: !0, deep: !0 }
-  ), C(() => {
+  ), R(() => {
     d != null && globalThis.clearTimeout(d);
   }), {
-    content: t,
-    loading: a,
+    content: r,
+    loading: l,
     error: i
   };
 }
-function Z(e, n, r) {
-  const t = X(n ?? {});
-  return B(
+function ee(e, n, t) {
+  const r = I(n ?? {});
+  return W(
     e,
-    async (a, i) => {
-      const d = await t.parseToHAST(a);
-      return z(d, i);
+    async (l, i) => {
+      const d = await r.parseToHAST(l);
+      return A(d, i);
     },
-    r
+    t
   );
 }
-function $(e, n, r) {
-  return B(
+function ne(e, n, t) {
+  return W(
     e,
-    async (t, a) => {
-      const i = await n.parseToHAST(t);
-      return z(i, a);
+    async (r, l) => {
+      const i = await n.parseToHAST(r);
+      return A(i, l);
     },
-    r
+    t
   );
 }
-const ee = {
+const re = {
   display: "inline-flex",
   alignItems: "center",
   gap: "8px",
   color: "#57606a",
   fontSize: "14px"
-}, ne = {
+}, te = {
   padding: "12px 16px",
   borderRadius: "8px",
   backgroundColor: "#ffebe9",
   color: "#cf222e",
   border: "1px solid #ff8182",
   fontSize: "14px"
-}, oe = /* @__PURE__ */ T({
+}, le = /* @__PURE__ */ T({
   name: "MarkdownRenderer",
   inheritAttrs: !1,
   props: {
@@ -359,36 +359,45 @@ const ee = {
     debounceMs: {
       type: Number,
       default: 250
+    },
+    loadingSlot: {
+      type: [Object, Function],
+      required: !1,
+      default: void 0
     }
   },
   setup(e) {
-    const n = F(), r = E(e, "markdown"), t = L(R, null), a = k(null), i = y(() => {
+    const n = E(), t = L(e, "markdown"), r = H(M, null), l = k(null), i = b(() => {
       const o = {
         dynamic: e.dynamic,
         debounceMs: e.debounceMs
       };
-      if (t != null && t.forceRenderOptions.value) {
-        const l = t.renderOptions.value;
-        return l != null && l.components && (o.components = l.components), l != null && l.codeRenderer && (o.codeRenderer = l.codeRenderer), o.dynamic = (l == null ? void 0 : l.dynamic) ?? !1, o.debounceMs = (l == null ? void 0 : l.debounceMs) ?? 250, o;
+      if (r != null && r.forceRenderOptions.value) {
+        const a = r.renderOptions.value;
+        return a != null && a.components && (o.components = a.components), a != null && a.codeRenderer && (o.codeRenderer = a.codeRenderer), a != null && a.loadingSlot && (o.loadingSlot = a.loadingSlot), o.dynamic = (a == null ? void 0 : a.dynamic) ?? !1, o.debounceMs = (a == null ? void 0 : a.debounceMs) ?? 250, o;
       }
-      return e.components && (o.components = e.components), e.codeRenderer && (o.codeRenderer = e.codeRenderer), o;
-    }), d = t ? $(r, t.pool, i) : Z(r, e.parserOptions, i);
-    j((o) => (a.value = A(o), !1)), v(r, () => {
-      a.value = null;
+      return e.components && (o.components = e.components), e.codeRenderer && (o.codeRenderer = e.codeRenderer), e.loadingSlot && (o.loadingSlot = e.loadingSlot), o;
+    }), d = r ? ne(t, r.pool, i) : ee(t, e.parserOptions, i);
+    J((o) => (l.value = B(o), !1)), C(t, () => {
+      l.value = null;
     });
-    const s = y(() => [I, n.style]), f = y(() => {
-      const l = {
+    const u = b(() => [V, n.style]), m = b(() => {
+      const a = {
         ...n
       };
-      return delete l.style, l;
-    }), p = () => g("div", {
-      style: ee
-    }, [g("svg", {
+      return delete a.style, a;
+    }), p = b(() => {
+      var a;
+      const o = (a = r == null ? void 0 : r.renderOptions.value) == null ? void 0 : a.loadingSlot;
+      return o || e.loadingSlot;
+    }), f = () => y("div", {
+      style: re
+    }, [y("svg", {
       width: "16",
       height: "16",
       viewBox: "0 0 50 50",
       "aria-hidden": "true"
-    }, [g("circle", {
+    }, [y("circle", {
       cx: "25",
       cy: "25",
       r: "20",
@@ -397,24 +406,27 @@ const ee = {
       "stroke-width": "4",
       "stroke-linecap": "round",
       "stroke-dasharray": "31.4 31.4"
-    }, [g("animateTransform", {
+    }, [y("animateTransform", {
       attributeName: "transform",
       type: "rotate",
       from: "0 25 25",
       to: "360 25 25",
       dur: "1s",
       repeatCount: "indefinite"
-    }, null)])]), g("span", null, [b("Rendering markdown...")])]), u = (o) => g("div", {
-      style: ne
-    }, [g("strong", null, [b("Markdown render error:")]), b(" "), o.message]);
+    }, null)])]), y("span", null, [S("Rendering markdown...")])]), s = () => {
+      const o = p.value;
+      return o ? h(o) : f();
+    }, g = (o) => y("div", {
+      style: te
+    }, [y("strong", null, [S("Markdown render error:")]), S(" "), o.message]);
     return () => {
-      const o = a.value ?? d.error.value, l = d.content.value, m = d.loading.value && !l && !o;
-      return g("div", H(f.value, {
-        style: s.value
-      }), [o ? u(o) : m ? p() : l]);
+      const o = l.value ?? d.error.value, a = d.content.value, F = d.loading.value && !a && !o;
+      return y("div", G(m.value, {
+        style: u.value
+      }), [o ? g(o) : F ? s() : a]);
     };
   }
-}), de = /* @__PURE__ */ T({
+}), ae = /* @__PURE__ */ T({
   name: "MarkdownWorkerPoll",
   props: {
     parserOptions: {
@@ -451,11 +463,6 @@ const ee = {
       required: !1,
       default: void 0
     },
-    supportsLaTeX: {
-      type: Boolean,
-      required: !1,
-      default: void 0
-    },
     components: {
       type: Object,
       required: !1,
@@ -475,30 +482,35 @@ const ee = {
       type: Number,
       required: !1,
       default: void 0
+    },
+    loadingSlot: {
+      type: [Object, Function],
+      required: !1,
+      default: void 0
     }
   },
   setup(e, {
     slots: n
   }) {
-    const r = {
+    const t = {
       ...e.parserOptions ?? {}
     };
-    e.workerCount != null && (r.workerCount = e.workerCount), e.customTags && (r.customTags = e.customTags), e.extendedGrammar && (r.extendedGrammar = e.extendedGrammar), e.remarkPlugins && (r.remarkPlugins = e.remarkPlugins), e.rehypePlugins && (r.rehypePlugins = e.rehypePlugins), e.mathJaxConfig && (r.mathJaxConfig = e.mathJaxConfig), e.supportsLaTeX != null && (r.supportsLaTeX = e.supportsLaTeX);
-    const t = G(r), a = y(() => {
-      if (e.components == null && e.codeRenderer == null && e.dynamic == null && e.debounceMs == null)
+    e.workerCount != null && (t.workerCount = e.workerCount), e.customTags && (t.customTags = e.customTags), e.extendedGrammar && (t.extendedGrammar = e.extendedGrammar), e.remarkPlugins && (t.remarkPlugins = e.remarkPlugins), e.rehypePlugins && (t.rehypePlugins = e.rehypePlugins), e.mathJaxConfig && (t.mathJaxConfig = e.mathJaxConfig);
+    const r = U(t), l = b(() => {
+      if (e.components == null && e.codeRenderer == null && e.dynamic == null && e.debounceMs == null && e.loadingSlot == null)
         return;
       const d = {
         dynamic: e.dynamic ?? !1,
         debounceMs: e.debounceMs ?? 250
       };
-      return e.components && (d.components = e.components), e.codeRenderer && (d.codeRenderer = e.codeRenderer), d;
-    }), i = y(() => a.value !== void 0);
-    return J(R, {
-      pool: t,
-      renderOptions: a,
+      return e.components && (d.components = e.components), e.codeRenderer && (d.codeRenderer = e.codeRenderer), e.loadingSlot && (d.loadingSlot = e.loadingSlot), d;
+    }), i = b(() => l.value !== void 0);
+    return D(M, {
+      pool: r,
+      renderOptions: l,
       forceRenderOptions: i
-    }), C(() => {
-      t.destroy();
+    }), R(() => {
+      r.destroy();
     }), () => {
       var d;
       return (d = n.default) == null ? void 0 : d.call(n);
@@ -506,8 +518,8 @@ const ee = {
   }
 });
 export {
-  oe as MarkdownRenderer,
-  de as MarkdownWorkerPoll,
-  Z as useMarkdownParser,
-  $ as useMarkdownWorkerPool
+  le as MarkdownRenderer,
+  ae as MarkdownWorkerPoll,
+  ee as useMarkdownParser,
+  ne as useMarkdownWorkerPool
 };

package/dist/types.d.ts

@@ -1,12 +1,14 @@
-import type { Component, FunctionalComponent, Ref } from 'vue';
+import type { Component, FunctionalComponent, Ref, VNodeChild } from 'vue';
 import type { ParserOptions } from '@markdown-next/parser';
 export type MarkdownComponent = Component | FunctionalComponent | string;
 export type MarkdownComponents = Record<string, MarkdownComponent>;
+export type LoadingSlot = Component | FunctionalComponent | (() => VNodeChild);
 export interface MarkdownRenderOptions {
     components?: MarkdownComponents;
     codeRenderer?: MarkdownComponent;
     dynamic?: boolean;
     debounceMs?: number;
+    loadingSlot?: LoadingSlot;
 }
 export interface MarkdownRendererProps extends MarkdownRenderOptions {
     markdown: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdown-next/vue",
-  "version": "0.0.2-alpha",
+  "version": "1.0.0",
   "type": "module",
   "description": "Vue renderer for markdown-next",
   "module": "dist/index.mjs",
@@ -26,18 +26,18 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/vue-markdown-next.git",
+    "url": "https://github.com/UnboundedWeb/vue-markdown-next.git",
     "directory": "packages/vue"
   },
   "bugs": {
-    "url": "https://github.com/yourusername/vue-markdown-next/issues"
+    "url": "https://github.com/UnboundedWeb/vue-markdown-next/issues"
   },
   "engines": {
     "node": ">=16.0.0"
   },
   "dependencies": {
     "hast-util-to-jsx-runtime": "^2.3.0",
-    "@markdown-next/parser": "0.0.2-alpha"
+    "@markdown-next/parser": "1.0.0"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
@@ -54,9 +54,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build && tsc -p tsconfig.build.json",
-    "typecheck": "tsc -b",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "test": "vitest"
+    "test": "vitest --run --passWithNoTests"
   }
 }