From 6ac42e2b0e39bc012714c0efb144585990bfb383 Mon Sep 17 00:00:00 2001 From: Arve Knudsen Date: Sun, 2 May 2021 10:09:55 +0200 Subject: [PATCH] Use let/const instead of var Signed-off-by: Arve Knudsen --- README.md | 80 +++++++++++++++---------------- index.js | 8 ++-- lib/camel-case-attribute-names.js | 10 ++-- lib/parser.js | 34 ++++++------- lib/process-node-definitions.js | 4 +- lib/processing-instructions.js | 6 +-- lib/utils.js | 29 +++++------ test/html-to-react-tests.js | 14 +++--- 8 files changed, 93 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index d02be84..10e6c60 100644 --- a/README.md +++ b/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 = '

Title

A paragraph

'; -var htmlToReactParser = new HtmlToReactParser(); -var reactElement = htmlToReactParser.parse(htmlInput); -var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement); +const htmlInput = '

Title

A paragraph

'; +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 `

` 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 = '

Title

Paragraph

Another title

'; -var htmlExpected = '

TITLE

Paragraph

ANOTHER TITLE

'; +const htmlInput = '

Title

Paragraph

Another title

'; +const htmlExpected = '

TITLE

Paragraph

ANOTHER TITLE

'; -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

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 = '

Text

Text

'; -var htmlExpected = '

Heading

'; +const htmlToReactParser = new HtmlToReactParser(); +const htmlInput = '

Text

Text

'; +const htmlExpected = '

Heading

'; -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 = '
' + +const htmlToReactParser = new HtmlToReactParser(); +const htmlInput = '
' + '
' + '

Sample For First

' + '
' + @@ -242,16 +242,16 @@ var htmlInput = '
' + '
' + '
'; -var htmlExpected = '
' + +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 = '
' + '

Sample For First

' + '

Sample For Second

' + '
'; - 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); }); });