react-native-htmlview - npm Package Compare versions

Comparing version 0.5.0 to 0.7.0

.eslintrc.js

@@ -29,3 +29,3 @@
     // style
-    "semi": [2, 'never'],
+    "semi": [2, 'always'],
     "comma-dangle": [2, "always-multiline"],
@@ -32,0 +32,0 @@ "no-extra-semi": 2,

htmlToElement.js

@@ -1,25 +0,26 @@
-var React = require('react')
-var ReactNative = require('react-native')
-var htmlparser = require('./vendor/htmlparser2')
-var entities = require('./vendor/entities')
+var React = require('react');
+var ReactNative = require('react-native');
+var htmlparser = require('htmlparser2-without-node-native');
+var entities = require('entities');
 
 var {
   Text,
-} = ReactNative
+} = ReactNative;
 
+var Img = require('./Img');
 
-var LINE_BREAK = '\n'
-var PARAGRAPH_BREAK = '\n\n'
-var BULLET = '\u2022 '
+var LINE_BREAK = '\n';
+var BULLET = '\u2022 ';
 
 function htmlToElement(rawHtml, opts, done) {
   function domToElement(dom, parent) {
-    if (!dom) return null
+    if (!dom) return null;
 
     return dom.map((node, index, list) => {
       if (opts.customRenderer) {
-        var rendered = opts.customRenderer(node, index, list)
-        if (rendered || rendered === null) return rendered
+        var rendered = opts.customRenderer(node, index, list);
+        if (rendered || rendered === null) return rendered;
       }
 
+
       if (node.type == 'text') {
@@ -30,9 +31,27 @@ return (
           </Text>
-        )
+        );
       }
 
       if (node.type == 'tag') {
-        var linkPressHandler = null
+        if (node.name == 'img') {
+          var imgWidth = Number(node.attribs['width']) || Number(node.attribs['data-width']) || 0;
+          var imgHeight = Number(node.attribs['height']) || Number(node.attribs['data-height']) || 0;
+
+          var imgStyle = {
+            width: imgWidth,
+            height: imgHeight,
+          };
+          var source = {
+            uri: node.attribs.src,
+            width: imgWidth,
+            height: imgHeight,
+          };
+          return (
+            <Img key={index} source={source} style={imgStyle} />
+          );
+        }
+
+        var linkPressHandler = null;
         if (node.name == 'a' && node.attribs && node.attribs.href) {
-          linkPressHandler = () => opts.linkHandler(entities.decodeHTML(node.attribs.href))
+          linkPressHandler = () => opts.linkHandler(entities.decodeHTML(node.attribs.href));
         }
@@ -46,19 +65,19 @@
             {node.name == 'br' || node.name == 'li' ? LINE_BREAK : null}
-            {node.name == 'p' && index < list.length - 1 ? PARAGRAPH_BREAK : null}
-            {node.name == 'h1' || node.name == 'h2' || node.name == 'h3' || node.name == 'h4' || node.name == 'h5' ? PARAGRAPH_BREAK : null}
+            {node.name == 'p' && index < list.length - 1 ? LINE_BREAK + LINE_BREAK : null}
+            {node.name == 'h1' || node.name == 'h2' || node.name == 'h3' || node.name == 'h4' || node.name == 'h5' ? LINE_BREAK : null}
           </Text>
-        )
+        );
       }
-    })
+    });
   }
 
   var handler = new htmlparser.DomHandler(function(err, dom) {
-    if (err) done(err)
-    done(null, domToElement(dom))
-  })
-  var parser = new htmlparser.Parser(handler)
-  parser.write(rawHtml)
-  parser.done()
+    if (err) done(err);
+    done(null, domToElement(dom));
+  });
+  var parser = new htmlparser.Parser(handler);
+  parser.write(rawHtml);
+  parser.done();
 }
 
-module.exports = htmlToElement
+module.exports = htmlToElement;

HTMLView.js

@@ -1,89 +0,92 @@
-var React = require('react')
-var ReactNative = require('react-native')
-var htmlToElement = require('./htmlToElement')
-var {
+import React, {Component, PropTypes} from 'react';
+import htmlToElement from './htmlToElement';
+import {
   Linking,
   StyleSheet,
   Text,
-} = ReactNative
+} from 'react-native';
 
