* Tried to get Scripts folder to be loaded as es2015-modules (by ts-n…

…ode), but ts-node wouldn't have it. (see issue: TypeStrong/ts-node#436)

* Converted last of .js files in Scripts, to .ts.
* MS own-modules are always loaded from root. (I manage them, so it's easy for me to make sure they all work together -- ie. the advantage of honoring semver for lib subdependencies is lower, when those subdependencies are my own modules)

BTW, note that latest chrome (79) has issue when debugging source-mapped file: hovering over variables in the Sources text-editor doesn't display anything. I know this is a Chrome bug, since it works fine in Chromium, and the bug shows up in Chrome even on the actual canonicaldebate.com, which I haven't touched in months. I'll just wait for the fix rather than trying to work around.

Scripts/Bin/Compile.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import debug_base from 'debug';
-import webpackCompiler from '../Build/WebpackCompiler';
+import { webpackCompiler } from '../Build/WebpackCompiler';
 import { webpackConfig } from '../Build/WebpackConfig';
 import { config } from '../Config';
 

Scripts/Build/CreateConfig.js → Scripts/Build/CreateConfig.ts

@@ -1,15 +1,21 @@
-const debug = require('debug')('app:build:config');
-const fs = require('fs');
-const path = require('path');
-const pkg = require('../../package.json');
+import debug_base from 'debug';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import pkg from '../../package.json';
+// const pkg = require('../../package.json');
+
+// const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const debug = debug_base('app:build:config');
 
 // TODO: load config from environments
 /* if (process.env.TRAVIS_PULL_REQUEST === false) {
 	if (process.env.TRAVIS_BRANCH === "prod")
 		env = "production";
 } */
 
-function createConfigFile(callback, environment) {
+export function createConfigFile(callback, environment) {
 	const configObj = {
 		version: pkg.version,
 		// dbVersion: 5,
@@ -32,12 +38,12 @@ function createConfigFile(callback, environment) {
 			},
 	};
 
-	const newText = Object.keys(configObj).map(key => `export const ${key} = ${JSON.stringify(configObj[key])};`).join('\n');
+	const newText = Object.keys(configObj).map((key) => `export const ${key} = ${JSON.stringify(configObj[key])};`).join('\n');
 
 	const pathRel = environment === 'development' ? 'Source/BakedConfig_Dev.ts' : 'Source/BakedConfig_Prod.ts';
 	const outputPath = path.join(__dirname, '..', '..', pathRel);
 
-	const oldText = fs.existsSync(path) ? fs.readFileSync(outputPath, { encoding: 'utf8' }) : null;
+	const oldText = fs.existsSync(outputPath) ? fs.readFileSync(outputPath, { encoding: 'utf8' }) : null;
 	if (newText != oldText) {
 		fs.writeFile(outputPath, newText, 'utf8', (err) => {
 			if (err) {

Scripts/Build/Deploy.ts

@@ -0,0 +1,49 @@
+import debug_base from 'debug'; // eslint-disable-line no-underscore-dangle
+import { exec } from 'child_process';
+
+const { TRAVIS_BRANCH, TRAVIS_PULL_REQUEST, FIREBASE_TOKEN } = process.env;
+const debug = debug_base('app:build:deploy');
+
+const deployToFirebase = (cb) => {
+	debug('Travis Variables:', { TRAVIS_PULL_REQUEST, TRAVIS_BRANCH });
+	if (!!TRAVIS_PULL_REQUEST && TRAVIS_PULL_REQUEST !== 'false') {
+		debug('Skipping Firebase Deploy - Build is a Pull Request');
+		return;
+	}
+
+	if (TRAVIS_BRANCH !== 'prod' && TRAVIS_BRANCH !== 'stage' && TRAVIS_BRANCH !== 'master') {
+		debug('Skipping Firebase Deploy - Build is a not a Build Branch', TRAVIS_BRANCH);
+		return;
+	}
+
+	if (!FIREBASE_TOKEN) {
+		debug('Error: FIREBASE_TOKEN env variable not found');
+		cb('Error: FIREBASE_TOKEN env variable not found', null);
+		return;
+	}
+
+	debug('Deploying to Firebase...');
+
+	exec(`firebase deploy --token ${FIREBASE_TOKEN}`, (error, stdout) => {
+		if (error !== null) {
+			if (cb) {
+				cb(error, null);
+				return;
+			}
+		}
+		if (cb) {
+			cb(null, stdout);
+		}
+	});
+};
+
+(function () {
+	deployToFirebase((err, stdout) => {
+		if (err || !stdout) {
+			debug('error deploying to Firebase: ', err);
+			return;
+		}
+		debug(stdout); // log output of firebase cli
+		debug('\nSuccessfully deployed to Firebase');
+	});
+}());

Scripts/Build/WebpackCompiler.ts

@@ -0,0 +1,36 @@
+import webpack from 'webpack';
+import debug_base from 'debug';
+import { config } from '../Config';
+
+const debug = debug_base('app:build:webpack-compiler');
+
+export function webpackCompiler(webpackConfig, statsFormat?): Promise<webpack.Stats.ToJsonOutput> {
+	statsFormat = statsFormat || config.compiler_stats;
+
+	return new Promise((resolve, reject) => {
+		const compiler = webpack(webpackConfig);
+
+		compiler.run((err, stats) => {
+			if (err) {
+				debug('Webpack compiler encountered a fatal error.', err);
+				return reject(err);
+			}
+
+			const jsonStats = stats.toJson();
+			debug('Webpack compile completed.');
+			debug(stats.toString(statsFormat));
+
+			if (jsonStats.errors.length > 0) {
+				debug('Webpack compiler encountered errors.');
+				debug(jsonStats.errors.join('\n'));
+				return reject(new Error('Webpack compiler encountered errors'));
+			} if (jsonStats.warnings.length > 0) {
+				debug('Webpack compiler encountered warnings.');
+				debug(jsonStats.warnings.join('\n'));
+			} else {
+				debug('No errors or warnings encountered.');
+			}
+			resolve(jsonStats);
+		});
+	});
+}

Scripts/Build/WebpackConfig.ts

@@ -8,6 +8,8 @@ import fs from 'fs';
 import HardSourceWebpackPlugin from 'hard-source-webpack-plugin';
 import SpriteLoaderPlugin from 'svg-sprite-loader/plugin';
 import { WebpackStringReplacer } from 'webpack-string-replacer';
+// import { CE } from 'js-vextensions';
+import { CE } from 'js-vextensions/Source'; // temp; require source, thus ts-node compiles to commonjs (fix for that ts-node doesn't support es2015-modules)
 import { config } from '../Config';
 import { npmPatch_replacerConfig } from './NPMPatches';
 import { MakeSoWebpackConfigOutputsStats } from './WebpackConfig/OutputStats';
@@ -23,6 +25,15 @@ const { QUICK, USE_TSLOADER, OUTPUT_STATS } = process.env;
 
 // const root = path.join(__dirname, '..', '..');
 
+const ownModules = [
+	'js-vextensions', // js (base)
+	'react-vextensions', 'react-vcomponents', 'react-vmenu', 'react-vmessagebox', 'react-vscrollview', 'react-vmarkdown', // +react
+	'firebase-feedback', 'firebase-forum', // +firebase
+	'mobx-firelink', // +mobx
+	'vwebapp-framework', // +framework
+	'webpack-runtime-require', // misc
+];
+
 debug('Creating configuration.');
 export const webpackConfig: webpack.Configuration = {
 	name: 'client',
@@ -49,17 +60,17 @@ export const webpackConfig: webpack.Configuration = {
 			'.mjs', // needed for mobx-sync
 		],
 		alias: {
-			// always retrieve these packages from the root node_modules folder (they throw errors if there are multiple instances) [needed for when using "npm link"]
+			// always retrieve these packages from the root node_modules folder (they have issues if there are multiple instances) [needed for when using "npm link"]
 			react: paths.base('node_modules', 'react'),
 			'react-dom': paths.base('node_modules', 'react-dom'),
 			firebase: paths.base('node_modules', 'firebase'),
-			// consolidating for these wouldn't throw errors necessarily, but we do so to keep things tidy (since we know the different versions will be compatible anyway)
-			'js-vextensions': paths.base('node_modules', 'js-vextensions'),
-			'mobx-firelink': paths.base('node_modules', 'mobx-firelink'),
+			mobx: paths.base('node_modules', 'mobx'),
 			// consolidating for these, since they have npm-patches applied (and we don't want to have to adjust the match-counts)
 			'react-beautiful-dnd': paths.base('node_modules', 'react-beautiful-dnd'),
 			immer: paths.base('node_modules', 'immer'),
-			// mobx: paths.base('node_modules', 'mobx'), // maybe temp; used to try to resolve odd bug with Link->immer.produce, which sets a value within firebase-feedback store
+			// consolidating for these wouldn't throw errors necessarily, but we do so to keep things tidy (since we know the different versions will be compatible anyway)
+			// note: just put all own packages here
+			...CE(ownModules).ToMap((name) => name, (name) => paths.base('node_modules', name)),
 		},
 	},
 	module: {
@@ -204,7 +215,9 @@ webpackConfig.module.rules = [
 				[
 					'@babel/env',
 					{
+						// use loose transpilation when possible (makes debugging easier)
 						loose: true,
+						// don't transpile async/await in dev-mode (makes debugging easier)
 						exclude: DEV ? ['babel-plugin-transform-async-to-generator', 'babel-plugin-transform-regenerator'] : [],
 						// targets: {esmodules: true}, // target es2015
 						targets: { node: '6.5' }, // target es2015

Scripts/Config.ts

@@ -1,8 +1,10 @@
-import path from 'path';
 import debug_base from 'debug';
-import { argv } from 'yargs';
 import ip from 'ip';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { argv } from 'yargs';
 
+// const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const { NODE_ENV, PORT, USE_TSLOADER, BASENAME } = process.env;
 const debug = debug_base('app:config');
 

Scripts/Server.ts

@@ -2,16 +2,21 @@ import express from 'express';
 import debug_base from 'debug';
 import webpack from 'webpack';
 import devMiddleware from 'webpack-dev-middleware';
-import { webpackConfig } from './Build/WebpackConfig';
+import connectHistoryAPIFallback from 'connect-history-api-fallback';
+
 import { config } from './Config';
+// import { config } from './Config.js';
+import { webpackConfig } from './Build/WebpackConfig';
+// import { webpackConfig } from 'WebpackConfig';
+// import { webpackConfig } from './Build/WebpackConfig.js';
 
 const debug = debug_base('app:server');
 const app = express();
 const paths = config.utils_paths;
 
 // This rewrites all routes requests to the root /index.html file (ignoring file requests).
 // If you want to implement universal rendering, you'll want to remove this middleware.
-app.use(require('connect-history-api-fallback')({
+app.use(connectHistoryAPIFallback({
 	rewrites: [
 		{
 			from: /^(.(?!\.(html|js|css|png|jpg)))+$/, // paths with these extensions will NOT be redirected to "index.html""

Scripts/package.json_disabled

@@ -0,0 +1,4 @@
+{
+	"@type": "Load the js files in this folder as es2015 modules, rather than commonjs.",
+	"type": "module"
+}

Scripts/tsconfig.json

@@ -6,8 +6,8 @@
 		"forceConsistentCasingInFileNames": true, // creates duplicates in import-helper plugins otherwise
 
 		// modules/paths
-		//"module": "ES2015", // leave the imports/exports alone (webpack will convert them to "require")
-		"module": "commonjs", // needed, since this config file is used for "ts-node Scripts/Server" as well
+		//"module": "ES2015",
+		"module": "commonjs", // needed, since ts-node does not yet support imports from es2015-modules
 		"moduleResolution": "node",
 		"rootDir": ".",
 		"baseUrl": ".",
@@ -18,17 +18,21 @@
 			// remove @types/react/global.d.ts, as it breaks the auto-import-finder for react-vcomponents/Text
 			"react/global.d.ts": ["../Typings/empty.d.ts"],
 			"react-vextensions/node_modules/react/global.d.ts": ["../Typings/empty.d.ts"],
-			"react-vcomponents/node_modules/react/global.d.ts": ["../Typings/empty.d.ts"],
+			"react-vcomponents/node_modules/react/global.d.ts": ["../Typings/empty.d.ts"]
+			//"WebpackConfig": ["./Build/WebpackConfig.ts"]
 		},
 
+		"resolveJsonModule": true,
+
 		// compiler options
-		"target": "esnext",
+		"target": "ES2015",
+		/*"target": "esnext",
 		"lib": [
 			"es5",
 			"es6",
 			"ESNext",
 			"dom"
-		],
+		],*/
 		"jsx": "react",
 		"noImplicitAny": false,
 		"alwaysStrict": true, // alternative: "@babel/plugin-transform-strict-mode"; went with this since doesn't require another npm package
@@ -40,7 +44,7 @@
 	"include": [
 		"../Typings/**/*.d.ts",
 		"../Scripts/**/*.ts",
-		"../Scripts/**/*.tsx"
+		"../Scripts/**/*.tsx", "Config.ts", "Build/WebpackConfig.ts"
 	],
 	"compileOnSave": true
 }