Typescript Migration

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
-	"@babel/preset-env"
+	"@babel/preset-env",
+  "@babel/preset-typescript"
   ]
 }

.eslintrc.json

@@ -0,0 +1,54 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2021": true
+  },
+  "extends": "eslint:recommended",
+  "overrides": [],
+  "plugins": [
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest"
+  },
+  "rules": {
+    "prettier/prettier": 2,
+    "comma-dangle": "warn",
+    "no-cond-assign": "warn",
+    "no-console": "warn",
+    "no-constant-condition": "warn",
+    "no-control-regex": "warn",
+    "no-debugger": "warn",
+    "no-dupe-args": "warn",
+    "no-dupe-keys": "warn",
+    "no-duplicate-case": "warn",
+    "no-empty-character-class": "warn",
+    "no-empty": "warn",
+    "no-ex-assign": "warn",
+    "no-extra-boolean-cast": "warn",
+    "no-extra-semi": "warn",
+    "no-func-assign": "warn",
+    "no-inner-declarations": "warn",
+    "no-invalid-regexp": "warn",
+    "no-irregular-whitespace": "warn",
+    "no-negated-in-lhs": "warn",
+    "no-obj-calls": "warn",
+    "no-regex-spaces": "warn",
+    "no-sparse-arrays": "warn",
+    "no-unreachable": "warn",
+    "use-isnan": "warn",
+    "valid-typeof": "warn",
+    "no-fallthrough": "warn",
+    "no-octal": "warn",
+    "no-redeclare": "warn",
+    "no-delete-var": "warn",
+    "no-undef": "warn",
+    "no-unused-vars": "warn",
+    "no-mixed-spaces-and-tabs": "warn",
+    "no-useless-escape": "warn",
+    "no-dupe-else-if": "warn",
+    "no-prototype-builtins": "warn"
+  }
+}

.gitignore

