Use let/const instead of var

Signed-off-by: Arve Knudsen <[email protected]>

README.md

@@ -48,13 +48,13 @@ React tree with one single parent.
 The following example parses each node and its attributes and returns a tree of React elements.
 
 ```javascript
-var ReactDOMServer = require('react-dom/server');
-var HtmlToReactParser = require('html-to-react').Parser;
+const ReactDOMServer = require('react-dom/server');
+const HtmlToReactParser = require('html-to-react').Parser;
 
-var htmlInput = '<div><h1>Title</h1><p>A paragraph</p></div>';
-var htmlToReactParser = new HtmlToReactParser();
-var reactElement = htmlToReactParser.parse(htmlInput);
-var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);
+const htmlInput = '<div><h1>Title</h1><p>A paragraph</p></div>';
+const htmlToReactParser = new HtmlToReactParser();
+const reactElement = htmlToReactParser.parse(htmlInput);
+const reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);
 
 assert.equal(reactHtml, htmlInput); // true
 ```
@@ -65,20 +65,20 @@ If certain DOM nodes require specific processing, for example if you want to cap
 `<h1>` tag, the following example demonstrates this:
 
 ```javascript
-var ReactDOMServer = require('react-dom/server');
-var HtmlToReact = require('html-to-react');
-var HtmlToReactParser = require('html-to-react').Parser;
+const ReactDOMServer = require('react-dom/server');
+const HtmlToReact = require('html-to-react');
+const HtmlToReactParser = require('html-to-react').Parser;
 
-var htmlInput = '<div><h1>Title</h1><p>Paragraph</p><h1>Another title</h1></div>';
-var htmlExpected = '<div><h1>TITLE</h1><p>Paragraph</p><h1>ANOTHER TITLE</h1></div>';
+const htmlInput = '<div><h1>Title</h1><p>Paragraph</p><h1>Another title</h1></div>';
+const htmlExpected = '<div><h1>TITLE</h1><p>Paragraph</p><h1>ANOTHER TITLE</h1></div>';
 
-var isValidNode = function () {
+const isValidNode = function () {
   return true;
 };
 
 // Order matters. Instructions are processed in the order they're defined
-var processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
-var processingInstructions = [
+const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
+const processingInstructions = [
   {
     // Custom <h1> processing
     shouldProcessNode: function (node) {
@@ -96,10 +96,10 @@ var processingInstructions = [
     processNode: processNodeDefinitions.processDefaultNode
   }
 ];
-var htmlToReactParser = new HtmlToReactParser();
-var reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode,
+const htmlToReactParser = new HtmlToReactParser();
+const reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode,
   processingInstructions);
-var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 assert.equal(reactHtml, htmlExpected);
 ```
 
@@ -146,23 +146,23 @@ it as a prop to your injected `RichTextEditor`.
 In your instructions object, you must specify `replaceChildren: true`.
 
 ```javascript
-var React = require('react');
-var HtmlToReact = require('html-to-react');
-var HtmlToReactParser = require('html-to-react').Parser;
+const React = require('react');
+const HtmlToReact = require('html-to-react');
+const HtmlToReactParser = require('html-to-react').Parser;
 
-var htmlToReactParser = new HtmlToReactParser();
-var htmlInput = '<div><div data-test="foo"><p>Text</p><p>Text</p></div></div>';
-var htmlExpected = '<div><div data-test="foo"><h1>Heading</h1></div></div>';
+const htmlToReactParser = new HtmlToReactParser();
+const htmlInput = '<div><div data-test="foo"><p>Text</p><p>Text</p></div></div>';
+const htmlExpected = '<div><div data-test="foo"><h1>Heading</h1></div></div>';
 
-var isValidNode = function () {
+const isValidNode = function () {
   return true;
 };
 
-var processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
+const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
 
 // Order matters. Instructions are processed in
 // the order they're defined
-var processingInstructions = [
+const processingInstructions = [
   {
     // This is REQUIRED, it tells the parser
     // that we want to insert our React
@@ -184,9 +184,9 @@ var processingInstructions = [
   },
 ];
 
-var reactComponent = htmlToReactParser.parseWithInstructions(
+const reactComponent = htmlToReactParser.parseWithInstructions(
   htmlInput, isValidNode, processingInstructions);
-var reactHtml = ReactDOMServer.renderToStaticMarkup(
+const reactHtml = ReactDOMServer.renderToStaticMarkup(
   reactComponent);
 assert.equal(reactHtml, htmlExpected);
 ```
