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 with Object.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-rich devtools 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 to shallowEqual, helps in managing state changes efficiently.
• Utilities: The newly added produce utility acts as an alternative to immer's produce, 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!