@marvr/storyblok-rich-text-vue-renderer - npm Package Compare versions

Comparing version 3.2.1 to 3.3.1

dist/index.d.ts

 import * as vue from 'vue';
 import { h, DefineComponent, VNode, PropType, Plugin } from 'vue';
-import { NodeAttributes, NodeTypes, HeadingAttributes, OrderedListAttributes, CodeBlockAttributes, ImageAttributes, LinkAttributes, StyledAttributes, Node, DocumentNode } from '@marvr/storyblok-rich-text-types';
+import { NodeAttributes, NodeTypes, HeadingAttributes, OrderedListAttributes, CodeBlockAttributes, ImageAttributes, LinkAttributes, AnchorAttributes, StyledAttributes, Node, DocumentNode } from '@marvr/storyblok-rich-text-types';
 
@@ -58,2 +58,3 @@ declare type RenderedNode = ReturnType<typeof h>;
     [NodeTypes.LINK]: MarkResolverWithAttributes<LinkAttributes>;
+    [NodeTypes.ANCHOR]: MarkResolverWithAttributes<AnchorAttributes>;
     [NodeTypes.STYLED]: MarkResolverWithAttributes<StyledAttributes>;
@@ -91,3 +92,3 @@ [NodeTypes.COMPONENT]: () => RenderedNode;
     [key: string]: any;
-}>[], unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}>[], unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     document: {
@@ -97,3 +98,3 @@ type: PropType<DocumentNode>;
     };
-}>>, {}>;
+}>>, {}, {}>;
 //# sourceMappingURL=RichTextRenderer.d.ts.map
@@ -100,0 +101,0 @@

dist/index.js

@@ -1,32 +0,1 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 import { h, resolveDynamicComponent, isVNode, createTextVNode, defineComponent, inject } from "vue";
@@ -69,3 +38,7 @@ import { NodeTypes, LinkTypes, isTextNode, isBlockNode, isComponentNode } from "@marvr/storyblok-rich-text-types";
           return h("a", { href, target: attrs.target }, text);
-        return h(RouterLink, { to: attrs.href, target: attrs.target }, { default: () => text });
+        return h(
+          RouterLink,
+          { to: attrs.href, target: attrs.target },
+          { default: () => text }
+        );
       }
@@ -75,2 +48,3 @@ }
   },
+  [NodeTypes.ANCHOR]: ({ text, attrs }) => h("span", attrs, text),
   [NodeTypes.STYLED]: ({ text, attrs }) => h("span", attrs, text),
@@ -85,3 +59,3 @@ [NodeTypes.COMPONENT]: () => h("div", "component")
   const {
-    resolvers = (options == null ? void 0 : options.resolvers) || __spreadProps(__spreadValues({}, defaultResolvers), { components: {} }),
+    resolvers = (options == null ? void 0 : options.resolvers) || { ...defaultResolvers, components: {} },
     omitParagraphInListItems = false
@@ -93,3 +67,6 @@ } = options || {};
         return renderTextNode(node);
-      return node.marks.reduce((text, mark) => renderMarkNode(mark, text), renderTextNode(node));
+      return node.marks.reduce(
+        (text, mark) => renderMarkNode(mark, text),
+        renderTextNode(node)
+      );
     } else if (isBlockNode(node)) {
@@ -100,3 +77,3 @@ return renderBlockNode(node);
     }
-    return h("div", "fallback node");
+    return h("div", `fallback: the node "${node.type}" is not handled`);
   };
@@ -135,3 +112,3 @@ const renderNodeList = (nodes) => {
       default:
-        return h("div", "fallback block");
+        return h("div", `fallback: block "${node.type}" is not handled`);
     }
@@ -149,6 +126,7 @@ }
       case NodeTypes.LINK:
+      case NodeTypes.ANCHOR:
       case NodeTypes.STYLED:
         return resolveMarkNodeWithAttributes(node, text);
       default:
-        return h("span", "fallback mark");
+        return h("span", `fallback: the mark "${node.type}" is not handled`);
     }
