@siberiacancode/reactuse 0.2.1 → 0.2.2

package/dist/cjs/helpers/createContext/createContext.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),n=require("react"),d=(s=void 0,o={})=>{const t=n.createContext({value:s,set:()=>{}});t.displayName=o.name;function c(r){const e=n.use(t);if(!e&&o.strict)throw new Error(`Context hook ${o.name} must be used inside a Provider`);return r?r(e.value):e}return{useSelect:c,instance:t,Provider:({children:r,initialValue:e})=>{const[u,i]=n.useState(e??s),a=n.useMemo(()=>({value:u,set:i}),[u]);return v.jsx(t,{value:a,children:r})}}};exports.createContext=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),n=require("react"),x=(s=void 0,o={})=>{const t=n.createContext({value:s,set:()=>{}});t.displayName=o.name;function c(r){const e=n.useContext(t);if(!e&&o.strict)throw new Error(`Context hook ${o.name} must be used inside a Provider`);return r?r(e.value):e}return{useSelect:c,instance:t,Provider:({children:r,initialValue:e})=>{const[u,i]=n.useState(e??s),a=n.useMemo(()=>({value:u,set:i}),[u]);return v.jsx(t,{value:a,children:r})}}};exports.createContext=x;
 //# sourceMappingURL=createContext.cjs.map

package/dist/cjs/helpers/createContext/createContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createContext.cjs","sources":["../../../../src/helpers/createContext/createContext.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\n\nimport { createContext as createReactContext, use, useMemo, useState } from 'react';\n\n/** The create context options type */\nexport interface CreateContextOptions {\n  /** Display name for the context (useful for debugging) */\n  name?: string;\n  /** Whether to throw an error if context is used outside of Provider */\n  strict?: boolean;\n}\n\n/** The context value type */\nexport interface ContextValue<Value> {\n  /** The context value */\n  value: Value | undefined;\n  /** The context set function */\n  set: (value: Value) => void;\n}\n\n/** The provider props type */\nexport interface ProviderProps<Value> {\n  /** The children */\n  children: ReactNode;\n  /** The initial value */\n  initialValue?: Value;\n}\n\n/** The create context return type */\nexport interface CreateContextReturn<Value> {\n  /** The context instance */\n  instance: React.Context<ContextValue<Value>>;\n  /** The provider component */\n  Provider: (props: ProviderProps<Value>) => JSX.Element;\n  /** The selector hook */\n  useSelect: {\n    <Selected>(selector: (value: Value) => Selected): Selected;\n    (): ContextValue<Value>;\n  };\n}\n\n/**\n * @name createContext\n * @description - Creates a typed context with additional utilities\n * @category Helpers\n *\n * @template Value - The type of value that will be stored in the context\n * @param {Value | undefined} [defaultValue] - Default value for the context\n * @param {CreateContextOptions<Value>} [options] - Additional options for context creation\n * @returns {CreateContextReturn<Value>} Object containing context utilities and components\n *\n * @example\n * const { useSelect, instance, Provider } = createContext<number>(0);\n */\nexport const createContext = <Value,>(\n  defaultValue: Value | undefined = undefined,\n  options: CreateContextOptions = {}\n): CreateContextReturn<Value> => {\n  const Context = createReactContext<{\n    value: Value | undefined;\n    set: (value: Value) => void;\n  }>({\n    value: defaultValue,\n    set: () => {}\n  });\n\n  Context.displayName = options.name;\n\n  function useSelect(): ContextValue<Value>;\n  function useSelect<Selected>(selector: (value: Value) => Selected): Selected;\n  function useSelect<Selected>(selector?: (value: Value) => Selected) {\n    const context = use(Context);\n\n    if (!context && options.strict) {\n      throw new Error(`Context hook ${options.name} must be used inside a Provider`);\n    }\n\n    if (!selector) {\n      return context;\n    }\n\n    return selector(context.value as Value);\n  }\n\n  const Provider = ({ children, initialValue }: ProviderProps<Value>) => {\n    const [profile, setProfile] = useState<Value | undefined>(initialValue ?? defaultValue);\n\n    const value = useMemo(\n      () => ({\n        value: profile,\n        set: setProfile\n      }),\n      [profile]\n    );\n\n    return <Context value={value}>{children}</Context>;\n  };\n\n  return {\n    useSelect,\n    instance: Context,\n    Provider\n  } as const;\n};\n"],"names":["createContext","defaultValue","options","Context","createReactContext","useSelect","selector","context","use","children","initialValue","profile","setProfile","useState","value","useMemo","jsx"],"mappings":"wIAsDaA,EAAgB,CAC3BC,EAAkC,OAClCC,EAAgC,CAAA,IACD,CAC/B,MAAMC,EAAUC,EAAAA,cAGb,CACD,MAAOH,EACP,IAAK,IAAM,CAAA,CAAC,CACb,EAEDE,EAAQ,YAAcD,EAAQ,KAI9B,SAASG,EAAoBC,EAAuC,CAC5D,MAAAC,EAAUC,MAAIL,CAAO,EAEvB,GAAA,CAACI,GAAWL,EAAQ,OACtB,MAAM,IAAI,MAAM,gBAAgBA,EAAQ,IAAI,iCAAiC,EAG/E,OAAKI,EAIEA,EAASC,EAAQ,KAAc,EAH7BA,CAG6B,CAiBjC,MAAA,CACL,UAAAF,EACA,SAAUF,EACV,SAjBe,CAAC,CAAE,SAAAM,EAAU,aAAAC,KAAyC,CACrE,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAA4BH,GAAgBT,CAAY,EAEhFa,EAAQC,EAAA,QACZ,KAAO,CACL,MAAOJ,EACP,IAAKC,CAAA,GAEP,CAACD,CAAO,CACV,EAEO,OAAAK,EAAA,IAACb,EAAQ,CAAA,MAAAW,EAAe,SAAAL,CAAS,CAAA,CAC1C,CAMA,CACF"}
+{"version":3,"file":"createContext.cjs","sources":["../../../../src/helpers/createContext/createContext.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\n\nimport { createContext as createReactContext, useContext, useMemo, useState } from 'react';\n\n/** The create context options type */\nexport interface CreateContextOptions {\n  /** Display name for the context (useful for debugging) */\n  name?: string;\n  /** Whether to throw an error if context is used outside of Provider */\n  strict?: boolean;\n}\n\n/** The context value type */\nexport interface ContextValue<Value> {\n  /** The context value */\n  value: Value | undefined;\n  /** The context set function */\n  set: (value: Value) => void;\n}\n\n/** The provider props type */\nexport interface ProviderProps<Value> {\n  /** The children */\n  children: ReactNode;\n  /** The initial value */\n  initialValue?: Value;\n}\n\n/** The create context return type */\nexport interface CreateContextReturn<Value> {\n  /** The context instance */\n  instance: React.Context<ContextValue<Value>>;\n  /** The provider component */\n  Provider: (props: ProviderProps<Value>) => JSX.Element;\n  /** The selector hook */\n  useSelect: {\n    <Selected>(selector: (value: Value) => Selected): Selected;\n    (): ContextValue<Value>;\n  };\n}\n\n/**\n * @name createContext\n * @description - Creates a typed context with additional utilities\n * @category Helpers\n *\n * @template Value - The type of value that will be stored in the context\n * @param {Value | undefined} [defaultValue] - Default value for the context\n * @param {CreateContextOptions<Value>} [options] - Additional options for context creation\n * @returns {CreateContextReturn<Value>} Object containing context utilities and components\n *\n * @example\n * const { useSelect, instance, Provider } = createContext<number>(0);\n */\nexport const createContext = <Value,>(\n  defaultValue: Value | undefined = undefined,\n  options: CreateContextOptions = {}\n): CreateContextReturn<Value> => {\n  const Context = createReactContext<{\n    value: Value | undefined;\n    set: (value: Value) => void;\n  }>({\n    value: defaultValue,\n    set: () => {}\n  });\n\n  Context.displayName = options.name;\n\n  function useSelect(): ContextValue<Value>;\n  function useSelect<Selected>(selector: (value: Value) => Selected): Selected;\n  function useSelect<Selected>(selector?: (value: Value) => Selected) {\n    const context = useContext(Context);\n\n    if (!context && options.strict) {\n      throw new Error(`Context hook ${options.name} must be used inside a Provider`);\n    }\n\n    if (!selector) {\n      return context;\n    }\n\n    return selector(context.value as Value);\n  }\n\n  const Provider = ({ children, initialValue }: ProviderProps<Value>) => {\n    const [profile, setProfile] = useState<Value | undefined>(initialValue ?? defaultValue);\n\n    const value = useMemo(\n      () => ({\n        value: profile,\n        set: setProfile\n      }),\n      [profile]\n    );\n\n    return <Context value={value}>{children}</Context>;\n  };\n\n  return {\n    useSelect,\n    instance: Context,\n    Provider\n  } as const;\n};\n"],"names":["createContext","defaultValue","options","Context","createReactContext","useSelect","selector","context","useContext","children","initialValue","profile","setProfile","useState","value","useMemo","jsx"],"mappings":"wIAsDaA,EAAgB,CAC3BC,EAAkC,OAClCC,EAAgC,CAAA,IACD,CAC/B,MAAMC,EAAUC,EAAAA,cAGb,CACD,MAAOH,EACP,IAAK,IAAM,CAAA,CAAC,CACb,EAEDE,EAAQ,YAAcD,EAAQ,KAI9B,SAASG,EAAoBC,EAAuC,CAC5D,MAAAC,EAAUC,aAAWL,CAAO,EAE9B,GAAA,CAACI,GAAWL,EAAQ,OACtB,MAAM,IAAI,MAAM,gBAAgBA,EAAQ,IAAI,iCAAiC,EAG/E,OAAKI,EAIEA,EAASC,EAAQ,KAAc,EAH7BA,CAG6B,CAiBjC,MAAA,CACL,UAAAF,EACA,SAAUF,EACV,SAjBe,CAAC,CAAE,SAAAM,EAAU,aAAAC,KAAyC,CACrE,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAA4BH,GAAgBT,CAAY,EAEhFa,EAAQC,EAAA,QACZ,KAAO,CACL,MAAOJ,EACP,IAAKC,CAAA,GAEP,CAACD,CAAO,CACV,EAEO,OAAAK,EAAA,IAACb,EAAQ,CAAA,MAAAW,EAAe,SAAAL,CAAS,CAAA,CAC1C,CAMA,CACF"}

