@0g/react - npm Package Compare versions

Comparing version 4.0.2 to 4.1.0

dist/hooks/useFrame.d.ts

@@ -0,4 +1,5 @@
+import { Game } from '0g';
 /**
  * Runs a callback every game step
  */
-export declare function useFrame(callback: () => void, phase?: string): void;
+export declare function useFrame(callback: (game: Game) => void, phase?: string): void;

dist/hooks/useFrame.js

@@ -6,3 +6,3 @@ import { useEffect, useLayoutEffect, useRef } from 'react';
  */
-export function useFrame(callback, phase) {
+export function useFrame(callback, phase = 'step') {
     const game = useGame();
@@ -14,5 +14,5 @@ const ref = useRef(callback);
     useEffect(() => {
-        return game.subscribe(phase ? `phase:${phase}` : 'stepComplete', ref.current);
+        return game.subscribe(`phase:${phase}`, () => ref.current(game));
     }, [game, ref]);
 }
 //# sourceMappingURL=useFrame.js.map

dist/hooks/useQuery.js

@@ -6,3 +6,6 @@ import { useState, useSyncExternalStore } from 'react';
     // stored as a static reference.
-    const [query] = useState(() => game.queryManager.create(queryDef));
+    const [query] = useState(() => {
+        const q = game.queryManager.create(queryDef);
+        return q;
+    });
     useSyncExternalStore((onChange) => {
@@ -9,0 +12,0 @@ const cleanup = [

dist/hooks/useWatch.d.ts

@@ -1,2 +0,7 @@
-import { ComponentInstance } from '0g';
-export declare function useWatch<C extends ComponentInstance>(component: C, onChange: (current: C) => any): void;
+import { AnyComponent } from '0g';
+export declare function useOnChange<C extends AnyComponent>(component: C, onChange: (current: C) => any, { phase }?: {
+    phase?: string;
+}): void;
+export declare function useWatch<C extends AnyComponent>(component: C, { phase }?: {
+    phase?: string;
+}): void;

dist/hooks/useWatch.js

 import { useFrame } from './useFrame.js';
 import { useGame } from './useGame.js';
-export function useWatch(component, onChange) {
+import { useCallback, useState } from 'react';
+export function useOnChange(component, onChange, { phase = 'step' } = {}) {
     const game = useGame();
@@ -9,4 +10,9 @@ useFrame(() => {
         }
-    });
+    }, phase);
 }
+export function useWatch(component, { phase = 'step' } = {}) {
+    const [_, setVal] = useState(0);
+    const forceUpdate = useCallback(() => setVal((val) => val + 1), []);
+    useOnChange(component, forceUpdate, { phase });
+}
 //# sourceMappingURL=useWatch.js.map

package.json

 {
   "name": "@0g/react",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "",
@@ -35,3 +35,3 @@ "type": "module",
   "peerDependencies": {
-    "0g": "0.4.1",
+    "0g": "0.4.2",
     "react": "^18.0.0"
@@ -47,3 +47,3 @@ },
     "typescript": "5.4.5",
-    "0g": "0.4.1"
+    "0g": "0.4.2"
   },
@@ -50,0 +50,0 @@ "dependencies": {},

src/hooks/useFrame.ts

 import { useEffect, useLayoutEffect, useRef } from 'react';
-import { Query, QueryComponentFilter, QueryIteratorFn } from '0g';
 import { useGame } from './useGame.js';
+import { Game } from '0g';
 
@@ -8,3 +8,6 @@ /**
  */
-export function useFrame(callback: () => void, phase?: string) {
+export function useFrame(
+  callback: (game: Game) => void,
+  phase: string = 'step',
+) {
   const game = useGame();
@@ -18,7 +21,4 @@
   useEffect(() => {
-    return game.subscribe(
-      phase ? `phase:${phase}` : 'stepComplete',
-      ref.current,
-    );
+    return game.subscribe(`phase:${phase}`, () => ref.current(game));
   }, [game, ref]);
 }

src/hooks/useQuery.ts

@@ -8,3 +8,6 @@ import { useState, useSyncExternalStore } from 'react';
   // stored as a static reference.
-  const [query] = useState(() => game.queryManager.create(queryDef));
+  const [query] = useState(() => {
+    const q = game.queryManager.create(queryDef);
+    return q;
+  });
 
@@ -11,0 +14,0 @@ useSyncExternalStore(

src/hooks/useWatch.ts

@@ -1,8 +0,10 @@
-import { ComponentInstance } from '0g';
+import { AnyComponent, InstanceFor } from '0g';
 import { useFrame } from './useFrame.js';
 import { useGame } from './useGame.js';
+import { useCallback, useState } from 'react';
 
-export function useWatch<C extends ComponentInstance>(
+export function useOnChange<C extends AnyComponent>(
   component: C,
   onChange: (current: C) => any,
+  { phase = 'step' }: { phase?: string } = {},
 ) {
@@ -14,3 +16,12 @@ const game = useGame();
     }
-  });
+  }, phase);
 }
+
+export function useWatch<C extends AnyComponent>(
+  component: C,
+  { phase = 'step' }: { phase?: string } = {},
+) {
+  const [_, setVal] = useState(0);
+  const forceUpdate = useCallback(() => setVal((val) => val + 1), []);
+  useOnChange(component, forceUpdate, { phase });
+}

No alert changes

Improved metrics

Total package byte prevSize

16477

increased by9.1%

Lines of code

267

increased by11.72%

No dependency changes