feat(types): Typescript rewrite (chanind#211)

BREAKING CHANGE: Full rewrite in typescript, deprecated constructor args are removed

* [ts-migrate][src] Init tsconfig.json file

Co-authored-by: ts-migrate <>

* [ts-migrate][src] Rename files from JS/JSX to TS/TSX

Co-authored-by: ts-migrate <>

* [ts-migrate][src] Run TS Migrate

Co-authored-by: ts-migrate <>

* Convert project in to typescript

* update(UserStrokeRenderer) add typings

* update(jest-setup) replace (deprecated) lolex with "@sinonjs/fake-timers"

* move tsconfig to root dir

* Type additions, fixes, test updates

* Update typings

* Configure rollup for deployment

* fix tests & linting

* Include declaration types in build

* update(Mutation) Implement type checks for provided mutation values based on the RenderState class/object
- This makes the mutation a bit more verbose as it gets rid of the _inflate() call
- There's no longer a need to provide a scope (unless you'd like to manually cancel mutations)
- Optimise the cancelAll() function

* update(utils) remove inflate() function as it's no longer needed

* update(typings) allow users to import typedefs from "hanzi-writer"

* chore: bump package versions

* update(demo) fix default "showCharacter" state

* Strengthen typings

* Update lint config

* update(Mutation) edge case for handling "isAlreadyAtEnd" where startValue may be undefined

* update(HanziWriter) handle edge case where "_withDataPromise" may not be set

* update(HanziWriter) add "resetDisplay" in cancelQuiz to allow users to reset their show/hide" character/outline options when manually cancelling.

* update(tests) add "quiz.cancelTest({ resetDisplay: bool })" tests

* update(HanziWriter) write tests for "_loadingManager" singleton

* Remove webpack config

* update(Quiz) add "onHighlightComplete" to quiz options
This allows UI updates after the highlight has finished.

* Add example using react (with typescript)
Move vanilla js example from "demo" in to "examples" dir

* update(Positioner) Require options with non-null values

* update(Quiz & strokeMatches) apply cleanups, move default export to top of file

* update(HanziWriter) don't return mutations

* General file cleanups

* update(project) Configure ts plugin to use babel transpiler
- add filesize plugin
- remove babel 6 packages
- remove webpack

* update(types) Loosen type requirement of CharacterJson to avoid type assertions.

* fix(mutations) Quiz highlight complete color should now work correctly.

Seems to be two sources of truth for display stroke colors in RenderStateObject: "character[xxx].strokeColor" & "options.xxxxColor". The former never was never used so this has now been removed from the render state object.

* Update quiz tests

* Update using-react example

* fix(CharacterActions) race condition between highlightStroke & showStroke where highlight opacity doesn't reset

* update(tests) add svg/RenderTarget tests

* fix typo

* update(tests) Add more RenderTarget tests
bump packages

* bump packages

* remove unused types package

* Update snapshots

* fix(geometry) stack overflow executing the frechetDist function on complex paths

Had some error logs that involve stack overflows originating from `recursiveCalc`. Rather opt for an O(n^2) algo.

* update(circleci/config.yml) node version to v14 LTS

* singlequote prettier style

* recreating old tests to ensure functionality has not changed

* removing examples to reduce scope of changes

* adding back demo from master branch

* fixing up imports and revertin cancelQuiz style to match master

* reverting closer to master

* reverting closer to master

* changing cov target to 96

* fixing types

* minor reversions

* updating package.json version

Co-authored-by: James <[email protected]>
Co-authored-by: James S <[email protected]>

.circleci/config.yml

@@ -1,8 +1,9 @@
-version: 2
+version: 2.1
+
 jobs:
   build:
     docker:
-      - image: circleci/node:10
+      - image: cimg/node:14.15.1
 
     working_directory: ~/repo
 
@@ -12,9 +13,9 @@ jobs:
       # Download and cache dependencies
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
 
       - run: yarn install
 
@@ -23,7 +24,8 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
 
+      - run: yarn typecheck
       - run: yarn lint-test
       - run: yarn test
       - run: yarn codecov
-      - run: if [ "$CIRCLE_BRANCH" = "master" ]; then yarn semantic-release; fi
+      - run: if [ "$CIRCLE_BRANCH" = "master" ]; then yarn semantic-release; fi

.codecov.yml

@@ -2,9 +2,9 @@ coverage:
   status:
     project:
       default:
-        target: 97
+        target: 96
         threshold: 1
     patch:
       default:
-        target: 97
-        threshold: 1
+        target: 96
+        threshold: 1

.eslintrc