package/dist/cjs/helpers/createReactiveContext/createReactiveContext.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),v=require("../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),d=require("../../hooks/useEvent/useEvent.cjs"),f=s=>e=>{const t=r.useRef(e.value),c=r.useMemo(()=>({value:t,listeners:new Set}),[]);return v.useIsomorphicLayoutEffect(()=>{Object.is(t.current,e.value)||(t.current=e.value,r.startTransition(()=>{c.listeners.forEach(u=>{u(t.current)})}))},[e.value]),r.createElement(s,{value:c},e.children)},m=(s,n,e={})=>{const t=r.use(s);if(!t&&e.strict)throw new Error(`Context hook ${e.name} must be used inside a Provider`);const[c,u]=r.useState({selected:n(t.value.current),value:t.value.current}),o=d.useEvent(a=>{u(i=>{if(Object.is(i.value,a))return i;const l=n(a);return Object.is(i.selected,l)?i:{value:a,selected:l}})});return v.useIsomorphicLayoutEffect(()=>(t.listeners.add(o),()=>{t.listeners.delete(o)}),[t.listeners]),c.selected},h=(s=void 0,n={})=>{const e=r.createContext({value:{current:s},listeners:new Set}),t=f(e.Provider);e.displayName=n.name;function c(u){return m(e,u??(o=>o),n)}return{instance:e,Provider:t,useSelector:c}};exports.createReactiveContext=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),v=require("../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),d=require("../../hooks/useEvent/useEvent.cjs"),f=s=>e=>{const t=r.useRef(e.value),c=r.useMemo(()=>({value:t,listeners:new Set}),[]);return v.useIsomorphicLayoutEffect(()=>{Object.is(t.current,e.value)||(t.current=e.value,r.startTransition(()=>{c.listeners.forEach(u=>{u(t.current)})}))},[e.value]),r.createElement(s,{value:c},e.children)},m=(s,n,e={})=>{const t=r.useContext(s);if(!t&&e.strict)throw new Error(`Context hook ${e.name} must be used inside a Provider`);const[c,u]=r.useState({selected:n(t.value.current),value:t.value.current}),o=d.useEvent(a=>{u(i=>{if(Object.is(i.value,a))return i;const l=n(a);return Object.is(i.selected,l)?i:{value:a,selected:l}})});return v.useIsomorphicLayoutEffect(()=>(t.listeners.add(o),()=>{t.listeners.delete(o)}),[t.listeners]),c.selected},x=(s=void 0,n={})=>{const e=r.createContext({value:{current:s},listeners:new Set}),t=f(e.Provider);e.displayName=n.name;function c(u){return m(e,u??(o=>o),n)}return{instance:e,Provider:t,useSelector:c}};exports.createReactiveContext=x;
 //# sourceMappingURL=createReactiveContext.cjs.map

