muya 2.0.1 → 2.0.2

package/README.md

@@ -217,6 +217,40 @@ const asyncState = state.select(async (s) => {
 ```
 ---
 
+### Lazy resolution
+`Muya` can be used in `immediate` mode or in `lazy` mode. When create a state with just plain data, it will be in immediate mode, but if you create a state with a function, it will be in lazy mode. This is useful when you want to create a state that is executed only when it is accessed for the first time.
+
+
+```typescript
+// immediate mode, so no matter what, this value is already stored in memory
+const state = create(0)
+
+// lazy mode, value is not stored in memory until it is accessed for the first time via get or component render
+const state = create(() => 0)
+```
+
+And in async:
+```typescript
+// we can create some initial functions like this
+async function initialLoad() {
+  return 0
+}
+// immediate mode, so no matter what, this value is already stored in memory
+const state = create(initialLoad)
+// or
+const state = create(Promise.resolve(0))
+
+// lazy mode, value is not stored in memory until it is accessed for the first time via get or component render
+const state = create(() => Promise.resolve(0))  
+```
+
+And when setting state when initial value is promise, set is always sync.
+But as in react there are two methods how to set a state. Directly `.set(2)` or with a function `.set((prev) => prev + 1)`.
+
+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. 
+
 ### 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.
 

package/cjs/index.js

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

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

package/esm/debug/development-tools.js

@@ -1 +1 @@
-import{isPromise as a,isState as p}from"../utils/is";const o=window?.__REDUX_DEVTOOLS_EXTENSION__?.connect({name:"CustomState",trace:!0});o&&o.init({message:"Initial state"});function s(e){if(!o)return;const{message:t,type:n,value:i,name:r}=e;a(i)||o.send(r,{value:i,type:n,message:t},n)}function m(e,t){return n=>{s({name:e,type:t,value:n,message:"update"})}}function l(e){}export{l as subscribeToDevelopmentTools};
+import{isPromise as r,isState as a}from"../utils/is";const o=window?.__REDUX_DEVTOOLS_EXTENSION__?.connect({name:"CustomState",trace:!0});o&&o.init({message:"Initial state"});function p(e){if(!o)return;const{message:t,type:n,value:s,name:i}=e;r(s)||o.send(i,{value:s,type:n,message:t},n)}function m(e,t){return n=>{p({name:e,type:t,value:n,message:"update"})}}function S(e){}export{S as subscribeToDevelopmentTools};

package/package.json

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

package/src/__tests__/create.test.tsx

@@ -1,6 +1,7 @@
 import { create } from '../create'
 import { waitFor } from '@testing-library/react'
 import { longPromise } from './test-utils'
+import { isPromise } from '../utils/is'
 
 describe('create', () => {
   it('should get basic value states', async () => {
@@ -56,9 +57,16 @@ describe('create', () => {
     })
   })
 
-  it('should initialize state with a function', () => {
+  it('should initialize state with a lazy value', () => {
     const initialValue = jest.fn(() => 10)
     const state = create(initialValue)
+    expect(initialValue).not.toHaveBeenCalled()
+    expect(state.get()).toBe(10)
+  })
+
+  it('should initialize state with direct lazy value', () => {
+    const initialValue = jest.fn(() => 10)
+    const state = create(initialValue())
     expect(initialValue).toHaveBeenCalled()
     expect(state.get()).toBe(10)
   })
@@ -156,4 +164,62 @@ describe('create', () => {
       expect(listener).toHaveBeenCalledWith(2)
     })
   })
+
+  it('should resolve immediately when state is promise', async () => {
+    const promiseMock = jest.fn(() => longPromise(100))
+    const state1 = create(promiseMock())
+    expect(promiseMock).toHaveBeenCalled()
+    state1.set((value) => {
+      // set with callback will be executed later when promise is resolved
+      expect(isPromise(value)).toBe(false)
+      return value + 1
+    })
+
+    await waitFor(() => {
+      expect(state1.get()).toBe(1)
+    })
+
+    state1.set(2)
+    await waitFor(() => {
+      expect(state1.get()).toBe(2)
+    })
+
+    state1.set((value) => {
+      expect(isPromise(value)).toBe(false)
+      return value + 1
+    })
+
+    await waitFor(() => {
+      expect(state1.get()).toBe(3)
+    })
+  })
+
+  it('should resolve lazy when state is promise', async () => {
+    const promiseMock = jest.fn(() => longPromise(100))
+    const state1 = create(promiseMock)
+    expect(promiseMock).not.toHaveBeenCalled()
+    state1.set((value) => {
+      // set with callback will be executed later when promise is resolved
+      expect(isPromise(value)).toBe(false)
+      return value + 1
+    })
+
+    await waitFor(() => {
+      expect(state1.get()).toBe(1)
+    })
+
+    state1.set(2)
+    await waitFor(() => {
+      expect(state1.get()).toBe(2)
+    })
+
+    state1.set((value) => {
+      expect(isPromise(value)).toBe(false)
+      return value + 1
+    })
+
+    await waitFor(() => {
+      expect(state1.get()).toBe(3)
+    })
+  })
 })

package/src/create.ts

@@ -1,6 +1,6 @@
 import { canUpdate, handleAsyncUpdate } from './utils/common'
-import { isEqualBase, isFunction, isSetValueFunction, isUndefined } from './utils/is'
-import type { Cache, DefaultValue, IsEqual, SetValue, State } from './types'
+import { isEqualBase, isFunction, isPromise, isSetValueFunction, isUndefined } from './utils/is'
+import type { Cache, DefaultValue, IsEqual, SetStateCb, SetValue, State } from './types'
 import { createScheduler } from './scheduler'
 import { subscribeToDevelopmentTools } from './debug/development-tools'
 import { createState } from './create-state'
@@ -19,21 +19,37 @@ export function create<T>(initialValue: DefaultValue<T>, isEqual: IsEqual<T> = i
         const value = isFunction(initialValue) ? initialValue() : initialValue
         const resolvedValue = handleAsyncUpdate(cache, state.emitter.emit, value)
         cache.current = resolvedValue
+
+        return cache.current
       }
       return cache.current
     } catch (error) {
       cache.current = error as T
     }
+
     return cache.current
   }
 
+  async function handleAsyncSetValue(previousPromise: Promise<T>, value: SetStateCb<T>) {
+    await previousPromise
+    const newValue = value(cache.current as Awaited<T>)
+    const resolvedValue = handleAsyncUpdate(cache, state.emitter.emit, newValue)
+    cache.current = resolvedValue
+  }
+
   function setValue(value: SetValue<T>) {
+    const previous = getValue()
+    const isFunctionValue = isSetValueFunction(value)
+
+    if (isFunctionValue && isPromise(previous)) {
+      handleAsyncSetValue(previous as Promise<T>, value)
+      return
+    }
     if (cache.abortController) {
       cache.abortController.abort()
     }
 
-    const previous = getValue()
-    const newValue = isSetValueFunction(value) ? value(previous) : value
+    const newValue = isFunctionValue ? value(previous as Awaited<T>) : value
     const resolvedValue = handleAsyncUpdate(cache, state.emitter.emit, newValue)
     cache.current = resolvedValue
   }
@@ -62,6 +78,10 @@ export function create<T>(initialValue: DefaultValue<T>, isEqual: IsEqual<T> = i
     onResolveItem: setValue,
   })
 
+  if (!isFunction(initialValue)) {
+    getValue()
+  }
+
   subscribeToDevelopmentTools(state)
   return state
 }

package/src/debug/development-tools.ts

@@ -47,6 +47,5 @@ export function subscribeToDevelopmentTools<T>(state: State<T> | GetState<T>) {
     type = 'derived'
   }
   const name = state.stateName?.length ? state.stateName : `${type}(${state.id.toString()})`
-  sendToDevelopmentTools({ name, type, value: state.get(), message: 'initial' })
   return state.listen(developmentToolsListener(name, type))
 }

package/src/types.ts

@@ -1,7 +1,7 @@
 import type { Emitter } from './utils/create-emitter'
 
 export type IsEqual<T = unknown> = (a: T, b: T) => boolean
-export type SetStateCb<T> = (value: T | Awaited<T>) => Awaited<T>
+export type SetStateCb<T> = (value: Awaited<T>) => Awaited<T>
 export type SetValue<T> = SetStateCb<T> | Awaited<T>
 export type DefaultValue<T> = T | (() => T)
 export type Listener<T> = (listener: (value: T) => void) => () => void

package/types/types.d.ts

@@ -1,6 +1,6 @@
 import type { Emitter } from './utils/create-emitter';
 export type IsEqual<T = unknown> = (a: T, b: T) => boolean;
-export type SetStateCb<T> = (value: T | Awaited<T>) => Awaited<T>;
+export type SetStateCb<T> = (value: Awaited<T>) => Awaited<T>;
 export type SetValue<T> = SetStateCb<T> | Awaited<T>;
 export type DefaultValue<T> = T | (() => T);
 export type Listener<T> = (listener: (value: T) => void) => () => void;