' +
+const htmlExpected = '
' +
'
First
' +
'Second
' +
'';
-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);
```
diff --git a/index.js b/index.js
index 3288c6d..06a515f 100644
--- a/index.js
+++ b/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,
diff --git a/lib/camel-case-attribute-names.js b/lib/camel-case-attribute-names.js
index a8346ec..3e945e8 100644
--- a/lib/camel-case-attribute-names.js
+++ b/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;
}
diff --git a/lib/parser.js b/lib/parser.js
index d34daf2..b1630fc 100644
--- a/lib/parser.js
+++ b/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,8 +58,8 @@ 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);
});
@@ -67,7 +67,7 @@ function Html2ReactParser(options) {
};
function parse(html) {
- var processingInstructions = new ProcessingInstructions();
+ const processingInstructions = new ProcessingInstructions();
return parseWithInstructions(html,
IsValidNodeDefinitions.alwaysValid,
processingInstructions.defaultProcessingInstructions);
diff --git a/lib/process-node-definitions.js b/lib/process-node-definitions.js
index 8e8ab2b..f0f73da 100644
--- a/lib/process-node-definitions.js
+++ b/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',
];
diff --git a/lib/processing-instructions.js b/lib/processing-instructions.js
index 26fe8ce..2f2cb1a 100644
--- a/lib/processing-instructions.js
+++ b/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: [{
diff --git a/lib/utils.js b/lib/utils.js
index b487d57..6149d3a 100644
--- a/lib/utils.js
+++ b/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)
);
diff --git a/test/html-to-react-tests.js b/test/html-to-react-tests.js
index 86f6c7d..74eec38 100644
--- a/test/html-to-react-tests.js
+++ b/test/html-to-react-tests.js
@@ -458,20 +458,20 @@ describe('Html2React', function () {
});
it('should support preprocessing instructions', function () {
- var htmlInput = '
' +
+ const htmlInput = '
';
- var htmlExpected = '
First
' +
+ const htmlExpected = '
First
' +
'Second
';
- var isValidNode = function () {
+ const isValidNode = function () {
return true;
};
// We have two preprocessing instructions; the first sets the attribute data-preprocessed,
// and the second one changes the ID of nodes that have the data-preprocessed attribute
// (i.e., it will only affect nodes touched by the previous preprocessor).
- var preprocessingInstructions = [
+ const preprocessingInstructions = [
{
shouldPreprocessNode: function (node) {
return (node.attribs || {})['data-process'] === 'shared';
@@ -492,7 +492,7 @@ describe('Html2React', function () {
},
},
];
- var processingInstructions = [
+ const processingInstructions = [
{
shouldProcessNode: function (node) {
return (node.attribs || {}).id === 'preprocessed-first';
@@ -522,10 +522,10 @@ describe('Html2React', function () {
processNode: processNodeDefinitions.processDefaultNode,
},
];
- var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
+ const reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
processingInstructions, preprocessingInstructions);
- var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+ const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
assert.strictEqual(reactHtml, htmlExpected);
});
});