Merge pull request #4723 from Tyriar/demo_tscheck

Use ts-check in server and start

demo/server.js

@@ -4,21 +4,23 @@
  * demo to the public as is would introduce security risks for the host.
  **/
 
-var express = require('express');
-var expressWs = require('express-ws');
-var os = require('os');
-var pty = require('node-pty');
+// @ts-check
 
-// Whether to use binary transport.
+const express = require('express');
+const expressWs = require('express-ws');
+const os = require('os');
+const pty = require('node-pty');
+
+/** Whether to use binary transport. */
 const USE_BINARY = os.platform() !== "win32";
 
 function startServer() {
- var app = express();
- expressWs(app);
+ const app = express();
+ const appWs = expressWs(app).app;
 
- var terminals = {},
-  unsentOutput = {},
-   temporaryDisposable = {};
+ const terminals = {};
+ const unsentOutput = {};
+ const temporaryDisposable = {};
 
  app.use('/xterm.css', express.static(__dirname + '/../css/xterm.css'));
  app.get('/logo.png', (req, res) => {
@@ -41,18 +43,30 @@ function startServer() {
  app.use('/src', express.static(__dirname + '/src'));
 
  app.post('/terminals', (req, res) => {
- const env = Object.assign({}, process.env);
+ /** @type {{ [key: string]: string }} */
+ const env = {};
+ for (const k of Object.keys(process.env)) {
+ const v = process.env[k];
+ if (v) {
+ env[k] = v;
+ }
+ }
+ // const env = Object.assign({}, process.env);
  env['COLORTERM'] = 'truecolor';
- var cols = parseInt(req.query.cols),
- rows = parseInt(req.query.rows),
- term = pty.spawn(process.platform === 'win32' ? 'pwsh.exe' : 'bash', [], {
- name: 'xterm-256color',
- cols: cols || 80,
- rows: rows || 24,
- cwd: process.platform === 'win32' ? undefined : env.PWD,
- env: env,
- encoding: USE_BINARY ? null : 'utf8'
- });
+ if (typeof req.query.cols !== 'string' || typeof req.query.rows !== 'string') {
+ console.error({ req });
+ throw new Error('Unexpected query args');
+ }
+ const cols = parseInt(req.query.cols);
+ const rows = parseInt(req.query.rows);
+ const term = pty.spawn(process.platform === 'win32' ? 'pwsh.exe' : 'bash', [], {
+ name: 'xterm-256color',
+ cols: cols ?? 80,
+ rows: rows ?? 24,
+ cwd: process.platform === 'win32' ? undefined : env.PWD,
+ env,
+ encoding: USE_BINARY ? null : 'utf8'
+ });
 
  console.log('Created terminal with PID: ' + term.pid);
  terminals[term.pid] = term;
@@ -65,18 +79,22 @@ function startServer() {
  });
 
  app.post('/terminals/:pid/size', (req, res) => {
- var pid = parseInt(req.params.pid),
- cols = parseInt(req.query.cols),
- rows = parseInt(req.query.rows),
- term = terminals[pid];
+ if (typeof req.query.cols !== 'string' || typeof req.query.rows !== 'string') {
+ console.error({ req });
+ throw new Error('Unexpected query args');
+ }
+ const pid = parseInt(req.params.pid);
+ const cols = parseInt(req.query.cols);
+ const rows = parseInt(req.query.rows);
+ const term = terminals[pid];
 
  term.resize(cols, rows);
  console.log('Resized terminal ' + pid + ' to ' + cols + ' cols and ' + rows + ' rows.');
  res.end();
  });
 
- app.ws('/terminals/:pid', function (ws, req) {
- var term = terminals[parseInt(req.params.pid)];
+ appWs.ws('/terminals/:pid', function (ws, req) {
+ const term = terminals[parseInt(req.params.pid)];
  console.log('Connected to terminal ' + term.pid);
  temporaryDisposable[term.pid].dispose();
  delete temporaryDisposable[term.pid];
@@ -160,11 +178,11 @@ function startServer() {
  });
  });
 
- var port = process.env.PORT || 3000,
-   host = os.platform() === 'win32' ? '127.0.0.1' : '0.0.0.0';
+ const port = parseInt(process.env.PORT ?? '3000');
+ const host = os.platform() === 'win32' ? '127.0.0.1' : '0.0.0.0';
 
  console.log('App listening to http://127.0.0.1:' + port);
- app.listen(port, host);
+ app.listen(port, host, 0);
 }
 
 module.exports = startServer;

demo/start.js

@@ -1,10 +1,10 @@
 /**
  * Copyright (c) 2018 The xterm.js authors. All rights reserved.
  * @license MIT
- *
- * This file is the entry point for browserify.
  */
 
+// @ts-check
+
 const path = require('path');
 const webpack = require('webpack');
 const startServer = require('./server.js');
@@ -20,6 +20,8 @@ startServer();
  * For production builds see `webpack.config.js` in the root directory. If that is built the demo
  * can use that by switching out which `Terminal` is imported in `client.ts`, this is useful for
  * validating that the packaged version works correctly.
+ *
+ * @type {import('webpack').Configuration}
  */
 const clientConfig = {
  entry: path.resolve(__dirname, 'client.ts'),
@@ -69,12 +71,13 @@ const clientConfig = {
 const compiler = webpack(clientConfig);
 
 compiler.watch({
- // Example watchOptions
  aggregateTimeout: 300,
  poll: undefined
 }, (err, stats) => {
- // Print watch/build result here...
- console.log(stats.toString({
+ if (err) {
+ console.error(err);
+ }
+ console.log(stats?.toString({
  colors: true
  }));
 });

package.json

@@ -58,6 +58,8 @@
  "@types/chai": "^4.2.22",
  "@types/debug": "^4.1.7",
  "@types/deep-equal": "^1.0.1",
+ "@types/express": "4",
+ "@types/express-ws": "^3.0.1",
  "@types/glob": "^7.2.0",
  "@types/jsdom": "^16.2.13",
  "@types/mocha": "^9.0.0",
@@ -70,6 +72,7 @@
  "chai": "^4.3.4",
  "cross-env": "^7.0.3",
  "deep-equal": "^2.0.5",
+ "esbuild": "^0.19.2",
  "eslint": "^8.45.0",
  "eslint-plugin-jsdoc": "^39.3.6",
  "express": "^4.17.1",