fix #65 fix #66 fix #68 fix #61

examples/example/src/app.component.ts

@@ -13,7 +13,7 @@ import { playerComponent } from "player.component";
 type Mutable = {} & DisplayObjectMutable<Container>;
 
 export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
-  global.$setVisualHitboxes(false);
+  global.$setVisualHitBoxes(true);
 
   const $container = await container({ label: "app" });
 
@@ -58,6 +58,10 @@ export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
   const $player = await playerComponent();
   await $player.setPosition({ x: 500, y: 1000 });
 
+  setInterval(() => {
+    $player.doSomething();
+  }, 50);
+
   $world.add($player, $plane);
   $container.add($world);
 

examples/example/src/player.component.ts

@@ -13,7 +13,9 @@ import {
 
 type Props = {};
 
-type Mutable = {} & DisplayObjectMutable<Container>;
+type Mutable = {
+  doSomething: () => void;
+} & DisplayObjectMutable<Container>;
 
 export const playerComponent: AsyncComponent<Props, Mutable> = async () => {
   let $sprite;
@@ -66,5 +68,9 @@ export const playerComponent: AsyncComponent<Props, Mutable> = async () => {
   });
   await $player.setBody($body);
 
-  return $player.getComponent(playerComponent);
+  return $player.getComponent(playerComponent, {
+    doSomething: () => {
+      console.log("ABC12334");
+    },
+  });
 };

examples/example/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "moduleResolution": "node",
-    "module": "es2023",
+    "module": "es2022",
     "target": "es2022",
     "esModuleInterop": true,
     "sourceMap": false,

examples/example/vite.config.ts

