muya 2.0.7 → 2.0.9

package/README.md

@@ -251,6 +251,11 @@ So how `set` state will behave with async initial value?
 1. Directly call `.set(2)` will be sync, and will set the value to 2 (it will cancel the initial promise)
 2. Call `.set((prev) => prev + 1)` will wait until previous promise is resolved, so previous value in set callback is always resolved. 
 
+### Async selectors knowledge base
+1. Values in selectors derived from another async selectors will be always sync **(not promise)**
+2. If the selector is async (`state.select(async (s) => s + 1)`) it will automatically use suspense mode, so on each change it firstly resolved promise (hit suspense) and then update the value.
+3. If the selector is sync, but it's derived from async selector, it will also be in suspense mode - but it depends what the parent is, if the parent is async state, it will hit the suspense only once, on initial load, but if the parent is another async selector, it will hit suspense on each change.
+
 ### Debugging
 `Muya` in dev mode automatically connects to the `redux` devtools extension if it is installed in the browser. For now devtool api is simple - state updates.
 
@@ -258,3 +263,6 @@ So how `set` state will behave with async initial value?
 
 This library is a fun, experimental project and not a replacement for robust state management tools. For more advanced use cases, consider libraries like `Zustand`, `Jotai`, or `Redux`. 
 If you enjoy `Muya`, please give it a ⭐️! :)
+
+
+

package/cjs/index.js

@@ -1 +1 @@
-"use strict";var I=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var _=(e,t)=>{for(var r in t)I(e,r,{get:t[r],enumerable:!0})},K=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of j(t))!N.call(e,o)&&o!==r&&I(e,o,{get:()=>t[o],enumerable:!(n=M(t,o))||n.enumerable});return e};var Y=e=>K(I({},"__esModule",{value:!0}),e);var Z={};_(Z,{EMPTY_SELECTOR:()=>D,create:()=>R,isAbortError:()=>v,isArray:()=>k,isEqualBase:()=>T,isError:()=>G,isFunction:()=>b,isMap:()=>E,isPromise:()=>l,isSet:()=>g,isSetValueFunction:()=>A,isState:()=>Q,isUndefined:()=>m,select:()=>C,shallow:()=>L,useValue:()=>O});module.exports=Y(Z);var d=class extends Error{static Error="AbortError"};function J(e,t){t&&t.abort();let r=new AbortController,{signal:n}=r;return{promise:new Promise((s,i)=>{n.addEventListener("abort",()=>{i(new d)}),e.then(s).catch(i)}),controller:r}}function x(e,t=T){if(!m(e.current)){if(!m(e.previous)&&t(e.current,e.previous))return!1;e.previous=e.current}return!0}function p(e,t,r){if(!l(r))return r;e.abortController&&e.abortController.abort();let{promise:n,controller:o}=J(r,e.abortController);return e.abortController=o,n.then(s=>{e.current=s,t()}).catch(s=>{v(s)||(e.current=s,t())})}function l(e){return e instanceof Promise}function b(e){return typeof e=="function"}function E(e){return e instanceof Map}function g(e){return e instanceof Set}function k(e){return Array.isArray(e)}function T(e,t){return e===t?!0:!!Object.is(e,t)}function A(e){return typeof e=="function"}function v(e){return e instanceof d}function G(e){return e instanceof Error}function m(e){return e===void 0}function Q(e){return b(e)&&"get"in e&&"set"in e&&"isSet"in e&&e.isSet===!0}var D=e=>e;function q(){let e=new Map,t=new Set,r=performance.now(),n=!1;function o(){let i=performance.now(),a=i-r,{size:u}=t;if(a<.2&&u>0&&u<10){r=i,s();return}n||(n=!0,Promise.resolve().then(()=>{n=!1,r=performance.now(),s()}))}function s(){if(t.size===0)return;let i=new Set;for(let a of t){if(e.has(a.id)){i.add(a.id);let{onResolveItem:u}=e.get(a.id);u&&u(a.value)}t.delete(a)}if(t.size>0){o();return}for(let a of i)e.get(a)?.onFinish()}return{add(i,a){return e.set(i,a),()=>{e.delete(i)}},schedule(i,a){t.add({value:a,id:i}),o()}}}function C(e,t,r){let n={};function o(){let c=[],f=!1;for(let S of e){let y=S.get();l(y)&&(f=!0),c.push(y)}return f?new Promise((S,y)=>{Promise.all(c).then(U=>{if(U.some(H=>m(H)))return y(new d);let z=t(...U);S(z)})}):t(...c)}function s(){if(m(n.current)){let c=o();n.current=p(n,a.emitter.emit,c)}return n.current}let i=[];for(let c of e){let f=c.emitter.subscribe(()=>{h.schedule(a.id,null)});i.push(f)}let a=P({destroy(){for(let c of i)c();u(),a.emitter.clear(),n.current=void 0},get:s}),u=h.add(a.id,{onFinish(){let c=o();n.current=p(n,a.emitter.emit,c),x(n,r)&&a.emitter.emit()}});return a}var V=require("react");function O(e,t=D){let{emitter:r}=e,n=(0,V.useSyncExternalStore)(e.emitter.subscribe,()=>t(r.getSnapshot()),()=>t(r.getInitialSnapshot?r.getInitialSnapshot():r.getSnapshot()));if((0,V.useDebugValue)(n),l(n)||G(n))throw n;return n}function F(e,t){let r=new Set,n=[];return{clear:()=>{for(let o of n)o();r.clear()},subscribe:o=>(r.add(o),()=>{r.delete(o)}),emit:(...o)=>{for(let s of r)s(...o)},contains:o=>r.has(o),getSnapshot:e,getInitialSnapshot:t,getSize:()=>r.size,subscribeToOtherEmitter(o){let s=o.subscribe(()=>{this.emit()});n.push(s)}}}var W=0;function X(){return W++}function P(e){let{get:t,destroy:r,set:n}=e,o=!!n,s=function(i){return O(s,i)};return s.isSet=o,s.id=X(),s.emitter=F(t),s.destroy=r,s.listen=function(i){return this.emitter.subscribe(()=>{let a=t();l(a)||i(t())})},s.withName=function(i){return this.stateName=i,this},s.select=function(i,a=T){return C([s],i,a)},s.get=t,s.set=n,s}var h=q();function R(e,t=T){let r={};function n(){try{if(m(r.current)){let u=b(e)?e():e,c=p(r,i.emitter.emit,u);return r.current=c,r.current}return r.current}catch(u){r.current=u}return r.current}async function o(u,c){await u;let f=c(r.current),w=p(r,i.emitter.emit,f);r.current=w}function s(u){let c=n(),f=A(u);if(f&&l(c)){o(c,u);return}r.abortController&&r.abortController.abort();let w=f?u(c):u,S=p(r,i.emitter.emit,w);r.current=S}let i=P({get:n,destroy(){n(),a(),i.emitter.clear(),r.current=void 0},set(u){h.schedule(i.id,u)}}),a=h.add(i.id,{onFinish(){r.current=n(),x(r,t)&&i.emitter.emit()},onResolveItem:s});return b(e)||n(),i}function L(e,t){if(e==t)return!0;if(typeof e!="object"||e==null||typeof t!="object"||t==null)return!1;if(E(e)&&E(t)){if(e.size!==t.size)return!1;for(let[o,s]of e)if(!Object.is(s,t.get(o)))return!1;return!0}if(g(e)&&g(t)){if(e.size!==t.size)return!1;for(let o of e)if(!t.has(o))return!1;return!0}if(k(e)&&k(t)){if(e.length!==t.length)return!1;for(let[o,s]of e.entries())if(!Object.is(s,t[o]))return!1;return!0}let r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return!1;for(let o of r)if(!Object.prototype.hasOwnProperty.call(t,o)||!Object.is(e[o],t[o]))return!1;return!0}
+"use strict";var I=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var r in t)I(e,r,{get:t[r],enumerable:!0})},Y=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of N(t))!_.call(e,o)&&o!==r&&I(e,o,{get:()=>t[o],enumerable:!(n=j(t,o))||n.enumerable});return e};var J=e=>Y(I({},"__esModule",{value:!0}),e);var $={};K($,{EMPTY_SELECTOR:()=>F,create:()=>L,isAbortError:()=>v,isArray:()=>k,isEqualBase:()=>S,isError:()=>D,isFunction:()=>w,isMap:()=>E,isPromise:()=>f,isSet:()=>g,isSetValueFunction:()=>G,isState:()=>W,isUndefined:()=>d,select:()=>P,shallow:()=>z,useValue:()=>V});module.exports=J($);var T=class extends Error{static Error="AbortError"};function Q(e,t){t&&t.abort();let r=new AbortController,{signal:n}=r;return{promise:new Promise((u,s)=>{n.addEventListener("abort",()=>{s(new T)}),e.then(u).catch(s)}),controller:r}}function x(e,t=S){if(!d(e.current)){if(!d(e.previous)&&t(e.current,e.previous))return!1;e.previous=e.current}return!0}function p(e,t,r){if(!f(r))return r;e.abortController&&e.abortController.abort();let{promise:n,controller:o}=Q(r,e.abortController);return e.abortController=o,n.then(u=>{e.current=u,t()}).catch(u=>{v(u)||(e.current=u,t())})}function f(e){return e instanceof Promise}function w(e){return typeof e=="function"}function E(e){return e instanceof Map}function g(e){return e instanceof Set}function k(e){return Array.isArray(e)}function S(e,t){return e===t?!0:!!Object.is(e,t)}function G(e){return typeof e=="function"}function v(e){return e instanceof T}function D(e){return e instanceof Error}function d(e){return e===void 0}function W(e){return w(e)&&"get"in e&&"set"in e&&"isSet"in e&&e.isSet===!0}var F=e=>e;function q(){let e=new Map,t=new Set,r=performance.now(),n=!1;function o(){let s=performance.now(),a=s-r,{size:i}=t;if(a<.2&&i>0&&i<10){r=s,u();return}n||(n=!0,Promise.resolve().then(()=>{n=!1,r=performance.now(),u()}))}function u(){if(t.size===0)return;let s=new Set;for(let a of t){if(e.has(a.id)){s.add(a.id);let{onResolveItem:i}=e.get(a.id);i&&i(a.value)}t.delete(a)}if(t.size>0){o();return}for(let a of s)e.get(a)?.onFinish()}return{add(s,a){return e.set(s,a),()=>{e.delete(s)}},schedule(s,a){t.add({value:a,id:s}),o()}}}function P(e,t,r){let n={};function o(){let c=!1,l=e.map(O=>{let y=O.get();return f(y)&&(c=!0),y});return c?new Promise((O,y)=>{Promise.all(l).then(U=>{if(U.some(H=>d(H)))return y(new T);let M=t(...U);O(M)})}):t(...l)}function u(){if(d(n.current)){let c=o();n.current=p(n,i.emitter.emit,c)}return n.current}function s(){if(d(n.current)){let l=o();n.current=p(n,i.emitter.emit,l)}let{current:c}=n;return f(c)?new Promise(l=>{c.then(b=>{if(d(b)){l(s());return}l(b)})}):n.current}let a=[];for(let c of e){let l=c.emitter.subscribe(()=>{h.schedule(i.id,null)});a.push(l)}let i=C({destroy(){for(let c of a)c();m(),i.emitter.clear(),n.current=void 0},get:s,getSnapshot:u}),m=h.add(i.id,{onFinish(){let c=o();n.current=p(n,i.emitter.emit,c),x(n,r)&&i.emitter.emit()}});return i}var A=require("react");function V(e,t=F){let{emitter:r}=e,n=(0,A.useSyncExternalStore)(e.emitter.subscribe,()=>t(r.getSnapshot()),()=>t(r.getInitialSnapshot?r.getInitialSnapshot():r.getSnapshot()));if((0,A.useDebugValue)(n),f(n)||D(n))throw n;return n}function R(e,t){let r=new Set,n=[];return{clear:()=>{for(let o of n)o();r.clear()},subscribe:o=>(r.add(o),()=>{r.delete(o)}),emit:(...o)=>{for(let u of r)u(...o)},contains:o=>r.has(o),getSnapshot:e,getInitialSnapshot:t,getSize:()=>r.size,subscribeToOtherEmitter(o){let u=o.subscribe(()=>{this.emit()});n.push(u)}}}var X=0;function Z(){return X++}function C(e){let{get:t,destroy:r,set:n,getSnapshot:o}=e,u=!!n,s=function(a){return V(s,a)};return s.isSet=u,s.id=Z(),s.emitter=R(o),s.destroy=r,s.listen=function(a){return this.emitter.subscribe(()=>{let i=t();f(i)||a(t())})},s.withName=function(a){return this.stateName=a,this},s.select=function(a,i=S){return P([s],a,i)},s.get=t,s.set=n,s}var h=q();function L(e,t=S){let r={};function n(){try{if(d(r.current)){let i=w(e)?e():e,m=p(r,s.emitter.emit,i);return r.current=m,r.current}return r.current}catch(i){r.current=i}return r.current}async function o(i,m){await i;let c=m(r.current),l=p(r,s.emitter.emit,c);r.current=l}function u(i){let m=n(),c=G(i);if(c&&f(m)){o(m,i);return}r.abortController&&r.abortController.abort();let l=c?i(m):i,b=p(r,s.emitter.emit,l);r.current=b}let s=C({get:n,destroy(){n(),a(),s.emitter.clear(),r.current=void 0},set(i){h.schedule(s.id,i)},getSnapshot:n}),a=h.add(s.id,{onFinish(){r.current=n(),x(r,t)&&s.emitter.emit()},onResolveItem:u});return w(e)||n(),s}function z(e,t){if(e==t)return!0;if(typeof e!="object"||e==null||typeof t!="object"||t==null)return!1;if(E(e)&&E(t)){if(e.size!==t.size)return!1;for(let[o,u]of e)if(!Object.is(u,t.get(o)))return!1;return!0}if(g(e)&&g(t)){if(e.size!==t.size)return!1;for(let o of e)if(!t.has(o))return!1;return!0}if(k(e)&&k(t)){if(e.length!==t.length)return!1;for(let[o,u]of e.entries())if(!Object.is(u,t[o]))return!1;return!0}let r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return!1;for(let o of r)if(!Object.prototype.hasOwnProperty.call(t,o)||!Object.is(e[o],t[o]))return!1;return!0}