@@ -7,4 +7,3 @@ docs/.vuepress/.cache/*
 docs/.vuepress/.temp/*
 docs/.vuepress/.dist/*
 dist/report.html
-.eslintrc.json

.prettierignore

@@ -0,0 +1,20 @@
+# Ignore artifacts:
+.idea/*
+tmp/*
+/node_modules
+/coverage
+to-*.sh
+docs/.vuepress/.cache/*
+docs/.vuepress/.temp/*
+docs/.vuepress/.dist/*
+dist/report.html
+.eslintrc.json
+.github
+dist
+docs
+examples
+font_generator
+tests
+.babelrc
+*.md
+**

.prettierrc.json

@@ -0,0 +1 @@
+{}

abcjs-audio.css

@@ -1,187 +1,190 @@
 /* Some basic CSS to make the Audio controls in abcjs presentable. */
 
 .abcjs-inline-audio {
-	height: 26px;
-	padding: 0 5px;
-	border-radius: 3px;
-	background-color: #424242;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
+  height: 26px;
+  padding: 0 5px;
+  border-radius: 3px;
+  background-color: #424242;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
 }
 
 .abcjs-inline-audio.abcjs-disabled {
-	opacity: 0.5;
+  opacity: 0.5;
 }
 
 .abcjs-inline-audio .abcjs-btn {
-	display: block;
-	width: 28px;
-	height: 34px;
-	margin-right: 2px;
-	padding: 7px 4px;
+  display: block;
+  width: 28px;
+  height: 34px;
+  margin-right: 2px;
+  padding: 7px 4px;
 
-	background: none !important;
-	border: 1px solid transparent;
-	box-sizing: border-box;
-	line-height: 1;
+  background: none !important;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  line-height: 1;
 }
 
 .abcjs-btn g {
-	fill: #f4f4f4;
-	stroke: #f4f4f4;
+  fill: #f4f4f4;
+  stroke: #f4f4f4;
 }
 
 .abcjs-inline-audio .abcjs-btn:hover g {
-	fill: #cccccc;
-	stroke: #cccccc;
+  fill: #cccccc;
+  stroke: #cccccc;
 }
 
 .abcjs-inline-audio .abcjs-midi-selection.abcjs-pushed {
-	border: 1px solid #cccccc;
-	background-color: #666666;
-	box-sizing: border-box;
+  border: 1px solid #cccccc;
+  background-color: #666666;
+  box-sizing: border-box;
 }
 
 .abcjs-inline-audio .abcjs-midi-loop.abcjs-pushed {
-	border: 1px solid #cccccc;
-	background-color: #666666;
-	box-sizing: border-box;
+  border: 1px solid #cccccc;
+  background-color: #666666;
+  box-sizing: border-box;
 }
 
 .abcjs-inline-audio .abcjs-midi-reset.abcjs-pushed {
-	border: 1px solid #cccccc;
-	background-color: #666666;
-	box-sizing: border-box;
+  border: 1px solid #cccccc;
+  background-color: #666666;
+  box-sizing: border-box;
 }
 
 .abcjs-inline-audio .abcjs-midi-start .abcjs-pause-svg {
-	display: none;
+  display: none;
 }
 
 .abcjs-inline-audio .abcjs-midi-start .abcjs-loading-svg {
-	display: none;
+  display: none;
 }
 
 .abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-play-svg {
-	display: none;
+  display: none;
 }
 
 .abcjs-inline-audio .abcjs-midi-start.abcjs-loading .abcjs-play-svg {
-	display: none;
+  display: none;
 }
 
 .abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-pause-svg {
-	display: block;
+  display: block;
 }
 
 .abcjs-inline-audio .abcjs-midi-progress-background {
-	background-color: #424242;
-	height: 10px;
-	border-radius: 5px;
-	border: 2px solid #cccccc;
-	margin: 0 8px 0 15px;
-	position: relative;
-	flex: 1;
-	padding: 0;
-	box-sizing: border-box;
+  background-color: #424242;
+  height: 10px;
+  border-radius: 5px;
+  border: 2px solid #cccccc;
+  margin: 0 8px 0 15px;
+  position: relative;
+  flex: 1;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .abcjs-inline-audio .abcjs-midi-progress-indicator {
-	width: 20px;
-	margin-left: -10px; /* half of the width */
-	height: 14px;
-	background-color: #f4f4f4;
-	position: absolute;
-	display: inline-block;
-	border-radius: 6px;
-	top: -4px;
-	left: 0;
-	box-sizing: border-box;
+  width: 20px;
+  margin-left: -10px; /* half of the width */
+  height: 14px;
+  background-color: #f4f4f4;
+  position: absolute;
+  display: inline-block;
+  border-radius: 6px;
+  top: -4px;
+  left: 0;
+  box-sizing: border-box;
 }
 
 .abcjs-inline-audio .abcjs-midi-clock {
-	margin-left: 4px;
-	margin-top: 1px;
-	margin-right: 2px;
-	display: inline-block;
-	font-family: sans-serif;
-	font-size: 16px;
-	box-sizing: border-box;
-	color: #f4f4f4;
+  margin-left: 4px;
+  margin-top: 1px;
+  margin-right: 2px;
+  display: inline-block;
+  font-family: sans-serif;
+  font-size: 16px;
+  box-sizing: border-box;
+  color: #f4f4f4;
 }
 
 .abcjs-inline-audio .abcjs-tempo-wrapper {
-	font-size: 10px;
-	color: #f4f4f4;
-	box-sizing: border-box;
-	display: flex;
-	align-items: center;
+  font-size: 10px;
+  color: #f4f4f4;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
 }
 
 .abcjs-inline-audio .abcjs-midi-tempo {
-	border-radius: 2px;
-	border: none;
-	margin: 0 2px 0 4px;
-	width: 42px;
-	padding-left: 2px;
-	box-sizing: border-box;
+  border-radius: 2px;
+  border: none;
+  margin: 0 2px 0 4px;
+  width: 42px;
+  padding-left: 2px;
+  box-sizing: border-box;
 }
 
 .abcjs-inline-audio .abcjs-loading .abcjs-loading-svg {
-	display: inherit;
+  display: inherit;
 }
 
 .abcjs-inline-audio .abcjs-loading {
-	outline: none;
-	animation-name: abcjs-spin;
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
-	animation-timing-function: linear;
-
+  outline: none;
+  animation-name: abcjs-spin;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
 }
 .abcjs-inline-audio .abcjs-loading-svg circle {
-	stroke: #f4f4f4;
+  stroke: #f4f4f4;
 }
 
 @keyframes abcjs-spin {
-	from {transform:rotate(0deg);}
-	to {transform:rotate(360deg);}
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* Adding the class "abcjs-large" will make the control easier on a touch device. */
 .abcjs-large .abcjs-inline-audio {
-	height: 52px;
+  height: 52px;
 }
 .abcjs-large .abcjs-btn {
-	width: 56px;
-	height: 52px;
-	font-size: 28px;
-	padding: 6px 8px;
+  width: 56px;
+  height: 52px;
+  font-size: 28px;
+  padding: 6px 8px;
 }
 .abcjs-large .abcjs-midi-progress-background {
-	height: 20px;
-	border: 4px solid #cccccc;
+  height: 20px;
+  border: 4px solid #cccccc;
 }
 .abcjs-large .abcjs-midi-progress-indicator {
-	height: 28px;
-	top: -8px;
-	width: 40px;
+  height: 28px;
+  top: -8px;
+  width: 40px;
 }
 .abcjs-large .abcjs-midi-clock {
-	font-size: 32px;
-	margin-right: 10px;
-	margin-left: 10px;
-	margin-top: -1px;
+  font-size: 32px;
+  margin-right: 10px;
+  margin-left: 10px;
+  margin-top: -1px;
 }
 .abcjs-large .abcjs-midi-tempo {
-	font-size: 20px;
-	width: 50px;
+  font-size: 20px;
+  width: 50px;
 }
 .abcjs-large .abcjs-tempo-wrapper {
-	font-size: 20px;
+  font-size: 20px;
 }
 
 .abcjs-css-warning {
-	display: none;
+  display: none;
 }