package/dist/cjs/helpers/createReactiveContext/createReactiveContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createReactiveContext.cjs","sources":["../../../../src/helpers/createReactiveContext/createReactiveContext.ts"],"sourcesContent":["import type { Context, FC, Provider, ProviderProps, RefObject } from 'react';\n\nimport {\n  createContext,\n  createElement,\n  startTransition,\n  use,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport { useEvent, useIsomorphicLayoutEffect } from '@/hooks';\n\n/** The create reactive context options type */\nexport interface CreateReactiveContextOptions {\n  /** Display name for the context (useful for debugging) */\n  name?: string;\n  /** Whether to throw an error if context is used outside of Provider */\n  strict?: boolean;\n}\n\n/** The create reactive context return type */\nexport interface CreateReactiveContextReturn<Value> {\n  /** The context instance */\n  instance: Context<ReactiveContextValue<Value>>;\n  /** The Provider component for the context */\n  Provider: Provider<Value>;\n  /** A hook to select a part of the context state */\n  useSelector: <Selected>(selector?: (state: Value) => Selected) => Selected;\n}\n\ntype ContextListener<Value> = (value: Value) => void;\n\ninterface ReactiveContextValue<Value> {\n  /** The listeners for the context */\n  listeners: Set<ContextListener<Value>>;\n  /** The value for the context */\n  value: RefObject<Value>;\n}\n\nconst createProvider = <Value>(originalProvider: Provider<ReactiveContextValue<Value>>) => {\n  const Provider: FC<ProviderProps<Value>> = (props) => {\n    const valueRef = useRef(props.value);\n    const contextValue = useMemo<ReactiveContextValue<Value>>(\n      () => ({\n        value: valueRef,\n        listeners: new Set()\n      }),\n      []\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      if (!Object.is(valueRef.current, props.value)) {\n        valueRef.current = props.value;\n\n        startTransition(() => {\n          contextValue.listeners.forEach((listener) => {\n            listener(valueRef.current);\n          });\n        });\n      }\n    }, [props.value]);\n\n    return createElement(originalProvider, { value: contextValue }, props.children);\n  };\n\n  return Provider as unknown as Provider<ReactiveContextValue<Value>>;\n};\n\nconst createReactiveContextSelector = <Value, Selected>(\n  Context: Context<ReactiveContextValue<Value>>,\n  selector: (state: Value) => Selected,\n  options: CreateReactiveContextOptions = {}\n) => {\n  const context = use(Context);\n\n  if (!context && options.strict) {\n    throw new Error(`Context hook ${options.name} must be used inside a Provider`);\n  }\n\n  const [value, setValue] = useState({\n    selected: selector(context.value.current),\n    value: context.value.current\n  });\n\n  const dispatch = useEvent((newValue: Value) => {\n    setValue((prevValue) => {\n      if (Object.is(prevValue.value, newValue)) return prevValue;\n\n      const newSelected = selector(newValue);\n      if (Object.is(prevValue.selected, newSelected)) return prevValue;\n\n      return { value: newValue, selected: newSelected };\n    });\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    context.listeners.add(dispatch);\n    return () => {\n      context.listeners.delete(dispatch);\n    };\n  }, [context.listeners]);\n\n  return value.selected;\n};\n\n/**\n * @name createReactiveContext\n * @description - Creates a typed context selector with optimized updates for state selection\n * @category Helpers\n *\n * @template Value - The type of value that will be stored in the context\n * @param {Value | undefined} [defaultValue] - Default value for the context\n * @param {CreateReactiveContextOptions<Value>} [options] - Additional options for context creation\n * @returns {CreateReactiveContextReturn<Value>} Object containing context utilities and components\n *\n * @example\n * const { Provider, useSelector, instance } = createReactiveContext<number>(0);\n */\nexport const createReactiveContext = <Value extends Record<string, any>>(\n  defaultValue: Value | undefined = undefined,\n  options: CreateReactiveContextOptions = {}\n) => {\n  const Context = createContext<ReactiveContextValue<Value>>({\n    value: { current: defaultValue as Value },\n    listeners: new Set()\n  });\n\n  const Provider = createProvider(Context.Provider) as unknown as Provider<Value>;\n\n  Context.displayName = options.name;\n\n  function useSelector(): Value;\n  function useSelector<SelectedValue>(selector: (state: Value) => SelectedValue): SelectedValue;\n  function useSelector<SelectedValue>(selector?: (state: Value) => SelectedValue) {\n    return createReactiveContextSelector(\n      Context as unknown as Context<ReactiveContextValue<Value>>,\n      selector ?? ((state) => state as unknown as SelectedValue),\n      options\n    );\n  }\n\n  return { instance: Context, Provider, useSelector };\n};\n"],"names":["createProvider","originalProvider","props","valueRef","useRef","contextValue","useMemo","useIsomorphicLayoutEffect","startTransition","listener","createElement","createReactiveContextSelector","Context","selector","options","context","use","value","setValue","useState","dispatch","useEvent","newValue","prevValue","newSelected","createReactiveContext","defaultValue","createContext","Provider","useSelector","state"],"mappings":"yOAyCMA,EAAyBC,GACeC,GAAU,CAC9C,MAAAC,EAAWC,EAAAA,OAAOF,EAAM,KAAK,EAC7BG,EAAeC,EAAA,QACnB,KAAO,CACL,MAAOH,EACP,cAAe,GAAI,GAErB,CAAA,CACF,EAEAI,OAAAA,EAAAA,0BAA0B,IAAM,CACzB,OAAO,GAAGJ,EAAS,QAASD,EAAM,KAAK,IAC1CC,EAAS,QAAUD,EAAM,MAEzBM,EAAAA,gBAAgB,IAAM,CACPH,EAAA,UAAU,QAASI,GAAa,CAC3CA,EAASN,EAAS,OAAO,CAAA,CAC1B,CAAA,CACF,EACH,EACC,CAACD,EAAM,KAAK,CAAC,EAETQ,EAAAA,cAAcT,EAAkB,CAAE,MAAOI,CAAa,EAAGH,EAAM,QAAQ,CAChF,EAKIS,EAAgC,CACpCC,EACAC,EACAC,EAAwC,CAAA,IACrC,CACG,MAAAC,EAAUC,MAAIJ,CAAO,EAEvB,GAAA,CAACG,GAAWD,EAAQ,OACtB,MAAM,IAAI,MAAM,gBAAgBA,EAAQ,IAAI,iCAAiC,EAG/E,KAAM,CAACG,EAAOC,CAAQ,EAAIC,WAAS,CACjC,SAAUN,EAASE,EAAQ,MAAM,OAAO,EACxC,MAAOA,EAAQ,MAAM,OAAA,CACtB,EAEKK,EAAWC,WAAUC,GAAoB,CAC7CJ,EAAUK,GAAc,CACtB,GAAI,OAAO,GAAGA,EAAU,MAAOD,CAAQ,EAAU,OAAAC,EAE3C,MAAAC,EAAcX,EAASS,CAAQ,EACrC,OAAI,OAAO,GAAGC,EAAU,SAAUC,CAAW,EAAUD,EAEhD,CAAE,MAAOD,EAAU,SAAUE,CAAY,CAAA,CACjD,CAAA,CACF,EAEDjB,OAAAA,EAAAA,0BAA0B,KAChBQ,EAAA,UAAU,IAAIK,CAAQ,EACvB,IAAM,CACHL,EAAA,UAAU,OAAOK,CAAQ,CACnC,GACC,CAACL,EAAQ,SAAS,CAAC,EAEfE,EAAM,QACf,EAeaQ,EAAwB,CACnCC,EAAkC,OAClCZ,EAAwC,CAAA,IACrC,CACH,MAAMF,EAAUe,EAAAA,cAA2C,CACzD,MAAO,CAAE,QAASD,CAAsB,EACxC,cAAe,GAAI,CACpB,EAEKE,EAAW5B,EAAeY,EAAQ,QAAQ,EAEhDA,EAAQ,YAAcE,EAAQ,KAI9B,SAASe,EAA2BhB,EAA4C,CACvE,OAAAF,EACLC,EACAC,IAAciB,GAAUA,GACxBhB,CACF,CAAA,CAGF,MAAO,CAAE,SAAUF,EAAS,SAAAgB,EAAU,YAAAC,CAAY,CACpD"}
+{"version":3,"file":"createReactiveContext.cjs","sources":["../../../../src/helpers/createReactiveContext/createReactiveContext.ts"],"sourcesContent":["import type { Context, FC, Provider, ProviderProps, RefObject } from 'react';\n\nimport {\n  createContext,\n  createElement,\n  startTransition,\n  useContext,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport { useEvent, useIsomorphicLayoutEffect } from '@/hooks';\n\n/** The create reactive context options type */\nexport interface CreateReactiveContextOptions {\n  /** Display name for the context (useful for debugging) */\n  name?: string;\n  /** Whether to throw an error if context is used outside of Provider */\n  strict?: boolean;\n}\n\n/** The create reactive context return type */\nexport interface CreateReactiveContextReturn<Value> {\n  /** The context instance */\n  instance: Context<ReactiveContextValue<Value>>;\n  /** The Provider component for the context */\n  Provider: Provider<Value>;\n  /** A hook to select a part of the context state */\n  useSelector: <Selected>(selector?: (state: Value) => Selected) => Selected;\n}\n\ntype ContextListener<Value> = (value: Value) => void;\n\ninterface ReactiveContextValue<Value> {\n  /** The listeners for the context */\n  listeners: Set<ContextListener<Value>>;\n  /** The value for the context */\n  value: RefObject<Value>;\n}\n\nconst createProvider = <Value>(originalProvider: Provider<ReactiveContextValue<Value>>) => {\n  const Provider: FC<ProviderProps<Value>> = (props) => {\n    const valueRef = useRef(props.value);\n    const contextValue = useMemo<ReactiveContextValue<Value>>(\n      () => ({\n        value: valueRef,\n        listeners: new Set()\n      }),\n      []\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      if (!Object.is(valueRef.current, props.value)) {\n        valueRef.current = props.value;\n\n        startTransition(() => {\n          contextValue.listeners.forEach((listener) => {\n            listener(valueRef.current);\n          });\n        });\n      }\n    }, [props.value]);\n\n    return createElement(originalProvider, { value: contextValue }, props.children);\n  };\n\n  return Provider as unknown as Provider<ReactiveContextValue<Value>>;\n};\n\nconst createReactiveContextSelector = <Value, Selected>(\n  Context: Context<ReactiveContextValue<Value>>,\n  selector: (state: Value) => Selected,\n  options: CreateReactiveContextOptions = {}\n) => {\n  const context = useContext(Context);\n\n  if (!context && options.strict) {\n    throw new Error(`Context hook ${options.name} must be used inside a Provider`);\n  }\n\n  const [value, setValue] = useState({\n    selected: selector(context.value.current),\n    value: context.value.current\n  });\n\n  const dispatch = useEvent((newValue: Value) => {\n    setValue((prevValue) => {\n      if (Object.is(prevValue.value, newValue)) return prevValue;\n\n      const newSelected = selector(newValue);\n      if (Object.is(prevValue.selected, newSelected)) return prevValue;\n\n      return { value: newValue, selected: newSelected };\n    });\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    context.listeners.add(dispatch);\n    return () => {\n      context.listeners.delete(dispatch);\n    };\n  }, [context.listeners]);\n\n  return value.selected;\n};\n\n/**\n * @name createReactiveContext\n * @description - Creates a typed context selector with optimized updates for state selection\n * @category Helpers\n *\n * @warning - For complex interfaces, we strongly recommend using state management solutions outside of React like createStore, reatom, effector, or zustand instead of context\n *\n * @template Value - The type of value that will be stored in the context\n * @param {Value | undefined} [defaultValue] - Default value for the context\n * @param {CreateReactiveContextOptions<Value>} [options] - Additional options for context creation\n * @returns {CreateReactiveContextReturn<Value>} Object containing context utilities and components\n *\n * @example\n * const { Provider, useSelector, instance } = createReactiveContext<number>(0);\n */\nexport const createReactiveContext = <Value extends Record<string, any>>(\n  defaultValue: Value | undefined = undefined,\n  options: CreateReactiveContextOptions = {}\n) => {\n  const Context = createContext<ReactiveContextValue<Value>>({\n    value: { current: defaultValue as Value },\n    listeners: new Set()\n  });\n\n  const Provider = createProvider(Context.Provider) as unknown as Provider<Value>;\n\n  Context.displayName = options.name;\n\n  function useSelector(): Value;\n  function useSelector<SelectedValue>(selector: (state: Value) => SelectedValue): SelectedValue;\n  function useSelector<SelectedValue>(selector?: (state: Value) => SelectedValue) {\n    return createReactiveContextSelector(\n      Context as unknown as Context<ReactiveContextValue<Value>>,\n      selector ?? ((state) => state as unknown as SelectedValue),\n      options\n    );\n  }\n\n  return { instance: Context, Provider, useSelector };\n};\n"],"names":["createProvider","originalProvider","props","valueRef","useRef","contextValue","useMemo","useIsomorphicLayoutEffect","startTransition","listener","createElement","createReactiveContextSelector","Context","selector","options","context","useContext","value","setValue","useState","dispatch","useEvent","newValue","prevValue","newSelected","createReactiveContext","defaultValue","createContext","Provider","useSelector","state"],"mappings":"yOAyCMA,EAAyBC,GACeC,GAAU,CAC9C,MAAAC,EAAWC,EAAAA,OAAOF,EAAM,KAAK,EAC7BG,EAAeC,EAAA,QACnB,KAAO,CACL,MAAOH,EACP,cAAe,GAAI,GAErB,CAAA,CACF,EAEAI,OAAAA,EAAAA,0BAA0B,IAAM,CACzB,OAAO,GAAGJ,EAAS,QAASD,EAAM,KAAK,IAC1CC,EAAS,QAAUD,EAAM,MAEzBM,EAAAA,gBAAgB,IAAM,CACPH,EAAA,UAAU,QAASI,GAAa,CAC3CA,EAASN,EAAS,OAAO,CAAA,CAC1B,CAAA,CACF,EACH,EACC,CAACD,EAAM,KAAK,CAAC,EAETQ,EAAAA,cAAcT,EAAkB,CAAE,MAAOI,CAAa,EAAGH,EAAM,QAAQ,CAChF,EAKIS,EAAgC,CACpCC,EACAC,EACAC,EAAwC,CAAA,IACrC,CACG,MAAAC,EAAUC,aAAWJ,CAAO,EAE9B,GAAA,CAACG,GAAWD,EAAQ,OACtB,MAAM,IAAI,MAAM,gBAAgBA,EAAQ,IAAI,iCAAiC,EAG/E,KAAM,CAACG,EAAOC,CAAQ,EAAIC,WAAS,CACjC,SAAUN,EAASE,EAAQ,MAAM,OAAO,EACxC,MAAOA,EAAQ,MAAM,OAAA,CACtB,EAEKK,EAAWC,WAAUC,GAAoB,CAC7CJ,EAAUK,GAAc,CACtB,GAAI,OAAO,GAAGA,EAAU,MAAOD,CAAQ,EAAU,OAAAC,EAE3C,MAAAC,EAAcX,EAASS,CAAQ,EACrC,OAAI,OAAO,GAAGC,EAAU,SAAUC,CAAW,EAAUD,EAEhD,CAAE,MAAOD,EAAU,SAAUE,CAAY,CAAA,CACjD,CAAA,CACF,EAEDjB,OAAAA,EAAAA,0BAA0B,KAChBQ,EAAA,UAAU,IAAIK,CAAQ,EACvB,IAAM,CACHL,EAAA,UAAU,OAAOK,CAAQ,CACnC,GACC,CAACL,EAAQ,SAAS,CAAC,EAEfE,EAAM,QACf,EAiBaQ,EAAwB,CACnCC,EAAkC,OAClCZ,EAAwC,CAAA,IACrC,CACH,MAAMF,EAAUe,EAAAA,cAA2C,CACzD,MAAO,CAAE,QAASD,CAAsB,EACxC,cAAe,GAAI,CACpB,EAEKE,EAAW5B,EAAeY,EAAQ,QAAQ,EAEhDA,EAAQ,YAAcE,EAAQ,KAI9B,SAASe,EAA2BhB,EAA4C,CACvE,OAAAF,EACLC,EACAC,IAAciB,GAAUA,GACxBhB,CACF,CAAA,CAGF,MAAO,CAAE,SAAUF,EAAS,SAAAgB,EAAU,YAAAC,CAAY,CACpD"}

