<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module">
// Wrap code in a function to prevent a top-level await.
(async () => {
// The next line raises a SyntaxError in intermediate browsers.
const { helloWorld } = await import('./helloWorld.js');
// The next line in only executed if the browser supports
// dynamic imports. It is never executed in intermediate browsers.
helloWorld();
})();
</script>
</head>
<body>
</body>
</html>
System.register([], function (_export, _context) {
return {
execute: function () {
document.body.appendChild(Object.assign(document.createElement('p'), { textContent: "Mercury is the planet nearest to the sun" }))
/* The doAlert function is exported and can be used like this:
System.import('mercury').then(mercuryModule => {
mercuryModule.doAlert();
})
*/
_export('doAlert', doAlert);
function doAlert() {
alert("I hear it's quite warm on Mercury");
}
}
}
})
System.register([], function (_export, _context) {
return {
execute: function() {
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: 'Neptune is a planet that revolves around the Sun'
}));
// Dynamic import within a module calculates a url relative to the current module
_context.import('./triton.js').then(function (triton) {
console.log("Triton was discovered on", triton.discoveryDate);
});
}
};
});
C:\Users\Administrator\Desktop\practice\triton.js
System.register([], function (_export, _context) {
return {
execute: function() {
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: 'Triton is a moon that revolves around Neptune.'
}));
_export("discoveryDate", "Oct. 10, 1846");
}
};
});
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');
}
}
})
C:\Users\Administrator\Desktop\practice\dep-v1.js
System.register([], function (_export) {
return {
execute: function () {
_export('version', 'v1');
}
};
});
C:\Users\Administrator\Desktop\practice\dep-v2.js
System.register([], function (_export) {
return {
execute: function () {
_export('version', 'v2');
}
};
});
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}
))
}
);
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
}));
});
}
};
});
import * as neptune from './neptune.js'
document.body.appendChild(Object.assign(
document.createElement('p'),
{
textContent: "Saturn is 1,433,449,370 km from the Sun, on average."
}
));
neptune.showDistanceFromSun();
export function showDistanceFromSun() {
document.body.appendChild(Object.assign(
document.createElement('p'),
{
textContent: "Neptune is 4,503,443,661 km from the Sun, on average."
}
));
}
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<button>A button created by React</button>, document.getElementById('react-root'));
import _ from 'lodash';
import { isPlanet } from './helpers/planet-helpers';
import { RealPlanets, NotRealPlanets } from './planets';
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: 'Pluto is no longer considered a planet. (Check you console for more information).'
}))
/* In a browser console, you can use the isPlanet function with the following code:
System.import('planet-checker').then(planetChecker => {
const isPlanet = planetChecker.isPlanet('thing');
})
*/
// Planet operations
isPlanet(RealPlanets.Earth);
isPlanet(NotRealPlanets.Pluto);
// Just a demonstration that lodash is available, since the systemjs-importmap in index.html
// specifies where to fetch lodash
console.log('Real Planets');
_.each(RealPlanets, planet => console.log(planet));
import { InterstellarObjects, NotRealPlanets, RealPlanets } from '../planets'
export function isPlanet(planetName: InterstellarObjects) {
if (RealPlanets[planetName]) {
console.log(`${planetName} is a planet!`)
return true
} else if (NotRealPlanets[planetName]) {
console.log(`${planetName} is not a planet!`)
return false
} else {
throw Error(`Unknown planetName ${planetName}`)
}
}
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: 'Pluto is no longer considered a planet.'
}))
/* In a browser console, you can use the isPlanet function with the following code:
System.import('planet-checker').then(planetChecker => {
const isPlanet = planetChecker.isPlanet('thing');
})
*/
export function isPlanet(planetName: InterstellarObjects) {
if (RealPlanets[planetName]) {
console.log(`${planetName} is a planet!`)
return true
} else if (NotRealPlanets[planetName]) {
console.log(`${planetName} is not a planet!`)
return false
} else {
throw Error(`Unknown planetName ${planetName}`)
}
}
type InterstellarObjects = RealPlanets | NotRealPlanets
enum RealPlanets {
Mercury = 'Mercury',
Venus = 'Venus',
Earth = 'Earth',
Mars = 'Mars',
Jupiter = 'Jupiter',
Saturn = 'Saturn',
Uranus = 'Uranus',
Neptune = 'Neptune',
}
enum NotRealPlanets {
Pluto = 'Pluto',
}
isPlanet(RealPlanets.Earth)
isPlanet(NotRealPlanets.Pluto)
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: "Earth is a planet that revolves around the sun"
}))
/* To use the doAlert function, run the following in the browser console:
System.import('earth').then(earthModule => {
earthModule.doAlert();
})
*/
export function doAlert() {
alert("Earth is home to billions of humans and other life forms.");
}
import './set-public-path'
document.body.appendChild(Object.assign(document.createElement('div'), { textContent: "Are there aliens on Mars?" }))
document.body.appendChild(Object.assign(document.createElement('button'), { textContent: "Click to find out", onclick: findAliens }))
/* This function can be called with the following code:
System.import('mars').then(marsModule => {
marsModule.findAlens();
})
*/
export function findAliens() {
import('./sentient-aliens.js')
}
