Releases: sheinsight/reactive
v0.1.4
v0.1.3
v0.1.3 Release Notes
feat: add CommonJS
outputs via tsup
fix: ignore devtools
in production
mode
chore: mark react
as optional
peerDependencies
chore: upgrade use-sync-external-store
to ^1.2.2
Full Changelog: v0.1.2...v0.1.3
v0.1.3-alpha.0
v0.1.3-alpha.0 Release Notes
feat: add CommonJS
outputs via tsup
.
chore: mark react
as optional
peerDependencies
chore: upgrade use-sync-external-store
to ^1.2.2
Full Changelog: v0.1.2...v0.1.3-alpha.0
v0.1.2
v0.1.2 Release Notes
fix: fix useSnapshot
arguments bug.
chore: optimize TypeScript types exports.
chore: optimize unit tests.
Full Changelog: v0.1.1...v0.1.2
v0.1.1
v0.1.1 Release Notes
chore: Enhance TypeScript types for existing functions.
chore: Export essential TypeScript types for external reference.
Full Changelog: v0.1.0...v0.1.1
v0.1.0
v0.1.0 Release Notes
We're excited to announce the release of v0.1.0! This version brings a range of breaking changes, new features, and enhancements that improve the library's performance, scalability, and developer experience. Here's what's new:
Breaking Changes
- Snapshots: Symbol properties have been removed and
Object.freeze
has been swapped withObject.preventExtensions
to tackle immutability issues. - TypeScript: The release package no longer includes
hack-remove-readonly.d.ts
, making for more consistent TypeScript definitions. - DevTools: We've deprecated the
devtool
option in favor of a new, feature-richdevtools
function for a better debugging interface.
// in global type file, such as `global.d.ts` or `typings.d.ts`
- /// <reference path="@shined/reactive/hack-remove-readonly.d.ts" />
import { create, devtools } from '@shined/reactive'
// remove `devtool` option in create function
const store = create({ name: 'Pikachu' })
// now you should use `devtools` function to enable DevTools
devtools(store, { name: 'pikachu' })
New Features
- State Selector: Take control of React re-renders with the new
selector
, which allows for more granular rendering optimization backed by robust TypeScript support. - Comparison Function: The introduction of
isEqual
, a tailor-made comparison function defaulting toshallowEqual
, helps in managing state changes efficiently. - Utilities: The newly added
produce
utility acts as an alternative to immer'sproduce
, enhancing state immutability handling.
const App = () => {
// any change in `store.mutate` will trigger re-render
const state = store.useSnapshot()
// only changes in `store.mutate.author` will trigger re-render
const author = store.useSnapshot((s) => s.author)
// only changes in `store.mutate.someName` and `store.mutate.someAge` will trigger re-render
const [name, age] = store.useSnapshot((s) => [s.someName, s.someAge])
// or use object destructuring, same as above
const { name, age } = store.useSnapshot((s) => ({
name: s.someName,
age: s.someAge,
}))
// custom `isEqual` function, default to `shallowEqual`
const state = store.useSnapshot({
isEqual: (pre, cur) => Object.is(pre, cur),
})
// use `isEqual` function with `selector` as first argument
// in this case, only changes in `store.mutate.count` that is greater than or equal to 2 will trigger re-render
const count = store.useSnapshot((s) => s.count, { isEqual: (pre, cur) => cur - pre < 2 })
return <h1>{name}</h1>
}
Enhancements
- Dependencies: Development dependencies have been cleaned up for an improved project structure, with key updates to
vitest
and@testing-library/react
. - Documentation: We've overhauled our README to serve as the single-point-of-reference for library users.
- Examples: Our examples are now more intuitive and informative, helping developers understand the library's potential uses cases better.
Internal Improvements
- Codebase: Restructured for enhanced clarity, the codebase is now more modular.
- Testing: Test coverage has been expanded with new cases, fortifying the assurance in our library's robustness.
- Environment: We've upgraded to Node.js version 20.x, ensuring compatibility with the latest performance standards.
Export Changes
- Adjustments have been made to both root and vanilla exports, including new aliases and direct exports for key functionality, while maintaining that
ProxyMap
&ProxySet
are exported but not yet implemented. see here for full exports changes.
For a complete rundown of changes, experimental features, and bug fixes, be sure to check the associated pull request changelog or code diff.
These updates reflect our commitment to delivering a streamlined and powerful state management solution that meets the needs of modern application development. We hope you enjoy the improvements!
v0.0.19
Because proxy-compare has some behavior that doesn't match our expectations, temporary masking relies on contrast logic
v0.0.18
Break change
Now , useSnapshot return value is no longer completely new each time. In the unchanged situation, the previous proxy object will be used again.
This means that you can write the following code normally.
import { store } from "./store";
export default function Foo() {
const snap = store.useSnapshot();
useEffect(() => {
console.log(address);
}, [snap.user.address]);
return (
<>
<h1>{state.name}</h1>
</>
);
}
v0.0.17
v0.0.16
Subscribe store in component
You can listen to store changes in the component, and once the store changes, perform certain operations.
import { store } from "./store";
import { useSubscribe } from "@shined/reactive";
export default function Foo() {
const snap = store.useSnapshot();
// Use "original" to obtain the raw data within the snapshot.
// This data can be applied to the deps of useEffect to avoid infinite execution of useEffect.
const address = original(snap.user.address);
useEffect(() => {
console.log(address);
}, [address]);
return (
<>
<h1>{state.name}</h1>
</>
);
}
deprecated useSubscribe
Because many users find it difficult to control this hooks, they always end up breaking the root node. Therefore, it is deprecated and will be removed in future versions.