@prtcl/plonk-hooks 1.0.1-beta.0 → 1.0.1-beta.3

package/dist/index.cjs

@@ -0,0 +1,115 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  useFrames: () => useFrames,
+  useMetro: () => useMetro,
+  usePrevious: () => usePrevious
+});
+module.exports = __toCommonJS(src_exports);
+var import_client_only = require("client-only");
+
+// src/hooks/useFrames.ts
+var import_react2 = require("react");
+var import_plonk = require("@prtcl/plonk");
+
+// src/hooks/usePrevious.ts
+var import_react = require("react");
+var usePrevious = (value) => {
+  const ref = (0, import_react.useRef)({
+    value,
+    prev: void 0
+  });
+  const current = ref.current.value;
+  if (value !== current) {
+    ref.current = {
+      value,
+      prev: current
+    };
+  }
+  return ref.current.prev;
+};
+
+// src/hooks/useFrames.ts
+var useFrames = (callback, opts) => {
+  const { autostart = true } = opts || {};
+  const callbackRef = (0, import_react2.useRef)(callback);
+  const optsRef = (0, import_react2.useRef)(opts);
+  const prevOpts = usePrevious(opts);
+  callbackRef.current = callback;
+  const frames = (0, import_react2.useMemo)(() => {
+    return new import_plonk.Frames((m) => {
+      callbackRef.current(m);
+    }, optsRef.current);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (opts && prevOpts && opts.fps !== prevOpts.fps) {
+      frames.setFPS(opts.fps);
+    }
+  }, [opts, prevOpts, frames]);
+  (0, import_react2.useEffect)(() => {
+    if (autostart) {
+      frames.run();
+    }
+    return () => {
+      frames.stop();
+    };
+  }, [frames]);
+  return frames;
+};
+
+// src/hooks/useMetro.ts
+var import_react3 = require("react");
+var import_plonk2 = require("@prtcl/plonk");
+var useMetro = (callback, opts) => {
+  const { autostart = true } = opts || {};
+  const callbackRef = (0, import_react3.useRef)(callback);
+  const optsRef = (0, import_react3.useRef)(opts);
+  const prevOpts = usePrevious(opts);
+  callbackRef.current = callback;
+  const metro = (0, import_react3.useMemo)(() => {
+    return new import_plonk2.Metro((m) => {
+      callbackRef.current(m);
+    }, optsRef.current);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (opts && prevOpts && opts.time !== prevOpts.time) {
+      metro.setTime(opts.time);
+    }
+  }, [opts, prevOpts, metro]);
+  (0, import_react3.useEffect)(() => {
+    if (autostart) {
+      metro.run();
+    }
+    return () => {
+      metro.stop();
+    };
+  }, [metro]);
+  return metro;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFrames,
+  useMetro,
+  usePrevious
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/useFrames.ts","../src/hooks/usePrevious.ts","../src/hooks/useMetro.ts"],"sourcesContent":["'use client';\n\nimport 'client-only';\n\nexport { useFrames, type UseFramesOptions } from './hooks/useFrames';\nexport { useMetro, type UseMetroOptions } from './hooks/useMetro';\nexport { usePrevious } from './hooks/usePrevious';\n","import { useEffect, useMemo, useRef } from 'react';\nimport { Frames, type FramesOptions, type TimerCallback } from '@prtcl/plonk';\nimport { usePrevious } from './usePrevious';\n\nexport type UseFramesOptions = FramesOptions & {\n  autostart?: boolean;\n};\n\n/**\n * Hook wrapper for Frames which provides an animation loop with variable frame rate\n */\nexport const useFrames = (\n  callback: TimerCallback<Frames>,\n  opts?: UseFramesOptions,\n) => {\n  const { autostart = true } = opts || {};\n  const callbackRef = useRef<TimerCallback<Frames>>(callback);\n  const optsRef = useRef<UseFramesOptions | undefined>(opts);\n  const prevOpts = usePrevious(opts);\n\n  callbackRef.current = callback;\n\n  const frames = useMemo<Frames>(() => {\n    return new Frames((m) => {\n      callbackRef.current(m);\n    }, optsRef.current);\n  }, []);\n\n  useEffect(() => {\n    if (opts && prevOpts && opts.fps !== prevOpts.fps) {\n      frames.setFPS(opts.fps);\n    }\n  }, [opts, prevOpts, frames]);\n\n  useEffect(() => {\n    if (autostart) {\n      frames.run();\n    }\n\n    return () => {\n      frames.stop();\n    };\n  }, [frames]);\n\n  return frames;\n};\n","import { useRef } from 'react';\n\ntype ValueCache<Value> = {\n  value: Value;\n  prev: Value | undefined;\n};\n\n/** Returns the previous value without causing additional updates. */\nexport const usePrevious = <Value>(value: Value): Value | undefined => {\n  const ref = useRef<ValueCache<Value>>({\n    value,\n    prev: undefined,\n  });\n\n  const current = ref.current.value;\n\n  if (value !== current) {\n    ref.current = {\n      value,\n      prev: current,\n    };\n  }\n\n  return ref.current.prev;\n};\n","import { useEffect, useMemo, useRef } from 'react';\nimport { Metro, type MetroOptions, type TimerCallback } from '@prtcl/plonk';\nimport { usePrevious } from './usePrevious';\n\nexport type UseMetroOptions = MetroOptions & {\n  autostart?: boolean;\n};\n\n/**\n * Hook wrapper for Metro which provides a timer loop with variable interval.\n */\nexport const useMetro = (\n  callback: TimerCallback<Metro>,\n  opts?: UseMetroOptions,\n) => {\n  const { autostart = true } = opts || {};\n  const callbackRef = useRef<TimerCallback<Metro>>(callback);\n  const optsRef = useRef<UseMetroOptions | undefined>(opts);\n  const prevOpts = usePrevious(opts);\n\n  callbackRef.current = callback;\n\n  const metro = useMemo<Metro>(() => {\n    return new Metro((m) => {\n      callbackRef.current(m);\n    }, optsRef.current);\n  }, []);\n\n  useEffect(() => {\n    if (opts && prevOpts && opts.time !== prevOpts.time) {\n      metro.setTime(opts.time);\n    }\n  }, [opts, prevOpts, metro]);\n\n  useEffect(() => {\n    if (autostart) {\n      metro.run();\n    }\n\n    return () => {\n      metro.stop();\n    };\n  }, [metro]);\n\n  return metro;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,yBAAO;;;ACFP,IAAAA,gBAA2C;AAC3C,mBAA+D;;;ACD/D,mBAAuB;AAQhB,IAAM,cAAc,CAAQ,UAAoC;AACrE,QAAM,UAAM,qBAA0B;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AAED,QAAM,UAAU,IAAI,QAAQ;AAE5B,MAAI,UAAU,SAAS;AACrB,QAAI,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SAAO,IAAI,QAAQ;AACrB;;;ADbO,IAAM,YAAY,CACvB,UACA,SACG;AACH,QAAM,EAAE,YAAY,KAAK,IAAI,QAAQ,CAAC;AACtC,QAAM,kBAAc,sBAA8B,QAAQ;AAC1D,QAAM,cAAU,sBAAqC,IAAI;AACzD,QAAM,WAAW,YAAY,IAAI;AAEjC,cAAY,UAAU;AAEtB,QAAM,aAAS,uBAAgB,MAAM;AACnC,WAAO,IAAI,oBAAO,CAAC,MAAM;AACvB,kBAAY,QAAQ,CAAC;AAAA,IACvB,GAAG,QAAQ,OAAO;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,QAAI,QAAQ,YAAY,KAAK,QAAQ,SAAS,KAAK;AACjD,aAAO,OAAO,KAAK,GAAG;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,MAAM,CAAC;AAE3B,+BAAU,MAAM;AACd,QAAI,WAAW;AACb,aAAO,IAAI;AAAA,IACb;AAEA,WAAO,MAAM;AACX,aAAO,KAAK;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;;;AE7CA,IAAAC,gBAA2C;AAC3C,IAAAC,gBAA6D;AAUtD,IAAM,WAAW,CACtB,UACA,SACG;AACH,QAAM,EAAE,YAAY,KAAK,IAAI,QAAQ,CAAC;AACtC,QAAM,kBAAc,sBAA6B,QAAQ;AACzD,QAAM,cAAU,sBAAoC,IAAI;AACxD,QAAM,WAAW,YAAY,IAAI;AAEjC,cAAY,UAAU;AAEtB,QAAM,YAAQ,uBAAe,MAAM;AACjC,WAAO,IAAI,oBAAM,CAAC,MAAM;AACtB,kBAAY,QAAQ,CAAC;AAAA,IACvB,GAAG,QAAQ,OAAO;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,QAAI,QAAQ,YAAY,KAAK,SAAS,SAAS,MAAM;AACnD,YAAM,QAAQ,KAAK,IAAI;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,KAAK,CAAC;AAE1B,+BAAU,MAAM;AACd,QAAI,WAAW;AACb,YAAM,IAAI;AAAA,IACZ;AAEA,WAAO,MAAM;AACX,YAAM,KAAK;AAAA,IACb;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;","names":["import_react","import_react","import_plonk"]}

package/dist/index.d.cts

@@ -0,0 +1,22 @@
+import { FramesOptions, TimerCallback, Frames, MetroOptions, Metro } from '@prtcl/plonk';
+
+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;
+
+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;
+
+/** Returns the previous value without causing additional updates. */
+declare const usePrevious: <Value>(value: Value) => Value | undefined;
+
+export { type UseFramesOptions, type UseMetroOptions, useFrames, useMetro, usePrevious };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import { FramesOptions, TimerCallback, Frames, MetroOptions, Metro } from '@prtcl/plonk';
+
+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;
+
+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;
+
+/** Returns the previous value without causing additional updates. */
+declare const usePrevious: <Value>(value: Value) => Value | undefined;
+
+export { type UseFramesOptions, type UseMetroOptions, useFrames, useMetro, usePrevious };

package/dist/index.js

@@ -0,0 +1,89 @@
+"use client";
+
+// src/index.ts
+import "client-only";
+
+// src/hooks/useFrames.ts
+import { useEffect, useMemo, useRef as useRef2 } from "react";
+import { Frames } from "@prtcl/plonk";
+
+// src/hooks/usePrevious.ts
+import { useRef } from "react";
+var usePrevious = (value) => {
+  const ref = useRef({
+    value,
+    prev: void 0
+  });
+  const current = ref.current.value;
+  if (value !== current) {
+    ref.current = {
+      value,
+      prev: current
+    };
+  }
+  return ref.current.prev;
+};
+
+// src/hooks/useFrames.ts
+var useFrames = (callback, opts) => {
+  const { autostart = true } = opts || {};
+  const callbackRef = useRef2(callback);
+  const optsRef = useRef2(opts);
+  const prevOpts = usePrevious(opts);
+  callbackRef.current = callback;
+  const frames = useMemo(() => {
+    return new Frames((m) => {
+      callbackRef.current(m);
+    }, optsRef.current);
+  }, []);
+  useEffect(() => {
+    if (opts && prevOpts && opts.fps !== prevOpts.fps) {
+      frames.setFPS(opts.fps);
+    }
+  }, [opts, prevOpts, frames]);
+  useEffect(() => {
+    if (autostart) {
+      frames.run();
+    }
+    return () => {
+      frames.stop();
+    };
+  }, [frames]);
+  return frames;
+};
+
+// src/hooks/useMetro.ts
+import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { Metro } from "@prtcl/plonk";
+var useMetro = (callback, opts) => {
+  const { autostart = true } = opts || {};
+  const callbackRef = useRef3(callback);
+  const optsRef = useRef3(opts);
+  const prevOpts = usePrevious(opts);
+  callbackRef.current = callback;
+  const metro = useMemo2(() => {
+    return new Metro((m) => {
+      callbackRef.current(m);
+    }, optsRef.current);
+  }, []);
+  useEffect2(() => {
+    if (opts && prevOpts && opts.time !== prevOpts.time) {
+      metro.setTime(opts.time);
+    }
+  }, [opts, prevOpts, metro]);
+  useEffect2(() => {
+    if (autostart) {
+      metro.run();
+    }
+    return () => {
+      metro.stop();
+    };
+  }, [metro]);
+  return metro;
+};
+export {
+  useFrames,
+  useMetro,
+  usePrevious
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/useFrames.ts","../src/hooks/usePrevious.ts","../src/hooks/useMetro.ts"],"sourcesContent":["'use client';\n\nimport 'client-only';\n\nexport { useFrames, type UseFramesOptions } from './hooks/useFrames';\nexport { useMetro, type UseMetroOptions } from './hooks/useMetro';\nexport { usePrevious } from './hooks/usePrevious';\n","import { useEffect, useMemo, useRef } from 'react';\nimport { Frames, type FramesOptions, type TimerCallback } from '@prtcl/plonk';\nimport { usePrevious } from './usePrevious';\n\nexport type UseFramesOptions = FramesOptions & {\n  autostart?: boolean;\n};\n\n/**\n * Hook wrapper for Frames which provides an animation loop with variable frame rate\n */\nexport const useFrames = (\n  callback: TimerCallback<Frames>,\n  opts?: UseFramesOptions,\n) => {\n  const { autostart = true } = opts || {};\n  const callbackRef = useRef<TimerCallback<Frames>>(callback);\n  const optsRef = useRef<UseFramesOptions | undefined>(opts);\n  const prevOpts = usePrevious(opts);\n\n  callbackRef.current = callback;\n\n  const frames = useMemo<Frames>(() => {\n    return new Frames((m) => {\n      callbackRef.current(m);\n    }, optsRef.current);\n  }, []);\n\n  useEffect(() => {\n    if (opts && prevOpts && opts.fps !== prevOpts.fps) {\n      frames.setFPS(opts.fps);\n    }\n  }, [opts, prevOpts, frames]);\n\n  useEffect(() => {\n    if (autostart) {\n      frames.run();\n    }\n\n    return () => {\n      frames.stop();\n    };\n  }, [frames]);\n\n  return frames;\n};\n","import { useRef } from 'react';\n\ntype ValueCache<Value> = {\n  value: Value;\n  prev: Value | undefined;\n};\n\n/** Returns the previous value without causing additional updates. */\nexport const usePrevious = <Value>(value: Value): Value | undefined => {\n  const ref = useRef<ValueCache<Value>>({\n    value,\n    prev: undefined,\n  });\n\n  const current = ref.current.value;\n\n  if (value !== current) {\n    ref.current = {\n      value,\n      prev: current,\n    };\n  }\n\n  return ref.current.prev;\n};\n","import { useEffect, useMemo, useRef } from 'react';\nimport { Metro, type MetroOptions, type TimerCallback } from '@prtcl/plonk';\nimport { usePrevious } from './usePrevious';\n\nexport type UseMetroOptions = MetroOptions & {\n  autostart?: boolean;\n};\n\n/**\n * Hook wrapper for Metro which provides a timer loop with variable interval.\n */\nexport const useMetro = (\n  callback: TimerCallback<Metro>,\n  opts?: UseMetroOptions,\n) => {\n  const { autostart = true } = opts || {};\n  const callbackRef = useRef<TimerCallback<Metro>>(callback);\n  const optsRef = useRef<UseMetroOptions | undefined>(opts);\n  const prevOpts = usePrevious(opts);\n\n  callbackRef.current = callback;\n\n  const metro = useMemo<Metro>(() => {\n    return new Metro((m) => {\n      callbackRef.current(m);\n    }, optsRef.current);\n  }, []);\n\n  useEffect(() => {\n    if (opts && prevOpts && opts.time !== prevOpts.time) {\n      metro.setTime(opts.time);\n    }\n  }, [opts, prevOpts, metro]);\n\n  useEffect(() => {\n    if (autostart) {\n      metro.run();\n    }\n\n    return () => {\n      metro.stop();\n    };\n  }, [metro]);\n\n  return metro;\n};\n"],"mappings":";;;AAEA,OAAO;;;ACFP,SAAS,WAAW,SAAS,UAAAA,eAAc;AAC3C,SAAS,cAAsD;;;ACD/D,SAAS,cAAc;AAQhB,IAAM,cAAc,CAAQ,UAAoC;AACrE,QAAM,MAAM,OAA0B;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AAED,QAAM,UAAU,IAAI,QAAQ;AAE5B,MAAI,UAAU,SAAS;AACrB,QAAI,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SAAO,IAAI,QAAQ;AACrB;;;ADbO,IAAM,YAAY,CACvB,UACA,SACG;AACH,QAAM,EAAE,YAAY,KAAK,IAAI,QAAQ,CAAC;AACtC,QAAM,cAAcC,QAA8B,QAAQ;AAC1D,QAAM,UAAUA,QAAqC,IAAI;AACzD,QAAM,WAAW,YAAY,IAAI;AAEjC,cAAY,UAAU;AAEtB,QAAM,SAAS,QAAgB,MAAM;AACnC,WAAO,IAAI,OAAO,CAAC,MAAM;AACvB,kBAAY,QAAQ,CAAC;AAAA,IACvB,GAAG,QAAQ,OAAO;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,QAAQ,YAAY,KAAK,QAAQ,SAAS,KAAK;AACjD,aAAO,OAAO,KAAK,GAAG;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,MAAM,CAAC;AAE3B,YAAU,MAAM;AACd,QAAI,WAAW;AACb,aAAO,IAAI;AAAA,IACb;AAEA,WAAO,MAAM;AACX,aAAO,KAAK;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;;;AE7CA,SAAS,aAAAC,YAAW,WAAAC,UAAS,UAAAC,eAAc;AAC3C,SAAS,aAAoD;AAUtD,IAAM,WAAW,CACtB,UACA,SACG;AACH,QAAM,EAAE,YAAY,KAAK,IAAI,QAAQ,CAAC;AACtC,QAAM,cAAcC,QAA6B,QAAQ;AACzD,QAAM,UAAUA,QAAoC,IAAI;AACxD,QAAM,WAAW,YAAY,IAAI;AAEjC,cAAY,UAAU;AAEtB,QAAM,QAAQC,SAAe,MAAM;AACjC,WAAO,IAAI,MAAM,CAAC,MAAM;AACtB,kBAAY,QAAQ,CAAC;AAAA,IACvB,GAAG,QAAQ,OAAO;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,EAAAC,WAAU,MAAM;AACd,QAAI,QAAQ,YAAY,KAAK,SAAS,SAAS,MAAM;AACnD,YAAM,QAAQ,KAAK,IAAI;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,KAAK,CAAC;AAE1B,EAAAA,WAAU,MAAM;AACd,QAAI,WAAW;AACb,YAAM,IAAI;AAAA,IACZ;AAEA,WAAO,MAAM;AACX,YAAM,KAAK;AAAA,IACb;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;","names":["useRef","useRef","useEffect","useMemo","useRef","useRef","useMemo","useEffect"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prtcl/plonk-hooks",
-  "version": "1.0.1-beta.0",
+  "version": "1.0.1-beta.3",
   "description": "React hook wrappers for plonk",
   "author": "Cory O'Brien <cory@prtcl.cc>",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "test": "vitest --browser.name=chrome --browser.headless --watch=false"
   },
   "dependencies": {
-    "@prtcl/plonk": "1.0.1-beta.0",
+    "@prtcl/plonk": "1.0.1-beta.3",
     "client-only": "^0.0.1"
   },
   "peerDependencies": {

package/tsup.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from 'tsup';
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  clean: true,
-  dts: true,
-  sourcemap: true,
-  splitting: false,
-  target: 'es2020',
-});