tgui-bench port

tgui/README.md

@@ -99,6 +99,7 @@ You can double-click these batch files to achieve the same thing:
 
 - `bin\tgui.bat` - Build the project in production mode.
 - `bin\tgui-dev-server.bat` - Launch a development server.
+- `bin\tgui-bench.cmd` - Run benchmarks.
 
 > Remember to always run a full build before submitting a PR. It creates
 > a compressed javascript bundle which is then referenced from DM code.

tgui/babel.config.js

@@ -5,11 +5,7 @@
  */
 
 const createBabelConfig = options => {
-  const {
-    // mode, // uncomment if future config needs to depend on environment
-    presets = [],
-    plugins = [],
-  } = options;
+  const { presets = [], plugins = [], removeConsole } = options;
   return {
     presets: [
       [require.resolve('@babel/preset-typescript'), {
@@ -18,23 +14,23 @@ const createBabelConfig = options => {
       [require.resolve('@babel/preset-env'), {
         modules: 'commonjs',
         useBuiltIns: 'entry',
-        corejs: '3.10',
+        corejs: '3',
         spec: false,
         loose: true,
         targets: [],
       }],
       ...presets,
-    ],
+    ].filter(Boolean),
     plugins: [
       [require.resolve('@babel/plugin-proposal-class-properties'), {
         loose: true,
       }],
       require.resolve('@babel/plugin-transform-jscript'),
       require.resolve('babel-plugin-inferno'),
-      require.resolve('babel-plugin-transform-remove-console'),
+      removeConsole && require.resolve('babel-plugin-transform-remove-console'),
       require.resolve('common/string.babel-plugin.cjs'),
       ...plugins,
-    ],
+    ].filter(Boolean),
   };
 };
 

tgui/bin/tgui-bench.cmd

@@ -0,0 +1,5 @@
+@echo off
+rem Copyright (c) 2021 Aleksej Komarov
+rem SPDX-License-Identifier: MIT
+call powershell.exe -NoLogo -ExecutionPolicy Bypass -File "%~dp0\tgui_.ps1" --bench %*
+pause

tgui/bin/tgui_.ps1

@@ -52,6 +52,12 @@ function task-dev-server {
   yarn node "packages/tgui-dev-server/index.esm.js" @Args
 }
 
+## Runs benchmarking tests
+function task-bench {
+  yarn run webpack-cli --env TGUI_BENCH=1
+  yarn node "packages/tgui-bench/index.js"
+}
+
 ## Run a linter through all packages
 function task-lint {
   yarn run tsc
@@ -102,6 +108,13 @@ if ($Args.Length -gt 0) {
     exit 0
   }
 
+    if ($Args[0] -eq "--bench") {
+    $Rest = $Args | Select-Object -Skip 1
+    task-install
+    task-bench @Rest
+    exit 0
+  }
+
   if ($Args[0] -eq "--lint") {
     $Rest = $Args | Select-Object -Skip 1
     task-install

tgui/global.d.ts

@@ -4,155 +4,152 @@
  * @license MIT
  */
 
- declare global {
-  // Webpack asset modules.
-  // Should match extensions used in webpack config.
-  declare module '*.png' {
-    const content: string;
-    export default content;
-  }
-
-  declare module '*.jpg' {
-    const content: string;
-    export default content;
-  }
-
-  declare module '*.svg' {
-    const content: string;
-    export default content;
-  }
-
-  type ByondType = {
-    /**
-     * True if javascript is running in BYOND.
-     */
-    IS_BYOND: boolean;
-
-    /**
-     * True if browser is IE8 or lower.
-     */
-    IS_LTE_IE8: boolean;
-
-    /**
-     * True if browser is IE9 or lower.
-     */
-    IS_LTE_IE9: boolean;
-
-    /**
-     * True if browser is IE10 or lower.
-     */
-    IS_LTE_IE10: boolean;
-
-    /**
-     * True if browser is IE11 or lower.
-     */
-    IS_LTE_IE11: boolean;
-
-    /**
-     * Makes a BYOND call.
-     *
-     * If path is empty, this will trigger a Topic call.
-     * You can reference a specific object by setting the "src" parameter.
-     *
-     * See: https://secure.byond.com/docs/ref/skinparams.html
-     */
-    call(path: string, params: object): void;
-
-    /**
-     * Makes an asynchronous BYOND call. Returns a promise.
-     */
-    callAsync(path: string, params: object): Promise<any>;
-
-    /**
-     * Makes a Topic call.
-     *
-     * You can reference a specific object by setting the "src" parameter.
-     */
-    topic(params: object): void;
-
-    /**
-     * Runs a command or a verb.
-     */
-    command(command: string): void;
-
-    /**
-     * Retrieves all properties of the BYOND skin element.
-     *
-     * Returns a promise with a key-value object containing all properties.
-     */
-    winget(id: string): Promise<object>;
-
-    /**
-     * Retrieves all properties of the BYOND skin element.
-     *
-     * Returns a promise with a key-value object containing all properties.
-     */
-    winget(id: string, propName: '*'): Promise<object>;
-
-    /**
-     * Retrieves an exactly one property of the BYOND skin element,
-     * as defined in `propName`.
-     *
-     * Returns a promise with the value of that property.
-     */
-    winget(id: string, propName: string): Promise<any>;
-
-    /**
-     * Retrieves multiple properties of the BYOND skin element,
-     * as defined in the `propNames` array.
-     *
-     * Returns a promise with a key-value object containing listed properties.
-     */
-    winget(id: string, propNames: string[]): Promise<object>;
-
-    /**
-     * Assigns properties to BYOND skin elements.
-     */
-    winset(props: object): void;
-
-    /**
-     * Assigns properties to the BYOND skin element.
-     */
-    winset(id: string, props: object): void;
-
-    /**
-     * Sets a property on the BYOND skin element to a certain value.
-     */
-    winset(id: string, propName: string, propValue: any): void;
-
-    /**
-     * Parses BYOND JSON.
-     *
-     * Uses a special encoding to preverse Infinity and NaN.
-     */
-    parseJson(text: string): any;
-
-    /**
-     * Loads a stylesheet into the document.
-     */
-    loadCss(url: string): void;
-
-    /**
-     * Loads a script into the document.
-     */
-    loadJs(url: string): void;
-  };
-
-  /**
-   * Object that provides access to Byond Skin API and is available in
-   * any tgui application.
-   */
-  const Byond: ByondType;
-
-  interface Window {
-    /**
-     * ID of the Byond window this script is running on.
-     * Should be used as a parameter to winget/winset.
-     */
-    __windowId__: string;
-    Byond: ByondType;
-  }
+// Webpack asset modules.
+// Should match extensions used in webpack config.
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
 
+declare module '*.svg' {
+  const content: string;
+  export default content;
 }
 
-export {};
+type ByondType = {
+  /**
+   * True if javascript is running in BYOND.
+   */
+  IS_BYOND: boolean;
+
+  /**
+   * True if browser is IE8 or lower.
+   */
+  IS_LTE_IE8: boolean;
+
+  /**
+   * True if browser is IE9 or lower.
+   */
+  IS_LTE_IE9: boolean;
+
+  /**
+   * True if browser is IE10 or lower.
+   */
+  IS_LTE_IE10: boolean;
+
+  /**
+   * True if browser is IE11 or lower.
+   */
+  IS_LTE_IE11: boolean;
+
+  /**
+   * Makes a BYOND call.
+   *
+   * If path is empty, this will trigger a Topic call.
+   * You can reference a specific object by setting the "src" parameter.
+   *
+   * See: https://secure.byond.com/docs/ref/skinparams.html
+   */
+  call(path: string, params: object): void;
+
+  /**
+   * Makes an asynchronous BYOND call. Returns a promise.
+   */
+  callAsync(path: string, params: object): Promise<any>;
+
+  /**
+   * Makes a Topic call.
+   *
+   * You can reference a specific object by setting the "src" parameter.
+   */
+  topic(params: object): void;
+
+  /**
+   * Runs a command or a verb.
+   */
+  command(command: string): void;
+
+  /**
+   * Retrieves all properties of the BYOND skin element.
+   *
+   * Returns a promise with a key-value object containing all properties.
+   */
+  winget(id: string): Promise<object>;
+
+  /**
+   * Retrieves all properties of the BYOND skin element.
+   *
+   * Returns a promise with a key-value object containing all properties.
+   */
+  winget(id: string, propName: '*'): Promise<object>;
+
+  /**
+   * Retrieves an exactly one property of the BYOND skin element,
+   * as defined in `propName`.
+   *
+   * Returns a promise with the value of that property.
+   */
+  winget(id: string, propName: string): Promise<any>;
+
+  /**
+   * Retrieves multiple properties of the BYOND skin element,
+   * as defined in the `propNames` array.
+   *
+   * Returns a promise with a key-value object containing listed properties.
+   */
+  winget(id: string, propNames: string[]): Promise<object>;
+
+  /**
+   * Assigns properties to BYOND skin elements.
+   */
+  winset(props: object): void;
+
+  /**
+   * Assigns properties to the BYOND skin element.
+   */
+  winset(id: string, props: object): void;
+
+  /**
+   * Sets a property on the BYOND skin element to a certain value.
+   */
+  winset(id: string, propName: string, propValue: any): void;
+
+  /**
+   * Parses BYOND JSON.
+   *
+   * Uses a special encoding to preverse Infinity and NaN.
+   */
+  parseJson(text: string): any;
+
+  /**
+   * Loads a stylesheet into the document.
+   */
+  loadCss(url: string): void;
+
+  /**
+   * Loads a script into the document.
+   */
+  loadJs(url: string): void;
+};
+
+/**
+ * Object that provides access to Byond Skin API and is available in
+ * any tgui application.
+ */
+const Byond: ByondType;
+
+interface Window {
+  /**
+   * ID of the Byond window this script is running on.
+   * Should be used as a parameter to winget/winset.
+   */
+  __windowId__: string;
+  __updateQueue__: unknown[];
+  update: (msg: unknown) => unknown;
+  Byond: ByondType;
+}

tgui/jest.config.js

@@ -4,6 +4,9 @@ module.exports = {
     '<rootDir>/packages/**/__tests__/*.{js,ts,tsx}',
     '<rootDir>/packages/**/*.{spec,test}.{js,ts,tsx}',
   ],
+  testPathIgnorePatterns: [
+    '<rootDir>/packages/tgui-bench',
+  ],
   testEnvironment: 'jsdom',
   testRunner: require.resolve('jest-circus/runner'),
   transform: {