fix: tsconfig with comments, changes in webpack.config for issue wint…

…ergatan-community#22

package.json

@@ -49,6 +49,7 @@
         "lint-staged": "^10.2.11",
         "prettier": "^2.0.5",
         "style-loader": "^1.2.1",
+        "ts-loader": "^7.0.5",
         "typescript": "^3.9.5",
         "webpack": "^4.43.0",
         "webpack-cli": "^3.3.11",

src/@types/custom.d.ts

@@ -0,0 +1,13 @@
+// https://webpack.js.org/guides/typescript/#importing-other-assets
+declare module "*.png" {
+	const content: any;
+	export default content;
+}
+declare module "*.jpg" {
+	const content: any;
+	export default content;
+}
+declare module "*.gif" {
+	const content: any;
+	export default content;
+}

src/components/testing/TimingTesting.tsx

@@ -10,7 +10,7 @@ interface TPSChange {
 	endTPS: number;
 }
 
-let synth = new Synth().toDestination();
+const synth = new Synth().toDestination();
 
 Transport.bpm.value = 1 * 60;
 Transport.PPQ = 1;
@@ -71,7 +71,7 @@ const res = [
 @observer
 export class TimingTesting extends Component {
 	tpq = 240;
-	interval: NodeJS.Timeout | undefined;
+	interval: NodeJS.Timeout | number | undefined;
 	@observable currentTick = 0;
 	@observable markerTicks = range(0, 100, 5);
 

tsconfig.json

@@ -1,34 +1,73 @@
 {
-    "compileOnSave": false,
-    "compilerOptions": {
-        "allowJs": true,
-        "allowSyntheticDefaultImports": true,
-        "esModuleInterop": true,
-        "experimentalDecorators": true,
-        "forceConsistentCasingInFileNames": true,
-        "isolatedModules": true,
-        "jsx": "react",
-        "lib": [
-            "dom",
-            "dom.iterable",
-            "esnext"
-        ],
-        "module": "esnext",
-        "moduleResolution": "node",
-        "noEmit": true,
-        "noFallthroughCasesInSwitch": true,
-        "noImplicitAny": true,
-        "noUnusedLocals": true,
-        "outDir": "./dist/",
-        "resolveJsonModule": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "target": "es5",
-    },
-    "exclude": [
-        "node_modules"
-    ],
-    "include": [
-        "src"
-    ]
-}
+	"compileOnSave": false,
+	"exclude": [
+		"node_modules"
+	],
+	"include": [
+		"src"
+	],
+	"compilerOptions": {
+		"declaration": true, /* Generates corresponding '.d.ts' file. */
+		"isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+		"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+		"lib": [
+			"dom",
+			"dom.iterable",
+			"esnext"
+		], /* Specify library files to be included in the compilation. */
+		"module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+		"noEmit": false, /* Do not emit outputs. */
+		"outDir": "./dist/", /* Redirect output structure to the directory. */
+		"target": "ES5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+		// "allowJs": true,                       /* Allow javascript files to be compiled. */
+		// "checkJs": true,                       /* Report errors in .js files. */
+		// "composite": true,                     /* Enable project compilation */
+		// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+		// "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+		// "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+		// "outFile": "./",                       /* Concatenate and emit output to single file. */
+		// "removeComments": true,                /* Do not emit comments to output. */
+		// "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+		// "sourceMap": true,                     /* Generates corresponding '.map' file. */
+		/* Strict Type-Checking Options */
+		"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
+		"strict": true, /* Enable all strict type-checking options. */
+		// "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+		// "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+		// "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+		// "strictNullChecks": true,              /* Enable strict null checks. */
+		// "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+		/* Additional Checks */
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		"noUnusedLocals": false, /* Report errors on unused locals. */
+		"resolveJsonModule": true,
+		// "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+		// "noUnusedParameters": true,            /* Report errors on unused parameters. */
+		// "skipLibCheck": true,
+		/* Module Resolution Options */
+		"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+		"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+		"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+		// "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+		// "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+		// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+		// "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+		"typeRoots": [
+			"node_modules/@types",
+			"./@types",
+			"./src/@types"
+		], /* List of folders to include type definitions from. */
+		// "types": [],                           /* Type declaration files to be included in compilation. */
+		/* Source Map Options */
+		// "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+		// "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+		// "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+		/* Experimental Options */
+		"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
+		// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+		/* Advanced Options */
+		// "declarationDir": "lib"                /* Output directory for generated declaration files. */
+	}
+}

webpack.config.js

@@ -21,30 +21,59 @@ module.exports = {
 
     // adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx'],
+		// Note: order matters here as well
+		extensions: ['.ts', '.tsx', '.js', '.jsx'], 
     },
 
     module: {
         rules: [
-            // we use babel-loader to load our jsx and tsx files
-            {
-                test: /\.(ts|js)x?$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader',
-                },
-            },
+            // we use babel-loader to load our jsx and tsx file
+			// https://stackoverflow.com/questions/49624202/why-use-babel-loader-with-ts-loader
+			{
+				test: /\.tsx?$/,
+				// Note: using include is more maintainable and efficient.
+				include: [path.resolve(__dirname, 'src'), /vmmx-schema/],
+				use: [
+					{
+                        // First use babel loader(with typescript preset) to transpile latest features (without typechecking)
+						loader: 'babel-loader',
+						options: {
+							// https://webpack.js.org/loaders/babel-loader/#babel-loader-is-slow
+							cacheDirectory: true
+						}
+					},
+					{
+						// type check the output from the previous loader
+						loader: 'ts-loader',
+						options: {
+							// for re-compiling .ts files in vmmx-schema
+							"allowTsInNodeModules": true
+						}
+					}
+				]
+			}, 
+			{
+				test: /\.jsx?$/,
+				include: [path.resolve(__dirname, 'src')],
+				use: [
+					{
+						loader: 'babel-loader',
+					}
+				]
+			},
 
-            // css-loader to bundle all the css files into one file and style-loader to add all the styles  inside the style tag of the document
-            {
-                test: /\.css$/,
-                use: ['style-loader', 'css-loader'],
-            },
-            // file-loader to make images importable
-            {
-                test: /\.(png|jpg|gif)$/i,
-                use: ['file-loader']
-            }
+			// css-loader to bundle all the css files into one file and style-loader to add all the styles  inside the style tag of the document
+			{
+				test: /\.css$/,
+				include: [path.resolve(__dirname, 'src'), /node_modules/],
+				use: ['style-loader', 'css-loader'],
+			},
+			// file-loader to make images importable
+			{
+				test: /\.(png|jpg|gif)$/i,
+				include: [path.resolve(__dirname, 'src')],
+				use: ['file-loader']
+			},
         ],
     },
     plugins: [