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

Comparing version 2.2.0 to 3.0.0

dist/block-list.js

@@ -7,6 +7,12 @@ 'use strict';
 
-var _magicVirtualElement = require('magic-virtual-element');
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
+var _lodash = require('lodash.startswith');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 var _paragraph = require('./components/paragraph');
@@ -24,6 +30,2 @@
 
-var _lodash = require('lodash.startswith');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,44 +49,45 @@
   var types = {
-    blockquote: function blockquote(_ref3) {
+    blockquote: function blockquote(_ref3, index) {
       var children = _ref3.children;
-      return (0, _magicVirtualElement2.default)(Blockquote, { items: children });
+      return _react2.default.createElement(Blockquote, { key: index, items: children });
     },
-    embed: function embed(item) {
-      return Embed.test(item) ? (0, _magicVirtualElement2.default)(Embed, item) : '';
+    embed: function embed(item, index) {
+      var EmbedComponent = Embed.component;
+      return Embed.test(item) ? _react2.default.createElement(EmbedComponent, _extends({ key: index }, item)) : '';
     },
-    header1: function header1(_ref4) {
+    header1: function header1(_ref4, index) {
       var children = _ref4.children;
-      return (0, _magicVirtualElement2.default)(_header2.default, { level: 1, items: children });
+      return _react2.default.createElement(_header2.default, { key: index, level: 1, items: children });
     },
-    header2: function header2(_ref5) {
+    header2: function header2(_ref5, index) {
       var children = _ref5.children;
-      return (0, _magicVirtualElement2.default)(_header2.default, { level: 2, items: children });
+      return _react2.default.createElement(_header2.default, { key: index, level: 2, items: children });
     },
-    header3: function header3(_ref6) {
+    header3: function header3(_ref6, index) {
       var children = _ref6.children;
-      return (0, _magicVirtualElement2.default)(_header2.default, { level: 3, items: children });
+      return _react2.default.createElement(_header2.default, { key: index, level: 3, items: children });
     },
-    header4: function header4(_ref7) {
+    header4: function header4(_ref7, index) {
       var children = _ref7.children;
-      return (0, _magicVirtualElement2.default)(_header2.default, { level: 4, items: children });
+      return _react2.default.createElement(_header2.default, { key: index, level: 4, items: children });
     },
-    header5: function header5(_ref8) {
+    header5: function header5(_ref8, index) {
       var children = _ref8.children;
-      return (0, _magicVirtualElement2.default)(_header2.default, { level: 5, items: children });
+      return _react2.default.createElement(_header2.default, { key: index, level: 5, items: children });
     },
-    header6: function header6(_ref9) {
+    header6: function header6(_ref9, index) {
       var children = _ref9.children;
-      return (0, _magicVirtualElement2.default)(_header2.default, { level: 6, items: children });
+      return _react2.default.createElement(_header2.default, { key: index, level: 6, items: children });
     },
-    paragraph: function paragraph(_ref10) {
+    paragraph: function paragraph(_ref10, index) {
       var children = _ref10.children;
-      return (0, _magicVirtualElement2.default)(_paragraph2.default, { items: children });
+      return _react2.default.createElement(_paragraph2.default, { key: index, items: children });
     }
   };
 
-  var blockList = function blockList(items) {
-    return items.map(renderItem);
+  types.blockquote.propTypes = types.header1.propTypes = types.header2.propTypes = types.header3.propTypes = types.header4.propTypes = types.header5.propTypes = types.header6.propTypes = types.paragraph.propTypes = {
+    children: _react2.default.PropTypes.array.isRequired
   };
-  var Blockquote = (0, _blockquote2.default)({ blockList: blockList });
-  var renderItem = function renderItem(item) {
+
+  function renderItem(item, index) {
     var type = item.type;
@@ -97,4 +100,9 @@
 
-    return typeFn(item);
+    return typeFn(item, index);
+  }
+
+  var blockList = function blockList(items) {
+    return items.map(renderItem);
   };
+  var Blockquote = (0, _blockquote2.default)({ blockList: blockList });
 
@@ -101,0 +109,0 @@ return blockList;

dist/components/article.js

@@ -7,22 +7,28 @@ 'use strict';
 
-var _magicVirtualElement = require('magic-virtual-element');
+var _react = require('react');
 
-var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
+var _react2 = _interopRequireDefault(_react);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var setup = function setup(_ref) {
+function setupArticle(_ref) {
   var blockList = _ref.blockList;
-  return {
-    render: function render(_ref2) {
-      var items = _ref2.props.items;
-      return (0, _magicVirtualElement2.default)(
-        'article',
-        null,
-        blockList(items)
-      );
-    }
+
+  function makeArticle(_ref2) {
+    var items = _ref2.items;
+
+    return _react2.default.createElement(
+      'article',
+      null,
+      blockList(items)
+    );
+  }
+
+  makeArticle.propTypes = {
+    items: _react2.default.PropTypes.array.isRequired
   };
-};
 
-exports.default = setup;
+  return makeArticle;
+}
+
+exports.default = setupArticle;

dist/components/blockquote.js

@@ -7,22 +7,28 @@ 'use strict';
 
-var _magicVirtualElement = require('magic-virtual-element');
+var _react = require('react');
 
-var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
+var _react2 = _interopRequireDefault(_react);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var setup = function setup(_ref) {
+function setupBlockquote(_ref) {
   var blockList = _ref.blockList;
-  return {
-    render: function render(_ref2) {
-      var items = _ref2.props.items;
-      return (0, _magicVirtualElement2.default)(
-        'blockquote',
-        null,
-        blockList(items)
-      );
-    }
+
+  function makeBlockquote(_ref2) {
+    var items = _ref2.items;
+
+    return _react2.default.createElement(
+      'blockquote',
+      null,
+      blockList(items)
+    );
+  }
+
+  makeBlockquote.propTypes = {
+    items: _react2.default.PropTypes.array.isRequired
   };
-};
 
-exports.default = setup;
+  return makeBlockquote;
+}
+
+exports.default = setupBlockquote;

dist/components/embed.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var _magicVirtualElement = require('magic-virtual-element');
+var _react = require('react');
 
-var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
+var _react2 = _interopRequireDefault(_react);
 
@@ -19,11 +19,17 @@ var _text = require('../text');
 var defaultRenderCaption = function defaultRenderCaption(text, attribution) {
-  var attributionEl = attribution.length > 0 ? (0, _magicVirtualElement2.default)(
+  var attributionEl = attribution.length > 0 ? _react2.default.createElement(
     'cite',
-    null,
+    { key: 'cite' },
     attribution
   ) : '';
-  return (0, _magicVirtualElement2.default)(
+  return _react2.default.createElement(
     'figcaption',
     null,
-    text.concat([attributionEl])
+    text.map(function (el, index) {
+      if (_react2.default.isValidElement(el)) {
+        return _react2.default.cloneElement(el, { key: 'attr' + index });
+      }
+
+      return el;
+    }).concat([attributionEl])
   );
@@ -38,2 +44,30 @@ };
 
+  function makeEmbed(props) {
+    var embedType = props.embedType;
+    var caption = props.caption;
+    var attribution = props.attribution;
+    var _props$figureProps = props.figureProps;
+    var figureProps = _props$figureProps === undefined ? {} : _props$figureProps;
+
+    var embed = embeds[embedType] && embeds[embedType](props);
+    var captionText = (0, _text2.default)(caption || []);
+    var attributionText = (0, _text2.default)(attribution || []);
+
+    var captionElm = captionText.length > 0 || attributionText.length > 0 ? renderCaption(captionText, attributionText) : '';
+
+    return _react2.default.createElement(
+      'figure',
+      figureProps,
+      embed,
+      captionElm
+    );
+  }
+
+  makeEmbed.propTypes = {
+    embedType: _react2.default.PropTypes.string.isRequired,
+    caption: _react2.default.PropTypes.array,
+    attribution: _react2.default.PropTypes.array,
+    figureProps: _react2.default.PropTypes.object
+  };
+
   return {
@@ -44,22 +78,3 @@ test: function test(_ref2) {
     },
-    render: function render(_ref3) {
-      var props = _ref3.props;
-      var embedType = props.embedType;
-      var caption = props.caption;
-      var attribution = props.attribution;
-      var figureProps = props.figureProps;
-
-      var embed = embeds[embedType] && embeds[embedType](props);
-      var captionText = (0, _text2.default)(caption || []);
-      var attributionText = (0, _text2.default)(attribution || []);
-
-      var captionElm = captionText.length > 0 || attributionText.length > 0 ? renderCaption(captionText, attributionText) : '';
-
-      return (0, _magicVirtualElement2.default)(
-        'figure',
-        figureProps,
-        embed,
-        captionElm
-      );
-    }
+    component: makeEmbed
   };
@@ -66,0 +81,0 @@ };

dist/components/header.js

@@ -7,6 +7,10 @@ 'use strict';
 
-var _magicVirtualElement = require('magic-virtual-element');
+var _react = require('react');
 
-var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
+var _react2 = _interopRequireDefault(_react);
 
+var _assert = require('assert');
+
+var _assert2 = _interopRequireDefault(_assert);
+
 var _text = require('../text');
@@ -16,12 +20,7 @@
 
-var _assert = require('assert');
-
-var _assert2 = _interopRequireDefault(_assert);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var render = function render(_ref) {
-  var _ref$props = _ref.props;
-  var items = _ref$props.items;
-  var level = _ref$props.level;
+  var items = _ref.items;
+  var level = _ref.level;
 
@@ -34,3 +33,3 @@ var inner = (0, _text2.default)(items);
     case 1:
-      return (0, _magicVirtualElement2.default)(
+      return _react2.default.createElement(
         'h1',
@@ -41,3 +40,3 @@ null,
     case 2:
-      return (0, _magicVirtualElement2.default)(
+      return _react2.default.createElement(
         'h2',
@@ -48,3 +47,3 @@ null,
     case 3:
-      return (0, _magicVirtualElement2.default)(
+      return _react2.default.createElement(
         'h3',
@@ -55,3 +54,3 @@ null,
     case 4:
-      return (0, _magicVirtualElement2.default)(
+      return _react2.default.createElement(
         'h4',
@@ -62,3 +61,3 @@ null,
     case 5:
-      return (0, _magicVirtualElement2.default)(
+      return _react2.default.createElement(
         'h5',
@@ -69,3 +68,3 @@ null,
     case 6:
-      return (0, _magicVirtualElement2.default)(
+      return _react2.default.createElement(
         'h6',
@@ -75,5 +74,12 @@ null,
       );
+    default:
+      return '';
   }
 };
 
-exports.default = { render: render };
+render.propTypes = {
+  items: _react2.default.PropTypes.array.isRequired,
+  level: _react2.default.PropTypes.number.isRequired
+};
+
+exports.default = render;

dist/components/paragraph.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var _magicVirtualElement = require('magic-virtual-element');
+var _react = require('react');
 
-var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
+var _react2 = _interopRequireDefault(_react);
 
@@ -19,4 +19,4 @@ var _text = require('../text');
 var render = function render(_ref) {
-  var items = _ref.props.items;
-  return (0, _magicVirtualElement2.default)(
+  var items = _ref.items;
+  return _react2.default.createElement(
     'p',
@@ -28,2 +28,6 @@ null,
 
-exports.default = { render: render };
+render.propTypes = {
+  items: _react2.default.PropTypes.array.isRequired
+};
+
+exports.default = render;

dist/text.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var _magicVirtualElement = require('magic-virtual-element');
+var _react = require('react');
 
-var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
+var _react2 = _interopRequireDefault(_react);
 
@@ -17,5 +17,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   var markClass = _ref.markClass;
-  return mark ? (0, _magicVirtualElement2.default)(
+  return mark ? _react2.default.createElement(
     'mark',
-    { 'class': markClass || null },
+    { className: markClass || null },
     el
@@ -27,3 +27,3 @@ ) : el;
   var href = _ref2.href;
-  return href ? (0, _magicVirtualElement2.default)(
+  return href ? _react2.default.createElement(
     'a',
@@ -37,3 +37,3 @@ { href: href },
   var bold = _ref3.bold;
-  return bold ? (0, _magicVirtualElement2.default)(
+  return bold ? _react2.default.createElement(
     'b',
@@ -47,3 +47,3 @@ null,
   var italic = _ref4.italic;
-  return italic ? (0, _magicVirtualElement2.default)(
+  return italic ? _react2.default.createElement(
     'i',
@@ -55,3 +55,20 @@ null,
 
-var renderItem = function renderItem(item) {
+wrapMark.propTypes = {
+  mark: _react2.default.PropTypes.bool,
+  markClass: _react2.default.PropTypes.string
+};
+
+wrapHref.propTypes = {
+  href: _react2.default.PropTypes.string
+};
+
+wrapBold.propTypes = {
+  bold: _react2.default.PropTypes.bool
+};
+
+wrapItalic.propTypes = {
+  italic: _react2.default.PropTypes.bool
+};
+
+var renderItem = function renderItem(item, index) {
   if (item.type === 'text') {
@@ -64,2 +81,6 @@ var el = String(item.content || '');
 
+    if (_react2.default.isValidElement(el)) {
+      el = _react2.default.cloneElement(el, { key: index });
+    }
+
     return el;
@@ -69,3 +90,3 @@ }
   if (item.type === 'linebreak') {
-    return (0, _magicVirtualElement2.default)('br', null);
+    return _react2.default.createElement('br', { key: index });
   }
@@ -72,0 +93,0 @@

lib/block-list.js

@@ -1,30 +0,42 @@
-import element from 'magic-virtual-element';
+import React from 'react';
+import startswith from 'lodash.startswith';
 import Paragraph from './components/paragraph';
 import setupBlockquote from './components/blockquote';
 import Header from './components/header';
-import startswith from 'lodash.startswith';
 
 const isText = type => type === 'paragraph' || startswith(type, 'header');
 
-const hasContent = ({children}) =>
-  children.some(child => child.type !== 'linebreak' &&
-    (child.content && child.content.trim()) || child.mark);
+const hasContent = ({ children }) =>
+  children.some(child => (child.type !== 'linebreak' &&
+    (child.content && child.content.trim())) || child.mark);
 
-const setup = ({Embed, renderEmptyTextNodes}) => {
+const setup = ({ Embed, renderEmptyTextNodes }) => {
   const types = {
-    blockquote: ({children}) => <Blockquote items={children} />,
-    embed: item => Embed.test(item) ? <Embed {...item} /> : '',
-    header1: ({children}) => <Header level={1} items={children} />,
-    header2: ({children}) => <Header level={2} items={children} />,
-    header3: ({children}) => <Header level={3} items={children} />,
-    header4: ({children}) => <Header level={4} items={children} />,
-    header5: ({children}) => <Header level={5} items={children} />,
-    header6: ({children}) => <Header level={6} items={children} />,
-    paragraph: ({children}) => <Paragraph items={children} />
+    blockquote: ({ children }, index) => <Blockquote key={index} items={children} />,
+    embed: (item, index) => {
+      const EmbedComponent = Embed.component;
+      return Embed.test(item) ? <EmbedComponent key={index} {...item} /> : '';
+    },
+    header1: ({ children }, index) => <Header key={index} level={1} items={children} />,
+    header2: ({ children }, index) => <Header key={index} level={2} items={children} />,
+    header3: ({ children }, index) => <Header key={index} level={3} items={children} />,
+    header4: ({ children }, index) => <Header key={index} level={4} items={children} />,
+    header5: ({ children }, index) => <Header key={index} level={5} items={children} />,
+    header6: ({ children }, index) => <Header key={index} level={6} items={children} />,
+    paragraph: ({ children }, index) => <Paragraph key={index} items={children} />
   };
 
-  const blockList = items => items.map(renderItem);
-  const Blockquote = setupBlockquote({blockList});
-  const renderItem = item => {
-    const {type} = item;
+  types.blockquote.propTypes =
+  types.header1.propTypes =
+  types.header2.propTypes =
+  types.header3.propTypes =
+  types.header4.propTypes =
+  types.header5.propTypes =
+  types.header6.propTypes =
+  types.paragraph.propTypes = {
+    children: React.PropTypes.array.isRequired
+  };
+
+  function renderItem(item, index) {
+    const { type } = item;
     const typeFn = types[type];
@@ -35,5 +47,8 @@ if (!typeFn || (!renderEmptyTextNodes && isText(type) && !hasContent(item))) {
 
-    return typeFn(item);
-  };
+    return typeFn(item, index);
+  }
 
+  const blockList = items => items.map(renderItem);
+  const Blockquote = setupBlockquote({ blockList });
+
   return blockList;
@@ -40,0 +55,0 @@ };

lib/components/article.js

@@ -1,7 +0,15 @@
-import element from 'magic-virtual-element';
+import React from 'react';
 
-const setup = ({blockList}) => ({
-  render: ({props: {items}}) => <article>{blockList(items)}</article>
-});
+function setupArticle({ blockList }) {
+  function makeArticle({ items }) {
+    return <article>{blockList(items)}</article>;
+  }
 
-export default setup;
+  makeArticle.propTypes = {
+    items: React.PropTypes.array.isRequired
+  };
+
+  return makeArticle;
+}
+
+export default setupArticle;

lib/components/blockquote.js

@@ -1,7 +0,15 @@
-import element from 'magic-virtual-element';
+import React from 'react';
 
-const setup = ({blockList}) => ({
-  render: ({props: {items}}) => <blockquote>{blockList(items)}</blockquote>
-});
+function setupBlockquote({ blockList }) {
+  function makeBlockquote({ items }) {
+    return <blockquote>{blockList(items)}</blockquote>;
+  }
 
-export default setup;
+  makeBlockquote.propTypes = {
+    items: React.PropTypes.array.isRequired
+  };
+
+  return makeBlockquote;
+}
+
+export default setupBlockquote;

lib/components/embed.js

@@ -1,31 +0,46 @@
-import element from 'magic-virtual-element';
+import React from 'react';
 import renderText from '../text';
 
 const defaultRenderCaption = (text, attribution) => {
-  const attributionEl = attribution.length > 0 ? <cite>{attribution}</cite> : '';
+  const attributionEl = attribution.length > 0 ? <cite key='cite'>{attribution}</cite> : '';
   return (<figcaption>
-    {text.concat([attributionEl])}
+    {text.map((el, index) => {
+      if (React.isValidElement(el)) {
+        return React.cloneElement(el, { key: `attr${index}` });
+      }
+
+      return el;
+    }).concat([attributionEl])}
   </figcaption>);
 };
 
-const setup = ({embeds, customCaption}) => {
+const setup = ({ embeds, customCaption }) => {
   const renderCaption = customCaption || defaultRenderCaption;
 
-  return {
-    test: ({embedType}) => embeds[embedType],
-    render: ({props}) => {
-      const {embedType, caption, attribution, figureProps} = props;
-      const embed = embeds[embedType] && embeds[embedType](props);
-      const captionText = renderText(caption || []);
-      const attributionText = renderText(attribution || []);
+  function makeEmbed(props) {
+    const { embedType, caption, attribution, figureProps = {} } = props;
+    const embed = embeds[embedType] && embeds[embedType](props);
+    const captionText = renderText(caption || []);
+    const attributionText = renderText(attribution || []);
 
-      const captionElm = (captionText.length > 0 || attributionText.length > 0)
-        ? renderCaption(captionText, attributionText)
-        : '';
+    const captionElm = (captionText.length > 0 || attributionText.length > 0)
+      ? renderCaption(captionText, attributionText)
+      : '';
 
-      return <figure {...figureProps}>{embed}{captionElm}</figure>;
-    }
+    return <figure {...figureProps}>{embed}{captionElm}</figure>;
+  }
+
+  makeEmbed.propTypes = {
+    embedType: React.PropTypes.string.isRequired,
+    caption: React.PropTypes.array,
+    attribution: React.PropTypes.array,
+    figureProps: React.PropTypes.object
   };
+
+  return {
+    test: ({ embedType }) => embeds[embedType],
+    component: makeEmbed
+  };
 };
 
 export default setup;

lib/components/header.js

@@ -1,6 +0,6 @@
-import element from 'magic-virtual-element';
+import React from 'react';
+import assert from 'assert';
 import text from '../text';
-import assert from 'assert';
 
-const render = ({props: {items, level}}) => {
+const render = ({ items, level }) => {
   const inner = text(items);
@@ -17,5 +17,11 @@
     case 6: return <h6>{inner}</h6>;
+    default: return '';
   }
 };
 
-export default {render};
+render.propTypes = {
+  items: React.PropTypes.array.isRequired,
+  level: React.PropTypes.number.isRequired
+};
+
+export default render;

lib/components/paragraph.js

@@ -1,6 +0,10 @@
-import element from 'magic-virtual-element';
+import React from 'react';
 import text from '../text';
 
-const render = ({props: {items}}) => <p>{text(items)}</p>;
+const render = ({ items }) => <p>{text(items)}</p>;
 
-export default {render};
+render.propTypes = {
+  items: React.PropTypes.array.isRequired
+};
+
+export default render;

lib/text.js

@@ -1,13 +0,30 @@
-import element from 'magic-virtual-element';
+import React from 'react';
 
-const wrapMark = ({mark, markClass}, el) =>
-  mark ? <mark class={markClass || null}>{el}</mark> : el;
+const wrapMark = ({ mark, markClass }, el) =>
+  (mark ? <mark className={markClass || null}>{el}</mark> : el);
 
-const wrapHref = ({href}, el) => href ? <a href={href}>{el}</a> : el;
+const wrapHref = ({ href }, el) => (href ? <a href={href}>{el}</a> : el);
 
-const wrapBold = ({bold}, el) => bold ? <b>{el}</b> : el;
+const wrapBold = ({ bold }, el) => (bold ? <b>{el}</b> : el);
 
-const wrapItalic = ({italic}, el) => italic ? <i>{el}</i> : el;
+const wrapItalic = ({ italic }, el) => (italic ? <i>{el}</i> : el);
 
-const renderItem = (item) => {
+wrapMark.propTypes = {
+  mark: React.PropTypes.bool,
+  markClass: React.PropTypes.string
+};
+
+wrapHref.propTypes = {
+  href: React.PropTypes.string
+};
+
+wrapBold.propTypes = {
+  bold: React.PropTypes.bool
+};
+
+wrapItalic.propTypes = {
+  italic: React.PropTypes.bool
+};
+
+const renderItem = (item, index) => {
   if (item.type === 'text') {
@@ -20,2 +37,6 @@ let el = String(item.content || '');
 
+    if (React.isValidElement(el)) {
+      el = React.cloneElement(el, { key: index });
+    }
+
     return el;
@@ -25,3 +46,3 @@ }
   if (item.type === 'linebreak') {
-    return <br/>;
+    return <br key={index} />;
   }
@@ -28,0 +49,0 @@

package.json

 {
   "name": "article-json-html-render",
-  "version": "2.2.0",
+  "version": "3.0.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",
+    "lint": "miclint | snazzy",
+    "test": "npm run lint && babel-tape-runner test/test.js",
     "coverage:check": "nyc babel-tape-runner test.js",
@@ -28,7 +29,7 @@ "coverage:open": "npm run coverage:check && nyc report --reporter=lcov && open coverage/lcov-report/index.html",
     "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.11.1",
     "babel-tape-runner": "^2.0.0",
-    "deku": "^1.0.0",
-    "faucet": "0.0.1",
+    "miclint": "^1.0.0",
     "package-json-to-readme": "^1.5.0",
-    "semistandard-deku": "micnews/semistandard#deku",
+    "react-dom": "^15.3.0",
     "snazzy": "^4.0.0",
@@ -39,4 +40,4 @@ "tape": "^4.4.0"
     "lodash.startswith": "^4.0.0",
-    "magic-virtual-element": "^1.0.6"
+    "react": "^15.3.0"
   }
 }

readme.md

@@ -24,3 +24,4 @@ # article-json-html-render
 - [lodash.startswith](https://github.com/lodash/lodash): The lodash method `_.startsWith` exported as a module.
-- [magic-virtual-element](https://github.com/dekujs/magic-virtual-element): Build virtual tree elements with magic attributes
+- [miclint](https://github.com/micnews/miclint): mic lint cli
+- [react](https://github.com/facebook/react): React is a JavaScript library for building user interfaces.
 
@@ -33,7 +34,9 @@ ## Dev Dependencies
 - [babel-preset-es2015](https://github.com/babel/babel/tree/master/packages): Babel preset for all es2015 plugins.
+- [babel-preset-react](https://github.com/babel/babel/tree/master/packages): Babel preset for all React plugins.
 - [babel-tape-runner](https://github.com/wavded/babel-tape-runner): Babel + Tape for running your ES Next tests
 - [deku](https://github.com/dekujs/deku): Create view components using a virtual DOM
 - [faucet](https://github.com/substack/faucet): human-readable TAP summarizer
+- [miclint](https://github.com/micnews/miclint): mic lint cli
 - [package-json-to-readme](https://github.com/zeke/package-json-to-readme): Generate a README.md from package.json contents
-- [semistandard-deku](https://github.com/micnews/semistandard-deku): All the goodness of `feross/standard` with semicolons sprinkled on top. Adapted for deku
+- [react-dom](https://github.com/facebook/react): React package for working with the DOM.
 - [snazzy](https://github.com/feross/snazzy): Format JavaScript Standard Style as Stylish (i.e. snazzy) output
@@ -40,0 +43,0 @@ - [tape](https://github.com/substack/tape): tap-producing test harness for node and browsers

usage.js

@@ -0,7 +1,16 @@
+/* eslint-disable  */
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import setupArticle from 'article-json-html-render';
-import {element, string} from 'deku';
 
+const makeImage = embed => <img src={embed.src} />;
+
+makeImage.propTypes = {
+  src: React.PropTypes.string.isRequired
+};
+
 const Article = setupArticle({
   embeds: {
-    image: embed => <img src={embed.src} />
+    image: makeImage
   }
@@ -11,6 +20,6 @@ });
 const items = [
-  {type: 'paragraph', children: [{content: 'foo'}]},
-  {type: 'embed', embedType: 'image', src: 'http://example.com/image.jpg'}
+  { type: 'paragraph', children: [{content: 'foo'}] },
+  { type: 'embed', embedType: 'image', src: 'http://example.com/image.jpg' }
 ];
 
-console.log(string.render(<Article items={items} />));
+console.log(renderToStaticMarkup(<Article items={items} />));

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34096

increased by13.99%

Lines of code

972

increased by16.27%

Number of lines in readme file

49

increased by6.52%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedreact@^15.3.0

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.37(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedmagic-virtual-element@^1.0.6

• - Removedarray-flatten@1.1.1(transitive)

• - Removedclassnames@2.5.1(transitive)

• - Removedcomponent-type@1.1.0(transitive)

• - Removedmagic-virtual-element@1.0.6(transitive)

• - Removedsliced@0.0.51.0.1(transitive)

• - Removedto-style@1.3.3(transitive)

• - Removedvirtual-element@1.2.0(transitive)