react-highlight - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

karma.conf.js

@@ -17,5 +17,5 @@ // Karma configuration
     files: [
-        'node_modules/es5-shim/es5-shim.js',
-        'node_modules/react/dist/react-with-addons.js',
-        'test/**/*.jsx',
+      'node_modules/es5-shim/es5-shim.js',
+      'node_modules/react/dist/react-with-addons.js',
+      'test/**/*.js',
     ],
@@ -31,3 +31,3 @@
     preprocessors: {
-        'test/**/*.jsx': ['webpack']
+        'test/**/*.js': ['webpack'],
     },
@@ -38,3 +38,3 @@
             loaders: [
-                {test: /\.(js|jsx)$/, loaders: ['babel']}
+                {test: /\.(js|jsx)$/, loaders: ['babel']},
             ]
@@ -44,2 +44,5 @@ },
             react: 'React'
+        },
+        resolve: {
+          root: __dirname
         }
@@ -46,0 +49,0 @@ },

lib/index.js

@@ -13,3 +13,4 @@ 'use strict';
       innerHTML: false,
-      className: null
+      className: null,
+      element: null
     };
@@ -33,14 +34,28 @@ },
   render: function render() {
+    var Element = this.props.element ? React.DOM[this.props.element] : null;
+
     if (this.props.innerHTML) {
-      return React.createElement('div', { dangerouslySetInnerHTML: { __html: this.props.children }, className: this.props.className || null });
+      if (!Element) {
+        Element = React.DOM.div;
+      }
+      return Element({
+        dangerouslySetInnerHTML: { __html: this.props.children },
+        className: this.props.className || null
+      }, null);
     } else {
-      return React.createElement(
-        'pre',
-        null,
-        React.createElement(
-          'code',
-          { className: this.props.className },
-          this.props.children
-        )
-      );
+      if (Element) {
+        return Element({
+          className: this.props.className
+        }, this.props.children);
+      } else {
+        return React.createElement(
+          'pre',
+          null,
+          React.createElement(
+            'code',
+            { className: this.props.className },
+            this.props.children
+          )
+        );
+      }
     }
@@ -47,0 +62,0 @@ }

lib/optimized.js

@@ -40,14 +40,28 @@ 'use strict';
   render: function render() {
+    var Element = this.props.element ? React.DOM[this.props.element] : null;
+
     if (this.props.innerHTML) {
-      return React.createElement('div', { dangerouslySetInnerHTML: { __html: this.props.children }, className: this.props.className || null });
+      if (!Element) {
+        Element = React.DOM.div;
+      }
+      return Element({
+        dangerouslySetInnerHTML: { __html: this.props.children },
+        className: this.props.className || null
+      }, null);
     } else {
-      return React.createElement(
-        'pre',
-        null,
-        React.createElement(
-          'code',
-          { className: this.props.className },
-          this.props.children
-        )
-      );
+      if (Element) {
+        return Element({
+          className: this.props.className
+        }, this.props.children);
+      } else {
+        return React.createElement(
+          'pre',
+          null,
+          React.createElement(
+            'code',
+            { className: this.props.className },
+            this.props.children
+          )
+        );
+      }
     }
@@ -54,0 +68,0 @@ }

package.json

 {
   "name": "react-highlight",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React component for syntax highlighting",
@@ -33,4 +33,7 @@ "main": "index.js",
     "babel-core": "^5.6.18",
+    "babel-eslint": "^6.0.2",
     "babel-loader": "^5.3.1",
     "es5-shim": "^4.1.7",
+    "eslint": "^2.8.0",
+    "eslint-plugin-react": "^4.3.0",
     "gulp": "^3.8.10",
@@ -43,2 +46,4 @@ "gulp-ruby-sass": "^0.7.1",
     "karma": "^0.13.3",
+    "karma-jasmine": "^0.3.6",
+    "karma-phantomjs-launcher": "^0.2.1",
     "karma-webpack": "^1.7.0",
@@ -51,13 +56,11 @@ "markdown-loader": "^0.1.2",
     "react": "^0.14.0",
+    "react-addons-test-utils": "^0.14.3",
     "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.6.6",
-    "karma-jasmine": "^0.3.6",
-    "karma-phantomjs-launcher": "^0.2.1",
-    "react-addons-test-utils": "^0.14.3"
+    "webpack-dev-server": "^1.6.6"
   },
   "dependencies": {
     "highlight.js": "^8.4.x",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "react": "^0.14.0 || ^15.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0"
   }
 }

README.md

@@ -9,3 +9,3 @@ # react-highlight
   npm install react-highlight --save
-``` 
+```
 
@@ -26,2 +26,7 @@ ### Usage
 
+Props:
+* className: custom class name
+* innerHTML: enable to render markup with dangerouslySetInnerHTML
+* element:  render code snippet inside specified element
+
 #### Syntax highlighting of single code snippet
@@ -44,4 +49,4 @@ Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.
 <Highlight innerHTML={true}>
-  {"html with multiple code snippets"} 
+  {"html with multiple code snippets"}
 </Highlight>
 ```

No alert changes

Improved metrics

Total package byte prevSize

50202

increased by2.69%

Lines of code

517

increased by14.13%

Number of lines in readme file

50

increased by11.11%

Worsened metrics

Dev dependency count

27

increased by12.5%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + 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)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-dom@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedfbjs@0.6.1(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.14.10(transitive)

• - Removedreact-dom@0.14.10(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedwhatwg-fetch@0.9.0(transitive)

• - Removedwrappy@1.0.2(transitive)

• Updatedreact@^0.14.0 || ^15.0.0

• Updatedreact-dom@^0.14.0 || ^15.0.0