diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..1830867 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changelog + +## [`v0.1.0`](https://github.com/alexeyraspopov/selectre/releases/tag/v1.0.0) + +- Initial public version diff --git a/README.md b/README.md index 10c65fe..def2cd2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # Selectre -A tiny time and space efficient state selectors for React, Redux, and more. + npm install selectre + +Tiny time and space efficient state selectors for React, Redux, and more. - Selectre is built as a more efficient alternative to [Reselect](https://github.com/reduxjs/reselect) @@ -105,7 +107,9 @@ function TodoCounter({ completed }) { A simple case of a selector with parameters, being used with Redux's `useSelector()`. Values in the selector are compared using shallow equality by default, nothing needs to be configured manually. If -you want to have the same behavior implemented with Reselect, here is what needs to be done: +you want to have the same behavior +[implemented with Reselect](https://react-redux.js.org/api/hooks#using-memoizing-selectors), here is +what needs to be done: ```tsx import { useMemo } from "react"; diff --git a/README_NPM.md b/README_NPM.md new file mode 100644 index 0000000..471ab12 --- /dev/null +++ b/README_NPM.md @@ -0,0 +1,52 @@ +# Selectre + +Tiny time and space efficient state selectors for React, Redux, and more. + +- Selectre is built as a more efficient alternative to + [Reselect](https://github.com/reduxjs/reselect) +- Selectre is designed to work with Redux's `useSelector()` and React's `useSyncExternalStore()` and + ensure the least amount of unnecessary computations for things that don't change. +- Selectre uses very efficient implementation of LRU cache to ensure no overhead in accessing cached + computation results. +- Selectre uses shallow equality by default to help developers avoid shooting themselves in the + foot. +- Selectre caches parametric selectors in the way that allows developers not to use additional + measures to memoize stuff in components. + +```tsx +import { createSelector } from "selectre"; +import { useSelector } from "react-redux"; + +let selectNumberCompletedTodos = createSelector({ + (state) => state.todos, + (todos) => todos.filter(todo => todo.completed).length, +}); + +function CompletedTodosCounter() { + // NOTE: the result of createSelector() is a function + // that provides access to the selector itself + let numberCompletedTodos = useSelector(selectNumberCompletedTodos()); + return {numberCompletedTodos}; +} +``` + +Selectors uniformity is important because it affects the amount of effort needed to eventually add +parameters to a simple selectors. + +```tsx +import { createSelector } from "selectre"; +import { useSelector } from "react-redux"; + +let selectNumberFilteredTodos = createSelector({ + (state) => state.todos, + (_, completed) => completed, + (todos, completed) => todos.filter(todo => todo.completed === completed).length, +}); + +function TodoCounter({ completed }) { + let numberFilteredTodos = useSelector(selectNumberFilteredTodos(completed)); + return {numberFilteredTodos}; +} +``` + +Read full docs [on the homepage](alexeyraspopov.github.io/selectre/). diff --git a/package.json b/package.json index 32e506b..b2b652c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "selectre", - "version": "0.0.1", + "version": "0.1.0", "description": "A tiny time and space efficient state selectors for React, Redux, and more", "author": "Alexey Raspopov", "license": "ISC", diff --git a/rollup.config.js b/rollup.config.js index f7dd863..e1431ee 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -10,7 +10,8 @@ export default { plugins: [ copy({ targets: [ - { src: ["modules/selectre.d.ts", "LICENSE", "README.md"], dest: "build" }, + { src: ["modules/selectre.d.ts", "LICENSE"], dest: "build" }, + { src: "README_NPM.md", dest: "build", rename: "README.md" }, { src: "package.json", dest: "build", transform: generatePkg }, ], }),