jupyterlab · telamonian · Oct 26, 2019 · Nov 1, 2019
diff --git a/examples/example-vdom/index.html b/examples/example-vdom/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+  <script type="text/javascript" src="build/bundle.example.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/examples/example-vdom/package.json b/examples/example-vdom/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@phosphor/example-vdom",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "tsc && webpack",
+    "clean": "rimraf build"
+  },
+  "dependencies": {
+    "@phosphor/vdom": "^0.0.1",
+    "@phosphor/widgets": "^1.9.3"
+  },
+  "devDependencies": {
+    "rimraf": "^2.5.2",
+    "typescript": "~3.6.0",
+    "webpack": "^2.2.1"
+  }
+}
diff --git a/examples/example-vdom/src/index.tsx b/examples/example-vdom/src/index.tsx
@@ -0,0 +1,91 @@
+/*------------------------------------------------------------------------------
+| Copyright (c) 2014-2019, PhosphorJS Contributors
+|
+| Distributed under the terms of the BSD 3-Clause License.
+|
+| The full license is in the file LICENSE, distributed with this software.
+|-----------------------------------------------------------------------------*/
+import {
+  VDOM
+} from '@phosphor/vdom';
+
+import {
+  Widget
+} from '@phosphor/widgets';
+
+
+type TickData = {
+  readonly title: string;
+  readonly count: number;
+}
+
+
+const TickRow = (props: TickData) => {
+  return (
+    <tr>
+      <td>{props.title}</td>
+      <td>{props.count}</td>
+    </tr>
+  );
+};
+
+
+class TimeWidget extends Widget {
+
+  constructor() {
+    super();
+    this.addClass('TimeWidget');
+  }
+
+  protected onBeforeAttach(): void {
+    setInterval(() => this._tick(), 30);
+  }
+
+  protected onUpdateRequest(): void {
+    VDOM.render(this.render(), this.node);
+  }
+
+  protected render() {
+    let time = this._time;
+    let now = this._now;
+    return (
+      <div>
+        <h1>This page is updated every 30ms</h1>
+        <h2>
+          <span>UTC Time: </span>
+          <span>{time.toUTCString()}</span>
+        </h2>
+        <h2>
+          <span>Local Time: </span>
+          <span>{time.toString()}</span>
+        </h2>
+        <h2>
+          <span>Milliseconds Since Epoch: </span>
+          <span>{now.toString()}</span>
+        </h2>
+        <table>
+          <TickRow title='Hours' count={time.getHours()} />
+          <TickRow title='Minutes' count={time.getMinutes()} />
+          <TickRow title='Seconds' count={time.getSeconds()} />
+        </table>
+      </div>
+    );
+  }
+
+  private _tick(): void {
+    this._time = new Date();
+    this._now = Date.now();
+    this.update();
+  }
+
+  private _time = new Date();
+  private _now = Date.now();
+}
+
+
+function main(): void {
+  Widget.attach(new TimeWidget(), document.body);
+}
+
+
+window.onload = main;
diff --git a/examples/example-vdom/tsconfig.json b/examples/example-vdom/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+      "declaration": false,
+      "noImplicitAny": true,
+      "noEmitOnError": true,
+      "noUnusedLocals": true,
+      "strictNullChecks": true,
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "target": "es5",
+      "outDir": "./build",
+      "jsx": "react",
+      "jsxFactory": "VDOM.createElement",
+      "lib": ["es2015", "dom"],
+      "types": []
+    },
+    "include": ["src/*"]
+  }
diff --git a/examples/example-vdom/webpack.config.js b/examples/example-vdom/webpack.config.js
@@ -0,0 +1,16 @@
+var path = require('path');
+
+module.exports = {
+  entry: './build/index.js',
+  output: {
+    path: __dirname + '/build/',
+    filename: 'bundle.example.js',
+    publicPath: './build/'
+  },
+  module: {
+    rules: [
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { test: /\.png$/, use: 'file-loader' }
+    ]
+  }
+};
diff --git a/packages/vdom/package.json b/packages/vdom/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@phosphor/vdom",
+  "version": "0.0.1",
+  "description": "PhosphorJS - VDOM",
+  "homepage": "https://github.com/phosphorjs/phosphor",
+  "bugs": {
+    "url": "https://github.com/phosphorjs/phosphor/issues"
+  },
+  "license": "BSD-3-Clause",
+  "author": "S. Chris Colbert <sccolbert@gmail.com>",
+  "contributors": [
+    "S. Chris Colbert <sccolbert@gmail.com>"
+  ],
+  "files": [
+    "lib/*.d.ts",
+    "lib/*.js"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "directories": {
+    "lib": "lib/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phosphorjs/phosphor.git"
+  },
+  "scripts": {
+    "build": "tsc --build",
+    "clean": "rimraf lib",
+    "watch": "tsc --build --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "rimraf": "^2.5.2",
+    "typescript": "~3.6.0"
+  }
+}
diff --git a/packages/vdom/src/index.ts b/packages/vdom/src/index.ts
@@ -0,0 +1,10 @@
+/*------------------------------------------------------------------------------
+| Copyright (c) 2014-2019, PhosphorJS Contributors
+|
+| Distributed under the terms of the BSD 3-Clause License.
+|
+| The full license is in the file LICENSE, distributed with this software.
+|-----------------------------------------------------------------------------*/
+export * from './pjsx';
+export * from './vdom';
+export * from './vnode';