@cdd-team/zustand 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,90 @@
-# Temporary Holding Version
+# @cdd-team/zustand
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@cdd-team/zustand)](https://www.npmjs.com/package/@cdd-team/zustand)
+
+Учебный аналог [Zustand](https://github.com/pmndrs/zustand) для [`@cdd-team/react`](https://www.npmjs.com/package/@cdd-team/react). Названия и сигнатуры совпадают с Zustand 5, поэтому код переносится заменой импорта.
+
+npm: https://www.npmjs.com/package/@cdd-team/zustand
+
+## Установка
+
+```sh
+bun add @cdd-team/zustand @cdd-team/react
+```
+
+## React
+
+```tsx
+import { create, useShallow } from "@cdd-team/zustand";
+
+type CounterState = {
+	count: number;
+	step: number;
+	inc: () => void;
+};
+
+const useCounter = create<CounterState>()((set) => ({
+	count: 0,
+	step: 1,
+	inc: () => set((state) => ({ count: state.count + state.step })),
+}));
+
+function Counter() {
+	// Перерисовка только при изменении count
+	const count = useCounter((state) => state.count);
+	const inc = useCounter((state) => state.inc);
+	return <button onClick={inc}>{count}</button>;
+}
+
+function Summary() {
+	// Селектор возвращает новый объект: сравниваем поверхностно
+	const { count, step } = useCounter(useShallow((state) => ({ count: state.count, step: state.step })));
+	return <p>{count} / {step}</p>;
+}
+```
+
+Хук `useCounter` одновременно является стором: `useCounter.getState()`, `useCounter.setState(...)`, `useCounter.subscribe(...)`. Для стора, созданного через `createStore`, есть `useStore(store, selector?)`.
+
+## Без React
+
+Точка входа `/vanilla` не импортирует React.
+
+```ts
+import { createStore } from "@cdd-team/zustand/vanilla";
+
+const store = createStore<{ count: number }>()(() => ({ count: 0 }));
+
+const unsubscribe = store.subscribe((state, prevState) => {
+	console.log(prevState.count, "→", state.count);
+});
+
+store.setState({ count: 1 }); // поверхностное слияние
+store.setState((state) => ({ count: state.count + 1 }));
+store.setState(store.getInitialState(), true); // полная замена
+unsubscribe();
+```
+
+## API
+
+| Экспорт | Что делает |
+| --- | --- |
+| `createStore(initializer)` | Стор с `getState`, `getInitialState`, `setState(partial, replace?)`, `subscribe` |
+| `create(initializer)` | То же, плюс хук `useBoundStore(selector?)` |
+| `useStore(store, selector?)` | Подписка компонента на произвольный стор |
+| `useShallow(selector)` | Не перерисовывает, если результат селектора поверхностно равен прошлому |
+| `shallow(a, b)` | Поверхностное сравнение |
+
+## Отличия от Zustand
+
+- Хуки построены на `useState` + `useLayoutEffect`, без `useSyncExternalStore`. В конкурентном режиме теоретически возможен «tearing».
+- Нет middleware (`persist`, `devtools`, `immer`) и сторов через Context.
+
+## Разработка
+
+```sh
+bun install
+bun run test       # vanilla без DOM + хуки на happy-dom
+bun run typecheck
+bun run lint
+bun run build
+```

package/dist/index-DaTXGjg2.d.mts

@@ -0,0 +1,27 @@
+//#region src/vanilla/types.d.ts
+type SetState<T> = {
+  (partial: T | Partial<T> | ((state: T) => T | Partial<T>), replace?: false): void;
+  (state: T | ((state: T) => T), replace: true): void;
+};
+interface StoreApi<T> {
+  setState: SetState<T>;
+  getState: () => T;
+  getInitialState: () => T;
+  subscribe: (listener: (state: T, prevState: T) => void) => () => void;
+}
+type ExtractState<S> = S extends {
+  getState: () => infer T;
+} ? T : never;
+type StateCreator<T> = (setState: StoreApi<T>["setState"], getState: StoreApi<T>["getState"], store: StoreApi<T>) => T;
+//#endregion
+//#region src/vanilla/create-store.d.ts
+type CreateStore = {
+  <T>(initializer: StateCreator<T>): StoreApi<T>;
+  <T>(): (initializer: StateCreator<T>) => StoreApi<T>;
+};
+declare const createStore: CreateStore;
+//#endregion
+//#region src/vanilla/shallow.d.ts
+declare function shallow<T>(a: T, b: T): boolean;
+//#endregion
+export { StoreApi as a, StateCreator as i, createStore as n, ExtractState as r, shallow as t };

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import { a as StoreApi, i as StateCreator, n as createStore, r as ExtractState, t as shallow } from "./index-DaTXGjg2.mjs";
+//#region src/react/create.d.ts
+type UseBoundStore<T> = {
+  (): T;
+  <U>(selector: (state: T) => U): U;
+} & StoreApi<T>;
+type Create = {
+  <T>(initializer: StateCreator<T>): UseBoundStore<T>;
+  <T>(): (initializer: StateCreator<T>) => UseBoundStore<T>;
+};
+export declare const create: Create;
+//#endregion
+//#region src/react/use-shallow.d.ts
+export declare function useShallow<S, U>(selector: (state: S) => U): (state: S) => U;
+//#endregion
+//#region src/react/use-store.d.ts
+export declare function useStore<T>(api: StoreApi<T>): T;
+export declare function useStore<T, U>(api: StoreApi<T>, selector: (state: T) => U): U;
+//#endregion
+export { type ExtractState, type StateCreator, type StoreApi, type UseBoundStore, createStore, shallow };

package/dist/index.mjs

@@ -0,0 +1,50 @@
+import { n as createStore, t as shallow } from "./vanilla-uZsAZUZ1.mjs";
+import { useLayoutEffect, useMemo, useState } from "@cdd-team/react";
+//#region src/react/use-store.ts
+const identity = (value) => value;
+function useStore(api, selector = identity) {
+	const state = api.getState();
+	const slice = selector(state);
+	const [, forceRender] = useState(0);
+	useLayoutEffect(() => {
+		const check = () => {
+			const nextState = api.getState();
+			if (Object.is(nextState, state)) return;
+			if (Object.is(selector(nextState), slice)) return;
+			forceRender((count) => count + 1);
+		};
+		const unsubscribe = api.subscribe(check);
+		check();
+		return unsubscribe;
+	}, [
+		api,
+		state,
+		selector,
+		slice
+	]);
+	return slice;
+}
+//#endregion
+//#region src/react/create.ts
+const createImpl = (createState) => {
+	const api = createStore(createState);
+	const useBoundStore = (selector) => useStore(api, selector);
+	return Object.assign(useBoundStore, api);
+};
+const create = ((createState) => createState ? createImpl(createState) : createImpl);
+//#endregion
+//#region src/react/use-shallow.ts
+function createShallowMemo() {
+	let previous;
+	return (next) => {
+		if (shallow(previous, next)) return previous;
+		previous = next;
+		return next;
+	};
+}
+function useShallow(selector) {
+	const memo = useMemo(() => createShallowMemo(), []);
+	return (state) => memo(selector(state));
+}
+//#endregion
+export { create, createStore, shallow, useShallow, useStore };

package/dist/vanilla-uZsAZUZ1.mjs

@@ -0,0 +1,43 @@
+//#region src/vanilla/create-store.ts
+const createStoreImpl = (createState) => {
+	let state;
+	const listeners = /* @__PURE__ */ new Set();
+	const setState = (partial, replace) => {
+		const nextState = typeof partial === "function" ? partial(state) : partial;
+		if (Object.is(nextState, state)) return;
+		const previousState = state;
+		state = replace ?? (typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+		listeners.forEach((listener) => listener(state, previousState));
+	};
+	const getState = () => state;
+	const getInitialState = () => initialState;
+	const subscribe = (listener) => {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	};
+	const api = {
+		setState,
+		getState,
+		getInitialState,
+		subscribe
+	};
+	const initialState = state = createState(setState, getState, api);
+	return api;
+};
+const createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
+//#endregion
+//#region src/vanilla/shallow.ts
+function shallow(a, b) {
+	if (Object.is(a, b)) return true;
+	if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) return false;
+	if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;
+	const keysA = Object.keys(a);
+	if (keysA.length !== Object.keys(b).length) return false;
+	const recordA = a;
+	const recordB = b;
+	return keysA.every((key) => Object.hasOwn(recordB, key) && Object.is(recordA[key], recordB[key]));
+}
+//#endregion
+export { createStore as n, shallow as t };

package/dist/vanilla.d.mts

@@ -0,0 +1,2 @@
+import { a as StoreApi, i as StateCreator, n as createStore, r as ExtractState, t as shallow } from "./index-DaTXGjg2.mjs";
+export { type ExtractState, type StateCreator, type StoreApi, createStore, shallow };

package/dist/vanilla.mjs

@@ -0,0 +1 @@
+export { n as createStore, t as shallow } from "./vanilla-uZsAZUZ1.mjs";

package/package.json

@@ -1,6 +1,53 @@
 {
-  "name": "@cdd-team/zustand",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@cdd-team/zustand",
+	"version": "1.0.1",
+	"description": "Учебный стейт-менеджер",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Cringe-Driven-Development-Team/frontend-packages.git",
+		"directory": "packages/zustand"
+	},
+	"type": "module",
+	"sideEffects": false,
+	"engines": {
+		"bun": ">=1.4.0"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.mts",
+			"import": "./dist/index.mjs"
+		},
+		"./vanilla": {
+			"types": "./dist/vanilla.d.mts",
+			"import": "./dist/vanilla.mjs"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"lint": "oxlint -c ../../oxlint.config.ts src test",
+		"fmt:check": "oxfmt -c ../../oxfmt.config.ts --check src test",
+		"typecheck": "tsc --noEmit",
+		"test": "bun run test:vanilla && bun run test:react",
+		"test:vanilla": "bun test test/vanilla",
+		"test:react": "bun test --preload ./test/setup-dom.ts test/react",
+		"build": "tsdown"
+	},
+	"peerDependencies": {
+		"@cdd-team/react": "^1.2.1"
+	},
+	"peerDependenciesMeta": {
+		"@cdd-team/react": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@cdd-team/react": "^1.2.1",
+		"@happy-dom/global-registrator": "^20.14.5"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}