@@ -1,33 +1,26 @@
 {
-  "extends": "airbnb",
-  "parser": "babel-eslint",
-  "plugins": [
-    "no-for-of-loops"
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "ignorePatterns": [
+    "dist/*",
+    "build/*",
+    "examples/*",
+    "babel.config.js",
+    "jest-setup.js"
   ],
   "rules": {
-    "id-length": [2, {"exceptions": ["x", "y", "i", "j", "r", "g", "b", "a"]}],
-    "no-unused-vars": [2, {"vars": "all", "args": "none"}],
-    "max-len":[0],
-    "no-loop-func": [0],
-    "no-plusplus": [0],
-    "no-continue": [0],
-    "no-prototype-builtins": [0],
-    "no-underscore-dangle": [0],
-    "jsx-a11y/href-no-hash": [0],
-    "no-restricted-syntax": [0],
-    "arrow-body-style": [0],
-    "object-curly-spacing": [0],
-    "padded-blocks": [0],
-    "no-mixed-operators": [0],
-    "arrow-parens": [0],
-    "prefer-spread": [0],
-    "func-names": [0],
-    "class-methods-use-this": [0],
-    "no-restricted-properties": [0],
-    "import/no-extraneous-dependencies": [0],
-    "import/first": [0],
-    "space-before-function-paren": [0],
-    "consistent-return": [0],
-    "no-for-of-loops/no-for-of-loops": 2,
+    "no-multi-spaces": "error",
+    "no-nested-ternary": "error",
+    "no-trailing-spaces": "error",
+    "no-irregular-whitespace": "error",
+    "no-param-reassign": "error",
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "comma-dangle": ["error", "always-multiline"],
+    // @typescript-eslint settings
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   }
 }

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 90
+}

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+    "@babel/preset-typescript",
+  ],
+};

demo/test.js

@@ -3,55 +3,56 @@ var isCharVisible;
 var isOutlineVisible;
 
 function printStrokePoints(data) {
-	var pointStrs = data.drawnPath.points.map(point => `{x: ${point.x}, y: ${point.y}}`);
-	console.log(`[${pointStrs.join(', ')}]`);
+  var pointStrs = data.drawnPath.points.map((point) => `{x: ${point.x}, y: ${point.y}}`);
+  console.log(`[${pointStrs.join(', ')}]`);
 }
 
 function updateCharacter() {
-	document.querySelector('#target').innerHTML = '';
+  document.querySelector('#target').innerHTML = '';
 
-	var character = document.querySelector('.js-char').value;
-	window.location.hash = character;
-	writer = HanziWriter.create('target', character, {
-		width: 400,
-		height: 400,
-		radicalColor: '#166E16',
-		onCorrectStroke: printStrokePoints,
-		onMistake: printStrokePoints,
-		showCharacter: false,
-	});
-	isCharVisible = true;
-	isOutlineVisible = true;
-	window.writer = writer;
+  var character = document.querySelector('.js-char').value;
+  window.location.hash = character;
+  writer = HanziWriter.create('target', character, {
+    width: 400,
+    height: 400,
+    renderer: 'svg',
+    radicalColor: '#166E16',
+    onCorrectStroke: printStrokePoints,
+    onMistake: printStrokePoints,
+    showCharacter: false,
+  });
+  isCharVisible = true;
+  isOutlineVisible = true;
+  window.writer = writer;
 }
 
-window.onload = function() {
-	var char = decodeURIComponent(window.location.hash.slice(1));
-	if (char) {
-		document.querySelector('.js-char').value = char;
-	}
+window.onload = function () {
+  var char = decodeURIComponent(window.location.hash.slice(1));
+  if (char) {
+    document.querySelector('.js-char').value = char;
+  }
 
-	updateCharacter();
+  updateCharacter();
 
-	document.querySelector('.js-char-form').addEventListener('submit', function(evt) {
-		evt.preventDefault();
-		updateCharacter();
-	});
+  document.querySelector('.js-char-form').addEventListener('submit', function (evt) {
+    evt.preventDefault();
+    updateCharacter();
+  });
 
-	document.querySelector('.js-toggle').addEventListener('click', function() {
-		isCharVisible ? writer.hideCharacter() : writer.showCharacter();
-		isCharVisible = !isCharVisible;
-	});
-	document.querySelector('.js-toggle-hint').addEventListener('click', function() {
-		isOutlineVisible ? writer.hideOutline() : writer.showOutline();
-		isOutlineVisible = !isOutlineVisible;
-	});
-	document.querySelector('.js-animate').addEventListener('click', function() {
-		writer.animateCharacter();
-	});
-	document.querySelector('.js-quiz').addEventListener('click', function() {
-		writer.quiz({
-			showOutline: true
-		});
-	});
-}
+  document.querySelector('.js-toggle').addEventListener('click', function () {
+    isCharVisible ? writer.hideCharacter() : writer.showCharacter();
+    isCharVisible = !isCharVisible;
+  });
+  document.querySelector('.js-toggle-hint').addEventListener('click', function () {
+    isOutlineVisible ? writer.hideOutline() : writer.showOutline();
+    isOutlineVisible = !isOutlineVisible;
+  });
+  document.querySelector('.js-animate').addEventListener('click', function () {
+    writer.animateCharacter();
+  });
+  document.querySelector('.js-quiz').addEventListener('click', function () {
+    writer.quiz({
+      showOutline: true,
+    });
+  });
+};

jest-setup.js

@@ -1,2 +1,6 @@
-const lolex = require('lolex');
-global.clock = lolex.install({ shouldAdvanceTime: true, advanceTimeDelta: 5 });
+require("jest-fetch-mock").enableMocks();
+
+window.clock = require("@sinonjs/fake-timers").install({
+  shouldAdvanceTime: true,
+  advanceTimeDelta: 5,
+});