eslint-plugin-effector 0.5.1 → 0.7.0

package/utils/replace-by-sample.js

@@ -0,0 +1,94 @@
+const { buildObjectInText } = require("./builders");
+
+function* replaceGuardBySample(
+  guardConfig,
+  { fixer, node, context, importNodes }
+) {
+  let mapperFunctionNode = null;
+
+  let clockNode = guardConfig.clock?.value;
+  let targetNode = guardConfig.target?.value;
+  let sourceNode = guardConfig.source?.value;
+  let filterNode = guardConfig.filter?.value;
+
+  if (
+    targetNode.type === "CallExpression" &&
+    targetNode?.callee?.property?.name === "prepend"
+  ) {
+    mapperFunctionNode = targetNode?.arguments?.[0];
+    targetNode = targetNode.callee.object;
+    targetMapperUsed = true;
+  }
+
+  yield* replaceBySample(
+    { clockNode, sourceNode, filterNode, mapperFunctionNode, targetNode },
+    { node, fixer, context, importNodes, methodName: "guard" }
+  );
+}
+
+function* replaceForwardBySample(
+  forwardConfig,
+  { fixer, node, context, importNodes }
+) {
+  let mapperFunctionNode = null;
+
+  let clockMapperUsed = false;
+  let targetMapperUsed = false;
+
+  let clockNode = forwardConfig.from.value;
+  let targetNode = forwardConfig.to.value;
+
+  if (
+    clockNode.type === "CallExpression" &&
+    clockNode?.callee?.property?.name === "map"
+  ) {
+    mapperFunctionNode = clockNode?.arguments?.[0];
+    clockNode = clockNode.callee.object;
+    clockMapperUsed = true;
+  }
+
+  if (
+    targetNode.type === "CallExpression" &&
+    targetNode?.callee?.property?.name === "prepend"
+  ) {
+    mapperFunctionNode = targetNode?.arguments?.[0];
+    targetNode = targetNode.callee.object;
+    targetMapperUsed = true;
+  }
+
+  // We cannot apply two mappers in one sample
+  // Let's revert mappers and use .map + .prepend
+  if (clockMapperUsed && targetMapperUsed) {
+    mapperFunctionNode = null;
+    clockNode = forwardConfig.from.value;
+    targetNode = forwardConfig.to.value;
+  }
+
+  yield* replaceBySample(
+    { clockNode, mapperFunctionNode, targetNode },
+    { node, fixer, context, importNodes, methodName: "forward" }
+  );
+}
+
+function* replaceBySample(
+  { clockNode, sourceNode, filterNode, mapperFunctionNode, targetNode },
+  { node, fixer, context, importNodes, methodName }
+) {
+  yield fixer.replaceText(
+    node,
+    `sample(${buildObjectInText.fromMapOfNodes({
+      properties: {
+        clock: clockNode,
+        source: sourceNode,
+        filter: filterNode,
+        fn: mapperFunctionNode,
+        target: targetNode,
+      },
+      context,
+    })})`
+  );
+
+  yield fixer.replaceText(importNodes.get(methodName), "sample");
+}
+
+module.exports = { replaceForwardBySample, replaceGuardBySample };

package/rules/enforce-effect-naming-convention/enforce-effect-naming-convention.md

@@ -1,11 +0,0 @@
-# effector/enforce-effect-naming-convention
-
-Enforcing naming conventions helps keep the codebase consistent, and reduces overhead when thinking about how to name a variable with effect. Your effect should be distingueshed by a suffix `Fx`. For example, `fetchUserInfoFx` is a effect, `fetchUserInfo` is not.
-
-```ts
-// 👍 nice name
-const fetchNameFx = createEffect();
-
-// 👎 bad name
-const fetchName = createEffect();
-```

package/rules/enforce-gate-naming-convention/enforce-gate-naming-convention.md

@@ -1,11 +0,0 @@
-# effector/enforce-gate-naming-convention
-
-Enforcing naming conventions helps keep the codebase consistent, and reduces overhead when thinking about how to name a variable with gate. Every gate is a react-component, so it should be named as regular react-compoent.
-
-```ts
-// 👍 nice name
-const MyFavoritePageGate = createGate();
-
-// 👎 bad name
-const otherFavoritePageGate = createGate();
-```

