systemjs · guybedford · Jul 23, 2020 · Jul 23, 2020 · Jul 23, 2020 · tmsns
diff --git a/src/common.js b/src/common.js
@@ -130,6 +130,8 @@ function objectAssign (to, from) {
   return to;
 }
 
+export var IMPORT_MAP = hasSymbol ? Symbol() : '#';
+
 function resolveAndComposePackages (packages, outPackages, baseUrl, parentMap, parentUrl) {
   for (var p in packages) {
     var resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p;

diff --git a/src/features/auto-import.js b/src/features/auto-import.js
@@ -0,0 +1,43 @@
+/**
+ * Auto-import <script src="system-module.js"></script> registrations
+ * Allows the browser preloader to work directly with SystemJS optimization
+ */
+import { systemJSPrototype, REGISTRY } from '../system-core.js';
+import { hasDocument } from '../common.js';
+
+var autoImports = {};
+
+var systemRegister = systemJSPrototype.register;
+systemJSPrototype.register = function (deps, declare) {
+  if (hasDocument && document.readyState === 'loading' && typeof deps !== 'string') {
+    var scripts = document.getElementsByTagName('script');
+    var lastScript = scripts[scripts.length - 1];
+    if (lastScript && lastScript.src) {
+      // Only import if not already in the registry.
+      // This avoids re-importing an inline dynamic System.import dependency.
+      // There is still a risk if a user dynamically injects a custom System.register script during DOM load that does an
+      // anomymous registration that is able to execute before DOM load completion, and thus is incorrectly matched to the
+      // last script when it wasn't causing a System.import of that last script, but this is deemed an acceptable edge case
+      // since due to custom user registration injection.
+      // Not using document.currentScript is done to ensure IE11 equivalence.
+      if (!this[REGISTRY][lastScript.src]) {
+        autoImports[lastScript.src] = [deps, declare];
+        // Auto import = immediately import the registration
+        // It is up to the user to manage execution order for deep preloading.
+        this.import(lastScript.src);
+      }
+      return;
+    }
+  }
+  return systemRegister.call(this, deps, declare);
+};
+
+var systemInstantiate = systemJSPrototype.instantiate;
+systemJSPrototype.instantiate = function (url) {
+  var autoImport = autoImports[url];
+  if (autoImport) {
+    delete autoImports[url];
+    return autoImport;
+  }
+  return systemInstantiate.apply(this, arguments);
+};
diff --git a/src/features/browser-scripts.js b/src/features/browser-scripts.js
@@ -0,0 +1,61 @@
+/*
+ * SystemJS browser attachments for script and import map processing
+ */
+import { baseUrl, resolveAndComposeImportMap, hasDocument, IMPORT_MAP, resolveUrl } from '../common.js';
+import { systemJSPrototype } from '../system-core.js';
+import { errMsg } from '../err-msg.js';
+
+var importMapPromise = Promise.resolve({ imports: {}, scopes: {} });
+
+// Scripts are processed immediately, on the first System.import, and on DOMReady.
+// Import map scripts are processed only once (by being marked) and in order for each phase.
+// This is to avoid using DOM mutation observers in core, although that would be an alternative.
+var processFirst = hasDocument;
+systemJSPrototype.prepareImport = function () {
+  if (processFirst) {
+    processScripts();
+    processFirst = false;
+  }
+  var loader = this;
+  return importMapPromise.then(function (importMap) {
+    loader[IMPORT_MAP] = importMap;
+  });
+};
+if (hasDocument) {
+  processScripts();
+  window.addEventListener('DOMContentLoaded', processScripts);
+}
+
+function processScripts () {
+  [].forEach.call(document.querySelectorAll('script'), function (script) {
+    // TODO: deprecate systemjs-module in next major now that we have auto import
+    if (script.type === 'systemjs-module') {
+      if (!script.src)
+        return;
+      System.import(script.src.slice(0, 7) === 'import:' ? script.src.slice(7) : resolveUrl(script.src, baseUrl));
+    }
+    else if (script.type === 'systemjs-importmap') {
+      if (script.sp) // sp marker = systemjs processed
+        return;
+      script.sp = true;
+      importMapPromise = importMapPromise.then(function (importMap) {
+        if (script.src)
+          return fetch(script.src).then(function (res) {
+            return res.text();
+          }).then(function (text) {
+            return extendImportMap(importMap, text, script.src);
+          });
+        return extendImportMap(importMap, script.innerHTML, baseUrl);
+      });
+    }
+  });
+}
+
+function extendImportMap (importMap, newMapText, newMapUrl) {
+  try {
+    var newMap = JSON.parse(newMapText);
+  } catch (err) {
+    throw Error(process.env.SYSTEM_PRODUCTION ? errMsg(1) : errMsg(1, "systemjs-importmap contains invalid JSON"));
+  }
+  return resolveAndComposeImportMap(newMap, newMapUrl, importMap);
+}
diff --git a/src/features/import-map.js b/src/features/import-map.js
diff --git a/src/features/resolve.js b/src/features/resolve.js
@@ -0,0 +1,12 @@
+import { BASE_URL, baseUrl, resolveImportMap, resolveIfNotPlainOrUrl, IMPORT_MAP } from '../common.js';
+import { systemJSPrototype } from '../system-core.js';
+import { errMsg } from '../err-msg.js';
+
+systemJSPrototype.resolve = function (id, parentUrl) {
+  parentUrl = parentUrl || !process.env.SYSTEM_BROWSER && this[BASE_URL] || baseUrl;
+  return resolveImportMap(this[IMPORT_MAP], resolveIfNotPlainOrUrl(id, parentUrl) || id, parentUrl) || throwUnresolved(id, parentUrl);
+};
+
+function throwUnresolved (id, parentUrl) {
+  throw Error(errMsg(8, process.env.SYSTEM_PRODUCTION ? [id, parentUrl].join(', ') : "Unable to resolve bare specifier '" + id + (parentUrl ? "' from " + parentUrl : "'")));
+}
diff --git a/src/features/script-load.js b/src/features/script-load.js
@@ -1,16 +1,10 @@
 /*
- * Supports loading System.register via script tag injection
+ * Script instantiation loading
  */
-
-import { systemJSPrototype } from '../system-core';
-import { hasDocument, baseUrl, resolveUrl } from '../common';
+import { hasDocument } from '../common.js';
+import { systemJSPrototype } from '../system-core.js';
 import { errMsg } from '../err-msg.js';
 
-var systemRegister = systemJSPrototype.register;
-systemJSPrototype.register = function (deps, declare) {
-  systemRegister.call(this, deps, declare);
-};
-
 systemJSPrototype.createScript = function (url) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
@@ -43,22 +37,8 @@ systemJSPrototype.instantiate = function (url, firstParentUrl) {
   });
 };
 