+const boldStyle = {fontWeight: '500'};
+const italicStyle = {fontStyle: 'italic'};
+const codeStyle = {fontFamily: 'Menlo'};
 
-var HTMLView = React.createClass({
-  propTypes: {
-    value: React.PropTypes.string,
-    stylesheet: React.PropTypes.object,
-    onLinkPress: React.PropTypes.func,
-    onError: React.PropTypes.func,
-    renderNode: React.PropTypes.func,
+const baseStyles = StyleSheet.create({
+  b: boldStyle,
+  strong: boldStyle,
+  i: italicStyle,
+  em: italicStyle,
+  pre: codeStyle,
+  code: codeStyle,
+  a: {
+    fontWeight: '500',
+    color: '#007AFF',
   },
+});
 
-  getDefaultProps() {
-    return {
-      onLinkPress: Linking.openURL,
-      onError: console.error.bind(console),
-    }
-  },
-
-  getInitialState() {
-    return {
+class HtmlView extends Component {
+  constructor() {
+    super();
+    this.state = {
       element: null,
-    }
-  },
+    };
+  }
 
+  componentDidMount() {
+    this.mounted = true;
+    this.startHtmlRender(this.props.value);
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.value !== nextProps.value) {
-      this.startHtmlRender(nextProps.value)
+      this.startHtmlRender(nextProps.value);
     }
-  },
+  }
 
-  componentDidMount() {
-    this.mounted = true
-    this.startHtmlRender(this.props.value)
-  },
-
   componentWillUnmount() {
-    this.mounted = false
-  },
+    this.mounted = false;
+  }
 
   startHtmlRender(value) {
-    if (!value) return this.setState({element: null})
+    if (!value) {
+      this.setState({element: null});
+    }
 
-    var opts = {
+    const opts = {
       linkHandler: this.props.onLinkPress,
       styles: Object.assign({}, baseStyles, this.props.stylesheet),
       customRenderer: this.props.renderNode,
-    }
+    };
 
     htmlToElement(value, opts, (err, element) => {
-      if (err) return this.props.onError(err)
+      if (err) {
+        this.props.onError(err);
+      }
 
-      if (this.mounted) this.setState({element})
-    })
-  },
+      if (this.mounted) {
+        this.setState({element});
+      }
+    });
+  }
 
   render() {
     if (this.state.element) {
-      return <Text children={this.state.element} />
+      return <Text children={this.state.element} />;
     }
-    return <Text />
-  },
-})
+    return <Text />;
+  }
+}
 
-var boldStyle = {fontWeight: '500'}
-var italicStyle = {fontStyle: 'italic'}
-var codeStyle = {fontFamily: 'Menlo'}
+HtmlView.propTypes = {
+  value: PropTypes.string,
+  stylesheet: PropTypes.object,
+  onLinkPress: PropTypes.func,
+  onError: PropTypes.func,
+  renderNode: PropTypes.func,
+};
 
-var baseStyles = StyleSheet.create({
-  b: boldStyle,
-  strong: boldStyle,
-  i: italicStyle,
-  em: italicStyle,
-  pre: codeStyle,
-  code: codeStyle,
-  a: {
-    fontWeight: '500',
-    color: '#007AFF',
-  },
-})
+HtmlView.defaultProps = {
+  onLinkPress: url => Linking.openURL(url),
+  onError: console.error.bind(console),
+};
 
-module.exports = HTMLView
+export default HtmlView;

index.js

@@ -1,1 +0,1 @@
-module.exports = require('./HTMLView')
+module.exports = require('./HTMLView');

package.json

 {
   "name": "react-native-htmlview",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A component which renders HTML content as native views",
@@ -8,29 +8,24 @@ "main": "index.js",
     "lint": "eslint .",
-    "jest": "jest",
-    "test": "npm run lint && npm run jest"
+    "test": "yarn run lint-format && yarn run lint && yarn run jest",
+    "lint-format": "./format.sh --list-different; if [ $? != 0 ]; then echo \"CODE FORMATTING: please run 'yarn run format' and commit the changes\"; exit 1; fi",
+    "format": "./format.sh --write && eslint . --fix",
+    "jest": "jest"
   },