@@ -5,6 +5,7 @@ import { plugin } from "@tulib/vite-tulip-plugin";
 export default defineConfig({
   server: {
     port: 4194,
+    open: true,
   },
   plugins: [tsconfigPaths(), plugin()],
   publicDir: "assets",

src/components/core/animated-sprite.component.ts

@@ -76,9 +76,12 @@ export const animatedSprite: AsyncComponent<
     $animatedSprite,
     emptyMutable,
   );
-  //
+
+  const $$getRaw = displayObjectMutable.$getRaw;
+  const $$destroy = displayObjectMutable.$destroy;
+
   const $getRaw = (): AnimatedSpriteProps => ({
-    ...displayObjectMutable.$getRaw(),
+    ...$$getRaw(),
     spriteSheet: $spriteSheet,
     animation: $currentAnimation,
     frame: $frame,
@@ -88,24 +91,20 @@ export const animatedSprite: AsyncComponent<
   const $destroy = () => {
     //remove child first
     $animatedSprite?.parent?.removeChild($animatedSprite);
-    displayObjectMutable.$destroy();
+    $$destroy();
     //destroy pixi graphics
     $animatedSprite.destroy();
-    $mutable.getFather = null;
+
+    displayObjectMutable.getFather = () => null;
   };
   {
     if ($frame !== undefined) setFrame($frame);
     if ($playStatus !== undefined) setPlayStatus($playStatus);
   }
 
-  const getComponent = (component) => {
-    emptyMutable.getComponent(component);
-    return $mutable;
-  };
-
-  const $mutable: InternalMutable<AnimatedSpriteMutable, false> = {
-    ...displayObjectMutable,
-
+  return displayObjectMutable.getComponent<
+    InternalMutable<AnimatedSpriteMutable, false>
+  >(animatedSprite as any, {
     getDisplayObject: () => $animatedSprite,
 
     setSpriteSheet,
@@ -120,16 +119,11 @@ export const animatedSprite: AsyncComponent<
     setPlayStatus,
     getPlayStatus,
 
-    //@ts-ignore
-    getComponent,
-
     getProps: () => $props as any,
 
     $destroy,
     $getRaw,
 
     $mutable: false,
-  };
-
-  return $mutable;
+  });
 };

src/components/core/container.component.ts

@@ -19,42 +19,45 @@ export const container: AsyncComponent<
 > = async (originalProps = {}) => {
   const $props = structuredClone(originalProps);
 
-  const container = new PIXI.Container() as Container;
+  const $container = new PIXI.Container() as Container;
   const emptyMutable = empty(originalProps);
 
   let childList: DisplayObjectMutable<any>[] = [];
 
   const displayObjectMutable = await initDisplayObjectMutable<Container>(
-    container,
+    $container,
     emptyMutable,
   );
 
+  const $$destroy = displayObjectMutable.$destroy;
+  const $$setBody = displayObjectMutable.setBody;
+
   const $destroy = () => {
     //remove child first
-    container?.parent?.removeChild(container);
-    displayObjectMutable.$destroy();
+    $container?.parent?.removeChild($container);
+    $$destroy();
     //destroy pixi container
-    container.destroy();
-    $mutable.getFather = null;
+    $container.destroy();
+    displayObjectMutable.getFather = () => null;
 
     for (const childComponent of childList) childComponent.$destroy();
   };
 
   const add = (...displayObjectsMutable: DisplayObjectMutable<any>[]) => {
-    for (const displayObjectMutable of displayObjectsMutable) {
-      displayObjectMutable.getFather = () => $mutable;
+    for (const currentDisplayObjectMutable of displayObjectsMutable) {
+      currentDisplayObjectMutable.getFather = () => displayObjectMutable;
 
-      container.addChild(displayObjectMutable.getDisplayObject());
-      childList.push(displayObjectMutable);
-      global.$addComponent(displayObjectMutable);
+      $container.addChild(currentDisplayObjectMutable.getDisplayObject());
+      childList.push(currentDisplayObjectMutable);
+      global.$addComponent(currentDisplayObjectMutable);
     }
   };
 
   const remove = (...displayObjectsMutables: DisplayObjectMutable<any>[]) => {
     displayObjectsMutables.forEach((displayObjectMutable) => {
-      displayObjectMutable.getFather = null;
+      displayObjectMutable.getFather = () => null;
 
-      container.removeChild(displayObjectMutable.getDisplayObject());
+      $container.removeChild(displayObjectMutable.getDisplayObject());
       childList = childList.filter((child) => child !== displayObjectMutable);
       global.$removeComponent(displayObjectMutable);
     });
@@ -63,38 +66,32 @@ export const container: AsyncComponent<
   const getChildren = () => childList;
 
   const setBody = async (body: BodyMutable) => {
-    await displayObjectMutable.setBody(body);
+    await $$setBody(body);
 
     if (global.$isVisualHitBoxes()) {
       const shapes = body.$getShapes();
-      await Promise.all(
-        shapes.map(async ({ props }) => add(await getVisualShape(props))),
+      add(
+        ...(await Promise.all(
+          shapes.map(async ({ props }) => await getVisualShape(props)),
+        )),
       );
     }
   };
 
-  const getComponent = (component) => {
-    emptyMutable.getComponent(component);
-    return $mutable;
-  };
-
-  const $mutable: InternalMutable<ContainerMutable, false> = {
-    ...displayObjectMutable,
+  return displayObjectMutable.getComponent<
+    InternalMutable<ContainerMutable, false>
+  >(container as any, {
     //
     add,
     remove,
     getChildren,
 
-    //@ts-ignore
-    getComponent,
-
     setBody,
 
     getProps: () => $props as any,
 
     $destroy,
 
     $mutable: false,
-  };
-  return $mutable;
+  });
 };

src/components/core/empty.component.ts

@@ -102,8 +102,12 @@ export const empty = <Data>(
     initialData: $data,
   });
 
-  const getComponent = (component) => {
+  const getComponent = (component: Function, mutable: Object = {}) => {
     $componentName = component.name;
+
+    for (const functionName of Object.keys(mutable))
+      $mutable[functionName] = mutable[functionName];
+
     return $mutable;
   };
   const $getComponentName = () => $componentName || null;

src/components/core/graphics.component.test.ts

@@ -177,7 +177,7 @@ describe("components", () => {
       test("$destroy(...)", () => {
         expect($polygon.getFather()).toStrictEqual($container);
         $polygon.$destroy();
-        expect($polygon.getFather).toStrictEqual(null);
+        expect($polygon.getFather()).toStrictEqual(null);
       });
     });
   });