Made Theme readonly

Author: viktor-podzigun

src/theme/Color.mjs

@@ -1,4 +1,4 @@
-const Color = {
+const Color = Object.freeze({
   black: "black",
   red: "red",
   green: "green",
@@ -21,6 +21,6 @@ const Color = {
   // alternate spellings
   grey: "grey",
   lightgrey: "lightgrey",
-};
+});
 
 export default Color;

src/theme/DefaultTheme.mjs

@@ -3,66 +3,63 @@ import Color from "./Color.mjs";
 /**
  * @type {import("./Theme").ThemeType}
  */
-const DefaultTheme = {
-  popup: {
-    regular: {
+const DefaultTheme = Object.freeze({
+  popup: Object.freeze({
+    regular: Object.freeze({
       bold: false,
       bg: Color.white,
       fg: Color.black,
-      focus: {
-        // @ts-ignore
+      focus: Object.freeze({
         bold: false,
         bg: Color.cyan,
         fg: Color.black,
-      },
-    },
-    error: {
+      }),
+    }),
+    error: Object.freeze({
       bold: true,
       bg: Color.red,
       fg: Color.white,
-      focus: {
-        // @ts-ignore
+      focus: Object.freeze({
         bold: false,
         bg: Color.white,
         fg: Color.black,
-      },
-    },
-    menu: {
+      }),
+    }),
+    menu: Object.freeze({
       bold: true,
       bg: Color.cyan,
       fg: Color.white,
-      focus: {
-        // @ts-ignore
+      focus: Object.freeze({
         bold: true,
         bg: Color.black,
         fg: Color.white,
-      },
-    },
-  },
+      }),
+    }),
+  }),
 
-  menu: {
-    key: {
+  menu: Object.freeze({
+    key: Object.freeze({
       bg: Color.black,
       fg: Color.white,
-    },
-    item: {
+    }),
+    item: Object.freeze({
       bg: Color.cyan,
       fg: Color.black,
-    },
-  },
+    }),
+  }),
 
-  textBox: {
-    regular: {
+  textBox: Object.freeze({
+    regular: Object.freeze({
       bold: false,
       bg: Color.cyan,
       fg: Color.black,
-    },
-    selected: {
+    }),
+    selected: Object.freeze({
       bold: false,
       bg: Color.blue,
       fg: Color.white,
-    },
-  },
-};
+    }),
+  }),
+});
 
 export default DefaultTheme;

src/theme/Theme.d.ts

@@ -1,25 +1,31 @@
-import { Widgets } from "blessed";
+export interface ThemeStyle {
+  readonly bold?: boolean;
+  readonly bg: string;
+  readonly fg: string;
+}
 
-type BlessedStyle = Widgets.Types.TStyle;
+export interface ThemeEffects extends ThemeStyle {
+  readonly focus?: ThemeStyle;
+}
 
-interface ThemePopup {
-  regular: BlessedStyle;
-  error: BlessedStyle;
-  menu: BlessedStyle;
+export interface ThemePopup {
+  readonly regular: ThemeEffects;
+  readonly error: ThemeEffects;
+  readonly menu: ThemeEffects;
 }
 
-interface ThemeMenu {
-  key: BlessedStyle;
-  item: BlessedStyle;
+export interface ThemeMenu {
+  readonly key: ThemeStyle;
+  readonly item: ThemeStyle;
 }
 
-interface ThemeTextBox {
-  regular: BlessedStyle;
-  selected: BlessedStyle;
+export interface ThemeTextBox {
+  readonly regular: ThemeEffects;
+  readonly selected: ThemeEffects;
 }
 
 export interface ThemeType {
-  popup: ThemePopup;
-  menu: ThemeMenu;
-  textBox: ThemeTextBox;
+  readonly popup: ThemePopup;
+  readonly menu: ThemeMenu;
+  readonly textBox: ThemeTextBox;
 }

src/theme/XTerm256Theme.mjs

@@ -3,68 +3,65 @@ import Color from "./Color.mjs";
 /**
  * @type {import("./Theme").ThemeType}
  */
-const XTerm256Theme = {
-  popup: {
-    regular: {
+const XTerm256Theme = Object.freeze({
+  popup: Object.freeze({
+    regular: Object.freeze({
       bold: true,
       bg: Color.white,
       fg: "#111",
-      focus: {
-        // @ts-ignore
+      focus: Object.freeze({
         bold: true,
         bg: "#088",
         fg: "#111",
-      },
-    },
-    error: {
+      }),
+    }),
+    error: Object.freeze({
       bold: true,
       bg: Color.red,
       fg: Color.white,
-      focus: {
-        // @ts-ignore
+      focus: Object.freeze({
         bold: true,
         bg: Color.white,
         fg: "#111",
-      },
-    },
-    menu: {
+      }),
+    }),
+    menu: Object.freeze({
       bold: true,
       bg: "#088",
       fg: Color.white,
-      focus: {
-        // @ts-ignore
+      focus: Object.freeze({
         bold: true,
         bg: Color.black,
         fg: Color.white,
-      },
-    },
-  },
+      }),
+    }),
+  }),
 
-  menu: {
-    key: {
+  menu: Object.freeze({
+    key: Object.freeze({
       bold: true,
       bg: Color.black,
       fg: "#aaa",
-    },
-    item: {
+    }),
+    item: Object.freeze({
       bold: true,
       bg: "#088",
       fg: "#111",
-    },
-  },
+    }),
+  }),
 
-  textBox: {
-    regular: {
+  textBox: Object.freeze({
+    regular: Object.freeze({
       bold: true,
       bg: "#088",
       fg: "#111",
-    },
-    selected: {
+    }),
+    selected: Object.freeze({
       bold: true,
       bg: Color.blue,
       fg: Color.white,
-    },
-  },
-};
+    }),
+  }),
+});
 
 export default XTerm256Theme;

src/tool/DevTool.mjs

@@ -1,42 +1,42 @@
 /**
- * @typedef {"Hidden" | "Logs" | "Inputs" | "Colors"} DevToolValue
+ * @typedef {"Hidden" | "Logs" | "Inputs" | "Colors"} DevToolType
  */
 
 /**
- * @type {DevToolValue}
+ * @type {DevToolType}
  */
 const Hidden = "Hidden";
 /**
- * @type {DevToolValue}
+ * @type {DevToolType}
  */
 const Logs = "Logs";
 /**
- * @type {DevToolValue}
+ * @type {DevToolType}
  */
 const Inputs = "Inputs";
 /**
- * @type {DevToolValue}
+ * @type {DevToolType}
  */
 const Colors = "Colors";
 
-const DevTool = {
+const DevTool = Object.freeze({
   Hidden,
   Logs,
   Inputs,
   Colors,
 
   /**
-   * @param {DevToolValue} from
-   * @param {DevToolValue} to
+   * @param {DevToolType} from
+   * @param {DevToolType} to
    * @returns {boolean}
    */
   shouldResize: (from, to) => {
     return from === Hidden || to === Hidden;
   },
 
   /**
-   * @param {DevToolValue} from
-   * @returns {DevToolValue}
+   * @param {DevToolType} from
+   * @returns {DevToolType}
    */
   getNext: (from) => {
     switch (from) {
@@ -50,6 +50,6 @@ const DevTool = {
         return Hidden;
     }
   },
-};
+});
 
 export default DevTool;

src/tool/DevToolPanel.d.ts

@@ -1,7 +1,7 @@
-import { DevToolValue } from "./DevTool.mjs";
+import { DevToolType } from "./DevTool.mjs";
 
 export interface DevToolPanelProps {
-  devTool: DevToolValue;
+  devTool: DevToolType;
   logContent: string;
-  onActivate(devTool: DevToolValue): void;
+  onActivate(devTool: DevToolType): void;
 }

src/tool/DevToolPanel.mjs

@@ -1,6 +1,6 @@
 /**
  * @typedef {import("./DevToolPanel").DevToolPanelProps} DevToolPanelProps
- * @typedef {import("./DevTool.mjs").DevToolValue} DevToolValue
+ * @typedef {import("./DevTool.mjs").DevToolType} DevToolType
  */
 import React from "react";
 import LogPanel from "./LogPanel.mjs";
@@ -13,7 +13,7 @@ import * as UI from "../UI.mjs";
 const h = React.createElement;
 
 /**
- * @type {Array<{tool: DevToolValue, name: string}>}
+ * @type {Array<{tool: DevToolType, name: string}>}
  */
 const tools = [
   {