@runtime-type-inspector/repl 1.0.0

package/ace-diff@2.3.0.css

@@ -0,0 +1,73 @@
+/*! Ace-diff | github.com/ace-diff/ace-diff */
+.acediff__wrap{
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-box-orient:horizontal;
+    -webkit-box-direction:normal;
+    -ms-flex-direction:row;
+    flex-direction:row;
+    position:absolute;
+    bottom:0;
+    top:0;
+    left:0;
+    height:100%;
+    width:100%;
+    overflow:auto
+}
+.acediff__gutter{
+    -webkit-box-flex:0;
+    -ms-flex:0 0 60px;
+    flex:0 0 60px;
+    border-left:1px solid #bcbcbc;
+    border-right:1px solid #bcbcbc;
+    overflow:hidden
+}
+.acediff__gutter,.acediff__gutter svg{
+    background-color:#efefef
+}
+.acediff__left,.acediff__right{
+    height:100%;
+    -webkit-box-flex:1;
+    -ms-flex:1;
+    flex:1
+}
+.acediff__diffLine{
+    background-color:#d8f2ff;
+    border-top:1px solid #a2d7f2;
+    border-bottom:1px solid #a2d7f2;
+    position:absolute;
+    z-index:4
+}
+.acediff__diffLine.targetOnly{
+    height:0!important;
+    border-top:1px solid #a2d7f2;
+    border-bottom:0;
+    position:absolute
+}
+.acediff__connector{
+    fill:#d8f2ff;
+    stroke:#a2d7f2
+}
+.acediff__copy--left,.acediff__copy--right{
+    position:relative
+}
+.acediff__copy--left div,.acediff__copy--right div{
+    color:#000;
+    text-shadow:1px 1px hsla(0,0%,100%,.7);
+    position:absolute;
+    margin:2px 3px;
+    cursor:pointer
+}
+.acediff__copy--right div:hover{
+    color:#004ea0
+}
+.acediff__copy--left{
+    float:right
+}
+.acediff__copy--left div{
+    right:0
+}
+.acediff__copy--left div:hover{
+    color:#c98100
+}

package/babel-helper-plugin-utils.mjs

@@ -0,0 +1,7 @@
+// Test: await import("@babel/helper-plugin-utils")
+/** @type {Record<string, any>} */
+const exports = {};
+globalThis.exports = exports;
+await import("../node_modules/@babel/helper-plugin-utils/lib/index.js");
+export const {declare, declarePreset} = exports;
+export default exports;

package/babel-parser.mjs

@@ -0,0 +1,8 @@
+// Note: this is still ugly, but Babel 8 should be "nice" ESM (when it's out)
+// Test: const {parse} = await import("@babel/parser");
+/** @type {Record<string, any>} */
+const exports = {};
+globalThis.exports = exports;
+await import("./node_modules/@babel/parser/lib/index.js");
+export const {parse, parseExpression, tokTypes} = exports;
+export default exports;

package/babel-plugin-syntax-typescript.mjs

@@ -0,0 +1,58 @@
+
+// Test: const {babelPluginSyntaxTypeScript} = await import("@babel/plugin-syntax-typescript");
+/*
+const {parse} = await import("@babel/parser");
+parse('type tmp = 123;', {
+  plugins: [babelPluginSyntaxTypeScript?]
+})
+*/
+import {declare} from '@babel/helper-plugin-utils';
+/**
+ * @param {any[]} plugins 
+ * @param {string} name 
+ */
+function removePlugin(plugins, name) {
+  const indices = [];
+  plugins.forEach((plugin, i) => {
+    const n = Array.isArray(plugin) ? plugin[0] : plugin;
+    if (n === name) {
+      indices.unshift(i);
+    }
+  });
+  for (const i of indices) {
+    plugins.splice(i, 1);
+  }
+};
+const babelPluginSyntaxTypeScript = declare((api, opts) => {
+  api.assertVersion(7);
+  const {
+    disallowAmbiguousJSXLike,
+    dts
+  } = opts;
+  {
+    var {
+      isTSX
+    } = opts;
+  }
+  return {
+    name: "syntax-typescript",
+    manipulateOptions(opts, parserOpts) {
+      {
+        const {
+          plugins
+        } = parserOpts;
+        removePlugin(plugins, "flow");
+        removePlugin(plugins, "jsx");
+        plugins.push("objectRestSpread", "classProperties");
+        if (isTSX) {
+          plugins.push("jsx");
+        }
+      }
+      parserOpts.plugins.push(["typescript", {
+        disallowAmbiguousJSXLike,
+        dts
+      }]);
+    }
+  };
+});
+export {babelPluginSyntaxTypeScript};

