fix: issues caused by the new build method (#122)

* fix(ecs): change tsup config to handle wasm

* fix(graphics): change unhandled Graphics import

Author: Exeloo

example/pong/src/components.ts

@@ -1,4 +1,4 @@
-import type { Graphics } from "@nanoforge-dev/graphics-2d";
+import { type Circle, type Rect } from "@nanoforge-dev/graphics-2d";
 import type { InputEnum } from "@nanoforge-dev/input";
 
 import { layer } from "./index";
@@ -38,19 +38,19 @@ export class Hitbox {
 
 export class CircleComponent {
   name = "CircleComponent";
-  component: Graphics.Circle;
+  component: Circle;
 
-  constructor(component: Graphics.Circle) {
+  constructor(component: Circle) {
     this.component = component;
     layer.add(this.component);
   }
 }
 
 export class RectangleComponent {
   name = "RectangleComponent";
-  component: Graphics.Rect;
+  component: Rect;
 
-  constructor(component: Graphics.Rect) {
+  constructor(component: Rect) {
     this.component = component;
     layer.add(this.component);
   }

example/pong/src/index.ts

@@ -1,8 +1,10 @@
+import { AssetManagerLibrary } from "@nanoforge-dev/asset-manager/src";
 import { type IRunOptions } from "@nanoforge-dev/common";
 import { NanoforgeFactory } from "@nanoforge-dev/core";
 import { ECSLibrary } from "@nanoforge-dev/ecs";
-import { Graphics, Graphics2DLibrary } from "@nanoforge-dev/graphics-2d";
+import { Circle, Graphics2DLibrary, Layer, Rect } from "@nanoforge-dev/graphics-2d";
 import { InputEnum } from "@nanoforge-dev/input";
+import { InputLibrary } from "@nanoforge-dev/input/src";
 import { SoundLibrary } from "@nanoforge-dev/sound";
 
 import {
@@ -18,15 +20,19 @@ import { bounce, controlPlayer, drawCircle, move, moveRectangle } from "./system
 
 export const app = NanoforgeFactory.createClient();
 
-export const layer = new Graphics.Layer();
+export const layer = new Layer();
 
 export const main = async (options: IRunOptions) => {
+  const assetManager = new AssetManagerLibrary();
   const graphics = new Graphics2DLibrary();
   const ecsLibrary = new ECSLibrary();
+  const inputLibrary = new InputLibrary();
   const sounds = new SoundLibrary();
 
+  app.useAssetManager(assetManager);
   app.useGraphics(graphics);
   app.useComponentSystem(ecsLibrary);
+  app.useInput(inputLibrary);
   app.useSound(sounds);
 
   await app.init(options);
@@ -47,7 +53,7 @@ export const main = async (options: IRunOptions) => {
   registry.addComponent(
     ball,
     new CircleComponent(
-      new Graphics.Circle({
+      new Circle({
         radius: 70,
         fill: "red",
       }),
@@ -61,7 +67,7 @@ export const main = async (options: IRunOptions) => {
   registry.addComponent(player1, new Controller(InputEnum.KeyW, InputEnum.KeyS));
   registry.addComponent(
     player1,
-    new RectangleComponent(new Graphics.Rect({ fill: "blue", width: 50, height: 500 })),
+    new RectangleComponent(new Rect({ fill: "blue", width: 50, height: 500 })),
   );
 
   const player2 = registry.spawnEntity();
@@ -71,7 +77,7 @@ export const main = async (options: IRunOptions) => {
   registry.addComponent(player2, new Controller(InputEnum.ArrowUp, InputEnum.ArrowDown));
   registry.addComponent(
     player2,
-    new RectangleComponent(new Graphics.Rect({ fill: "blue", width: 50, height: 500 })),
+    new RectangleComponent(new Rect({ fill: "blue", width: 50, height: 500 })),
   );
 
   registry.addSystem(move);

packages/ecs/package.json

@@ -18,8 +18,7 @@
     "Tchips <leo.outmizguine@epitech.eu>"
   ],
   "files": [
-    "dist",
-    "lib"
+    "dist"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/ecs/tsup.config.ts

@@ -1,58 +1,3 @@
-import fs from "node:fs";
-import path from "node:path";
-
 import { createTsupConfig } from "../../tsup.config.js";
 
-const wasmPlugin = {
-  name: "wasm",
-  setup(build) {
-    // Resolve ".wasm" files to a path with a namespace
-    build.onResolve({ filter: /\.wasm$/ }, (args) => {
-      // If this is the import inside the stub module, import the
-      // binary itself. Put the path in the "wasm-binary" namespace
-      // to tell our binary load callback to load the binary file.
-      if (args.namespace === "wasm-stub") {
-        return {
-          path: args.path,
-          namespace: "wasm-binary",
-        };
-      }
-
-      // Otherwise, generate the JavaScript stub module for this
-      // ".wasm" file. Put it in the "wasm-stub" namespace to tell
-      // our stub load callback to fill it with JavaScript.
-      //
-      // Resolve relative paths to absolute paths here since this
-      // resolve callback is given "resolveDir", the directory to
-      // resolve imports against.
-      if (args.resolveDir === "") {
-        return; // Ignore unresolvable paths
-      }
-      return {
-        path: path.isAbsolute(args.path) ? args.path : path.join(args.resolveDir, args.path),
-        namespace: "wasm-stub",
-      };
-    });
-
-    // Virtual modules in the "wasm-stub" namespace are filled with
-    // the JavaScript code for compiling the WebAssembly binary. The
-    // binary itself is imported from a second virtual module.
-    build.onLoad({ filter: /.*/, namespace: "wasm-stub" }, async (args) => ({
-      contents: `import wasm from ${JSON.stringify(args.path)}
-        export default (imports) =>
-          WebAssembly.instantiate(wasm, imports).then(
-            result => result.instance.exports)`,
-    }));
-
-    // Virtual modules in the "wasm-binary" namespace contain the
-    // actual bytes of the WebAssembly file. This uses esbuild's
-    // built-in "binary" loader instead of manually embedding the
-    // binary data inside JavaScript code ourselves.
-    build.onLoad({ filter: /.*/, namespace: "wasm-binary" }, async (args) => ({
-      contents: await fs.promises.readFile(args.path),
-      loader: "binary",
-    }));
-  },
-};
-
-export default [createTsupConfig({ esbuildPlugins: [wasmPlugin] })];
+export default [createTsupConfig()];

packages/graphics-2d/src/graphics-2d.library.ts

@@ -1,6 +1,6 @@
 import { BaseGraphicsLibrary, type InitContext } from "@nanoforge-dev/common";
 
-import { Graphics } from ".";
+import * as Graphics from "./exports/konva";
 
 export class Graphics2DLibrary extends BaseGraphicsLibrary {
   private _stage?: Graphics.Stage;

packages/graphics-2d/src/index.ts

@@ -1,2 +1,2 @@
 export { Graphics2DLibrary } from "./graphics-2d.library";
-export * as Graphics from "./exports/konva";
+export * from "./exports/konva";

tsup.config.ts

@@ -21,9 +21,13 @@ export function createTsupConfig({
   keepNames = true,
   dts = true,
   sourcemap = true,
+  esbuildOptions = (options) => {
+    options.assetNames = "assets/[name]";
+  },
   esbuildPlugins = [],
   treeshake = false,
   outDir = "dist",
+  loader = { ".wasm": "copy" },
 }: Options = {}) {
   return defineConfig({
     entry,
@@ -42,8 +46,10 @@ export function createTsupConfig({
     keepNames,
     dts,
     sourcemap,
+    esbuildOptions,
     esbuildPlugins,
     treeshake,
     outDir,
+    loader,
   });
 }