@signaldb/react
Version:
SignalDB is a client-side database that provides a simple MongoDB-like interface to the data with first-class typescript support to achieve an optimistic UI. Data persistence can be achieved by using storage providers that store the data through a JSON in
1 lines • 4.2 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { useRef, useReducer, useMemo, useEffect } from 'react';\nconst forceUpdateReducer = (x) => x + 1;\nconst useForceUpdate = () => useReducer(forceUpdateReducer, 0)[1];\n/**\n * Creates a custom React hook for managing reactive computations with a given reactive effect.\n * This hook allows for automatic tracking and re-rendering of React components when reactive dependencies change.\n * @param effectFunction - A function that runs a reactive computation and provides a way to stop the computation.\n * @returns A React hook (`useReactivity`) for managing reactive computations.\n * @example\n * import { createUseReactivityHook } from './createUseReactivityHook';\n *\n * example with @maverick-js/signals effect function\n * import { effect } from @maverick-js/signals\n *\n * // Create the custom hook\n * const useReactivity = createUseReactivityHook(effect);\n *\n * // Use the custom hook in a component\n * function MyComponent() {\n * const reactiveData = useReactivity(() => {\n * return myReactiveCollection.find().fetch();\n * }, []);\n *\n * return (\n * <div>\n * {reactiveData.map(item => (\n * <div key={item.id}>{item.name}</div>\n * ))}\n * </div>\n * );\n * }\n */\nexport function createUseReactivityHook(effectFunction) {\n /**\n * Custom hook for managing reactive computations.\n * @param reactiveFunction - A function that returns the reactive data.\n * @param deps - Dependency list for the effect.\n * @returns The reactive data.\n */\n function useReactivity(reactiveFunction, deps) {\n const forceUpdate = useForceUpdate();\n const refs = useRef({\n isComponentMounted: true,\n hasInitialRender: false,\n });\n const ensureComputation = () => {\n if (refs.current.stopComputation) {\n refs.current.stopComputation();\n refs.current.stopComputation = undefined;\n }\n refs.current.stopComputation = effectFunction(() => {\n if (!refs.current.isComponentMounted)\n return;\n refs.current.data = reactiveFunction();\n if (!refs.current.hasInitialRender)\n return;\n forceUpdate();\n });\n };\n useMemo(() => {\n if (!refs.current.isComponentMounted)\n return;\n ensureComputation();\n }, deps || []);\n useEffect(() => {\n refs.current.isComponentMounted = true;\n refs.current.hasInitialRender = true;\n if (!refs.current.stopComputation)\n ensureComputation();\n return () => {\n refs.current.isComponentMounted = false;\n if (!refs.current.stopComputation)\n return;\n refs.current.stopComputation();\n refs.current.stopComputation = undefined;\n };\n }, []);\n return refs.current.data;\n }\n return useReactivity;\n}\n"],"names":["forceUpdateReducer","x","useForceUpdate","useReducer","createUseReactivityHook","effectFunction","useReactivity","reactiveFunction","deps","forceUpdate","refs","useRef","ensureComputation","useMemo","useEffect"],"mappings":";AACA,MAAMA,IAAqB,CAACC,MAAMA,IAAI,GAChCC,IAAiB,MAAMC,EAAWH,GAAoB,CAAC,EAAE,CAAC;AA8BzD,SAASI,EAAwBC,GAAgB;AAO3C,WAAAC,EAAcC,GAAkBC,GAAM;AAC3C,UAAMC,IAAcP,EAAe,GAC7BQ,IAAOC,EAAO;AAAA,MAChB,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IAAA,CACrB,GACKC,IAAoB,MAAM;AACxB,MAAAF,EAAK,QAAQ,oBACbA,EAAK,QAAQ,gBAAgB,GAC7BA,EAAK,QAAQ,kBAAkB,SAE9BA,EAAA,QAAQ,kBAAkBL,EAAe,MAAM;AAC5C,QAACK,EAAK,QAAQ,uBAEbA,EAAA,QAAQ,OAAOH,EAAiB,GAChCG,EAAK,QAAQ,oBAEND,EAAA;AAAA,MAAA,CACf;AAAA,IACL;AACA,WAAAI,EAAQ,MAAM;AACN,MAACH,EAAK,QAAQ,sBAEAE,EAAA;AAAA,IAAA,GACnBJ,KAAQ,CAAA,CAAE,GACbM,EAAU,OACNJ,EAAK,QAAQ,qBAAqB,IAClCA,EAAK,QAAQ,mBAAmB,IAC3BA,EAAK,QAAQ,mBACIE,EAAA,GACf,MAAM;AAEL,MADJF,EAAK,QAAQ,qBAAqB,IAC7BA,EAAK,QAAQ,oBAElBA,EAAK,QAAQ,gBAAgB,GAC7BA,EAAK,QAAQ,kBAAkB;AAAA,IACnC,IACD,EAAE,GACEA,EAAK,QAAQ;AAAA,EAAA;AAEjB,SAAAJ;AACX;"}