-  "jest": {
-    "setupEnvScriptFile": "<rootDir>/test/support/setupTestFramework.js",
-    "unmockedModulePathPatterns": [
-      "react",
-      "react-addons-test-utils",
-      "promise",
-      "source-map"
-    ],
-    "preprocessorIgnorePatterns": [
-      "/node_modules/"
-    ]
-  },
   "devDependencies": {
     "babel-eslint": "6.0.2",
-    "babel-jest": "^10.0.2",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.5.0",
     "eslint": "2.7.0",
     "eslint-plugin-react": "4.3.0",
-    "jest-cli": "^0.10.0",
-    "react": "^0.14.5",
-    "react-addons-test-utils": "^0.14.5",
-    "react-native": "^0.23.1"
+    "jest": "^19.0.2",
+    "prettier": "^0.22.0",
+    "react": "^15.4.2",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-native": "^0.42.0",
+    "react-test-renderer": "~15.4.0"
   },
+  "jest": {
+    "preset": "react-native"
+  },
   "author": "James Friend <[e-mail]> (http://jsdf.co/)",
@@ -52,3 +47,7 @@ "license": "ISC",
     "url": "git://github.com/jsdf/react-native-htmlview.git"
+  },
+  "dependencies": {
+    "entities": "^1.1.1",
+    "htmlparser2-without-node-native": "^3.9.0"
   }
 }

README.md

@@ -11,3 +11,3 @@ # React Native HTMLView
 - `onLinkPress`: a function which will be called with a url when a link is pressed.
-  Passing this prop will override how links are handled (defaults to calling `LinkingIOS.openURL(url)`)
+  Passing this prop will override how links are handled (defaults to calling `Linking.openURL(url)`)
 - `stylesheet`: a stylesheet object keyed by tag name, which will override the 
@@ -78,3 +78,3 @@ styles applied to those respective tags.
 
- If you're getting the error "undefined is not an object (evaluating 'RCTLinkingManager.openURL’)” from the LinkingIOS API, try adding ‘RCTLinking' to the project's 'Linked Frameworks and Libraries’. You might have to find RCTLinking.xcodeproj in the react-native package dir and drag that into your main Xcode project first.
+ If you're getting the error "undefined is not an object (evaluating 'RCTLinkingManager.openURL’)” from the LinkingIOS API, try adding ‘RCTLinking' to the project's 'Linked Frameworks and Libraries’. You might have to find RCTLinking.xcodeproj in the react-native package dir and drag that into your main Xcode project first.
 
@@ -84,2 +84,5 @@
 
+- 0.7.0 - fixed for recent versions of react-native
+- 0.6.0 - onLinkPress fix ([@damusnet](https://github.com/damusnet)), headers now only have one single line break ([@crysfel](https://github.com/crysfel))
+- 0.5.0 - react-native 0.25 compat ([@damusnet](https://github.com/damusnet))
 - 0.4.0 - re-renders properly when html content changes

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

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Number of lines in readme file

86

increased by3.61%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

1

decreased by-85.71%

Worsened metrics

Total package byte prevSize

11829

decreased by-96.18%

Dependency count

2

increased byInfinity%

Dev dependency count

12

increased by20%

Number of package files

11

decreased by-15.38%

Lines of code

253

decreased by-96.45%

Dependency changes

• + Addedentities@^1.1.1

• + Addedhtmlparser2-without-node-native@^3.9.0

• + Addedcore-util-is@1.0.3(transitive)

• + Addeddom-serializer@0.2.2(transitive)

• + Addeddomelementtype@1.3.12.3.0(transitive)

• + Addeddomhandler@2.4.2(transitive)

• + Addeddomutils@1.7.0(transitive)

• + Addedentities@1.1.22.2.0(transitive)

• + Addedeventemitter2@1.0.5(transitive)

• + Addedhtmlparser2-without-node-native@3.9.2(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedisarray@1.0.0(transitive)

• + Addedprocess-nextick-args@2.0.1(transitive)

• + Addedreadable-stream@2.3.8(transitive)

• + Addedsafe-buffer@5.1.2(transitive)

• + Addedstring_decoder@1.1.1(transitive)

• + Addedutil-deprecate@1.0.2(transitive)