Merge pull request #641 from aryaemami59/netlify-docs

Author: markerikson

.eslintrc

@@ -67,6 +67,18 @@
         "@typescript-eslint/no-unused-vars": "off",
         "@typescript-eslint/no-shadow": "off"
       }
+    },
+    {
+      "parser": "@typescript-eslint/parser",
+      "files": ["./docs/examples/**/*.{js,ts,jsx,tsx}"],
+      "parserOptions": {
+        "ecmaVersion": 2023,
+        "sourceType": "module",
+        "ecmaFeatures": { "jsx": true }
+      },
+      "rules": {
+        "no-unused-vars": [0]
+      }
     }
   ]
 }

.gitignore

@@ -25,3 +25,12 @@ typesversions
 !.yarn/versions
 .pnp.*
 *.tgz
+
+website/translated_docs
+website/build/
+website/node_modules
+website/i18n/*
+website/.yarn/
+
+docs/examples/**/*.js
+docs/examples/**/*.jsx

README.md

@@ -321,7 +321,7 @@ generates a memoized selector function.
 
 A memoized [output selector].
 
-<details><summary><b>Type parameters</b></summary>
+<details><summary><b>Type Parameters</b></summary>
 
 | Name                          | Description                                                                                                                                                                                            |
 | :---------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -366,7 +366,7 @@ Accepts either a `memoize` function and `...memoizeOptions` rest parameter, or s
 
 A customized [`createSelector`] function.
 
-<details><summary><b>Type parameters</b></summary>
+<details><summary><b>Type Parameters</b></summary>
 
 | Name                  | Description                                                                                                                                                                                                                                                |
 | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -489,7 +489,7 @@ A convenience function that simplifies returning an object made up of selector r
 
 A memoized structured selector.
 
