Moved stocked into monorepo

packages/core/package.json

@@ -26,8 +26,8 @@
 	"dependencies": {
 		"lodash": "4.17.21",
 		"lodash-es": "4.17.15",
-		"pxth": "0.7.0",
-		"stocked": "1.0.0-beta.33",
+		"pxth": "workspace:*",
+		"stocked": "workspace:*",
 		"tiny-invariant": "1.2.0"
 	},
 	"devDependencies": {

packages/dom/package.json

@@ -24,8 +24,8 @@
 		"test:watch": "jest --passWithNoTests --watch"
 	},
 	"dependencies": {
-		"pxth": "0.7.0",
-		"stocked": "1.0.0-beta.33",
+		"pxth": "workspace:*",
+		"stocked": "workspace:*",
 		"tiny-invariant": "1.2.0"
 	},
 	"devDependencies": {

packages/pxth/package.json

@@ -52,7 +52,7 @@
 		"@arethetypeswrong/cli": "^0.16.4",
 		"@microsoft/api-extractor": "^7.47.11",
 		"@types/lodash": "^4.17.12",
-		"@types/node": "^14.14.31",
+		"@types/node": "^20.17.2",
 		"eslint": "^9.13.0",
 		"np": "^10.0.7",
 		"tsup": "^8.3.5",

packages/stocked/.prettierignore

@@ -0,0 +1,3 @@
+.docusaurus
+dist
+pnpm-lock.yaml

packages/stocked/aqu.config.json

@@ -0,0 +1,11 @@
+{
+	"buildOptions": {
+		"target": ["es2019", "chrome58", "firefox57", "safari11", "node12"]
+	},
+	"dtsBundleGeneratorOptions": {
+		"libraries": {
+			"importedLibraries": ["react", "prop-types", "scheduler", "pxth"],
+			"allowedTypesLibraries": []
+		}
+	}
+}

packages/stocked/eslint.config.mjs

@@ -0,0 +1,8 @@
+import baseConfig from '@reactive-tools/eslint-config';
+
+export default [
+	{
+		ignores: ['**/dist', '**/node_modules', '**/*.config.js', '**/.tsup'],
+	},
+	...baseConfig,
+];

packages/stocked/package.json

@@ -0,0 +1,60 @@
+{
+	"name": "stocked",
+	"description": "Tiny state management library for react.",
+	"version": "1.0.0-beta.33",
+	"main": "dist/index.js",
+	"module": "dist/stocked.esm.js",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/fracht/reactive-forms.git",
+		"directory": "packages/stocked"
+	},
+	"author": "Artiom Tretjakovas",
+	"license": "MIT",
+	"scripts": {
+		"analyze": "size-limit --why",
+		"build": "aqu build",
+		"build:docs": "vitepress build new-docs",
+		"dev:docs": "vitepress dev new-docs",
+		"format": "syncpack format && prettier --write \"**/*.{ts,tsx,cjs,mjs,js,jsx,json,yml,yaml,clean-publish}\"",
+		"lint": "eslint .",
+		"lint:config": "pnpm lint --write-file",
+		"prepublishOnly": "aqu build",
+		"serve:docs": "vitepress serve new-docs",
+		"size": "size-limit",
+		"start": "aqu watch",
+		"test": "vitest run",
+		"test:watch": "pnpm run test --watch"
+	},
+	"dependencies": {
+		"lodash": "^4.17.21",
+		"pxth": "workspace:*",
+		"tiny-invariant": "^1.3.3"
+	},
+	"devDependencies": {
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/react": "^16.0.1",
+		"@types/lodash": "^4.17.12",
+		"@types/react": "18.3.12",
+		"@types/react-dom": "18.3.1",
+		"aqu": "^0.4.3",
+		"configs": "github:fracht/configs",
+		"jsdom": "^25.0.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"tslib": "2.3.1",
+		"typescript": "^5.6.3",
+		"vitepress": "^1.4.1",
+		"vitest": "^2.1.3"
+	},
+	"peerDependencies": {
+		"react": ">=16"
+	},
+	"engines": {
+		"node": ">=10"
+	},
+	"files": [
+		"dist"
+	],
+	"typings": "dist/stocked.d.ts"
+}

packages/stocked/src/components/ProxyContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { StockProxy } from '../typings/StockProxy';
+
+export const ProxyContext = createContext<StockProxy<unknown> | undefined>(undefined);

