jaltekruse · jaltekruse · Nov 29, 2021 · Nov 30, 2021 · Nov 30, 2021 · Nov 30, 2021
diff --git a/Makefile b/Makefile
@@ -24,36 +24,38 @@ SRC_DIR = ./src
 INTRO = $(SRC_DIR)/intro.js
 OUTRO = $(SRC_DIR)/outro.js
 
-PJS_SRC = ./node_modules/pjs/src/p.js
-
 BASE_SOURCES = \
-  $(PJS_SRC) \
-  $(SRC_DIR)/tree.js \
-  $(SRC_DIR)/cursor.js \
-  $(SRC_DIR)/controller.js \
-  $(SRC_DIR)/publicapi.js \
-  $(SRC_DIR)/services/parser.util.js \
-  $(SRC_DIR)/services/saneKeyboardEvents.util.js \
-  $(SRC_DIR)/services/aria.js \
-  $(SRC_DIR)/services/exportText.js \
-  $(SRC_DIR)/services/focusBlur.js \
-  $(SRC_DIR)/services/keystroke.js \
-  $(SRC_DIR)/services/latex.js \
-  $(SRC_DIR)/services/mouse.js \
-  $(SRC_DIR)/services/scrollHoriz.js \
-  $(SRC_DIR)/services/textarea.js
+  $(SRC_DIR)/utils.ts \
+  $(SRC_DIR)/services/aria.ts \
+  $(SRC_DIR)/tree.ts \
+  $(SRC_DIR)/cursor.ts \
+  $(SRC_DIR)/controller.ts \
+  $(SRC_DIR)/publicapi.ts \
+  $(SRC_DIR)/services/parser.util.ts \
+  $(SRC_DIR)/services/saneKeyboardEvents.util.ts \
+  $(SRC_DIR)/services/exportText.ts \
+  $(SRC_DIR)/services/focusBlur.ts \
+  $(SRC_DIR)/services/keystroke.ts \
+  $(SRC_DIR)/services/latex.ts \
+  $(SRC_DIR)/services/mouse.ts \
+  $(SRC_DIR)/services/scrollHoriz.ts \
+  $(SRC_DIR)/services/textarea.ts
 
 SOURCES_FULL = \
   $(BASE_SOURCES) \
