Adding import-map-scopes example. Resolves #14. (#15)

systemjs · Jun 4, 2020 · c3b0863 · c3b0863
1 parent 8d98f45
commit c3b0863
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 0 deletions.
diff --git a/systemjs-features/import-map-scopes/dep-v1.js b/systemjs-features/import-map-scopes/dep-v1.js
@@ -0,0 +1,7 @@
+System.register([], function (_export) {
+  return {
+    execute: function() {
+      _export('version', 'v1');
+    }
+  };
+});
diff --git a/systemjs-features/import-map-scopes/dep-v2.js b/systemjs-features/import-map-scopes/dep-v2.js
@@ -0,0 +1,7 @@
+System.register([], function (_export) {
+  return {
+    execute: function() {
+      _export('version', 'v2');
+    }
+  };
+});
diff --git a/systemjs-features/import-map-scopes/index.html b/systemjs-features/import-map-scopes/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Import Map Scopes SystemJS Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="systemjs-importmap">
+    {
+      "imports": {
+        "main": "./main/main.js",
+        "dep": "./dep-v1.js"
+      },
+      "scopes": {
+        "./main/": {
+          "dep": "./dep-v2.js"
+        }
+      }
+    }
+  </script>
+  <!-- load SystemJS itself from CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
+  <script>
+    System.import('main').then(main => {
+      console.log('main module was loaded', main);
+    });
+
+    System.import('dep').then(dep => {
+      console.log('dep, loaded as top level module', dep);
+    });
+
+    // prepareImport simply waits for all import maps to be processed
+    // You must do so before calling System.resolve()
+    System.prepareImport().then(function () {
+      System.import('dep', System.resolve('main')).then(dep => {
+        console.log('dep, loaded relative to main module', dep);
+      });
+    });
+  </script>
+</head>
+<body>
+  <h1>Check browser console for details</h1>
+</body>
+</html>
diff --git a/systemjs-features/import-map-scopes/main/main.js b/systemjs-features/import-map-scopes/main/main.js
@@ -0,0 +1,15 @@
+System.register(['dep'], function (_export) {
+  let dep;
+
+  return {
+    setters: [
+      function (ns) {
+        dep = ns;
+      }
+    ],
+    execute: function () {
+      console.log('main is executing. dep version is', dep.version);
+      _export('default', 'main');
+    }
+  }
+})