Update typescript, webpack, and asset building

Makefile

@@ -3,14 +3,16 @@ GIT_COMMIT = `git rev-parse HEAD | cut -c1-7`
 VERSION = 2.1.0alpha2
 BUILD_OPTIONS = -ldflags "-X main.Version=$(VERSION) -X main.CommitID=$(GIT_COMMIT)"
 
-gotty: main.go server/*.go webtty/*.go backend/*.go Makefile
+gotty: main.go server/*.go webtty/*.go backend/*.go Makefile asset
 	go build ${BUILD_OPTIONS}
 
 docker: 
 	docker build . -t gotty-bash:$(VERSION)
 
 .PHONY: asset
-asset: bindata/static/js/gotty-bundle.js bindata/static/index.html bindata/static/favicon.png bindata/static/css/index.css bindata/static/css/xterm.css bindata/static/css/xterm_customize.css bindata/static/manifest.json bindata/static/icon_192.png
+asset: bindata/static/js/gotty.js bindata/static/index.html bindata/static/favicon.png bindata/static/css/index.css bindata/static/css/xterm.css bindata/static/css/xterm_customize.css bindata/static/manifest.json bindata/static/icon_192.png server/asset.go
+
+server/asset.go:
 	go-bindata -prefix bindata -pkg server -ignore=\\.gitkeep -o server/asset.go bindata/...
 	gofmt -w server/asset.go
 
@@ -38,10 +40,6 @@ bindata/static/icon_192.png: bindata/static resources/icon_192.png
 bindata/static/js: bindata/static
 	mkdir -p bindata/static/js
 
-
-bindata/static/js/gotty-bundle.js: bindata/static/js js/dist/gotty-bundle.js
-	cp js/dist/gotty-bundle.js bindata/static/js/gotty-bundle.js
-
 bindata/static/css: bindata/static
 	mkdir -p bindata/static/css
 
@@ -58,9 +56,9 @@ js/node_modules/xterm/dist/xterm.css:
 	cd js && \
 	npm install
 
-js/dist/gotty-bundle.js: js/src/* js/node_modules/webpack
+bindata/static/js/gotty.js: js/src/* js/node_modules/webpack
 	cd js && \
-	`npm bin`/webpack
+	npx webpack
 
 js/node_modules/webpack:
 	cd js && \
@@ -91,4 +89,4 @@ release:
 	ghr -draft -prerelease ${VERSION} ${OUTPUT_DIR}/dist # -c ${GIT_COMMIT} --delete --prerelease -u sorenisanerd -r gotty ${VERSION}
 
 clean:
-	rm -fr gotty builds
+	rm -fr gotty builds bindata server/asset.go

js/dist/hterm.d.ts

@@ -1,24 +0,0 @@
-import * as bare from "libapps";
-export declare class Hterm {
-    elem: HTMLElement;
-    term: bare.hterm.Terminal;
-    io: bare.hterm.IO;
-    columns: number;
-    rows: number;
-    message: string;
-    constructor(elem: HTMLElement);
-    info(): {
-        columns: number;
-        rows: number;
-    };
-    output(data: string): void;
-    showMessage(message: string, timeout: number): void;
-    removeMessage(): void;
-    setWindowTitle(title: string): void;
-    setPreferences(value: object): void;
-    onInput(callback: (input: string) => void): void;
-    onResize(callback: (colmuns: number, rows: number) => void): void;
-    deactivate(): void;
-    reset(): void;
-    close(): void;
-}

js/dist/websocket.d.ts

@@ -1,17 +0,0 @@
-export declare class ConnectionFactory {
-    url: string;
-    protocols: string[];
-    constructor(url: string, protocols: string[]);
-    create(): Connection;
-}
-export declare class Connection {
-    bare: WebSocket;
-    constructor(url: string, protocols: string[]);
-    open(): void;
-    close(): void;
-    send(data: string): void;
-    isOpen(): boolean;
-    onOpen(callback: () => void): void;
-    onReceive(callback: (data: string) => void): void;
-    onClose(callback: () => void): void;
-}

js/dist/webtty.d.ts

@@ -1,50 +0,0 @@
-export declare const protocols: string[];
-export declare const msgInputUnknown = "0";
-export declare const msgInput = "1";
-export declare const msgPing = "2";
-export declare const msgResizeTerminal = "3";
-export declare const msgUnknownOutput = "0";
-export declare const msgOutput = "1";
-export declare const msgPong = "2";
-export declare const msgSetWindowTitle = "3";
-export declare const msgSetPreferences = "4";
-export declare const msgSetReconnect = "5";
-export declare const msgSetBufferSize = "6";
-export interface Terminal {
-    info(): {
-        columns: number;
-        rows: number;
-    };
-    output(data: string): void;
-    showMessage(message: string, timeout: number): void;
-    removeMessage(): void;
-    setWindowTitle(title: string): void;
-    setPreferences(value: object): void;
-    onInput(callback: (input: string) => void): void;
-    onResize(callback: (colmuns: number, rows: number) => void): void;
-    reset(): void;
-    deactivate(): void;
-    close(): void;
-}
-export interface Connection {
-    open(): void;
-    close(): void;
-    send(data: string): void;
-    isOpen(): boolean;
-    onOpen(callback: () => void): void;
-    onReceive(callback: (data: string) => void): void;
-    onClose(callback: () => void): void;
-}
-export interface ConnectionFactory {
-    create(): Connection;
-}
-export declare class WebTTY {
-    term: Terminal;
-    connectionFactory: ConnectionFactory;
-    args: string;
-    authToken: string;
-    reconnect: number;
-    bufSize: number;
-    constructor(term: Terminal, connectionFactory: ConnectionFactory, args: string, authToken: string);
-    open(): () => void;
-}

js/dist/xterm.d.ts

@@ -1,26 +0,0 @@
-import * as bare from "xterm";
-import { lib } from "libapps";
-export declare class Xterm {
-    elem: HTMLElement;
-    term: bare;
-    resizeListener: () => void;
-    decoder: lib.UTF8Decoder;
-    message: HTMLElement;
-    messageTimeout: number;
-    messageTimer: number;
-    constructor(elem: HTMLElement);
-    info(): {
-        columns: number;
-        rows: number;
-    };
-    output(data: string): void;
-    showMessage(message: string, timeout: number): void;
-    removeMessage(): void;
-    setWindowTitle(title: string): void;
-    setPreferences(value: object): void;
-    onInput(callback: (input: string) => void): void;
-    onResize(callback: (colmuns: number, rows: number) => void): void;
-    deactivate(): void;
-    reset(): void;
-    close(): void;
-}

js/package.json

@@ -1,13 +1,18 @@
 {
+    "name": "gotty",
+    "version": "2.0.0",
+    "private": true,
     "devDependencies": {
         "license-loader": "^0.5.0",
-        "ts-loader": "^2.0.3",
-        "typescript": "^2.3.2",
-        "uglifyjs-webpack-plugin": "^1.0.0-beta.2",
-        "webpack": "^2.5.1"
+        "ts-loader": "^8.1.0",
+        "typescript": "^4.2.4",
+        "webpack": "^5.33.2",
+        "webpack-cli": "^4.6.0"
     },
     "dependencies": {
+        "css-loader": "^5.2.1",
         "libapps": "github:yudai/libapps#release-hterm-1.70",
+        "style-loader": "^2.0.0",
         "xterm": "^2.7.0"
     }
 }

js/src/webtty.ts

@@ -62,8 +62,8 @@ export class WebTTY {
 
     open() {
         let connection = this.connectionFactory.create();
-        let pingTimer: number;
-        let reconnectTimeout: number;
+        let pingTimer: NodeJS.Timeout;
+        let reconnectTimeout: NodeJS.Timeout;
 
         const setup = () => {
             connection.onOpen(() => {

js/src/xterm.ts

@@ -12,7 +12,7 @@ export class Xterm {
 
     message: HTMLElement;
     messageTimeout: number;
-    messageTimer: number;
+    messageTimer: NodeJS.Timeout;
 
 
     constructor(elem: HTMLElement) {

js/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+      "outDir": "./dist/",
       "strictNullChecks": true,
       "noUnusedLocals" : true,
       "noImplicitThis": true,

js/webpack.config.js

@@ -1,9 +1,12 @@
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const path = require('path');
 
 module.exports = {
     entry: "./src/main.ts",
+    entry: {
+        "gotty": "./src/main.ts",
+    },
     output: {
-        filename: "./dist/gotty-bundle.js"
+        path: path.resolve(__dirname, '../bindata/static/js/'),
     },
     devtool: "source-map",
     resolve: {
@@ -16,14 +19,15 @@ module.exports = {
                 loader: "ts-loader",
                 exclude: /node_modules/
             },
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"],
+            },
             {
                 test: /\.js$/,
                 include: /node_modules/,
                 loader: 'license-loader'
-            }
-        ]
+            },
+        ],
     },
-    plugins: [
-        new UglifyJSPlugin()
-    ]
 };