-<details><summary><b>Type parameters</b></summary>
+<details><summary><b>Type Parameters</b></summary>
 
 | Name                   | Description                                                                                                                                                   |
 | :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -587,6 +587,35 @@ const structuredSelector = createSelector(selectA, selectB, (a, b) => ({
 const result = structuredSelector({ a: 1, b: 2 }) // will produce { x: 1, y: 2 }
 ```
 
+`createStructuredSelector` takes an object whose properties are input selectors and returns a structured selector. The structured selector returns an object with the same keys as the `inputSelectorsObject` argument, but with the selectors replaced with their values.
+
+```ts
+const selectA = state => state.a
+const selectB = state => state.b
+
+const structuredSelector = createStructuredSelector({
+  x: selectA,
+  y: selectB
+})
+
+const result = structuredSelector({ a: 1, b: 2 }) // will produce { x: 1, y: 2 }
+```
+
+Structured selectors can be nested:
+
+```ts
+const nestedSelector = createStructuredSelector({
+  subA: createStructuredSelector({
+    selectorA,
+    selectorB
+  }),
+  subB: createStructuredSelector({
+    selectorC,
+    selectorD
+  })
+})
+```
+
 </details>
 
 <div align="right">[ <a href="#table-of-contents">↑ Back to top ↑</a> ]</div>
@@ -647,7 +676,7 @@ interface LruMemoizeOptions {
 
 A memoized function with a `.clearCache()` method attached.
 
-<details><summary><b>Type parameters</b></summary>
+<details><summary><b>Type Parameters</b></summary>
 
 | Name   | Description                                |
 | :----- | :----------------------------------------- |
@@ -896,7 +925,7 @@ This solves the problem of having to know and set the cache size prior to creati
 
 A memoized function with a `.clearCache()` method attached.
 
-<details><summary><b>Type parameters</b></summary>
+<details><summary><b>Type Parameters</b></summary>
 
 | Name   | Description                                |
 | :----- | :----------------------------------------- |
@@ -1006,7 +1035,7 @@ Uses an "auto-tracking" approach inspired by the work of the Ember Glimmer team.
 
 A memoized function with a `.clearCache()` method attached.
 
-<details><summary><b>Type parameters</b></summary>
+<details><summary><b>Type Parameters</b></summary>
 
 | Name   | Description                                |
 | :----- | :----------------------------------------- |
@@ -1261,8 +1290,6 @@ These updates aim to enhance flexibility, performance, and developer experience.
 
   - Removed `ParametricSelector` and `OutputParametricSelector` types. Their functionalities are now integrated into `Selector` and `OutputSelector` respectively, which inherently support additional parameters.
 
-</details>
-
 <div align="right">[ <a href="#table-of-contents">↑ Back to top ↑</a> ]</div>
 
 ---
@@ -1573,9 +1600,9 @@ test('selector unit test', () => {
   selectTodoIds(state)
   selectTodoIds(state)
   selectTodoIds(state)
-  // The `Result Function` should not recalculate.
+  // The result function should not recalculate.
   expect(selectTodoIds.recomputations()).toBe(1)
-  // `input selectors` should not recalculate.
+  // input selectors should not recalculate.
   expect(selectTodoIds.dependencyRecomputations()).toBe(1)
 })
 
@@ -1594,9 +1621,9 @@ test('selector unit test', () => {
   selectTodoIds(state)
   selectTodoIds(state)
   selectTodoIds(state)
-  // The `result function` should not recalculate.
+  // The result function should not recalculate.
   expect(selectTodoIds.recomputations()).to.equal(1)
-  // `input selectors` should not recalculate.
+  // input selectors should not recalculate.
   expect(selectTodoIds.dependencyRecomputations()).to.equal(1)
 })
 ```
@@ -1636,8 +1663,6 @@ If you prefer to use a curried form instead, you can create a curried selector w
 
 <details><summary><b>Detailed Explanation: Creating Curried Selectors</b></summary>
 
-You can try this pattern:
-
 ```ts
 const currySelector = <
   State,
@@ -1854,7 +1879,7 @@ Useful to reduce selectors recalculation when the same selector is repeatedly ca
 
 ### [reselect-debugger](https://github.com/vlanemcev/reselect-debugger-flipper)
 
-[Flipper plugin](https://github.com/vlanemcev/flipper-plugin-reselect-debugger) and [and the connect app](https://github.com/vlanemcev/reselect-debugger-flipper) for debugging selectors in **React Native Apps**.
+[Flipper plugin](https://github.com/vlanemcev/flipper-plugin-reselect-debugger) and [the connect app](https://github.com/vlanemcev/reselect-debugger-flipper) for debugging selectors in **React Native Apps**.
 
 Inspired by Reselect Tools, so it also has all functionality from this library and more, but only for React Native and Flipper.
 

docs/examples/FAQ/MyComponent.tsx

@@ -0,0 +1,11 @@
+import type { FC } from 'react'
+import { useSelectTodo } from './createParametricSelectorHook'
+
+interface Props {
+  id: number
+}
+
+const MyComponent: FC<Props> = ({ id }) => {
+  const todo = useSelectTodo(id)
+  return <div>{todo?.title}</div>
+}

docs/examples/FAQ/createCurriedSelector.ts

@@ -0,0 +1,21 @@
+import type { defaultMemoize, SelectorArray, UnknownMemoizer } from 'reselect'
+import { createSelector } from 'reselect'
+import { currySelector } from './currySelector'
+
+export const createCurriedSelector = <
+  InputSelectors extends SelectorArray,
+  Result,
+  OverrideMemoizeFunction extends UnknownMemoizer = typeof defaultMemoize,
+  OverrideArgsMemoizeFunction extends UnknownMemoizer = typeof defaultMemoize
+>(
+  ...args: Parameters<
+    typeof createSelector<
+      InputSelectors,
+      Result,
+      OverrideMemoizeFunction,
+      OverrideArgsMemoizeFunction
+    >
+  >
+) => {
+  return currySelector(createSelector(...args))
+}

docs/examples/FAQ/createParametricSelectorHook.ts

@@ -0,0 +1,51 @@
+import { useSelector } from 'react-redux'
+import { createSelector } from 'reselect'
+
+interface RootState {
+  todos: {
+    id: number
+    completed: boolean
+    title: string
+    description: string
+  }[]
+  alerts: { id: number; read: boolean }[]
+}
+
+const state: RootState = {
+  todos: [
+    {
+      id: 0,
+      completed: false,
+      title: 'Figure out if plants are really plotting world domination.',
+      description: 'They may be.'
+    },
+    {
+      id: 1,
+      completed: true,
+      title: 'Practice telekinesis for 15 minutes',
+      description: 'Just do it'
+    }
+  ],
+  alerts: [
+    { id: 0, read: false },
+    { id: 1, read: true }
+  ]
+}
+
+const selectTodoById = createSelector(
+  [(state: RootState) => state.todos, (state: RootState, id: number) => id],
+  (todos, id) => todos.find(todo => todo.id === id)
+)
+
+export const createParametricSelectorHook = <
+  Result,
+  Params extends readonly unknown[]
+>(
+  selector: (state: RootState, ...params: Params) => Result
+) => {
+  return (...args: Params) => {
+    return useSelector((state: RootState) => selector(state, ...args))
+  }
+}
+
+export const useSelectTodo = createParametricSelectorHook(selectTodoById)

docs/examples/FAQ/currySelector.ts

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect'
+import type { RootState } from './selectorRecomputing'
+
+export const currySelector = <
+  State,
+  Result,
+  Params extends readonly any[],
+  AdditionalFields
+>(
+  selector: ((state: State, ...args: Params) => Result) & AdditionalFields
+) => {
+  const curriedSelector = (...args: Params) => {
+    return (state: State) => {
+      return selector(state, ...args)
+    }
+  }
+  return Object.assign(curriedSelector, selector)
+}
+
+const selectTodoByIdCurried = currySelector(
+  createSelector(
+    [(state: RootState) => state.todos, (state: RootState, id: number) => id],
+    (todos, id) => todos.find(todo => todo.id === id)
+  )
+)

docs/examples/FAQ/howToTest.test.ts

@@ -0,0 +1,60 @@
+import { createSelector } from 'reselect'
+import { expect, test } from 'vitest'
+
+interface RootState {
+  todos: { id: number; completed: boolean }[]
+  alerts: { id: number; read: boolean }[]
+}
+
+const state: RootState = {
+  todos: [
+    { id: 0, completed: false },
+    { id: 1, completed: true }
+  ],
+  alerts: [
+    { id: 0, read: false },
+    { id: 1, read: true }
+  ]
+}
+
+// With `Vitest` or `Jest`
+test('selector unit test', () => {
+  const selectTodoIds = createSelector(
+    [(state: RootState) => state.todos],
+    todos => todos.map(({ id }) => id)
+  )
+  const firstResult = selectTodoIds(state)
+  const secondResult = selectTodoIds(state)
+  // Reference equality should pass.
+  expect(firstResult).toBe(secondResult)
+  // Deep equality should also pass.
+  expect(firstResult).toStrictEqual(secondResult)
+  selectTodoIds(state)
+  selectTodoIds(state)
+  selectTodoIds(state)
+  // The result function should not recalculate.
+  expect(selectTodoIds.recomputations()).toBe(1)
+  // input selectors should not recalculate.
+  expect(selectTodoIds.dependencyRecomputations()).toBe(1)
+})
+
+// With `Chai`
+test('selector unit test', () => {
+  const selectTodoIds = createSelector(
+    [(state: RootState) => state.todos],
+    todos => todos.map(({ id }) => id)
+  )
+  const firstResult = selectTodoIds(state)
+  const secondResult = selectTodoIds(state)
+  // Reference equality should pass.
+  expect(firstResult).to.equal(secondResult)
+  // Deep equality should also pass.
+  expect(firstResult).to.deep.equal(secondResult)
+  selectTodoIds(state)
+  selectTodoIds(state)
+  selectTodoIds(state)
+  // The result function should not recalculate.
+  expect(selectTodoIds.recomputations()).to.equal(1)
+  // input selectors should not recalculate.
+  expect(selectTodoIds.dependencyRecomputations()).to.equal(1)
+})

docs/examples/FAQ/identity.ts

@@ -0,0 +1,8 @@
+import { createSelectorCreator } from 'reselect'
+
+const identity = <Func extends (...args: any[]) => any>(func: Func) => func
+
+const createNonMemoizedSelector = createSelectorCreator({
+  memoize: identity,
+  argsMemoize: identity
+})

docs/examples/FAQ/selectorRecomputing.ts

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect'
+
+export interface RootState {
+  todos: { id: number; completed: boolean }[]
+  alerts: { id: number; read: boolean; type: string }[]
+}
+
+const selectAlertsByType = createSelector(
+  [
+    (state: RootState) => state.alerts,
+    (state: RootState, type: string) => type
+  ],
+  (alerts, type) => alerts.filter(todo => todo.type === type),
+  {
+    argsMemoizeOptions: {
+      // This will check the arguments passed to the output selector.
+      equalityCheck: (a, b) => {
+        if (a !== b) {
+          console.log('Changed argument:', a, 'to', b)
+        }
+        return a === b
+      }
+    }
+  }
+)