{"version":3,"file":"reuseMicroStore.cjs","names":["useForceUpdate","getStoreSnapshot"],"sources":["../../../src/createMicroStore/reuseMicroStore/reuseMicroStore.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { effect } from '@pastweb/tools/reactivity';\nimport { useForceUpdate } from '../../useForceUpdate';\nimport { getStoreSnapshot } from './utils';\nimport type {\n  MicroStoreActions,\n  ReactMicroStore,\n  ReactMicroStoreSelector,\n  ReuseMicroStoreResult,\n} from './types';\n\n/**\n * Reuses a tools `useMicroStore` function inside React rendering.\n *\n * `createMicroStore` from `@pastweb/tools` returns a framework-agnostic\n * `useMicroStore` function. `reuseMicroStore` receives that function, calls it\n * with the optional selector, and subscribes React to the selected state so the\n * component re-renders after store actions mutate reactive state.\n *\n * @typeParam S - Micro-store state shape.\n * @typeParam A - Micro-store action shape.\n * @typeParam T - Selected state value when a selector is provided.\n * @param store - `useMicroStore` function returned by `createMicroStore` from `@pastweb/tools`.\n * @param selector - Optional selector passed to the tools `useMicroStore`.\n * @returns Full or selected micro-store state plus the original actions.\n *\n * @example\n * ```tsx\n * import { createMicroStore } from '@pastweb/tools';\n * import { reuseMicroStore } from '@pastweb/react';\n *\n * const settingsStore = createMicroStore('settings', () => ({\n *   state: {\n *     user: {\n *       name: 'Ada',\n *       preferences: {\n *         theme: 'light',\n *       },\n *     },\n *   },\n *   actions: {\n *     rename(name: string) {\n *       this.state.user.name = name;\n *     },\n *     useDarkTheme() {\n *       this.state.user.preferences.theme = 'dark';\n *     },\n *   },\n * }));\n *\n * function SettingsPanel() {\n *   const settings = reuseMicroStore(settingsStore);\n *\n *   return (\n *     <button onClick={settings.useDarkTheme}>\n *       {settings.state.user.name}: {settings.state.user.preferences.theme}\n *     </button>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * function ThemeButton() {\n *   const theme = reuseMicroStore(\n *     settingsStore,\n *     state => state.user.preferences.theme,\n *   );\n *\n *   return <button onClick={theme.useDarkTheme}>{theme.state}</button>;\n * }\n * ```\n */\nexport function reuseMicroStore<\n  S extends Record<string, any>,\n  A extends MicroStoreActions,\n  T = never,\n>(\n  store: ReactMicroStore<S, A>,\n  selector?: ReactMicroStoreSelector<T, S>,\n): ReuseMicroStoreResult<S, A, T> {\n  const forceUpdate = useForceUpdate();\n  const storeRef = useRef(store);\n  const selectorRef = useRef<typeof selector>(selector);\n\n  storeRef.current = store;\n  selectorRef.current = selector;\n\n  useEffect(() => {\n    effect(\n      forceUpdate,\n      () => getStoreSnapshot(storeRef.current, selectorRef.current),\n    );\n  }, [forceUpdate]);\n\n  return (selector ? store(selector) : store()) as ReuseMicroStoreResult<S, A, T>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAgB,gBAKd,OACA,UACgC;CAChC,MAAM,cAAcA,sCAAAA,eAAe;CACnC,MAAM,YAAA,GAAA,MAAA,OAAA,CAAkB,KAAK;CAC7B,MAAM,eAAA,GAAA,MAAA,OAAA,CAAsC,QAAQ;CAEpD,SAAS,UAAU;CACnB,YAAY,UAAU;CAEtB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,CAAA,GAAA,0BAAA,OAAA,CACE,mBACMC,+CAAAA,iBAAiB,SAAS,SAAS,YAAY,OAAO,CAC9D;CACF,GAAG,CAAC,WAAW,CAAC;CAEhB,OAAQ,WAAW,MAAM,QAAQ,IAAI,MAAM;AAC7C"}