Working hooks

Author: Andarist

.babelrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        loose: true,
+        modules: false,
+      },
+    ],
+    '@babel/react',
+  ],
+  plugins: [
+    process.env.NODE_ENV === 'test' && '@babel/transform-modules-commonjs',
+  ].filter(Boolean),
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.huskyrc

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged"
+  }
+}

.lintstagedrc

@@ -0,0 +1,6 @@
+{
+  "*.{js,md}": [
+    "prettier --single-quote --no-semi --trailing-comma=all --write",
+    "git add"
+  ]
+}

.npmrc

@@ -0,0 +1 @@
+package-lock=false

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+
+node_js:
+  - "node"

README.md

@@ -0,0 +1,90 @@
+# react-selector-hooks
+
+Collection of hook-based memoized selector factories for declarations outside of render.
+
+## Motivation
+
+Reusing existing functions. It also might often be desirable to declare selector functions outside of render to keep render functions less bloated.
+
+Instead of this:
+
+```jsx
+function Component({ a, b }) {
+  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
+  return <span>{memoizedValue}</span>
+}
+```
+
+You can write this:
+
+```jsx
+const useSelector = createSelector(computeExpensiveValue)
+
+function Component({ a, b }) {
+  const memoizedValue = useSelector(a, b)
+  return <span>{memoizedValue}</span>
+}
+```
+
+## API
+
+### createSelector(resultFunc)
+
+```jsx
+import * as React from 'react'
+import { createSelector } from 'react-selector-hooks'
+
+const useSelector = createSelector(computeExpensiveValue)
+
+export default function Component({ a, b }) {
+  const memoizedValue = useSelector(a, b)
+  return <span>{memoizedValue}</span>
+}
+```
+
+### createStateSelector([inputSelectors], resultFunc)
+
+This is really similar to [`reselect's createSelector`](https://github.com/reduxjs/reselect#createselectorinputselectors--inputselectors-resultfunc).
+
+```jsx
+import * as React from 'react'
+import { createStateSelector } from 'react-selector-hooks'
+
+const useSelector = createStateSelector(
+  [
+    state => state.values.value1,
+    (state, a) => state.values.value2 + a,
+    (state, a) => state.values.value3 * a,
+  ],
+  (value1, value2, value3) => value1 + value2,
+)
+
+export default function Component({ a }) {
+  const state = React.useContext(StoreContext)
+  const memoizedValue = useSelector(state, a)
+  return <span>{memoizedValue}</span>
+}
+```
+
+### createStructuredSelector({...inputSelectors}, resultFunc)
+
+This is really similar to [`reselect's createStructuredSelector`](https://github.com/reduxjs/reselect#createstructuredselectorinputselectors-selectorcreator--createselector).
+
+```jsx
+import * as React from 'react'
+import { createStructuredSelector } from 'react-selector-hooks'
+
+const useSelector = createStructuredSelector(
+  {
+    value1: state => state.values.value1,
+    value2: (state, a) => state.values.value2 + a,
+  },
+  ({ value1, value2 }) => value1 + value2,
+)
+
+export default function Component({ a }) {
+  const state = React.useContext(StoreContext)
+  const memoizedValue = useSelector(state, a)
+  return <span>{memoizedValue}</span>
+}
+```

__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createSelector 1`] = `
+<span>
+  5
+</span>
+`;
+
+exports[`createSelector 2`] = `
+<span>
+  5
+</span>
+`;
+
+exports[`createSelector 3`] = `
+<span>
+  7
+</span>
+`;
+
+exports[`createStateSelector 1`] = `
+<span>
+  5
+</span>
+`;
+
+exports[`createStateSelector 2`] = `
+<span>
+  5
+</span>
+`;
+
+exports[`createStateSelector 3`] = `
+<span>
+  13
+</span>
+`;
+
+exports[`createStateSelector 4`] = `
+<span>
+  13
+</span>
+`;
+
+exports[`createStateSelector 5`] = `
+<span>
+  16
+</span>
+`;
+
+exports[`createStructuredSelector 1`] = `
+<span>
+  5
+</span>
+`;
+
+exports[`createStructuredSelector 2`] = `
+<span>
+  5
+</span>
+`;
+
+exports[`createStructuredSelector 3`] = `
+<span>
+  13
+</span>
+`;
+
+exports[`createStructuredSelector 4`] = `
+<span>
+  13
+</span>
+`;
+
+exports[`createStructuredSelector 5`] = `
+<span>
+  16
+</span>
+`;

__tests__/index.js

@@ -0,0 +1,131 @@
+import * as React from 'react'
+import TestRenderer from 'react-test-renderer'
+import {
+  createSelector,
+  createStateSelector,
+  createStructuredSelector,
+} from '../src'
+
+const render = element => {
+  const renderer = TestRenderer.create(element)
+  return {
+    rerender(element) {
+      renderer.update(element)
+    },
+    snapshot() {
+      expect(renderer.toJSON()).toMatchSnapshot()
+    },
+  }
+}
+
+test('createSelector', () => {
+  const selector = jest.fn((a, b) => a + b)
+  const useSelector = createSelector(selector)
+
+  function Test({ a, b }) {
+    const result = useSelector(a, b)
+    return <span>{result}</span>
+  }
+
+  const { rerender, snapshot } = render(<Test a={2} b={3} />)
+  expect(selector).toBeCalledTimes(1)
+  expect(selector).toHaveBeenCalledWith(2, 3)
+  expect(selector).toHaveReturnedWith(5)
+  snapshot()
+
+  rerender(<Test a={2} b={3} />)
+  expect(selector).toBeCalledTimes(1)
+  snapshot()
+
+  rerender(<Test a={4} b={3} />)
+  expect(selector).toBeCalledTimes(2)
+  expect(selector).toHaveReturnedWith(7)
+  snapshot()
+})
+
+test('createStateSelector', () => {
+  const selector = jest.fn((a, b) => a + b)
+  const useSelector = createStateSelector(
+    [(state, path) => state[path], state => state.b],
+    selector,
+  )
+
+  function Test({ state, path }) {
+    const result = useSelector(state, path)
+    return <span>{result}</span>
+  }
+
+  const obj = { a: 2, b: 3, c: 10 }
+  const { rerender, snapshot } = render(<Test path="a" state={obj} />)
+  expect(selector).toBeCalledTimes(1)
+  expect(selector).toHaveBeenCalledWith(2, 3)
+  expect(selector).toHaveReturnedWith(5)
+  snapshot()
+
+  rerender(<Test path="a" state={obj} />)
+  expect(selector).toBeCalledTimes(1)
+  snapshot()
+
+  rerender(<Test path="c" state={obj} />)
+  expect(selector).toBeCalledTimes(2)
+  expect(selector).toHaveBeenCalledWith(10, 3)
+  expect(selector).toHaveReturnedWith(13)
+  snapshot()
+
+  const obj2 = { ...obj }
+  rerender(<Test path="c" state={obj2} />)
+  expect(selector).toBeCalledTimes(2)
+  snapshot()
+
+  const obj3 = { ...obj2, b: 6 }
+  rerender(<Test path="c" state={obj3} />)
+  expect(selector).toBeCalledTimes(3)
+  expect(selector).toHaveBeenCalledWith(10, 6)
+  expect(selector).toHaveReturnedWith(16)
+  snapshot()
+})
+
+test('createStructuredSelector', () => {
+  const selector = jest.fn(({ x, y }) => x + y)
+  const useSelector = createStructuredSelector(
+    {
+      x: (state, path) => state[path],
+      y: state => state.b,
+    },
+    selector,
+  )
+
+  function Test({ state, path }) {
+    const result = useSelector(state, path)
+    return <span>{result}</span>
+  }
+
+  const obj = { a: 2, b: 3, c: 10 }
+  const { rerender, snapshot } = render(<Test path="a" state={obj} />)
+  expect(selector).toBeCalledTimes(1)
+  expect(selector.mock.calls[0][0]).toEqual({ x: 2, y: 3 })
+  expect(selector).toHaveReturnedWith(5)
+  snapshot()
+
+  rerender(<Test path="a" state={obj} />)
+  expect(selector).toBeCalledTimes(1)
+  snapshot()
+
+  rerender(<Test path="c" state={obj} />)
+  expect(selector).toBeCalledTimes(2)
+  expect(selector.mock.calls[1][0]).toEqual({ x: 10, y: 3 })
+  expect(selector).toHaveReturnedWith(13)
+  snapshot()
+
+  const obj2 = { ...obj }
+  rerender(<Test path="c" state={obj2} />)
+  expect(selector).toBeCalledTimes(2)
+  snapshot()
+
+  const obj3 = { ...obj2, b: 6 }
+  rerender(<Test path="c" state={obj3} />)
+  expect(selector).toBeCalledTimes(3)
+  expect(selector.mock.calls[2][0]).toEqual({ x: 10, y: 6 })
+  expect(selector).toHaveReturnedWith(16)
+  snapshot()
+})

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-selector-hooks",
+  "version": "0.0.0",
+  "description": "Collection of hook-based selector factories for declarations outside of render.",
+  "main": "./dist/react-selector-hooks.js",
+  "module": "./dist/react-selector-hooks.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "jest --env=node",
+    "prebuild": "rimraf dist",
+    "build": "rollup -c",
+    "preversion": "npm test",
+    "prepare": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Andarist/react-selector-hooks.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Andarist/react-selector-hooks/issues"
+  },
+  "homepage": "https://github.com/Andarist/react-selector-hooks#readme",
+  "peerDependencies": {
+    "react": "^16.7.0-alpha.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-transform-modules-commonjs": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "husky": "^1.1.0",
+    "jest": "^23.6.0",
+    "lint-staged": "^7.3.0",
+    "prettier": "^1.14.3",
+    "react": "16.7.0-alpha.0",
+    "react-test-renderer": "^16.7.0-alpha.0",
+    "rimraf": "^2.6.2",
+    "rollup": "^0.66.6",
+    "rollup-plugin-babel": "^4.0.3"
+  }
+}