@alvarosabu/storyblok-richtext-vue-renderer - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0-next.0

dist/index.d.ts

 import type { RendererElement, RendererNode, VNode } from 'vue';
-import { h } from 'vue';
 import SbRichText from './components/SbRichText.vue';
-export declare enum BlockTypes {
-    DOCUMENT = "doc",
-    HEADING = "heading",
-    PARAGRAPH = "paragraph",
-    QUOTE = "blockquote",
-    OL_LIST = "ordered_list",
-    UL_LIST = "bullet_list",
-    LIST_ITEM = "list_item",
-    CODE_BLOCK = "code_block",
-    HR = "horizontal_rule",
-    BR = "hard_break",
-    IMAGE = "image",
-    EMOJI = "emoji",
-    COMPONENT = "blok"
-}
-export declare enum MarkTypes {
-    BOLD = "bold",
-    STRONG = "strong",
-    STRIKE = "strike",
-    UNDERLINE = "underline",
-    ITALIC = "italic",
-    CODE = "code",
-    LINK = "link",
-    ANCHOR = "anchor",
-    STYLED = "styled",
-    SUPERSCRIPT = "superscript",
-    SUBSCRIPT = "subscript",
-    TEXT_STYLE = "textStyle",
-    HIGHLIGHT = "highlight"
-}
-export declare enum TextTypes {
-    TEXT = "text"
-}
-export declare enum ComponentTypes {
-    COMPONENT = "blok"
-}
-export declare enum LinkTargets {
-    SELF = "_self",
-    BLANK = "_blank"
-}
-export declare enum LinkTypes {
-    URL = "url",
-    STORY = "story",
-    ASSET = "asset",
-    EMAIL = "email"
-}
-export type NodeTypes = BlockTypes | MarkTypes | TextTypes | ComponentTypes;
-export interface Node {
-    type: NodeTypes;
-    content: Node[];
-    children?: VNode[];
-    attrs?: Record<string, any>;
-    text?: string;
-}
-export interface MarkNode extends Node {
-    type: MarkTypes.BOLD | MarkTypes.ITALIC | MarkTypes.UNDERLINE | MarkTypes.STRIKE | MarkTypes.CODE | MarkTypes.LINK | MarkTypes.ANCHOR | MarkTypes.STYLED | MarkTypes.SUPERSCRIPT | MarkTypes.SUBSCRIPT | MarkTypes.TEXT_STYLE | MarkTypes.HIGHLIGHT;
-    attrs?: Record<string, any>;
-}
-export interface TextNode extends Node {
-    type: TextTypes.TEXT;
-    text: string;
-    marks?: MarkNode[];
-}
-export type RenderedNode = ReturnType<typeof h>;
-export type NodeResolver = (node: Node | TextNode | MarkNode) => VNode<RendererNode, RendererElement, {
-    [key: string]: any;
-}>;
-export interface SbRichtextOptions {
-    resolvers?: Array<[NodeTypes, NodeResolver]>;
-}
+import type { Node, SbRichtextOptions } from './types';
 export declare function useSbRichtext(options?: SbRichtextOptions): {
-    render: (node: Node | Node[]) => RenderedNode | RenderedNode[];
+    render: (node: Node | Node[]) => VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>[];
 };
 export { SbRichText };

dist/sb-vue-rich-text-renderer.js

