Constant Element References

Moved over all ID element references from the window global-based kind, to constant query selector ones. This is to help narrow down the types gap that each module appears to need access too. This will help me with further breaking up the codebase into distinct modules, components, and imports/exports. It's hard for both me and TypeScript to decypher what each module relies on when it is getting references to things outside of it's scope not using static import statements.

Discovered a Vite build caching issue, where while running `npm run dev`, the main `app.ts` script would run twice, causing all kinds of errors on the initial page load.

Not totally sure if it's what fixed it (The issue did go away after I tried it though), but looks like you can rebuild the dependency build cache using the `--force` flag, neat! I'm guessing the Vite server was trying to load two versions, one from the cache, and one that was live-loaded for some reason? It was weird though, I would add an addition single `console.log()` at the top of the script, and that would definitely run twice. So it's not like it was an old version in the cache that was loading twice, it was the same new fresh build that was loading twice. It would successfully run the updates that I added to the code, just twice XD

Should I say twice, twice as many times?

vitejs/vite#10986 (comment)

public/service-worker.js

@@ -3,7 +3,7 @@
 
 var self = /** @type { ServiceWorkerGlobalScope } */ (/** @type { unknown } */ (globalThis));
 
-const CACHE_VERSION = "Smart Text Editor v4.20.0";
+const CACHE_VERSION = "Smart Text Editor v4.22.0";
 
 const IS_MACOS_DEVICE = (/(macOS|Mac)/i.test(navigator.userAgentData?.platform ?? navigator.platform) && navigator.standalone === undefined);
 

src/Card.ts

@@ -1,6 +1,7 @@
 import STE from "./STE.js";
 import { getElementStyle } from "./app.js";
 import { setEditorTabsVisibility } from "./Editor.js";
+import { card_backdrop, workspace_tabs, workspace_editors } from "./dom.js";
 
 /**
  * The base component for the Alert, Dialog, and Widget card types.

src/Editor.ts

@@ -1,6 +1,7 @@
 import STE from "./STE.js";
 import { getElementStyle, applyEditingBehavior, setTitle } from "./app.js";
 import { setPreviewSource, refreshPreview } from "./Workspace.js";
+import { workspace_tabs, create_editor_button, workspace_editors, preview_menu, preview } from "./dom.js";
 
 export interface EditorOptions {
   name?: string;

src/STE.ts

@@ -1,3 +1,5 @@
+import { workspace_tabs, workspace_editors, default_orientation_setting, syntax_highlighting_setting, automatic_refresh_setting, preview_base_input, reset_settings_card } from "./dom.js";
+
 import type Card from "./Card.js";
 import type { View } from "./Workspace.js";
 import type { Orientation } from "./Workspace.js";

src/Tools.ts

@@ -1,6 +1,7 @@
 import STE from "./STE.js";
 import Editor from "./Editor.js";
 import { setView } from "./Workspace.js";
+import { replacer_find, replacer_replace, formatter_input, encoder_type, encoder_input } from "./dom.js";
 
 export type TemplateType = "html" | "pack-manifest-bedrock";
 

src/Workspace.ts

@@ -1,6 +1,7 @@
 import STE from "./STE.js";
 import { getElementStyle } from "./app.js";
 import Editor, { setEditorTabsVisibility } from "./Editor.js";
+import { workspace, view_menu, scaler, preview, preview_menu, workspace_tabs, header } from "./dom.js";
 import { read, stringify } from "nbtify";
 
 declare global {

src/app.ts

@@ -3,6 +3,7 @@ import "./Card.js";
 import Tools from "./Tools.js";
 import Editor, { setEditorTabsVisibility } from "./Editor.js";
 import { setView, setOrientation, createWindow, openFiles, saveFile, createDisplay, refreshPreview, setScaling, disableScaling } from "./Workspace.js";
+import { app_omnibox, cleared_cache_card, theme_button, preview_base_card, replace_text_card, json_formatter_card, uri_encoder_card, uuid_generator_card, settings_card, app_menubar, workspace_tabs, create_editor_button, scaler, card_backdrop, preview_base_input, generator_output, default_orientation_setting, syntax_highlighting_setting, automatic_refresh_setting, scrollbar_styles } from "./dom.js";
 
 import type { Orientation } from "./Workspace.js";
 

src/dom.ts

@@ -0,0 +1,83 @@
+import type { Card } from "./Card.js";
+
+export const theme_color = document.querySelector<HTMLMetaElement>("#theme_color")!;
+export const scrollbar_styles = document.querySelector<HTMLStyleElement>("#scrollbar_styles")!;
+export const theme_styles = document.querySelector<HTMLStyleElement>("#theme_styles")!;
+
+export const symbol_definitions = document.querySelector<SVGSVGElement>("#symbol_definitions")!;
+export const arrow_icon = document.querySelector<SVGSymbolElement>("#arrow_icon")!;
+export const check_icon = document.querySelector<SVGSymbolElement>("#check_icon")!;
+export const back_icon = document.querySelector<SVGSymbolElement>("#back_icon")!;
+export const minimize_icon = document.querySelector<SVGSymbolElement>("#minimize_icon")!;
+export const close_icon = document.querySelector<SVGSymbolElement>("#close_icon")!;
+export const rename_icon = document.querySelector<SVGSymbolElement>("#rename_icon")!;
+export const undo_icon = document.querySelector<SVGSymbolElement>("#undo_icon")!;
+export const redo_icon = document.querySelector<SVGSymbolElement>("#redo_icon")!;
+export const install_icon = document.querySelector<SVGSymbolElement>("#install_icon")!;
+export const refresh_icon = document.querySelector<SVGSymbolElement>("#refresh_icon")!;
+export const github_icon = document.querySelector<SVGSymbolElement>("#github_icon")!;
+
+export const header = document.querySelector<HTMLElement>("#header")!;
+
+export const app_menubar = document.querySelector<HTMLDivElement>("#app_menubar")!;
+export const file_menu = document.querySelector<MenuDropElement>("#file_menu")!;
+export const view_menu = document.querySelector<MenuDropElement>("#view_menu")!;
+export const preview_menu = document.querySelector<MenuDropElement>("#preview_menu")!;
+export const tools_menu = document.querySelector<MenuDropElement>("#tools_menu")!;
+export const settings_menu = document.querySelector<MenuDropElement>("#settings_menu")!;
+
+export const app_omnibox = document.querySelector<HTMLDivElement>("#app_omnibox")!;
+export const install_option = document.querySelector<HTMLButtonElement>("#install_option")!;
+
+export const main = document.querySelector<HTMLElement>("#main")!;
+
+export const workspace = document.querySelector<HTMLDivElement>("#workspace")!;
+export const workspace_tabs = document.querySelector<HTMLDivElement>("#workspace_tabs")!;
+export const create_editor_button = document.querySelector<HTMLButtonElement>("#create_editor_button")!;
+export const workspace_editors = document.querySelector<HTMLDivElement>("#workspace_editors")!;
+export const scaler = document.querySelector<HTMLDivElement>("#scaler")!;
+export const preview = document.querySelector<HTMLIFrameElement>("#preview")!;
+
+export const card_backdrop = document.querySelector<HTMLDivElement>("#card_backdrop")!;
+
+export const settings_card = document.querySelector<Card>("#settings_card")!;
+export const default_orientation_setting = document.querySelector<MenuDropElement>("#default_orientation_setting")!;
+export const syntax_highlighting_setting = document.querySelector<HTMLInputElement>("#syntax_highlighting_setting")!;
+export const automatic_refresh_setting = document.querySelector<HTMLInputElement>("#automatic_refresh_setting")!;
+export const install_button = document.querySelector<HTMLButtonElement>("#install_button")!;
+export const theme_button = document.querySelector<HTMLButtonElement>("#theme_button")!;
+export const clear_site_caches_button = document.querySelector<HTMLButtonElement>("#clear_site_caches_button")!;
+
+export const theme_card = document.querySelector<Card>("#theme_card")!;
+export const theme_setting = document.querySelector<NumTextElement>("#theme_setting")!;
+
+export const preview_base_card = document.querySelector<Card>("#preview_base_card")!;
+export const preview_base_input = document.querySelector<HTMLInputElement & {
+  setWidth(): void;
+  setValue(value: string): void;
+  reset(): void;
+}>("#preview_base_input")!;
+
+export const reset_settings_card = document.querySelector<Card>("#reset_settings_card")!;
+export const cleared_cache_card = document.querySelector<Card>("#cleared_cache_card")!;
+
+export const replace_text_card = document.querySelector<Card>("#replace_text_card")!;
+export const replacer_find = document.querySelector<NumTextElement>("#replacer_find")!;
+export const replacer_replace = document.querySelector<NumTextElement>("#replacer_replace")!;
+
+export const color_picker_card = document.querySelector<Card>("#color_picker_card")!;
+export const picker_preview = document.querySelector<HTMLDivElement>("#picker_preview")!;
+export const picker_input = document.querySelector<HTMLInputElement>("#picker_input")!;
+export const red_channel = document.querySelector<HTMLInputElement>("#red_channel")!;
+export const green_channel = document.querySelector<HTMLInputElement>("#green_channel")!;
+export const blue_channel = document.querySelector<HTMLInputElement>("#blue_channel")!;
+
+export const json_formatter_card = document.querySelector<Card>("#json_formatter_card")!;
+export const formatter_input = document.querySelector<NumTextElement>("#formatter_input")!;
+
+export const uri_encoder_card = document.querySelector<Card>("#uri_encoder_card")!;
+export const encoder_input = document.querySelector<NumTextElement>("#encoder_input")!;
+export const encoder_type = document.querySelector<HTMLInputElement>("#encoder_type")!;
+
+export const uuid_generator_card = document.querySelector<Card>("#uuid_generator_card")!;
+export const generator_output = document.querySelector<HTMLInputElement>("#generator_output")!;

src/global.d.ts

@@ -11,72 +11,6 @@ declare global {
   }
 
   var Prism: typeof import("prismjs");
-
-  var theme_color: HTMLMetaElement;
-  var scrollbar_styles: HTMLStyleElement;
-  var theme_styles: HTMLStyleElement;
-  var symbol_definitions: SVGSVGElement;
-  var arrow_icon: SVGSymbolElement;
-  var check_icon: SVGSymbolElement;
-  var back_icon: SVGSymbolElement;
-  var minimize_icon: SVGSymbolElement;
-  var close_icon: SVGSymbolElement;
-  var rename_icon: SVGSymbolElement;
-  var undo_icon: SVGSymbolElement;
-  var redo_icon: SVGSymbolElement;
-  var install_icon: SVGSymbolElement;
-  var refresh_icon: SVGSymbolElement;
-  var github_icon: SVGSymbolElement;
-  var header: HTMLElement;
-  var app_menubar: HTMLDivElement;
-  var file_menu: MenuDropElement;
-  var view_menu: MenuDropElement;
-  var preview_menu: MenuDropElement;
-  var tools_menu: MenuDropElement;
-  var settings_menu: MenuDropElement;
-  var app_omnibox: HTMLDivElement;
-  var install_option: HTMLButtonElement;
-  var main: HTMLElement;
-  var workspace: HTMLDivElement;
-  var workspace_tabs: HTMLDivElement;
-  var create_editor_button: HTMLButtonElement;
-  var workspace_editors: HTMLDivElement;
-  var scaler: HTMLDivElement;
-  var preview: HTMLIFrameElement;
-  var card_backdrop: HTMLDivElement;
-  var settings_card: Card;
-  var default_orientation_setting: MenuDropElement;
-  var syntax_highlighting_setting: HTMLInputElement;
-  var automatic_refresh_setting: HTMLInputElement;
-  var install_button: HTMLButtonElement;
-  var theme_button: HTMLButtonElement;
-  var clear_site_caches_button: HTMLButtonElement;
-  var theme_card: Card;
-  var theme_setting: NumTextElement;
-  var preview_base_card: Card;
-  var preview_base_input: HTMLInputElement & {
-    setWidth(): void;
-    setValue(value: string): void;
-    reset(): void;
-  };
-  var reset_settings_card: Card;
-  var cleared_cache_card: Card;
-  var replace_text_card: Card;
-  var replacer_find: NumTextElement;
-  var replacer_replace: NumTextElement;
-  var color_picker_card: Card;
-  var picker_preview: HTMLDivElement;
-  var picker_input: HTMLInputElement;
-  var red_channel: HTMLInputElement;
-  var green_channel: HTMLInputElement;
-  var blue_channel: HTMLInputElement;
-  var json_formatter_card: Card;
-  var formatter_input: NumTextElement;
-  var uri_encoder_card: Card;
-  var encoder_input: NumTextElement;
-  var encoder_type: HTMLInputElement;
-  var uuid_generator_card: Card;
-  var generator_output: HTMLInputElement;
 }
 
 export {};