Add types

Closes GH-24.

Reviewed-by: Junyoung Choi <fluke8259@gmail.com>
Reviewed-by: Titus Wormer <tituswormer@gmail.com>

Author: ChristianMurphy

package.json

@@ -29,12 +29,16 @@
   "contributors": [
     "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)",
     "Jannis Redmann <mail@jannisr.de>",
-    "Koto Hajime <toxictoxer@gmail.com>"
+    "Koto Hajime <toxictoxer@gmail.com>",
+    "Christian Murphy <christian.murphy.42@gmail.com>"
   ],
   "files": [
-    "index.js"
+    "index.js",
+    "types/index.d.ts"
   ],
+  "types": "types/index.d.ts",
   "dependencies": {
+    "@types/unist": "^2.0.3",
     "comma-separated-tokens": "^1.0.0",
     "property-information": "^5.3.0",
     "space-separated-tokens": "^1.0.0",
@@ -43,7 +47,11 @@
     "web-namespaces": "^1.0.0"
   },
   "devDependencies": {
+    "@types/hyperscript": "0.0.4",
+    "@types/react": "^16.0.0",
+    "@types/virtual-dom": "^2.0.0",
     "browserify": "^16.0.0",
+    "dtslint": "^3.6.2",
     "hyperscript": "^2.0.0",
     "nyc": "^15.0.0",
     "prettier": "^2.0.0",
@@ -62,13 +70,14 @@
     "xo": "^0.30.0"
   },
   "scripts": {
-    "format": "remark . -qfo && prettier --write \"**/*.js\" && xo --fix",
+    "format": "remark . -qfo && prettier --write \"**/*.{js,ts}\" && xo --fix",
     "build-bundle": "browserify index.js -s hastToHyperscript > hast-to-hyperscript.js",
     "build-mangle": "browserify index.js -s hastToHyperscript -p tinyify > hast-to-hyperscript.min.js",
     "build": "npm run build-bundle && npm run build-mangle",
     "test-api": "node test",
     "test-coverage": "nyc --reporter lcov tape test.js",
-    "test": "npm run format && npm run build && npm run test-coverage"
+    "test-types": "dtslint types",
+    "test": "npm run format && npm run build && npm run test-coverage && npm run test-types"
   },
   "nyc": {
     "check-coverage": true,
@@ -90,6 +99,7 @@
     "rules": {
       "unicorn/no-fn-reference-in-iterator": "off",
       "unicorn/prefer-type-error": "off",
+      "@typescript-eslint/prefer-readonly-parameter-types": "off",
       "guard-for-in": "off",
       "no-self-compare": "off",
       "complexity": "off"

types/hast-to-hyperscript-test.ts

@@ -0,0 +1,42 @@
+import * as hastToHyperScript from 'hast-to-hyperscript'
+import {createElement as reactCreateElement} from 'react'
+import {h as virtualDomCreateElement} from 'virtual-dom'
+import * as hyperscriptCreateElement from 'hyperscript'
+import Vue from 'vue'
+
+const element = {
+  type: 'element',
+  tagName: 'a',
+  properties: {
+    href: 'https://alpha.com',
+    className: ['bravo'],
+    download: true
+  },
+  children: []
+}
+
+// Different options
+hastToHyperScript(hyperscriptCreateElement, element, 'h')
+hastToHyperScript(hyperscriptCreateElement, element, false)
+hastToHyperScript(hyperscriptCreateElement, element, {})
+hastToHyperScript(hyperscriptCreateElement, element, {
+  prefix: false
+})
+hastToHyperScript(hyperscriptCreateElement, element, {
+  space: 'svg'
+})
+hastToHyperScript(hyperscriptCreateElement, element, {
+  prefix: false,
+  space: 'svg'
+})
+hastToHyperScript(hyperscriptCreateElement, element, {
+  // $ExpectError
+  unknown: 'does not exist'
+})
+
+// Try different types of renderers
+hastToHyperScript(hyperscriptCreateElement, element) // $ExpectType Element
+hastToHyperScript(reactCreateElement, element) // $ExpectType ReactElement<{}, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>
+hastToHyperScript(virtualDomCreateElement, element) // $ExpectType VNode
+hastToHyperScript(new Vue().$createElement, element) // $ExpectType VNode
+hastToHyperScript((name: number) => name, element) // $ExpectError

types/index.d.ts

@@ -0,0 +1,52 @@
+// Minimum TypeScript Version: 3.2
+import {Node} from 'unist'
+
+declare namespace hastToHyperScript {
+  /**
+   * Basic shape of a create element function,
+   * this should be extended by a concrete type.
+   *
+   * @remark
+   * This exists to avoid needing to make all supported renders' typings as dependencies
+   */
+  type CreateElementLike = (
+    name: string,
+    attributes: {[key: string]: any},
+    children: any[]
+  ) => any
+
+  /**
+   * Prefix to use as a prefix for keys passed in attrs to h(), this behaviour is turned off by passing false, turned on by passing a string.
+   */
+  type Prefix = string | boolean
+
+  interface Options {
+    /**
+     * Prefix to use as a prefix for keys passed in attrs to h(), this behaviour is turned off by passing false, turned on by passing a string.
+     */
+    prefix?: Prefix
+
+    /**
+     * Whether node is in the 'html' or 'svg' space
+     */
+    space?: 'svg' | 'html'
+  }
+}
+
+/**
+ * Hast utility to transform a tree to something else through a hyperscript DSL.
+ *
+ * @param h Hyperscript function
+ * @param tree Tree to transform
+ * @param options Options or prefix
+ * @typeParam H a Hyperscript like function type, can be inferred
+ */
+declare function hastToHyperScript<
+  H extends hastToHyperScript.CreateElementLike
+>(
+  h: H,
+  tree: Node,
+  options?: hastToHyperScript.Prefix | hastToHyperScript.Options
+): ReturnType<H>
+
+export = hastToHyperScript

types/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015", "DOM"],
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "hast-to-hyperscript": ["index.d.ts"]
+    }
+  }
+}

types/tslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "semicolon": false,
+    "whitespace": false,
+    "max-line-length": false
+  }
+}