package/importmap.js

@@ -0,0 +1,28 @@
+/**
+ * @param {string} content - The content.
+ * @returns {string} data:text string
+ */
+function importFile(content) {
+  return "data:text/javascript;base64," + btoa(content);
+}
+const imports = {
+  "@runtime-type-inspector/runtime"   : '../src-runtime/index.mjs',
+  "@runtime-type-inspector/transpiler": '../src-transpiler/index.mjs',
+  "@babel/parser": "./babel-parser.mjs",
+  //"@babel/helper-plugin-utils": "./babel-helper-plugin-utils.mjs",
+  //"@babel/plugin-syntax-typescript": "./babel-plugin-syntax-typescript.mjs",
+  "fs": importFile("export default {};"),
+  "typescript": importFile("export default ts;"), // UMD import
+};
+if (location.host === 'runtimetypeinspector.org' || location.port === '7000') {
+  imports['@runtime-type-inspector/runtime'   ] = './node_modules/@runtime-type-inspector/runtime/index.mjs';
+  imports['@runtime-type-inspector/transpiler'] = './node_modules/@runtime-type-inspector/transpiler/index.mjs';
+}
+const importmap = document.createElement("script");
+importmap.type = "importmap";
+importmap.textContent = JSON.stringify({imports});
+const dom = document.body || document.head;
+if (!dom) {
+  throw new Error("neither <body> nor <head> available to append importmap");
+}
+dom.append(importmap);

package/index.html

@@ -0,0 +1,33 @@
+<html>
+  <head>
+    <script src="importmap.js"></script>
+    <script src="node_modules/ace-builds/src/ace.js"></script>
+    <script src="node_modules/typescript/lib/typescript.js"></script>
+  </head>
+  <body>
+    <select id="action">
+      <option value="typechecking">Add full typechecking</option>
+      <option value="code2ast2code">code2ast2code (testing Stringifier class)</option>
+      <option value="ast">Show AST from JS</option>
+      <option value="ast-ts">Show AST from TS</option>
+      <option value="ast-babel-ts">Show AST from Babel-TS</option>
+      <option value="jsdoc">Show parsed JSDoc</option>
+      <option value="expand-type">expandType</option>
+      <option value="eval">Eval</option>
+    </select>
+    <button onclick="runAction()">Run action</button>
+    <select id="preferred-expand-type">
+      <option value="expandTypeTS">expandTypeTS</option>
+      <option value="expandTypeDepFree">expandTypeDepFree</option>
+    </select>
+    <button id="repl">REPL</button>
+    <button id="button-compare-ast" onclick="compareAST()">Compare AST</button>
+    <button id="button-set-hash" onclick="setHash()">Set hash</button>
+    Left: <input id="left" type="checkbox" checked></input>
+    Right: <input id="right" type="checkbox" checked></input>
+    <script type="module">
+      import * as Index from "./index.mjs";
+      Object.assign(window, {...Index});
+    </script>
+  </body>
+</html>

package/index.mjs

