muya 1.0.3 → 2.0.0-beta.1

package/README.md

@@ -1,321 +1,299 @@
+
 # Muya 🌀
-Welcome to Muya - Making state management a breeze, focused on simplicity and scalability for real-world scenarios.
+
+Welcome to **Muya v2**—a state management library that makes managing state a breeze, focusing on simplicity and scalability for real-world applications.
 
 [![Build](https://github.com/samuelgja/muya/actions/workflows/build.yml/badge.svg)](https://github.com/samuelgja/muya/actions/workflows/build.yml)
-[![Code quality Check](https://github.com/samuelgja/muya/actions/workflows/code-check.yml/badge.svg)](https://github.com/samuelgja/muya/actions/workflows/code-check.yml)
+[![Code Quality Check](https://github.com/samuelgja/muya/actions/workflows/code-check.yml/badge.svg)](https://github.com/samuelgja/muya/actions/workflows/code-check.yml)
 [![Build Size](https://img.shields.io/bundlephobia/minzip/muya?label=Bundle%20size)](https://bundlephobia.com/result?p=muya)
 
+---
+
 ## 🚀 Features
-- Easy State Creation: Kickstart your state management with simple and intuitive APIs.
-- Selectors & Merges: Grab exactly what you need from your state and combine multiple states seamlessly.
-- Deep Nesting Support: Handle complex state structures without breaking a sweat.
-- Optimized Rendering: Prevent unnecessary re-renders
-- TypeScript Ready: Fully typed for maximum developer sanity.
-- Small Bundle Size: Lightweight and fast, no bloatware here.
 
-## 📦 Installation
+- **Simple State Creation**: Easily create global state with an intuitive API.
+- **Functional Derivations**: Derive / Compute new state using plain functions, embracing functional programming.
+- **Async Support**: Async derived states work out of the box, with support for React Suspense.
+- **Performance Optimizations**: WIP Batch state updates for optimized rendering.
+- **TypeScript Support**: Fully typed for a better developer experience.
+- **Small Bundle Size**: Lightweight and efficient—no unnecessary bloat.
 
-```bash
-bun add muya
-```
-or
-```bash
-yarn add muya
-```
-or
-```bash
-npm install muya
-```
-
-## 📝 Quick Start
+---
 
-```typescript
-import { create } from 'muya'
+Info: [Muya v2](https://medium.com/p/106de3d04c43)
 
-const useCounter = create(0)
+### 💡 How It Works
+Muya v2 uses its own custom context system to track dependencies and notify components when state changes. When you use a function that accesses state in your component, Muya tracks which states are used and re-renders the component when any of them change.
 
-function App() {
-  const counter = useCounter()
-  return <div onClick={() => useCounter.setState((prev) => prev + 1)}>{counter}</div>
-}
-```
+This allows you to write derived state as plain functions, making your code more intuitive and closer to standard JavaScript. No need to define selectors or use special APIs—just use functions!
 
-### Update
-Sugar syntax above the `setState` method for partially updating the state.
-```typescript
-import { create } from 'muya'
+--- 
 
-const useUser = create({ name: 'John', lastName: 'Doe' })
+## 📦 Installation
 
-function App() {
-  const user = useUser()
-  // this will just partially update only the name field, it's sugar syntax for setState.
-  return <div onClick={() => useUser.updateState({ name: 'Nope' })}>{user.name}</div>
-}
+```bash
+npm install muya
 ```
 
-### Selecting parts of the state globally
-```tsx
-import { create } from 'muya'
-
-const useUser = create({ name: 'John', age: 30 })
+Or using Yarn:
 
-// Selecting only the name part of the state
-const useName = useUser.select((user) => user.name)
+```bash
+yarn add muya
+```
 
-function App() {
-  const name = useName()
-  return <div onClick={() => useUser.setState((prev) => ({ ...prev, name: 'Jane' }))}>{name}</div>
-}
+Or using Bun:
 
+```bash
+bun add muya
 ```
 
-### Merge any states
-```typescript
-import { create, shallow, merge } from 'muya'
-
-const useName = create(() => 'John')
-const useAge = create(() => 30)
+---
 
-const useFullName = merge([useName, useAge], (name, age) => `${name} and ${age}`)
+## 📝 Quick Start
 
-function App() {
-  const fullName = useFullName()
-  return <div onClick={() => useName.setState((prev) => 'Jane')}>{fullName}</div>
-}
-```
+Here's how to get started with **Muya v2**:
 
-### Promise based state and lifecycle management working with React Suspense
-This methods are useful for handling async data fetching and lazy loading via React Suspense.
+### Creating State
 
-#### Immediate Promise resolution
 ```typescript
 import { create } from 'muya';
- // state will try to resolve the promise immediately, can hit the suspense boundary
-const counterState = create(Promise.resolve(0));
 
-function Counter() {
-  const counter = counterState();
-  return (
-    <div onClick={() => counterState.setState((prev) => prev + 1)}>
-      {counter}
-    </div>
-  );
-}
+const counter = create(0);
 ```
 
-#### Lazy Promise resolution
-```typescript
-import { create } from 'muya';
-// state will lazy resolve the promise on first access, this will hit the suspense boundary if the first access is from component and via `counterState.getState()` method
-const counterState = create(() => Promise.resolve(0)); 
+### Using State in Components
+
+```tsx
+import React from 'react';
+import { use } from 'muya';
 
 function Counter() {
-  const counter = counterState();
+  const count = use(counter);
+
   return (
-    <div onClick={() => counterState.setState((prev) => prev + 1)}>
-      {counter}
+    <div>
+      <button onClick={() => counter.set((prev) => prev + 1)}>
+        Increment
+      </button>
+      <p>Count: {count}</p>
     </div>
   );
 }
 ```
 
-## 🔍 API Reference
-
-### `create`
+---
 
-Creates a basic atom state.
+## 📚 Examples
 
-```typescript
-function create<T>(defaultState: T, options?: StateOptions<T>): StateSetter<T>;
-```
+### Deriving / Selecting State with Functions
 
-**Example:**
+You can derive new state using plain functions:
 
 ```typescript
-const userState = create({ name: 'John', age: 30 });
+const counter = create(0);
+
+function doubled() {
+  return counter() * 2;
+}
 ```
 
-### `select`
+Use it in a component:
 
-Selects a slice of an existing state directly or via a selector function.
+```tsx
+function DoubledCounter() {
+  const value = use(doubled);
 
-```typescript
-// userState is ready to use as hook, so you can name it with `use` prefix
-const userState = create({ name: 'John', age: 30 });
-// Direct selection outside the component, is useful for accessing the slices of the state in multiple components
-const userAgeState = userState.select((user) => user.age);
+  return <p>Doubled Count: {value}</p>;
+}
 ```
 
-### `merge`
-Merges any number states into a single state. 
-```typescript
-const useName = create(() => 'John');
-const useAge = create(() => 30);
-const useFullName = merge([useName, useAge], (name, age) => `${name} and ${age}`);
-```
+### Complex Derivations
 
-### `setState`
-Sets the state to a new value or a function that returns a new value.
+Create more complex derived states by composing functions:
 
-```typescript
-const userState = create({ name: 'John', age: 30 });
-userState.setState({ name: 'Jane' });
-```
+```tsx
+import { create, use } from 'muya';
 
-### `updateState`
-Partially updates the state with a new value.
+const state1 = create(0);
+const state2 = create(0);
+const state3 = create(0);
 
-```typescript
-const userState = create({ name: 'John', age: 30 });
-userState.updateState({ name: 'Jane' });
-```
+function sum() {
+  return state1() + state2() + state3();
+}
 
-### `getState`
-Returns the current state value outside the component.
+function multiply() {
+  return sum() * 2; // Example multiplier
+}
 
-```typescript
-const userState = create({ name: 'John', age: 30 });
-const user = userState.getState();
-```
+function isOdd() {
+  return multiply() % 2 === 1;
+}
 
-### `use`
-Creates a hook for the state.
+function App() {
+  const isOddValue = use(isOdd);
 
-```typescript
-const useCounter = create(0);
-// use inside the component
-const counter = useCounter();
+  return (
+    <div>
+      <button onClick={() => state1.set((c) => c + 1)}>Increment Counter 1</button>
+      <button onClick={() => state2.set((c) => c + 1)}>Increment Counter 2</button>
+      <button onClick={() => state3.set((c) => c + 1)}>Increment Counter 3</button>
+      <p>Is ODD: {isOddValue ? 'Yes' : 'No'}</p>
+    </div>
+  );
+}
 ```
 
-### `subscribe`
-Subscribes to the state changes.
 
-```typescript
-const userState = create({ name: 'John', age: 30 });
-const unsubscribe = userState.subscribe((state) => console.log(state));
-```
+### Derive state with parameters
+```tsx
 
-### Promise Handling
+import React, { useCallback, useState } from 'react';
+import { create, use } from 'muya';
 
-#### Immediate Promise Resolution
+const counter1 = create(0);
+const counter2 = create(0);
 
-```typescript
-import { create } from 'muya';
+function multipliedSum(multiplier: number) {
+  return (counter1() + counter2()) * multiplier;
+}
 
-// State will try to resolve the promise immediately, can hit the suspense boundary
-const counterState = create(Promise.resolve(0));
+function MultipliedCounter() {
+  const [multiplier, setMultiplier] = useState(1);
+  // make sure to use useCallback to memoize the function
+  const multiply = useCallback(() => multipliedSum(multiplier), [multiplier]);
+  const result = use(multiply);
 
-function Counter() {
-  const counter = counterState();
   return (
-    <div onClick={() => counterState.setState((prev) => prev + 1)}>
-      {counter}
+    <div>
+      <button onClick={() => counter1.set((c) => c + 1)}>
+        Increment Counter 1
+      </button>
+      <button onClick={() => counter2.set((c) => c + 1)}>
+        Increment Counter 2
+      </button>
+      <button onClick={() => setMultiplier((m) => m + 1)}>
+        Increment Multiplier
+      </button>
+      <p>Result: {result}</p>
     </div>
   );
 }
 ```
 
-#### Lazy Promise Resolution
+### Async derives State
 
-```typescript
+```tsx
 import { create } from 'muya';
 
-// State will lazy resolve the promise on first access, this will hit the suspense boundary if the first access is from component and via `counterState.getState()` method
-const counterState = create(() => Promise.resolve(0));
+const counter = create(1);
+
+async function fetchData() {
+  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${counter()}`);
+  return response.json();
+}
+
+// make sure this component is wrapped in a <Suspense> component
+function Component() {
+  const data = use(fetchData);
 
-function Counter() {
-  const counter = counterState();
   return (
-    <div onClick={() => counterState.setState((prev) => prev + 1)}>
-      {counter}
+    <div>
+      <button onClick={() => counter.set((prev) => prev + 1)}>Increment</button>
+      <p>{JSON.stringify(data)}</p>
     </div>
   );
 }
+
+
 ```
+---
 
-#### Promise Rejection Handling
 
-```typescript
-import { create } from 'muya';
 
-// State will reject the promise
-const counterState = create(Promise.reject('Error occurred'));
 
-function Counter() {
-  try {
-    const counter = counterState();
-    return <div>{counter}</div>;
-  } catch (error) {
-    return <div>Error: {error}</div>;
-  }
-}
-```
+## 📖 Documentation
 
-#### Error Throwing
+#### `create`
 
 ```typescript
-import { create } from 'muya';
+  function create<T>(initialState: T): State<T>;
+```
 
-// State will throw an error
-const counterState = create(() => {
-  throw new Error('Error occurred');
-});
+Create return state block or atom, setting a new value to the state will trigger a re-render of all components using the state.
+```typescript
+  const counter = create(0);
+  // set new value
+  counter.set(1);
+```
 
-function Counter() {
-  try {
-    const counter = counterState();
-    return <div>{counter}</div>;
-  } catch (error) {
-    return <div>Error: {error.message}</div>;
-  }
-}
+Get the state value outside of react
+```typescript
+  const value = counter();
+  // call it like a function
+  console.log(value()); // 1
 ```
 
-#### Setting a state during promise resolution
+Each state created by create has the following properties and methods:
 
+- id: number: Unique identifier for the state.
+- (): T: The state is callable to get the current value.
+- set(value: T | ((prev: T) => T)): Update the state value.
+- listen(listener: (value: T) => void): () => void: Subscribe to state changes.
+
+#### `use` hook
+Use hook to get state value in react component
 ```typescript
-import { create } from 'muya';
+  function use<T>(state: State<T> | (() => T)): T;
+```
+example
+```tsx
+  const counter = create(0);
 
-// State will resolve the promise and set the state
-const counterState = create(Promise.resolve(0));
-// this will abort current promise and set the state to 10
-counterState.setState(10); 
-function Counter() {
-  const counter = counterState();
-  return (
-    <div onClick={() => counterState.setState((prev) => prev + 1)}>
-      {counter}
-    </div>
-  );
-}
+  // in react component
+  const count = use(counter);
 ```
 
+Also custom selector to avoid re-rendering the app
+```tsx
+  const doubled = create({doubled:true});
+  // in react component
+  const value = use(doubled, (state) => state.doubled);
+```
 
-### Access from outside the component
-:warning: Avoid using this method for state management in [React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md), especially in Next.js 13+. It may cause unexpected behavior or privacy concerns.
-```typescript
-const userState = create({ name: 'John', age: 30 });
-const user = userState.getState();
+
+
+
+
+### ⚠️ Notes
+Memoization: When using derived functions with parameters, you should memoize them using useCallback to prevent unnecessary re-renders and prevent function calls.
+```tsx
+Copy code
+const multiply = useCallback(() => multipliedSum(multiplier), [multiplier]);
 ```
----
+Async Functions: Async functions used in use should handle errors appropriately and may need to use React's Suspense for loading states.
+Also keep in note, setting new state in async derives, will cancel the pending previous one in the queue.
 
-### Slicing new references
-:warning: Slicing data with new references can lead to maximum call stack exceeded error.
-It's recommended to not use new references for the state slices, if you need so, use `shallow` or other custom equality checks.
-```typescript
-import { state, shallow } from 'muya';
-const userState = create({ name: 'John', age: 30 });
-// this slice will create new reference object on each call
-const useName = userState.select((user) => ({newUser: user.name }), shallow);
+```tsx
+Copy code
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <DataComponent />
+    </Suspense>
+  );
+}
 ```
 
-## 🤖 Contributing
-Contributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) before submitting a pull request.
+Error Handling: If an async function throws an error, you can catch it using React's error boundaries.
 
-## 🧪 Testing
+### 🤖 Contributing
+Contributions are welcome! Please read the contributing guidelines before submitting a pull request.
+
+### 🧪 Testing
 Muya comes with a robust testing suite. Check out the state.test.tsx for examples on how to write your own tests.
 
-## 📜 License
 
-Muya is [MIT licensed](LICENSE).
+### 🙏 Acknowledgments
+Special thanks to reddit to motivate me for v2 :D 
+

package/cjs/index.js

@@ -1 +1 @@
-"use strict";var w=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var B=(t,e)=>{for(var n in e)w(t,n,{get:e[n],enumerable:!0})},H=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of L(e))!W.call(t,o)&&o!==n&&w(t,o,{get:()=>e[o],enumerable:!(r=F(e,o))||r.enumerable});return t};var J=t=>H(w({},"__esModule",{value:!0}),t);var K={};B(K,{StateKeys:()=>v,create:()=>M,getDefaultValue:()=>y,merge:()=>A,select:()=>g,shallow:()=>U,useStateValue:()=>E});module.exports=J(K);var q=require("use-sync-external-store/shim/with-selector"),I=require("react");function O(t){return t}function R(t,e,n){let r=(0,q.useSyncExternalStoreWithSelector)(t.subscribe,t.getSnapshot,t.getSnapshot,e?o=>e(o):O,n);return(0,I.useDebugValue)(r),r}function k(t,e){e&&e.abort();let n=new AbortController,{signal:r}=n;return{promise:new Promise((a,s)=>{r.addEventListener("abort",()=>{s(new DOMException("Promise was aborted","StateAbortError"))}),t.then(a).catch(s)}),controller:n}}function p(t){return t instanceof Promise}function D(t){return typeof t=="function"}function _(t){return typeof t=="function"}function j(t){return typeof t=="object"&&t!==null}function G(t){return t instanceof Map}function V(t){return t instanceof Set}function h(t){return Array.isArray(t)}function l(t,e){return t===e?!0:!!Object.is(t,e)}function P(t){return t instanceof DOMException&&t.name==="StateAbortError"}function C(t){return t instanceof Error&&t.name!=="StateAbortError"}var v=(n=>(n.IS_STATE="isState",n.IS_SLICE="isSlice",n))(v||{});function y(t){return p(t)?t:D(t)?t():t}function m(t){let e=new Set;return{subscribe:n=>(e.add(n),()=>{e.delete(n)}),emit:(...n)=>{for(let r of e)r(...n)},getSnapshot:t}}function E(t,e=r=>r,n){let r=R(t.__internal.emitter,o=>e(o),n);if(p(r)||C(r))throw r;return r}function T(t){let{baseState:e}=t,n=(r,o)=>E(n,r,o);return n.__internal=e.__internal,n.getState=e.getState,n.reset=e.reset,n.select=e.select,n.subscribe=e.subscribe,n}function g(t,e,n=l){let r,o=m(()=>{let i=e(t.getState());return r!==void 0&&n(r,i)?r:(r=i,i)});t.__internal.emitter.subscribe(()=>{o.emit()});let a=d({emitter:o,getGetterState:()=>s,getState:()=>e(t.getState()),reset:t.reset}),s=T({baseState:a});return s}function d(t){let{emitter:e,getGetterState:n,reset:r,getState:o}=t;return{getState:o,reset:r,select(a,s){let i=n();return g(i,a,s)},__internal:{emitter:e},subscribe(a){return a(o()),e.subscribe(()=>{a(o())})}}}function M(t,e=l){function n(u,S){return _(S)?S(u):S}let r={updateVersion:0,value:void 0};function o(){return r.value===void 0&&(r.value=y(t)),r.value}function a(){let u=o();if(p(u)){let{controller:S,promise:f}=k(u,r.abortController);r.abortController=S,f.then(c=>{r.value=c,b.emit()}).catch(c=>{P(c)||(r.value=new Error(c))})}return u}function s(u){let S=o();r.abortController&&(r.abortController.abort(),r.abortController=void 0);let f=n(S,u);e?.(S,f)||f===S||(r.updateVersion++,r.value=f,b.emit())}function i(u){if(j(u))return s(S=>({...S,...u}));s(u)}let b=m(a),z=d({emitter:b,getGetterState:()=>x,getState:a,reset(){let u=y(t);if(p(u)){let{controller:S,promise:f}=k(u,r.abortController);r.abortController=S,f.then(c=>{s(c)}).catch(c=>{P(c)||(r.value=new Error(c))});return}s(u)}}),x=T({baseState:z});return x.setState=s,x.updateState=i,x}function A(t,e,n=l){let r,o=m(()=>{let i=e(...t.map(b=>b.getState()));return r!==void 0&&n(r,i)?r:(r=i,i)});for(let i of t)i.__internal.emitter.subscribe(()=>{o.emit()});let a=d({emitter:o,getGetterState:()=>s,getState:()=>e(...t.map(i=>i.getState())),reset(){for(let i of t)i.reset()}}),s=T({baseState:a});return s}function U(t,e){if(t==e)return!0;if(typeof t!="object"||t==null||typeof e!="object"||e==null)return!1;if(G(t)&&G(e)){if(t.size!==e.size)return!1;for(let[o,a]of t)if(!Object.is(a,e.get(o)))return!1;return!0}if(V(t)&&V(e)){if(t.size!==e.size)return!1;for(let o of t)if(!e.has(o))return!1;return!0}if(h(t)&&h(e)){if(t.length!==e.length)return!1;for(let[o,a]of t.entries())if(!Object.is(a,e[o]))return!1;return!0}let n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(let o of n)if(!Object.prototype.hasOwnProperty.call(e,o)||!Object.is(t[o],e[o]))return!1;return!0}
+"use strict";var h=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var r in t)h(e,r,{get:t[r],enumerable:!0})},Y=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of X(t))!N.call(e,n)&&n!==r&&h(e,n,{get:()=>t[n],enumerable:!(o=q(t,n))||o.enumerable});return e};var G=e=>Y(h({},"__esModule",{value:!0}),e);var J={};K(J,{EMPTY_SELECTOR:()=>w,create:()=>U,shallow:()=>j,use:()=>H});module.exports=G(J);var w=e=>e;function p(e){return e instanceof Promise}function g(e){return typeof e=="function"}function R(e){return e instanceof Map}function C(e){return e instanceof Set}function P(e){return Array.isArray(e)}function b(e,t){return e===t?!0:!!Object.is(e,t)}function A(e){return typeof e=="function"}function I(e){return e instanceof DOMException&&e.name==="StateAbortError"}function v(e){return e instanceof Error&&e.name!=="StateAbortError"}function l(e){return e===void 0}function M(e,t){t&&t.abort();let r=new AbortController,{signal:o}=r;return{promise:new Promise((i,s)=>{o.addEventListener("abort",()=>{s(new DOMException("Promise was aborted","StateAbortError"))}),e.then(i).catch(s)}),controller:r}}var W=0;function y(){return W++}function E(e,t=(r,o)=>r===o){if(!l(e.current)){if(!l(e.previous)&&t(e.current,e.previous))return!1;e.previous=e.current}return!0}function S(e,t){let r=new Set,o=[];return{clear:()=>{for(let n of o)n();r.clear()},subscribe:n=>(r.add(n),()=>{r.delete(n)}),emit:(...n)=>{for(let i of r)i(...n)},contains:n=>r.has(n),getSnapshot:e,getInitialSnapshot:t,getSize:()=>r.size,subscribeToOtherEmitter(n){let i=n.subscribe(()=>{this.emit()});o.push(i)}}}function D(e){let t=new Set,{onResolveItem:r,onFinish:o}=e,n=performance.now(),i=!1;function s(){let c=performance.now(),f=c-n,{size:m}=t;if(f<.2&&m>0&&m<10){n=c,u();return}i||(i=!0,Promise.resolve().then(()=>{i=!1,n=performance.now(),u()}))}function u(){if(t.size!==0){for(let c of t)r&&r(c),t.delete(c);if(t.size>0){s();return}o()}}function a(c){t.add(c),s()}return a}var $=Symbol("_");function V(e){let t=[];function r(){if(t.length===0)return e;let i=t.at(-1);return i===$?e:i}function o(i,s){t.push(i);let u=s();return p(u)?(async()=>{try{return await u}finally{t.pop()}})():(t.pop(),u)}function n(i){let s=r();return()=>{t.push(s);let u=i();return p(u)?(async()=>{try{return await u}finally{t.pop()}})():(t.pop(),u)}}return{run:o,use:r,wrap:n}}var F=V(void 0);function L(e){let t=[],r={},o={},n=!1,i=S(()=>n?o.current:(n=!0,c()),()=>(n=!0,c()));async function s(){E(o,b)&&(r.controller&&r.controller.abort(),o.current=c(),i.emit())}let u=y(),a={addEmitter(f){let m=f.subscribe(s);t.push(m)},id:u,sub:s},c=function(){let f=F.run(a,e);if(p(f)){let{controller:m,promise:O}=M(f,r.controller);r.controller=m,O?.then(d=>{o.current=d,i.emit()}).catch(d=>{if(!I(d))throw d});let k=O;return o.current=k,k}return o.current=f,f};return c.emitter=i,c.destroy=function(){for(let f of t)f();i.clear()},c.id=u,c.listen=function(f){return i.subscribe(()=>{let m=o.current;if(l(m))throw new Error("The value is undefined");f(m)})},c.abort=function(){r.controller&&r.controller.abort()},c}function U(e,t=b){let r={};function o(){return l(r.current)&&(r.current=g(e)?e():e),r.current}function n(u){let a=o();r.current=A(u)?u(a):u}let i=D({onFinish(){r.current=o(),E(r,t)&&s.emitter.emit()},onResolveItem:n}),s=function(){let u=o(),a=F.use();return a&&!s.emitter.contains(a.sub)&&a.addEmitter(s.emitter),u};return s.listen=function(u){return s.emitter.subscribe(()=>{let a=r.current;if(l(a))throw new Error("The value is undefined");u(a)})},s.emitter=S(()=>s()),s.id=y(),s.set=i,s}var T=require("react");var z=require("react");var x=new WeakMap;function _(e){return{call(){let t=x.get(e);if(t)return t.count++,t.returnType;let o={count:1,returnType:L(e)};return x.set(e,o),o.returnType},destroy(){let t=x.get(e);t&&(t.count--,t.count===0&&(t.returnType.destroy(),x.delete(e)))}}}function H(e,t=w){let r=_(e),o=r.call(),n=o.emitter.getInitialSnapshot??o.emitter.getSnapshot;(0,T.useEffect)(()=>r.destroy,[e]);let i=(0,z.useSyncExternalStore)(o.emitter.subscribe,()=>t(o.emitter.getSnapshot()),()=>t(n()));if((0,T.useDebugValue)(i),p(i))throw i;if(v(i))throw r.destroy(),i;return i}function j(e,t){if(e==t)return!0;if(typeof e!="object"||e==null||typeof t!="object"||t==null)return!1;if(R(e)&&R(t)){if(e.size!==t.size)return!1;for(let[n,i]of e)if(!Object.is(i,t.get(n)))return!1;return!0}if(C(e)&&C(t)){if(e.size!==t.size)return!1;for(let n of e)if(!t.has(n))return!1;return!0}if(P(e)&&P(t)){if(e.length!==t.length)return!1;for(let[n,i]of e.entries())if(!Object.is(i,t[n]))return!1;return!0}let r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(let n of r)if(!Object.prototype.hasOwnProperty.call(t,n)||!Object.is(e[n],t[n]))return!1;return!0}

package/esm/__tests__/create-async.test.js

@@ -0,0 +1 @@
+import{create as r}from"../create";import{waitFor as c}from"@testing-library/react";import{longPromise as m}from"./test-utils";import{isPromise as u}from"../utils/is";import{subscriber as n}from"../subscriber";describe("create",()=>{it("should subscribe to context and notified it with parameters",async()=>{const t=r(1),i=r(2);function s(){return t()+i()}async function a(p){return t()+i()+s()+p}let o=0;const e=n(()=>a(10));expect(u(e.emitter.getSnapshot())).toBe(!0),e.listen(async()=>{o++}),expect(o).toBe(0),expect(await e()).toBe(16),t.set(2),await c(async()=>{}),expect(await e()).toBe(18),expect(o).toBe(4)}),it("should async subscribe to context and notified it",async()=>{const t=r(1),i=r(Promise.resolve(2));async function s(){return await m(),t()+await i()}async function a(){return t()+await i()+await s()}let o=0;const e=n(a);e.listen(()=>{o++}),e(),expect(t.emitter.getSize()).toBe(1),expect(i.emitter.getSize()).toBe(1),expect(e.emitter.getSize()).toBe(1),t.set(2),await c(async()=>{expect(await e()).toBe(8),expect(o).toBe(5)}),i.set(3),await c(async()=>{expect(await e()).toBe(10),expect(o).toBe(10)}),expect(t.emitter.getSize()).toBe(1),expect(i.emitter.getSize()).toBe(1),expect(e.emitter.getSize()).toBe(1),e.destroy(),expect(t.emitter.getSize()).toBe(0),expect(i.emitter.getSize()).toBe(0),expect(e.emitter.getSize()).toBe(0)})});

package/esm/create.js

@@ -1 +1 @@
-import{createEmitter as v}from"./create-emitter";import{getDefaultValue as S}from"./types";import{isAbortError as f,isEqualBase as E,isObject as g,isPromise as T,isSetValueFunction as C}from"./is";import{createBaseState as D}from"./create-base-state";import{createGetterState as w}from"./create-getter-state";import{cancelablePromise as m}from"./common";function P(i,p=E){function d(e,r){return C(r)?r(e):r}const t={updateVersion:0,value:void 0};function s(){return t.value===void 0&&(t.value=S(i)),t.value}function c(){const e=s();if(T(e)){const{controller:r,promise:o}=m(e,t.abortController);t.abortController=r,o.then(a=>{t.value=a,l.emit()}).catch(a=>{f(a)||(t.value=new Error(a))})}return e}function n(e){const r=s();t.abortController&&(t.abortController.abort(),t.abortController=void 0);const o=d(r,e);p?.(r,o)||o===r||(t.updateVersion++,t.value=o,l.emit())}function b(e){if(g(e))return n(r=>({...r,...e}));n(e)}const l=v(c),V=D({emitter:l,getGetterState:()=>u,getState:c,reset(){const e=S(i);if(T(e)){const{controller:r,promise:o}=m(e,t.abortController);t.abortController=r,o.then(a=>{n(a)}).catch(a=>{f(a)||(t.value=new Error(a))});return}n(e)}}),u=w({baseState:V});return u.setState=n,u.updateState=b,u}export{P as create};
+import{canUpdate as m,generateId as l}from"./utils/common";import{createEmitter as f}from"./utils/create-emitter";import{isEqualBase as T,isFunction as d,isSetValueFunction as p,isUndefined as o}from"./utils/is";import{createScheduler as S}from"./utils/scheduler";import{context as h}from"./subscriber";function y(i,u=T){const r={};function a(){return o(r.current)&&(r.current=d(i)?i():i),r.current}function c(n){const t=a();r.current=p(n)?n(t):n}const s=S({onFinish(){r.current=a(),m(r,u)&&e.emitter.emit()},onResolveItem:c}),e=function(){const n=a(),t=h.use();return t&&!e.emitter.contains(t.sub)&&t.addEmitter(e.emitter),n};return e.listen=function(n){return e.emitter.subscribe(()=>{const t=r.current;if(o(t))throw new Error("The value is undefined");n(t)})},e.emitter=f(()=>e()),e.id=l(),e.set=s,e}export{y as create};

package/esm/index.js

@@ -1 +1 @@
-export*from"./types";import{create as t}from"./create";import{select as f}from"./select";import{merge as x}from"./merge";import{useStateValue as l}from"./use-state-value";import{shallow as c}from"./shallow";export{t as create,x as merge,f as select,c as shallow,l as useStateValue};
+export*from"./types";import{create as t}from"./create";import{use as m}from"./use";import{shallow as x}from"./utils/shallow";export{t as create,x as shallow,m as use};

package/esm/subscriber.js

@@ -0,0 +1 @@
+import{cancelablePromise as p,canUpdate as T,generateId as y}from"./utils/common";import{createContext as F}from"./utils/create-context";import{createEmitter as x}from"./utils/create-emitter";import{isAbortError as h,isEqualBase as C,isPromise as R,isUndefined as E}from"./utils/is";const S=F(void 0);function k(d){const u=[],n={},r={};let s=!1;const o=x(()=>s?r.current:(s=!0,t()),()=>(s=!0,t()));async function a(){T(r,C)&&(n.controller&&n.controller.abort(),r.current=t(),o.emit())}const l=y(),f={addEmitter(e){const i=e.subscribe(a);u.push(i)},id:l,sub:a},t=function(){const e=S.run(f,d);if(R(e)){const{controller:i,promise:m}=p(e,n.controller);n.controller=i,m?.then(c=>{r.current=c,o.emit()}).catch(c=>{if(!h(c))throw c});const b=m;return r.current=b,b}return r.current=e,e};return t.emitter=o,t.destroy=function(){for(const e of u)e();o.clear()},t.id=l,t.listen=function(e){return o.subscribe(()=>{const i=r.current;if(E(i))throw new Error("The value is undefined");e(i)})},t.abort=function(){n.controller&&n.controller.abort()},t}export{S as context,k as subscriber};

package/esm/types.js

@@ -1 +1 @@
-import{isFunction as r,isPromise as a}from"./is";var T=(t=>(t.IS_STATE="isState",t.IS_SLICE="isSlice",t))(T||{});function S(e){return a(e)?e:r(e)?e():e}export{T as StateKeys,S as getDefaultValue};
+const t=e=>e;export{t as EMPTY_SELECTOR};

package/esm/use.js

@@ -0,0 +1 @@
+import{useDebugValue as u,useEffect as s,useRef as m}from"react";import{EMPTY_SELECTOR as a}from"./types";import{isAnyOtherError as c,isPromise as T}from"./utils/is";import{useSyncExternalStore as d}from"react";import{subMemo as p}from"./utils/sub-memo";const f=10,E=3;function b(t){const e=m({renders:0,startTime:performance.now()});s(()=>{e.current.renders++,!(performance.now()-e.current.startTime<f)&&(e.current.renders<E||(e.current.startTime=performance.now(),e.current.renders=0,console.warn(`Function ${t.name.length>0?t.name:t} seems to be not memoized, wrap the function to the useCallback or use global defined functions.`)))},[t])}function y(t,e=a){const n=p(t),o=n.call(),i=o.emitter.getInitialSnapshot??o.emitter.getSnapshot;s(()=>n.destroy,[t]);const r=d(o.emitter.subscribe,()=>e(o.emitter.getSnapshot()),()=>e(i()));if(u(r),T(r))throw r;if(c(r))throw n.destroy(),r;return r}export{y as use};

package/esm/utils/__tests__/context.test.js

@@ -0,0 +1 @@
+import{createContext as c}from"../create-context";import{longPromise as r}from"../../__tests__/test-utils";describe("context",()=>{it("should check context",()=>{const e=c({name:"John Doe"}),t=()=>{e.run({name:"Jane Doe"},()=>{expect(e.use()).toEqual({name:"Jane Doe"})})};expect(e.use()).toEqual({name:"John Doe"}),t(),expect(e.use()).toEqual({name:"John Doe"})}),it("should test async context",e=>{const t=c("empty"),o=async()=>new Promise(u=>setTimeout(u,10));t.run("outer",()=>{expect(t.use()).toEqual("outer"),setTimeout(t.wrap(async()=>{try{await o(),expect(t.use()).toEqual("outer"),s()}catch(u){e(u)}}),10),t.run("inner",()=>{expect(t.use()).toEqual("inner"),setTimeout(t.wrap(()=>{try{expect(t.use()).toEqual("inner"),s()}catch(u){e(u)}}),10)}),expect(t.use()).toEqual("outer")});let n=0;function s(){n+=1,n===2&&e()}}),it("should test async nested context",e=>{const t=c(0);t.run(1,()=>{expect(t.use()).toEqual(1),t.run(2,()=>{t.run(3,()=>{expect(t.use()).toEqual(3),setTimeout(t.wrap(()=>{expect(t.use()).toEqual(3)}),10),expect(t.use()).toEqual(3)}),setTimeout(t.wrap(()=>{expect(t.use()).toEqual(2)}),10),expect(t.use()).toEqual(2),t.run(3,()=>{expect(t.use()).toEqual(3),setTimeout(t.wrap(()=>{expect(t.use()).toEqual(3),t.run(4,()=>{expect(t.use()).toEqual(4),setTimeout(t.wrap(()=>{expect(t.use()).toEqual(4),e()}),10),expect(t.use()).toEqual(4)})}),10),expect(t.use()).toEqual(3)}),expect(t.use()).toEqual(2)}),expect(t.use()).toEqual(1)}),expect(t.use()).toEqual(0)}),it("should stress test context with async random code",async()=>{const t=c(0);for(let n=0;n<1e4;n++)t.run(n,()=>{expect(t.use()).toEqual(n)});const o=[];for(let n=0;n<1e4;n++)t.run(n,()=>{expect(t.use()).toEqual(n);const s=new Promise(u=>{setTimeout(t.wrap(()=>{expect(t.use()).toEqual(n),u(n)}),Math.random()*100)});o.push(s)});await Promise.all(o)}),it("should-test-default-value-with-ctx",async()=>{const e=c({counter:1});e.run({counter:10},async()=>{await r(10),expect(e.use()?.counter).toBe(10)}),e.run({counter:12},()=>{expect(e.use()?.counter).toBe(12)})}),it("should test nested context",()=>{const t=c({count:0});function o(){const n=t.use();expect(n?.count).toBe(0),t.run({count:1},()=>{const s=t.use();expect(s?.count).toBe(1),t.run({count:2},()=>{const u=t.use();expect(u?.count).toBe(2)})})}o(),o()}),it("should test nested context with async when promise is returned, but not waited",async()=>{const e=c({count:0});async function t(){await r(10);const n=e.use();expect(n?.count).toBe(1)}async function o(){await t(),e.wrap(t);const n=e.use();expect(n?.count).toBe(1)}e.run({count:1},o)})});

package/esm/utils/__tests__/is.test.js

@@ -0,0 +1 @@
+import{Abort as a}from"../common";import{isPromise as e,isFunction as r,isSetValueFunction as t,isMap as o,isSet as s,isArray as u,isEqualBase as i,isAbortError as n}from"../is";describe("isPromise",()=>{it("should return true for a Promise",()=>{expect(e(Promise.resolve())).toBe(!0)}),it("should return false for a non-Promise",()=>{expect(e(123)).toBe(!1)})}),describe("isFunction",()=>{it("should return true for a function",()=>{expect(r(()=>{})).toBe(!0)}),it("should return false for a non-function",()=>{expect(r(123)).toBe(!1)})}),describe("isSetValueFunction",()=>{it("should return true for a function",()=>{expect(t(()=>{})).toBe(!0)}),it("should return false for a non-function",()=>{expect(t(123)).toBe(!1)})}),describe("isMap",()=>{it("should return true for a Map",()=>{expect(o(new Map)).toBe(!0)}),it("should return false for a non-Map",()=>{expect(o(123)).toBe(!1)})}),describe("isSet",()=>{it("should return true for a Set",()=>{expect(s(new Set)).toBe(!0)}),it("should return false for a non-Set",()=>{expect(s(123)).toBe(!1)})}),describe("isArray",()=>{it("should return true for an array",()=>{expect(u([])).toBe(!0)}),it("should return false for a non-array",()=>{expect(u(123)).toBe(!1)})}),describe("isEqualBase",()=>{it("should return true for equal values",()=>{expect(i(1,1)).toBe(!0)}),it("should return false for non-equal values",()=>{expect(i(1,2)).toBe(!1)})}),describe("isAbortError",()=>{it("should return true for an AbortError",()=>{expect(n(new DOMException("",a.Error))).toBe(!0)}),it("should return false for a non-AbortError",()=>{expect(n(new DOMException("","Error"))).toBe(!1)})});

package/esm/utils/__tests__/sub-memo.test.js

@@ -0,0 +1 @@
+import{subMemo as t}from"../sub-memo";describe("memo-fn",()=>{it("should create memo fn",()=>{function e(){return!0}const o=t(e);expect(o.call().emitter).toBeDefined()})});

package/esm/utils/common.js

@@ -0,0 +1 @@
+import{isUndefined as i}from"./is";var a=(e=>(e.Error="StateAbortError",e))(a||{});function m(r,e){e&&e.abort();const o=new AbortController,{signal:t}=o;return{promise:new Promise((l,n)=>{t.addEventListener("abort",()=>{n(new DOMException("Promise was aborted","StateAbortError"))}),r.then(l).catch(n)}),controller:o}}let s=0;function p(){return s++}function b(r,e=(o,t)=>o===t){if(!i(r.current)){if(!i(r.previous)&&e(r.current,r.previous))return!1;r.previous=r.current}return!0}export{a as Abort,b as canUpdate,m as cancelablePromise,p as generateId};

package/esm/utils/create-context.js

@@ -0,0 +1 @@
+import{isPromise as i}from"./is";const a=Symbol("_");function f(s){const t=[];function o(){if(t.length===0)return s;const e=t.at(-1);return e===a?s:e}function u(e,n){t.push(e);const r=n();return i(r)?(async()=>{try{return await r}finally{t.pop()}})():(t.pop(),r)}function c(e){const n=o();return()=>{t.push(n);const r=e();return i(r)?(async()=>{try{return await r}finally{t.pop()}})():(t.pop(),r)}}return{run:u,use:o,wrap:c}}export{f as createContext};

package/esm/utils/create-emitter.js

@@ -0,0 +1 @@
+function o(n,s){const t=new Set,i=[];return{clear:()=>{for(const e of i)e();t.clear()},subscribe:e=>(t.add(e),()=>{t.delete(e)}),emit:(...e)=>{for(const r of t)r(...e)},contains:e=>t.has(e),getSnapshot:n,getInitialSnapshot:s,getSize:()=>t.size,subscribeToOtherEmitter(e){const r=e.subscribe(()=>{this.emit()});i.push(r)}}}export{o as createEmitter};

package/esm/utils/is.js

@@ -0,0 +1 @@
+import{Abort as e}from"./common";function o(n){return n instanceof Promise}function i(n){return typeof n=="function"}function u(n){return n instanceof Map}function s(n){return n instanceof Set}function a(n){return Array.isArray(n)}function f(n,r){return n===r?!0:!!Object.is(n,r)}function c(n){return typeof n=="function"}function p(n){return n instanceof DOMException&&n.name===e.Error}function k(n){return n instanceof Error&&n.name!==e.Error}function w(n){return n===void 0}export{p as isAbortError,k as isAnyOtherError,a as isArray,f as isEqualBase,i as isFunction,u as isMap,o as isPromise,s as isSet,c as isSetValueFunction,w as isUndefined};

package/esm/utils/scheduler.js

@@ -0,0 +1 @@
+const T=.2,d=10,E=0;function S(f){const n=new Set,{onResolveItem:r,onFinish:a}=f;let o=performance.now(),t=!1;function s(){const e=performance.now(),u=e-o,{size:c}=n;if(u<.2&&c>0&&c<10){o=e,i();return}t||(t=!0,Promise.resolve().then(()=>{t=!1,o=performance.now(),i()}))}function i(){if(n.size!==0){for(const e of n)r&&r(e),n.delete(e);if(n.size>0){s();return}a()}}function l(e){n.add(e),s()}return l}export{S as createScheduler};

package/esm/utils/shallow.js

@@ -0,0 +1 @@
+import{isArray as f,isMap as o,isSet as i}from"./is";function b(r,t){if(r==t)return!0;if(typeof r!="object"||r==null||typeof t!="object"||t==null)return!1;if(o(r)&&o(t)){if(r.size!==t.size)return!1;for(const[e,n]of r)if(!Object.is(n,t.get(e)))return!1;return!0}if(i(r)&&i(t)){if(r.size!==t.size)return!1;for(const e of r)if(!t.has(e))return!1;return!0}if(f(r)&&f(t)){if(r.length!==t.length)return!1;for(const[e,n]of r.entries())if(!Object.is(n,t[e]))return!1;return!0}const s=Object.keys(r),c=Object.keys(t);if(s.length!==c.length)return!1;for(const e of s)if(!Object.prototype.hasOwnProperty.call(t,e)||!Object.is(r[e],t[e]))return!1;return!0}export{b as shallow};