building pipeline

tgui/packages/common/package.json

@@ -1,5 +1,5 @@
 {
   "private": true,
   "name": "common",
-  "version": "4.2.0"
+  "version": "4.3.0"
 }

tgui/packages/common/react.spec.ts

@@ -0,0 +1,20 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from './react';
+
+describe('classes', () => {
+  test('empty', () => {
+    expect(classes([])).toBe('');
+  });
+
+  test('result contains inputs', () => {
+    const output = classes(['foo', 'bar', false, true, 0, 1, 'baz']);
+    expect(output).toContain('foo');
+    expect(output).toContain('bar');
+    expect(output).toContain('baz');
+  });
+});

tgui/packages/common/react.ts

@@ -6,11 +6,8 @@
 
 /**
  * Helper for conditionally adding/removing classes in React
- *
- * @param {any[]} classNames
- * @return {string}
  */
-export const classes = classNames => {
+export const classes = (classNames: (string | BooleanLike)[]) => {
   let className = '';
   for (let i = 0; i < classNames.length; i++) {
     const part = classNames[i];
@@ -25,9 +22,9 @@ export const classes = classNames => {
  * Normalizes children prop, so that it is always an array of VDom
  * elements.
  */
-export const normalizeChildren = children => {
+export const normalizeChildren = <T>(children: T | T[]) => {
   if (Array.isArray(children)) {
-    return children.flat().filter(value => value);
+    return children.flat().filter(value => value) as T[];
   }
   if (typeof children === 'object') {
     return [children];
@@ -39,7 +36,7 @@ export const normalizeChildren = children => {
  * Shallowly checks if two objects are different.
  * Credit: https://github.com/developit/preact-compat
  */
-export const shallowDiffers = (a, b) => {
+export const shallowDiffers = (a: object, b: object) => {
   let i;
   for (i in a) {
     if (!(i in b)) {
@@ -66,8 +63,14 @@ export const pureComponentHooks = {
 /**
  * A helper to determine whether the object is renderable by React.
  */
-export const canRender = value => {
+export const canRender = (value: unknown) => {
   return value !== undefined
     && value !== null
     && typeof value !== 'boolean';
 };
+
+/**
+ * A common case in tgui, when you pass a value conditionally, these are
+ * the types that can fall through the condition.
+ */
+export type BooleanLike = number | boolean | null | undefined;

tgui/packages/common/redux.js

@@ -108,15 +108,15 @@ export const combineReducers = reducersObj => {
  * returns the action type, allowing it to be used in reducer logic that
  * is looking for that action type.
  *
- * @param type The action type to use for created actions.
- * @param prepare (optional) a method that takes any number of arguments
+ * @param {string} type The action type to use for created actions.
+ * @param {any} prepare (optional) a method that takes any number of arguments
  * and returns { payload } or { payload, meta }. If this is given, the
  * resulting action creator will pass it's arguments to this method to
  * calculate payload & meta.
  *
  * @public
  */
-export const createAction = (type, prepare) => {
+export const createAction = (type, prepare = null) => {
   const actionCreator = (...args) => {
     if (!prepare) {
       return { type, payload: args[0] };