package/rules/enforce-store-naming-convention/enforce-store-naming-convention.md

@@ -1,52 +0,0 @@
-# effector/enforce-store-naming-convention
-
-Enforcing naming conventions helps keep the codebase consistent, and reduces overhead when thinking about how to name a variable with store. Depending on the configuration your stores should be distinguished by a prefix or a postfix $. Enforces prefix convention by default.
-
-## Prefix convention
-
-When configured as:
-
-```js
-module.exports = {
-  rules: {
-    "effector/enforce-store-naming-convention": "error",
-  },
-};
-```
-
-Prefix convention will be enforced:
-
-```ts
-// 👍 nice name
-const $name = createStore(null);
-
-// 👎 bad name
-const name = createStore(null);
-```
-
-## Postfix convention
-
-When configured as:
-
-```js
-module.exports = {
-  rules: {
-    "effector/enforce-store-naming-convention": "error",
-  },
-  settings: {
-    effector: {
-      storeNameConvention: "postfix",
-    },
-  },
-};
-```
-
-Postfix convention will be enforced:
-
-```ts
-// 👍 nice name
-const name$ = createStore(null);
-
-// 👎 bad name
-const name = createStrore(null);
-```

package/rules/no-ambiguity-target/no-ambiguity-target.md

@@ -1,12 +0,0 @@
-# effector/no-ambiguity-target
-
-Call of `gaurd`/`sample` with `target` and variable assignment is ambiguity. One of them should be omitted from source code.
-
-```ts
-// 👎 should be rewritten
-const result = guard({ clock: trigger, filter: Boolean, target });
-
-// 👍 makes sense
-guard({ clock: trigger, filter: Boolean, target });
-const result = target;
-```

package/rules/no-duplicate-on/no-duplicate-on.md

@@ -1,16 +0,0 @@
-# effector/no-duplicate-on
-
-Disallows duplcates `on`-handlers on particular store.
-
-```ts
-const increment = createEvent();
-
-// 👍 all explicitly
-const $goodCounter = createStore(0).on(increment, (counter) => counter + 1);
-
-// 👎 so, which handler should we choose?
-// it's better to remove one of them
-const $badCounter = createStore(0)
-  .on(increment, (counter) => counter + 1)
-  .on(increment, (counter) => counter + 2);
-```

package/rules/no-getState/no-getState.md

@@ -1,20 +0,0 @@
-# effector/no-getState
-
-`.getState` gives rise to difficult to debug imperative code and kind of race condition. Prefer declarative `sample` to pass data from store and `attach` for effects.
-
-```ts
-const $username = createStore(null);
-const userLoggedIn = createEvent();
-
-// 👍 good solution
-const fetchUserCommentsFx = createEffect((name) => /* ... */);
-sample({ source: $username, clock: userLoggedIn, target: fetchUserCommentsFx });
-
-// 👎 bad solution
-const fetchUserCommentsInBadWayFx = createEffect(() => {
-    const name = $username.getState();
-
-    /* ... */
-});
-forward({ from: userLoggedIn, to: fetchUserCommentsInBadWayFx });
-```

package/rules/no-unnecessary-combination/no-unnecessary-combination.md

@@ -1,25 +0,0 @@
-# effector/no-unnecessary-combination
-
-Call of `combine`/`merge` in `clock`/`source` is unnecessary. It can be omitted from source code.
-
-```ts
-// 👎 can be simplified
-const badEventOne = guard({
-  clock: combine($store1, $store2),
-  filter: $filter,
-});
-const badEventOne = guard({
-  clock: combine($store1, $store2, (store1, store2) => ({
-    x: store1,
-    y: store2,
-  })),
-  filter: $filter,
-});
-
-// 👍 better
-const goodEventOne = guard({ clock: [$store1, $store2], filter: $filter });
-const goodEventTwo = guard({
-  clock: { x: $store1, x: $store2 },
-  filter: $filter,
-});
-```

package/rules/no-unnecessary-duplication/no-unnecessary-duplication.md

