@fonsecabarreto/genesis-gl-react 0.1.0

package/dist/chunk-5CACF6RI.js

@@ -0,0 +1,71 @@
+// src/hooks/useGenesisGL.ts
+import { useRef, useEffect } from "react";
+import { WebGLCore, Scene, Renderer, Viewport } from "@fonsecabarreto/genesis-gl-core/Core";
+function useGenesisGL(options) {
+  const contextRef = useRef({
+    renderer: null,
+    scene: null,
+    viewport: null,
+    webglCore: null
+  });
+  useEffect(() => {
+    const { canvasRef, onReady, onError } = options;
+    if (!canvasRef.current) return;
+    try {
+      const canvas = canvasRef.current;
+      const webglCore = new WebGLCore(canvas);
+      const viewport = new Viewport(
+        canvas,
+        window.innerWidth,
+        window.innerHeight,
+        webglCore
+      );
+      const renderer = new Renderer(webglCore, viewport);
+      const scene = Scene.withDefaultLights(webglCore);
+      contextRef.current = { renderer, scene, viewport, webglCore };
+      viewport.camera.target = [0, 0, 0];
+      viewport.camera.position = [4, 2, 8];
+      viewport.camera.invalidate();
+      if (onReady) {
+        onReady(scene, viewport, renderer);
+      }
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      console.error("Failed to initialize GenesisGL:", err);
+      if (onError) onError(err);
+    }
+    return () => {
+      const { scene, viewport, webglCore } = contextRef.current;
+      if (scene && webglCore) scene.dispose(webglCore);
+      if (viewport) viewport.dispose();
+      if (webglCore) webglCore.dispose();
+    };
+  }, [options]);
+  return contextRef.current;
+}
+
+// src/hooks/useRenderer.ts
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+function useRenderer(options) {
+  const { renderer, onFrame, enabled = true } = options;
+  const animationIdRef = useRef2(null);
+  useEffect2(() => {
+    if (!renderer || !enabled) return;
+    const animate = (time) => {
+      if (onFrame) onFrame(time);
+      animationIdRef.current = requestAnimationFrame(animate);
+    };
+    animationIdRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (animationIdRef.current !== null) {
+        cancelAnimationFrame(animationIdRef.current);
+      }
+    };
+  }, [renderer, onFrame, enabled]);
+}
+
+export {
+  useGenesisGL,
+  useRenderer
+};
+//# sourceMappingURL=chunk-5CACF6RI.js.map

