react-markdown - npm Package Compare versions

Comparing version 2.4.6 to 2.5.0

CHANGELOG.md

@@ -5,6 +5,12 @@ # Change Log
 
-## [2.4.6] - 2017-03-14
+## 2.5.0 - 2017-04-10
 
 ### Changes
 
+- Fix deprecations for React v15.5 (Renée Kooi)
+
+## 2.4.6 - 2017-03-14
+
+### Changes
+
 - Fix too strict TypeScript definition (Rasmus Eneman)
@@ -17,3 +23,3 @@ - Update JSON-loader info in readme to match webpack 2 (Robin Wieruch)
 
-## [2.4.4] - 2017-01-16
+## 2.4.4 - 2017-01-16
 
@@ -24,3 +30,3 @@ ### Changes
 
-## [2.4.3] - 2017-01-12
+## 2.4.3 - 2017-01-12
 
@@ -31,3 +37,3 @@ ### Added
 
-## [2.4.2] - 2016-07-09
+## 2.4.2 - 2016-07-09
 
@@ -38,3 +44,3 @@ ### Added
 
-## [2.4.1] - 2016-07-09
+## 2.4.1 - 2016-07-09
 
@@ -45,3 +51,3 @@ ### Changes
 
-## [2.4.0] - 2016-07-09
+## 2.4.0 - 2016-07-09
 
@@ -56,3 +62,3 @@ ### Changes
 
-## [2.3.0] - 2016-06-06
+## 2.3.0 - 2016-06-06
 
@@ -63,11 +69,11 @@ ## Added
 
-## [2.2.0] - 2016-04-20
+## 2.2.0 - 2016-04-20
 
 - Add `childBefore`/`childAfter` options (Thomas Lindstrøm)
 
-## [2.1.1] - 2016-03-25
+## 2.1.1 - 2016-03-25
 
 - Add `containerProps` option (Thomas Lindstrøm)
 
-## [2.1.0] - 2016-03-12
+## 2.1.0 - 2016-03-12
 
@@ -78,3 +84,3 @@ ### Changes
 
-## [2.0.1] - 2016-02-21
+## 2.0.1 - 2016-02-21
 
@@ -85,3 +91,3 @@ ### Changed
 
-## [2.0.0] - 2016-02-21
+## 2.0.0 - 2016-02-21
 
@@ -102,3 +108,3 @@ ### Changed
 
-## [1.2.4] - 2016-01-28
+## 1.2.4 - 2016-01-28
 
@@ -109,3 +115,3 @@ ### Changed
 
-## [1.2.3] - 2016-01-24
+## 1.2.3 - 2016-01-24
 
@@ -116,3 +122,3 @@ ### Changed
 
-## [1.2.2] - 2016-01-08
+## 1.2.2 - 2016-01-08
 
@@ -123,3 +129,3 @@ ### Changed
 
-## [1.2.1] - 2015-12-29
+## 1.2.1 - 2015-12-29
 
@@ -130,3 +136,3 @@ ### Fixed
 
-## [1.2.0] - 2015-12-16
+## 1.2.0 - 2015-12-16
 
@@ -137,3 +143,3 @@ ### Added
 
-## [1.1.4] - 2015-12-14
+## 1.1.4 - 2015-12-14
 
@@ -144,3 +150,3 @@ ### Fixed
 
-## [1.1.3] - 2015-12-14
+## 1.1.3 - 2015-12-14
 
@@ -151,3 +157,3 @@ ### Fixed
 
-## [1.1.1] - 2015-11-28
+## 1.1.1 - 2015-11-28
 
@@ -158,3 +164,3 @@ ### Fixed
 
-## [1.1.0] - 2015-11-22
+## 1.1.0 - 2015-11-22
 
@@ -165,3 +171,3 @@ ### Changed
 
-## [1.0.5] - 2015-10-22
+## 1.0.5 - 2015-10-22
 
@@ -171,9 +177,1 @@ ### Changed
 - Moved React from dependency to peer dependency.
-
-[1.2.1]: https://github.com/rexxars/react-markdown/compare/v1.2.0...v1.2.1
-[1.2.0]: https://github.com/rexxars/react-markdown/compare/v1.1.4...v1.2.0
-[1.1.4]: https://github.com/rexxars/react-markdown/compare/v1.1.3...v1.1.4
-[1.1.3]: https://github.com/rexxars/react-markdown/compare/v1.1.1...v1.1.3
-[1.1.1]: https://github.com/rexxars/react-markdown/compare/v1.1.0...v1.1.1
-[1.1.0]: https://github.com/rexxars/react-markdown/compare/v1.0.5...v1.1.0
-[1.0.5]: https://github.com/rexxars/react-markdown/compare/85a0e625ad1fefc6af2cb779c6ee74db5f31f866...v1.0.5