@@ -1,32 +0,0 @@
-# effector/no-unnecessary-duplication
-
-Same `clock`/`source` in `sample` and `guard` don't make sense, any of these fields can be omitted in this case.
-
-```ts
-const $data = createStore(null);
-
-// 👎 can be simplified
-const target1 = sample({
-  source: $data,
-  clock: $data,
-  fn(data) {
-    return data.length;
-  },
-});
-
-// 👍 better
-const target2 = sample({
-  source: $data,
-  fn(data) {
-    return data.length;
-  },
-});
-
-// 👍 also nice solution
-const target3 = sample({
-  clock: $data,
-  fn(data) {
-    return data.length;
-  },
-});
-```

package/rules/no-useless-methods/no-useless-methods.md

@@ -1,14 +0,0 @@
-# effector/no-useless-methods
-
-Call of `gaurd`/`sample` without `target` or variable assignment is useless. It can be omitted from source code.
-
-```ts
-// 👎 can be omitted
-guard({ clock: trigger, filter: Boolean });
-
-// 👍 makes sense
-const target1 = guard({ clock: trigger, filter: Boolean });
-
-// 👍 make sense too
-guard({ clock: trigger, filter: Boolean, target: target2 });
-```

package/rules/no-watch/no-watch.md

@@ -1,42 +0,0 @@
-# effector/no-watch
-
-Method `.watch` leads to imperative code. Try replacing it with operators (`forward`, `sample`, etc) or use the `target` parameter of the operators.
-
-> Caution! This rule only works on projects using TypeScript.
-
-```ts
-const myFx = createEffect();
-const myEvent = createEvent();
-const $awesome = createStore();
-
-// 👍 good solutions
-forward({
-  from: myFx.finally,
-  to: myEvent,
-});
-
-guard({
-  clock: myEvent,
-  filter: Boolean,
-  target: myFx,
-});
-
-sample({
-  from: $awesome.updates,
-  fn: identity,
-  to: myEvent,
-});
-
-// 👎 bad solutions
-myFx.finally.watch(myEvent);
-
-myEvent.watch((payload) => {
-  if (Boolean(payload)) {
-    myFx(payload);
-  }
-});
-
-$awesome.updates.watch((data) => {
-  myEvent(identity(data));
-});
-```

package/rules/prefer-sample-over-forward-with-mapping/prefer-sample-over-forward-with-mapping.md

@@ -1,27 +0,0 @@
-# effector/prefer-sample-over-forward-with-mapping
-
-Prefer `sample` over `forward` with `.map`/`.prepend`.
-
-```js
-const eventOne = createEvent();
-const eventTwo = createEvent();
-
-// 👎 looks weird
-forward({
-  from: eventOne.map((items) => items.length),
-  to: eventTwo,
-});
-
-// 👎 weird too
-forward({
-  from: eventOne,
-  to: eventTwo.prepend((items) => items.length),
-});
-
-// 👍 better
-sample({
-  source: eventOne,
-  fn: (items) => items.length,
-  target: eventTwo,
-});
-```

package/rules/strict-effect-handlers/strict-effect-handlers.md

@@ -1,38 +0,0 @@
-# effector/strict-effect-handlers
-
-[Related documentation](https://effector.dev/docs/api/effector/scope#imperative-effects-calls-with-scope)
-
-When effect calls another effects then it should call only effects, not common async functions and effect calls should have await:
-
-```ts
-// 👍 effect without inner effects:
-const delayFx = createEffect(async () => {
-  await new Promise((rs) => setTimeout(rs, 80));
-});
-```
-
-```ts
-const authUserFx = createEffect();
-const sendMessageFx = createEffect();
-
-// 👍 effect with inner effects
-const sendWithAuthFx = createEffect(async () => {
-  await authUserFx();
-  await delayFx();
-  await sendMessageFx();
-});
-```
-
-```ts
-// 👎 effect with inner effects and common async functions
-
-const sendWithAuthFx = createEffect(async () => {
-  await authUserFx();
-  //WRONG! wrap that in effect
-  await new Promise((rs) => setTimeout(rs, 80));
-  //context lost
-  await sendMessageFx();
-});
-```
-
-So, any effect might either call another effects or perform some async computations but not both.

package/rules/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "module": "commonjs",
-    "lib": ["es2017", "es2019"],
-    "baseUrl": "./"
-  },
-  "include": ["./**/examples/**/*.ts"]
-}