@runtime-type-inspector/repl 3.3.7 → 4.0.1

package/generator test devtools.js

@@ -0,0 +1,4 @@
+const generate = (await import("@babel/generator")).default;
+const ast = parse(getLeft(), {sourceType: "module"});
+setRight(generate(ast).code);
+

package/importmap (generator).js

@@ -0,0 +1,99 @@
+/**
+ * @param {string} content - The content.
+ * @returns {string} data:text string
+ */
+function importFile(content) {
+  return "data:text/javascript;base64," + btoa(content);
+}
+const nodeModules = location.href + './node_modules/';
+// For React ESM importmap to work you need React ESM: npm i react-es6
+const react = {
+  'prop-types'               : nodeModules + 'react-es6/prop-types/index.js',
+  'tiny-warning'             : nodeModules + 'react-es6/tiny-warning.mjs',
+  'tiny-invariant'           : nodeModules + 'react-es6/tiny-invariant.mjs',
+  'mini-create-react-context': nodeModules + 'react-router/node_modules/mini-create-react-context/dist/esm/index.js',
+  'path-to-regexp'           : nodeModules + 'react-es6/path-to-regexp.mjs',
+  'react-is'                 : nodeModules + 'react-es6/react-is.mjs',
+  'hoist-non-react-statics'  : nodeModules + 'react-es6/hoist-non-react-statics.mjs',
+  'resolve-pathname'         : nodeModules + 'react-es6/resolve-pathname.mjs',
+  'isarray'                  : nodeModules + 'react-es6/isarray.mjs',
+};
+const reactMin = {
+  ...react,
+  'react'           : nodeModules + 'react-es6/build/react.min.mjs',
+  'react-dom'       : nodeModules + 'react-es6/build/react-dom.min.mjs',
+  'react-dom/client': nodeModules + 'react-es6/build/react-dom-client.min.mjs',
+};
+window.process = {
+  env: {
+    BABEL_TYPES_8_BREAKING: true,
+  }
+};
+const imports = {
+  "@runtime-type-inspector/runtime"   : '../src-runtime/index.js',
+  "@runtime-type-inspector/transpiler": '../src-transpiler/index.js',
+  "@babel/parser"                     : nodeModules + '@babel/parser/lib/index.js',
+  // All needed for generator:
+  "@babel/generator"                  : nodeModules + '@babel/generator/lib/index.js',
+  "@babel/types"                      : nodeModules + '@babel/types/lib/index.js',
+  "@babel/helper-validator-identifier": nodeModules + '@babel/helper-validator-identifier/lib/index.js',
+  "@babel/helper-string-parser"       : nodeModules + '@babel/helper-string-parser/lib/index.js',
+  "@jridgewell/gen-mapping"           : importFile(`
+    export function GenMapping() {
+      throw Error("GenMapping not implemented");
+    }
+    export function toEncodedMap() {
+      throw Error("toEncodedMap not implemented");
+    }
+    export function setSourceContent() {
+      throw Error("setSourceContent not implemented");
+    }
+    export function toDecodedMap() {
+      throw Error("toDecodedMap not implemented");
+    }
+    export function allMappings() {
+      throw Error("allMappings not implemented");
+    }
+    export function maybeAddMapping() {
+      throw Error("maybeAddMapping not implemented");
+    }
+    export default {}`),
+  "@jridgewell/trace-mapping"           : importFile(`
+    export function originalPositionFor() {}
+    export function TraceMap() {}
+    export default {}
+    `),
+  "jsesc"           : importFile('export default {}'),
+  "process"                           : importFile("export default {};"),
+  // </for generator>
+  "display-anything"                  : nodeModules + 'display-anything/src/index.js',
+  "worker-with-import-map"            : nodeModules + 'worker-with-import-map/src/index.js',
+  "test-import-validation-b"          : '../test/typechecking/import-validation/b.js',
+  //"@babel/helper-plugin-utils"      : './babel-helper-plugin-utils.js',
+  //"@babel/plugin-syntax-typescript" : './babel-plugin-syntax-typescript.js',
+  "fs"                                : importFile("export default {};"),
+  "typescript"                        : importFile(`
+    globalThis.module = {exports: {}};
+    await import("${nodeModules}typescript/lib/typescript.js");
+    export default globalThis.module.exports;
+  `),
+  "ace-builds": importFile(`
+    await import("${nodeModules}ace-builds/src/ace.js");
+    window.ace.config.set('basePath', "${nodeModules}ace-builds/src");
+    const {ace} = window;
+    export {ace};
+  `),
+  ...reactMin,
+};
+if (location.host.includes('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/importmap.js

@@ -5,16 +5,47 @@
 function importFile(content) {
   return "data:text/javascript;base64," + btoa(content);
 }
+const nodeModules = location.href + './node_modules/';
+// For React ESM importmap to work you need React ESM: npm i react-es6
+const react = {
+  'prop-types'               : nodeModules + 'react-es6/prop-types/index.js',
+  'tiny-warning'             : nodeModules + 'react-es6/tiny-warning.mjs',
+  'tiny-invariant'           : nodeModules + 'react-es6/tiny-invariant.mjs',
+  'mini-create-react-context': nodeModules + 'react-router/node_modules/mini-create-react-context/dist/esm/index.js',
+  'path-to-regexp'           : nodeModules + 'react-es6/path-to-regexp.mjs',
+  'react-is'                 : nodeModules + 'react-es6/react-is.mjs',
+  'hoist-non-react-statics'  : nodeModules + 'react-es6/hoist-non-react-statics.mjs',
+  'resolve-pathname'         : nodeModules + 'react-es6/resolve-pathname.mjs',
+  'isarray'                  : nodeModules + 'react-es6/isarray.mjs',
+};
+const reactMin = {
+  ...react,
+  'react'           : nodeModules + 'react-es6/build/react.min.mjs',
+  'react-dom'       : nodeModules + 'react-es6/build/react-dom.min.mjs',
+  'react-dom/client': nodeModules + 'react-es6/build/react-dom-client.min.mjs',
+};
 const imports = {
   "@runtime-type-inspector/runtime"   : '../src-runtime/index.js',
   "@runtime-type-inspector/transpiler": '../src-transpiler/index.js',
-  "@babel/parser"                     : "./babel-parser.js",
-  "display-anything"                  : "./node_modules/display-anything/src/index.js",
-  "test-import-validation-b"          : "../test/typechecking/import-validation/b.js",
-  //"@babel/helper-plugin-utils"      : "./babel-helper-plugin-utils.js",
-  //"@babel/plugin-syntax-typescript" : "./babel-plugin-syntax-typescript.js",
+  "@babel/parser"                     : nodeModules + '@babel/parser/lib/index.js',
+  "display-anything"                  : nodeModules + 'display-anything/src/index.js',
+  "worker-with-import-map"            : nodeModules + 'worker-with-import-map/src/index.js',
+  "test-import-validation-b"          : '../test/typechecking/import-validation/b.js',
+  //"@babel/helper-plugin-utils"      : './babel-helper-plugin-utils.js',
+  //"@babel/plugin-syntax-typescript" : './babel-plugin-syntax-typescript.js',
   "fs"                                : importFile("export default {};"),
-  "typescript"                        : importFile("export default ts;"), // UMD import
+  "typescript"                        : importFile(`
+    globalThis.module = {exports: {}};
+    await import("${nodeModules}typescript/lib/typescript.js");
+    export default globalThis.module.exports;
+  `),
+  "ace-builds": importFile(`
+    await import("${nodeModules}ace-builds/src/ace.js");
+    window.ace.config.set('basePath', "${nodeModules}ace-builds/src");
+    const {ace} = window;
+    export {ace};
+  `),
+  ...reactMin,
 };
 if (location.host.includes('runtimetypeinspector.org') || location.port === '7000') {
   imports['@runtime-type-inspector/runtime'   ] = './node_modules/@runtime-type-inspector/runtime/index.mjs';

package/index.html

@@ -1,8 +1,6 @@
 <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>
     <link rel="stylesheet" href="./node_modules/display-anything/src/DisplayAnything.css"></link>
   </head>
   <body>

package/index.js

@@ -1,4 +1,6 @@
 import {parse} from '@babel/parser';
+import {ace} from 'ace-builds';
+import ts from 'typescript';
 import {
   parseJSDoc,
   addTypeChecks,
@@ -6,7 +8,8 @@ import {
   expandTypeBabelTS,
   expandTypeDepFree,
   code2ast2code,
-  ast2jsonForComparison
+  ast2jsonForComparison,
+  parserOptions,
 } from '@runtime-type-inspector/transpiler';
 import * as ti  from '@runtime-type-inspector/transpiler';
 import * as rti from '@runtime-type-inspector/runtime';
@@ -169,6 +172,7 @@ function activateREPLRuntime() {
 buttonREPL.onclick = activateREPL;
 Object.assign(window, {
   parse,
+  ts,
   ti, ...ti,
   rti, ...rti,
 });
@@ -205,7 +209,7 @@ function getRight() {
   return aceEditorRight.getValue();
 }
 function actionAST() {
-  const ast = parse(getLeft(), {sourceType: 'module'});
+  const ast = parse(getLeft(), parserOptions);
   const out = JSON.stringify(ast, function (name, val) {
     if (name === "loc" || name === "start" || name === "end") {
       return undefined; // remove
@@ -438,6 +442,7 @@ const aceEditorLeft = setupAce(
 //              write result to right editor
 // Tip: open F12/DevTools to see errors and warnings
 // Press Shift-Enter in right editor to eval result.
+import {TypePanel} from '@runtime-type-inspector/runtime';
 /**
  * @param {number} a
  * @param {number} b
@@ -450,6 +455,8 @@ const arr = [10_20];
 const [a, b] = arr;
 const ret = add(a, b);
 console.log("ret", ret);
+const typePanel = new TypePanel();
+Object.assign(window, {add, typePanel});
 `,
   //editor => insertTypes(),
   editor => runAction(),

package/package (generator).json

@@ -0,0 +1,21 @@
+{
+  "name": "@runtime-type-inspector/repl",
+  "version": "4.0.0",
+  "description": "REPL of RuntimeTypeInspector.js",
+  "main": "index.html",
+  "author": "Hermann Rolfes (kungfooman)",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/parser": "^8.0.0-alpha.12",
+    "@babel/generator": "^8.0.0-alpha.12",
+    "@runtime-type-inspector/transpiler": "^4.0.0",
+    "ace-builds": "^1.35.2",
+    "display-anything": "^1.1.0",
+    "express": "^4.18.2",
+    "react-es6": "^1.0.0",
+    "worker-with-import-map": "^1.0.4"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtime-type-inspector/repl",
-  "version": "3.3.7",
+  "version": "4.0.1",
   "description": "REPL of RuntimeTypeInspector.js",
   "main": "index.html",
   "author": "Hermann Rolfes (kungfooman)",
@@ -9,9 +9,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@runtime-type-inspector/transpiler": "^3.3.7",
-    "ace-builds": "^1.28.0",
+    "@babel/parser": "^8.0.0-alpha.12",
+    "@runtime-type-inspector/transpiler": "^4.0.1",
+    "ace-builds": "^1.35.2",
     "display-anything": "^1.1.0",
-    "express": "^4.18.2"
+    "express": "^4.18.2",
+    "react-es6": "^1.0.0",
+    "worker-with-import-map": "^1.0.4"
   }
 }

package/test-add.worker.js

@@ -0,0 +1,23 @@
+import {inspectType, youCanAddABreakpointHere} from '@runtime-type-inspector/runtime';
+/**
+ * @param {number} a
+ * @param {number} b
+ */
+function add(a, b) {
+  if (!inspectType(a, "number", 'add', 'a')) {
+    youCanAddABreakpointHere();
+  }
+  if (!inspectType(b, "number", 'add', 'b')) {
+    youCanAddABreakpointHere();
+  }
+  return a + b;
+}
+function f() {
+  /** @type {number[]} */
+  const arr = [10_20];
+  const [a, b] = arr;
+  const ret = add(a, b);
+  self.postMessage(`ret ${ret}`);
+}
+f();
+setInterval(f, 2000); // Test spam mode

package/test-divide.worker.js

@@ -0,0 +1,48 @@
+import {inspectType, youCanAddABreakpointHere, validateDivision} from '@runtime-type-inspector/runtime';
+/**
+ * @param {number} a
+ * @param {number} b
+ */
+function testDivide(a, b) {
+  if (!inspectType(a, "number", 'testDivide', 'a')) {
+    youCanAddABreakpointHere();
+  }
+  if (!inspectType(b, "number", 'testDivide', 'b')) {
+    youCanAddABreakpointHere();
+  }
+  return validateDivision(a, b, "testDivide");
+}
+function f() {
+  /** @type {number[]} */
+  const arr = [10_20];
+  const [a, b] = arr;
+  const ret = testDivide(a, b);
+  self.postMessage(`ret ${ret}`);
+}
+f();
+setInterval(f, 2000); // Test spam mode
+
+/*
+import {TypePanel} from '@runtime-type-inspector/runtime';
+import {WorkerWithImportMapViaBedfordsShim} from 'worker-with-import-map';
+// console.log("WorkerWithImportMapViaBedfordsShim", WorkerWithImportMapViaBedfordsShim);
+// const url = './test-add.worker.js';
+const url = './test-divide.worker.js';
+const worker = new WorkerWithImportMapViaBedfordsShim(url, {
+  importMap: 'inherit'
+});
+console.log("worker", worker);
+const typePanel = new TypePanel();
+worker.addEventListener('message', (e) => {
+  // console.log('addEventListener message', e.data);
+  if (e.data.type !== 'rti') {
+    return;
+  }
+  e.preventDefault();
+  e.stopPropagation();
+  // Forward message to window listener:
+  // window.postMessage(e.data);
+  // Forward event directly to typePanel:
+  typePanel.handleEvent(e);
+});
+*/