Merge pull request #100 from AndrewLeedham/master

Add TypeScript definitions for domToReact

Author: remarkablemark

types/index.d.ts renamed to index.d.ts

@@ -1,20 +1,24 @@
 // TypeScript Version: 3.3
 
 import * as React from 'react';
+import { DomElement } from 'domhandler';
+import domToReact from './lib/dom-to-react';
+import htmlToDOM from 'html-dom-parser';
 
-export as namespace HTMLReactParser;
-
-export default HTMLReactParser;
+export { DomElement };
 
 type ReactElement = React.DetailedReactHTMLElement<{}, HTMLElement>;
 
 export interface HTMLReactParserOptions {
   // TODO: Replace `object` by type for objects like `{ type: 'h1', props: { children: 'Heading' } }`
-  replace(domNode: DomNode): React.ReactElement | object | undefined | false;
+  replace(domNode: DomElement): React.ReactElement | object | undefined | false;
 }
 
 /**
  * Convert HTML string to React elements.
+ *
+ * @param - Raw string of HTML to parse.
+ * @param options - Options to use when converting to react.
  * @returns ReactElement on successful parse or string when `html` cannot be
  * parsed as HTML
  */
@@ -23,18 +27,5 @@ declare function HTMLReactParser(
   options?: HTMLReactParserOptions
 ): ReactElement | ReactElement[] | string;
 
-/** domhandler node */
-export interface DomNode {
-  type: 'tag' | 'text' | 'directive' | 'comment' | 'script' | 'style';
-  name: string;
-  data?: string;
-  attribs?: {
-    [attributeName: string]: string;
-  };
-  children?: DomNode[];
-  parent?: DomNode;
-  prev?: DomNode;
-  next?: DomNode;
-  startIndex?: number;
-  endIndex?: number;
-}
+export { domToReact, htmlToDOM };
+export default HTMLReactParser;

index.js

@@ -23,3 +23,6 @@ function HTMLReactParser(html, options) {
  * Export HTML to React parser.
  */
 module.exports = HTMLReactParser;
+
+module.exports.domToReact = domToReact;
+module.exports.htmlToDOM = htmlToDOM;

lib/dom-to-react.d.ts

@@ -0,0 +1,17 @@
+// TypeScript Version: 3.3
+
+import * as React from 'react';
+import { HTMLReactParserOptions } from '..';
+import { DomElement } from 'domhandler';
+
+/**
+ * Converts DOM nodes to React elements.
+ *
+ * @param nodes - A list of formatted DomNodes to convert to React.
+ * @param options - Options to use when converting to react.
+ * @returns ReactElement or and array of ReactElements.
+ */
+export default function domToReact(
+  nodes: DomElement[],
+  options?: HTMLReactParserOptions
+): React.ReactElement | React.ReactElement[];

types/test.tsx renamed to lint/types/index.test.tsx

@@ -1,4 +1,4 @@
-import parse, { HTMLReactParserOptions } from 'html-dom-parser';
+import parse, { HTMLReactParserOptions, domToReact, htmlToDOM } from 'html-react-parser';
 import * as React from 'react';
 
 // $ExpectType string | DetailedReactHTMLElement<{}, HTMLElement> | DetailedReactHTMLElement<{}, HTMLElement>[]
@@ -35,3 +35,12 @@ parse('<a id="header" href="#">Heading</a>', {
     }
   }
 });
+
+// $ExpectType DomElement[]
+const dom = htmlToDOM('<div>text</div>');
+
+/* $ExpectType ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) |
+(new (props: any) => Component<any, any, any>)> |
+ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) |
+(new (props: any) => Component<any, any, any>)>[] */
+domToReact(dom);

lint/types/lib/dom-to-react.test.tsx

@@ -0,0 +1,42 @@
+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 ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) |
+(new (props: any) => Component<any, any, any>)> |
+ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) |
+(new (props: any) => Component<any, any, any>)>[] */
+domToReact(htmlToDOM('<div>text</div>'));
+
+// `options.replace`
+
+// Return React.createElement from `replace`
+domToReact(htmlToDOM('<p id="replace">text</p>'), {
+  replace: domNode => {
+    if (domNode.attribs && domNode.attribs.id === 'replace') {
+      return React.createElement('span', {}, 'replaced');
+    }
+  }
+});
+
+// Return ReactElement
+const options: HTMLReactParserOptions = {
+  replace({ attribs }) {
+    return attribs && attribs.id === 'remove' && <React.Fragment />;
+  }
+};
+
+domToReact(htmlToDOM('<p><br id="remove"></p>'), options);
+
+// Return domhandler node
+domToReact(htmlToDOM('<a id="header" href="#">Heading</a>'), {
+  replace: node => {
+    if (node.attribs && node.attribs.id === 'header') {
+      return {
+        type: 'h1',
+        props: { children: 'Heading' }
+      };
+    }
+  }
+});

package.json

@@ -4,7 +4,6 @@
   "description": "An HTML to React parser.",
   "author": "Mark <mark@remarkablemark.org>",
   "main": "index.js",
-  "types": "types",
   "scripts": {
     "benchmark": "node benchmark",
     "build": "npm run clean && npm run build:min && npm run build:unmin",
@@ -15,7 +14,7 @@
     "coveralls": "cat coverage/lcov.info | coveralls",
     "lint": "eslint --ignore-path .gitignore .",
     "lint:fix": "npm run lint -- --fix",
-    "dtslint": "dtslint types",
+    "dtslint": "dtslint .",
     "prepublishOnly": "npm run build",
     "release": "standard-version --no-verify",
     "test": "mocha"
@@ -35,7 +34,8 @@
     "converter"
   ],
   "dependencies": {
-    "html-dom-parser": "0.1.3",
+    "@types/domhandler": "2.4.1",
+    "html-dom-parser": "0.2.1",
     "react-dom-core": "0.0.4",
     "style-to-object": "0.2.2"
   },
@@ -67,7 +67,7 @@
   "files": [
     "dist",
     "lib",
-    "types/index.d.ts"
+    "index.d.ts"
   ],
   "license": "MIT"
 }

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["es6"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "baseUrl": ".",
+    "types": [],
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "paths": { "html-react-parser": ["."], "html-react-parser/lib/*": ["./lib/*"] },
+    "jsx": "react"
+  },
+  "files": [
+    "index.d.ts",
+    "lib/dom-to-react.d.ts",
+    "lint/types/index.test.tsx",
+    "lint/types/lib/dom-to-react.test.tsx"
+  ]
+}

tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "dtslint/dtslint.json"
+}