@@ -228,12 +228,12 @@ We can accomplish that with the following script, using a combination of preproc
 custom processing instructions:
 
 ```javascript
-var React = require('react');
-var HtmlToReact = require('html-to-react');
-var HtmlToReactParser = require('html-to-react').Parser;
+const React = require('react');
+const HtmlToReact = require('html-to-react');
+const HtmlToReactParser = require('html-to-react').Parser;
 
-var htmlToReactParser = new HtmlToReactParser();
-var htmlInput = '<div class="row">' +
+const htmlToReactParser = new HtmlToReactParser();
+const htmlInput = '<div class="row">' +
   '<div id="first" data-process="shared">' +
     '<p>Sample For First</p>' +
   '</div>' +
@@ -242,16 +242,16 @@ var htmlInput = '<div class="row">' +
   '</div>' +
 '</div>';
 
-var htmlExpected = '<div class="row">' +
+const htmlExpected = '<div class="row">' +
   '<h1 id="preprocessed-first">First</h1>' +
   '<h2 id="preprocessed-second">Second</h2>' +
 '</div>';
 
-var isValidNode = function () {
+const isValidNode = function () {
   return true;
 };
 
-var preprocessingInstructions = [
+const preprocessingInstructions = [
   {
     shouldPreprocessNode: function (node) {
       return node.attribs && node.attribs['data-process'] === 'shared';
@@ -261,8 +261,8 @@ var preprocessingInstructions = [
     },
   }
 ];
-var processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
-var processingInstructions = [
+const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
+const processingInstructions = [
   {
     shouldProcessNode: function (node) {
       return node.attribs && node.attribs.id === 'preprocessed-first';
@@ -287,9 +287,9 @@ var processingInstructions = [
   },
 ];
 
-var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions,
+const reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions,
   preprocessingInstructions);
-var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 assert.equal(reactHtml, htmlExpected);
 ```
 

