Adding amd dependencies example, including named-exports extra. (#11)

Joel Denning · web-flow · commit 73fc1c588a81 · 2019-12-14T13:00:20.000+02:00
diff --git a/loading-dependencies/amd-dependencies/index.html b/loading-dependencies/amd-dependencies/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>AMD Dependencies - SystemJS Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="systemjs-importmap">
+    {
+      "imports": {
+        "titan": "./lib/titan.js",
+        "rxjs": "https://cdn.jsdelivr.net/npm/rxjs/bundles/rxjs.umd.min.js"
+      }
+    }
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.js"></script>
+  <!-- The named-exports extra is important to avoid having to rxjs.default.of() (and similar for all other rxjs functions) -->
+  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/named-exports.js"></script>
+</head>
+<body>
+  <div id="react-container"></div>
+  <script>
+    System.import('titan')
+  </script>
+</body>
+</html>
diff --git a/loading-dependencies/amd-dependencies/lib/titan.js b/loading-dependencies/amd-dependencies/lib/titan.js
@@ -0,0 +1,24 @@
+System.register(["rxjs"], function (_export, _context) {
+  "use strict";
+
+  var of, from, titanFacts;
+  return {
+    setters: [function (_rxjs) {
+      of = _rxjs.of;
+      from = _rxjs.from;
+    }],
+    execute: function () {
+      of("Saturn").subscribe(planet => {
+        document.body.appendChild(Object.assign(document.createElement('p'), {
+          textContent: `Titan is a moon orbiting ${planet}.`
+        }));
+      });
+      titanFacts = ["Titan is 50% more massive than Earth's moon, and 80% more massive.", "Titan is the only moon known to have a dense atmosphere, and the only known body in space, other than Earth, where clear evidence of stable bodies of surface liquid has been found."];
+      from(titanFacts).subscribe(fact => {
+        document.body.appendChild(Object.assign(document.createElement('p'), {
+          textContent: fact
+        }));
+      });
+    }
+  };
+});
diff --git a/loading-dependencies/amd-dependencies/package.json b/loading-dependencies/amd-dependencies/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "amd-dependencies",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir lib --plugins=@babel/plugin-transform-modules-systemjs"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.7.5",
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-transform-modules-systemjs": "^7.7.4"
+  }
+}
diff --git a/loading-dependencies/amd-dependencies/src/titan.js b/loading-dependencies/amd-dependencies/src/titan.js
@@ -0,0 +1,24 @@
+import { of, from } from 'rxjs';
+
+of("Saturn").subscribe(
+  planet => {
+    document.body.appendChild(Object.assign(
+      document.createElement('p'),
+      {textContent: `Titan is a moon orbiting ${planet}.`}
+    ))
+  }
+)
+
+const titanFacts = [
+  "Titan is 50% more massive than Earth's moon, and 80% more massive.",
+  "Titan is the only moon known to have a dense atmosphere, and the only known body in space, other than Earth, where clear evidence of stable bodies of surface liquid has been found."
+];
+
+from(titanFacts).subscribe(
+  fact => {
+    document.body.appendChild(Object.assign(
+      document.createElement('p'),
+      {textContent: fact}
+    ))
+  }
+);