package/dist/esm/helpers/createContext/createContext.mjs

@@ -1,5 +1,5 @@
 import { jsx as u } from "react/jsx-runtime";
-import { createContext as m, use as v, useState as x, useMemo as d } from "react";
+import { createContext as m, useContext as x, useState as v, useMemo as d } from "react";
 const P = (n = void 0, o = {}) => {
   const t = m({
     value: n,
@@ -8,7 +8,7 @@ const P = (n = void 0, o = {}) => {
   });
   t.displayName = o.name;
   function i(r) {
-    const e = v(t);
+    const e = x(t);
     if (!e && o.strict)
       throw new Error(`Context hook ${o.name} must be used inside a Provider`);
     return r ? r(e.value) : e;
@@ -17,7 +17,7 @@ const P = (n = void 0, o = {}) => {
     useSelect: i,
     instance: t,
     Provider: ({ children: r, initialValue: e }) => {
-      const [s, a] = x(e ?? n), c = d(
+      const [s, a] = v(e ?? n), c = d(
         () => ({
           value: s,
           set: a

package/dist/esm/helpers/createContext/createContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"createContext.mjs","sources":["../../../../src/helpers/createContext/createContext.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\n\nimport { createContext as createReactContext, use, useMemo, useState } from 'react';\n\n/** The create context options type */\nexport interface CreateContextOptions {\n  /** Display name for the context (useful for debugging) */\n  name?: string;\n  /** Whether to throw an error if context is used outside of Provider */\n  strict?: boolean;\n}\n\n/** The context value type */\nexport interface ContextValue<Value> {\n  /** The context value */\n  value: Value | undefined;\n  /** The context set function */\n  set: (value: Value) => void;\n}\n\n/** The provider props type */\nexport interface ProviderProps<Value> {\n  /** The children */\n  children: ReactNode;\n  /** The initial value */\n  initialValue?: Value;\n}\n\n/** The create context return type */\nexport interface CreateContextReturn<Value> {\n  /** The context instance */\n  instance: React.Context<ContextValue<Value>>;\n  /** The provider component */\n  Provider: (props: ProviderProps<Value>) => JSX.Element;\n  /** The selector hook */\n  useSelect: {\n    <Selected>(selector: (value: Value) => Selected): Selected;\n    (): ContextValue<Value>;\n  };\n}\n\n/**\n * @name createContext\n * @description - Creates a typed context with additional utilities\n * @category Helpers\n *\n * @template Value - The type of value that will be stored in the context\n * @param {Value | undefined} [defaultValue] - Default value for the context\n * @param {CreateContextOptions<Value>} [options] - Additional options for context creation\n * @returns {CreateContextReturn<Value>} Object containing context utilities and components\n *\n * @example\n * const { useSelect, instance, Provider } = createContext<number>(0);\n */\nexport const createContext = <Value,>(\n  defaultValue: Value | undefined = undefined,\n  options: CreateContextOptions = {}\n): CreateContextReturn<Value> => {\n  const Context = createReactContext<{\n    value: Value | undefined;\n    set: (value: Value) => void;\n  }>({\n    value: defaultValue,\n    set: () => {}\n  });\n\n  Context.displayName = options.name;\n\n  function useSelect(): ContextValue<Value>;\n  function useSelect<Selected>(selector: (value: Value) => Selected): Selected;\n  function useSelect<Selected>(selector?: (value: Value) => Selected) {\n    const context = use(Context);\n\n    if (!context && options.strict) {\n      throw new Error(`Context hook ${options.name} must be used inside a Provider`);\n    }\n\n    if (!selector) {\n      return context;\n    }\n\n    return selector(context.value as Value);\n  }\n\n  const Provider = ({ children, initialValue }: ProviderProps<Value>) => {\n    const [profile, setProfile] = useState<Value | undefined>(initialValue ?? defaultValue);\n\n    const value = useMemo(\n      () => ({\n        value: profile,\n        set: setProfile\n      }),\n      [profile]\n    );\n\n    return <Context value={value}>{children}</Context>;\n  };\n\n  return {\n    useSelect,\n    instance: Context,\n    Provider\n  } as const;\n};\n"],"names":["createContext","defaultValue","options","Context","createReactContext","useSelect","selector","context","use","children","initialValue","profile","setProfile","useState","value","useMemo","jsx"],"mappings":";;AAsDO,MAAMA,IAAgB,CAC3BC,IAAkC,QAClCC,IAAgC,CAAA,MACD;AAC/B,QAAMC,IAAUC,EAGb;AAAA,IACD,OAAOH;AAAA,IACP,KAAK,MAAM;AAAA,IAAA;AAAA,EAAC,CACb;AAED,EAAAE,EAAQ,cAAcD,EAAQ;AAI9B,WAASG,EAAoBC,GAAuC;AAC5D,UAAAC,IAAUC,EAAIL,CAAO;AAEvB,QAAA,CAACI,KAAWL,EAAQ;AACtB,YAAM,IAAI,MAAM,gBAAgBA,EAAQ,IAAI,iCAAiC;AAG/E,WAAKI,IAIEA,EAASC,EAAQ,KAAc,IAH7BA;AAAA,EAG6B;AAiBjC,SAAA;AAAA,IACL,WAAAF;AAAA,IACA,UAAUF;AAAA,IACV,UAjBe,CAAC,EAAE,UAAAM,GAAU,cAAAC,QAAyC;AACrE,YAAM,CAACC,GAASC,CAAU,IAAIC,EAA4BH,KAAgBT,CAAY,GAEhFa,IAAQC;AAAA,QACZ,OAAO;AAAA,UACL,OAAOJ;AAAA,UACP,KAAKC;AAAA,QAAA;AAAA,QAEP,CAACD,CAAO;AAAA,MACV;AAEO,aAAA,gBAAAK,EAACb,GAAQ,EAAA,OAAAW,GAAe,UAAAL,EAAS,CAAA;AAAA,IAC1C;AAAA,EAMA;AACF;"}
+{"version":3,"file":"createContext.mjs","sources":["../../../../src/helpers/createContext/createContext.tsx"],"sourcesContent":["import type { JSX, ReactNode } from 'react';\n\nimport { createContext as createReactContext, useContext, useMemo, useState } from 'react';\n\n/** The create context options type */\nexport interface CreateContextOptions {\n  /** Display name for the context (useful for debugging) */\n  name?: string;\n  /** Whether to throw an error if context is used outside of Provider */\n  strict?: boolean;\n}\n\n/** The context value type */\nexport interface ContextValue<Value> {\n  /** The context value */\n  value: Value | undefined;\n  /** The context set function */\n  set: (value: Value) => void;\n}\n\n/** The provider props type */\nexport interface ProviderProps<Value> {\n  /** The children */\n  children: ReactNode;\n  /** The initial value */\n  initialValue?: Value;\n}\n\n/** The create context return type */\nexport interface CreateContextReturn<Value> {\n  /** The context instance */\n  instance: React.Context<ContextValue<Value>>;\n  /** The provider component */\n  Provider: (props: ProviderProps<Value>) => JSX.Element;\n  /** The selector hook */\n  useSelect: {\n    <Selected>(selector: (value: Value) => Selected): Selected;\n    (): ContextValue<Value>;\n  };\n}\n\n/**\n * @name createContext\n * @description - Creates a typed context with additional utilities\n * @category Helpers\n *\n * @template Value - The type of value that will be stored in the context\n * @param {Value | undefined} [defaultValue] - Default value for the context\n * @param {CreateContextOptions<Value>} [options] - Additional options for context creation\n * @returns {CreateContextReturn<Value>} Object containing context utilities and components\n *\n * @example\n * const { useSelect, instance, Provider } = createContext<number>(0);\n */\nexport const createContext = <Value,>(\n  defaultValue: Value | undefined = undefined,\n  options: CreateContextOptions = {}\n): CreateContextReturn<Value> => {\n  const Context = createReactContext<{\n    value: Value | undefined;\n    set: (value: Value) => void;\n  }>({\n    value: defaultValue,\n    set: () => {}\n  });\n\n  Context.displayName = options.name;\n\n  function useSelect(): ContextValue<Value>;\n  function useSelect<Selected>(selector: (value: Value) => Selected): Selected;\n  function useSelect<Selected>(selector?: (value: Value) => Selected) {\n    const context = useContext(Context);\n\n    if (!context && options.strict) {\n      throw new Error(`Context hook ${options.name} must be used inside a Provider`);\n    }\n\n    if (!selector) {\n      return context;\n    }\n\n    return selector(context.value as Value);\n  }\n\n  const Provider = ({ children, initialValue }: ProviderProps<Value>) => {\n    const [profile, setProfile] = useState<Value | undefined>(initialValue ?? defaultValue);\n\n    const value = useMemo(\n      () => ({\n        value: profile,\n        set: setProfile\n      }),\n      [profile]\n    );\n\n    return <Context value={value}>{children}</Context>;\n  };\n\n  return {\n    useSelect,\n    instance: Context,\n    Provider\n  } as const;\n};\n"],"names":["createContext","defaultValue","options","Context","createReactContext","useSelect","selector","context","useContext","children","initialValue","profile","setProfile","useState","value","useMemo","jsx"],"mappings":";;AAsDO,MAAMA,IAAgB,CAC3BC,IAAkC,QAClCC,IAAgC,CAAA,MACD;AAC/B,QAAMC,IAAUC,EAGb;AAAA,IACD,OAAOH;AAAA,IACP,KAAK,MAAM;AAAA,IAAA;AAAA,EAAC,CACb;AAED,EAAAE,EAAQ,cAAcD,EAAQ;AAI9B,WAASG,EAAoBC,GAAuC;AAC5D,UAAAC,IAAUC,EAAWL,CAAO;AAE9B,QAAA,CAACI,KAAWL,EAAQ;AACtB,YAAM,IAAI,MAAM,gBAAgBA,EAAQ,IAAI,iCAAiC;AAG/E,WAAKI,IAIEA,EAASC,EAAQ,KAAc,IAH7BA;AAAA,EAG6B;AAiBjC,SAAA;AAAA,IACL,WAAAF;AAAA,IACA,UAAUF;AAAA,IACV,UAjBe,CAAC,EAAE,UAAAM,GAAU,cAAAC,QAAyC;AACrE,YAAM,CAACC,GAASC,CAAU,IAAIC,EAA4BH,KAAgBT,CAAY,GAEhFa,IAAQC;AAAA,QACZ,OAAO;AAAA,UACL,OAAOJ;AAAA,UACP,KAAKC;AAAA,QAAA;AAAA,QAEP,CAACD,CAAO;AAAA,MACV;AAEO,aAAA,gBAAAK,EAACb,GAAQ,EAAA,OAAAW,GAAe,UAAAL,EAAS,CAAA;AAAA,IAC1C;AAAA,EAMA;AACF;"}

package/dist/esm/helpers/createReactiveContext/createReactiveContext.mjs

@@ -1,7 +1,7 @@
-import { createContext as v, useRef as d, useMemo as f, startTransition as m, createElement as x, use as h, useState as P } from "react";
+import { createContext as v, useRef as d, useMemo as f, startTransition as m, createElement as x, useContext as h, useState as C } from "react";
 import { useIsomorphicLayoutEffect as l } from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import { useEvent as S } from "../../hooks/useEvent/useEvent.mjs";
-const C = (c) => (e) => {
+import { useEvent as P } from "../../hooks/useEvent/useEvent.mjs";
+const S = (c) => (e) => {
   const t = d(e.value), n = f(
     () => ({
       value: t,
@@ -20,10 +20,10 @@ const C = (c) => (e) => {
   const t = h(c);
   if (!t && e.strict)
     throw new Error(`Context hook ${e.name} must be used inside a Provider`);
-  const [n, s] = P({
+  const [n, s] = C({
     selected: r(t.value.current),
     value: t.value.current
-  }), o = S((i) => {
+  }), o = P((i) => {
     s((u) => {
       if (Object.is(u.value, i)) return u;
       const a = r(i);
@@ -37,7 +37,7 @@ const C = (c) => (e) => {
   const e = v({
     value: { current: c },
     listeners: /* @__PURE__ */ new Set()
-  }), t = C(e.Provider);
+  }), t = S(e.Provider);
   e.displayName = r.name;
   function n(s) {
     return E(

package/dist/esm/helpers/createReactiveContext/createReactiveContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"createReactiveContext.mjs","sources":["../../../../src/helpers/createReactiveContext/createReactiveContext.ts"],"sourcesContent":["import type { Context, FC, Provider, ProviderProps, RefObject } from 'react';\n\nimport {\n  createContext,\n  createElement,\n  startTransition,\n  use,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport { useEvent, useIsomorphicLayoutEffect } from '@/hooks';\n\n/** The create reactive context options type */\nexport interface CreateReactiveContextOptions {\n  /** Display name for the context (useful for debugging) */\n  name?: string;\n  /** Whether to throw an error if context is used outside of Provider */\n  strict?: boolean;\n}\n\n/** The create reactive context return type */\nexport interface CreateReactiveContextReturn<Value> {\n  /** The context instance */\n  instance: Context<ReactiveContextValue<Value>>;\n  /** The Provider component for the context */\n  Provider: Provider<Value>;\n  /** A hook to select a part of the context state */\n  useSelector: <Selected>(selector?: (state: Value) => Selected) => Selected;\n}\n\ntype ContextListener<Value> = (value: Value) => void;\n\ninterface ReactiveContextValue<Value> {\n  /** The listeners for the context */\n  listeners: Set<ContextListener<Value>>;\n  /** The value for the context */\n  value: RefObject<Value>;\n}\n\nconst createProvider = <Value>(originalProvider: Provider<ReactiveContextValue<Value>>) => {\n  const Provider: FC<ProviderProps<Value>> = (props) => {\n    const valueRef = useRef(props.value);\n    const contextValue = useMemo<ReactiveContextValue<Value>>(\n      () => ({\n        value: valueRef,\n        listeners: new Set()\n      }),\n      []\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      if (!Object.is(valueRef.current, props.value)) {\n        valueRef.current = props.value;\n\n        startTransition(() => {\n          contextValue.listeners.forEach((listener) => {\n            listener(valueRef.current);\n          });\n        });\n      }\n    }, [props.value]);\n\n    return createElement(originalProvider, { value: contextValue }, props.children);\n  };\n\n  return Provider as unknown as Provider<ReactiveContextValue<Value>>;\n};\n\nconst createReactiveContextSelector = <Value, Selected>(\n  Context: Context<ReactiveContextValue<Value>>,\n  selector: (state: Value) => Selected,\n  options: CreateReactiveContextOptions = {}\n) => {\n  const context = use(Context);\n\n  if (!context && options.strict) {\n    throw new Error(`Context hook ${options.name} must be used inside a Provider`);\n  }\n\n  const [value, setValue] = useState({\n    selected: selector(context.value.current),\n    value: context.value.current\n  });\n\n  const dispatch = useEvent((newValue: Value) => {\n    setValue((prevValue) => {\n      if (Object.is(prevValue.value, newValue)) return prevValue;\n\n      const newSelected = selector(newValue);\n      if (Object.is(prevValue.selected, newSelected)) return prevValue;\n\n      return { value: newValue, selected: newSelected };\n    });\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    context.listeners.add(dispatch);\n    return () => {\n      context.listeners.delete(dispatch);\n    };\n  }, [context.listeners]);\n\n  return value.selected;\n};\n\n/**\n * @name createReactiveContext\n * @description - Creates a typed context selector with optimized updates for state selection\n * @category Helpers\n *\n * @template Value - The type of value that will be stored in the context\n * @param {Value | undefined} [defaultValue] - Default value for the context\n * @param {CreateReactiveContextOptions<Value>} [options] - Additional options for context creation\n * @returns {CreateReactiveContextReturn<Value>} Object containing context utilities and components\n *\n * @example\n * const { Provider, useSelector, instance } = createReactiveContext<number>(0);\n */\nexport const createReactiveContext = <Value extends Record<string, any>>(\n  defaultValue: Value | undefined = undefined,\n  options: CreateReactiveContextOptions = {}\n) => {\n  const Context = createContext<ReactiveContextValue<Value>>({\n    value: { current: defaultValue as Value },\n    listeners: new Set()\n  });\n\n  const Provider = createProvider(Context.Provider) as unknown as Provider<Value>;\n\n  Context.displayName = options.name;\n\n  function useSelector(): Value;\n  function useSelector<SelectedValue>(selector: (state: Value) => SelectedValue): SelectedValue;\n  function useSelector<SelectedValue>(selector?: (state: Value) => SelectedValue) {\n    return createReactiveContextSelector(\n      Context as unknown as Context<ReactiveContextValue<Value>>,\n      selector ?? ((state) => state as unknown as SelectedValue),\n      options\n    );\n  }\n\n  return { instance: Context, Provider, useSelector };\n};\n"],"names":["createProvider","originalProvider","props","valueRef","useRef","contextValue","useMemo","useIsomorphicLayoutEffect","startTransition","listener","createElement","createReactiveContextSelector","Context","selector","options","context","use","value","setValue","useState","dispatch","useEvent","newValue","prevValue","newSelected","createReactiveContext","defaultValue","createContext","Provider","useSelector","state"],"mappings":";;;AAyCA,MAAMA,IAAiB,CAAQC,MACc,CAACC,MAAU;AAC9C,QAAAC,IAAWC,EAAOF,EAAM,KAAK,GAC7BG,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,OAAOH;AAAA,MACP,+BAAe,IAAI;AAAA,IAAA;AAAA,IAErB,CAAA;AAAA,EACF;AAEA,SAAAI,EAA0B,MAAM;AAC9B,IAAK,OAAO,GAAGJ,EAAS,SAASD,EAAM,KAAK,MAC1CC,EAAS,UAAUD,EAAM,OAEzBM,EAAgB,MAAM;AACP,MAAAH,EAAA,UAAU,QAAQ,CAACI,MAAa;AAC3C,QAAAA,EAASN,EAAS,OAAO;AAAA,MAAA,CAC1B;AAAA,IAAA,CACF;AAAA,EACH,GACC,CAACD,EAAM,KAAK,CAAC,GAETQ,EAAcT,GAAkB,EAAE,OAAOI,EAAa,GAAGH,EAAM,QAAQ;AAChF,GAKIS,IAAgC,CACpCC,GACAC,GACAC,IAAwC,CAAA,MACrC;AACG,QAAAC,IAAUC,EAAIJ,CAAO;AAEvB,MAAA,CAACG,KAAWD,EAAQ;AACtB,UAAM,IAAI,MAAM,gBAAgBA,EAAQ,IAAI,iCAAiC;AAG/E,QAAM,CAACG,GAAOC,CAAQ,IAAIC,EAAS;AAAA,IACjC,UAAUN,EAASE,EAAQ,MAAM,OAAO;AAAA,IACxC,OAAOA,EAAQ,MAAM;AAAA,EAAA,CACtB,GAEKK,IAAWC,EAAS,CAACC,MAAoB;AAC7C,IAAAJ,EAAS,CAACK,MAAc;AACtB,UAAI,OAAO,GAAGA,EAAU,OAAOD,CAAQ,EAAU,QAAAC;AAE3C,YAAAC,IAAcX,EAASS,CAAQ;AACrC,aAAI,OAAO,GAAGC,EAAU,UAAUC,CAAW,IAAUD,IAEhD,EAAE,OAAOD,GAAU,UAAUE,EAAY;AAAA,IAAA,CACjD;AAAA,EAAA,CACF;AAED,SAAAjB,EAA0B,OAChBQ,EAAA,UAAU,IAAIK,CAAQ,GACvB,MAAM;AACH,IAAAL,EAAA,UAAU,OAAOK,CAAQ;AAAA,EACnC,IACC,CAACL,EAAQ,SAAS,CAAC,GAEfE,EAAM;AACf,GAeaQ,IAAwB,CACnCC,IAAkC,QAClCZ,IAAwC,CAAA,MACrC;AACH,QAAMF,IAAUe,EAA2C;AAAA,IACzD,OAAO,EAAE,SAASD,EAAsB;AAAA,IACxC,+BAAe,IAAI;AAAA,EAAA,CACpB,GAEKE,IAAW5B,EAAeY,EAAQ,QAAQ;AAEhD,EAAAA,EAAQ,cAAcE,EAAQ;AAI9B,WAASe,EAA2BhB,GAA4C;AACvE,WAAAF;AAAA,MACLC;AAAA,MACAC,MAAa,CAACiB,MAAUA;AAAA,MACxBhB;AAAA,IACF;AAAA,EAAA;AAGF,SAAO,EAAE,UAAUF,GAAS,UAAAgB,GAAU,aAAAC,EAAY;AACpD;"}
+{"version":3,"file":"createReactiveContext.mjs","sources":["../../../../src/helpers/createReactiveContext/createReactiveContext.ts"],"sourcesContent":["import type { Context, FC, Provider, ProviderProps, RefObject } from 'react';\n\nimport {\n  createContext,\n  createElement,\n  startTransition,\n  useContext,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport { useEvent, useIsomorphicLayoutEffect } from '@/hooks';\n\n/** The create reactive context options type */\nexport interface CreateReactiveContextOptions {\n  /** Display name for the context (useful for debugging) */\n  name?: string;\n  /** Whether to throw an error if context is used outside of Provider */\n  strict?: boolean;\n}\n\n/** The create reactive context return type */\nexport interface CreateReactiveContextReturn<Value> {\n  /** The context instance */\n  instance: Context<ReactiveContextValue<Value>>;\n  /** The Provider component for the context */\n  Provider: Provider<Value>;\n  /** A hook to select a part of the context state */\n  useSelector: <Selected>(selector?: (state: Value) => Selected) => Selected;\n}\n\ntype ContextListener<Value> = (value: Value) => void;\n\ninterface ReactiveContextValue<Value> {\n  /** The listeners for the context */\n  listeners: Set<ContextListener<Value>>;\n  /** The value for the context */\n  value: RefObject<Value>;\n}\n\nconst createProvider = <Value>(originalProvider: Provider<ReactiveContextValue<Value>>) => {\n  const Provider: FC<ProviderProps<Value>> = (props) => {\n    const valueRef = useRef(props.value);\n    const contextValue = useMemo<ReactiveContextValue<Value>>(\n      () => ({\n        value: valueRef,\n        listeners: new Set()\n      }),\n      []\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      if (!Object.is(valueRef.current, props.value)) {\n        valueRef.current = props.value;\n\n        startTransition(() => {\n          contextValue.listeners.forEach((listener) => {\n            listener(valueRef.current);\n          });\n        });\n      }\n    }, [props.value]);\n\n    return createElement(originalProvider, { value: contextValue }, props.children);\n  };\n\n  return Provider as unknown as Provider<ReactiveContextValue<Value>>;\n};\n\nconst createReactiveContextSelector = <Value, Selected>(\n  Context: Context<ReactiveContextValue<Value>>,\n  selector: (state: Value) => Selected,\n  options: CreateReactiveContextOptions = {}\n) => {\n  const context = useContext(Context);\n\n  if (!context && options.strict) {\n    throw new Error(`Context hook ${options.name} must be used inside a Provider`);\n  }\n\n  const [value, setValue] = useState({\n    selected: selector(context.value.current),\n    value: context.value.current\n  });\n\n  const dispatch = useEvent((newValue: Value) => {\n    setValue((prevValue) => {\n      if (Object.is(prevValue.value, newValue)) return prevValue;\n\n      const newSelected = selector(newValue);\n      if (Object.is(prevValue.selected, newSelected)) return prevValue;\n\n      return { value: newValue, selected: newSelected };\n    });\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    context.listeners.add(dispatch);\n    return () => {\n      context.listeners.delete(dispatch);\n    };\n  }, [context.listeners]);\n\n  return value.selected;\n};\n\n/**\n * @name createReactiveContext\n * @description - Creates a typed context selector with optimized updates for state selection\n * @category Helpers\n *\n * @warning - For complex interfaces, we strongly recommend using state management solutions outside of React like createStore, reatom, effector, or zustand instead of context\n *\n * @template Value - The type of value that will be stored in the context\n * @param {Value | undefined} [defaultValue] - Default value for the context\n * @param {CreateReactiveContextOptions<Value>} [options] - Additional options for context creation\n * @returns {CreateReactiveContextReturn<Value>} Object containing context utilities and components\n *\n * @example\n * const { Provider, useSelector, instance } = createReactiveContext<number>(0);\n */\nexport const createReactiveContext = <Value extends Record<string, any>>(\n  defaultValue: Value | undefined = undefined,\n  options: CreateReactiveContextOptions = {}\n) => {\n  const Context = createContext<ReactiveContextValue<Value>>({\n    value: { current: defaultValue as Value },\n    listeners: new Set()\n  });\n\n  const Provider = createProvider(Context.Provider) as unknown as Provider<Value>;\n\n  Context.displayName = options.name;\n\n  function useSelector(): Value;\n  function useSelector<SelectedValue>(selector: (state: Value) => SelectedValue): SelectedValue;\n  function useSelector<SelectedValue>(selector?: (state: Value) => SelectedValue) {\n    return createReactiveContextSelector(\n      Context as unknown as Context<ReactiveContextValue<Value>>,\n      selector ?? ((state) => state as unknown as SelectedValue),\n      options\n    );\n  }\n\n  return { instance: Context, Provider, useSelector };\n};\n"],"names":["createProvider","originalProvider","props","valueRef","useRef","contextValue","useMemo","useIsomorphicLayoutEffect","startTransition","listener","createElement","createReactiveContextSelector","Context","selector","options","context","useContext","value","setValue","useState","dispatch","useEvent","newValue","prevValue","newSelected","createReactiveContext","defaultValue","createContext","Provider","useSelector","state"],"mappings":";;;AAyCA,MAAMA,IAAiB,CAAQC,MACc,CAACC,MAAU;AAC9C,QAAAC,IAAWC,EAAOF,EAAM,KAAK,GAC7BG,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,OAAOH;AAAA,MACP,+BAAe,IAAI;AAAA,IAAA;AAAA,IAErB,CAAA;AAAA,EACF;AAEA,SAAAI,EAA0B,MAAM;AAC9B,IAAK,OAAO,GAAGJ,EAAS,SAASD,EAAM,KAAK,MAC1CC,EAAS,UAAUD,EAAM,OAEzBM,EAAgB,MAAM;AACP,MAAAH,EAAA,UAAU,QAAQ,CAACI,MAAa;AAC3C,QAAAA,EAASN,EAAS,OAAO;AAAA,MAAA,CAC1B;AAAA,IAAA,CACF;AAAA,EACH,GACC,CAACD,EAAM,KAAK,CAAC,GAETQ,EAAcT,GAAkB,EAAE,OAAOI,EAAa,GAAGH,EAAM,QAAQ;AAChF,GAKIS,IAAgC,CACpCC,GACAC,GACAC,IAAwC,CAAA,MACrC;AACG,QAAAC,IAAUC,EAAWJ,CAAO;AAE9B,MAAA,CAACG,KAAWD,EAAQ;AACtB,UAAM,IAAI,MAAM,gBAAgBA,EAAQ,IAAI,iCAAiC;AAG/E,QAAM,CAACG,GAAOC,CAAQ,IAAIC,EAAS;AAAA,IACjC,UAAUN,EAASE,EAAQ,MAAM,OAAO;AAAA,IACxC,OAAOA,EAAQ,MAAM;AAAA,EAAA,CACtB,GAEKK,IAAWC,EAAS,CAACC,MAAoB;AAC7C,IAAAJ,EAAS,CAACK,MAAc;AACtB,UAAI,OAAO,GAAGA,EAAU,OAAOD,CAAQ,EAAU,QAAAC;AAE3C,YAAAC,IAAcX,EAASS,CAAQ;AACrC,aAAI,OAAO,GAAGC,EAAU,UAAUC,CAAW,IAAUD,IAEhD,EAAE,OAAOD,GAAU,UAAUE,EAAY;AAAA,IAAA,CACjD;AAAA,EAAA,CACF;AAED,SAAAjB,EAA0B,OAChBQ,EAAA,UAAU,IAAIK,CAAQ,GACvB,MAAM;AACH,IAAAL,EAAA,UAAU,OAAOK,CAAQ;AAAA,EACnC,IACC,CAACL,EAAQ,SAAS,CAAC,GAEfE,EAAM;AACf,GAiBaQ,IAAwB,CACnCC,IAAkC,QAClCZ,IAAwC,CAAA,MACrC;AACH,QAAMF,IAAUe,EAA2C;AAAA,IACzD,OAAO,EAAE,SAASD,EAAsB;AAAA,IACxC,+BAAe,IAAI;AAAA,EAAA,CACpB,GAEKE,IAAW5B,EAAeY,EAAQ,QAAQ;AAEhD,EAAAA,EAAQ,cAAcE,EAAQ;AAI9B,WAASe,EAA2BhB,GAA4C;AACvE,WAAAF;AAAA,MACLC;AAAA,MACAC,MAAa,CAACiB,MAAUA;AAAA,MACxBhB;AAAA,IACF;AAAA,EAAA;AAGF,SAAO,EAAE,UAAUF,GAAS,UAAAgB,GAAU,aAAAC,EAAY;AACpD;"}

package/dist/types/helpers/createReactiveContext/createReactiveContext.d.ts

@@ -27,6 +27,8 @@ interface ReactiveContextValue<Value> {
  * @description - Creates a typed context selector with optimized updates for state selection
  * @category Helpers
  *
+ * @warning - For complex interfaces, we strongly recommend using state management solutions outside of React like createStore, reatom, effector, or zustand instead of context
+ *
  * @template Value - The type of value that will be stored in the context
  * @param {Value | undefined} [defaultValue] - Default value for the context
  * @param {CreateReactiveContextOptions<Value>} [options] - Additional options for context creation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siberiacancode/reactuse",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "The ultimate collection of react hooks",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",
@@ -39,6 +39,17 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "prepublishOnly": "pnpm unit-test run && pnpm build",
+    "build": "shx rm -rf dist && vite build",
+    "build:js": "tsc --project tsconfig.build.json && prettier --write src/bundle",
+    "lint": "eslint . --fix",
+    "lint-inspector": "npx @eslint/config-inspector@latest",
+    "format": "prettier --write .",
+    "pretty": "pnpm lint && pnpm format",
+    "unit-test": "vitest",
+    "lint-staged": "lint-staged"
+  },
   "peerDependencies": {
     "@types/react": "^18",
     "react": "^17 || ^18 || ^19",
@@ -74,15 +85,5 @@
       "eslint --fix",
       "prettier --write"
     ]
-  },
-  "scripts": {
-    "build": "shx rm -rf dist && vite build",
-    "build:js": "tsc --project tsconfig.build.json && prettier --write src/bundle",
-    "lint": "eslint . --fix",
-    "lint-inspector": "npx @eslint/config-inspector@latest",
-    "format": "prettier --write .",
-    "pretty": "pnpm lint && pnpm format",
-    "unit-test": "vitest",
-    "lint-staged": "lint-staged"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 siberiacancode
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.