Initial commit

Author: sin

.editorconfig

@@ -0,0 +1,25 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# http://editorconfig.org/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.html]
+indent_size = 2
+
+[{.travis.yml,package.json}]
+# The indent size used in the `package.json` file cannot be changed
+# https://github.com/npm/npm/pull/3180#issuecomment-16336516
+indent_size = 2
+indent_style = space

.gitignore

@@ -0,0 +1,4 @@
+.idea
+node_modules
+dist
+docs

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Mateusz Sienkan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,76 @@
+# React Immer Hooks
+
+> Easy immutability in [React Hooks](https://reactjs.org/docs/hooks-intro.html) with [Immer](https://github.com/mweststrate/immer).
+
+**Note:** _React Hooks are currently a [RFC proposal](https://github.com/reactjs/rfcs/pull/68) which may be subject to change. You'll need at least `react@16.7.0-alpha.0` to use this feature._
+
+## Installation
+
+`yarn add react-immer-hooks`
+
+## Usage
+
+##### useImmerState(initialState)
+
+```jsx
+import { useImmerState } from 'react-immer-hooks'
+
+const initialState = {
+  clicks: 0,
+  doubleClicks: 0
+}
+
+const ClickCounters = () => {
+  const [ state, setState ] = useImmerState(initialState)
+
+  const onClick = () => setState(draft => { draft.clicks++ })
+  const onDoubleClick = () => setState(draft => { draft.doubleClicks++ })
+
+  return (
+    <>
+      <button onClick={onClick} onDoubleClick={onDoubleClick}>
+        Clics: {state.clicks}, Double clicks: {state.doubleClicks}
+      </button>
+    </>
+  )
+}
+```
+
+##### useImmerReducer(reducer, initialState)
+
+```jsx
+import { useImmerReducer } from 'react-immer-hooks'
+
+const initialState = {
+  count: 0
+}
+
+const reducer = (draft, action) => {
+  if (action.type === 'INCREMENT') draft.count++
+  if (action.type === 'DECREMENT') draft.count--
+  if (action.type === 'ADD') draft.count += action.payload
+}
+
+const Counter = () => {
+  const [ state, dispatch ] = useImmerReducer(reducer, initialState)
+
+  return (
+    <>
+      Count: {state.count}
+      <button onClick={() => dispatch({ type: 'INCREMENT'})}>
+        Increment
+      </button>
+      <button onClick={() => dispatch({ type: 'DECREMENT'})}>
+        Decrement
+      </button>
+      <button onClick={() => dispatch({ type: 'ADD', payload: 5})}>
+        Add 5
+      </button>
+    </>
+  )
+}
+```
+
+## License
+
+MIT License

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-immer-hooks",
+  "version": "0.1.0",
+  "description": "Easy immutability in React Hooks.",
+  "main": "dist/react-immer-hooks.js",
+  "module": "dist/react-immer-hooks.mjs",
+  "browser": "dist/react-immer-hooks.min.js",
+  "source": "src/index.mjs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sin/react-immer-hooks.git"
+  },
+  "author": "Mateusz Sienkan <sin.mateusz@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w"
+  },
+  "devDependencies": {
+    "@babel/core": "7",
+    "@babel/preset-env": "^7.0.0",
+    "rollup": "^0.65.2",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-node-resolve": "^3.4.0"
+  },
+  "peerDependencies": {
+    "react": "16.7.0-alpha.0",
+    "immer": "^1.7.3"
+  }
+}

rollup.config.js

@@ -0,0 +1,47 @@
+import resolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
+
+const input = 'src/index.mjs'
+const output = 'dist/react-immer-hooks'
+
+const sourcemap = true
+const external = []
+const plugins = [ resolve() ]
+const babelConfig = {
+  babelrc: false,
+  exclude: 'node_modules/**',
+  presets: ['@babel/preset-env']
+}
+
+export default [{
+  input,
+  output: {
+    file: `${output}.mjs`,
+    format: 'es',
+    sourcemap
+  },
+  external,
+  plugins
+},
+{
+  input,
+  output: {
+    file: `${output}.js`,
+    format: 'cjs',
+    sourcemap
+  },
+  external,
+  plugins
+},
+{
+  input,
+  output: {
+    file: `${output}.min.js`,
+    format: 'iife',
+    name: 'ReactImmerHooks'
+  },
+  plugins: [
+    ...plugins,
+    babel(babelConfig)
+  ]
+}]

src/index.mjs

@@ -0,0 +1,7 @@
+import useImmerState from './useImmerState'
+import useImmerReducer from './useImmerReducer'
+
+export {
+  useImmerState,
+  useImmerReducer
+}

src/useImmerReducer.mjs

@@ -0,0 +1,14 @@
+import { useReducer } from 'react'
+import produce from 'immer'
+
+/**
+ * Creates wrapped `useReducer`.
+ *
+ * @param {Any} initialState
+ * @returns {[Any, Function]}
+ */
+
+const useImmerReducer = (reducer, initialState) =>
+  useReducer(produce(reducer), initialState)
+
+export default useImmerReducer

src/useImmerState.mjs

@@ -0,0 +1,19 @@
+import { useState } from 'react'
+import produce from 'immer'
+
+/**
+ * Creates wrapped `useState`.
+ *
+ * @param {Any} initialState
+ * @returns {[Any, Function]}
+ */
+
+const useImmerState = initialState => {
+  const [ state, setState ] = useState(initialState)
+
+  const setImmerState = setter => setState(produce(setter))
+
+  return [state, setImmerState]
+}
+
+export default useImmerState