@@ -0,0 +1,473 @@
+import {parse} from '@babel/parser';
+import {
+  parseJSDoc,
+  addTypeChecks,
+  expandType,
+  expandTypeBabelTS,
+  expandTypeDepFree,
+  code2ast2code,
+  ast2jsonForComparison
+} from '@runtime-type-inspector/transpiler';
+import * as ti  from '@runtime-type-inspector/transpiler';
+import * as rti from '@runtime-type-inspector/runtime';
+const hashvars = new Map(location.hash.slice(1).split('&').map(_ => _.split('=')));
+if (!hashvars.get('action')) {
+  hashvars.set('action', 'typechecking');
+}
+const currentAction = hashvars.get('action');
+const selectAction = document.getElementById("action");
+if (!(selectAction instanceof HTMLSelectElement)) {
+  throw new Error('This module requires a <select id="action" ...');
+}
+const selectPreferredExpandType = document.getElementById('preferred-expand-type');
+if (!(selectPreferredExpandType instanceof HTMLSelectElement)) {
+  throw new Error('This module requires a <select id="action" ...');
+}
+function setHash() {
+  const left = btoa(getLeft());
+  const right = btoa(getRight());
+  location.hash = `action=${selectAction.value}&left=${left}&right=${right}`;
+}
+// selectPreferredExpandType.value;
+selectAction.value = currentAction;
+const buttonREPL = document.getElementById('repl');
+if (!(buttonREPL instanceof HTMLButtonElement)) {
+  throw new Error('This module requires a <button id="repl" ...');
+}
+const inputLeft = document.getElementById('left');
+if (!(inputLeft instanceof HTMLInputElement)) {
+  throw 'This module requires a <input id="left" ...';
+}
+const inputRight = document.getElementById('right');
+if (!(inputRight instanceof HTMLInputElement)) {
+  throw 'This module requires a <input id="right" ...';
+}
+inputLeft.onchange = (event) => {
+  const {checked} = event.target;
+  if (checked) {
+    // Unhide right editor and resize right one to half size again
+    aceDivLeft.style.display = "";
+    setHalfSizeLeft();
+    setHalfSizeRight();
+  } else {
+    // Hide left editor and resize right one to full size
+    aceDivLeft.style.display = "none";
+    Object.assign(aceDivRight.style, {
+      position: "absolute",
+      left: "0vw",
+      top: "40px",
+      width: "100vw",
+      height: "calc(100vh - 40px)",
+    });
+  }
+}
+inputRight.onchange = (event) => {
+  const {checked} = event.target;
+  if (checked) {
+    // Unhide left editor and resize right one to half size again
+    aceDivRight.style.display = "";
+    setHalfSizeLeft();
+    setHalfSizeRight();
+  } else {
+    // Hide left editor and resize right one to full size
+    aceDivRight.style.display = "none";
+    Object.assign(aceDivLeft.style, {
+      position: "absolute",
+      left: "0vw",
+      top: "40px",
+      width: "100vw",
+      height: "calc(100vh - 40px)",
+    });
+  }
+}
+function getPreferredExpandType() {
+  const {value} = selectPreferredExpandType;
+  if (value == 'expandTypeTS') {
+    return expandType;
+  }
+  return expandTypeDepFree;
+}
+function getCodeForAction() {
+  switch (getAction()) {
+    case 'typechecking':
+      return "const ret = addTypeChecks(jsdoc, {expandType: getPreferredExpandType()});\nsetRight(ret);";
+    case 'jsdoc':
+      return "const ret = parseJSDoc(jsdoc);\nsetRight(JSON.stringify(ret, null, 2));";
+    case 'code2ast2code':
+      return "const ret = code2ast2code(jsdoc);\nsetRight(ret);";
+    case 'expand-type':
+      return 'setRight(expandTypeAll(jsdoc));';
+  }
+  return '// This action has no special code';
+}
+/**
+ * @param {string} name - The name.
+ * @param {any} data - Function or object.
+ * @returns {string}
+ */
+function data2code(name, data) {
+  if (data instanceof Function) {
+    return data.toString();
+  } else if (data instanceof Object && data !== null) {
+    return `let ${name} = ${JSON.stringify(data, null, 2)};`;
+  }
+  return `// data2code> unhandled type: name=${name}, type of data: ${typeof data}`;
+}
+/**
+ * Since Asserter extends Stringifier, it needs to appear afterwards.
+ * @param {string} a 
+ * @param {string} b 
+ * @returns {-1|0|1}
+ */
+function compareBaseClasses(a, b) {
+  if (a.startsWith("class Asserter") && b.startsWith("class Stringifier")) {
+    return 1;
+  }
+  if (b.startsWith("class Asserter") && a.startsWith("class Stringifier")) {
+    return -1;
+  }
+  return 0;
+}
+function activateREPL() {
+  const code = Object.entries(ti)
+    .map(([key, val]) => data2code(key, val))
+    .sort(compareBaseClasses)
+    .join('\n');
+  const codeLocal = [getPreferredExpandType, expandTypeAll].join('\n');
+  const leftContent = aceEditorLeft.getValue().replaceAll('`', '\\`');
+  const leftContentAsCode = `const jsdoc = \`${leftContent}\`;`;
+  const out = [leftContentAsCode, code, codeLocal, getCodeForAction()].join('\n');
+  setLeft(out);
+  // @ts-ignore
+  selectAction.value = "eval";
+}
+buttonREPL.onclick = activateREPL;
+Object.assign(window, {
+  parse,
+  ti, ...ti,
+  rti, ...rti,
+});
+let lastStats = {};
+function statsPrint() {
+  console.table(lastStats);
+}
+/**
+ * @param {string} value
+ */
+function setLeft(value) {
+  if (typeof value !== 'string') {
+    aceEditorRight.setValue(`Cannot set type ${typeof value}`);
+    return;
+  }
+  aceEditorLeft.setValue(value);
+  aceEditorLeft.clearSelection(); // setValue() selects everything, so unselect it now
+}
+/**
+ * @param {string} value
+ */
+function setRight(value) {
+  if (typeof value !== 'string') {
+    aceEditorRight.setValue(`Cannot set type ${typeof value}`);
+    return;
+  }
+  aceEditorRight.setValue(value);
+  aceEditorRight.clearSelection(); // setValue() selects everything, so unselect it now
+}
+function getLeft() {
+  return aceEditorLeft.getValue();
+}
+function getRight() {
+  return aceEditorRight.getValue();
+}
+function actionAST() {
+  const ast = parse(getLeft(), {sourceType: 'module'});
+  const out = JSON.stringify(ast, function (name, val) {
+    if (name === "loc" || name === "start" || name === "end") {
+      return undefined; // remove
+    }
+    return val; // keep
+  }, 2);
+  setRight(out);
+}
+function actionAST_TS() {
+  const str = getLeft();
+  const ast = ts.createSourceFile('repl.ts', str, ts.ScriptTarget.Latest, false /*setParentNodes*/);
+  const out = JSON.stringify(ast, function(name, val) {
+    if (name === "parent") {
+      return undefined; // remove
+    }
+    return val; // keep
+  }, 2);
+  setRight(out);
+}
+function actionAST_BabelTS() {
+  const str = getLeft();
+  const ast = parse(str, {plugins: ['typescript'], sourceType: "module"});
+  const out = JSON.stringify(ast, null, 2);
+  setRight(out);
+}
+/**
+ * @param {string} type - The type like `...string`.
+ * @returns {string} Structured output of all expandType functions.
+ */
+function expandTypeAll(type) {
+  let out = '';
+  out += '// expandTypeTS:\n';
+  try {
+    const ts = expandType(type);
+    out += JSON.stringify(ts, null, 2) + '\n';
+  } catch (e) {
+    out += e + '\n';
+  }
+  out += '// expandTypeBabelTS:\n';
+  try {
+    const babelts = expandTypeBabelTS(type);
+    out += JSON.stringify(babelts, null, 2) + '\n';
+  } catch (e) {
+    out += e + '\n';
+  }
+  out += '// expandTypeDepFree:\n';
+  try {
+    const depFree = expandTypeDepFree(type);
+    out += JSON.stringify(depFree, null, 2) + '\n';
+  } catch (e) {
+    out += e + '\n';
+  }
+  return out;
+}
+function actionExpandType() {
+  setRight(expandTypeAll(getLeft()));
+}
+function actionJSDoc() {
+  const ret = parseJSDoc(getLeft());
+  /** @type {string} */
+  let out;
+  if (ret === undefined) {
+    out = '// parseJSDoc returned undefined';
+  } else {
+    out = '// parseJSDoc output:\n' + JSON.stringify(ret, null, 2);
+  }
+  setRight(out);
+}
+function actionTypeChecking() {
+  setRight(addTypeChecks(getLeft(), {expandType: getPreferredExpandType()}));
+}
+/**
+ * @todo use Monaco Diff Editor
+ * @param {string} left - Left source code.
+ * @param {string} right - Right source code.
+ */
+function compareAST(left = getLeft(), right = getRight()) {
+  const l = parse(left , {sourceType: 'module'});
+  const r = parse(right, {sourceType: 'module'});
+  const ljson = ast2jsonForComparison(l);
+  const rjson = ast2jsonForComparison(r);
+  const test = ljson === rjson;
+  const _ = test ? ' ' : ' NOT ';
+  console.log(`AST is ${_} equal`);
+  // todo add conversion buttons
+  //console.log('ljson', ljson);
+  //console.log('rjson', rjson);
+  setLeft(ljson);
+  setRight(rjson);
+}
+function actionCode2Ast2Code() {
+  const content = getLeft();
+  const out = code2ast2code(content);
+  if (!out) {
+    setRight("// code2ast2code failed");
+    return;
+  }
+  setRight(out);
+  // compareAST(content, out);
+}
+async function runAction() {
+  const action = getAction();
+  switch (action) {
+    case 'ast':
+      await actionAST();
+      break;
+    case 'ast-ts':
+      await actionAST_TS();
+      break;
+    case 'ast-babel-ts':
+      await actionAST_BabelTS();
+      break;
+    case 'jsdoc':
+      await actionJSDoc();
+      break;
+    case 'typechecking':
+      await actionTypeChecking();
+      break;
+    case 'code2ast2code':
+      await actionCode2Ast2Code();
+      break;
+    case 'eval':
+      eval(aceEditorLeft.getValue());
+      break;
+    case 'expand-type':
+      await actionExpandType();
+      break;
+    default:
+      setRight(`Action ${action} not implemented`);
+  }
+}
+async function insertTypes() {
+  const ret = await postData('insertTypes', {
+    file: aceEditorLeft.getValue()
+  });
+  ret.logs?.map(_ => console.log(..._));
+  ret.warns?.map(_ => console.warn(..._));
+  console.log(ret);
+  if (ret.success) {
+    lastStats = ret.stats;
+    statsPrint();
+    aceEditorRight.setValue(ret.result);
+    if (ret.insertTypesAndEval) {
+      eval(ret.result.replaceAll('export ', ''));
+    }
+  } else {
+    aceEditorRight.setValue(JSON.stringify(ret, null, 2));
+  }
+  aceEditorRight.clearSelection(); // setValue() selects everything, so unselect it now
+}
+/**
+ * @typedef {'typechecking'|'code2ast2code'|'ast'|'ast-ts'|'jsdoc'|'eval'|'expand-type'} Action
+ */
+/** @returns {Action} */
+const getAction = () => selectAction.value;
+/**
+ * @param {string} id - The ID.
+ * @returns {HTMLDivElement} - The DIV element.
+ */
+function createDivWithId(id) {
+  let div = document.getElementById(id);
+  if (!div) {
+    div = document.createElement('div');
+    div.id = id;
+  }
+  if (!(div instanceof HTMLDivElement)) {
+    throw "createDivWithId> div creation failed";
+  }
+  return div;
+}
+const aceDivLeft = createDivWithId("aceDivLeft");
+const aceDivRight = createDivWithId("aceDivRight");
+document.body.append(aceDivLeft, aceDivRight);
+function setHalfSizeLeft() {
+  Object.assign(aceDivLeft.style, {
+    position: "absolute",
+    left: "0px",
+    top: "40px",
+    width: "50vw",
+    height: "calc(100vh - 40px)",
+  });
+}
+function setHalfSizeRight() {
+  Object.assign(aceDivRight.style, {
+    position: "absolute",
+    left: "50vw",
+    top: "40px",
+    width: "50vw",
+    height: "calc(100vh - 40px)",
+  });
+}
+setHalfSizeLeft();
+setHalfSizeRight();
+/**
+ * @param {string} id - ID of editor.
+ * @param {string} txt - Initial text of editor.
+ * @param {Function} execShiftEnter - Function for Shift+Enter
+ * @param {Function} execAltEnter - Function for Alt+Enter
+ * @returns {ACE.Editor} The ACE editor.
+ */
+function setupAce(id, txt, execShiftEnter, execAltEnter) {
+  const aceEditor = ace.edit(id);
+  aceEditor.setFontSize(20);
+  aceEditor.setTheme('ace/theme/chrome');
+  aceEditor.session.setMode('ace/mode/javascript');
+  aceEditor.session.setUseWorker(false);
+  aceEditor.session.setOptions({
+    tabSize: 2,
+    useSoftTabs: true
+  });
+  aceEditor.setValue(txt);
+  aceEditor.clearSelection(); // setValue() selects everything, so unselect it now
+  aceEditor.commands.addCommand({
+    name: 'Insert types',
+    bindKey: {win: 'Shift-Enter', mac: 'Shift-Enter'},
+    exec: execShiftEnter
+  });
+  aceEditor.commands.addCommand({
+    name: 'Show AST',
+    bindKey: {win: 'Alt-Enter', mac: 'Alt-Enter'},
+    exec: execAltEnter
+  });
+  return aceEditor;
+}
+const aceEditorLeft = setupAce(
+  'aceDivLeft',
+  `// Shift-Enter: convert content of left editor,
+//              write result to right editor
+// Tip: open F12/DevTools to see errors and warnings
+// Press Shift-Enter in right editor to eval result.
+/**
+ * @param {number} a
+ * @param {number} b
+ */
+function add(a, b) {
+  return a + b;
+}
+/** @type {number[]} */
+const arr = [10_20];
+const [a, b] = arr;
+const ret = add(a, b);
+console.log("ret", ret);
+`,
+  //editor => insertTypes(),
+  editor => runAction(),
+  editor => actionAST()
+);
+const aceEditorRight = setupAce(
+  'aceDivRight',
+  '// Result editor',
+  editor => runRightEditor(),
+  editor => console.log("right alt")
+);
+function runRightEditor() {
+  const src = getRight();
+  if (src.includes('import') || src.includes('export')) {
+    const script = document.createElement("script");
+    script.type = "module";
+    script.textContent = src;
+    document.head.append(script);
+    return;
+  }
+  eval(src);
+}
+if (hashvars.get('left')) {
+  setLeft(atob(hashvars.get('left')));
+}
+if (hashvars.get('right')) {
+  setRight(atob(hashvars.get('right')));
+}
+export {
+  setHash,
+  hashvars,
+  selectAction,
+  selectPreferredExpandType,
+  buttonREPL,
+  aceDivLeft,
+  aceDivRight,
+  aceEditorLeft,
+  aceEditorRight,
+  setLeft,
+  setRight,
+  getLeft,
+  getRight,
+  compareAST,
+  getPreferredExpandType,
+  expandTypeAll,
+  runAction,
+  data2code,
+};

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@runtime-type-inspector/repl",
+  "version": "1.0.0",
+  "description": "REPL of RuntimeTypeInspector.js",
+  "main": "index.html",
+  "dependencies": {
+    "@runtime-type-inspector/transpiler": "^3.0.3",
+    "ace-builds": "^1.28.0",
+    "express": "^4.18.2"
+  },
+  "author": "Hermann Rolfes (kungfooman)",
+  "license": "MIT",
+  "publishConfig": {"access": "public"}
+}

