eslint-plugin-valtio - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

index.js

@@ -660,2 +660,9 @@ 'use strict';
     recommended: {
+      plugins: ['valtio'],
+      rules: {
+        'valtio/state-snapshot-rule': 'warn',
+        'valtio/avoid-this-in-proxy': 'warn'
+      }
+    },
+    'flat/recommended': {
       plugins: {
@@ -662,0 +669,0 @@ valtio: plugin

package.json

 {
   "name": "eslint-plugin-valtio",
   "private": false,
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "An eslint plugin for better valtio experience",
@@ -6,0 +6,0 @@ "main": "index.js",

README.md

 # eslint-plugin-valtio
 
-[Valtio](https://github.com/pmndrs/valtio) linting plugin for better development. 
+[Valtio](https://github.com/pmndrs/valtio) linting plugin for better development.
 
@@ -14,3 +14,3 @@ ## Installation
 ```bash
-yarn add -D eslint-plugin-valtio 
+yarn add -D eslint-plugin-valtio
 ```
@@ -20,12 +20,30 @@
 
-Add `valtio` to the `extends` section of your `.eslintrc` configuration file. 
+### eslint v9 / flat config
 
+```js
+const valtio = require('eslint-plugin-valtio')
+
+module.exports = [
+  valtio.configs['flat/recommended'],
+  {
+    rules: {
+      'valtio/state-snapshot-rule': ['warn'],
+      'valtio/avoid-this-in-proxy': ['warn'],
+    },
+  },
+]
+```
+
+### eslint v8 and below
+
+Add `valtio` to the `extends` section of your `.eslintrc` configuration file.
+
 ```json
 {
-  "extends": [
-      "plugin:valtio/recommended"
-    ]
+  "extends": ["plugin:valtio/recommended"]
 }
 ```
 
+## Rules
+
 Alternatively, you can enable rules in the plugin, selectively.
@@ -37,4 +55,4 @@
     "valtio/state-snapshot-rule": "warn",
-    "valtio/avoid-this-in-proxy" :"warn",
-  } 
+    "valtio/avoid-this-in-proxy": "warn"
+  }
 }
@@ -47,2 +65,5 @@ ```
 
+
+## Rules Breakdown
+
 ### Snapshots in callbacks are not recommended
@@ -62,3 +83,3 @@
     <div>
-      {snap.count} <button onClick={handleClick}>click</button> 
+      {snap.count} <button onClick={handleClick}>click</button>
     </div>
@@ -78,8 +99,6 @@ )
   return (
-    <div>
-      {state.count} // This is not recommended as it is not reactive.
-    </div>
+    <div>{state.count} // This is not recommended as it is not reactive.</div>
   )
 }
-``` 
+```
 
@@ -100,3 +119,3 @@ ### Snapshots mutating is not possible
   }
-  return <button onClick={handleClick}>mutate</button> 
+  return <button onClick={handleClick}>mutate</button>
 }
@@ -107,16 +126,19 @@ ```
 
-In the way valtio treats objects in `proxyWithComputed`, the order of fields matters; for example, `quadrupled` comes before `doubled`, but it depends on `doubled`, so the order is wrong! So we need to bring `doubled` first. 
+In the way valtio treats objects in `proxyWithComputed`, the order of fields matters; for example, `quadrupled` comes before `doubled`, but it depends on `doubled`, so the order is wrong! So we need to bring `doubled` first.
 
 ```jsx
-const state = proxyWithComputed({
-  count: 0,
-}, {
-  quadrupled: (snap) => snap.doubled * 2, // Not found, If a computed field deriving value is created from another computed, the computed source should be declared first.
-  doubled: (snap) => snap.count * 2,
-})
+const state = proxyWithComputed(
+  {
+    count: 0,
+  },
+  {
+    quadrupled: (snap) => snap.doubled * 2, // Not found, If a computed field deriving value is created from another computed, the computed source should be declared first.
+    doubled: (snap) => snap.count * 2,
+  }
+)
 ```
 
-### Using `this` in proxy (`valtio/avoid-this-in-proxy`)  
+### Using `this` in proxy (`valtio/avoid-this-in-proxy`)
 
-When working with `proxy` using `this` in it's context as long as taken care of will work as expected but since the implementation differs from a simple `proxy` to a `snapshot` version of the proxy, using `this` could get confusing. This rule is specifically for beginners that are adapting to the structure/differences in valtio. 
+When working with `proxy` using `this` in it's context as long as taken care of will work as expected but since the implementation differs from a simple `proxy` to a `snapshot` version of the proxy, using `this` could get confusing. This rule is specifically for beginners that are adapting to the structure/differences in valtio.
 
@@ -127,5 +149,5 @@ ```jsx
   inc() {
-    ++state.count; // works as the state is being modified
+    ++state.count // works as the state is being modified
   },
-});
+})
 
@@ -135,5 +157,5 @@ const state = proxy({
   inc() {
-    ++this.count; // works as the context belongs to proxy
+    ++this.count // works as the context belongs to proxy
   },
-});
+})
 
@@ -144,6 +166,6 @@ const state = snapshot(
     inc() {
-      ++this.count; // won't work since the params are now frozen since you are in a snapshot.
+      ++this.count // won't work since the params are now frozen since you are in a snapshot.
     },
   })
-);
+)
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26874

increased by1.79%

Lines of code

567

increased by1.25%

Number of lines in readme file

161

increased by15.83%

No dependency changes