refactor(Types): update type handling in components to use more generic Element types; enhance type definitions for better flexibility and maintainability

Author: RSamaium

packages/core/src/components/DOMContainer.ts

@@ -296,7 +296,7 @@ export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
     this.element = div.componentInstance.element;
   }
 
-  async onMount(element: Element<DisplayObject>, index?: number) {
+  async onMount(element: Element<any>, index?: number) {
     await super.onMount(element, index);
     this.syncCanvasSizeEffect();
     this.applyElementSize();
@@ -308,11 +308,11 @@ export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
     this.applyElementSize();
   }
 
-  protected onLayoutComputed() {
+  onLayoutComputed() {
     this.applyElementSize();
   }
 
-  async onDestroy(parent: Element<DisplayObject>, afterDestroy?: () => void) {
+  async onDestroy(parent: Element<any>, afterDestroy?: () => void) {
     const _afterDestroy = () => {
       if (this.canvasSizeEffect) {
         this.canvasSizeEffect.subscription?.unsubscribe();

packages/core/src/components/DOMElement.ts

@@ -10,8 +10,8 @@ import { DisplayObjectProps } from "./types/DisplayObject";
 import { isObservable } from "../engine/utils";
 import { isSignal } from "@signe/reactive";
 
-interface DOMContainerProps extends DisplayObjectProps {
-  element:
+export interface DOMElementProps extends DisplayObjectProps {
+  element?:
   | string
   | {
     value: HTMLElement;
@@ -32,6 +32,14 @@ interface DOMContainerProps extends DisplayObjectProps {
   onBeforeDestroy?: OnHook;
 }
 
+export interface DOMContainerProps extends DOMElementProps {
+  element:
+  | string
+  | {
+    value: HTMLElement;
+  };
+}
+
 /**
  * DOMContainer class for managing DOM elements within the canvas engine
  *
@@ -233,7 +241,7 @@ export class CanvasDOMElement {
     }
     if (typeof value === "object") {
       for (const [className, shouldAdd] of Object.entries(value)) {
-        const resolved = isSignal(shouldAdd) ? shouldAdd() : shouldAdd;
+        const resolved = isSignal(shouldAdd as any) ? (shouldAdd as any)() : shouldAdd;
         if (resolved) {
           tokens.push(className);
         }
@@ -347,12 +355,15 @@ export class CanvasDOMElement {
     }
   }
 
-  onInit(props: DOMContainerProps) {
+  onInit(props: DOMElementProps) {
     if (typeof props.element === "string") {
       this.element = document.createElement(props.element);
       this.isFormElementType = this.isFormElement(props.element);
     } else {
-      this.element = props.element.value;
+      this.element = props.element?.value;
+      if (!this.element) {
+        throw new Error("DOMElement requires a valid element.");
+      }
       this.isFormElementType = this.isFormElement(this.element.tagName);
     }
     if (props.onBeforeDestroy || props["on-before-destroy"]) {
@@ -433,7 +444,7 @@ export class CanvasDOMElement {
     }
   }
 
-  onUpdate(props: DOMContainerProps) {
+  onUpdate(props: DOMElementProps) {
     if (!this.element) return;
     for (const [key, value] of Object.entries(props.attrs || {})) {
       if (key === "tabindex") {

packages/core/src/components/DOMSprite.ts

@@ -4,7 +4,7 @@ import { createComponent, Element, registerComponent } from "../engine/reactive"
 import { ComponentFunction } from "../engine/signal";
 import { arrayEquals, fps2ms, isBrowser, isFunction, preciseNow } from "../engine/utils";
 import { DisplayObjectProps } from "./types/DisplayObject";
-import { CanvasDOMElement } from "./DOMElement";
+import { CanvasDOMElement, DOMElementProps } from "./DOMElement";
 import { OnHook } from "./DisplayObject";
 import { Tick } from "../directives/Scheduler";
 import {
@@ -21,7 +21,7 @@ export interface DOMSpriteFrame {
   height: number;
 }
 
-export interface DOMSpriteProps extends DisplayObjectProps {
+export interface DOMSpriteProps extends DOMElementProps {
   image?: string;
   rectangle?: DOMSpriteFrame | { value?: DOMSpriteFrame };
   frames?: DOMSpriteFrame[];
@@ -149,9 +149,10 @@ export class CanvasDOMSprite extends CanvasDOMElement {
   private playingSubscription?: Subscription;
   private playingSignal?: Signal<boolean>;
 
-  onInit(props: DOMSpriteProps) {
-    this.elementType = props.element ?? "div";
-    const nextProps = this.mergeEventAttrs({ ...props, element: this.elementType });
+  onInit(props: DOMElementProps) {
+    const spriteProps = props as DOMSpriteProps;
+    this.elementType = spriteProps.element ?? "div";
+    const nextProps = this.mergeEventAttrs({ ...spriteProps, element: this.elementType });
     this.tickSignal = nextProps.context?.tick;
     this.applyProps(nextProps);
     super.onInit(nextProps as any);
@@ -167,8 +168,8 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     this.updateAnimationLoop();
   }
 
-  onUpdate(props: DOMSpriteProps) {
-    const nextProps = this.mergeEventAttrs(props);
+  onUpdate(props: DOMElementProps) {
+    const nextProps = this.mergeEventAttrs(props as DOMSpriteProps);
     super.onUpdate(nextProps as any);
     this.applyProps(nextProps);
     this.render();
@@ -195,7 +196,9 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     rectangle?: DOMSpriteFrame | { value?: DOMSpriteFrame } | Signal<DOMSpriteFrame | undefined>
   ): DOMSpriteFrame | undefined {
     if (!rectangle) return undefined;
-    const signalResolved = isSignal(rectangle) ? rectangle() : rectangle;
+    const signalResolved = isSignal(rectangle as any)
+      ? (rectangle as Signal<DOMSpriteFrame | undefined>)()
+      : rectangle;
     if (!signalResolved) return undefined;
     const resolved = (signalResolved as any).value ?? signalResolved;
     if (!resolved) return undefined;
@@ -211,7 +214,7 @@ export class CanvasDOMSprite extends CanvasDOMElement {
   ): DOMSpriteSheetDefinition | Promise<DOMSpriteSheetDefinition | undefined> | undefined {
     if (!definition) return undefined;
     const signalResolved = isSignal(definition as any)
-      ? (definition as any)()
+      ? (definition as Signal<DOMSpriteSheetDefinition | undefined>)()
       : definition;
     if (!signalResolved) return undefined;
     return (signalResolved as any).value ?? signalResolved;
@@ -251,10 +254,12 @@ export class CanvasDOMSprite extends CanvasDOMElement {
         (prev, val) => ({ ...prev, [val]: (definition as any)[val] }),
         {}
       );
-      const optionsTextures = {
+      const optionsTextures: DOMSpriteTextureOptionsMerging = {
         ...baseOptions,
         ...textures[animationName],
-      } as DOMSpriteTextureOptionsMerging;
+        spriteWidth: 0,
+        spriteHeight: 0,
+      };
       optionsTextures.image =
         (textures[animationName] as any).image ?? definition.image;
 
@@ -536,7 +541,8 @@ export class CanvasDOMSprite extends CanvasDOMElement {
   }
 
   private bindSheetParams(context: Element<CanvasDOMElement>) {
-    const params = context.propObservables?.sheet?.params as any;
+    const sheetProps = context.propObservables?.sheet as any;
+    const params = sheetProps?.params as any;
     if (!params || typeof params !== "object") return;
     for (const key in params) {
       const value = params[key];
@@ -645,7 +651,7 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     this.lastTickTimestamp = undefined;
 
     if (this.tickSignal?.observable) {
-      this.tickSubscription = this.tickSignal.observable.subscribe((result: any) => {
+      this.tickSubscription = (this.tickSignal.observable as any).subscribe((result: any) => {
         const tick = result?.value ?? result;
         if (!tick) return;
         if (this.sheetCurrentAnimation) {

packages/core/src/components/DisplayObject.ts

@@ -9,7 +9,7 @@ import type {
   TransformOrigin,
 } from "./types/DisplayObject";
 import { signal } from "@signe/reactive";
-import { BlurFilter, ObservablePoint } from "pixi.js";
+import { BlurFilter, ObservablePoint, type Point, type Rectangle } from "pixi.js";
 import * as FILTERS from "pixi-filters";
 import { isPercent } from "../utils/functions";
 import { BehaviorSubject, filter, Subject } from "rxjs";
@@ -20,9 +20,11 @@ export interface ComponentInstance extends PixiMixins.ContainerOptions {
   onInit?(props: Props): void;
   onUpdate?(props: Props): void;
   onDestroy?(parent: Element, afterDestroy: () => void): void;
-  onMount?(context: Element, index?: number): void;
+  onMount?(context: Element<any>, index?: number): void;
   setWidth(width: number): void;
   setHeight(height: number): void;
+  getLocalBounds?(): Rectangle;
+  getGlobalPosition?(): Point;
 }
 
 export const EVENTS = [
@@ -121,17 +123,17 @@ export function DisplayObject(extendClass) {
     // Store computed layout box dimensions
     #computedLayoutBox: { width?: number; height?: number } | null = null;
     // Store reference to element for freeze checking
-    #element: Element<DisplayObject> | null = null;
+    #element: Element<any> | null = null;
 
     /**
      * Get the element reference for freeze checking
      * @returns The element reference or null
      */
-    protected getElement(): Element<DisplayObject> | null {
+    getElement(): Element<any> | null {
       return this.#element;
     }
 
-    protected onLayoutComputed(_event: any) {}
+    onLayoutComputed(_event: any) {}
 
     get deltaRatio() {
       return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
@@ -196,7 +198,7 @@ export function DisplayObject(extendClass) {
       this.subjectInit.next(this);
     }
 
-    async onMount(element: Element<DisplayObject>, index?: number) {
+    async onMount(element: Element<any>, index?: number) {
       if (this.destroyed) return
       this.#element = element;
       this.#canvasContext = element.props.context;

packages/core/src/components/FocusContainer.ts

@@ -3,7 +3,7 @@ import { applyDirective } from "../engine/directive";
 import { ComponentFunction } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { focusManager, ScrollOptions } from "../engine/FocusManager";
-import { signal, Signal, isSignal } from "@signe/reactive";
+import { signal, Signal, WritableSignal, WritableObjectSignal, isSignal } from "@signe/reactive";
 import { CanvasViewport } from "./Viewport";
 import { Controls } from "../directives/ControlsBase";
 // Import FocusNavigation directive to ensure it's registered
@@ -24,6 +24,9 @@ export interface FocusContainerProps extends DisplayObjectProps {
   onFocusChange?: (index: number, element: Element | null) => void;
   autoScroll?: boolean | ScrollOptions;
   viewport?: CanvasViewport;
+  context?: {
+    viewport?: CanvasViewport;
+  };
 }
 
 /**
@@ -65,8 +68,8 @@ export interface FocusContainerProps extends DisplayObjectProps {
  */
 export class CanvasFocusContainer {
   private containerId: string = '';
-  private currentIndexSignal: Signal<number | null> | null = null;
-  private focusedElementSignal: Signal<Element | null> | null = null;
+  private currentIndexSignal: WritableSignal<number | null> | null = null;
+  private focusedElementSignal: WritableSignal<Element | null> | WritableObjectSignal<Element | null> | null = null;
   private registeredFocusables: Set<number> = new Set();
 
   /**
@@ -80,7 +83,7 @@ export class CanvasFocusContainer {
 
     // Create signals for current index and focused element
     const currentIndex = signal<number | null>(null);
-    const focusedElement = signal<Element | null>(null);
+    const focusedElement = signal<Element | null>(null) as WritableSignal<Element | null> | WritableObjectSignal<Element | null>;
 
     this.currentIndexSignal = currentIndex;
     this.focusedElementSignal = focusedElement;
@@ -145,7 +148,7 @@ export class CanvasFocusContainer {
     //   element.effectSubscriptions.push(subscription);
     // }
 
-    focusManager.setTabindex(this.containerId, element.propObservables.tabindex);
+    focusManager.setTabindex(this.containerId, element.propObservables?.tabindex as any);
 
     // Register all focusable children initially
     // Use setTimeout to ensure children are mounted

packages/core/src/components/Sprite.ts

@@ -299,7 +299,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     }
   }
 
-  async onMount(params: Element<CanvasSprite>) {
+  async onMount(params: Element<any>) {
     // Set #element manually for freeze checking before calling super.onMount
     // We need to set it early so update() can check freeze state
     (this as any)['#element'] = params;

packages/core/src/components/Text.ts

@@ -48,7 +48,7 @@ class CanvasText extends DisplayObject(PixiText) {
    * @param {Element<CanvasText>} element - The element being mounted with parent and props.
    * @param {number} [index] - The index of the component among its siblings.
    */
-  async onMount(element: Element<CanvasText>, index?: number): Promise<void> {
+  async onMount(element: Element<any>, index?: number): Promise<void> {
     const { props } = element;
     await super.onMount(element, index);
     const tick: Signal = props.context.tick;

packages/core/src/components/Viewport.ts

@@ -3,7 +3,7 @@ import { Subscription } from 'rxjs';
 import { createComponent, registerComponent, Element, Props } from '../engine/reactive';
 import { DisplayObject, ComponentInstance } from './DisplayObject';
 import { effect, Signal } from '@signe/reactive';
-import { Graphics, Container } from 'pixi.js';
+import { Graphics, Container, ContainerChild, IRenderLayer } from 'pixi.js';
 
 const EVENTS = [
     'bounce-x-end',
@@ -73,8 +73,8 @@ export class CanvasViewport extends DisplayObject(Container) {
         return this.viewport.addChild(...children)
     }
 
-    addChildAt<U extends any>(child: U, index: number): U {
-        return this.viewport.addChildAt(child, index)
+    addChildAt<T extends ContainerChild | IRenderLayer>(child: T, index: number): T {
+        return this.viewport.addChildAt(child, index) as T
     }
 
     onInit(props) {
@@ -90,7 +90,7 @@ export class CanvasViewport extends DisplayObject(Container) {
      * @param {Element<CanvasViewport>} element - The element being mounted. Its `props` property (of type ViewportProps) contains component properties and context.
      * @param {number} [index] - The index of the component among its siblings.
      */
-    async onMount(element: Element<CanvasViewport>, index?: number): Promise<void> {
+    async onMount(element: Element<any>, index?: number): Promise<void> {
         element.props.context.viewport = this.viewport
         await super.onMount(element, index);
         const { props } = element;
@@ -211,4 +211,4 @@ registerComponent('Viewport', CanvasViewport)
 
 export function Viewport(props: ViewportProps) {
     return createComponent('Viewport', props);
-}
+}

packages/core/src/directives/Controls.ts

@@ -36,7 +36,7 @@ export class ControlsDirective extends Directive {
      * Initialize the controls directive
      * Sets up keyboard, gamepad, and joystick controls if available
      */
-    onInit(element: Element) {
+    onInit(element: Element<any>) {
         this.element = element;
         const value = element.props.controls?.value ?? element.props.controls;
         if (!value) return;
@@ -71,7 +71,7 @@ export class ControlsDirective extends Directive {
         // Subscribe to freeze prop if it's a signal
         const freezeProp = element.propObservables?.freeze ?? element.props?.freeze;
         if (isSignal(freezeProp)) {
-            this.freezeSubscription = (freezeProp as Signal<boolean>).observable.subscribe((isFrozen) => {
+            this.freezeSubscription = ((freezeProp as Signal<boolean>).observable as any).subscribe((isFrozen) => {
                 if (isFrozen) {
                     this.stopInputs();
                 } else {
@@ -84,13 +84,13 @@ export class ControlsDirective extends Directive {
     /**
      * Mount hook (no specific action needed)
      */
-    onMount(element: Element) { }
+    onMount(element: Element<any>) { }
 
     /**
      * Update controls configuration
      * Updates both keyboard and gamepad controls
      */
-    onUpdate(props: any, element: Element) {
+    onUpdate(props: any, element: Element<any>) {
         const value = props.controls?.value ?? props.controls;
         if (value) {
             if (this.keyboardControls) {
@@ -115,7 +115,7 @@ export class ControlsDirective extends Directive {
     /**
      * Cleanup and destroy all control systems
      */
-    onDestroy(element: Element) {
+    onDestroy(element: Element<any>) {
         if (this.freezeSubscription) {
             this.freezeSubscription.unsubscribe();
             this.freezeSubscription = null;

packages/core/src/directives/FocusNavigation.ts

@@ -69,7 +69,7 @@ export class FocusNavigationDirective extends Directive {
 
     // Handle controls prop updates if it's a signal
     if (isSignal(controlsProp)) {
-      this.controlsSubscription = (controlsProp as Signal<Controls>).observable.subscribe((controls) => {
+      this.controlsSubscription = ((controlsProp as Signal<Controls>).observable as any).subscribe((controls) => {
         if (controls) {
           this.controlsDirective?.onUpdate({ controls }, element);
         }