article-json-html-render - npm Package Compare versions

Comparing version 2.6.0 to 2.6.1

dist/block-list.js

@@ -33,11 +33,11 @@ 'use strict';
 var setup = function setup(_ref2) {
-  var Paragraph = _ref2.Paragraph;
-  var Header = _ref2.Header;
-  var Embed = _ref2.Embed;
-  var renderEmptyTextNodes = _ref2.renderEmptyTextNodes;
+  var Paragraph = _ref2.Paragraph,
+      Header = _ref2.Header,
+      Embed = _ref2.Embed,
+      renderEmptyTextNodes = _ref2.renderEmptyTextNodes;
 
   var types = {
     blockquote: function blockquote(_ref3) {
-      var children = _ref3.children;
-      var pullQuote = _ref3.pullQuote;
+      var children = _ref3.children,
+          pullQuote = _ref3.pullQuote;
       return (0, _magicVirtualElement2.default)(Blockquote, { items: children, pullQuote: pullQuote });
@@ -44,0 +44,0 @@ },

dist/components/article.js

@@ -17,6 +17,6 @@ 'use strict';
     render: function render(_ref2) {
-      var _ref2$props = _ref2.props;
-      var items = _ref2$props.items;
-      var _ref2$props$articlePr = _ref2$props.articleProps;
-      var articleProps = _ref2$props$articlePr === undefined ? {} : _ref2$props$articlePr;
+      var _ref2$props = _ref2.props,
+          items = _ref2$props.items,
+          _ref2$props$articlePr = _ref2$props.articleProps,
+          articleProps = _ref2$props$articlePr === undefined ? {} : _ref2$props$articlePr;
       return (0, _magicVirtualElement2.default)(
@@ -23,0 +23,0 @@ 'article',

dist/components/blockquote.js

@@ -17,5 +17,5 @@ 'use strict';
     render: function render(_ref2) {
-      var _ref2$props = _ref2.props;
-      var items = _ref2$props.items;
-      var pullQuote = _ref2$props.pullQuote;
+      var _ref2$props = _ref2.props,
+          items = _ref2$props.items,
+          pullQuote = _ref2$props.pullQuote;
       return (0, _magicVirtualElement2.default)(
@@ -22,0 +22,0 @@ 'blockquote',

dist/components/embed.js

@@ -27,5 +27,5 @@ 'use strict';
 var setup = function setup(_ref) {
-  var embeds = _ref.embeds;
-  var customCaption = _ref.customCaption;
-  var renderText = _ref.renderText;
+  var embeds = _ref.embeds,
+      customCaption = _ref.customCaption,
+      renderText = _ref.renderText;
 
@@ -41,6 +41,6 @@ var renderCaption = customCaption || defaultRenderCaption;
       var props = _ref3.props;
-      var embedType = props.embedType;
-      var caption = props.caption;
-      var attribution = props.attribution;
-      var figureProps = props.figureProps;
+      var embedType = props.embedType,
+          caption = props.caption,
+          attribution = props.attribution,
+          figureProps = props.figureProps;
 
@@ -47,0 +47,0 @@ var embed = embeds[embedType] && embeds[embedType](props);

dist/components/header.js

@@ -21,5 +21,5 @@ 'use strict';
     render: function render(_ref2) {
-      var _ref2$props = _ref2.props;
-      var items = _ref2$props.items;
-      var level = _ref2$props.level;
+      var _ref2$props = _ref2.props,
+          items = _ref2$props.items,
+          level = _ref2$props.level;
 
@@ -26,0 +26,0 @@ var inner = renderText(items);

dist/render-text.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -17,4 +17,4 @@ var _magicVirtualElement = require('magic-virtual-element');
 var wrapMark = function wrapMark(_ref, el) {
-  var mark = _ref.mark;
-  var markClass = _ref.markClass;
+  var mark = _ref.mark,
+      markClass = _ref.markClass;
   return mark ? (0, _magicVirtualElement2.default)(
@@ -68,2 +68,3 @@ 'mark',
         var el = String(item.content || '');
+        el = wrapMark(item, el);
         el = wrapItalic(item, el);
@@ -73,7 +74,6 @@ el = wrapBold(item, el);
         el = wrapHref(item, el);
-        el = wrapMark(item, el);
 
         customTextFormattings.forEach(function (_ref6) {
-          var property = _ref6.property;
-          var render = _ref6.render;
+          var property = _ref6.property,
+              render = _ref6.render;
 
@@ -101,8 +101,22 @@ if (item[property]) {
 
+var equalLinks = function equalLinks(el1, el2) {
+  return el1.type === 'a' && el2.type === 'a' && el1.attributes.href === el2.attributes.href;
+};
+
 exports.default = function (_ref7) {
-  var _ref7$customTextForma = _ref7.customTextFormattings;
-  var customTextFormattings = _ref7$customTextForma === undefined ? [] : _ref7$customTextForma;
+  var _ref7$customTextForma = _ref7.customTextFormattings,
+      customTextFormattings = _ref7$customTextForma === undefined ? [] : _ref7$customTextForma;
   return function (items) {
-    return items.map(setupRenderItem(customTextFormattings));
+    return items.map(setupRenderItem(customTextFormattings)).reduce(function (items, el, index) {
+      var prevEl = items[items.length - 1];
+
+      if (prevEl && equalLinks(prevEl, el)) {
+        prevEl.children = prevEl.children.concat(el.children);
+        return items;
+      }
+
+      items.push(el);
+      return items;
+    }, []);
   };
 };

dist/text.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
 var _magicVirtualElement = require('magic-virtual-element');
@@ -51,32 +53,43 @@
 
-var wrapStrikethrough = function wrapStrikethrough(_ref5, el) {
-  var strikethrough = _ref5.strikethrough;
-  return strikethrough ? (0, _magicVirtualElement2.default)(
-    's',
-    null,
-    el
-  ) : el;
-};
+var setupRenderItem = function setupRenderItem(customTextFormattings) {
+  return function (item) {
+    if (item.type === 'text') {
+      var _ret = function () {
+        var el = String(item.content || '');
+        el = wrapItalic(item, el);
+        el = wrapBold(item, el);
+        el = wrapHref(item, el);
+        el = wrapMark(item, el);
 
-var renderItem = function renderItem(item) {
-  if (item.type === 'text') {
-    var el = String(item.content || '');
-    el = wrapItalic(item, el);
-    el = wrapBold(item, el);
-    el = wrapStrikethrough(item, el);
-    el = wrapHref(item, el);
-    el = wrapMark(item, el);
+        customTextFormattings.forEach(function (_ref5) {
+          var property = _ref5.property;
+          var render = _ref5.render;
 
-    return el;
-  }
+          if (item[property]) {
+            el = render(item, el);
+          }
+        });
 
-  if (item.type === 'linebreak') {
-    return (0, _magicVirtualElement2.default)('br', null);
-  }
+        return {
+          v: el
+        };
+      }();
 
-  return '';
+      if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
+    }
+
+    if (item.type === 'linebreak') {
+      return (0, _magicVirtualElement2.default)('br', null);
+    }
+
+    return '';
+  };
 };
 
-exports.default = function (items) {
-  return items.map(renderItem);
+exports.default = function (_ref6) {
+  var _ref6$customTextForma = _ref6.customTextFormattings;
+  var customTextFormattings = _ref6$customTextForma === undefined ? [] : _ref6$customTextForma;
+  return function (items) {
+    return items.map(setupRenderItem(customTextFormattings));
+  };
 };

lib/render-text.js

@@ -17,2 +17,3 @@ import element from 'magic-virtual-element';
     let el = String(item.content || '');
+    el = wrapMark(item, el);
     el = wrapItalic(item, el);
@@ -22,3 +23,2 @@ el = wrapBold(item, el);
     el = wrapHref(item, el);
-    el = wrapMark(item, el);
 
@@ -41,2 +41,17 @@ customTextFormattings.forEach(({property, render}) => {
 
-export default ({customTextFormattings = []}) => items => items.map(setupRenderItem(customTextFormattings));
+const equalLinks = (el1, el2) =>
+  el1.type === 'a' && el2.type === 'a' && el1.attributes.href === el2.attributes.href;
+
+export default ({customTextFormattings = []}) => items => items
+  .map(setupRenderItem(customTextFormattings))
+  .reduce((items, el, index) => {
+    const prevEl = items[items.length - 1];
+
+    if (prevEl && equalLinks(prevEl, el)) {
+      prevEl.children = prevEl.children.concat(el.children);
+      return items;
+    }
+
+    items.push(el);
+    return items;
+  }, []);

package.json

 {
   "name": "article-json-html-render",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Base for html-based article-json renderer, such as [article-json-to-amp](https://www.npmjs.com/package/article-json-to-amp)",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

test.js

@@ -121,3 +121,3 @@ import test from 'tape';
 
-test('text', t => {
+test('text and it\'s formattings', t => {
   const Article = setupArticle({embeds: {}});
@@ -148,3 +148,3 @@ const items = [
       <mark>fyz</mark>
-      <mark><a href='http://mic.com'><s><b><i>faz</i></b></s></a></mark>
+      <a href='http://mic.com'><s><b><i><mark>faz</mark></i></b></s></a>
     </p>
@@ -157,2 +157,37 @@ </article>));
 
+test('text w links should use minimal amount of a-tags', t => {
+  const Article = setupArticle({embeds: {}});
+  const items = [
+    {
+      type: 'paragraph',
+      children: [
+        {type: 'text', content: 'faz', href: 'http://disney.com'},
+        {type: 'text', content: 'fez', mark: true, href: 'http://disney.com', markClass: 'hello'},
+        {type: 'text', content: 'fiz', href: 'http://disney.com'}
+      ]
+    }, {
+      type: 'paragraph',
+      children: [
+        {type: 'text', content: 'faz', href: 'http://foo.com'},
+        {type: 'text', content: 'fez', mark: true, href: 'http://bar.com', markClass: 'hello'},
+        {type: 'text', content: 'fiz', href: 'http://disney.com'}
+      ]
+    }
+  ];
+  const actual = renderString(tree(<Article items={items} />));
+  const expected = renderString(tree(<article>
+    <p>
+      <a href='http://disney.com'>faz<mark class='hello'>fez</mark>fiz</a>
+    </p>
+    <p>
+      <a href='http://foo.com'>faz</a>
+      <a href='http://bar.com'><mark class='hello'>fez</mark></a>
+      <a href='http://disney.com'>fiz</a>
+    </p>
+  </article>));
+
+  t.equal(actual, expected);
+  t.end();
+});
+
 test('text with no content', t => {
@@ -585,7 +620,5 @@ const Article = setupArticle({embeds: {}});
       <span style='text-decoration: underline;'>
-        <mark>
-          <a href='http://mic.com'>
-            <s><b><i>content</i></b></s>
-          </a>
-        </mark>
+        <a href='http://mic.com'><s><b><i><mark>
+          content
+        </mark></i></b></s></a>
       </span>
@@ -592,0 +625,0 @@ </p>

No alert changes

Improved metrics

Total package byte prevSize

41718

increased by8.28%

Number of package files

27

increased by3.85%

Lines of code

1205

increased by7.21%

No dependency changes