Fix relative systemJs named modules to absolute for grading version. IE11 not supported (need investigation). Ceased to strict depend for promise-polyfill & whatwg-fetch

viT-1 · viT-1 · commit 2ea1b0b9d9e0 · 2021-06-05T00:34:35.000+03:00
diff --git a/gulpfile.esm.js b/gulpfile.esm.js
@@ -12,6 +12,7 @@ import {
 	dest,
 	task,
 	parallel,
+	series,
 } from 'gulp';
 import uglifyES from 'gulp-uglify-es';
 
@@ -90,7 +91,6 @@ task('systemjs:deleteAssets',
 	() => del([
 		`${absDest}/**/*.html.js`,
 		path.resolve(absDest, 'tsconfig.html-esm.json'),
-		path.resolve(absDest, 'direct-vuex.esm.min.js'),
 		path.resolve(absDest, 'vue-property-decorator.js'),
 		path.resolve(absDest, 'vue-class-component.js'),
 	]));
@@ -113,6 +113,16 @@ task('esm:fixImportsAddJsSuffix',
 		.pipe(gReplace(/(.* from ')(.*)(\.html)(')/gm, '$1$2$3.js$4'))
 		.pipe(dest(absDest)));
 
+task('systemjs:fixRelativeHtml',
+	() => src([
+		path.resolve(absDest, path.basename(tsOptionsSystemJs.outFile)),
+	])
+		.pipe(gReplace(
+			/(\.register\(")(.*)(\/)(.*)(",\s\[")(\.\/)(.*)(\.html"\])/gm,
+			'$1$2$3$4$5$2/$7$8',
+		))
+		.pipe(dest(absDest)));
+
 task('systemjs:uglifyBundles',
 	() => src([
 		path.resolve(absDest, path.basename(tsOptionsSystemJs.outFile)),
@@ -132,8 +142,6 @@ task('copySystemJs', // not in 'copyNonTranspiledFiles' because of dest
 task('systemjs:copyNonTranspiledFiles',
 	() => src([
 		path.resolve(absSrc, 'tsconfig.html-esm.json'),
-		path.resolve('node_modules', 'promise-polyfill', 'dist', 'polyfill.min.js'),
-		path.resolve('node_modules', 'whatwg-fetch', 'dist', 'fetch.umd.js'),
 	])
 		.pipe(dest(absDest)));
 
@@ -151,7 +159,10 @@ task('predeploy',
 task('postdeploy',
 	parallel(
 		'systemjs:deleteAssets', // they are not need, because of bundles including
-		'systemjs:uglifyBundles',
+		series(
+			'systemjs:fixRelativeHtml', // workaround for upgrading to SystemJS v6
+			'systemjs:uglifyBundles',
+		),
 	),
 );
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "systemjs-ts-es6-vue",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "repository": {
         "type": "git",
         "url": "https://github.com/viT-1/systemjs-ts-es6-vue.git"
@@ -53,15 +53,13 @@
         "debounce-decorator-ts": "1.0.4",
         "direct-vuex": "0.12.1",
         "es-module-shims": "0.10.1",
-        "promise-polyfill": "8.2.0",
         "express": "4.17.1",
         "systemjs": "5.0.0",
         "vue": "2.6.13",
         "vue-class-component": "7.2.6",
         "vue-multiselect": "2.1.6",
         "vue-property-decorator": "9.0.2",
-        "vuex": "3.6.2",
-        "whatwg-fetch": "3.6.2"
+        "vuex": "3.6.2"
     },
     "devDependencies": {
         "@types/express": "4.17.12",
diff --git a/src/index.htm b/src/index.htm
@@ -1,14 +1,12 @@
 <!DOCTYPE html>
 
 <head>
-	<!-- If you need polyfill.io use v3 with 'always,gated' excluding Symbol, v2 breaks the code -->
-	<!-- <script src="https://cdn.polyfill.io/v3/polyfill.min.js?flags=always,gated&excludes=Symbol,Symbol.iterator,Symbol.species"></script> -->
-
-	<!-- IE 7-11 Promise polyfill -->
-	<script src="polyfill.min.js"></script>
-	<!-- IE 10+ Fetch polyfill -->
-	<script src="fetch.umd.js"></script>
-
+	<script>
+		if (typeof Promise === 'undefined')
+			document.write('<script src="https://unpkg.com/bluebird@3.7.2/js/browser/bluebird.core.min.js"><\/script>');
+		if (typeof fetch === 'undefined')
+			document.write('<script src="https://unpkg.com/whatwg-fetch@3.6.2/dist/fetch.umd.js"><\/script>');
+	</script>
 	<script src="systemjs/system.min.js"></script>
 	<script src="systemjs/named-exports.min.js"></script>
 	<script src="systemjs/named-register.min.js"></script>
@@ -27,17 +25,16 @@
 	<script type="systemjs-importmap" src="importmap.system.json"></script>
 	<script>
 		function bundleLoad () {
-			// dependencies: main use bundle that using html-esm (vue-class-component)
-			System.import('html-esm')
-			.then(function () {
-				var bundleReady = System.import('bundle');
-				var vuexReady = System.import('vuex');
-				Promise.all([bundleReady, vuexReady])
+			var htmlEsmReady = System.import('html-esm');
+			var vuexReady = System.import('vuex');
+
+			Promise.all([htmlEsmReady, vuexReady])
 				.then(function () {
-					console.log('SystemJs bundle is loaded!');
-					System.import('main');
+					System.import('bundle').then(function () {
+						console.log('SystemJs bundle is loaded!');
+						System.import('main');
+					});
 				});
-			});
 		}
 
 		function waitForSystem () {
