Merge pull request #30 from Microsoft/jspm_sample

vladima · vladima · commit c617e53871fe · 2015-08-08T23:44:05.000-07:00
Jspm/TypeScript sample
diff --git a/jspm/README.md b/jspm/README.md
@@ -0,0 +1,16 @@
+**Setup jspm and install jspm dependencies**
+```
+npm install -g jspm@beta
+jspm install
+
+```
+
+**run:**
+- install http-server package via
+ ```
+ npm install -g http-server 
+ ```
+- run server (if port 8080 it taken, pick any port that is free)
+ ```
+ http-server -p 8080
+ ```
diff --git a/jspm/config.js b/jspm/config.js
@@ -0,0 +1,32 @@
+System.config({
+  "baseURL": "/",
+  "defaultJSExtensions": true,
+  "transpiler": "typescript",
+  "paths": {
+    "*": "src/*",
+    "src": "src",
+    "github:*": "jspm_packages/github/*",
+    "npm:*": "jspm_packages/npm/*"
+  },
+  "packages": {
+    "src": {
+      "defaultExtension": "ts"
+    }
+  }
+});
+
+System.config({
+  "map": {
+    "core-js": "npm:core-js@0.9.18",
+    "typescript": "github:mhegazy/typescript@v1.5-beta2",
+    "github:jspm/nodelibs-process@0.1.1": {
+      "process": "npm:process@0.10.1"
+    },
+    "npm:core-js@0.9.18": {
+      "fs": "github:jspm/nodelibs-fs@0.1.2",
+      "process": "github:jspm/nodelibs-process@0.1.1",
+      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
+    }
+  }
+});
+
diff --git a/jspm/index.html b/jspm/index.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+    <title>Jspm sample</title>
+    <script src="jspm_packages/system.src.js"></script>
+    <script src="config.js"></script>
+</head>
+<body>
+    <div id="content"></div>
+    <script>
+        System.import('app').then(function(m) {
+            var element = document.getElementById("content");
+            m.main(element);
+        });
+    </script>
+</body>
+</html>
diff --git a/jspm/package.json b/jspm/package.json
@@ -0,0 +1,11 @@
+{
+  "jspm": {
+    "directories": {},
+    "dependencies": {
+      "core-js": "npm:core-js@^0.9.4"
+    },
+    "devDependencies": {
+      "typescript": "npm:typescript"
+    }
+  }
+}
diff --git a/jspm/src/app.ts b/jspm/src/app.ts
@@ -0,0 +1,6 @@
+import { Greeter } from 'greeter'
+
+export function main(el: HTMLElement): void {
+    let greeter = new Greeter(el);
+    greeter.start();
+}
diff --git a/jspm/src/greeter.ts b/jspm/src/greeter.ts
@@ -0,0 +1,27 @@
+import repeat from "core-js/library/fn/string/repeat"
+
+export class Greeter
+{
+    element: HTMLElement;
+    span: HTMLElement;
+    timerToken: number;
+
+    constructor (element: HTMLElement)
+    {
+        this.element = element;
+        this.element.innerText += "The time is: ";
+        this.span = document.createElement('span');
+        this.element.appendChild(this.span);
+        this.span.innerText = new Date().toUTCString();
+    }
+
+    start()
+    {
+        this.timerToken = setInterval(() => this.span.innerText =  `"${repeat(new Date().toUTCString() + " ", 2)}"`, 500);
+    }
+
+    stop()
+    {
+        clearTimeout(this.timerToken);
+    }
+}