packages/stocked/src/components/ProxyProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Pxth } from 'pxth';
+
+import { ProxyContext } from './ProxyContext';
+import { StockContext } from './StockContext';
+import { useStockContext } from '../hooks';
+import { StockProxy } from '../typings';
+
+export type ProxyProviderProps<V> = {
+	proxy: StockProxy<V>;
+	children: React.ReactNode | ((path: Pxth<V>) => React.ReactNode);
+};
+
+export const ProxyProvider = <V,>({ proxy, children }: ProxyProviderProps<V>) => {
+	const stock = useStockContext();
+
+	return (
+		<StockContext.Provider value={stock}>
+			<ProxyContext.Provider value={proxy as StockProxy<unknown>}>
+				{typeof children === 'function' ? children(proxy.path) : children}
+			</ProxyContext.Provider>
+		</StockContext.Provider>
+	);
+};

packages/stocked/src/components/StockContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { Stock } from '../hooks/useStock';
+
+export const StockContext = createContext<Stock<object> | undefined>(undefined);

packages/stocked/src/components/StockRoot.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { StockContext } from './StockContext';
+import { Stock, StockConfig, useStock } from '../hooks/useStock';
+
+export type StockRootProps<Values extends object> = StockConfig<Values> & {
+	children: React.ReactNode;
+};
+
+/**
+ * The main component, which should wrap all code, which uses stock values.
+ * Creates stock and puts it in `StockContext`.
+ */
+export const StockRoot = <Values extends object>({ children, ...stockConfig }: StockRootProps<Values>) => {
+	const stock = useStock(stockConfig);
+
+	return <StockContext.Provider value={stock as unknown as Stock<object>}>{children}</StockContext.Provider>;
+};

packages/stocked/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './StockContext';
+export * from './StockRoot';
+export * from './ProxyContext';
+export * from './ProxyProvider';

packages/stocked/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from './useStock';
+export * from './useStockContext';
+export * from './useStockValue';
+export * from './useStockState';
+export * from './useObservers';
+export * from './useAllStockValues';
+export * from './useMappingProxy';

packages/stocked/src/hooks/useAllStockValues.ts

@@ -0,0 +1,14 @@
+import { createPxth, Pxth } from 'pxth';
+
+import { Stock } from './useStock';
+import { useStockValue } from './useStockValue';
+import { StockProxy } from '../typings/StockProxy';
+
+const rootPxth = createPxth([]);
+
+export const useAllStockValues = <T extends object = object>(
+	customStock?: Stock<T>,
+	proxy?: StockProxy<unknown>,
+): T => {
+	return useStockValue<T, T>(rootPxth as unknown as Pxth<T>, customStock, proxy);
+};

packages/stocked/src/hooks/useDebugStock.ts

@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { useEffect } from 'react';
+import { getPxthSegments } from 'pxth';
+
+import { Stock } from './useStock';
+
+declare global {
+	interface Window {
+		__STOCKED_DEVTOOLS_HOOK?: {
+			raiseEvent: (event: string, data: any) => void;
+		};
+	}
+}
+
+enum StockedEvent {
+	NEW = 'new',
+	BATCH_UPDATE = 'update',
+}
+
+let stockIndex = -1;
+
+export const useDebugStock = <T extends object>(stock: Stock<T>) => {
+	useEffect(() => {
+		if (window.__STOCKED_DEVTOOLS_HOOK) {
+			const currentStockId = ++stockIndex;
+			window.__STOCKED_DEVTOOLS_HOOK!.raiseEvent(StockedEvent.NEW, {
+				data: stock.getValues(),
+				id: currentStockId,
+			});
+
+			return stock.watchBatchUpdates((data) =>
+				window.__STOCKED_DEVTOOLS_HOOK!.raiseEvent(StockedEvent.BATCH_UPDATE, {
+					data: {
+						...data,
+						origin: getPxthSegments(data.origin),
+					},
+					id: currentStockId,
+				}),
+			);
+		}
+
+		return () => {
+			/** empty fn */
+		};
+	}, [stock]);
+};

packages/stocked/src/hooks/useMappingProxy.ts

@@ -0,0 +1,29 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Pxth } from 'pxth';
+
+import { MappingProxy, ProxyMapSource } from '../typings';
+import { areProxyMapsEqual } from '../utils/areProxyMapsEqual';
+import { hashPxth } from '../utils/hashPxth';
+
+const useMapMemo = <V>(map: ProxyMapSource<V>): ProxyMapSource<V> => {
+	const mapRef = useRef(map);
+
+	useEffect(() => {
+		if (!areProxyMapsEqual(mapRef.current, map)) {
+			mapRef.current = map;
+		}
+	}, [map]);
+
+	return areProxyMapsEqual(mapRef.current, map) ? mapRef.current : map;
+};
+
+export const useMappingProxy = <V>(mapSource: ProxyMapSource<V>, path: Pxth<V>) => {
+	const realMap = useMapMemo(mapSource);
+
+	return useMemo(() => {
+		const proxy = new MappingProxy(realMap, path);
+		proxy.activate();
+		return proxy;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [hashPxth(path), realMap]);
+};