-if (hasDocument) {
+if (hasDocument)
   window.addEventListener('error', function (evt) {
     lastWindowErrorUrl = evt.filename;
     lastWindowError = evt.error;
   });
-
-  window.addEventListener('DOMContentLoaded', loadScriptModules);
-  loadScriptModules();
-}
-
-
-function loadScriptModules() {
-  [].forEach.call(
-    document.querySelectorAll('script[type=systemjs-module]'), function (script) {
-      if (script.src) {
-        System.import(script.src.slice(0, 7) === 'import:' ? script.src.slice(7) : resolveUrl(script.src, baseUrl));
-      }
-    });
-}
diff --git a/src/features/worker-load.js b/src/features/worker-load.js
@@ -12,4 +12,3 @@ if (hasSelf && typeof importScripts === 'function')
       return loader.getRegister();
     });
   };
-
diff --git a/src/s.js b/src/s.js
@@ -1,3 +1,5 @@
-import './features/import-map.js';
+import './features/resolve.js';
+import './features/browser-scripts.js';
 import './features/script-load.js';
+import './features/auto-import.js';
 import './features/worker-load.js';
diff --git a/src/system-node.js b/src/system-node.js
@@ -1,13 +1,19 @@
-import { REGISTRY, systemJSPrototype } from './system-core.js';
-import { IMPORT_MAP, IMPORT_MAP_PROMISE } from './features/import-map.js';
+import './features/resolve.js';
 import './features/registry.js';
 import './extras/global.js';
 import './extras/module-types.js';
 import './features/node-fetch.js';