@@ -1,3 +0,23 @@
-import { defineComponent as S, openBlock as I, createBlock as p, getCurrentInstance as O, h as r, createTextVNode as L, resolveDynamicComponent as N } from "vue";
-const q = /* @__PURE__ */ S({
+import { defineComponent as L, ref as O, resolveDynamicComponent as p, inject as H, openBlock as g, createBlock as C, mergeProps as P, createTextVNode as U, h as R } from "vue";
+const x = /* @__PURE__ */ L({
+  __name: "StoryblokComponent",
+  props: {
+    blok: {}
+  },
+  setup(e, { expose: t }) {
+    const a = e, c = O();
+    t({
+      value: c
+    });
+    const I = typeof p(a.blok.component) != "string", m = H("VueSDKOptions"), l = O(a.blok.component);
+    return I || (m.enableFallbackComponent ? (l.value = m.customFallbackComponent ?? "FallbackComponent", typeof p(l.value) == "string" && console.error(
+      `Is the Fallback component "${l.value}" registered properly?`
+    )) : console.error(
+      `Component could not be found for blok "${a.blok.component}"! Is it defined in main.ts as "app.component("${a.blok.component}", ${a.blok.component});"?`
+    )), (E, f) => (g(), C(p(l.value), P({
+      ref_key: "blokRef",
+      ref: c
+    }, { ...E.$props, ...E.$attrs }), null, 16));
+  }
+}), k = /* @__PURE__ */ L({
   __name: "SbRichText",
@@ -8,104 +28,121 @@ props: {
   },
-  setup(n) {
-    const d = n, { render: h } = U({
-      resolvers: d.resolvers
-    }), l = () => h(d.doc);
-    return (b, m) => (I(), p(l));
+  setup(e) {
+    const t = e, { render: a } = $({
+      resolvers: t.resolvers
+    }), c = () => a(t.doc);
+    return (I, m) => (g(), C(c));
   }
 });
-var x = /* @__PURE__ */ ((n) => (n.DOCUMENT = "doc", n.HEADING = "heading", n.PARAGRAPH = "paragraph", n.QUOTE = "blockquote", n.OL_LIST = "ordered_list", n.UL_LIST = "bullet_list", n.LIST_ITEM = "list_item", n.CODE_BLOCK = "code_block", n.HR = "horizontal_rule", n.BR = "hard_break", n.IMAGE = "image", n.EMOJI = "emoji", n.COMPONENT = "blok", n))(x || {}), C = /* @__PURE__ */ ((n) => (n.BOLD = "bold", n.STRONG = "strong", n.STRIKE = "strike", n.UNDERLINE = "underline", n.ITALIC = "italic", n.CODE = "code", n.LINK = "link", n.ANCHOR = "anchor", n.STYLED = "styled", n.SUPERSCRIPT = "superscript", n.SUBSCRIPT = "subscript", n.TEXT_STYLE = "textStyle", n.HIGHLIGHT = "highlight", n))(C || {}), A = /* @__PURE__ */ ((n) => (n.TEXT = "text", n))(A || {}), D = /* @__PURE__ */ ((n) => (n.COMPONENT = "blok", n))(D || {}), H = /* @__PURE__ */ ((n) => (n.SELF = "_self", n.BLANK = "_blank", n))(H || {}), P = /* @__PURE__ */ ((n) => (n.URL = "url", n.STORY = "story", n.ASSET = "asset", n.EMAIL = "email", n))(P || {});
-function U(n = {
-  resolvers: []
+var i = /* @__PURE__ */ ((e) => (e.DOCUMENT = "doc", e.HEADING = "heading", e.PARAGRAPH = "paragraph", e.QUOTE = "blockquote", e.OL_LIST = "ordered_list", e.UL_LIST = "bullet_list", e.LIST_ITEM = "list_item", e.CODE_BLOCK = "code_block", e.HR = "horizontal_rule", e.BR = "hard_break", e.IMAGE = "image", e.EMOJI = "emoji", e.COMPONENT = "blok", e))(i || {}), u = /* @__PURE__ */ ((e) => (e.BOLD = "bold", e.STRONG = "strong", e.STRIKE = "strike", e.UNDERLINE = "underline", e.ITALIC = "italic", e.CODE = "code", e.LINK = "link", e.ANCHOR = "anchor", e.STYLED = "styled", e.SUPERSCRIPT = "superscript", e.SUBSCRIPT = "subscript", e.TEXT_STYLE = "textStyle", e.HIGHLIGHT = "highlight", e))(u || {}), _ = /* @__PURE__ */ ((e) => (e.TEXT = "text", e))(_ || {}), N = /* @__PURE__ */ ((e) => (e.COMPONENT = "blok", e))(N || {}), b = /* @__PURE__ */ ((e) => (e.URL = "url", e.STORY = "story", e.ASSET = "asset", e.EMAIL = "email", e))(b || {});
+const G = (e = {}) => Object.keys(e).map((t) => `${t}: ${e[t]}`).join("; ");
+function $(e = {
+  resolvers: {}
 }) {
-  var _;
-  const { resolvers: d = {} } = n, h = (_ = O()) == null ? void 0 : _.appContext.components, l = (o) => ({ children: e, attrs: i }) => r(o, i, e), b = ({ marks: o, ...e }) => {
-    if ("text" in e)
-      return o ? o.reduce(
-        (i, u) => t({ ...u, text: i }),
-        t(e)
-      ) : L(e.text);
-  }, m = ({ children: o, attrs: e }) => r(`h${e == null ? void 0 : e.level}`, e, o), c = (o) => ({ text: e, attrs: i }) => r(o, i, e), R = ({ attrs: o, children: e }) => {
-    const { component: i, file: u, _preview: w, preview: G, _editable: K, ...f } = o == null ? void 0 : o.body[0];
-    return h ? r(h[o == null ? void 0 : o.body[0].component], {
-      id: o == null ? void 0 : o.id,
-      blok: f
-    }, e) : r("div", {}, e);
-  }, g = ({ text: o, attrs: e }) => {
-    let i = "";
-    switch (e == null ? void 0 : e.linktype) {
-      case "asset":
-      case "url":
-        i = e == null ? void 0 : e.href;
+  const t = R, { resolvers: a = {} } = e, c = (o) => (r) => t(o, r.attrs || {}, r.children), I = (o) => {
+    var r;
+    return t(`h${(r = o.attrs) == null ? void 0 : r.level}`, o.attrs || {}, o.children);
+  }, m = (o) => {
+    var r, n, s, h;
+    return t("span", {
+      "data-type": "emoji",
+      "data-name": (r = o.attrs) == null ? void 0 : r.name,
+      emoji: (n = o.attrs) == null ? void 0 : n.emoji
+    }, t("img", {
+      src: (s = o.attrs) == null ? void 0 : s.fallbackImage,
+      alt: (h = o.attrs) == null ? void 0 : h.alt,
+      style: "width: 1.25em; height: 1.25em; vertical-align: text-top",
+      draggable: "false",
+      loading: "lazy"
+    }, ""));
+  }, l = (o, r = !1) => ({ text: n, attrs: s }) => t(o, r ? {
+    style: G(s)
+  } : s || {}, n), E = (o) => S(o), f = (o) => {
+    const { marks: r, ...n } = o;
+    return "text" in o ? r ? r.reduce(
+      (s, h) => E({ ...h, text: s }),
+      // Fix: Ensure render function returns a string
+      E({ ...n, children: n.children })
+    ) : U(n.text) : R("");
+  }, T = (o) => {
+    var r;
+    return t("pre", {
+      pros: (r = o.attrs) == null ? void 0 : r.pros
+    }, t("code", {}, o.children || ""));
+  }, A = (o) => {
+    var r, n;
+    return t(x, {
+      blok: (r = o == null ? void 0 : o.attrs) == null ? void 0 : r.body[0],
+      id: (n = o.attrs) == null ? void 0 : n.id
+    }, o.children);
+  }, v = ({ text: o, attrs: r }) => {
+    let n = "";
+    switch (r == null ? void 0 : r.linktype) {
+      case b.ASSET:
+      case b.URL:
+        n = r == null ? void 0 : r.href;
         break;
-      case "email":
-        i = `mailto:${e == null ? void 0 : e.href}`;
+      case b.EMAIL:
+        n = `mailto:${r == null ? void 0 : r.href}`;
         break;
-      case "story": {
-        const u = N("RouterLink");
-        return u ? r(
-          u,
-          { to: e == null ? void 0 : e.href, target: e == null ? void 0 : e.target },
+      case b.STORY: {
+        const s = p("RouterLink");
+        return s ? R(
+          s,
+          { to: r == null ? void 0 : r.href, target: r == null ? void 0 : r.target },
           { default: () => o }
-        ) : r("a", { href: i, target: e == null ? void 0 : e.target }, o);
+        ) : R("a", { href: n, target: r == null ? void 0 : r.target }, o);
       }
     }
-    return r("a", { href: e == null ? void 0 : e.href, target: e == null ? void 0 : e.target }, o);
-  }, E = new Map([
-    ["doc", ({ children: o }) => r("div", {}, o)],
-    ["paragraph", l("p")],
-    ["heading", m],
-    ["blockquote", l("blockquote")],
-    ["bullet_list", l("ul")],
-    ["ordered_list", l("ol")],
-    ["list_item", l("li")],
-    ["image", ({ attrs: o }) => r("img", o)],
-    ["emoji", ({ attrs: o }) => r("span", o)],
-    ["code_block", ({ attrs: o, content: e }) => r("pre", o, [r("code", {}, e[0].text)])],
-    ["horizontal_rule", l("hr")],
-    ["hard_break", l("br")],
-    ["text", b],
-    ["bold", c("strong")],
-    ["italic", c("em")],
-    ["underline", c("u")],
-    ["strike", c("s")],
-    ["code", c("code")],
-    ["link", g],
-    ["anchor", ({ attrs: o = {}, children: e }) => r("a", { id: o.id }, e)],
-    ["styled", ({ attrs: o = {}, children: e }) => r(o.style, {}, e)],
-    ["superscript", c("sup")],
-    ["subscript", c("sub")],
-    ["textStyle", ({ attrs: o = {}, children: e }) => r("span", { style: o.style }, e)],
-    ["highlight", c("mark")],
-    ["blok", R],
-    // eslint-disable-next-line max-len
-    ...Object.entries(d).map(([o, e]) => [o, e])
+    return R("a", { href: r == null ? void 0 : r.href, target: r == null ? void 0 : r.target }, o);
+  }, D = new Map([
+    [i.DOCUMENT, c("div")],
+    [i.HEADING, I],
+    [i.PARAGRAPH, c("p")],
+    [i.UL_LIST, c("ul")],
+    [i.OL_LIST, c("ol")],
+    [i.LIST_ITEM, c("li")],
+    [i.IMAGE, c("img")],
+    [i.EMOJI, m],
+    [i.CODE_BLOCK, T],
+    [i.QUOTE, c("blockquote")],
+    [i.HR, c("hr")],
+    [i.BR, c("br")],
+    [_.TEXT, f],
+    [u.LINK, v],
+    [u.ANCHOR, v],
+    [u.STYLED, l("span")],
+    [u.BOLD, l("strong")],
+    [u.TEXT_STYLE, l("span", !0)],
+    [u.ITALIC, l("em")],
+    [u.UNDERLINE, l("u")],
+    [u.STRIKE, l("s")],
+    [u.CODE, l("code")],
+    [u.SUPERSCRIPT, l("sup")],
+    [u.SUBSCRIPT, l("sub")],
+    [u.HIGHLIGHT, l("mark")],
+    [N.COMPONENT, A],
+    ...Object.entries(a).map(([o, r]) => [o, r])
   ]);
-  function v(o) {
-    const e = E.get(o.type);
-    if (!e)
+  function d(o) {
+    const r = D.get(o.type);
+    if (!r)
       throw new Error(`No resolver found for node type ${o.type}`);
     if (o.type === "text")
-      return e(o);
-    const i = o.content ? o.content.map(t) : void 0;
-    return e({
+      return r(o);
+    const n = o.content ? o.content.map(S) : void 0;
+    return r({
       ...o,
-      children: i
+      children: n
     });
   }
-  function t(o) {
-    return Array.isArray(o) ? o.map(v) : v(o);
+  function S(o) {
+    return Array.isArray(o) ? o.map(d) : [d(o)];
   }
   return {
-    render: t
+    render: S
   };
 }
 export {
-  x as BlockTypes,
-  D as ComponentTypes,
-  H as LinkTargets,
-  P as LinkTypes,
-  C as MarkTypes,
-  q as SbRichText,
-  A as TextTypes,
-  U as useSbRichtext
+  k as SbRichText,
+  $ as useSbRichtext
 };

package.json

 {
   "name": "@alvarosabu/storyblok-richtext-vue-renderer",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.2.0-next.0",
   "packageManager": "pnpm@8.10.2",
@@ -19,4 +19,4 @@ "description": "A Vue 3 renderer for Storyblok Rich Text",
       "types": "./dist/index.d.ts",
-      "require": "./dist/sb-vue-rich-text-renderer.umd.cjs",
-      "import": "./dist/sb-vue-rich-text-renderer.js"
+      "import": "./dist/sb-vue-rich-text-renderer.js",
+      "require": "./dist/sb-vue-rich-text-renderer.umd.cjs"
     },
@@ -29,4 +29,4 @@ "./*": "./*"
   "files": [
-    "dist",
-    "*.d.ts"
+    "*.d.ts",
+    "dist"
   ],
@@ -43,3 +43,4 @@ "publishConfig": {
     "release": "release-it",
-    "lint": "eslint --ext .ts,.vue --fix .",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "playground:vue": "cd playground/vue && npm run dev",
@@ -52,2 +53,3 @@ "playground:nuxt": "cd playground/nuxt && npm run dev"
   "devDependencies": {
+    "@alvarosabu/eslint-config": "^1.0.0",
     "@alvarosabu/eslint-config-vue": "^0.4.0",
@@ -58,2 +60,3 @@ "@release-it/conventional-changelog": "^7.0.2",
     "@vitest/ui": "^0.34.6",
+    "eslint": "^8.57.0",
     "pathe": "^1.1.1",
@@ -60,0 +63,0 @@ "release-it": "^16.2.1",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18743

increased by11.26%

Number of package files

9

increased by12.5%

Lines of code

262

increased by18.55%

Worsened metrics

Dev dependency count

14

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes