bansa 0.0.23 → 0.0.25

package/.oxfmtrc.jsonc

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/refs/heads/main/npm/oxfmt/configuration_schema.json",
+}

package/README.ko.md

@@ -21,11 +21,11 @@ Bansa는 파생 상태, 비동기 값, 의존성과 구독, 생명 주기, 사
 일반 값(숫자/문자열/객체 등)을 `$` 함수에 전달하여 생성합니다.
 
 ```javascript
-import { $ } from 'bansa';
+import { $ } from "bansa";
 
 const $count = $(42);
 
-const $user = $({ name: 'John Doe', age: 30 });
+const $user = $({ name: "John Doe", age: 30 });
 ```
 
 #### 파생 상태
@@ -38,13 +38,13 @@ const $user = $({ name: 'John Doe', age: 30 });
 const $countDouble = $((get) => get($count) * 2);
 
 const $userMessage = $((get) => {
-	if (get($count) < 50) return 'no hello.';
-	return `Hello, ${get($user).name}!`;
+  if (get($count) < 50) return "no hello.";
+  return `Hello, ${get($user).name}!`;
 });
 
 const $signalExample = $((_, { signal }) => {
-	signal.then(() => console.log("$signalExample died"));
-	return fetch(`/users/${get($count)}`, { signal }).then((res) => res.json());
+  signal.then(() => console.log("$signalExample died"));
+  return fetch(`/users/${get($count)}`, { signal }).then((res) => res.json());
 });
 ```
 
@@ -62,10 +62,10 @@ const $signalExample = $((_, { signal }) => {
 
 ```typescript
 type AtomState<Value> =
-	| { promise: undefined; error: undefined; value: Value; } // 성공
-	| { promise: undefined; error: any; value?: Value; } // 에러
-	| { promise: PromiseLike<Value>; error: any; value?: Value; } // 로딩
-	| { promise: typeof inactive; error: undefined; value?: Value; } // 비활성
+  | { promise: undefined; error: undefined; value: Value } // 성공
+  | { promise: undefined; error: any; value?: Value } // 에러
+  | { promise: PromiseLike<Value>; error: any; value?: Value } // 로딩
+  | { promise: typeof inactive; error: undefined; value?: Value }; // 비활성
 ```
 
 ##### 활성 상태로 유지하기
@@ -89,7 +89,6 @@ console.log($countDouble.state); // { promise: undefined, error: undefined, valu
 
 `.get()` 메서드는 상태가 비활성화된 경우, 매우 잠시 동안 해당 상태를 살아 있는 상태로 전환합니다. 당연히 해당 상태와 모든 의존성이 새로 실행됩니다. 매우 잠시 동안은 적어도 현재 마이크로태스크가 끝나기까지를 의미합니다. 즉, 동기적으로 연속해서 `.get()`을 호출하더라도 매번 모든 것이 다시 실행되지는 않습니다.
 
-
 ### 상태 업데이트
 
 `.set(updater)` 메서드를 통해 원시 상태의 값을 업데이트할 수 있으며, `updater`가 일반 값이라면 해당 값으로 업데이트하고, 함수라면 상태의 '예비 값' `nextValue`에 대해 `updater(nextValue)`로 업데이트합니다.
@@ -131,8 +130,8 @@ $count.set(increment);
 ```javascript
 const $count = $(0);
 const unsubscribe = $count.subscribe((value, { signal }) => {
-	console.log('value', value);
-	signal.then(() => console.log('value end', value));
+  console.log("value", value);
+  signal.then(() => console.log("value end", value));
 });
 
 // value 0