package/esm/create-state.js

@@ -1 +1 @@
-import{select as u}from"./select";import{useValue as l}from"./use-value";import{createEmitter as S}from"./utils/create-emitter";import{isEqualBase as c,isPromise as m}from"./utils/is";let d=0;function f(){return d++}function G(i){const{get:r,destroy:n,set:a}=i,o=!!a,t=function(e){return l(t,e)};return t.isSet=o,t.id=f(),t.emitter=S(r),t.destroy=n,t.listen=function(e){return this.emitter.subscribe(()=>{const s=r();m(s)||e(r())})},t.withName=function(e){return this.stateName=e,this},t.select=function(e,s=c){return u([t],e,s)},t.get=r,t.set=a,t}export{G as createState};
+import{select as l}from"./select";import{useValue as S}from"./use-value";import{createEmitter as c}from"./utils/create-emitter";import{isEqualBase as d,isPromise as m}from"./utils/is";let T=0;function f(){return T++}function h(n){const{get:r,destroy:o,set:a,getSnapshot:i}=n,u=!!a,t=function(e){return S(t,e)};return t.isSet=u,t.id=f(),t.emitter=c(i),t.destroy=o,t.listen=function(e){return this.emitter.subscribe(()=>{const s=r();m(s)||e(r())})},t.withName=function(e){return this.stateName=e,this},t.select=function(e,s=d){return l([t],e,s)},t.get=r,t.set=a,t}export{h as createState};

