✨ Adding props capability to createStore

README.md

@@ -15,8 +15,9 @@ The ultimate companion of all your [solid-js](https://github.com/ryansolid/solid
       - [Basic usage](#basic-usage)
       - [With providers](#with-providers)
       - [With disposable app](#with-disposable-app)
-    - [createProvider](#createprovider)
+    - [createStore](#createstore)
       - [Basic usage](#basic-usage-1)
+      - [With props](#with-props)
 
 ## Features
 
@@ -99,14 +100,14 @@ if (module.hot) {
 }
  ```
 
-### createProvider
+### createStore
 
 A small utility that helps generate Provider & associated hook
 
 #### Basic usage
 
 ```tsx
-const [Provider, useProvider] = createProvider(
+const [Provider, useProvider] = createStore(
   { count: 0, first: 'Alexandre' },
   (set, get) => ({ 
     increment(by = 1) {
@@ -129,4 +130,33 @@ const Counter = () => {
 }
 
 render(() => <Provider><Counter /><Counter /></Provider>, document.getElementById('app'))
+```
+
+#### With props
+
+```tsx
+const [Provider, useProvider] = createStore<{ count: number }>(
+  (props) => ({ count: props.count, first: 'Alexandre' }),
+
+  (set, get) => ({ 
+    increment(by = 1) {
+        set('count', count => count + 1)
+    },
+    dynamicFullName(last) {
+        return `${get.first} ${last} ${get.count}`;
+    }
+  })
+)
+
+const Counter = () => {
+  const [state, { increment, dynamicFullName }] = useProvider()
+
+  // The count here will be synced between the two <Counter /> because it's global
+  return <>
+    <button onClick={[increment, 1]}>{state.count}</button>
+    <h1>{dynamicFullName('Mouton-Brady')}</h1>
+  </>
+}
+
+render(() => <Provider count={2}><Counter /><Counter /></Provider>, document.getElementById('app'))
 ```

src/createStore.tsx

@@ -11,8 +11,15 @@ interface CreateStoreFn<A, B, C = B & { set: SetStateFunction<A> }> {
   (store: A, fn: (set: SetStateFunction<A>, get: State<A>) => B): readonly [State<A>, C];
 }
 
-function generateStore<A, B>(store: A, fn: (set: SetStateFunction<A>, get: State<A>) => B) {
-  const [get, set] = createState(store);
+type CommonObject = Record<string, any>;
+
+function generateStore<A, B, C>(
+  store: A,
+  fn: (set: SetStateFunction<A>, get: State<A>) => B,
+  props?: C,
+) {
+  const finalStore: A = typeof store === 'function' ? store(props) : store;
+  const [get, set] = createState(finalStore);
 
   return [get, { ...fn(set, get), set }] as const;
 }
@@ -45,15 +52,15 @@ function generateStore<A, B>(store: A, fn: (set: SetStateFunction<A>, get: State
  * app.mount('#app')
  * ```
  */
-export function createStore<T extends Record<string, any>, B>(
+export function createStore<P extends CommonObject, T extends CommonObject, B>(
   store: T,
   fn: (set: SetStateFunction<T>, get: State<T>) => B,
 ) {
   type Store = ReturnType<CreateStoreFn<T, B>>;
   const Context = createContext<Store>();
 
-  const Provider: Component = (props) => {
-    const value: Store = generateStore(store, fn);
+  const Provider: Component<P> = (props) => {
+    const value: Store = generateStore(store, fn, props);
 
     return <Context.Provider value={value}>{props.children}</Context.Provider>;
   };