Skip to content

build(package): upgrade dependency html-dom-parser to 0.5.0 #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 14, 2020
Merged

build(package): upgrade dependency html-dom-parser to 0.5.0 #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 19 additions & 11 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
// TypeScript Version: 3.3
// TypeScript Version: 4.1

import { ParserOptions } from 'htmlparser2';
import {
Comment,
DomHandlerOptions,
Element,
ProcessingInstruction,
Text
} from 'domhandler';
import htmlToDOM from 'html-dom-parser';

import { DomElement, ParserOptions } from 'htmlparser2';
import domToReact from './lib/dom-to-react';
import attributesToProps from './lib/attributes-to-props';
import htmlToDOM from 'html-dom-parser';
import domToReact from './lib/dom-to-react';

export { attributesToProps, domToReact, htmlToDOM };
export type HTMLParser2Options = ParserOptions & DomHandlerOptions;
export type DOMNode = Comment | Element | ProcessingInstruction | Text;

export interface HTMLReactParserOptions {
htmlparser2?: ParserOptions;
htmlparser2?: HTMLParser2Options;

library?: {
cloneElement: (
Expand All @@ -20,7 +32,7 @@ export interface HTMLReactParserOptions {
};

replace?: (
domNode: DomElement
domNode: DOMNode
) => JSX.Element | object | void | undefined | null | false;

trim?: boolean;
Expand All @@ -33,11 +45,7 @@ export interface HTMLReactParserOptions {
* @param options - Parser options.
* @return - JSX element(s), empty array, or string.
*/
declare function HTMLReactParser(
export default function HTMLReactParser(
html: string,
options?: HTMLReactParserOptions
): ReturnType<typeof domToReact>;

export { DomElement, ParserOptions, domToReact, htmlToDOM, attributesToProps };

export default HTMLReactParser;
13 changes: 7 additions & 6 deletions lib/attributes-to-props.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
// TypeScript Version: 3.3
// TypeScript Version: 4.1

export type Attributes = Record<string, string>;
export type Props = Attributes;

/**
* Converts HTML/SVG DOM attributes to React props.
*
* @param attributes - The HTML/SVG DOM attributes.
* @returns - The React props.
* @param attributes - HTML/SVG DOM attributes.
* @return - React props.
*/
export default function attributesToProps(
attributes: { [key: string]: string }
): { [key: string]: string };
export default function attributesToProps(attributes: Attributes): Props;
17 changes: 9 additions & 8 deletions lib/dom-to-react.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
// TypeScript Version: 3.3
// TypeScript Version: 4.1

import { HTMLReactParserOptions } from '..';
import { DomElement } from 'domhandler';
import { DOMNode, HTMLReactParserOptions } from '..';

export { DOMNode, HTMLReactParserOptions };

/**
* Converts DOM nodes to JSX element(s).
*
* @param nodes - DOM nodes.
* @param options - Parser options.
* @returns - JSX element(s).
* @param nodes - DOM nodes.
* @param options - Parser options.
* @return - JSX element(s).
*/
export default function domToReact(
nodes: DomElement[],
nodes: DOMNode[],
options?: HTMLReactParserOptions
): JSX.Element | JSX.Element[];
): string | JSX.Element | JSX.Element[];
4 changes: 2 additions & 2 deletions lib/dom-to-react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ var utilities = require('./utilities');
var setStyleProp = utilities.setStyleProp;

/**
* Converts DOM nodes to React elements.
* Converts DOM nodes to JSX element(s).
*
* @param {DomElement[]} nodes - DOM nodes.
* @param {object} [options={}] - Options.
* @param {Function} [options.replace] - Replacer.
* @param {object} [options.library] - Library (React/Preact/etc.).
* @return {string|ReactElement|ReactElement[]}
* @return {string|JSX.Element|JSX.Element[]}
*/
function domToReact(nodes, options) {
options = options || {};
Expand Down
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@
"dom"
],
"dependencies": {
"@types/htmlparser2": "3.10.2",
"html-dom-parser": "0.3.0",
"html-dom-parser": "0.5.0",
"react-property": "1.0.1",
"style-to-js": "1.1.0"
},
Expand Down
41 changes: 21 additions & 20 deletions test/types/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,54 @@ import parse, {
domToReact,
htmlToDOM
} from 'html-react-parser';
import { Element } from 'domhandler';
import * as React from 'react';

// $ExpectError
parse();

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('');

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('string');

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('<p>text</p>');

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('<li>1</li><li>2</li>');

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('<br id="replace">', {
replace: domNode => {
if (domNode.attribs && domNode.attribs.id === 'replace') {
if (domNode instanceof Element && domNode.attribs.id === 'replace') {
return <span>replaced</span>;
}
}
});

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('<br id="remove">', {
replace({ attribs }) {
return attribs && attribs.id === 'remove' && <></>;
replace: domNode => {
if (domNode instanceof Element && domNode.attribs.id === 'remove') {
return <></>;
}
}
});

let options: HTMLReactParserOptions;

options = {
replace: node => {
if (node.attribs && node.attribs.id === 'header') {
const options: HTMLReactParserOptions = {
replace: domNode => {
if (domNode instanceof Element && domNode.attribs.id === 'header') {
return;
}
}
};

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('<a id="header" href="#">Heading</a>', options);

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('<hr>', {
library: {
cloneElement: (element, props, children) =>
Expand All @@ -60,7 +61,7 @@ parse('<hr>', {
}
});

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('<p/><p/>', {
htmlparser2: {
xmlMode: true,
Expand All @@ -72,11 +73,11 @@ parse('<p/><p/>', {
}
});

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
parse('\t<p>text \r</p>\n', { trim: true });

// $ExpectType DomElement[]
// $ExpectType DOMNode[]
const domNodes = htmlToDOM('<div>text</div>');

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
domToReact(domNodes);
33 changes: 18 additions & 15 deletions test/types/lib/dom-to-react.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,46 @@
import { DomElement } from 'domhandler';
import { Element } from 'domhandler';
import { HTMLReactParserOptions } from 'html-react-parser';
import domToReact from 'html-react-parser/lib/dom-to-react';
import * as React from 'react';
import htmlToDOM from 'html-dom-parser';

// $ExpectType DomElement[]
// $ExpectType DOMNode[]
htmlToDOM('<div>text</div>');

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
domToReact(htmlToDOM('string'));

// $ExpectType string | Element | Element[]
domToReact(htmlToDOM('<div>text</div>'));

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
domToReact(htmlToDOM('<p id="replace">text</p>'), {
replace: domNode => {
if (domNode.attribs && domNode.attribs.id === 'replace') {
if (domNode instanceof Element && domNode.attribs.id === 'replace') {
return <span>replaced</span>;
}
}
});

let options: HTMLReactParserOptions;

options = {
replace({ attribs }) {
return attribs && attribs.id === 'remove' && <></>;
const options: HTMLReactParserOptions = {
replace: domNode => {
if (domNode instanceof Element && domNode.attribs.id === 'remove') {
return <></>;
}
}
};

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
domToReact(htmlToDOM('<p><br id="remove"></p>'), options);

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
domToReact(htmlToDOM('<a id="header" href="#">Heading</a>'), {
replace: node => {
if (node.attribs && node.attribs.id === 'header') {
replace: domNode => {
if (domNode instanceof Element && domNode.attribs.id === 'header') {
return;
}
}
});

// $ExpectType Element | Element[]
// $ExpectType string | Element | Element[]
domToReact(htmlToDOM('\t<p>text \r</p>\n'), { trim: true });