use named exports for source-html and provide hooks to run the script…

…s via npm run

package.json

@@ -8,6 +8,8 @@
     "@types/markdown-it": "0.0.9",
     "@types/node": "12.12.8",
     "@types/parse5": "5.0.2",
+    "@types/prettier": "1.18.3",
+    "@types/puppeteer": "1.20.2",
     "@types/q": "1.5.2",
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
@@ -32,6 +34,9 @@
     "typescript": "3.5.3",
     "uuid": "3.3.3"
   },
+  "optionalDependencies": {
+    "puppeteer": "2.0.0"
+  },
   "dependencies": {
     "@atjson/document": "file:packages/@atjson/document",
     "@atjson/hir": "file:packages/@atjson/hir",

packages/@atjson/source-html/package.json

@@ -5,6 +5,10 @@
   "main": "dist/commonjs/index.js",
   "module": "dist/modules/index.js",
   "types": "dist/commonjs/index.d.ts",
+  "scripts": {
+    "generate-annotation-class-names": "npx ts-node ./scripts/generate-annotation-names.ts",
+    "generate-annotations": "npx ts-node ./scripts/generate-annotations.ts"
+  },
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"

packages/@atjson/source-html/scripts/generate-annotation-names.ts

@@ -0,0 +1,76 @@
+import { writeFileSync } from "fs";
+import { join } from "path";
+import * as puppeteer from "puppeteer";
+
+function classify(name: string) {
+  return name[0].toUpperCase() + name.slice(1);
+}
+
+(async () => {
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+
+  await page.goto("https://html.spec.whatwg.org/multipage/semantics.html");
+
+  let names: { [tagName: string]: string } = {};
+
+  while (true) {
+    let sectionNumber = await page.$$eval(".secno", elements => {
+      return elements[0] ? (elements[0] as HTMLSpanElement).innerText : "4";
+    });
+    if (!sectionNumber.match(/^4/)) break;
+
+    let hasSections = (await page.$$("h4")).length > 0;
+    if (!hasSections) {
+      await page.$eval("nav a:last-child", link =>
+        (link as HTMLAnchorElement).click()
+      );
+    }
+
+    // Grab all element definitions, and begin to
+    // parse and create annotation definitions for each one
+    let headings = await page.$$("h4");
+
+    for (let heading of headings) {
+      let isElementDefinition = await heading.$("dfn code");
+      if (!isElementDefinition) continue;
+
+      let id = await page.evaluate(element => element.id, heading);
+
+      // Multiple HTML elements are sometimes defined per section, like `sub` and `sup`.
+      let types = await heading.$$eval("dfn code", nodes =>
+        nodes.map(node => (node as HTMLElement).innerText)
+      );
+
+      // Find the Interface Definition Language class name for this element,
+      // and use that if it's defined.
+      let idlName = await page.evaluate(elementId => {
+        let element = document.getElementById(elementId)!.nextElementSibling;
+        let interfaceName = element
+          ? element.querySelector("code.idl dfn c-")
+          : null;
+        if (interfaceName) {
+          let domClassName = (interfaceName as HTMLElement).innerText;
+          return domClassName.replace(/^HTML(.*)Element$/, "$1");
+        }
+        return null;
+      }, id);
+
+      types.forEach(type => {
+        names[type] = idlName || classify(type);
+      });
+    }
+
+    // Next Section
+    await page.$eval("nav a:last-child", link =>
+      (link as HTMLAnchorElement).click()
+    );
+  }
+
+  writeFileSync(
+    join(__dirname, "class-names-2.json"),
+    JSON.stringify(names, null, 2)
+  );
+
+  browser.close();
+})();