package/esm/create.js

@@ -1 +1 @@
-import{canUpdate as p,handleAsyncUpdate as u}from"./utils/common";import{isEqualBase as V,isFunction as i,isPromise as h,isSetValueFunction as b,isUndefined as y}from"./utils/is";import{createScheduler as C}from"./scheduler";import{subscribeToDevelopmentTools as w}from"./debug/development-tools";import{createState as v}from"./create-state";const l=C();function I(c,m=V){const e={};function o(){try{if(y(e.current)){const t=i(c)?c():c,n=u(e,r.emitter.emit,t);return e.current=n,e.current}return e.current}catch(t){e.current=t}return e.current}async function d(t,n){await t;const a=n(e.current),s=u(e,r.emitter.emit,a);e.current=s}function f(t){const n=o(),a=b(t);if(a&&h(n)){d(n,t);return}e.abortController&&e.abortController.abort();const s=a?t(n):t,S=u(e,r.emitter.emit,s);e.current=S}const r=v({get:o,destroy(){o(),T(),r.emitter.clear(),e.current=void 0},set(t){l.schedule(r.id,t)}}),T=l.add(r.id,{onFinish(){e.current=o(),p(e,m)&&r.emitter.emit()},onResolveItem:f});return i(c)||o(),w(r),r}export{I as create,l as stateScheduler};
+import{canUpdate as p,handleAsyncUpdate as u}from"./utils/common";import{isEqualBase as h,isFunction as i,isPromise as V,isSetValueFunction as b,isUndefined as y}from"./utils/is";import{createScheduler as C}from"./scheduler";import{subscribeToDevelopmentTools as w}from"./debug/development-tools";import{createState as v}from"./create-state";const l=C();function E(c,m=h){const e={};function o(){try{if(y(e.current)){const t=i(c)?c():c,n=u(e,r.emitter.emit,t);return e.current=n,e.current}return e.current}catch(t){e.current=t}return e.current}async function d(t,n){await t;const a=n(e.current),s=u(e,r.emitter.emit,a);e.current=s}function f(t){const n=o(),a=b(t);if(a&&V(n)){d(n,t);return}e.abortController&&e.abortController.abort();const s=a?t(n):t,S=u(e,r.emitter.emit,s);e.current=S}const r=v({get:o,destroy(){o(),T(),r.emitter.clear(),e.current=void 0},set(t){l.schedule(r.id,t)},getSnapshot:o}),T=l.add(r.id,{onFinish(){e.current=o(),p(e,m)&&r.emitter.emit()},onResolveItem:f});return i(c)||o(),w(r),r}export{E as create,l as stateScheduler};