demo/dist/js/codemirror.js

 // auto-generated from index.js via build.js, do not edit directly
-CodeMirrorEditor = (function (require, module) {
-  'use strict';
+(function() {
+  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-  var React = require('react');
-  var CodeMirror;
+  CodeMirrorEditor = (function (require, module) {
+    'use strict';
 
-  // adapted from:
-  // https://github.com/facebook/react/blob/master/docs/_js/live_editor.js#L16
+    var React = require('react');
+    var CodeMirror;
 
-  // also used as an example:
-  // https://github.com/facebook/react/blob/master/src/browser/ui/dom/components/ReactDOMInput.js
+    // adapted from:
+    // https://github.com/facebook/react/blob/master/docs/_js/live_editor.js#L16
 
-  var IS_MOBILE = typeof navigator === 'undefined' || (
-    navigator.userAgent.match(/Android/i)
-      || navigator.userAgent.match(/webOS/i)
-      || navigator.userAgent.match(/iPhone/i)
-      || navigator.userAgent.match(/iPad/i)
-      || navigator.userAgent.match(/iPod/i)
-      || navigator.userAgent.match(/BlackBerry/i)
-      || navigator.userAgent.match(/Windows Phone/i)
-  );
+    // also used as an example:
+    // https://github.com/facebook/react/blob/master/src/browser/ui/dom/components/ReactDOMInput.js
 
-  if (!IS_MOBILE) {
-    CodeMirror = require('codemirror');
-  }
+    var IS_MOBILE = typeof navigator === 'undefined' || (
+      navigator.userAgent.match(/Android/i)
+        || navigator.userAgent.match(/webOS/i)
+        || navigator.userAgent.match(/iPhone/i)
+        || navigator.userAgent.match(/iPad/i)
+        || navigator.userAgent.match(/iPod/i)
+        || navigator.userAgent.match(/BlackBerry/i)
+        || navigator.userAgent.match(/Windows Phone/i)
+    );
 
-  var CodeMirrorEditor = React.createClass({
-    getInitialState: function() {
-      return { isControlled: this.props.value != null };
-    },
+    if (!IS_MOBILE) {
+      CodeMirror = require('codemirror');
+    }
 
-    propTypes: {
-      value: React.PropTypes.string,
-      defaultValue: React.PropTypes.string,
-      style: React.PropTypes.object,
-      className: React.PropTypes.string,
-      onChange: React.PropTypes.func
-    },
+    var CodeMirrorEditor = function (_React$Component) {
+      _inherits(CodeMirrorEditor, _React$Component);
 
-    componentDidMount: function() {
-      var isTextArea = this.props.forceTextArea || IS_MOBILE;
-      if (!isTextArea) {
-        this.editor = CodeMirror.fromTextArea(this.refs.editor, this.props);
-        this.editor.on('change', this.handleChange);
+      function CodeMirrorEditor(props) {
+        _classCallCheck(this, CodeMirrorEditor);
+
+        var _this = _possibleConstructorReturn(this, (CodeMirrorEditor.__proto__ || Object.getPrototypeOf(CodeMirrorEditor)).call(this, props));
+
+        _this.handleChange = function () {
+          if (_this.editor) {
+            var value = _this.editor.getValue();
+            if (value !== _this.props.value) {
+              _this.props.onChange && _this.props.onChange({ target: { value: value } });
+              if (_this.editor.getValue() !== _this.props.value) {
+                if (_this.state.isControlled) {
+                  _this.editor.setValue(_this.props.value);
+                } else {
+                  _this.props.value = value;
+                }
+              }
+            }
+          }
+        };
+
+        _this.state = { isControlled: props.value != null };
+        return _this;
       }
-    },
 
-    componentDidUpdate: function() {
-      if (this.editor) {
-        if (this.props.value != null) {
-          if (this.editor.getValue() !== this.props.value) {
-            this.editor.setValue(this.props.value);
+      _createClass(CodeMirrorEditor, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+          var isTextArea = this.props.forceTextArea || IS_MOBILE;
+          if (!isTextArea) {
+            this.editor = CodeMirror.fromTextArea(this.refs.editor, this.props);
+            this.editor.on('change', this.handleChange);
           }
         }
-      }
-    },
-
-    handleChange: function() {
-      if (this.editor) {
-        var value = this.editor.getValue();
-        if (value !== this.props.value) {
-          this.props.onChange && this.props.onChange({target: {value: value}});
-          if (this.editor.getValue() !== this.props.value) {
-            if (this.state.isControlled) {
-              this.editor.setValue(this.props.value);
-            } else {
-              this.props.value = value;
+      }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate() {
+          if (this.editor) {
+            if (this.props.value != null) {
+              if (this.editor.getValue() !== this.props.value) {
+                this.editor.setValue(this.props.value);
+              }
             }
           }
         }
-      }
-    },
+      }, {
+        key: 'render',
+        value: function render() {
+          return React.createElement(
+            'div',
+            { style: this.props.style, className: this.props.className },
+            React.createElement('textarea', {
+              ref: 'editor',
+              value: this.props.value,
+              readOnly: this.props.readOnly,
+              defaultValue: this.props.defaultValue,
+              onChange: this.props.onChange,
+              style: this.props.textAreaStyle,
+              className: this.props.textAreaClassName || this.props.textAreaClass
+            })
+          );
+        }
+      }]);
 
-    render: function() {
-      var editor = React.createElement('textarea', {
-        ref: 'editor',
-        value: this.props.value,
-        readOnly: this.props.readOnly,
-        defaultValue: this.props.defaultValue,
-        onChange: this.props.onChange,
-        style: this.props.textAreaStyle,
-        className: this.props.textAreaClassName || this.props.textAreaClass
-      });
+      return CodeMirrorEditor;
+    }(React.Component);
 
-      return React.createElement('div', {style: this.props.style, className: this.props.className}, editor);
-    }
-  });
+    module.exports = CodeMirrorEditor;
 
-  module.exports = CodeMirrorEditor;
-
-  return module.exports;
-}(function (id) {
-  if (id === "react") return React;
-  else if (id === "codemirror") return CodeMirror;
-  else throw new Error("Unexpected require of " + id);
-}, {exports: {}}));
+    return module.exports;
+    }(function (id) {
+    if (id === "react") return React;
+    else if (id === "codemirror") return CodeMirror;
+    else throw new Error("Unexpected require of " + id);
+    }, {exports: {}}));
+})();

demo/src/code-block.js

 'use strict';
 
 var React = require('react');
-var PureRenderMixin = require('react-addons-pure-render-mixin');
+var PropTypes = require('prop-types');
 var hljs = window.hljs;
 var h = React.createElement;
 
-var CodeBlock = React.createClass({
-    displayName: 'CodeBlock',
-    mixins: [PureRenderMixin],
-    propTypes: {
-        literal: React.PropTypes.string,
-        language: React.PropTypes.string
-    },
-
-    componentDidMount: function() {
+class CodeBlock extends React.Component {
+    componentDidMount() {
         this.highlightCode();
-    },
+    }
 
-    componentDidUpdate: function() {
+    componentDidUpdate() {
         this.highlightCode();
-    },
+    }
 
-    highlightCode: function() {
+    highlightCode() {
         hljs.highlightBlock(this.refs.code);
-    },
+    }
 
-    render: function() {
+    render() {
         return (
@@ -38,4 +31,9 @@ h('pre', null,
     }
-});
+}
 
-module.exports = React.createFactory(CodeBlock);
+CodeBlock.propTypes = {
+    literal: PropTypes.string,
+    language: PropTypes.string
+};
+
+module.exports = CodeBlock;

demo/src/demo.js

@@ -12,7 +12,7 @@ 'use strict';
 
-var Demo = module.exports = React.createClass({
-    displayName: 'Demo',
+class Demo extends React.Component {
+    constructor(props) {
+        super(props);
 
-    getInitialState: function() {
-        return {
+        this.state = {
             markdownSrc: [
@@ -35,15 +35,18 @@ '# Live demo\n\nChanges are automatically rendered as you type.\n\n* Follows the ',
         };
-    },
 
-    onMarkdownChange: function(md) {
+        this.onMarkdownChange = this.onMarkdownChange.bind(this);
+        this.onControlsChange = this.onControlsChange.bind(this);
+    }
+
+    onMarkdownChange(md) {
         this.setState({
             markdownSrc: md
         });
-    },
+    }
 
-    onControlsChange: function(mode) {
+    onControlsChange(mode) {
         this.setState({ htmlMode: mode });
-    },
+    }
 
-    render: function() {
+    render() {
         return (
@@ -77,6 +80,8 @@ h('div', {className: 'demo'},
     }
-});
+}
 
+module.exports = Demo;
+
 if (typeof window !== 'undefined') {
     ReactDOM.render(h(Demo), document.getElementById('main'));
 }

demo/src/editor.js

 'use strict';
 
 var React = require('react');
+var PropTypes = require('prop-types');
 var CodeMirror = window.CodeMirrorEditor;
 var h = React.createElement;
 
-module.exports = React.createClass({
-    displayName: 'Editor',
+class Editor extends React.Component {
+    constructor(props) {
+        super(props);
 
-    propTypes: {
-        onChange: React.PropTypes.func.isRequired,
-        value: React.PropTypes.string
-    },
+        this.onInputChange = this.onInputChange.bind(this);
+    }
 
-    onInputChange: function(e) {
+    onInputChange(e) {
         this.props.onChange(e.target.value);
-    },
+    }
 
-    render: function() {
+    render() {
         return (
@@ -31,2 +31,9 @@ h('form', {className: 'editor pure-form'},
     }
-});
+}
+
+Editor.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.string
+};
+
+module.exports = Editor;

demo/src/markdown-controls.js

 'use strict';
 
 var React = require('react');
+var PropTypes = require('prop-types');
 var h = React.createElement;
 
-module.exports = React.createClass({
-    displayName: 'MarkdownControls',
+class MarkdownControls extends React.Component {
+    constructor(props) {
+        super(props);
 
-    propTypes: {
-        mode: React.PropTypes.string.isRequired,
-        onChange: React.PropTypes.func.isRequired
-    },
+        this.onChange = this.onChange.bind(this);
+    }
 
-    getDefaultProps: function() {
-        return {
-            mode: 'raw'
-        };
-    },
-
-    onChange: function(e) {
+    onChange(e) {
         this.props.onChange(e.target.value);
-    },
+    }
 
-    render: function() {
+    render() {
         var rawChecked = this.props.mode === 'raw',
@@ -75,2 +69,13 @@ skipChecked = this.props.mode === 'skip',
     }
-});
+}
+
+MarkdownControls.propTypes = {
+    mode: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired
+};
+
+MarkdownControls.defaultProps = {
+    mode: 'raw'
+};
+
+module.exports = MarkdownControls;

package.json

 {
   "name": "react-markdown",
   "description": "Renders Markdown as React components",
-  "version": "2.4.6",
+  "version": "2.5.0",
   "keywords": [
@@ -32,7 +32,8 @@ "commonmark",
   "devDependencies": {
-    "@types/react": "^15.0.16",
+    "@types/react": "^15.0.21",
+    "buble-loader": "^0.4.1",
     "chai": "^3.5.0",
-    "eslint": "^3.17.1",
+    "eslint": "^3.19.0",
     "eslint-config-vaffel": "^5.0.0",
-    "eslint-plugin-react": "^6.10.0",
+    "eslint-plugin-react": "^6.10.3",
     "gh-pages-deploy": "^0.4.2",
@@ -45,6 +46,4 @@ "istanbul": "^0.4.4",
     "mocha-jsdom": "^1.1.0",
-    "react": "^15.2.1",
-    "react-addons-pure-render-mixin": "^15.2.1",
-    "react-addons-test-utils": "^15.2.1",
-    "react-dom": "^15.2.1",
+    "react": "^15.5.0",
+    "react-dom": "^15.5.0",
     "webpack": "^1.13.1"
@@ -62,3 +61,4 @@ },
     "commonmark-react-renderer": "^4.2.4",
-    "in-publish": "^2.0.0"
+    "in-publish": "^2.0.0",
+    "prop-types": "^15.5.1"
   },
@@ -65,0 +65,0 @@ "types": "./react-markdown.d.ts",

README.md

@@ -32,12 +32,12 @@ # react-markdown
 
-If you are using Webpack, you need to enable a JSON-loader. To do so, first `npm install --save json-loader`, then add the loader to your webpack config:
+If you are using Webpack 1, you need to enable a JSON-loader. To do so, first `npm install --save json-loader`, then add the loader to your webpack config:
 
 ```js
 {
-    module: {
-        loaders: [{
-            test: /\.json$/,
-            loader: 'json-loader'
-        }]
-    }
+  module: {
+    loaders: [{
+      test: /\.json$/,
+      loader: 'json-loader'
+    }]
+  }
 }
@@ -50,2 +50,6 @@ ```
 
+## Inline HTML is broken
+
+As the title says, inline HTML is currently broken. See [commonmark-react-renderer#9](https://github.com/rexxars/commonmark-react-renderer/issues/9) for more information on why and how you can help out.
+
 ## Options
@@ -52,0 +56,0 @@

src/react-markdown.js

@@ -6,64 +6,64 @@ 'use strict';
 var ReactRenderer = require('commonmark-react-renderer');
+var propTypes = require('prop-types');
 
-var propTypes = React.PropTypes;
+function ReactMarkdown(props) {
+    React.Component.call(this, props);
+}
 
-var ReactMarkdown = React.createClass({
-    displayName: 'ReactMarkdown',
+ReactMarkdown.prototype = Object.create(React.Component.prototype);
+ReactMarkdown.prototype.constructor = ReactMarkdown;
 
-    propTypes: {
-        className: propTypes.string,
-        containerProps: propTypes.object,
-        source: propTypes.string.isRequired,
-        containerTagName: propTypes.string,
-        childBefore: propTypes.object,
-        childAfter: propTypes.object,
-        sourcePos: propTypes.bool,
-        escapeHtml: propTypes.bool,
-        skipHtml: propTypes.bool,
-        softBreak: propTypes.string,
-        allowNode: propTypes.func,
-        allowedTypes: propTypes.array,
-        disallowedTypes: propTypes.array,
-        transformLinkUri: propTypes.func,
-        transformImageUri: propTypes.func,
-        unwrapDisallowed: propTypes.bool,
-        renderers: propTypes.object,
-        walker: propTypes.func,
-        parserOptions: propTypes.object
-    },
+ReactMarkdown.prototype.render = function() {
+    var containerProps = this.props.containerProps || {};
+    var renderer = new ReactRenderer(this.props);
+    var parser = new Parser(this.props.parserOptions);
+    var ast = parser.parse(this.props.source || '');
 
-    getDefaultProps: function() {
-        return {
-            containerTagName: 'div',
-            parserOptions: {}
-        };
-    },
+    if (this.props.walker) {
+        var walker = ast.walker();
+        var event;
 
-    render: function() {
-        var containerProps = this.props.containerProps || {};
-        var renderer = new ReactRenderer(this.props);
-        var parser = new Parser(this.props.parserOptions);
-        var ast = parser.parse(this.props.source || '');
+        while ((event = walker.next())) {
+            this.props.walker.call(this, event, walker);
+        }
+    }
 
-        if (this.props.walker) {
-            var walker = ast.walker();
-            var event;
+    if (this.props.className) {
+        containerProps.className = this.props.className;
+    }
 
-            while ((event = walker.next())) {
-                this.props.walker.call(this, event, walker);
-            }
-        }
+    return React.createElement.apply(React,
+        [this.props.containerTagName, containerProps, this.props.childBefore]
+            .concat(renderer.render(ast).concat(
+                [this.props.childAfter]
+            ))
+    );
+};
 
-        if (this.props.className) {
-            containerProps.className = this.props.className;
-        }
+ReactMarkdown.propTypes = {
+    className: propTypes.string,
+    containerProps: propTypes.object,
+    source: propTypes.string.isRequired,
+    containerTagName: propTypes.string,
+    childBefore: propTypes.object,
+    childAfter: propTypes.object,
+    sourcePos: propTypes.bool,
+    escapeHtml: propTypes.bool,
+    skipHtml: propTypes.bool,
+    softBreak: propTypes.string,
+    allowNode: propTypes.func,
+    allowedTypes: propTypes.array,
+    disallowedTypes: propTypes.array,
+    transformLinkUri: propTypes.func,
+    transformImageUri: propTypes.func,
+    unwrapDisallowed: propTypes.bool,
+    renderers: propTypes.object,
+    walker: propTypes.func,
+    parserOptions: propTypes.object
+};
 
-        return React.createElement.apply(React,
-            [this.props.containerTagName, containerProps, this.props.childBefore]
-                .concat(renderer.render(ast).concat(
-                    [this.props.childAfter]
-                ))
-        );
-    }
-});
+ReactMarkdown.defaultProps = {
+    containerTagName: 'div',
+    parserOptions: {}
+};
 
@@ -70,0 +70,0 @@ ReactMarkdown.types = ReactRenderer.types;

webpack.config.demo.js

@@ -38,2 +38,5 @@ 'use strict';
         loaders: [{
+            test: /\.js$/,
+            loader: 'buble'
+        }, {
             test: /\.json$/,
@@ -40,0 +43,0 @@ loader: 'json'

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

Improved metrics

Total package byte prevSize

339222

increased by2%

Dev dependency count

16

decreased by-5.88%

Lines of code

1325

increased by2.47%

Number of lines in readme file

111

increased by3.74%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedprop-types@^15.5.1

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)