Loading type=systemjs-module scripts. Resolves #2002. (#2015)

README.md

@@ -74,12 +74,19 @@ npm install systemjs
 ## Example Usage
 
 ### Loading a System.register module
+You can load [System.register](/docs/system-register.md) modules with a script element in your HTML:
 
 ```html
+<script type="systemjs-module" src="/js/main.js"></script>
+<script type="systemjs-module" src="import:name-of-module"></script>
 <script src="system.js"></script>
-<script>
-  System.import('/js/main.js');
-</script>
+```
+Using an [`import:` URL](https://github.com/WICG/import-maps/#import-urls) the `src` attribute in HTML can reference [import maps](/docs/import-maps.md).
+### Loading with System.import
+You can also dynamically load modules at any time with `System.import()`:
+
+```js
+System.import('/js/main.js');
 ```
 
 where `main.js` is a module available in the System.register module format.

src/common.js

@@ -109,7 +109,7 @@ export function resolveIfNotPlainOrUrl (relUrl, parentUrl) {
  *
  */
 
-function resolveUrl (relUrl, parentUrl) {
+export function resolveUrl (relUrl, parentUrl) {
   return resolveIfNotPlainOrUrl(relUrl, parentUrl) || (relUrl.indexOf(':') !== -1 ? relUrl : resolveIfNotPlainOrUrl('./' + relUrl, parentUrl));
 }
 

src/features/script-load.js

@@ -3,6 +3,7 @@
  */
 
 import { systemJSPrototype } from '../system-core';
+import { hasDocument, baseUrl, resolveUrl } from '../common';
 
 const systemRegister = systemJSPrototype.register;
 systemJSPrototype.register = function (deps, declare) {
@@ -46,3 +47,15 @@ systemJSPrototype.instantiate = function (url, firstParentUrl) {
   });
 };
 
+if (hasDocument) {
+  window.addEventListener('DOMContentLoaded', loadScriptModules);
+  loadScriptModules();
+}
+
+function loadScriptModules() {
+  document.querySelectorAll('script[type=systemjs-module]').forEach(function (script) {
+    if (script.src) {
+      System.import(script.src.slice(0, 7) === 'import:' ? script.src.slice(7) : resolveUrl(script.src, baseUrl));
+    }
+  });
+}

test/browser/core.js

@@ -179,4 +179,16 @@ suite('SystemJS Standard Tests', function() {
       assert.ok(err.message.indexOf("'.html' modules not implemented") !== -1);
     });
   });
+
+  test('should load <script type=systemjs-module>', function () {
+    const resolved = System.resolve('/test/fixtures/browser/systemjs-module-script.js');
+    assert.ok(System.has(resolved));
+    assert.equal(System.get(resolved).foo, 'bar');
+  });
+
+  test('should remove import: prefix from <script type=systemjs-module>', function () {
+    const resolved = System.resolve('/test/fixtures/browser/systemjs-module-script2.js');
+    assert.ok(System.has(resolved));
+    assert.equal(System.get(resolved).hello, 'there');
+  });
 });

test/fixtures/browser/systemjs-module-script.js

@@ -0,0 +1,7 @@
+System.register([], function(_export) {
+  return {
+    execute: function () {
+      _export('foo', 'bar');
+    }
+  };
+});

test/fixtures/browser/systemjs-module-script2.js

@@ -0,0 +1,7 @@
+System.register([], function(_export) {
+  return {
+    execute: function () {
+      _export('hello', 'there');
+    }
+  };
+});

test/test.html

@@ -20,6 +20,8 @@
 
 	<script type="systemjs-importmap" src="fixtures/browser/importmap.json"></script>
 	<script src="../dist/system.js"></script>
+	<script type="systemjs-module" src="/test/fixtures/browser/systemjs-module-script.js"></script>
+	<script type="systemjs-module" src="import:/test/fixtures/browser/systemjs-module-script2.js"></script>
 
 	<script>
 		mocha.setup('tdd');