index.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var parser = require('./lib/parser');
-var processingInstructions = require('./lib/processing-instructions');
-var isValidNodeDefinitions = require('./lib/is-valid-node-definitions');
-var processNodeDefinitions = require('./lib/process-node-definitions');
+const parser = require('./lib/parser');
+const processingInstructions = require('./lib/processing-instructions');
+const isValidNodeDefinitions = require('./lib/is-valid-node-definitions');
+const processNodeDefinitions = require('./lib/process-node-definitions');
 
 module.exports = {
   Parser: parser,

lib/camel-case-attribute-names.js

@@ -3,7 +3,7 @@
 // listed to reduce the chance of human error and make it easier to just copy-paste the new list if
 // it changes.
 'use strict';
-var HTML_ATTRIBUTES = [
+const HTML_ATTRIBUTES = [
   'accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency',
   'alt', 'async', 'autoComplete', 'autoFocus', 'autoPlay', 'capture', 'cellPadding',
   'cellSpacing', 'challenge', 'charSet', 'checked', 'cite', 'classID', 'className',
@@ -22,12 +22,12 @@ var HTML_ATTRIBUTES = [
   'wmode', 'wrap', 'onClick',
 ];
 
-var NON_STANDARD_ATTRIBUTES = [
+const NON_STANDARD_ATTRIBUTES = [
   'autoCapitalize', 'autoCorrect', 'color', 'itemProp', 'itemScope', 'itemType', 'itemRef',
   'itemID', 'security', 'unselectable', 'results', 'autoSave',
 ];
 
-var SVG_ATTRIBUTES = [
+const SVG_ATTRIBUTES = [
   'accentHeight', 'accumulate', 'additive', 'alignmentBaseline', 'allowReorder', 'alphabetic',
   'amplitude', 'arabicForm', 'ascent', 'attributeName', 'attributeType', 'autoReverse', 'azimuth',
   'baseFrequency', 'baseProfile', 'baselineShift', 'bbox', 'begin', 'bias', 'by', 'calcMode',
@@ -67,11 +67,11 @@ var SVG_ATTRIBUTES = [
   'xmlSpace', 'y', 'y1', 'y2', 'yChannelSelector', 'z', 'zoomAndPan',
 ];
 
-var camelCaseMap = HTML_ATTRIBUTES
+const camelCaseMap = HTML_ATTRIBUTES
   .concat(NON_STANDARD_ATTRIBUTES)
   .concat(SVG_ATTRIBUTES)
   .reduce(function (soFar, attr) {
-    var lower = attr.toLowerCase();
+    const lower = attr.toLowerCase();
     if (lower !== attr) {
       soFar[lower] = attr;
     }

lib/parser.js

@@ -1,21 +1,21 @@
 'use strict';
-var forEach = require('ramda/src/forEach');
-var find = require('ramda/src/find');
-var reject = require('ramda/src/reject');
-var addIndex = require('ramda/src/addIndex');
-var map = require('ramda/src/map');
-var HtmlParser = require('htmlparser2').Parser;
-var DomHandler = require('domhandler').DomHandler;
-var ProcessingInstructions = require('./processing-instructions');
-var IsValidNodeDefinitions = require('./is-valid-node-definitions');
-var utils = require('./utils');
+const forEach = require('ramda/src/forEach');
+const find = require('ramda/src/find');
+const reject = require('ramda/src/reject');
+const addIndex = require('ramda/src/addIndex');
+const map = require('ramda/src/map');
+const HtmlParser = require('htmlparser2').Parser;
+const DomHandler = require('domhandler').DomHandler;
+const ProcessingInstructions = require('./processing-instructions');
+const IsValidNodeDefinitions = require('./is-valid-node-definitions');
+const utils = require('./utils');
 
 function Html2ReactParser(options) {
   function parseHtmlToTree(html) {
     options = options || {};
     options.decodeEntities = true;
-    var handler = new DomHandler();
-    var parser = new HtmlParser(handler, options);
+    const handler = new DomHandler();
+    const parser = new HtmlParser(handler, options);
     parser.parseComplete(html);
     return handler.dom.filter(function (element) {
       return element.type !== 'directive';
@@ -31,11 +31,11 @@ function Html2ReactParser(options) {
         }
       }, preprocessingInstructions || []);
 
-      var processingInstruction = find(function (processingInstruction) {
+      const processingInstruction = find(function (processingInstruction) {
         return processingInstruction.shouldProcessNode(node);
       }, processingInstructions || []);
       if (processingInstruction != null) {
-        var children = reject(function (x) {return x == null || x === false;},
+        const children = reject(function (x) {return x == null || x === false;},
           addIndex(map)(function (child, i) {
             return traverseDom(child, isValidNode, processingInstructions,
               preprocessingInstructions, i);
@@ -58,16 +58,16 @@ function Html2ReactParser(options) {
 
   function parseWithInstructions(html, isValidNode, processingInstructions,
       preprocessingInstructions) {
-    var domTree = parseHtmlToTree(html);
-    var list = domTree.map(function (domTreeItem, index) {
+    const domTree = parseHtmlToTree(html);
+    const list = domTree.map(function (domTreeItem, index) {
       return traverseDom(domTreeItem, isValidNode, processingInstructions,
         preprocessingInstructions, index);
     });
     return list.length <= 1 ? list[0] : list;
   };
 
   function parse(html) {
-    var processingInstructions = new ProcessingInstructions();
+    const processingInstructions = new ProcessingInstructions();
     return parseWithInstructions(html,
       IsValidNodeDefinitions.alwaysValid,
       processingInstructions.defaultProcessingInstructions);

lib/process-node-definitions.js

@@ -1,9 +1,9 @@
 'use strict';
-var utils = require('./utils');
+const utils = require('./utils');
 
 // eslint-disable-next-line max-len
 // https://github.com/facebook/react/blob/15.0-stable/src/renderers/dom/shared/ReactDOMComponent.js#L457
-var voidElementTags = [
+const voidElementTags = [
   'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param',
   'source', 'track', 'wbr', 'menuitem', 'textarea',
 ];

lib/processing-instructions.js

@@ -1,9 +1,9 @@
 'use strict';
-var ShouldProcessNodeDefinitions = require('./should-process-node-definitions');
-var ProcessNodeDefinitions = require('./process-node-definitions');
+const ShouldProcessNodeDefinitions = require('./should-process-node-definitions');
+const ProcessNodeDefinitions = require('./process-node-definitions');
 
 function ProcessingInstructions() {
-  var processNodeDefinitions = new ProcessNodeDefinitions();
+  const processNodeDefinitions = new ProcessNodeDefinitions();
 
   return {
     defaultProcessingInstructions: [{

lib/utils.js

@@ -1,16 +1,16 @@
 'use strict';
-var camelCase = require('lodash.camelcase');
-var toPairs = require('ramda/src/toPairs');
-var reduce = require('ramda/src/reduce');
-var React = require('react');
-var includes = require('ramda/src/includes');
-var camelCaseAttrMap = require('./camel-case-attribute-names');
+const camelCase = require('lodash.camelcase');
+const toPairs = require('ramda/src/toPairs');
+const reduce = require('ramda/src/reduce');
+const React = require('react');
+const includes = require('ramda/src/includes');
+const camelCaseAttrMap = require('./camel-case-attribute-names');
 
 function createStyleJsonFromString(styleString) {
   styleString = styleString || '';
-  var styles = styleString.split(/;(?!base64)/);
-  var singleStyle, key, value, jsonStyles = {};
-  for (var i = 0; i < styles.length; ++i) {
+  const styles = styleString.split(/;(?!base64)/);
+  let singleStyle, key, value, jsonStyles = {};
+  for (let i = 0; i < styles.length; ++i) {
     singleStyle = styles[i].split(':');
     if (singleStyle.length > 2) {
       singleStyle[1] = singleStyle.slice(1).join(':');
@@ -30,7 +30,7 @@ function createStyleJsonFromString(styleString) {
 }
 
 // Boolean HTML attributes, copied from https://meiert.com/en/blog/boolean-attributes-of-html/
-var booleanAttrs = [
+const booleanAttrs = [
   'allowfullscreen',
   'allowpaymentrequest',
   'async',
@@ -59,13 +59,14 @@ var booleanAttrs = [
 ];
 
 function createElement(node, index, data, children) {
-  var elementProps = {
+  let elementProps = {
     key: index,
   };
   if (node.attribs) {
     elementProps = reduce(function(result, keyAndValue) {
-      var key = keyAndValue[0];
-      var value = keyAndValue[1];
+      console.log(`Handling keyAndValue ${keyAndValue}`);
+      let key = keyAndValue[0];
+      let value = keyAndValue[1];
       key = camelCaseAttrMap[key.replace(/[-:]/, '')] || key;
       if (key === 'style') {
         value = createStyleJsonFromString(value);
@@ -85,7 +86,7 @@ function createElement(node, index, data, children) {
   }
 
   children = children || [];
-  var allChildren = data != null ? [data,].concat(children) : children;
+  const allChildren = data != null ? [data,].concat(children) : children;
   return React.createElement.apply(
     null, [node.name, elementProps,].concat(allChildren)
   );