@nanostores/react
Advanced tools
@nanostores/react - npm Package Compare versions
Comparing version 0.4.1 to 0.5.0
@@ -1,7 +0,14 @@ | ||
| import { MapStore, Store, StoreValue } from 'nanostores' | ||
| import { Store, StoreValue } from 'nanostores' | ||
| type AllKeys<T> = T extends any ? keyof T : never | ||
| export interface UseStoreOptions<SomeStore, Key extends PropertyKey> { | ||
| keys?: SomeStore extends MapStore ? Key[] : never | ||
| type StoreKeys<T> = T extends { setKey: (k: infer K, v: any) => unknown } | ||
| ? K | ||
| : never | ||
| export interface UseStoreOptions<SomeStore> { | ||
| /** | ||
| * Will re-render components only on specific key changes. | ||
| */ | ||
| keys?: StoreKeys<SomeStore>[] | ||
| } | ||
@@ -33,41 +40,7 @@ | ||
| export function useStore<SomeStore extends Store>( | ||
| store: SomeStore | ||
| store: SomeStore, | ||
| options?: UseStoreOptions<SomeStore> | ||
| ): StoreValue<SomeStore> | ||
| /** | ||
| * 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, { keys: [ 'route' ] }) | ||
| * if (page.route === 'home') { | ||
| * return <HomePage /> | ||
| * } else { | ||
| * return <Error404 /> | ||
| * } | ||
| * } | ||
| * ``` | ||
| * | ||
| * @param store Store instance. | ||
| * @param options Subscription configuration. | ||
| * `keys` attribute controls which store value properties will be returned and listened to. | ||
| * @returns Store value. | ||
| */ | ||
| export function useStore< | ||
| SomeStore extends Store, | ||
| Key extends AllKeys<StoreValue<SomeStore>> | ||
| >( | ||
| store: SomeStore, | ||
| options?: UseStoreOptions<SomeStore, Key> | ||
| ): SomeStore extends MapStore | ||
| ? Pick<StoreValue<SomeStore>, Key> | ||
| : StoreValue<SomeStore> | ||
| /** | ||
| * Batch React updates. It is just wrap for React’s `unstable_batchedUpdates` | ||
@@ -74,0 +47,0 @@ * with fix for React Native. |
28
index.js
@@ -6,29 +6,13 @@ import { listenKeys } from 'nanostores' | ||
| export function useStore(store, opts = {}) { | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| if (typeof store === 'function') { | ||
| throw new Error( | ||
| 'Use useStore(Template(id)) or useSync() ' + | ||
| 'from @logux/client/react for templates' | ||
| ) | ||
| } | ||
| } | ||
| let sub = useCallback( | ||
| (onChange) => opts.keys | ||
| ? listenKeys( | ||
| store, | ||
| opts.keys, | ||
| onChange | ||
| ) | ||
| : store.listen(onChange), | ||
| onChange => | ||
| opts.keys | ||
| ? listenKeys(store, opts.keys, onChange) | ||
| : store.listen(onChange), | ||
| [opts.keys, store] | ||
| ) | ||
| let get = store.get.bind(store); | ||
| let get = store.get.bind(store) | ||
| return useSyncExternalStore( | ||
| sub, | ||
| get, | ||
| get | ||
| ) | ||
| return useSyncExternalStore(sub, get, get) | ||
| } |
| { | ||
| "name": "@nanostores/react", | ||
| "version": "0.4.1", | ||
| "version": "0.5.0", | ||
| "description": "React integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores", | ||
@@ -23,4 +23,10 @@ "keywords": [ | ||
| "engines": { | ||
| "node": "^14.0.0 || ^16.0.0 || >=18.0.0" | ||
| "node": "^16.0.0 || >=18.0.0" | ||
| }, | ||
| "funding": [ | ||
| { | ||
| "type": "github", | ||
| "url": "https://github.com/sponsors/ai" | ||
| } | ||
| ], | ||
| "dependencies": { | ||
@@ -30,5 +36,5 @@ "use-sync-external-store": "^1.2.0" | ||
| "peerDependencies": { | ||
| "nanostores": "^0.7.0", | ||
| "nanostores": "^0.8.0", | ||
| "react": ">=18.0.0" | ||
| } | ||
| } |
@@ -9,3 +9,3 @@ # Nano Stores React | ||
| * **Small.** Less than 1 KB. Zero dependencies. | ||
| * **Small.** Less than 2 KB. Zero dependencies. | ||
| * **Fast.** With small atomic and derived stores, you do not need to call | ||
@@ -22,7 +22,5 @@ the selector function for all components on every store change. | ||
| import { profile } from '../stores/profile.js' | ||
| import { User } from '../stores/user.js' | ||
| export const Header = () => { | ||
| const { userId } = useStore(profile) | ||
| const currentUser = useStore(User(userId)) | ||
| return <header>{currentUser.name}</header> | ||
@@ -29,0 +27,0 @@ } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Number of low supply chain risk alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-17.17%
4835
- Lines of code
- decreased by-37.17%
71
- Number of lines in readme file
- decreased by-5.41%
35