-import { BASE_URL, baseUrl, resolveAndComposeImportMap } from './common.js';
+import { REGISTRY, systemJSPrototype } from './system-core.js';
+import { BASE_URL, baseUrl, resolveAndComposeImportMap, IMPORT_MAP } from './common.js';
 
 export const System = global.System;
 
+const IMPORT_MAP_PROMISE = Symbol();
+
+systemJSPrototype.prepareImport = function () {
+  return this[IMPORT_MAP_PROMISE];
+};
+
 const originalResolve = systemJSPrototype.resolve;
 systemJSPrototype.resolve = function () {
   if (!this[IMPORT_MAP]) {

diff --git a/src/system.js b/src/system.js
@@ -1,6 +1,8 @@
-import './features/import-map.js';
+import './features/resolve.js';
+import './features/browser-scripts.js';
 import './features/script-load.js';
+import './features/auto-import.js';
 import './features/worker-load.js';
 import './extras/global.js';
 import './extras/module-types.js';
-import './features/registry.js';
+import './features/registry.js';
diff --git a/test/browser/core.js b/test/browser/core.js
@@ -213,6 +213,12 @@ suite('SystemJS Standard Tests', function() {
     assert.equal(System.get(resolved).hi, 'bye');
   });
 
+  test('should load auto import', function () {
+    const resolved = System.resolve('/test/fixtures/browser/auto-import.js');
+    assert.ok(System.has(resolved));
+    assert.equal(System.get(resolved).auto, 'import');
+  });
+
   test('non-enumerable __esModule property export (issue 2090)', function () {
     return System.import('fixtures/__esModule.js').then(function (m) {
       // Even though __esModule is not enumerable on the exported object, it should be preserved on the systemjs namespace

diff --git a/test/fixtures/browser/auto-import.js b/test/fixtures/browser/auto-import.js
@@ -0,0 +1,7 @@
+System.register([], function(_export) {
+  return {
+    execute: function () {
+      _export('auto', 'import');
+    }
+  };
+});
diff --git a/test/system-core.js b/test/system-core.js
@@ -1,19 +1,20 @@
 import assert from 'assert';
 import fs from 'fs';
 import path from 'path';
-import { resolveIfNotPlainOrUrl } from '../src/common.js';
+import { resolveIfNotPlainOrUrl, IMPORT_MAP } from '../src/common.js';
 import '../src/features/registry.js';
 import { REGISTRY } from '../src/system-core.js';
-import '../src/features/import-map.js';
+import '../src/features/resolve.js';
 
 const SystemLoader = System.constructor;
 
+SystemLoader.prototype[IMPORT_MAP] = { imports: {}, scopes: {} };
+SystemLoader.prototype.prepareImport = () => {};
+
 describe('Core API', function () {
   const loader = new SystemLoader();
   loader.resolve = x => x;
 
-  before(() => System.prepareImport());
-
   it('Should be an instance of itself', function () {
     assert(loader instanceof SystemLoader);
   });

diff --git a/test/test.html b/test/test.html
@@ -30,6 +30,7 @@
 	<script type="systemjs-module" src="/test/fixtures/browser/systemjs-module-early.js"></script>
 	<script src="../dist/system.js"></script>
 	<script type="systemjs-module" src="/test/fixtures/browser/systemjs-module-script.js"></script>
+	<script src="/test/fixtures/browser/auto-import.js"></script>
 	<script type="systemjs-module" src="import:/test/fixtures/browser/systemjs-module-script2.js"></script>
 
 	<script>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,4 +12,3 @@ if (hasSelf && typeof importScripts === 'function')
		return loader.getRegister();
		});
		};