@@ -159,6 +137,8 @@ }
     node.attrs.body.forEach((body) => {
-      const _a = body, { component, _uid } = _a, fields = __objRest(_a, ["component", "_uid"]);
+      const { component, _uid, ...fields } = body;
       const resolver = resolvers.components[component];
       if (resolver) {
-        components.push(resolver({ id: node.attrs.id, component, _uid, fields }));
+        components.push(
+          resolver({ id: node.attrs.id, component, _uid, fields })
+        );
       } else {
@@ -255,5 +235,5 @@ components.push(resolvers[NodeTypes.COMPONENT]());
 function defineResolvers(resolvers) {
-  const _a = resolvers, { components = {} } = _a, rest = __objRest(_a, ["components"]);
-  return __spreadValues(__spreadProps(__spreadValues({}, defaultResolvers), { components }), rest);
+  const { components = {}, ...rest } = resolvers;
+  return { ...defaultResolvers, components, ...rest };
 }
 export { RichTextRenderer, componentResolvers, createRenderer, defaultResolvers, defineResolvers, getRouterLinkComponent, isComponentResolver, plugin, useRenderer };

package.json

 {
   "name": "@marvr/storyblok-rich-text-vue-renderer",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "keywords": [
@@ -40,3 +40,3 @@ "rich-text",
   "dependencies": {
-    "@marvr/storyblok-rich-text-types": "3.2.1",
+    "@marvr/storyblok-rich-text-types": "3.3.1",
     "vue": "^3.2.27"
@@ -59,6 +59,5 @@ },
   "scripts": {
-    "build": "vue-tsc --noEmit && vite build && pnpm run rollup-dts && rm -rf dist/src",
+    "build": "vite build && pnpm run rollup-dts && rm -rf dist/src",
     "rollup-dts": "rollup -c rollup.config.ts --configPlugin esbuild"
-  },
-  "readme": "# @marvr/storyblok-rich-text-vue-renderer\n\n> Vue 3 plugin for rendering the rich-text content.\n\n## Installation\n\n```bash\nyarn add @marvr/storyblok-rich-text-vue-renderer@next\n# or\nnpm install @marvr/storyblok-rich-text-vue-renderer@next\n```\n\n## Usage\n\n### Register the plugin\n```ts\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { plugin } from '@marvr/storyblok-rich-text-vue-renderer';\n\nconst app = createApp(App);\napp.use(plugin(/* options */));\napp.mount('#app');\n```\n\n### Use the renderer component\n\n```html\n<script lang=\"ts\">\nimport { defineComponent, shallowReactive } from 'vue';\nimport { RichTextRenderer } from '@marvr/storyblok-rich-text-vue-renderer';\n\nexport default defineComponent({\n    components: {\n        RichTextRenderer\n    },\n    setup() {\n        const doc = shallowReactive(\n            // fetched document from Storyblok API\n        );\n\n        return { doc }\n    }\n})\n</script>\n<template>\n    <RichTextRenderer :document=\"doc\">\n</template>\n```\n\n### Directly use the function\n\n```html\n<script lang=\"ts\">\nimport { defineComponent, shallowReactive } from 'vue';\nimport { useRenderer } from '@marvr/storyblok-rich-text-vue-renderer';\n\nexport default defineComponent({\n    components: {\n        RichTextRenderer\n    },\n    setup() {\n        const renderer = useRenderer();\n        const doc = shallowReactive(\n            // fetched document from Storyblok API\n        );\n\n        const renderedDocument = renderer.renderDocument(doc);\n    }\n})\n</script>\n```"
+  }
 }

src/renderer.ts

@@ -59,3 +59,3 @@ import { type VNode, createTextVNode, h, isVNode } from 'vue'
     // @TODO
-    return h('div', 'fallback node')
+    return h('div', `fallback: the node "${node.type}" is not handled`)
   }
@@ -108,3 +108,4 @@
         // @TODO fallback
-        return h('div', 'fallback block')
+        // @ts-expect-error There exist more marks than handled in this module.
+        return h('div', `fallback: block "${node.type}" is not handled`)
     }
@@ -126,2 +127,3 @@ }
       case NodeTypes.LINK:
+      case NodeTypes.ANCHOR:
       case NodeTypes.STYLED:
@@ -132,3 +134,4 @@ return resolveMarkNodeWithAttributes(node, text)
         // @TODO fallback
-        return h('span', 'fallback mark')
+        // @ts-expect-error There exist more marks than handled in this module.
+        return h('span', `fallback: the mark "${node.type}" is not handled`)
     }
@@ -135,0 +138,0 @@ }

src/resolvers.ts

@@ -8,2 +8,3 @@ import {
 import {
+  type AnchorAttributes,
   type CodeBlockAttributes,
@@ -93,2 +94,3 @@ type HeadingAttributes,
   [NodeTypes.LINK]: MarkResolverWithAttributes<LinkAttributes>
+  [NodeTypes.ANCHOR]: MarkResolverWithAttributes<AnchorAttributes>
   [NodeTypes.STYLED]: MarkResolverWithAttributes<StyledAttributes>
@@ -145,2 +147,3 @@ // Fallback component
   },
+  [NodeTypes.ANCHOR]: ({ text, attrs }) => h('span', attrs, text),
   [NodeTypes.STYLED]: ({ text, attrs }) => h('span', attrs, text),
@@ -147,0 +150,0 @@ // Component fallback

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

45763

decreased by-6.44%

Lines of code

962

decreased by-3.41%

Dependency changes

• + Added@marvr/storyblok-rich-text-types@3.3.1(transitive)

• - Removed@marvr/storyblok-rich-text-types@3.2.1(transitive)

• Updated@marvr/storyblok-rich-text-types@3.3.1