package/esm/select.js

@@ -1 +1 @@
-import{stateScheduler as m}from"./create";import{createState as w}from"./create-state";import{subscribeToDevelopmentTools as b}from"./debug/development-tools";import{AbortError as k,canUpdate as v,handleAsyncUpdate as f}from"./utils/common";import{isPromise as A,isUndefined as d}from"./utils/is";function U(c,u,p){const t={};function a(){const e=[];let r=!1;for(const s of c){const o=s.get();A(o)&&(r=!0),e.push(o)}return r?new Promise((s,o)=>{Promise.all(e).then(l=>{if(l.some(y=>d(y)))return o(new k);const h=u(...l);s(h)})}):u(...e)}function S(){if(d(t.current)){const e=a();t.current=f(t,n.emitter.emit,e)}return t.current}const i=[];for(const e of c){const r=e.emitter.subscribe(()=>{m.schedule(n.id,null)});i.push(r)}const n=w({destroy(){for(const e of i)e();T(),n.emitter.clear(),t.current=void 0},get:S}),T=m.add(n.id,{onFinish(){const e=a();t.current=f(t,n.emitter.emit,e),v(t,p)&&n.emitter.emit()}});return b(n),n}export{U as select};
+import{stateScheduler as T}from"./create";import{createState as b}from"./create-state";import{subscribeToDevelopmentTools as P}from"./debug/development-tools";import{AbortError as V,canUpdate as g,handleAsyncUpdate as c}from"./utils/common";import{isPromise as y,isUndefined as i}from"./utils/is";function U(m,d,w){const e={};function s(){let t=!1;const r=m.map(u=>{const o=u.get();return y(o)&&(t=!0),o});return t?new Promise((u,o)=>{Promise.all(r).then(p=>{if(p.some(k=>i(k)))return o(new V);const A=d(...p);u(A)})}):d(...r)}function S(){if(i(e.current)){const t=s();e.current=c(e,n.emitter.emit,t)}return e.current}function f(){if(i(e.current)){const r=s();e.current=c(e,n.emitter.emit,r)}const{current:t}=e;return y(t)?new Promise(r=>{t.then(a=>{if(i(a)){r(f());return}r(a)})}):e.current}const l=[];for(const t of m){const r=t.emitter.subscribe(()=>{T.schedule(n.id,null)});l.push(r)}const n=b({destroy(){for(const t of l)t();h(),n.emitter.clear(),e.current=void 0},get:f,getSnapshot:S}),h=T.add(n.id,{onFinish(){const t=s();e.current=c(e,n.emitter.emit,t),g(e,w)&&n.emitter.emit()}});return P(n),n}export{U as select};

package/esm/use-value.js

@@ -1 +1 @@
-import{useDebugValue as r,useSyncExternalStore as o}from"react";import{EMPTY_SELECTOR as a}from"./types";import{isError as s,isPromise as S}from"./utils/is";function d(i,n=a){const{emitter:e}=i,t=o(i.emitter.subscribe,()=>n(e.getSnapshot()),()=>n(e.getInitialSnapshot?e.getInitialSnapshot():e.getSnapshot()));if(r(t),S(t)||s(t))throw t;return t}export{d as useValue};
+import{useDebugValue as n,useSyncExternalStore as r}from"react";import{EMPTY_SELECTOR as o}from"./types";import{isError as s,isPromise as S}from"./utils/is";function p(i,a=o){const{emitter:e}=i,t=r(i.emitter.subscribe,()=>a(e.getSnapshot()),()=>a(e.getInitialSnapshot?e.getInitialSnapshot():e.getSnapshot()));if(n(t),S(t)||s(t))throw t;return t}export{p as useValue};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muya",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "author": "samuel.gjabel@gmail.com",
   "repository": "https://github.com/samuelgjabel/muya",
   "main": "cjs/index.js",

