bansa 0.0.6 → 0.0.8

package/README.ko.md

@@ -226,7 +226,7 @@ userAtom.set({ id: 2, name: 'Alice' });
 
 ### 여러 상태 병합하기
 
-`$$`로 여러 상태를 병합한 새로운 상태를 만들 수 있습니다. 사실 `$`와 똑같지만, `$`의 `get` 함수는 `Promise`나 에러를 만났을 때 즉시 throw하는 반면, `$$`의 `get` 함수는 특별한 객체를 반환하여 최소한의 재실행으로 최대한의 의존성을 추적합니다.
+`$$`로 여러 상태를 병합한 새로운 상태를 만들 수 있습니다. `$`와 사용법은 같지만, `$`의 `get` 함수는 `Promise`나 에러를 만났을 때 즉시 throw하는 반면, `$$`의 `get` 함수는 특별한 객체를 반환하여 최소한의 재실행으로 최대한의 의존성을 추적합니다. 또한, 배열이나 객체를 반환 시 한 단계 깊은 비교를 수행합니다.
 
 다음 코드는 `$`로 상태를 병합하면 5초가 걸리는 반면에, `$$`로 상태를 병합하면 단 1초만이 걸립니다.
 
@@ -248,6 +248,33 @@ Object.setPrototypeOf(o, new Proxy(o, { get: (_, k) => k === Symbol.toPrimitive
 
 이 코드의 `o`는 아무리 프로퍼티 접근 및 호출을 해도 같은 값을 반환합니다. 예를 들어, `o.a.b.c().d()().asdf()()()() === o`는 `true`입니다. 따라서, 셀렉터와 filter/map/reduce 등 간단한 메서드로 이뤄진 대부분의 상태 병합 함수에서 문제 없이 전체 코드를 실행할 수 있게 만듭니다. 하지만 만능은 아니므로 약간의 주의가 필요하며, 가급적 상태 병합에만 사용해야 합니다.
 
+또한 상태 병합 시 특정 값들에서 부분씩만 가져와 새로운 객체를 만드는 경우가 흔하므로, `$$`로 병합한 상태의 의존성들이 너무 자주 재실행되지 않도록 `$`의 `equals`를 다음으로 설정합니다:
+
+```typescript
+const shallowEquals = (a: any, b: any): boolean => {
+	if (typeof a !== 'object' || typeof b !== 'object' || !a || !b) return false;
+	const c = a.constructor;
+	if (c !== b.constructor) return false;
+
+	if (c === Array) {
+		let i = a.length;
+		if (i !== b.length) return false;
+		while ((i = i - 1 | 0) >= 0) if (!Object.is(a[i], b[i])) return false;
+		return true;
+	}
+
+	let n = 0;
+	for (const k in a) {
+		if (!(k in b && Object.is(a[k], b[k]))) return false;
+		n = n + 1 | 0;
+	}
+	for (const _ in b) if ((n = n - 1 | 0) < 0) return false;
+	return true;
+};
+```
+
+정확히 한 단계만 더 비교하므로, `{ arr: [...] }`와 같은 객체의 경우 `arr`의 내용이 같더라도 참조가 다르다면 의존성이 재실행됩니다. 필요하다면 `arr` 부분은 다른 `$$`로 감싼 뒤 합치거나, 상태를 직접 `$`로 `equals`를 주고 만드세요.
+
 ## 상세
 
 ### 상태를 얼마나 쪼개는 게 좋나요?

package/dist/index.browser.js

@@ -1 +1 @@
-var s=function(){};s.prototype.get=function(){if(this.n||(v(this),l(this)),this.state.promise)throw this.state.promise;if(this.state.error)throw this.state.error;return this.state.value};s.prototype.watch=function(e){return this.n||w(this),(this.l??=new Set).add(e),()=>{this.l.delete(e),this.l.size||l(this)}};s.prototype.subscribe=function(e){let t={f:e,V:{get signal(){return(t.t??=g()).signal}}};if(!this.n)w(this);else if(!this.state.promise&&!this.state.error)try{e(this.state.value,t.V)}catch(o){m(o)}return(this.s??=new Set).add(t),()=>{this.s.delete(t),t.t&&(t.t.abort(),t.t=void 0),this.s.size||l(this)}};s.prototype[Symbol.toPrimitive]=function(){return this.state.value};var u=function(e,t){this.c=t?.equals,this.state={promise:void 0,error:void 0,value:e},this.state.value=this.a=e};u.prototype.set=function(e){let t=e instanceof Function?e(this.a):e;b(t,this.state.value,this.c)||(this.a=t,A(this))};u.prototype.m=!0;u.prototype.n=!0;u.prototype.o=!1;Object.setPrototypeOf(u.prototype,s.prototype);var p=function(e,t){this.y=e,this.c=t?.equals,this.b=t?.persist,this.state={promise:S,error:void 0,value:void 0};let o=this;this.V={get signal(){return(o.t??=g()).signal}}};p.prototype.m=!1;p.prototype.n=!1;p.prototype.o=!1;p.prototype.i=0;Object.setPrototypeOf(p.prototype,s.prototype);var c=()=>c,k=()=>{};Object.setPrototypeOf(c,new Proxy(c,{get:(e,t)=>t===Symbol.toPrimitive?k:c}));var S=Promise.resolve(),_=(e,t)=>e instanceof Function?new p(e,t):new u(e,t),G=e=>_((t,o)=>{let r,n,d=e(x=>{try{return t(x)}catch(V){if(!V)throw V;h(V)?(r??=[]).push(V):n=V}return c},o);if(n)throw n;if(r)throw Promise.all(r);return d}),y=!1,a=[],w=e=>{e.u||(e.u=!0,A(e))},A=e=>{e.o||(e.o=!0,a.push(e),y||(y=!0,queueMicrotask(O)))},O=()=>{y=!1;{let t=a;a=[];for(let o of t)o.state.promise=void 0,o.state.error=o.A,o.state.value=o.a,P(o)}let e=a;a=[];for(let t=e.length;t--;){let o=e[t];o.d=!1,o.u&&(o.o=!0,v(o)),o.o&&I(o)}},I=e=>{if(e.o=!1,e.r)for(let t of e.r)t.u=!0;if(e.l)for(let t of e.l)t();if(e.s&&!e.state.promise&&!e.state.error)for(let t of e.s){t.t&&(t.t.abort(),t.t=void 0);try{t.f(e.state.value,t.V)}catch(o){m(o)}}},P=e=>{if(!e.d){if(e.d=!0,e.r)for(let t of e.r)P(t);a.push(e)}},i=class{e;constructor(t){this.e=t}},v=e=>{let t=++e.i;e.n=!0,e.u=!1,e.state.promise=void 0,e.t&&(e.t.abort(),e.t=void 0);let o=e.p;o&&(e.p=new Set);try{let r=e.y((n,d=!0)=>{if(t!==e.i)throw void 0;if(e!==n&&(n.n||(v(n),n.o&&(n.o=!1,I(n))),o?.delete(n),(e.p??=new Set).add(n),(n.r??=new Set).add(e)),!d)return n.state;if(n.state.promise)throw new i(n.state.promise);if(n.state.error)throw new i(n.state.error);return n.state.value},e.V);h(r)?(e.state.promise=r,r.then(n=>{t===e.i&&(b(n,e.state.value,e.c)?e.state.promise=void 0:(e.a=n,e.A=void 0,A(e)))},n=>{t===e.i&&(n instanceof Promise?e.state.promise=void 0:(n instanceof i?n=n.e:m(n),e.A=n,A(e)))})):(++e.i,e.state.error=void 0,b(r,e.state.value,e.c)?e.o=!1:e.state.value=e.a=r)}catch(r){++e.i,r?(r instanceof i?r=r.e:m(r),h(r)?e.state.promise=r:e.state.error=r):e.o=!1}if(o)for(let r of o)r.r.delete(e),l(r)},f=!1,l=e=>{if(!e.m&&!e.b&&!e.r?.size&&!e.l?.size&&!e.s?.size){if(!f){setTimeout(()=>{f=!0,l(e),f=!1},0);return}if(e.state.promise=S,e.a=e.A=e.state.error=e.state.value=void 0,e.o=e.u=e.n=!1,e.t&&(e.t.abort(),e.t=void 0),e.p){for(let t of e.p)t.r.delete(e),l(t);e.p.clear()}}},b=(e,t,o)=>Object.is(e,t)||o!==void 0&&t!==void 0&&o(e,t),h=e=>typeof e?.then=="function",g=()=>{let e=new AbortController,t=e.signal,o=new Promise(r=>{t.then=n=>o.then(n),t.addEventListener("abort",r,{once:!0,passive:!0})});return{abort:()=>e.abort(),signal:t}},m=e=>{queueMicrotask(()=>{throw e})};export{_ as $,G as $$,S as inactive};
+var s=function(){};s.prototype.get=function(){if(this.r||(v(this),l(this)),this.state.promise)throw this.state.promise;if(this.state.error)throw this.state.error;return this.state.value};s.prototype.watch=function(e){return this.r||w(this),(this.l??=new Set).add(e),()=>{this.l.delete(e),this.l.size||l(this)}};s.prototype.subscribe=function(e){let t={d:e,V:{get signal(){return(t.t??=g()).signal}}};if(!this.r)w(this);else if(!this.state.promise&&!this.state.error)try{e(this.state.value,t.V)}catch(r){A(r)}return(this.s??=new Set).add(t),()=>{this.s.delete(t),t.t&&(t.t.abort(),t.t=void 0),this.s.size||l(this)}};s.prototype[Symbol.toPrimitive]=function(){return this.state.value};var u=function(e,t){this.c=t?.equals,this.state={promise:void 0,error:void 0,value:e},this.state.value=this.a=e};u.prototype.set=function(e){let t=e instanceof Function?e(this.a):e;h(t,this.state.value,this.c)||(this.a=t,f(this))};u.prototype.A=!0;u.prototype.r=!0;u.prototype.n=!1;Object.setPrototypeOf(u.prototype,s.prototype);var p=function(e,t){this.y=e,this.c=t?.equals,this.h=t?.persist,this.state={promise:S,error:void 0,value:void 0};let r=this;this.V={get signal(){return(r.t??=g()).signal}}};p.prototype.A=!1;p.prototype.r=!1;p.prototype.n=!1;p.prototype.i=0;Object.setPrototypeOf(p.prototype,s.prototype);var c=()=>c,k=()=>{};Object.setPrototypeOf(c,new Proxy(c,{get:(e,t)=>t===Symbol.toPrimitive?k:c}));var S=Promise.resolve(),_=(e,t)=>e instanceof Function?new p(e,t):new u(e,t),D=e=>_((t,r)=>{let o,n,m=e(x=>{try{return t(x)}catch(V){if(!V)throw V;b(V)?(o??=[]).push(V):n=V}return c},r);if(n)throw n;if(o)throw Promise.all(o);return m},{equals:O}),O=(e,t)=>{if(typeof e!="object"||typeof t!="object"||!e||!t)return!1;let r=e.constructor;if(r!==t.constructor)return!1;if(r===Array){let n=e.length;if(n!==t.length)return!1;for(;(n=n-1|0)>=0;)if(!Object.is(e[n],t[n]))return!1;return!0}let o=0;for(let n in e){if(!(n in t&&Object.is(e[n],t[n])))return!1;o=o+1|0}for(let n in t)if((o=o-1|0)<0)return!1;return!0},y=!1,a=[],w=e=>{e.u||(e.u=!0,f(e))},f=e=>{e.n||(e.n=!0,a.push(e),y||(y=!0,queueMicrotask(G)))},G=()=>{y=!1;{let t=a;a=[];for(let r of t)r.state.promise=void 0,r.state.error=r.f,r.state.value=r.a,P(r)}let e=a;a=[];for(let t=e.length;t--;){let r=e[t];r.m=!1,r.u&&(r.n=!0,v(r)),r.n&&I(r)}},I=e=>{if(e.n=!1,e.o)for(let t of e.o)t.u=!0;if(e.l)for(let t of e.l)t();if(e.s&&!e.state.promise&&!e.state.error)for(let t of e.s){t.t&&(t.t.abort(),t.t=void 0);try{t.d(e.state.value,t.V)}catch(r){A(r)}}},P=e=>{if(!e.m){if(e.m=!0,e.o)for(let t of e.o)P(t);a.push(e)}},i=class{e;constructor(t){this.e=t}},v=e=>{let t=++e.i;e.r=!0,e.u=!1,e.state.promise=void 0,e.t&&(e.t.abort(),e.t=void 0);let r=e.p;r&&(e.p=new Set);try{let o=e.y((n,m=!0)=>{if(t!==e.i)throw void 0;if(e!==n&&(n.r||(v(n),n.n&&(n.n=!1,I(n))),r?.delete(n),(e.p??=new Set).add(n),(n.o??=new Set).add(e)),!m)return n.state;if(n.state.promise)throw new i(n.state.promise);if(n.state.error)throw new i(n.state.error);return n.state.value},e.V);b(o)?(e.state.promise=o,o.then(n=>{t===e.i&&(h(n,e.state.value,e.c)?e.state.promise=void 0:(e.a=n,e.f=void 0,f(e)))},n=>{t===e.i&&(n instanceof Promise?e.state.promise=void 0:(n instanceof i?n=n.e:A(n),e.f=n,f(e)))})):(++e.i,e.state.error=void 0,h(o,e.state.value,e.c)?e.n=!1:e.state.value=e.a=o)}catch(o){++e.i,o?(o instanceof i?o=o.e:A(o),b(o)?e.state.promise=o:e.state.error=o):e.n=!1}if(r)for(let o of r)o.o.delete(e),l(o)},d=!1,l=e=>{if(!e.A&&!e.h&&!e.o?.size&&!e.l?.size&&!e.s?.size){if(!d){setTimeout(()=>{d=!0,l(e),d=!1},0);return}if(e.state.promise=S,e.a=e.f=e.state.error=e.state.value=void 0,e.n=e.u=e.r=!1,e.t&&(e.t.abort(),e.t=void 0),e.p){for(let t of e.p)t.o.delete(e),l(t);e.p.clear()}}},h=(e,t,r)=>Object.is(e,t)||r!==void 0&&t!==void 0&&r(e,t),b=e=>typeof e?.then=="function",g=()=>{let e=new AbortController,t=e.signal,r=new Promise(o=>{t.then=n=>r.then(n),t.addEventListener("abort",o,{once:!0,passive:!0})});return{abort:()=>e.abort(),signal:t}},A=e=>{queueMicrotask(()=>{throw e})};export{_ as $,D as $$,S as inactive};

package/dist/index.js

@@ -133,7 +133,27 @@ const $$ = (init) => $((get, options) => {
   if (error) throw error;
   if (promises) throw Promise.all(promises);
   return result;
+}, {
+  equals: shallowEquals
 });
+const shallowEquals = (a, b) => {
+  if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+  const c = a.constructor;
+  if (c !== b.constructor) return false;
+  if (c === Array) {
+    let i = a.length;
+    if (i !== b.length) return false;
+    while ((i = i - 1 | 0) >= 0) if (!Object.is(a[i], b[i])) return false;
+    return true;
+  }
+  let n = 0;
+  for (const k in a) {
+    if (!(k in b && Object.is(a[k], b[k]))) return false;
+    n = n + 1 | 0;
+  }
+  for (const _ in b) if ((n = n - 1 | 0) < 0) return false;
+  return true;
+};
 let pendingUpdateAtoms = false;
 let stack = [];
 const requestActivate = (atom) => {

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import type { Atom, DerivedAtom, PrimitiveAtom } from '.';
-export declare const useAtom: <Value>(atom: PrimitiveAtom<Value>) => readonly [Value, (value: import(".").AtomUpdater<Value>) => void];
 export declare const useAtomValue: <Value>(atom: Atom<Value>) => Value;
 export declare const useAtomState: <Value>(atom: DerivedAtom<Value>) => import(".").AtomState<Value>;
+export declare const useAtom: <Value>(atom: PrimitiveAtom<Value>) => readonly [Value, (newState: Value) => void];
 export declare const useStateAtom: <Value>(atom: PrimitiveAtom<Value>) => readonly [Value, (newState: Value) => void];

package/dist/react.js

@@ -1,13 +1,19 @@
 import { useState, useSyncExternalStore } from "react";
-const useAtom = (atom) => [useSyncExternalStore(atom.watch, atom.get), atom.set];
-const useAtomValue = (atom) => useSyncExternalStore(atom.watch, atom.get);
-const useAtomState = (atom) => useSyncExternalStore(atom.watch, () => {
-  try {
-    atom.get();
-  } catch (_) {
+const useAtomValue = (atom) => useSyncExternalStore(
+  (watcher) => atom.watch(watcher),
+  () => atom.get()
+);
+const useAtomState = (atom) => useSyncExternalStore(
+  (watcher) => atom.watch(watcher),
+  () => {
+    try {
+      atom.get();
+    } catch (_) {
+    }
+    return atom.state;
   }
-  return atom.state;
-});
+);
+const useAtom = (atom) => [useAtomValue(atom), (newState) => atom.set(newState)];
 const useStateAtom = (atom) => {
   const [state, setState] = useState(() => atom.get());
   const setStateWithAtom = (newState) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bansa",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,13 +16,23 @@
       "default": "./dist/index.js"
     }
   },
+  "scripts": {
+    "build": "pnpm run \"/^build:.*/\"",
+    "build:types": "tsc --noEmit false --emitDeclarationOnly --outDir dist",
+    "build:index": "esbuild src/index.ts --mangle-props=^_ --format=esm --target=es2022 --outfile=dist/index.js",
+    "build:index-browser": "esbuild src/index.ts --mangle-props=^_ --minify --bundle --format=esm --target=es2022 --platform=browser --outfile=dist/index.browser.js",
+    "build:react": "esbuild src/react.tsx --mangle-props=^_ --format=esm --target=es2022 --outfile=dist/react.js",
+    "test": "vitest",
+    "format": "biome format --write ./src",
+    "prepare": "pnpm run build"
+  },
   "devDependencies": {
-    "@biomejs/biome": "2.0.0-beta.6",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "esbuild": "^0.25.5",
-    "typescript": "^5.8.3",
-    "vitest": "^3.1.4"
+    "@biomejs/biome": "^2.2.4",
+    "@types/react": "^19.1.15",
+    "@types/react-dom": "^19.1.9",
+    "esbuild": "^0.25.10",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
@@ -45,19 +55,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "packageManager": "pnpm@10.17.1",
   "homepage": "https://github.com/cgiosy/bansa",
   "keywords": [
     "bansa",
     "state",
     "react"
-  ],
-  "scripts": {
-    "build": "pnpm run \"/^build:.*/\"",
-    "build:types": "tsc --noEmit false --emitDeclarationOnly --outDir dist",
-    "build:index": "esbuild src/index.ts --mangle-props=^_ --format=esm --target=es2022 --outfile=dist/index.js",
-    "build:index-browser": "esbuild src/index.ts --mangle-props=^_ --minify --bundle --format=esm --target=es2022 --platform=browser --outfile=dist/index.browser.js",
-    "build:react": "esbuild src/react.tsx --mangle-props=^_ --format=esm --target=es2022 --outfile=dist/react.js",
-    "test": "vitest",
-    "format": "biome format --write ./src"
-  }
-}
+  ]
+}