♻️ 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';