Support evergreen browsers

package.json

@@ -20,7 +20,7 @@
     "test:ci": "run-p --race serve test",
     "serve": "http-server -p 9999 -c-1 --silent",
     "test": "npm run artefact:package && npm run artefact:install && grunt dev && grunt intern:node --test-reporter --color && npm run artefact:build && cypress run",
-    "artefact:build": "cd test-app && npm run build:dist && npm run build:dev",
+    "artefact:build": "cd test-app && npm run build:dist:evergreen && shx mv output/dist output/dist-evergreen  && npm run build:dev:evergreen && shx mv output/dev output/dev-evergreen && npm run build:dist && npm run build:dev && npm run build:dist:evergreen",
     "artefact:install": "cd test-app && shx rm -rf node_modules && npm i && npm run install-build-app",
     "artefact:package": "grunt dist && grunt release-publish-flat --dry-run && shx mv dist/dojo-cli-build-app-* dist/dojo-cli-build-app.tgz",
     "prettier": "prettier --write 'src/**/*.ts' 'tests/**/*.ts'",
@@ -80,7 +80,7 @@
     "typescript": "2.6.1"
   },
   "dependencies": {
-    "@dojo/webpack-contrib": "2.0.0",
+    "@dojo/webpack-contrib": "2.0.1",
     "@theintern/istanbul-loader": "1.0.0-beta.1",
     "auto-require-webpack-plugin": "1.0.1",
     "chalk": "2.3.0",

src/base.config.ts

@@ -7,6 +7,8 @@ import I18nPlugin from '@dojo/webpack-contrib/i18n-plugin/I18nPlugin';
 import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
 import { WebAppManifest, WebpackConfiguration } from './interfaces';
 import * as loaderUtils from 'loader-utils';
+import * as ts from 'typescript';
+import getFeatures from '@dojo/webpack-contrib/static-build-loader/getFeatures';
 
 const IgnorePlugin = require('webpack/lib/IgnorePlugin');
 const AutoRequireWebpackPlugin = require('auto-require-webpack-plugin');
@@ -83,8 +85,48 @@ Copyright [JS Foundation](https://js.foundation/) & contributors
 All rights reserved
 `;
 
+function importTransformer(basePath: string, bundles: any = {}) {
+	return function(context: any) {
+		let resolvedModules: any;
+		return function(file: any) {
+			resolvedModules = file.resolvedModules;
+			return ts.visitEachChild(file, visit, context);
+		};
+		function visit(node: any): any {
+			if (node.kind === ts.SyntaxKind.CallExpression && node.expression.kind === ts.SyntaxKind.ImportKeyword) {
+				const moduleText = node.arguments[0].text;
+				const { resolvedFileName } = resolvedModules.get(moduleText);
+				let chunkName = slash(
+					resolvedFileName
+						.replace(basePath, '')
+						.replace('.ts', '')
+						.replace(/^\//, '')
+				);
+				Object.keys(bundles).some(function(name) {
+					if (bundles[name].indexOf(slash(chunkName)) !== -1) {
+						chunkName = name;
+						return true;
+					}
+					return false;
+				});
+				node.arguments[0] = ts.addSyntheticLeadingComment(
+					node.arguments[0],
+					ts.SyntaxKind.MultiLineCommentTrivia,
+					` webpackChunkName: "${chunkName}" `,
+					false
+				);
+				return node;
+			}
+			return ts.visitEachChild(node, visit, context);
+		}
+	};
+}
+
 export default function webpackConfigFactory(args: any): WebpackConfiguration {
 	const manifest: WebAppManifest = args.pwa && args.pwa.manifest;
+	const extensions = args.legacy ? ['.ts', '.tsx', '.js'] : ['.ts', '.tsx', '.mjs', '.js'];
+	const compilerOptions = args.legacy ? {} : { target: 'es6', module: 'esnext' };
+	const features = args.legacy ? args.features : { ...(args.features || {}), ...getFeatures('chrome') };
 	const lazyModules = Object.keys(args.bundles || {}).reduce(
 		(lazy, key) => {
 			lazy.push(...args.bundles[key]);
@@ -93,17 +135,25 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 		[] as string[]
 	);
 
-	const tsLoaderOptions: any = {
-		onlyCompileBundledFiles: true,
-		instance: 'dojo'
-	};
+	const customTransformers: any[] = [];
 
 	if (lazyModules.length > 0) {
-		tsLoaderOptions.getCustomTransformers = () => ({
-			before: [registryTransformer(basePath, lazyModules)]
-		});
+		customTransformers.push(registryTransformer(basePath, lazyModules));
 	}
 
+	if (!args.legacy) {
+		customTransformers.push(importTransformer(basePath, args.bundles));
+	}
+
+	const tsLoaderOptions: any = {
+		onlyCompileBundledFiles: true,
+		instance: 'dojo',
+		compilerOptions,
+		getCustomTransformers() {
+			return { before: customTransformers };
+		}
+	};
+
 	const postCssModuleLoader = ExtractTextPlugin.extract({
 		fallback: ['style-loader'],
 		use: [
@@ -177,7 +227,7 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 		},
 		resolve: {
 			modules: [basePath, path.join(basePath, 'node_modules')],
-			extensions: ['.ts', '.tsx', '.js']
+			extensions
 		},
 		devtool: 'source-map',
 		watchOptions: { ignored: /node_modules/ },
@@ -231,23 +281,32 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 					include: allPaths,
 					test: /\.ts(x)?$/,
 					use: removeEmpty([
-						args.features && {
+						features && {
 							loader: '@dojo/webpack-contrib/static-build-loader',
-							options: { features: args.features }
+							options: { features }
 						},
-						getUMDCompatLoader({ bundles: args.bundles }),
+						args.legacy && getUMDCompatLoader({ bundles: args.bundles }),
 						{
 							loader: 'ts-loader',
 							options: tsLoaderOptions
 						}
 					])
 				},
+				{
+					test: /\.mjs?$/,
+					use: removeEmpty([
+						features && {
+							loader: '@dojo/webpack-contrib/static-build-loader',
+							options: { features }
+						}
+					])
+				},
 				{
 					test: /\.js(x)?$/,
 					use: removeEmpty([
-						args.features && {
+						features && {
 							loader: '@dojo/webpack-contrib/static-build-loader',
-							options: { features: args.features }
+							options: { features }
 						},
 						'umd-compat-loader'
 					])

src/main.ts

@@ -188,17 +188,24 @@ const command: Command = {
 			default: 9999,
 			type: 'number'
 		});
+
+		options('legacy', {
+			describe: 'build app with legacy browser support',
+			alias: 'l',
+			default: true,
+			type: 'boolean'
+		});
 	},
 	run(helper: Helper, args: any) {
 		console.log = () => {};
 		const rc = helper.configuration.get() || {};
 		let config: webpack.Configuration;
 		if (args.mode === 'dev') {
-			config = devConfigFactory(rc);
+			config = devConfigFactory({ ...rc, ...args });
 		} else if (args.mode === 'test') {
-			config = testConfigFactory(rc);
+			config = testConfigFactory({ ...rc, ...args });
 		} else {
-			config = distConfigFactory(rc);
+			config = distConfigFactory({ ...rc, ...args });
 		}
 
 		if (args.serve) {

test-app/package.json

@@ -7,6 +7,8 @@
     "install-build-app": "npm install --no-save ../dist/dojo-cli-build-app.tgz",
     "build:dist": "dojo build --mode dist",
     "build:dev": "dojo build --mode dev",
+    "build:dist:evergreen": "dojo build --mode dist --legacy false",
+    "build:dev:evergreen": "dojo build --mode dev --legacy false",
     "build:test": "dojo build --mode test"
   },
   "author": "",

tests/integration/build.spec.ts

@@ -4,6 +4,16 @@ describe('build', () => {
 		cy.get('#div').should(
 			'contain',
 			`Built with Build Time Render: true
+Currently Rendered by BTR: false`
+		);
+		cy.get('#app-root').should('contain', 'Lazy Widget using dojorc configuration');
+		cy.get('script[src^="lazy"]').should('exist');
+		cy.get('script[src^="src/Foo"]').should('exist');
+
+		cy.visit('/test-app/output/dist-evergreen');
+		cy.get('#div').should(
+			'contain',
+			`Built with Build Time Render: true
 Currently Rendered by BTR: false`
 		);
 		cy.get('#app-root').should('contain', 'Lazy Widget using dojorc configuration');
@@ -16,6 +26,16 @@ Currently Rendered by BTR: false`
 		cy.get('#div').should(
 			'contain',
 			`Built with Build Time Render: true
+Currently Rendered by BTR: false`
+		);
+		cy.get('#app-root').should('contain', 'Lazy Widget using dojorc configuration');
+		cy.get('script[src^="lazy"]').should('exist');
+		cy.get('script[src^="src/Foo"]').should('exist');
+
+		cy.visit('/test-app/output/dev-evergreen');
+		cy.get('#div').should(
+			'contain',
+			`Built with Build Time Render: true
 Currently Rendered by BTR: false`
 		);
 		cy.get('#app-root').should('contain', 'Lazy Widget using dojorc configuration');