put babel and browserslist to better use

index.ts

@@ -0,0 +1,26 @@
+require('./license')
+
+module.exports = {
+	signature: "abcjs-basic v" + require('./version'),
+	renderAbc: require('./src/api/abc_tunebook_svg'),
+	TimingCallbacks: require('./src/api/abc_timing_callbacks'),
+	setGlyph: require('./src/write/abc_glyphs').setSymbol,
+	synth: {
+		CreateSynth: require('./src/synth/create-synth'),
+		instrumentIndexToName: require('./src/synth/instrument-index-to-name'),
+		pitchToNoteName: require('./src/synth/pitch-to-note-name'),
+		SynthController: require('./src/synth/synth-controller'),
+		SynthSequence: require('./src/synth/synth-sequence'),
+		CreateSynthControl: require('./src/synth/create-synth-control'),
+		registerAudioContext: require('./src/synth/register-audio-context'),
+		activeAudioContext: require('./src/synth/active-audio-context'),
+		supportsAudio: require('./src/synth/supports-audio'),
+		playEvent: require('./src/synth/play-event'),
+		getMidiFile: require('./src/synth/get-midi-file'),
+		sequence: require('./src/synth/abc_midi_sequencer'),
+	},
+	Editor: require('./src/edit/abc_editor'),
+	EditArea: require('./src/edit/abc_editarea'),
+	...require('./src/api/abc_animation'),
+	...require('./src/api/abc_tunebook'),
+};

package.json

@@ -47,7 +47,10 @@
     "@tarp/require": "1.4.3",
     "babel-loader": "8.2.2",
     "chai": "4.3.4",
+    "core-js": "3.9.0",
     "mocha": "8.3.2",
+    "ts-loader": "^9.2.2",
+    "typescript": "^4.3.2",
     "vuepress": "2.0.0-beta.8",
     "vuex": "4.0.0",
     "webpack": "5.33.2",

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "preserve",
+    "allowJs": false,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+  }
+}

webpack.config.js

@@ -1,70 +1,99 @@
 const pkg = require("./package.json");
 const TerserPlugin = require('terser-webpack-plugin');
 const WebpackBundleAnalyzer = require("webpack-bundle-analyzer")
-  .BundleAnalyzerPlugin;
+	.BundleAnalyzerPlugin;
 
 module.exports = (env = {} , argv) => {
-  const defaults = (argv, type) => {
-    const config = {
-      target: ['web', 'es5'],
-      output: {
-        library: {
-          amd: 'abcjs',
-          root: 'ABCJS',
-          commonjs: 'abcjs'
-        },
-        libraryTarget: 'umd',
-        globalObject: 'this',
-        filename: argv.mode === 'development' ? `abcjs-${type}.js` : `abcjs-${type}-min.js`,
-      },
-      devtool: argv.mode === 'development' ? 'source-map' : false,
-      module: {
-        rules: [
-          {
-            test: /\.js$/,
-            exclude: /node_modules/,
-            use: "babel-loader"
-          }
-        ],
-      },
-      mode: 'production',
-      optimization:{
-        minimizer: [
-          new TerserPlugin({
-            extractComments: {
-              filename: '[file].LICENSE',
-              condition: /^\*\**!/i,
-              banner: makeBanner(type)
-            },
-          }),
-        ],
-      }
-    }
+	const defaults = (argv, type) => {
+		const config = {
+			target: ['web', 'es5'],
+			output: {
+				library: {
+					amd: 'abcjs',
+					root: 'ABCJS',
+					commonjs: 'abcjs'
+				},
+				libraryTarget: 'umd',
+				globalObject: 'this',
+				filename: argv.mode === 'development' ? `abcjs-${type}.js` : `abcjs-${type}-min.js`,
+			},
+			devtool: argv.mode === 'development' ? 'source-map' : false,
+			module: {
+				rules: [
+					{
+						test: /\.js$/,
+						exclude: /node_modules/,
+						use: [
+							{
+								loader: "babel-loader",
+								options: {
+									sourceType: 'unambiguous',
+									cacheDirectory: (argv.mode === 'development'),
+									presets: [
+										[
+											'@babel/preset-env',
+											{
+												debug: false,
+												corejs: '3.9',
+												useBuiltIns: 'usage',
+												targets: 'defaults, ie >= 9, safari >= 5.1'
+											}
+										]
+									]
+								}
+							},
+						]
+					},
+					{
+						test: /\.ts$/,
+						exclude: /node_modules/,
+						use: [
+							'ts-loader',
+						],
+					}
+				],
+			},
+			resolve: {
+				extensions: ['.ts', '.js'],
+			},
+			mode: 'production',
+			optimization:{
+				minimizer: [
+					new TerserPlugin({
+						extractComments: {
+							filename: '[file].LICENSE',
+							condition: /^\*\**!/i,
+							banner: makeBanner(type)
+						},
+					}),
+				],
+			}
+		}
 
-    if (env.analyze) {
-      config.plugins = [
-        new WebpackBundleAnalyzer({
-          analyzerMode: "static"
-        })
-      ]
-    }
-    return config
-  }
+		if (env.analyze) {
+			config.plugins = [
+				new WebpackBundleAnalyzer({
+					analyzerMode: "static"
+				})
+			]
+		}
+		return config
+	}
 
-  return [
-    {
-      name: 'basic',
-      entry: `./index.js`,
-      ...defaults(argv, 'basic')
-    }, {
-      name: 'plugin',
-      entry: `./plugin.js`,
-      ...defaults(argv, 'plugin')
-    }
-  ]
+	return [
+		{
+			name: 'basic',
+			entry: `./index.ts`,
+			...defaults(argv, 'basic')
+		}, {
+			name: 'plugin',
+			entry: `./plugin.js`,
+			...defaults(argv, 'plugin')
+		}
+	]
 };
 
 function makeBanner(type) {
-  let banner = `abcjs_${type} v${pkg.version} Copyright © 2009-2021 Paul Rosen and Gregory Dyke (https://abcjs.net) */\n`
-  return banner + `/*! For license information please see abcjs_${type}.LICENSE`;
+	let banner = `abcjs_${type} v${pkg.version} Copyright © 2009-2021 Paul Rosen and Gregory Dyke (https://abcjs.net) */\n`
+	return banner + `/*! For license information please see abcjs_${type}.LICENSE`;
 }