package/serve.cjs

@@ -0,0 +1,24 @@
+var express = require('express');
+
+express.static.mime.define({'text/javascript': ['mjs']});
+var app = express();
+
+app.use(express.static('.'));
+
+//Serves all the request which includes /images in the url from Images folder
+app.use('/images', express.static(__dirname + '/node_modules'));
+app.use('/', express.static(__dirname));
+
+var server = app.listen(7000);
+
+/*
+const express = require('express');
+const app = express();
+const port = 6000;
+app.get('/', (req, res) => {
+  res.send('Hello World!');
+});
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`);
+});
+*/

package/test.css

@@ -0,0 +1,4 @@
+#buttons {
+  overflow: scroll;
+  height: 80vh;
+}

package/test.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>RTI Test</title>
+    <script src="./importmap.js"></script>
+    <script src="../node_modules/typescript/lib/typescript.js"></script>
+    <!-- Include Ace editor first -->
+    <!--
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
+    -->
+    <script src="../node_modules/ace-builds/src/ace.js"></script>
+    <!-- Include Ace-diff JS and CSS (using unpkg.com CDN in this case) -->
+    <script src="https://unpkg.com/ace-diff@^2"></script>
+    <link href="./ace-diff@2.3.0.css" rel="stylesheet">
+    <link href="./test.css" rel="stylesheet">
+    <!-- Bootstrap for additional styling of the demo -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />
+    <style>
+      #buttons {
+        overflow: scroll;
+        height: 80vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>RTI Test</h1>
+      <div class="row">
+        <div class="col-sm-4">
+          <div id="buttons"></div>
+          <p>A red test requires more work, while a green test passes.</p>
+          <hr>
+          <h2>Troubleshooting</h2>
+          <p>If you run into a problem please open an issue on GitHub.</p>
+        </div>
+        <div class="col-sm-8" id="here">
+          <div class="custom"></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="test.js"></script>
+  </body>
+</html>

