preact: convert to typescript

preact/gulpfile.js

@@ -0,0 +1,14 @@
+const { src, dest, task } = require("gulp");
+const clean = require('gulp-clean');
+const inlinesource = require('gulp-inline-source');
+
+task('clean', () => {
+    return src('build', {read: false, allowEmpty: true})
+        .pipe(clean());
+});
+
+task('default', () => {
+    return src('build/index.html')
+        .pipe(inlinesource())
+        .pipe(dest('../src/'));
+});

preact/package.json

@@ -10,16 +10,39 @@
   "author": "Shuanglei Tao <tsl0922@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "start": "preact watch",
-    "build": "preact build --no-service-worker --no-prerender"
+    "prestart": "gulp clean",
+    "start": "webpack-dev-server",
+    "build": "NODE_ENV=production webpack && gulp",
+    "lint": "tslint -c tslint.json 'src/**/*.ts'"
   },
   "devDependencies": {
-    "preact-cli": "^2.2.1"
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^1.0.1",
+    "gulp": "^4.0.2",
+    "gulp-clean": "^0.4.0",
+    "gulp-inline-source": "^4.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^1.3.0",
+    "ts-loader": "^6.0.1",
+    "tslint": "^5.16.0",
+    "tslint-consistent-codestyle": "^1.15.1",
+    "tslint-loader": "^3.5.4",
+    "typescript": "^3.4.5",
+    "webpack": "^4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.1",
+    "webpack-merge": "^4.2.1"
   },
   "dependencies": {
     "decko": "^1.2.0",
-    "fast-text-encoding": "^1.0.0",
     "preact": "^8.4.2",
-    "xterm": "^3.12.2"
+    "preact-compat": "^3.18.5",
+    "preact-router": "^2.6.1",
+    "xterm": "^3.13.2"
   }
 }

preact/src/components/app.tsx

@@ -0,0 +1,45 @@
+import { h, Component } from 'preact';
+
+import { ITerminalOptions, ITheme } from 'xterm';
+import Terminal from './terminal';
+
+if ((module as any).hot) {
+	require('preact/debug');
+}
+
+const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+const wsPath = window.location.pathname.endsWith('/') ? 'ws' : '/ws';
+const url = [protocol, window.location.host, window.location.pathname, wsPath, window.location.search].join('');
+const termOptions = {
+	fontSize: 13,
+	fontFamily: '"Menlo for Powerline", Menlo, Consolas, "Liberation Mono", Courier, monospace',
+	theme: {
+		foreground: '#d2d2d2',
+		background: '#2b2b2b',
+		cursor: '#adadad',
+		black: '#000000',
+		red: '#d81e00',
+		green: '#5ea702',
+		yellow: '#cfae00',
+		blue: '#427ab3',
+		magenta: '#89658e',
+		cyan: '#00a7aa',
+		white: '#dbded8',
+		brightBlack: '#686a66',
+		brightRed: '#f54235',
+		brightGreen: '#99e343',
+		brightYellow: '#fdeb61',
+		brightBlue: '#84b0d8',
+		brightMagenta: '#bc94b7',
+		brightCyan: '#37e6e8',
+		brightWhite: '#f1f1f0'
+	} as ITheme
+} as ITerminalOptions;
+
+export default class App extends Component {
+	public render() {
+		return (
+			<Terminal id='terminal-container' url={url} options={termOptions} />
+		);
+	}
+}