initial version of browserify sample

vladima · vladima · commit e3aa15f05768 · 2015-08-09T20:38:34.000-07:00
diff --git a/browserify/.gitignore b/browserify/.gitignore
@@ -0,0 +1 @@
+*.js
diff --git a/browserify/README.md b/browserify/README.md
@@ -0,0 +1,45 @@
+**Install Browserify**
+```
+npm install -g browserify
+```
+
+**Fetch dependencies**
+```
+npm install
+```
+
+**Compile .ts files**
+```
+node node_modules/typescript/bin/tsc.js
+```
+shortcut for this command
+```
+npm run tsc
+```
+
+**Run Browserify**
+```
+browserify src/app.js -o bundle.js -s app
+```
+shortcut for this command
+```
+npm run browserify
+
+```
+
+**Start http-server**
+```
+node node_modules/http-server/bin/http-server -o
+```
+shortcut for this command
+```
+npm run listen
+```
+
+By default http-server listens on port 8080. If this port is taken use '-p' to specify free port. 
+
+
+**Shortcut for running all steps in a batch**
+```
+npm run all
+```
diff --git a/browserify/app.css b/browserify/app.css
@@ -0,0 +1,8 @@
+﻿body
+{
+    font-family: 'Segoe UI', sans-serif
+}
+
+span {
+    font-style: italic
+}
diff --git a/browserify/index.html b/browserify/index.html
@@ -0,0 +1,22 @@
+﻿<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title>TypeScript HTML App</title>
+    <link rel="stylesheet" href="app.css" type="text/css" />
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>
+</head>
+<body>
+    <h1>Browserify/TypeScript sample</h1>
+    <div id="content"></div>
+
+    <script>
+    require(["bundle"], function(app) {
+        var element = document.getElementById("content");
+        app.start(function(s) { element.innerText = s; } );
+    });
+    </script>
+    
+</body>
+</html>
diff --git a/browserify/package.json b/browserify/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "typescript-browserify",
+    "version": "1.0.0",
+    "description": "Browserify/TypeScript demo",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Microsoft/TypeScriptSamples.git"
+    },
+    "dependencies": {
+        "http-server": "0.8.0"
+    },
+    "devDependencies": {
+        "typescript": "^1.5.3"
+    },
+    "scripts": {
+        "tsc": "node node_modules/typescript/bin/tsc.js",
+        "browserify": "browserify src/app.js -o bundle.js -s app",
+        "listen": "node node_modules/http-server/bin/http-server",
+        "all": "npm run tsc &&  npm run browserify && npm run listen"
+    }
+}
diff --git a/browserify/src/app.ts b/browserify/src/app.ts
@@ -0,0 +1,8 @@
+import { TimeReporter, Printer } from './timeReporter'
+import { EOL } from 'os';
+
+
+export function start(printer: Printer) {
+    let timeReporter = new TimeReporter(printer);
+    timeReporter.start();
+}
diff --git a/browserify/src/node.d.ts b/browserify/src/node.d.ts
@@ -0,0 +1,7 @@
+declare module "os" {
+    export var EOL: string;
+}
+
+declare module "util" {
+    export function format(format: string, ...args: any[]): string;
+}
diff --git a/browserify/src/timeReporter.ts b/browserify/src/timeReporter.ts
@@ -0,0 +1,27 @@
+import {format} from "util";
+
+export type Printer = (s: string) => void;
+
+export class TimeReporter
+{
+    timerToken: number;
+
+    constructor (private printer: Printer)
+    {
+        this.reportDate();
+    }
+
+    start()
+    {
+        this.timerToken = setInterval(() => this.reportDate(), 500);
+    }
+
+    stop()
+    {
+        clearTimeout(this.timerToken);
+    }
+
+    reportDate() {
+        this.printer(format("Date is %s", new Date().toUTCString()));
+    }
+}
diff --git a/browserify/tsconfig.json b/browserify/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "module": "CommonJS",
+        "target": "es5"
+    },
+    "files": [
+        "src/node.d.ts",
+        "src/timeReporter.ts",
+        "src/app.ts"
+    ]
+}