-  $(SRC_DIR)/commands/math.js \
-  $(SRC_DIR)/commands/text.js \
-  $(SRC_DIR)/commands/math/*.js
+  $(SRC_DIR)/commands/math.ts \
+  $(SRC_DIR)/commands/text.ts \
+  $(SRC_DIR)/commands/math/advancedSymbols.ts \
+  $(SRC_DIR)/commands/math/basicSymbols.ts \
+  $(SRC_DIR)/commands/math/commands.ts \
+  $(SRC_DIR)/commands/math/LatexCommandInput.ts
+
 
 SOURCES_BASIC = \
   $(BASE_SOURCES) \
-  $(SRC_DIR)/commands/math.js \
-  $(SRC_DIR)/commands/math/basicSymbols.js \
-  $(SRC_DIR)/commands/math/commands.js
+  $(SRC_DIR)/commands/math.ts \
+  $(SRC_DIR)/commands/math/basicSymbols.ts \
+  $(SRC_DIR)/commands/math/commands.ts
 
 CSS_DIR = $(SRC_DIR)/css
 CSS_MAIN = $(CSS_DIR)/main.less
@@ -113,18 +115,16 @@ font: $(FONT_TARGET)
 clean:
 	rm -rf $(BUILD_DIR)
 
-$(PJS_SRC): $(NODE_MODULES_INSTALLED)
-
 $(BUILD_JS): $(INTRO) $(SOURCES_FULL) $(OUTRO) $(BUILD_DIR_EXISTS)
-	cat $^ | ./script/escape-non-ascii > $@
+	cat $^ | ./script/escape-non-ascii | ./script/tsc-emit-only > $@
 	perl -pi -e s/mq-/$(MQ_CLASS_PREFIX)mq-/g $@
 	perl -pi -e s/{VERSION}/v$(VERSION)/ $@
 
 $(UGLY_JS): $(BUILD_JS) $(NODE_MODULES_INSTALLED)
 	$(UGLIFY) $(UGLIFY_OPTS) < $< > $@
 
 $(BASIC_JS): $(INTRO) $(SOURCES_BASIC) $(OUTRO) $(BUILD_DIR_EXISTS)
-	cat $^ | ./script/escape-non-ascii > $@
+	cat $^ | ./script/escape-non-ascii | ./script/tsc-emit-only > $@
 	perl -pi -e s/mq-/$(MQ_CLASS_PREFIX)mq-/g $@
 	perl -pi -e s/{VERSION}/v$(VERSION)/ $@
 
@@ -157,14 +157,20 @@ $(FONT_TARGET): $(FONT_SOURCE) $(BUILD_DIR_EXISTS)
 #
 # -*- Test tasks -*-
 #
+.PHONY:
+lint:
+	npx tsc --noEmit
 
-.PHONY: test server run-server
+.PHONY: test server benchmark
 server:
 	node script/test_server.js
 test: dev $(BUILD_TEST) $(BASIC_JS) $(BASIC_CSS)
 	@echo
 	@echo "** now open test/{unit,visual}.html in your browser to run the {unit,visual} tests. **"
+benchmark: dev $(BUILD_TEST) $(BASIC_JS) $(BASIC_CSS)
+	@echo
+	@echo "** now open benchmark/select.html in your browser. **"
 
 $(BUILD_TEST): $(INTRO) $(SOURCES_FULL) $(UNIT_TESTS) $(OUTRO) $(BUILD_DIR_EXISTS)
-	cat $^ > $@
+	cat $^ | ./script/tsc-emit-only > $@
 	perl -pi -e s/{VERSION}/v$(VERSION)/ $@
diff --git a/benchmark/select.html b/benchmark/select.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=624">
+
+<title>MathQuill Select benchmark</title>
+
+<link rel="stylesheet" type="text/css" href="support/home.css">
+<link rel="stylesheet" type="text/css" href="../build/mathquill.css">
+
+</head>
+<body>
+<p>Benchmark inserting and then selecting n characters</p>
+<button id="run-button">Run</button>
+<div>
+  <span id="editable" style="width: 10em;"></span>
+</div>
+<table id="report">
+  <thead>
+    <tr>
+      <th>nchars</th>
+      <th>render (ms)</th>
+      <th>select (ms)</th>
+    </tr>
+  </thead>
+</table>
+<script type="text/javascript" src="../test/support/jquery-1.5.2.js"></script>
+<script type="text/javascript" src="../build/mathquill.js"></script>
+<script type="text/javascript">
+var MQ = MathQuill.getInterface(MathQuill.getInterface.MAX);
+
+var editableElt = document.getElementById('editable');
+var mq = MQ.MathField(editableElt);
+var reportElt = document.getElementById('report');
+
+function runOne(n) {
+  var rowElt = document.createElement('tr');
+  var td1 = document.createElement('td');
+  var td2 = document.createElement('td');
+  var td3 = document.createElement('td');
+  rowElt.appendChild(td1);
+  rowElt.appendChild(td2);
+  rowElt.appendChild(td3);
+
+  td1.textContent = n;
+
+  var mark = performance.now();
+  mq.latex(Array(n+1).join('1'));
+  var insert = performance.now();
+  td2.textContent = (insert - mark).toFixed(2);
+  mark = insert;
+  mq.select();
+  var select = performance.now();
+  td3.textContent = (select - mark).toFixed(2);
+
+  reportElt.appendChild(rowElt);
+}
+
+
+var i = 0;
+var sizes = [1,2,5,10,20,50,100,200,500,1000,2000];
+
+function runNext() {
+  runOne(sizes[i]);
+  i += 1;
+  if (i >= sizes.length) return;
+  setTimeout(runNext, 100);
+}
+
+document.getElementById('run-button').addEventListener('click', function () {
+  runNext();
+});
+</script>
+</body>
+</html>
diff --git a/docs/Config.md b/docs/Config.md
@@ -101,24 +101,24 @@ For example, [Desmos](https://www.desmos.com/calculator) substitutes `<span tabi
 
 Handlers are called after a specified event. They are called directly on the `handlers` object passed in, preserving the `this` value, so you can do stuff like:
 ```js
-var MathList = P(function(_) {
-  _.init = function() {
+class MathList {
+  constructor () {
     this.maths = [];
     this.el = ...
   };
-  _.add = function() {
+  add () {
     var math = MQ.MathField($('<span/>')[0], { handlers: this });
     $(math.el()).appendTo(this.el);
     math.data.i = this.maths.length;
     this.maths.push(math);
   };
-  _.moveOutOf = function(dir, math) {
+  moveOutOf (dir, math) {
     var adjacentI = (dir === MQ.L ? math.data.i - 1 : math.data.i + 1);
     var adjacentMath = this.maths[adjacentI];
     if (adjacentMath) adjacentMath.focus().moveToDirEnd(-dir);
   };
   ...
-});
+};
 ```
 
 It's common to just ignore the last argument, like if the handlers close over the math field:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   "devDependencies": {
     "less": ">=1.5.1 <3.0.0",
     "mocha": ">=2.4.1",
-    "pjs": ">=3.1.0 <5.0.0",
+    "typescript": "^4.5.2",
     "uglify-js": "2.x"
   }
 }
diff --git a/script/tsc-emit-only b/script/tsc-emit-only
@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+var ts = require('typescript');
+
+function compileTypescript (tsSource) {
+  compilerOptions = {
+    target: 'es5'
+  };
+
+  var jsSource = ts.transpileModule(tsSource, {
+    compilerOptions: compilerOptions
+  }).outputText;
+
+  return jsSource;
+}
+
+let contents = '';
+
+process.stdin.setEncoding('utf8');
+process.stdin.on('data', function(data) {
+    contents += data;
+});
+process.stdin.on('end', function () {
+    var ts = compileTypescript(contents);
+    console.log(ts);
+})
+process.stdin.resume();