Add JSDoc based types

Author: wooorm

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+*.d.ts
 *.log
 coverage/
 node_modules/

build.js

@@ -4,7 +4,9 @@ import concat from 'concat-stream'
 import {bail} from 'bail'
 import unified from 'unified'
 import html from 'rehype-parse'
+// @ts-ignore
 import q from 'hast-util-select'
+// @ts-ignore
 import toString from 'hast-util-to-string'
 import {htmlElementAttributes} from './index.js'
 
@@ -21,19 +23,34 @@ if (!globals) {
 // Crawl WHATWG HTML.
 https.get('https://html.spec.whatwg.org/multipage/indices.html', onhtml)
 
+/**
+ * @param {import('http').IncomingMessage} response
+ */
 function onhtml(response) {
   response.pipe(concat(onconcat)).on('error', bail)
 
+  /**
+   * @param {Buffer} buf
+   */
   function onconcat(buf) {
     var nodes = q.selectAll('#attributes-1 tbody tr', processor.parse(buf))
     var index = -1
     var result = {}
+    /** @type {string[]} */
     var keys
+    /** @type {string} */
     var key
+    /** @type {string} */
     var name
+    /** @type {string} */
+    var value
+    /** @type {string[]} */
     var elements
+    /** @type {string} */
     var tagName
+    /** @type {string[]} */
     var attributes
+    /** @type {number} */
     var offset
 
     // Throw if we didn’t match, e.g., when the spec updates.
@@ -43,16 +60,16 @@ function onhtml(response) {
 
     while (++index < nodes.length) {
       name = toString(nodes[index].children[0]).trim()
-      elements = toString(nodes[index].children[1]).trim()
+      value = toString(nodes[index].children[1]).trim()
 
-      if (/custom elements/i.test(elements)) {
+      if (/custom elements/i.test(value)) {
         continue
       }
 
       offset = -1
-      elements = /HTML elements/.test(elements)
+      elements = /HTML elements/.test(value)
         ? ['*']
-        : elements.split(/;/g).map((d) => d.replace(/\([^)]+\)/g, '').trim())
+        : value.split(/;/g).map((d) => d.replace(/\([^)]+\)/g, '').trim())
 
       while (++offset < elements.length) {
         tagName = elements[offset].toLowerCase().trim()
@@ -75,9 +92,7 @@ function onhtml(response) {
 
       if (key !== '*') {
         htmlElementAttributes[key] = htmlElementAttributes[key].filter(
-          function (attribute) {
-            return !globals.includes(attribute)
-          }
+          (/** @type {string} */ d) => !globals.includes(d)
         )
       }
 

package.json

@@ -26,10 +26,15 @@
   "sideEffects": false,
   "type": "module",
   "main": "index.js",
+  "types": "index.d.ts",
   "files": [
+    "index.d.ts",
     "index.js"
   ],
   "devDependencies": {
+    "@types/concat-stream": "^1.6.0",
+    "@types/node": "^14.14.36",
+    "@types/tape": "^4.0.0",
     "bail": "^2.0.0",
     "c8": "^7.0.0",
     "concat-stream": "^2.0.0",
@@ -39,16 +44,21 @@
     "rehype-parse": "^7.0.0",
     "remark-cli": "^9.0.0",
     "remark-preset-wooorm": "^8.0.0",
+    "rimraf": "^3.0.0",
     "tape": "^5.0.0",
+    "type-coverage": "^2.0.0",
+    "typescript": "^4.0.0",
     "unified": "^9.0.0",
     "xo": "^0.38.0"
   },
   "scripts": {
+    "prepack": "npm run build && npm run format",
+    "build": "rimraf \"*.d.ts\" && tsc && type-coverage",
     "generate": "node build",
     "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
     "test-api": "node test.js",
     "test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov node test.js",
-    "test": "npm run generate && npm run format && npm run test-coverage"
+    "test": "npm run generate && npm run build && npm run format && npm run test-coverage"
   },
   "prettier": {
     "tabWidth": 2,
@@ -70,5 +80,10 @@
     "plugins": [
       "preset-wooorm"
     ]
+  },
+  "typeCoverage": {
+    "atLeast": 100,
+    "detail": true,
+    "strict": true
   }
 }

readme.md

@@ -37,16 +37,18 @@ console.log(htmlElementAttributes.ol)
 Yields:
 
 ```js
-[ 'accesskey',
+[
+  'accesskey',
   'autocapitalize',
   'autofocus',
   'class',
-  // ...
+  // …
   'style',
   'tabindex',
   'title',
-  'translate' ]
-[ 'compact', 'reversed', 'start', 'type' ]
+  'translate'
+]
+['compact', 'reversed', 'start', 'type']
 ```
 
 ## API

test.js

@@ -8,6 +8,7 @@ test('htmlElementAttributes', function (t) {
   t.equal(typeof htmlElementAttributes, 'object', 'should be an `object`')
 
   t.doesNotThrow(function () {
+    /** @type {string} */
     var key
 
     for (key in htmlElementAttributes) {
@@ -18,10 +19,15 @@ test('htmlElementAttributes', function (t) {
   }, 'values should be array')
 
   t.doesNotThrow(function () {
+    /** @type {string} */
     var key
+    /** @type {string[]} */
     var props
+    /** @type {number} */
     var index
+    /** @type {string} */
     var prop
+    /** @type {string} */
     var label
 
     for (key in htmlElementAttributes) {
@@ -33,7 +39,7 @@ test('htmlElementAttributes', function (t) {
           prop = props[index]
           label = prop + ' in ' + key
 
-          assert.ok(typeof prop, 'string', label + ' should be string')
+          assert.strictEqual(typeof prop, 'string', label + ' should be string')
           assert.strictEqual(
             prop,
             prop.toLowerCase(),

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "files": ["index.js"],
+  "include": ["*.js"],
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "checkJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
+  }
+}