refactor: split for flat (#55)

* refactor: split for flat

* docs: update

* Update README.md

Co-authored-by: Daishi Kato <[email protected]>

* Update README.md

Co-authored-by: Daishi Kato <[email protected]>

* docs: breakdown addition

---------

Co-authored-by: Daishi Kato <[email protected]>

README.md

@@ -1,6 +1,6 @@
 # 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.
 
 ## Installation
 
@@ -11,36 +11,57 @@ npm install eslint-plugin-valtio --save-dev
 for yarn users:
 
 ```bash
-yarn add -D eslint-plugin-valtio 
+yarn add -D eslint-plugin-valtio
 ```
 
 ## Usage
 
-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.
 
 ```json
 {
   "rules": {
     "valtio/state-snapshot-rule": "warn",
-    "valtio/avoid-this-in-proxy" :"warn",
-  } 
+    "valtio/avoid-this-in-proxy": "warn"
+  }
 }
 ```
 
 ## Why
 
 This plugin helps you catch common mistakes that can occur in [valtio](https://github.com/pmndrs/valtio). Here are some cases that this plugin catches.
 
+
+## Rules Breakdown
+
 ### Snapshots in callbacks are not recommended
 
 We shouldn't use snapshots in callbacks, because snapshots can be stale there.
@@ -55,7 +76,7 @@ function App() {
   }
   return (
     <div>
-      {snap.count} <button onClick={handleClick}>click</button> 
+      {snap.count} <button onClick={handleClick}>click</button>
     </div>
   )
 }
@@ -70,12 +91,10 @@ const state = proxy({ count: 0 })
 
 function App() {
   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>
   )
 }
-``` 
+```
 
 ### Snapshots mutating is not possible
 
@@ -91,48 +110,51 @@ function App() {
   const handleClick = () => {
     ++snap.count // This doesn't work. Use proxy state instead.
   }
-  return <button onClick={handleClick}>mutate</button> 
+  return <button onClick={handleClick}>mutate</button>
 }
 ```
 
 ### Computed declaration order
 
-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.
 
 ```jsx
 const state = proxy({
   count: 0,
   inc() {
-    ++state.count; // works as the state is being modified
+    ++state.count // works as the state is being modified
   },
-});
+})
 
 const state = proxy({
   count: 0,
   inc() {
-    ++this.count; // works as the context belongs to proxy
+    ++this.count // works as the context belongs to proxy
   },
-});
+})
 
 const state = snapshot(
   proxy({
     count: 0,
     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.
     },
   })
-);
+)
 ```

src/index.js

@@ -15,6 +15,13 @@ const plugin = {
 Object.assign(plugin, {
   configs: {
     recommended: {
+      plugins: ['valtio'],
+      rules: {
+        'valtio/state-snapshot-rule': 'warn',
+        'valtio/avoid-this-in-proxy': 'warn',
+      },
+    },
+    'flat/recommended': {
       plugins: { valtio: plugin },
       rules: {
         'valtio/state-snapshot-rule': 'warn',
@@ -25,6 +32,5 @@ Object.assign(plugin, {
 })
 
 module.exports = plugin
-
 export const configs = plugin.configs
 export const rules = plugin.rules