@prtcl/plonk-hooks 1.0.0-alpha.2

package/README.md

@@ -0,0 +1,3 @@
+# @prtcl/plonk-hooks
+
+React hook wrappers for [plonk](https://github.com/prtcl/plonk)

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import 'client-only';
+export { default as useFrames } from './useFrames';
+export { default as useMetro, type UseMetroOptions } from './useMetro';

package/dist/index.js

@@ -0,0 +1,12 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMetro = exports.useFrames = void 0;
+require("client-only");
+var useFrames_1 = require("./useFrames");
+Object.defineProperty(exports, "useFrames", { enumerable: true, get: function () { return __importDefault(useFrames_1).default; } });
+var useMetro_1 = require("./useMetro");
+Object.defineProperty(exports, "useMetro", { enumerable: true, get: function () { return __importDefault(useMetro_1).default; } });

package/dist/useFrames.d.ts

@@ -0,0 +1,9 @@
+import { Frames, type FramesOptions, type TimerCallback } from '@prtcl/plonk-core';
+export type UseFramesOptions = FramesOptions & {
+    autostart?: boolean;
+};
+/**
+ * Hook wrapper for Frames which provides an animation loop with variable frame rate
+ */
+declare const useFrames: (callback: TimerCallback<Frames>, opts?: UseFramesOptions) => Frames;
+export default useFrames;

package/dist/useFrames.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const plonk_core_1 = require("@prtcl/plonk-core");
+const usePrevious_1 = __importDefault(require("./usePrevious"));
+/**
+ * Hook wrapper for Frames which provides an animation loop with variable frame rate
+ */
+const useFrames = (callback, opts) => {
+    const { autostart = true } = opts || {};
+    const callbackRef = (0, react_1.useRef)(callback);
+    const optsRef = (0, react_1.useRef)(opts);
+    const prevOpts = (0, usePrevious_1.default)(opts);
+    callbackRef.current = callback;
+    const frames = (0, react_1.useMemo)(() => {
+        return new plonk_core_1.Frames((m) => {
+            callbackRef.current(m);
+        }, optsRef.current);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (opts && prevOpts && opts.fps !== prevOpts.fps) {
+            frames.setFPS(opts.fps);
+        }
+    }, [opts, prevOpts, frames]);
+    (0, react_1.useEffect)(() => {
+        if (autostart) {
+            frames.run();
+        }
+        return () => {
+            frames.stop();
+        };
+    }, [frames]);
+    return frames;
+};
+exports.default = useFrames;

package/dist/useMetro.d.ts

@@ -0,0 +1,9 @@
+import { Metro, type MetroOptions, type TimerCallback } from '@prtcl/plonk-core';
+export type UseMetroOptions = MetroOptions & {
+    autostart?: boolean;
+};
+/**
+ * Hook wrapper for Metro which provides a timer loop with variable interval.
+ */
+declare const useMetro: (callback: TimerCallback<Metro>, opts?: UseMetroOptions) => Metro;
+export default useMetro;

package/dist/useMetro.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const plonk_core_1 = require("@prtcl/plonk-core");
+const usePrevious_1 = __importDefault(require("./usePrevious"));
+/**
+ * Hook wrapper for Metro which provides a timer loop with variable interval.
+ */
+const useMetro = (callback, opts) => {
+    const { autostart = true } = opts || {};
+    const callbackRef = (0, react_1.useRef)(callback);
+    const optsRef = (0, react_1.useRef)(opts);
+    const prevOpts = (0, usePrevious_1.default)(opts);
+    callbackRef.current = callback;
+    const metro = (0, react_1.useMemo)(() => {
+        return new plonk_core_1.Metro((m) => {
+            callbackRef.current(m);
+        }, optsRef.current);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (opts && prevOpts && opts.time !== prevOpts.time) {
+            metro.setTime(opts.time);
+        }
+    }, [opts, prevOpts, metro]);
+    (0, react_1.useEffect)(() => {
+        if (autostart) {
+            metro.run();
+        }
+        return () => {
+            metro.stop();
+        };
+    }, [metro]);
+    return metro;
+};
+exports.default = useMetro;

package/dist/usePrevious.d.ts

@@ -0,0 +1,3 @@
+/** Returns the previous value without causing additional updates. */
+declare const usePrevious: <Value>(value: Value) => Value | undefined;
+export default usePrevious;

package/dist/usePrevious.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/** Returns the previous value without causing additional updates. */
+const usePrevious = (value) => {
+    const ref = (0, react_1.useRef)({
+        value,
+        prev: undefined,
+    });
+    const current = ref.current.value;
+    if (value !== current) {
+        ref.current = {
+            value,
+            prev: current,
+        };
+    }
+    return ref.current.prev;
+};
+exports.default = usePrevious;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@prtcl/plonk-hooks",
+  "version": "1.0.0-alpha.2",
+  "description": "React hook wrappers for plonk",
+  "author": "Cory O'Brien <cory@prtcl.cc>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/prtcl/plonk.git"
+  },
+  "scripts": {
+    "build": "npx tsc",
+    "clean": "rm -rf dist | true",
+    "test": "npx jest --env=jsdom"
+  },
+  "dependencies": {
+    "@prtcl/plonk-core": "^1.0.0-alpha.2",
+    "client-only": "^0.0.1"
+  },
+  "peerDependencies": {
+    "react": "17 - 18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.3",
+    "@types/react": "^18.2.74",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.2.0",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.4.3"
+  }
+}