package/dist/chunk-5CACF6RI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useGenesisGL.ts","../src/hooks/useRenderer.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport { WebGLCore, Scene, Renderer, Viewport } from '@fonsecabarreto/genesis-gl-core/Core';\n\nexport interface UseGenesisGLOptions {\n  canvasRef: React.RefObject<HTMLCanvasElement>;\n  onReady?: (scene: Scene, viewport: Viewport, renderer: Renderer) => void;\n  onError?: (error: Error) => void;\n}\n\nexport interface GenesisGLContext {\n  renderer: Renderer | null;\n  scene: Scene | null;\n  viewport: Viewport | null;\n  webglCore: WebGLCore | null;\n}\n\n/**\n * Hook to initialize GenesisGL engine in a React component.\n * Handles WebGL context creation, scene setup, and cleanup.\n */\nexport function useGenesisGL(options: UseGenesisGLOptions): GenesisGLContext {\n  const contextRef = useRef<GenesisGLContext>({\n    renderer: null,\n    scene: null,\n    viewport: null,\n    webglCore: null,\n  });\n\n  useEffect(() => {\n    const { canvasRef, onReady, onError } = options;\n    if (!canvasRef.current) return;\n\n    try {\n      const canvas = canvasRef.current;\n\n      // Initialize WebGL core\n      const webglCore = new WebGLCore(canvas);\n      const viewport = new Viewport(\n        canvas,\n        window.innerWidth,\n        window.innerHeight,\n        webglCore\n      );\n      const renderer = new Renderer(webglCore, viewport);\n      const scene = Scene.withDefaultLights(webglCore);\n\n      contextRef.current = { renderer, scene, viewport, webglCore };\n\n      // Set default camera\n      viewport.camera.target = [0, 0, 0];\n      viewport.camera.position = [4, 2, 8];\n      viewport.camera.invalidate();\n\n      if (onReady) {\n        onReady(scene, viewport, renderer);\n      }\n    } catch (error) {\n      const err = error instanceof Error ? error : new Error(String(error));\n      console.error('Failed to initialize GenesisGL:', err);\n      if (onError) onError(err);\n    }\n\n    // Cleanup\n    return () => {\n      const { scene, viewport, webglCore } = contextRef.current;\n      if (scene && webglCore) scene.dispose(webglCore);\n      if (viewport) viewport.dispose();\n      if (webglCore) webglCore.dispose();\n    };\n  }, [options]);\n\n  return contextRef.current;\n}\n","import { useRef, useEffect } from 'react';\nimport { Renderer } from '@fonsecabarreto/genesis-gl-core/Core';\n\nexport interface UseRendererOptions {\n  renderer: Renderer | null;\n  onFrame?: (time: number) => void;\n  enabled?: boolean;\n}\n\n/**\n * Hook to manage the render loop with requestAnimationFrame.\n * Handles starting/stopping animation and cleanup.\n */\nexport function useRenderer(options: UseRendererOptions): void {\n  const { renderer, onFrame, enabled = true } = options;\n  const animationIdRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!renderer || !enabled) return;\n\n    const animate = (time: number) => {\n      if (onFrame) onFrame(time);\n      animationIdRef.current = requestAnimationFrame(animate);\n    };\n\n    animationIdRef.current = requestAnimationFrame(animate);\n\n    return () => {\n      if (animationIdRef.current !== null) {\n        cancelAnimationFrame(animationIdRef.current);\n      }\n    };\n  }, [renderer, onFrame, enabled]);\n}\n"],"mappings":";AAAA,SAAS,QAAQ,iBAAiB;AAClC,SAAS,WAAW,OAAO,UAAU,gBAAgB;AAmB9C,SAAS,aAAa,SAAgD;AAC3E,QAAM,aAAa,OAAyB;AAAA,IAC1C,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAED,YAAU,MAAM;AACd,UAAM,EAAE,WAAW,SAAS,QAAQ,IAAI;AACxC,QAAI,CAAC,UAAU,QAAS;AAExB,QAAI;AACF,YAAM,SAAS,UAAU;AAGzB,YAAM,YAAY,IAAI,UAAU,MAAM;AACtC,YAAM,WAAW,IAAI;AAAA,QACnB;AAAA,QACA,OAAO;AAAA,QACP,OAAO;AAAA,QACP;AAAA,MACF;AACA,YAAM,WAAW,IAAI,SAAS,WAAW,QAAQ;AACjD,YAAM,QAAQ,MAAM,kBAAkB,SAAS;AAE/C,iBAAW,UAAU,EAAE,UAAU,OAAO,UAAU,UAAU;AAG5D,eAAS,OAAO,SAAS,CAAC,GAAG,GAAG,CAAC;AACjC,eAAS,OAAO,WAAW,CAAC,GAAG,GAAG,CAAC;AACnC,eAAS,OAAO,WAAW;AAE3B,UAAI,SAAS;AACX,gBAAQ,OAAO,UAAU,QAAQ;AAAA,MACnC;AAAA,IACF,SAAS,OAAO;AACd,YAAM,MAAM,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC;AACpE,cAAQ,MAAM,mCAAmC,GAAG;AACpD,UAAI,QAAS,SAAQ,GAAG;AAAA,IAC1B;AAGA,WAAO,MAAM;AACX,YAAM,EAAE,OAAO,UAAU,UAAU,IAAI,WAAW;AAClD,UAAI,SAAS,UAAW,OAAM,QAAQ,SAAS;AAC/C,UAAI,SAAU,UAAS,QAAQ;AAC/B,UAAI,UAAW,WAAU,QAAQ;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO,WAAW;AACpB;;;ACxEA,SAAS,UAAAA,SAAQ,aAAAC,kBAAiB;AAa3B,SAAS,YAAY,SAAmC;AAC7D,QAAM,EAAE,UAAU,SAAS,UAAU,KAAK,IAAI;AAC9C,QAAM,iBAAiBD,QAAsB,IAAI;AAEjD,EAAAC,WAAU,MAAM;AACd,QAAI,CAAC,YAAY,CAAC,QAAS;AAE3B,UAAM,UAAU,CAAC,SAAiB;AAChC,UAAI,QAAS,SAAQ,IAAI;AACzB,qBAAe,UAAU,sBAAsB,OAAO;AAAA,IACxD;AAEA,mBAAe,UAAU,sBAAsB,OAAO;AAEtD,WAAO,MAAM;AACX,UAAI,eAAe,YAAY,MAAM;AACnC,6BAAqB,eAAe,OAAO;AAAA,MAC7C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,SAAS,OAAO,CAAC;AACjC;","names":["useRef","useEffect"]}

package/dist/chunk-6ZAB2GPA.js

@@ -0,0 +1,46 @@
+import {
+  useGenesisGL,
+  useRenderer
+} from "./chunk-4H2GKYMT.js";
+
+// src/components/GenesisGLCanvas.tsx
+import React, { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var GenesisGLCanvas = React.forwardRef(
+  ({ onReady, onFrame, style, className }, ref) => {
+    const canvasRef = useRef(null);
+    const internalRef = ref || canvasRef;
+    const genesisContext = useGenesisGL({
+      canvasRef: internalRef,
+      onReady
+    });
+    useRenderer({
+      renderer: genesisContext.renderer,
+      onFrame: (time) => {
+        if (genesisContext.renderer && genesisContext.scene) {
+          genesisContext.renderer.render(genesisContext.scene);
+          if (onFrame) onFrame(time);
+        }
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: internalRef,
+        style: {
+          display: "block",
+          width: "100%",
+          height: "100%",
+          ...style
+        },
+        className
+      }
+    );
+  }
+);
+GenesisGLCanvas.displayName = "GenesisGLCanvas";
+
+export {
+  GenesisGLCanvas
+};
+//# sourceMappingURL=chunk-6ZAB2GPA.js.map

package/dist/chunk-6ZAB2GPA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/GenesisGLCanvas.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport type { Scene, Renderer, Viewport } from '../../../GenesisGL/src/Core';\nimport { useGenesisGL } from '../hooks/useGenesisGL';\nimport { useRenderer } from '../hooks/useRenderer';\n\nexport interface GenesisGLCanvasProps {\n  onReady?: (scene: Scene, viewport: Viewport, renderer: Renderer) => void;\n  onFrame?: (time: number) => void;\n  style?: React.CSSProperties;\n  className?: string;\n}\n\n/**\n * GenesisGLCanvas — A React component that wraps the entire initialization\n * and rendering pipeline for GenesisGL.\n *\n * Handles WebGL context, scene creation, cleanup, and animation loop.\n */\nexport const GenesisGLCanvas = React.forwardRef<HTMLCanvasElement, GenesisGLCanvasProps>(\n  ({ onReady, onFrame, style, className }, ref) => {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const internalRef = (ref as React.MutableRefObject<HTMLCanvasElement | null>) || canvasRef;\n\n    const genesisContext = useGenesisGL({\n      canvasRef: internalRef,\n      onReady,\n    });\n\n    useRenderer({\n      renderer: genesisContext.renderer,\n      onFrame: (time) => {\n        if (genesisContext.renderer && genesisContext.scene) {\n          genesisContext.renderer.render(genesisContext.scene);\n          if (onFrame) onFrame(time);\n        }\n      },\n    });\n\n    return (\n      <canvas\n        ref={internalRef}\n        style={{\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          ...style,\n        }}\n        className={className}\n      />\n    );\n  }\n);\n\nGenesisGLCanvas.displayName = 'GenesisGLCanvas';\n"],"mappings":";;;;;;AAAA,OAAO,SAAS,cAAc;AAuCxB;AArBC,IAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,SAAS,SAAS,OAAO,UAAU,GAAG,QAAQ;AAC/C,UAAM,YAAY,OAA0B,IAAI;AAChD,UAAM,cAAe,OAA4D;AAEjF,UAAM,iBAAiB,aAAa;AAAA,MAClC,WAAW;AAAA,MACX;AAAA,IACF,CAAC;AAED,gBAAY;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,SAAS;AACjB,YAAI,eAAe,YAAY,eAAe,OAAO;AACnD,yBAAe,SAAS,OAAO,eAAe,KAAK;AACnD,cAAI,QAAS,SAAQ,IAAI;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,GAAG;AAAA,QACL;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/chunk-E6LIWNSH.js

@@ -0,0 +1,46 @@
+import {
+  useGenesisGL,
+  useRenderer
+} from "./chunk-5CACF6RI.js";
+
+// src/components/GenesisGLCanvas.tsx
+import React, { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var GenesisGLCanvas = React.forwardRef(
+  ({ onReady, onFrame, style, className }, ref) => {
+    const canvasRef = useRef(null);
+    const internalRef = ref || canvasRef;
+    const genesisContext = useGenesisGL({
+      canvasRef: internalRef,
+      onReady
+    });
+    useRenderer({
+      renderer: genesisContext.renderer,
+      onFrame: (time) => {
+        if (genesisContext.renderer && genesisContext.scene) {
+          genesisContext.renderer.render(genesisContext.scene);
+          if (onFrame) onFrame(time);
+        }
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: internalRef,
+        style: {
+          display: "block",
+          width: "100%",
+          height: "100%",
+          ...style
+        },
+        className
+      }
+    );
+  }
+);
+GenesisGLCanvas.displayName = "GenesisGLCanvas";
+
+export {
+  GenesisGLCanvas
+};
+//# sourceMappingURL=chunk-E6LIWNSH.js.map

package/dist/chunk-E6LIWNSH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/GenesisGLCanvas.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Scene, Renderer, Viewport } from '@fonsecabarreto/genesis-gl-core/Core';\nimport { useGenesisGL } from '../hooks/useGenesisGL';\nimport { useRenderer } from '../hooks/useRenderer';\n\nexport interface GenesisGLCanvasProps {\n  onReady?: (scene: Scene, viewport: Viewport, renderer: Renderer) => void;\n  onFrame?: (time: number) => void;\n  style?: React.CSSProperties;\n  className?: string;\n}\n\n/**\n * GenesisGLCanvas — A React component that wraps the entire initialization\n * and rendering pipeline for GenesisGL.\n *\n * Handles WebGL context, scene creation, cleanup, and animation loop.\n */\nexport const GenesisGLCanvas = React.forwardRef<HTMLCanvasElement, GenesisGLCanvasProps>(\n  ({ onReady, onFrame, style, className }, ref) => {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const internalRef = (ref as React.MutableRefObject<HTMLCanvasElement | null>) || canvasRef;\n\n    const genesisContext = useGenesisGL({\n      canvasRef: internalRef,\n      onReady,\n    });\n\n    useRenderer({\n      renderer: genesisContext.renderer,\n      onFrame: (time) => {\n        if (genesisContext.renderer && genesisContext.scene) {\n          genesisContext.renderer.render(genesisContext.scene);\n          if (onFrame) onFrame(time);\n        }\n      },\n    });\n\n    return (\n      <canvas\n        ref={internalRef}\n        style={{\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          ...style,\n        }}\n        className={className}\n      />\n    );\n  }\n);\n\nGenesisGLCanvas.displayName = 'GenesisGLCanvas';\n"],"mappings":";;;;;;AAAA,OAAO,SAAS,cAAc;AAuCxB;AArBC,IAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,SAAS,SAAS,OAAO,UAAU,GAAG,QAAQ;AAC/C,UAAM,YAAY,OAA0B,IAAI;AAChD,UAAM,cAAe,OAA4D;AAEjF,UAAM,iBAAiB,aAAa;AAAA,MAClC,WAAW;AAAA,MACX;AAAA,IACF,CAAC;AAED,gBAAY;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,SAAS;AACjB,YAAI,eAAe,YAAY,eAAe,OAAO;AACnD,yBAAe,SAAS,OAAO,eAAe,KAAK;AACnD,cAAI,QAAS,SAAQ,IAAI;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,GAAG;AAAA,QACL;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/chunk-OJF67RNM.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-OJF67RNM.js.map

package/dist/chunk-OJF67RNM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/index.js

@@ -0,0 +1,8 @@
+import {
+  GenesisGLCanvas
+} from "../chunk-6ZAB2GPA.js";
+import "../chunk-4H2GKYMT.js";
+export {
+  GenesisGLCanvas
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/hooks/index.js

@@ -0,0 +1,10 @@
+import "../chunk-OJF67RNM.js";
+import {
+  useGenesisGL,
+  useRenderer
+} from "../chunk-4H2GKYMT.js";
+export {
+  useGenesisGL,
+  useRenderer
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.js

@@ -0,0 +1,14 @@
+import {
+  GenesisGLCanvas
+} from "./chunk-6ZAB2GPA.js";
+import "./chunk-OJF67RNM.js";
+import {
+  useGenesisGL,
+  useRenderer
+} from "./chunk-4H2GKYMT.js";
+export {
+  GenesisGLCanvas,
+  useGenesisGL,
+  useRenderer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@fonsecabarreto/genesis-gl-react",
+  "version": "0.1.0",
+  "description": "React integration for GenesisGL — WebGL 3D engine",
+  "author": "Lucas Fonseca Barreto",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "types": "./dist/hooks/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fonsecaBarreto/project-genesis-gl.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fonsecaBarreto/project-genesis-gl/issues"
+  },
+  "homepage": "https://github.com/fonsecaBarreto/project-genesis-gl#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "webgl",
+    "3d",
+    "game-engine",
+    "hooks",
+    "components"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rimraf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@fonsecabarreto/genesis-gl-core": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@fonsecabarreto/genesis-gl-core": "*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.2"
+  }
+}