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

Comparing version 2.6.1 to 2.7.0

dist/index.js

@@ -27,2 +27,6 @@ 'use strict';
 
+var _html = require('./html');
+
+var _html2 = _interopRequireDefault(_html);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,3 +40,3 @@
       Embed: (0, _embed2.default)({
-        embeds: opts.embeds,
+        embeds: opts.embeds || {},
         customCaption: opts.customCaption,
@@ -48,2 +52,3 @@ renderText: renderText
 
+setup.html = (0, _html2.default)(setup);
 module.exports = setup;

dist/text.js

@@ -7,8 +7,6 @@ '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 _react = require('react');
 
-var _magicVirtualElement = require('magic-virtual-element');
+var _react2 = _interopRequireDefault(_react);
 
-var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,5 +17,5 @@
   var markClass = _ref.markClass;
-  return mark ? (0, _magicVirtualElement2.default)(
+  return mark ? _react2.default.createElement(
     'mark',
-    { 'class': markClass || null },
+    { className: markClass || null },
     el
@@ -29,3 +27,3 @@ ) : el;
   var href = _ref2.href;
-  return href ? (0, _magicVirtualElement2.default)(
+  return href ? _react2.default.createElement(
     'a',
@@ -39,3 +37,3 @@ { href: href },
   var bold = _ref3.bold;
-  return bold ? (0, _magicVirtualElement2.default)(
+  return bold ? _react2.default.createElement(
     'b',
@@ -49,3 +47,3 @@ null,
   var italic = _ref4.italic;
-  return italic ? (0, _magicVirtualElement2.default)(
+  return italic ? _react2.default.createElement(
     'i',
@@ -57,43 +55,43 @@ null,
 
-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);
+wrapMark.propTypes = {
+  mark: _react2.default.PropTypes.bool,
+  markClass: _react2.default.PropTypes.string
+};
 
-        customTextFormattings.forEach(function (_ref5) {
-          var property = _ref5.property;
-          var render = _ref5.render;
+wrapHref.propTypes = {
+  href: _react2.default.PropTypes.string
+};
 
-          if (item[property]) {
-            el = render(item, el);
-          }
-        });
+wrapBold.propTypes = {
+  bold: _react2.default.PropTypes.bool
+};
 
-        return {
-          v: el
-        };
-      }();
+wrapItalic.propTypes = {
+  italic: _react2.default.PropTypes.bool
+};
 
-      if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
-    }
+var renderItem = function renderItem(item, index) {
+  if (item.type === 'text') {
+    var el = String(item.content || '');
+    el = wrapItalic(item, el);
+    el = wrapBold(item, el);
+    el = wrapHref(item, el);
+    el = wrapMark(item, el);
 
-    if (item.type === 'linebreak') {
-      return (0, _magicVirtualElement2.default)('br', null);
+    if (_react2.default.isValidElement(el)) {
+      el = _react2.default.cloneElement(el, { key: index });
     }
 
-    return '';
-  };
+    return el;
+  }
+
+  if (item.type === 'linebreak') {
+    return _react2.default.createElement('br', { key: index });
+  }
+
+  return '';
 };
 
-exports.default = function (_ref6) {
-  var _ref6$customTextForma = _ref6.customTextFormattings;
-  var customTextFormattings = _ref6$customTextForma === undefined ? [] : _ref6$customTextForma;
-  return function (items) {
-    return items.map(setupRenderItem(customTextFormattings));
-  };
+exports.default = function (items) {
+  return items.map(renderItem);
 };

lib/index.js

@@ -7,2 +7,3 @@ import setupArticle from './components/article';
 import setupParagraph from './components/paragraph';
+import createHtmlRender from './html';
 
@@ -15,3 +16,3 @@ const setup = opts => {
       Embed: setupEmbed({
-        embeds: opts.embeds,
+        embeds: opts.embeds || {},
         customCaption: opts.customCaption,
@@ -27,2 +28,3 @@ renderText
 
+setup.html = createHtmlRender(setup);
 module.exports = setup;

package.json

 {
   "name": "article-json-html-render",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Base for html-based article-json renderer, such as [article-json-to-amp](https://www.npmjs.com/package/article-json-to-amp)",
   "main": "dist/index.js",
   "scripts": {
-    "test": "semistandard | snazzy && babel-tape-runner test.js | faucet",
+    "test": "npm run lint && babel-tape-runner test.js | faucet",
     "coverage:check": "nyc babel-tape-runner test.js",
     "coverage:open": "npm run coverage:check && nyc report --reporter=lcov && open coverage/lcov-report/index.html",
-    "prepublish": "mkdir -p dist && babel lib --out-dir dist",
+    "prepublish": "npm run build",
+    "lint": "semistandard | snazzy",
+    "build": "mkdir -p dist && babel lib --out-dir dist",
     "posttest": "readme package.json > readme.md"
@@ -12,0 +14,0 @@ },

readme.md

@@ -13,3 +13,27 @@ # article-json-html-render
 
+## Usage
 
+```js
+import setupArticle from 'article-json-html-render';
+import {element, string} from 'deku';
+
+const items = [
+  {type: 'paragraph', children: [{content: 'foo'}]},
+  {type: 'embed', embedType: 'image', src: 'http://example.com/image.jpg'}
+];
+
+// Render into Deku component tree
+const Article = setupArticle({
+  embeds: {
+    image: embed => <img src={embed.src} />
+  }
+});
+
+console.log(string.render(<Article items={items} />));
+
+// Render into html
+const renderHtml = setupArticle.html();
+console.log(renderHtml(items));
+```
+
 ## Tests
@@ -16,0 +40,0 @@

test.js

@@ -641,1 +641,26 @@ import test from 'tape';
 });
+
+test('render plain html with no embeds', t => {
+  t.plan(1);
+
+  const htmlRender = setupArticle.html();
+  const items = [{
+    type: 'paragraph',
+    children: [{
+      type: 'text',
+      content: 'Text'
+    }]
+  }, {
+    type: 'embed',
+    embedType: 'twitter',
+    id: 'twitter-id'
+  }];
+  const expected = renderString(tree(
+    <article><p>Text</p></article>
+  ));
+  const actual = htmlRender(items);
+
+  t.equal(actual, expected);
+
+  t.end();
+});

usage.js

 import setupArticle from 'article-json-html-render';
+import setupArticleToHtml from 'article-json-html-render/html';
 import {element, string} from 'deku';
 
+const items = [
+  {type: 'paragraph', children: [{content: 'foo'}]},
+  {type: 'embed', embedType: 'image', src: 'http://example.com/image.jpg'}
+];
+
+// Render into Deku component tree
 const Article = setupArticle({
@@ -10,7 +17,6 @@ embeds: {
 
-const items = [
-  {type: 'paragraph', children: [{content: 'foo'}]},
-  {type: 'embed', embedType: 'image', src: 'http://example.com/image.jpg'}
-];
+console.log(string.render(<Article items={items} />));
 
-console.log(string.render(<Article items={items} />));
+// Render into html
+const renderHtml = setupArticleToHtml();
+console.log(renderHtml(items));

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43660

increased by4.66%

Number of package files

30

increased by11.11%

Lines of code

1261

increased by4.65%

Number of lines in readme file

70

increased by52.17%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes