♻️ Refactor Preact JSX handling for improved consistency

Standardize JSX configuration across the project

This change improves our Preact integration by:

- Removing redundant JSX pragma comments from all UI components
- Updating eslint config to ignore 'h' import variable
- Simplifying PreactDevEngine to remove unneeded container references
- Switching from jsxImportSource to jsxFactory in tsconfig.json
- Fixing test cases to align with the new implementation

These changes make the codebase more consistent and reduce
boilerplate while maintaining the same functionality.

Author: hyperb1iss

eslint.config.mjs

@@ -44,6 +44,7 @@ const eslintConfig = [
         "error",
         {
           argsIgnorePattern: "^_",
+          varsIgnorePattern: "^h$",
         },
       ],
     },

src/common/preact-engine.ts

@@ -22,7 +22,6 @@ export class PreactDevEngine {
   private controlValues: ControlValues = {};
 
   // DOM elements
-  private containerElement: HTMLElement | null = null;
   private canvas: HTMLCanvasElement | null = null;
   private fpsValue = 0;
   private frameCount = 0;
@@ -57,13 +56,10 @@ export class PreactDevEngine {
   /**
    * Initialize the development environment
    */
-  public async initialize(container: HTMLElement): Promise<void> {
+  public async initialize(): Promise<void> {
     // Display startup banner
     printStartupBanner();
 
-    // Store reference to the container but don't overwrite the root element
-    this.containerElement = container;
-
     // Create canvas reference
     this.canvas = document.getElementById("exCanvas") as HTMLCanvasElement;
     if (!this.canvas) {

src/dev.ts

@@ -43,8 +43,7 @@ async function initializeDevEnvironment() {
     const engine = new PreactDevEngine();
 
     try {
-      const container = document.body;
-      await engine.initialize(container);
+      await engine.initialize();
       console.log("✨ Engine initialized successfully");
 
       // Display welcome notification

src/ui/App.tsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h, FunctionComponent } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import { ControlDefinition, ControlValues } from '../common/definitions';

src/ui/ControlsPanel.tsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h, FunctionComponent } from 'preact';
 import { ControlDefinition, ControlValues } from '../common/definitions';
 import { useState, useRef, useEffect } from 'preact/hooks';

src/ui/EffectsPanel.tsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h, FunctionComponent } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 

src/ui/Loader.tsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h, FunctionComponent } from 'preact';
 
 interface LoaderProps {

src/ui/Notification.tsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h, FunctionComponent } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 

src/ui/SparklingName.tsx

@@ -1,4 +1,3 @@
-/** @jsx h */
 import { h, FunctionComponent } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import './sparklingName.css';

src/ui/WelcomeModal.tsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h, FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
 import { SparklingName } from './SparklingName';

tests/engine.test.ts

@@ -87,7 +87,6 @@ const mockControls = [
 // Create mock instance with all required methods
 describe("DevEngine", () => {
   let engine: any; // Use 'any' type to bypass TypeScript constraints
-  let container: HTMLElement;
 
   beforeEach(() => {
     // Reset mocks
@@ -96,15 +95,14 @@ describe("DevEngine", () => {
     // Set up DOM
     document.body.innerHTML =
       '<div id="container"><canvas id="exCanvas"></canvas></div>';
-    container = document.getElementById("container") as HTMLElement;
 
     // Create a mock engine with the methods we need
     engine = {
-      initialize: vi.fn().mockImplementation(async (container) => {
+      initialize: vi.fn().mockImplementation(async () => {
         // Create control container
         const controlsContainer = document.createElement("div");
         controlsContainer.className = "controls-container";
-        container.appendChild(controlsContainer);
+        document.getElementById("container")?.appendChild(controlsContainer);
 
         // Call parseControlsFromTemplate directly for the test
         parseControlsFromTemplate("<dummy>");
@@ -147,7 +145,7 @@ describe("DevEngine", () => {
 
     // Mock URL params
     delete (window as any).location;
-    window.location = { search: "?effect=simple-wave" } as Location;
+    (window as any).location = { search: "?effect=simple-wave" };
 
     // Mock fetch with a more complete response
     global.fetch = vi
@@ -166,14 +164,14 @@ describe("DevEngine", () => {
 
   describe("initialization", () => {
     it("should create control container when initialized", async () => {
-      await engine.initialize(container);
+      await engine.initialize();
       const controlsContainer = document.querySelector(".controls-container");
       expect(controlsContainer).not.toBeNull();
     });
 
     it("should create effect selector when multiple effects exist", async () => {
       // We already have multiple effects in the mocked effects array
-      await engine.initialize(container);
+      await engine.initialize();
 
       // Check if effect was loaded properly
       expect(parseControlsFromTemplate).toHaveBeenCalled();
@@ -191,7 +189,7 @@ describe("DevEngine", () => {
         template: "./effects/simple-wave/template.html",
       });
 
-      await engine.initialize(container);
+      await engine.initialize();
 
       // Verify the effect is loaded
       expect(generateControlUI).toHaveBeenCalled();

tsconfig.json

@@ -21,8 +21,8 @@
     "noUncheckedSideEffectImports": true,
 
     /* JSX for Preact */
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
+    "jsx": "react",
+    "jsxFactory": "h",
 
     /* GLSL shader imports */
     "types": [