package/src/__tests__/compare.test.tsx

@@ -0,0 +1,68 @@
+import { act, renderHook } from '@testing-library/react-hooks'
+import { create } from '../create'
+import { longPromise } from './test-utils'
+import { waitFor } from '@testing-library/react'
+import { atom, useAtom, useSetAtom } from 'jotai'
+
+describe('compare', () => {
+  it('should render async value with sync selector', async () => {
+    const state = create(longPromise(100))
+    const selectedState = state.select((value) => {
+      return value + 2
+    })
+    const listen = jest.fn()
+
+    const { result } = renderHook(() => {
+      listen()
+      const value = selectedState()
+      return value
+    })
+
+    await waitFor(() => {
+      expect(result.current).toBe(2)
+      expect(listen).toHaveBeenCalledTimes(2)
+    })
+
+    state.set(1)
+
+    await waitFor(() => {
+      expect(result.current).toBe(3)
+      // muya re-render only 3 times
+      expect(listen).toHaveBeenCalledTimes(3)
+    })
+  })
+  it('should render async value with sync selector with jotai', async () => {
+    const state = atom(longPromise(100))
+
+    const selectedState = atom(async (get) => {
+      const value = get(state)
+      return (await value) + 2
+    })
+
+    const listen = jest.fn()
+    const { result: setResult } = renderHook(() => {
+      const value = useSetAtom(state)
+      return value
+    })
+    const { result } = renderHook(() => {
+      listen()
+      const value = useAtom(selectedState)
+      return value
+    })
+
+    await waitFor(() => {
+      expect(result.current[0]).toBe(2)
+      expect(listen).toHaveBeenCalledTimes(3)
+    })
+
+    act(() => {
+      setResult.current(1 as never)
+    })
+
+    await waitFor(() => {
+      expect(result.current[0]).toBe(3)
+      // OH it render 5 times, sad.
+      expect(listen).toHaveBeenCalledTimes(5)
+    })
+  })
+})

package/src/__tests__/select.test.tsx