package/test.js

@@ -0,0 +1,75 @@
+import {addTypeChecks, expandType} from "@runtime-type-inspector/transpiler";
+/**
+ * @param {string} a - Left text.
+ * @param {string} b - Right text.
+ * @returns {object} AceDiff editor instance.
+ */
+function addDiff(a, b) {
+  const element = document.createElement('div');
+  document.getElementById("here").innerHTML = '';
+  document.getElementById("here").append(element);
+  return new AceDiff({
+    element,
+    left: {
+      content: a,
+    },
+    right: {
+      content: b,
+    },
+  });
+}
+/**
+ * @param {*} input - Source code to normalize.
+ * @returns {string} Normalized output.
+ */
+function normalize(input) {
+  // Remove multiple newlines into one
+  // I would rather not do it, but Stringifier needs a bit more love in other areas:
+  //  - multiline array output when elements surpass a max-col option
+  let output = input.replace(/\n+/g, '\n').trim();
+  /** @todo Remove bunch of whitespaces from test outputs */
+  output = output
+    .split('\n')
+    .filter(_ => _.trim().length)
+    .map(_ => _.trim())
+    .join('\n');
+  return output;
+}
+async function main() {
+  const resp = await fetch("../test/typechecking.json");
+  const json = await resp.json();
+  const buttonsDiv = document.getElementById('buttons');
+  if (!(buttonsDiv instanceof HTMLDivElement)) {
+    throw new Error("buttons isn't a <div>");
+  }
+  const aceDiffer = addDiff('1\n2\n3\n4\n', '1\n2\n33\n4\n');
+  /** @type {HTMLButtonElement[]} */
+  const buttons = [];
+  for (const {input, output} of json) {
+    const button = document.createElement('button');
+    buttonsDiv.append(button);
+    button.innerText = input;
+    const res       = await fetch('../' + input);
+    const txtInput  = await res.text();
+    const res2      = await fetch('../' + output);
+    const txtOutput = await res2.text();
+    const actualResult = addTypeChecks(txtInput, {expandType, addHeader: false});
+    const success = normalize(actualResult) === normalize(txtOutput);
+    button.style.backgroundColor = success ? 'lime' : 'red';
+    button.onclick = async () => {
+      aceDiffer.editors.left.ace.setValue(txtInput);
+      aceDiffer.editors.left.ace.clearSelection();
+      let rightText = txtOutput;
+      if (!success) {
+        rightText += `\n\n// Actual result:\n${actualResult}`;
+      }
+      aceDiffer.editors.right.ace.setValue(rightText);
+      aceDiffer.editors.right.ace.clearSelection();
+      //console.log({input, output});
+    };
+    buttons.push(button);
+  }
+  buttons[1].onclick();
+  Object.assign(window, {aceDiffer, json});
+}
+main();