feat(store): add strong types to provider for stores with input and a…

…dd improved create options

packages/store/src/store.tsx

@@ -51,11 +51,16 @@ export const store = <TState extends State>(
 			return storeApi;
 		},
 
-		name: (newName: string) => {
+		identify: (newName: string) => {
 			Object.assign(_def.options, { name: newName });
 			return storeApi;
 		},
 
+		devtools: (enabled = true) => {
+			Object.assign(_def.options, { devtools: { enabled } });
+			return storeApi;
+		},
+
 		/**
 		 * extend based methods:
 		 */
@@ -138,23 +143,26 @@ export const store = <TState extends State>(
 	return storeApi as unknown as StoreApi<TState>;
 };
 
+type StoreProviderProps<TState, TInput> = {
+	initialValue?: Partial<TState> & TInput;
+	children: React.ReactNode;
+};
+
 export function createStoreContext<
 	TState extends State,
 	TExtensions extends object,
->(store: StoreApi<TState, TExtensions>) {
-	const Context = React.createContext<StoreApi<TState, TExtensions> | null>(
-		null
-	);
-
-	const Provider = ({
-		children,
-		initialValue: localInitialValue = {},
-	}: {
-		initialValue?: Partial<TState>;
-		children: React.ReactNode;
-	}) => {
-		const storeInstance = React.useRef<StoreApi<TState, TExtensions>>(
-			store.create(localInitialValue as TState)
+	TInput extends Record<string, any> = {},
+>(store: StoreApi<TState, TExtensions, TInput>) {
+	const Context = React.createContext<StoreApi<
+		TState,
+		TExtensions,
+		TInput
+	> | null>(null);
+
+	const Provider = (props: StoreProviderProps<TState, TInput>) => {
+		const { children, initialValue: localInitialValue } = props;
+		const storeInstance = React.useRef<StoreApi<TState, TExtensions, TInput>>(
+			store.create(localInitialValue)
 		);
 
 		React.useEffect(() => {

packages/store/src/types.ts

@@ -29,6 +29,16 @@ export type StoreBuilderMethods<
 > = {
 	_def: StoreDef<TState, TExtendedProps>;
 
+	identify: (newName: string) => StoreApi<TState, TExtendedProps, TInput>;
+
+	/**
+	 *
+	 * @param enabled  enable or disable devtools
+	 * @default true
+	 *
+	 */
+	devtools: (enabled?: boolean) => StoreApi<TState, TExtendedProps, TInput>;
+
 	input: <TNewInput extends Record<string, any>>(
 		initialInput: TNewInput
 	) => StoreApi<TState, TExtendedProps, TNewInput>;

packages/store/src/utils/create-inner-store.tsx

@@ -8,27 +8,18 @@ import { createStore as createVanillaStore } from 'zustand/vanilla';
 
 import { immerMiddleware } from '../middlewares/immer.middleware';
 import {
-	EffectBuilder,
 	ImmerStoreApi,
 	SetImmerState,
 	State,
 	StoreApi,
 	StoreDef,
 } from '../types';
-import { StoreOptions } from '../types/CreateStoreOptions';
 import { pipe } from '../utils/pipe';
 
-import React from 'react';
 import type { StateCreator } from 'zustand';
-import {
-	createComputedMethods,
-	ComputedBuilder,
-	ComputedProps,
-} from '../utils/create-computed-methods';
 
 import { subscribeWithSelector } from 'zustand/middleware';
 import { createMethodsProxy } from '../utils/create-methods-proxy';
-import { createSplitProps } from './split-props';
 /** creates the internal store with middlwares */
 export const createInnerStore = <TState extends State>(
 	storeDef: StoreDef<TState>

packages/store/test/store-builder.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test, vi } from 'vitest';
-import { store } from '../src';
+import { createStoreContext, store } from '../src';
 
 describe('should access and update the entire state', () => {
 	const countStoreBuilder = store().state({
@@ -103,6 +103,8 @@ describe('should access and update the entire state + INPUT METHODS', () => {
 
 	const countStore = countStoreBuilder.create();
 
+	const countStoreCtx = createStoreContext(countStoreBuilder);
+
 	test('get', () => {
 		const counterValues = countStore.count.get();
 

packages/store/test/store-options.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, test, vi } from 'vitest';
+import { createStoreContext, store } from '../src';
+
+describe('should access and update the entire state', () => {
+	const countStoreBuilder = store()
+		.identify('countStore')
+		.devtools()
+		.input({ setting: false })
+		.state({
+			count: 2,
+		})
+		.computed((store) => ({
+			doubled: () => store.count.get() * 2,
+		}))
+		.actions((store) => ({
+			increment() {
+				store.count.set(store.count.get() + 1);
+			},
+			decrement() {
+				store.count.set(store.count.get() - 1);
+			},
+		}))
+		.effects((store) => ({
+			log: () => store.onChange(console.log),
+		}));
+
+	const countStore = countStoreBuilder.create();
+
+	const countStoreCtx = createStoreContext(countStoreBuilder);
+
+	test('get', () => {
+		const counterValues = countStore.count.get();
+
+		expect(counterValues).toBe(2);
+	});
+
+	test('set', () => {
+		countStore.count.set(10);
+
+		expect(countStore.count.get()).toBe(10);
+	});
+
+	test('assign', () => {
+		// console.log('INSIDE ASSIGN NESTED OBJ: ', countStore);
+		countStore.assign({
+			count: 30,
+		});
+
+		expect(countStore.get()).toStrictEqual({
+			count: 30,
+		});
+	});
+
+	test('input', () => {
+		expect(countStore.setting).toBe(false);
+	});
+	test('input with different instnes', () => {
+		const countStore2 = countStoreBuilder.create({ setting: true });
+
+		expect(countStore.setting).toBe(false);
+		expect(countStore2.setting).toBe(true);
+	});
+});