@@ -87,7 +87,7 @@ describe('select', () => {
     const state = create(longPromise(100))
     const selectedState = select([state], async (value) => {
       await longPromise(100)
-      return (await value) + 1
+      return value + 1
     })
     const listener = jest.fn()
     selectedState.listen(listener)
@@ -100,7 +100,7 @@ describe('select', () => {
     const state = create(longPromise(100))
     const selectedState = select([state], async (value) => {
       await longPromise(100)
-      return (await value) + 1
+      return value + 1
     })
     const selectedState2 = selectedState.select(async (value) => value + 1)
     const listener = jest.fn()
@@ -114,7 +114,7 @@ describe('select', () => {
     const state = create(longPromise(100))
     const selectedState = select([state], async (value) => {
       // await longPromise(100)
-      return (await value) + 1
+      return value + 1
     })
     const listener = jest.fn()
     selectedState.listen(listener)
@@ -205,4 +205,31 @@ describe('select', () => {
       expect(render).toHaveBeenCalledTimes(3)
     })
   })
+
+  it('should get value when initial value is promise', async () => {
+    const state = create(longPromise(100))
+    const selectedState = state.select((value) => {
+      return value + 2
+    })
+    expect(await selectedState.get()).toBe(2)
+  })
+
+  it('should have sync get method sync', async () => {
+    const state = create(100)
+    const selectedState = state.select((value) => {
+      return value + 2
+    })
+    expect(selectedState.get()).toBe(102)
+  })
+
+  it('should have async get method sync', async () => {
+    const state = create(100)
+    const selectedState = state.select((value) => {
+      return value + 2
+    })
+    const selectedState2 = selectedState.select(async (value) => {
+      return value + 2
+    })
+    expect(await selectedState2.get()).toBe(104)
+  })
 })

package/src/create-state.ts

@@ -8,6 +8,7 @@ interface GetStateOptions<T> {
   readonly get: () => T
   readonly set?: (value: SetValue<T>) => void
   readonly destroy: () => void
+  readonly getSnapshot: () => T
 }
 
 let stateId = 0
@@ -20,7 +21,7 @@ type FullState<T> = GetStateOptions<T>['set'] extends undefined ? GetState<T> :
  * This is just utility function to create state base data
  */
 export function createState<T>(options: GetStateOptions<T>): FullState<T> {
-  const { get, destroy, set } = options
+  const { get, destroy, set, getSnapshot } = options
   const isSet = !!set
 
   const state: FullState<T> = function (selector) {
@@ -29,7 +30,7 @@ export function createState<T>(options: GetStateOptions<T>): FullState<T> {
   }
   state.isSet = isSet as true
   state.id = getStateId()
-  state.emitter = createEmitter<T>(get)
+  state.emitter = createEmitter<T>(getSnapshot)
   state.destroy = destroy
   state.listen = function (listener) {
     return this.emitter.subscribe(() => {
@@ -44,10 +45,10 @@ export function createState<T>(options: GetStateOptions<T>): FullState<T> {
     this.stateName = name
     return this
   }
-  state.select = function (selector, isSelectorEqual = isEqualBase) {
+  state.select = function (selector: never, isSelectorEqual = isEqualBase) {
     return select([state as never], selector, isSelectorEqual)
-  }
-  state.get = get
+  } as never
+  state.get = get as never
   state.set = set as State<T>['set']
 
   return state

package/src/create.ts

@@ -65,6 +65,7 @@ export function create<T>(initialValue: DefaultValue<T>, isEqual: IsEqual<T> = i
     set(value: SetValue<T>) {
       stateScheduler.schedule(state.id, value)
     },
+    getSnapshot: getValue,
   })
 
   const clearScheduler = stateScheduler.add(state.id, {

package/src/select.ts

@@ -9,29 +9,30 @@ type StateDependencies<T extends Array<unknown>> = {
   [K in keyof T]: GetState<T[K]>
 }
 
+type AwaitedArray<T extends Array<unknown>> = {
+  [K in keyof T]: Awaited<T[K]>
+}
 /**
  * Selecting state from multiple states.
  * It will create new state in read-only mode (without set).
  */
 export function select<T = unknown, S extends Array<unknown> = []>(
   states: StateDependencies<S>,
-  selector: (...values: S) => T,
+  selector: (...values: AwaitedArray<S>) => T,
   isEqual?: IsEqual<T>,
 ): GetState<T> {
   const cache: Cache<T> = {}
 
   function computedValue(): T {
-    // const values = states.map((state) => state.get()) as S
-
-    const values: unknown[] = []
     let hasPromise = false
-    for (const state of states) {
-      const value = state.get()
-      if (isPromise(value)) {
+    const values = states.map((state) => {
+      const stateValue = state.get()
+      if (isPromise(stateValue)) {
         hasPromise = true
       }
-      values.push(value)
-    }
+      return stateValue
+    }) as S
+
     if (hasPromise) {
       return new Promise((resolve, reject) => {
         Promise.all(values).then((resolvedValues) => {
@@ -40,20 +41,39 @@ export function select<T = unknown, S extends Array<unknown> = []>(
           if (resolvedValues.some((element) => isUndefined(element))) {
             return reject(new AbortError())
           }
-          const resolved = selector(...(resolvedValues as S))
+          const resolved = selector(...resolvedValues)
           resolve(resolved)
         })
       }) as T
     }
-    const result = selector(...(values as S))
+    const result = selector(...(values as AwaitedArray<S>))
     return result
   }
-
+  function getSnapshot(): T {
+    if (isUndefined(cache.current)) {
+      const newValue = computedValue()
+      cache.current = handleAsyncUpdate(cache, state.emitter.emit, newValue)
+    }
+    return cache.current
+  }
   function getValue(): T {
     if (isUndefined(cache.current)) {
       const newValue = computedValue()
       cache.current = handleAsyncUpdate(cache, state.emitter.emit, newValue)
     }
+    const { current } = cache
+    if (isPromise(current)) {
+      return new Promise((resolve) => {
+        current.then((value: unknown) => {
+          if (isUndefined(value)) {
+            resolve(getValue())
+            return
+          }
+
+          resolve(value)
+        })
+      }) as T
+    }
     return cache.current
   }
 
@@ -75,6 +95,7 @@ export function select<T = unknown, S extends Array<unknown> = []>(
       cache.current = undefined
     },
     get: getValue,
+    getSnapshot,
   })
 
   const clearScheduler = stateScheduler.add(state.id, {

package/src/types.ts

@@ -13,12 +13,12 @@ export interface Cache<T> {
 
 export const EMPTY_SELECTOR = <T, S>(stateValue: T) => stateValue as unknown as S
 
-export interface GetState<T> {
-  <S>(selector?: (stateValue: T) => S): Awaited<undefined extends S ? T : S>
+export interface GetState<T, IsFroMPromise extends boolean = false> {
+  <S>(selector?: (stateValue: Awaited<T>) => S): Awaited<undefined extends S ? T : S>
   /**
    * Get the cached state value.
    */
-  get: () => T
+  get: () => IsFroMPromise extends true ? Promise<T> : T
   /**
    * Get the unique id of the state.
    */
@@ -48,7 +48,7 @@ export interface GetState<T> {
    * Select particular slice of the state.
    * It will create "another" state in read-only mode (without set).
    */
-  select: <S>(selector: (state: Awaited<T>) => S, isEqual?: IsEqual<S>) => GetState<S>
+  select: <S>(selector: (state: Awaited<T>) => S, isEqual?: IsEqual<S>) => GetState<S, T extends Promise<unknown> ? true : false>
 }
 
 export interface State<T> extends GetState<T> {

package/src/use-value.ts

@@ -4,13 +4,13 @@ import { isError, isPromise } from './utils/is'
 
 export function useValue<T, S>(
   state: GetState<T>,
-  selector: (stateValue: T) => S = EMPTY_SELECTOR,
+  selector: (stateValue: Awaited<T>) => S = EMPTY_SELECTOR,
 ): Awaited<undefined extends S ? T : S> {
   const { emitter } = state
   const value = useSyncExternalStore<S>(
     state.emitter.subscribe,
-    () => selector(emitter.getSnapshot()),
-    () => selector(emitter.getInitialSnapshot ? emitter.getInitialSnapshot() : emitter.getSnapshot()),
+    () => selector(emitter.getSnapshot() as Awaited<T>),
+    () => selector((emitter.getInitialSnapshot ? emitter.getInitialSnapshot() : emitter.getSnapshot()) as Awaited<T>),
   )
   useDebugValue(value)
   if (isPromise(value)) {

package/types/create-state.d.ts

@@ -3,6 +3,7 @@ interface GetStateOptions<T> {
     readonly get: () => T;
     readonly set?: (value: SetValue<T>) => void;
     readonly destroy: () => void;
+    readonly getSnapshot: () => T;
 }
 type FullState<T> = GetStateOptions<T>['set'] extends undefined ? GetState<T> : State<T>;
 /**

package/types/select.d.ts

@@ -2,9 +2,12 @@ import type { GetState, IsEqual } from './types';
 type StateDependencies<T extends Array<unknown>> = {
     [K in keyof T]: GetState<T[K]>;
 };
+type AwaitedArray<T extends Array<unknown>> = {
+    [K in keyof T]: Awaited<T[K]>;
+};
 /**
  * Selecting state from multiple states.
  * It will create new state in read-only mode (without set).
  */
-export declare function select<T = unknown, S extends Array<unknown> = []>(states: StateDependencies<S>, selector: (...values: S) => T, isEqual?: IsEqual<T>): GetState<T>;
+export declare function select<T = unknown, S extends Array<unknown> = []>(states: StateDependencies<S>, selector: (...values: AwaitedArray<S>) => T, isEqual?: IsEqual<T>): GetState<T>;
 export {};

package/types/types.d.ts

@@ -10,12 +10,12 @@ export interface Cache<T> {
     abortController?: AbortController;
 }
 export declare const EMPTY_SELECTOR: <T, S>(stateValue: T) => S;
-export interface GetState<T> {
-    <S>(selector?: (stateValue: T) => S): Awaited<undefined extends S ? T : S>;
+export interface GetState<T, IsFroMPromise extends boolean = false> {
+    <S>(selector?: (stateValue: Awaited<T>) => S): Awaited<undefined extends S ? T : S>;
     /**
      * Get the cached state value.
      */
-    get: () => T;
+    get: () => IsFroMPromise extends true ? Promise<T> : T;
     /**
      * Get the unique id of the state.
      */
@@ -45,7 +45,7 @@ export interface GetState<T> {
      * Select particular slice of the state.
      * It will create "another" state in read-only mode (without set).
      */
-    select: <S>(selector: (state: Awaited<T>) => S, isEqual?: IsEqual<S>) => GetState<S>;
+    select: <S>(selector: (state: Awaited<T>) => S, isEqual?: IsEqual<S>) => GetState<S, T extends Promise<unknown> ? true : false>;
 }
 export interface State<T> extends GetState<T> {
     /**

package/types/use-value.d.ts

@@ -1,2 +1,2 @@
 import { type GetState } from './types';
-export declare function useValue<T, S>(state: GetState<T>, selector?: (stateValue: T) => S): Awaited<undefined extends S ? T : S>;
+export declare function useValue<T, S>(state: GetState<T>, selector?: (stateValue: Awaited<T>) => S): Awaited<undefined extends S ? T : S>;