lib-react-components - npm Package Compare versions

Comparing version 2.1.4 to 2.1.5

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [2.1.5](https://github.com/PeculiarVentures/peculiar-react-components/compare/lib-react-components@2.1.4...lib-react-components@2.1.5) (2021-03-05)
+
+**Note:** Version bump only for package lib-react-components
+
+
+
+
+
 ## [2.1.4](https://github.com/PeculiarVentures/peculiar-react-components/compare/lib-react-components@2.1.3...lib-react-components@2.1.4) (2021-03-02)
@@ -8,0 +16,0 @@

commonjs/components/highlight_code/index.js

@@ -80,4 +80,15 @@ 'use strict';
     value: function _highlight() {
+      var _props = this.props,
+          children = _props.children,
+          lang = _props.lang;
+
+
       if (this.codeRef && this.codeRef.current) {
-        _prismjs2.default.highlightElement(this.codeRef.current);
+        var code = void 0;
+
+        if (lang !== 'none') {
+          code = _prismjs2.default.highlight(children, _prismjs2.default.languages[lang], lang);
+        }
+
+        this.codeRef.current.innerHTML = code || children;
       }
@@ -94,22 +105,18 @@ }
     value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          lang = _props.lang,
-          className = _props.className,
-          other = _objectWithoutProperties(_props, ['children', 'lang', 'className']);
+      var _props2 = this.props,
+          children = _props2.children,
+          lang = _props2.lang,
+          className = _props2.className,
+          other = _objectWithoutProperties(_props2, ['children', 'lang', 'className']);
 
       return _react2.default.createElement(
         'pre',
-        _extends({
+        _extends({}, other, {
           'data-component': 'highlight_code',
           className: (0, _classnames2.default)(className, 'language-' + lang)
-        }, other),
-        _react2.default.createElement(
-          'code',
-          {
-            ref: this.codeRef,
-            className: 'language-' + lang
-          },
-          children
-        )
+        }),
+        _react2.default.createElement('code', {
+          ref: this.codeRef,
+          className: 'language-' + lang
+        })
       );
@@ -126,3 +133,3 @@ }
    */
-  children: _propTypes2.default.node.isRequired,
+  children: _propTypes2.default.string.isRequired,
   /**
@@ -129,0 +136,0 @@ * Supported highlighting languages

esm/components/highlight_code/index.js

@@ -16,3 +16,3 @@ 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; };
 import Prism from 'prismjs';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import 'prismjs/components/prism-jsx';
@@ -58,4 +58,15 @@ import 'prismjs/components/prism-bash';
     value: function _highlight() {
+      var _props = this.props,
+          children = _props.children,
+          lang = _props.lang;
+
+
       if (this.codeRef && this.codeRef.current) {
-        Prism.highlightElement(this.codeRef.current);
+        var code = void 0;
+
+        if (lang !== 'none') {
+          code = Prism.highlight(children, Prism.languages[lang], lang);
+        }
+
+        this.codeRef.current.innerHTML = code || children;
       }
@@ -72,22 +83,18 @@ }
     value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          lang = _props.lang,
-          className = _props.className,
-          other = _objectWithoutProperties(_props, ['children', 'lang', 'className']);
+      var _props2 = this.props,
+          children = _props2.children,
+          lang = _props2.lang,
+          className = _props2.className,
+          other = _objectWithoutProperties(_props2, ['children', 'lang', 'className']);
 
       return React.createElement(
         'pre',
-        _extends({
+        _extends({}, other, {
           'data-component': 'highlight_code',
-          className: classNames(className, 'language-' + lang)
-        }, other),
-        React.createElement(
-          'code',
-          {
-            ref: this.codeRef,
-            className: 'language-' + lang
-          },
-          children
-        )
+          className: classnames(className, 'language-' + lang)
+        }),
+        React.createElement('code', {
+          ref: this.codeRef,
+          className: 'language-' + lang
+        })
       );
@@ -104,3 +111,3 @@ }
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.string.isRequired,
   /**
@@ -107,0 +114,0 @@ * Supported highlighting languages

package.json

 {
   "name": "lib-react-components",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "private": false,
@@ -84,3 +84,3 @@ "description": "React components",
   },
-  "gitHead": "ed37a3659ffa0e47c653eeda32e1dec72b2c201c"
+  "gitHead": "f8014d6f5b9f87236d98bc8404c8ef3906a19467"
 }

src/components/highlight_code/index.jsx

 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Prism from 'prismjs';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import 'prismjs/components/prism-jsx';
@@ -19,3 +19,3 @@ import 'prismjs/components/prism-bash';
      */
-    children: PropTypes.node.isRequired,
+    children: PropTypes.string.isRequired,
     /**
@@ -60,4 +60,15 @@ * Supported highlighting languages
   _highlight() {
+    const {
+      children,
+      lang,
+    } = this.props;
+
     if (this.codeRef && this.codeRef.current) {
-      Prism.highlightElement(this.codeRef.current);
+      let code;
+
+      if (lang !== 'none') {
+        code = Prism.highlight(children, Prism.languages[lang], lang);
+      }
+
+      this.codeRef.current.innerHTML = code || children;
     }
@@ -80,8 +91,8 @@ }
       <pre
+        {...other}
         data-component="highlight_code"
-        className={classNames(
+        className={classnames(
           className,
           `language-${lang}`,
         )}
-        {...other}
       >
@@ -91,5 +102,3 @@ <code
           className={`language-${lang}`}
-        >
-          {children}
-        </code>
+        />
       </pre>
@@ -96,0 +105,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

2600907

increased by0.06%

Lines of code

33342

increased by0.04%

No dependency changes