feat: implement useSelector

README.md

@@ -32,7 +32,6 @@ export const Header = ({ postId }) => {
 
 ---
 
-
 ## Options
 
 ### Keys
@@ -85,3 +84,69 @@ export const Header = () => {
 
 A function set on `ssr` is provided to React's [`useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore)
 as the `getServerSnapshot` option.
+
+### Selector
+
+In some cases using selector store might be the preferred way of subscribing to store changes. In that case you can use `useSelector` hook.
+
+```tsx
+import { useStore, useSelector } from '@nanostores/react'
+import { $profiles } from '../stores/profiles.js'
+
+export const HeaderWithKeys = ({ userId }) => {
+  const profiles = useStore($profiles, { keys: [userId, 'name'] })
+  return <header>{profiles[userId].name.toUpperCase()}</header>
+}
+
+export const HeaderWithSelector = ({ userId }) => {
+  // selector function automatically handles keys changes
+  const name = useSelector($profiles, profiles =>
+    profiles[userId].name.toUppercase()
+  )
+  return <header>{name}</header>
+}
+```
+
+### Compare
+
+You can pass a different comparison function to `useSelector`, to determine when the data should trigger a re-render.
+
+```tsx
+import { useSelector } from '@nanostores/react'
+import { $user } from '../stores/user.js'
+import { shallowCompare } from '../utils/shallow.js'
+
+export const Posts = () => {
+  const ids = useSelector(
+    $user,
+    user => user.postIds, // [1, 2, 3]
+    { compare: shallowCompare }
+  )
+
+  return (
+    <div>
+      <span>Post ids: {ids.join(', ')}</span>
+      {/* does not trigger the re-render because ids are shallowly equal */}
+      <button onClick={() => $user.setKey('postIds', [1, 2, 3])}>
+        Refresh
+      </button>
+    </div>
+  )
+}
+```
+
+### SSR with useSelector
+
+SSR in `useSelector` works like in `useStore`. If you are passing a function to `ssr` make sure to return snapshot of the store you're passing into useSelector, not selected value.
+
+```tsx
+const profileFromServer = { name: 'A User' }
+
+export const Header = () => {
+  const name = useSelector($profile, profile => profile.name, {
+    ssr: typeof window === 'undefined' ? false : () => profileFromServer
+  })
+
+  return <header>{name}</header>
+}
+```

index.d.ts

@@ -1,56 +1,2 @@
-import type { Store, StoreValue } from 'nanostores'
-import type { DependencyList } from 'react'
-
-type StoreKeys<T> = T extends { setKey: (k: infer K, v: any) => unknown }
-  ? K
-  : never
-
-export interface UseStoreOptions<SomeStore> {
-  /**
-   * @default
-   * ```ts
-   * [store, options.keys]
-   * ```
-   */
-  deps?: DependencyList
-
-  /**
-   * Will re-render components only on specific key changes.
-   */
-  keys?: StoreKeys<SomeStore>[]
-
-  /**
-   * Enable SSR support. Set `initial` when store's initial value is the same on
-   * server and client, or provide a function to return the server store state
-   * for advanced cases (per useSyncExternalStore's getServerSnapshot).
-   */
-  ssr?: (() => StoreValue<SomeStore>) | 'initial' | false
-}
-
-/**
- * Subscribe to store changes and get store’s value.
- *
- * Can be user with store builder too.
- *
- * ```js
- * import { useStore } from 'nanostores/react'
- *
- * import { router } from '../store/router'
- *
- * export const Layout = () => {
- *   let page = useStore(router)
- *   if (page.route === 'home') {
- *     return <HomePage />
- *   } else {
- *     return <Error404 />
- *   }
- * }
- * ```
- *
- * @param store Store instance.
- * @returns Store value.
- */
-export function useStore<SomeStore extends Store>(
-  store: SomeStore,
-  options?: UseStoreOptions<SomeStore>
-): StoreValue<SomeStore>
+export { UseStoreOptions, useStore } from './use-store/index.d.ts'
+export { UseSelectorOptions, useSelector } from './use-selector/index.d.ts'

index.js

@@ -1,34 +1,2 @@
-import { listenKeys } from 'nanostores'
-import { useCallback, useRef, useSyncExternalStore } from 'react'
-
-let emit = (snapshotRef, onChange) => value => {
-  if (snapshotRef.current === value) return
-  snapshotRef.current = value
-  onChange()
-}
-
-export function test() {
-  return 1
-}
-
-export function useStore(store, { keys, deps = [store, keys], ssr } = {}) {
-  let snapshotRef = useRef()
-  snapshotRef.current = store.get()
-
-  let subscribe = useCallback(onChange => {
-    emit(snapshotRef, onChange)(store.value)
-
-    return keys?.length > 0
-      ? listenKeys(store, keys, emit(snapshotRef, onChange))
-      : store.listen(emit(snapshotRef, onChange))
-  }, deps)
-
-  let get = () => snapshotRef.current
-
-  let server = get
-  if (ssr && 'init' in store) {
-    server = ssr === 'initial' ? () => store.init : ssr
-  }
-
-  return useSyncExternalStore(subscribe, get, server)
-}
+export { useStore } from './use-store/index.js'
+export { useSelector } from './use-selector/index.js'

oxfmt.config.ts

@@ -1,3 +1,3 @@
-import loguxOxfmtConfig from "@logux/oxc-configs/fmt";
+import loguxOxfmtConfig from '@logux/oxc-configs/fmt'
 
-export default loguxOxfmtConfig;
+export default loguxOxfmtConfig

package.json

@@ -61,11 +61,20 @@
   },
   "size-limit": [
     {
+      "name": "min",
       "import": {
         "index.js": "{ useStore }",
         "nanostores": "{ map, computed }"
       },
-      "limit": "958 B"
+      "limit": "954 B"
+    },
+    {
+      "name": "max",
+      "import": {
+        "index.js": "{ useStore, useSelector }",
+        "nanostores": "{ map, computed }"
+      },
+      "limit": "1084 B"
     }
   ],
   "engines": {

test/errors.ts

@@ -1,4 +1,5 @@
 import { map, WritableAtom } from 'nanostores'
+
 import { useStore } from '../index.js'
 
 type TestType =