@@ -154,8 +153,8 @@ $count.set(2);
 
 ```javascript
 const $merged = $((get) => ({
-	count: get($count),
-	countDouble: get($countDouble),
+  count: get($count),
+  countDouble: get($countDouble),
 }));
 
 $merged.subscribe(({ count, countDouble }) => console.log(`${count} * 2 = ${countDouble}`));
@@ -167,21 +166,21 @@ $merged.subscribe(({ count, countDouble }) => console.log(`${count} * 2 = ${coun
 
 ```javascript
 const $user = $(async (get) => {
-	const response = await fetch(`/users/${get($count)}`);
-	if (!response.ok) throw new Error('Failed to fetch user');
-	return response.json();
+  const response = await fetch(`/users/${get($count)}`);
+  if (!response.ok) throw new Error("Failed to fetch user");
+  return response.json();
 });
 $user.watch(() => {
-	console.log($user.state);
+  console.log($user.state);
 });
 
 const $userName = $((get) => get($user).name);
 
-const faultyAtom = $(() => Promise.reject(new Error('Something went wrong')));
+const faultyAtom = $(() => Promise.reject(new Error("Something went wrong")));
 faultyAtom.watch(() => {
-	if (!faultyAtom.state.promise && faultyAtom.state.error) {
-		console.error('An error occurred:', faultyAtom.state.error.message);
-	}
+  if (!faultyAtom.state.promise && faultyAtom.state.error) {
+    console.error("An error occurred:", faultyAtom.state.error.message);
+  }
 });
 ```
 
@@ -193,12 +192,12 @@ faultyAtom.watch(() => {
 
 ```javascript
 const $user = $(async (get, { signal }) => {
-	const count = get($count);
-	const json = await fetch(`/users/${count}`, { signal }).then((res) => res.json());
-	signal.then(() => {
-		console.log(count, json, "not used");
-	});
-	return json;
+  const count = get($count);
+  const json = await fetch(`/users/${count}`, { signal }).then((res) => res.json());
+  signal.then(() => {
+    console.log(count, json, "not used");
+  });
+  return json;
 });
 ```
 
@@ -207,19 +206,13 @@ const $user = $(async (get, { signal }) => {
 기본적으로 `Object.is`로 동등성을 체크하므로 객체나 배열의 경우 참조가 다르면 내용이 같더라도 업데이트가 발생할 수 있으며, 추가로 동등성을 확인하기 위해 상태 선언 시 `equals`를 옵션으로 줄 수 있습니다. 이 경우 `Object.is`로 같은지 확인하고, 다르다면 `equals` 함수로 다시 확인합니다. 둘 중 하나라도 참을 반환하는 경우 값 변경은 무시됩니다.
 
 ```javascript
-const $user = $(
-  { id: 1, name: 'Alice' },
-  { equals: (next, prev) => next.id === prev.id },
-);
+const $user = $({ id: 1, name: "Alice" }, { equals: (next, prev) => next.id === prev.id });
 
-const $user2 = $(
-  (get) => get($user),
-  { equals: (next, prev) => next.name === prev.name },
-);
+const $user2 = $((get) => get($user), { equals: (next, prev) => next.name === prev.name });
 
-userAtom.set({ id: 1, name: 'Bob' });
+userAtom.set({ id: 1, name: "Bob" });
 
-userAtom.set({ id: 2, name: 'Alice' });
+userAtom.set({ id: 2, name: "Alice" });
 ```
 
 위 예제에서 첫 번째 업데이트는 `id`가 같으므로 무시됩니다. 두 번째 업데이트는 `id`가 다르므로 `$user`를 업데이트하지만, `name`이 같으므로 `$user2`는 업데이트되지 않습니다.
@@ -243,7 +236,10 @@ $timers.subscribe(() => console.timeEnd());
 ```javascript
 const o = () => o;
 const toUndefined = () => undefined;
-Object.setPrototypeOf(o, new Proxy(o, { get: (_, k) => k === Symbol.toPrimitive ? toUndefined : o }));
+Object.setPrototypeOf(
+  o,
+  new Proxy(o, { get: (_, k) => (k === Symbol.toPrimitive ? toUndefined : o) }),
+);
 ```
 
 이 코드의 `o`는 아무리 프로퍼티 접근 및 호출을 해도 같은 값을 반환합니다. 예를 들어, `o.a.b.c().d()().asdf()()()() === o`는 `true`입니다. 따라서, 셀렉터와 filter/map/reduce 등 간단한 메서드로 이뤄진 대부분의 상태 병합 함수에서 문제 없이 전체 코드를 실행할 수 있게 만듭니다. 하지만 만능은 아니므로 약간의 주의가 필요하며, 가급적 상태 병합에만 사용해야 합니다.
@@ -252,24 +248,24 @@ Object.setPrototypeOf(o, new Proxy(o, { get: (_, k) => k === Symbol.toPrimitive
 
 ```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;
+  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;
 };
 ```
 
@@ -291,11 +287,11 @@ const shallowEquals = (a: any, b: any): boolean => {
 const $userId = $(123);
 const $postId = $(456);
 const $pageData = $(async (get, { signal }) => {
-	const user = await fetch(`/users/${get($userId)}`, { signal }).then((res) => res.json());
-	const post = await fetch(`/posts/${get($postId)}`, { signal }).then((res) => res.json());
-	userElm.innerHTML = user.name;
-	postElm.innerHTML = post.html;
-	commentElm.innerHTML = `Hello ${user.name}! Comment to ${post.author}.`;
+  const user = await fetch(`/users/${get($userId)}`, { signal }).then((res) => res.json());
+  const post = await fetch(`/posts/${get($postId)}`, { signal }).then((res) => res.json());
+  userElm.innerHTML = user.name;
+  postElm.innerHTML = post.html;
+  commentElm.innerHTML = `Hello ${user.name}! Comment to ${post.author}.`;
 });
 ```
 
@@ -304,17 +300,23 @@ const $pageData = $(async (get, { signal }) => {
 ```javascript
 const $userId = $(123);
 const $user = $((get) => fetch(`/users/${get($userId)}`, { signal }).then((res) => res.json()));
-$user.subscribe((user) => { userElm.innerHTML = user.name; });
+$user.subscribe((user) => {
+  userElm.innerHTML = user.name;
+});
 
 const $postId = $(456);
 const $post = $((get) => fetch(`/posts/${get($postId)}`, { signal }).then((res) => res.json()));
-$post.subscribe((post) => { postElm.innerHTML = post.html; });
+$post.subscribe((post) => {
+  postElm.innerHTML = post.html;
+});
 
 const $pageData = $$((get) => ({
-	userName: get($user).name,
-	postAuthor: get($post).author,
+  userName: get($user).name,
+  postAuthor: get($post).author,
 }));
-$pageData.subscribe(({ userName, postAuthor }) => { commentElm.innerHTML = `Hello ${userName}! Comment to ${postAuthor}.`; });
+$pageData.subscribe(({ userName, postAuthor }) => {
+  commentElm.innerHTML = `Hello ${userName}! Comment to ${postAuthor}.`;
+});
 ```
 
 코드 줄 수가 약간 늘어났지만, 앞서 언급한 문제들이 해결되었습니다.
@@ -404,30 +406,32 @@ const $reader = $((get) => {
 
 ```javascript
 const delayedState = (initial, minDelay, maxDelay) => {
-	const $value = $(initial);
-	const $delayedValue = $(initial);
-
-	const $eventStartTime = $(0);
-	const $eventLastTime = $(0);
-	const $delayedTime = $((get) => Math.min(get($eventStartTime) + maxDelay, get($eventLastTime) + minDelay));
-	const $delayedInfo = $((get) => ({
-		value: get($value),
-		time: get($delayedTime),
-	}));
-	$delayedInfo.subscribe(({ value, time }, { signal }) => {
-		const timeout = Math.max(0, time - Date.now());
-		const timer = setTimeout(() => $delayedValue.set(value), timeout);
-		signal.then(() => clearTimeout(timer));
-	});
-
-	const update = (value, eager = false) => {
-		const now = eager ? -Infinity : Date.now();
-		if ($value.get() === $delayedValue.get()) $eventStartTime.set(now);
-		$eventLastTime.set(now);
-		$value.set(value);
-	};
-
-	return [$delayedValue, update];
+  const $value = $(initial);
+  const $delayedValue = $(initial);
+
+  const $eventStartTime = $(0);
+  const $eventLastTime = $(0);
+  const $delayedTime = $((get) =>
+    Math.min(get($eventStartTime) + maxDelay, get($eventLastTime) + minDelay),
+  );
+  const $delayedInfo = $((get) => ({
+    value: get($value),
+    time: get($delayedTime),
+  }));
+  $delayedInfo.subscribe(({ value, time }, { signal }) => {
+    const timeout = Math.max(0, time - Date.now());
+    const timer = setTimeout(() => $delayedValue.set(value), timeout);
+    signal.then(() => clearTimeout(timer));
+  });
+
+  const update = (value, eager = false) => {
+    const now = eager ? -Infinity : Date.now();
+    if ($value.get() === $delayedValue.get()) $eventStartTime.set(now);
+    $eventLastTime.set(now);
+    $value.set(value);
+  };
+
+  return [$delayedValue, update];
 };
 ```
 
@@ -441,46 +445,46 @@ $inputValue.subscribe(console.log);
 
 ```javascript
 const $windowScroll = $((_, { signal }) => {
-	let lastTime = Date.now();
-	const $scrollY = $(window.scrollY);
-	const $scrollOnTop = $((get) => get($scrollY) === 0);
-
-	const $scrollMovingAvgY = $(0);
-	const $scrollDirectionY = $((get) => Math.sign(get($scrollMovingAvgY)));
-
-	const onScrollChange = () => {
-		const now = Date.now();
-		lastTime = now;
-
-		const alpha = 0.995 ** (now - lastTime);
-		const scrollY = window.scrollY;
-		const deltaY = scrollY - $scrollY.get();
-		const movingAvgY = alpha * $scrollMovingAvgY.get() + (1 - alpha) * deltaY;
-
-		$scrollY.set(scrollY);
-		$scrollMovingAvgY.set(movingAvgY);
-	};
-	window.addEventListener('scroll', onScrollChange, {
-		passive: true,
-		signal,
-	});
-	window.addEventListener('resize', onScrollChange, {
-		passive: true,
-		signal,
-	});
-
-	return {
-		$scrollY,
-		$scrollOnTop,
-		$scrollMovingAvgY,
-		$scrollDirectionY,
-	};
+  let lastTime = Date.now();
+  const $scrollY = $(window.scrollY);
+  const $scrollOnTop = $((get) => get($scrollY) === 0);
+
+  const $scrollMovingAvgY = $(0);
+  const $scrollDirectionY = $((get) => Math.sign(get($scrollMovingAvgY)));
+
+  const onScrollChange = () => {
+    const now = Date.now();
+    lastTime = now;
+
+    const alpha = 0.995 ** (now - lastTime);
+    const scrollY = window.scrollY;
+    const deltaY = scrollY - $scrollY.get();
+    const movingAvgY = alpha * $scrollMovingAvgY.get() + (1 - alpha) * deltaY;
+
+    $scrollY.set(scrollY);
+    $scrollMovingAvgY.set(movingAvgY);
+  };
+  window.addEventListener("scroll", onScrollChange, {
+    passive: true,
+    signal,
+  });
+  window.addEventListener("resize", onScrollChange, {
+    passive: true,
+    signal,
+  });
+
+  return {
+    $scrollY,
+    $scrollOnTop,
+    $scrollMovingAvgY,
+    $scrollDirectionY,
+  };
 });
 
 const $navHidden = $((get) => {
-	const { $scrollOnTop, $scrollDirectionY } = get($windowScroll);
-	const scrollOnTop = get($scrollOnTop);
-	const directionY = get($scrollDirectionY);
-	return !scrollOnTop && directionY > 0;
+  const { $scrollOnTop, $scrollDirectionY } = get($windowScroll);
+  const scrollOnTop = get($scrollOnTop);
+  const directionY = get($scrollDirectionY);
+  return !scrollOnTop && directionY > 0;
 });
 ```