{"_id":"eslint-plugin-immutable","_rev":"6-0af8c9424a5282eeea554b1bcc0c49cb","name":"eslint-plugin-immutable","description":"ESLint plugin to disable all mutation in JavaScript.","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"eslint-plugin-immutable","version":"1.0.0","description":"ESLint plugin to disable all mutation in JavaScript.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/jhusain/eslint-plugin-immutable.git"},"keywords":["eslint","immutability"],"author":{"name":"Jafar Husain"},"license":"Apache-2.0","bugs":{"url":"https://github.com/jhusain/eslint-plugin-immutable/issues"},"homepage":"https://github.com/jhusain/eslint-plugin-immutable#readme","gitHead":"55043ab338f586b75ae788bc66b27b5fe193edd0","_id":"eslint-plugin-immutable@1.0.0","_shasum":"4fe5839836be9809e08bac00cb7ce10e4b8e4821","_from":".","_npmVersion":"3.3.12","_nodeVersion":"5.4.1","_npmUser":{"name":"jonathanp","email":"persson.jonathan@gmail.com"},"dist":{"shasum":"4fe5839836be9809e08bac00cb7ce10e4b8e4821","tarball":"https://registry.npmjs.org/eslint-plugin-immutable/-/eslint-plugin-immutable-1.0.0.tgz","integrity":"sha512-ybjqMiL+hgrkgdHfkZjhgJS+Pkwb/iVmPNzbgsMbb2EZKNp3LOYfyce70w0P69LPy6UZgMq3j9kCTQk2hu6/fw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPMw5DvY3T7wKMn5bwwg925BW91jiM0Gy+Ow/09K4mugIgSfZ35qknaVPjQtQZ9EWKQj947skr0QEdoSlgU75DnaA="}]},"maintainers":[{"name":"jonathanp","email":"persson.jonathan@gmail.com"}],"_npmOperationalInternal":{"host":"packages-13-west.internal.npmjs.com","tmp":"tmp/eslint-plugin-immutable-1.0.0.tgz_1457982183946_0.017002623761072755"}}},"readme":"# eslint-plugin-immutable\n\nThis is an ESLint plugin to disable all mutation in JavaScript. Think this is a bit too restrictive? Well if you're using Redux and React, there isn't much reason for your code to be mutating *anything*. Redux maintains a mutable pointer to your immutable application state, and React manages your DOM state. Your components should be stateless functions, translating data into Virtual DOM objects whenever Redux emits a new state. These ESLint rules explicitly prohibit mutation, effectively forcing you to write code very similar to [Elm](http://elm-lang.org/) in React.\n\n## Installing\n\n`npm install eslint-plugin-immutable --save-dev`\n\n## ESLint Rules\nThere are three rules in the plugin:\n\n### no-let\n\nThere's no reason to use `let` in a Redux/React application, because all your state is managed by either Redux or React. Use `const` instead, and avoid state bugs altogether.\n\n```JavaScript\nlet x = 5; // <- Unexpected let or var, use const.\n```\n\nWhat about `for` loops? Loops can be replaced with the Array methods like `map`, `filter`, and so on. If you find the built-in JS Array methods lacking, use [lodash](https://github.com/lodash/lodash).\n\n```JavaScript\nconst SearchResults = \n ({ results }) => \n ;\n```\n\n### no-this\n\nThanks to libraries like [recompose](https://github.com/acdlite/recompose) and Redux's [React Container components](http://redux.js.org/docs/basics/UsageWithReact.html), there's not much reason to build Components using `React.createClass` or ES6 classes anymore. The `no-this` rule makes this explicit.\n\n```JavaScript\nconst Message = React.createClass({\n render: function() {\n return
{ this.props.message }
; // <- no this allowed\n }\n})\n```\n\nInstead of creating classes, you should use React 0.14's [Stateless Functional Components](https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.t5z2fdit6) and save yourself some keystrokes:\n\n```JavaScript\nconst Message = ({message}) =>
{ message }
;\n```\n\nWhat about lifecycle methods like `shouldComponentUpdate`? We can use the [recompose](https://github.com/acdlite/recompose) library to apply these optimizations to your Stateless Functional Components. The [recompose](https://github.com/acdlite/recompose) library relies on the fact that your Redux state is immutable to efficiently implement shouldComponentUpdate for you.\n\n```JavaScript\nimport { pure, onlyUpdateForKeys } from 'recompose';\n\nconst Message = ({message}) =>
{ message }
;\n\n// Optimized version of same component, using shallow comparison of props\n// Same effect as React's PureRenderMixin\nconst OptimizedMessage = pure(Message);\n\n// Even more optimized: only updates if specific prop keys have changed\nconst HyperOptimizedMessage = onlyUpdateForKeys(['message'], Message);\n```\n\n### no-mutation\n\nYou might think that prohibiting the use of `let` and `var` would eliminate mutation from your JavaScript code. **Wrong.** Turns out that there's a pretty big loophole in `const`...\n\n```JavaScript\nconst point = { x: 23, y: 44 };\npoint.x = 99; // This is legal\n```\n\nThis is why the `no-mutation` rule exists. This rule prevents you from assigning a value to the result of a member expression.\n\n```JavaScript\nconst point = { x: 23, y: 44 };\npoint.x = 99; // <- No object mutation allowed.\n```\n\nThis rule is just as effective as using Object.freeze() to prevent mutations in your Redux reducers. However this rule has **no run-time cost.** A good alternative to object mutation is to use the object spread syntax coming in ES2016.\n\n```JavaScript\nconst point = { x: 23, y: 44 };\nconst transformedPoint = { ...point, x: 99 };\n```\n\nYou can enable this syntax using the [syntax-object-rest-spread](https://babeljs.io/docs/plugins/syntax-object-rest-spread/) [Babel](https://babeljs.io/) plug-in.\n\n## Supplementary ESLint Rules to Enable\n\nThe rules in this package alone can not eliminate mutation in your JavaScript programs. To go the distance I suggest you also enable the following built-in ESLint rules:\n\n* no-var (self-explanatory)\n* no-undef (prevents assigning to global variables that haven't been declared)\n* no-param-reassign (prevents assigning to variables introduced as function parameters)\n\n## Sample Configuration File\n\nHere's a sample ESLint configuration file that activates these rules:\n\n```\n{\n \"extends\": \"airbnb\",\n \"plugins\": [\n \"immutable\"\n ],\n \"rules\": {\n \t\"immutable/no-let\": 2,\n \t\"immutable/no-this\": 2,\n \t\"immutable/no-mutation\": 2\n }\n}\n```\n\nSpecial Thanks to [cerealbox](https://github.com/cerealbox) who paired with me on this.\n","maintainers":[{"name":"jhusain","email":"jhusain@gmail.com"},{"name":"jonathanp","email":"persson.jonathan@gmail.com"}],"time":{"modified":"2022-06-17T20:32:52.807Z","created":"2016-03-14T19:03:07.716Z","1.0.0":"2016-03-14T19:03:07.716Z"},"homepage":"https://github.com/jhusain/eslint-plugin-immutable#readme","keywords":["eslint","immutability"],"repository":{"type":"git","url":"git+https://github.com/jhusain/eslint-plugin-immutable.git"},"author":{"name":"Jafar Husain"},"bugs":{"url":"https://github.com/jhusain/eslint-plugin-immutable/issues"},"license":"Apache-2.0","readmeFilename":"README.md","users":{"antanst":true,"ziflex":true}}