@codyswann/lisa 4.33.4 → 4.33.6

package/eslint-plugin-component-structure/README.md

@@ -40,15 +40,36 @@ In `.eslintrc.json`:
 
 ### no-return-in-view
 
-Prevents early returns and conditional logic in View components to maintain pure presentation components.
+Requires a View component to be an arrow function with an **expression body**.
 
 #### Rule Details
 
-View components should only contain JSX presentation logic. Any conditional rendering or early returns should be handled in the Container component or passed as props.
+Stated as a required shape rather than as "no return statements", because a
+`FunctionDeclaration` cannot have an expression body — so requiring one bans
+declaration form by construction, with no prose scanning and no false-positive
+surface.
+
+That distinction is the bug this rule shipped with. It registered a single
+`ArrowFunctionExpression` visitor, and nothing anywhere required a View to be an
+arrow function, so:
+
+```typescript
+const HomeScreenView = ({ label }) => { return <Box />; };  // reported
+function HomeScreenView({ label }) { return <Box />; }      // never visited
+```
+
+Writing `function` instead of `const` was a complete, silent opt-out, with
+`require-memo-in-view` still passing because it checks the export.
+
+What the rule guarantees is **no statement list**. It is not a purity gate:
+`{Date.now()}` and `{Math.random() > 0.5 ? … : …}` are legal expression bodies.
+Hooks are the other half — see `no-hooks-in-view`.
 
 **Where does this rule apply?**
 
 - Files matching `*View.tsx`, `*View.jsx`
+- In `features/**/components/`, `features/**/screens/`, and `components/`
+- **Excludes**: `components/ui/`, `components/custom/ui/`
 
 #### Configuration
 
@@ -64,6 +85,66 @@ In `.eslintrc.json`:
 
 ---
 
+### no-hooks-in-view
+
+Disallows any hook call anywhere in a View component file.
+
+#### Rule Details
+
+The matcher is a **shape** — `use` followed by an uppercase letter, called — and
+never a list of names. The call that motivated this rule was a project-local
+custom hook, which any enumerated list would have missed.
+
+That is also why there is no exemption list: a custom data hook and a render
+helper are indistinguishable by name, so `useMemo` and `useCallback` are caught
+too. Both the bare call (`useFlag()`) and the namespaced one (`React.useMemo()`)
+are matched.
+
+Scope is the file, not the component body — a hook called from a local render
+helper still runs during that View's render.
+
+❌ **Incorrect**:
+
+```typescript
+// HomeScreenView.tsx — already in the shape no-return-in-view demands
+const HomeScreenView = ({ label }) => (
+  <Box>{useCreateNoteQuickActionEnabled() ? <Text>{label}</Text> : null}</Box>
+);
+```
+
+✅ **Correct** — the hook moves to the Container and its result arrives as a prop:
+
+```typescript
+const HomeScreenView = ({ label, isQuickActionEnabled }) => (
+  <Box>{isQuickActionEnabled ? <Text>{label}</Text> : null}</Box>
+);
+```
+
+**Where does this rule apply?**
+
+- Files matching `*View.tsx`, `*View.jsx`
+- In `features/**/components/`, `features/**/screens/`, and `components/`
+- **Excludes**: `components/ui/`, `components/custom/ui/`
+
+Pair it with `no-restricted-imports` on the same files to catch the import line
+before a call site exists. The two are independent axes: a hook re-exported
+through a barrel escapes the import patterns, and an import with no call yet
+escapes this rule.
+
+#### Configuration
+
+In `.eslintrc.json`:
+
+```json
+{
+  "rules": {
+    "component-structure/no-hooks-in-view": "error"
+  }
+}
+```
+
+---
+
 ### require-memo-in-view
 
 Enforces the use of `React.memo()` for View components to optimize rendering performance.
@@ -197,6 +278,7 @@ export default [
     },
     rules: {
       'component-structure/enforce-component-structure': 'error',
+      'component-structure/no-hooks-in-view': 'error',
       'component-structure/no-return-in-view': 'error',
       'component-structure/require-memo-in-view': 'error',
       'component-structure/single-component-per-file': 'error',
@@ -212,6 +294,7 @@ export default [
   "plugins": ["component-structure"],
   "rules": {
     "component-structure/enforce-component-structure": "error",
+    "component-structure/no-hooks-in-view": "error",
     "component-structure/no-return-in-view": "error",
     "component-structure/require-memo-in-view": "error",
     "component-structure/single-component-per-file": "error"

package/eslint-plugin-component-structure/__tests__/no-hooks-in-view.test.js

@@ -0,0 +1,229 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+/**
+ * Unit tests for the no-hooks-in-view ESLint rule.
+ *
+ * The View half of the Container/View pattern has documented "No hooks" since
+ * the skill was written, and nothing enforced it. The call that made that
+ * expensive was a project-local custom hook, so the matcher here is a SHAPE —
+ * `use` followed by an uppercase letter, called — and never a list of names.
+ * A name list would have missed the one that mattered.
+ *
+ * Catching `useMemo` and `useCallback` too is the accepted cost of that shape:
+ * a custom data hook and a render helper are indistinguishable by name, and the
+ * skill already forbids `useMemo` in a View, so exempting it would contradict
+ * the document. Exemptions are the escape hatch this gate is not allowed.
+ * @module eslint-plugin-component-structure/tests/no-hooks-in-view
+ */
+
+const { RuleTester } = require("eslint");
+
+const rule = require("../rules/no-hooks-in-view");
+
+const FEATURE_COMPONENTS = "features/example/components";
+const VIEW_FILE = `${FEATURE_COMPONENTS}/MyView.tsx`;
+
+describe("the report names the escape route", () => {
+  /**
+   * A ban with no way out is what makes a developer — or an agent — reach for a
+   * disable comment, and this rule accepts none. The message is therefore part
+   * of the rule's contract, not decoration, and the wording that survived a
+   * design argument is exactly the wording that goes stale silently: nothing
+   * else in the suite fails if it is replaced with "Not allowed."
+   */
+  const message = rule.meta.messages.noHooksInView;
+
+  it("names the Container as the destination", () => {
+    expect(message).toContain("into the corresponding Container");
+  });
+
+  it("says a Container may hold a callback that returns JSX", () => {
+    // Without this, the advice produces a second violation for the renderItem
+    // shape — the collision that nearly cost this rule its generic matcher.
+    expect(message).toContain("returns JSX");
+  });
+
+  it("offers row extraction as an alternative, not a requirement", () => {
+    expect(message).toContain("renderItem");
+    expect(message).toContain("equally valid alternative");
+  });
+
+  it("names the hook it is reporting", () => {
+    expect(message).toContain("{{hook}}");
+  });
+});
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+ruleTester.run("no-hooks-in-view", rule, {
+  valid: [
+    {
+      code: `
+        const MyView = ({ label }) => <Text>{label}</Text>;
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+    },
+    {
+      // `useful` is not a hook: the shape requires an uppercase letter after
+      // "use". Without that boundary the rule would report ordinary helpers.
+      code: `
+        const MyView = ({ items }) => <Box>{useful(items)}</Box>;
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+    },
+    {
+      // An import of a hook is not a call. The import line is covered by
+      // no-restricted-imports in the shipped config, on purpose: two
+      // independent axes, not one duplicated.
+      code: `
+        import { useMemo } from "react";
+
+        const MyView = ({ label }) => <Text>{label}</Text>;
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+    },
+    {
+      // Containers own hooks.
+      code: `
+        const MyContainer = () => {
+          const value = useMemo(() => 1, []);
+          return <MyView value={value} />;
+        };
+      `,
+      filename: `${FEATURE_COMPONENTS}/MyContainer.tsx`,
+    },
+    {
+      // Vendored UI primitives are outside the Container/View pattern.
+      code: `
+        const ButtonView = () => <Pressable>{useThemeColor()}</Pressable>;
+      `,
+      filename: "components/ui/Button/ButtonView.tsx",
+    },
+    {
+      code: `
+        const InputView = () => <Field>{useThemeColor()}</Field>;
+      `,
+      filename: "components/custom/ui/Input/InputView.tsx",
+    },
+  ],
+  invalid: [
+    {
+      // THE INCIDENT SHAPE. An expression-bodied arrow — legal under
+      // no-return-in-view in every form — with a hook called inline in JSX.
+      // This is the case the expression-body requirement alone cannot catch.
+      code: `
+        const MyView = ({ label }) => (
+          <Box>{useFlag() ? <Text>{label}</Text> : null}</Box>
+        );
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [{ messageId: "noHooksInView", data: { hook: "useFlag" } }],
+    },
+    {
+      // A project-local custom hook. Any rule built on an enumerated name list
+      // misses this, which is what made the generic shape non-negotiable.
+      code: `
+        const MyView = ({ label }) => (
+          <Box>
+            {useCreateNoteQuickActionEnabled() ? <Text>{label}</Text> : null}
+          </Box>
+        );
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [
+        {
+          messageId: "noHooksInView",
+          data: { hook: "useCreateNoteQuickActionEnabled" },
+        },
+      ],
+    },
+    {
+      // React's own memoisation helpers are hooks and are forbidden here too.
+      code: `
+        const MyView = ({ items }) => (
+          <Box>{useMemo(() => items.length, [items])}</Box>
+        );
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [{ messageId: "noHooksInView", data: { hook: "useMemo" } }],
+    },
+    {
+      // Namespaced call form.
+      code: `
+        const MyView = ({ items }) => (
+          <Box>{React.useMemo(() => items.length, [items])}</Box>
+        );
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [{ messageId: "noHooksInView", data: { hook: "useMemo" } }],
+    },
+    {
+      // A hook inside a block-bodied View: both gates fire on their own axis,
+      // and this one reports independently of no-return-in-view.
+      code: `
+        const MyView = ({ label }) => {
+          const flag = useFeatureFlag();
+          return <Text>{flag ? label : null}</Text>;
+        };
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [
+        { messageId: "noHooksInView", data: { hook: "useFeatureFlag" } },
+      ],
+    },
+    {
+      // A hook inside a local render helper is still a hook in a View file.
+      code: `
+        function renderBody(props) {
+          return <Text>{useTheme().color}</Text>;
+        }
+
+        const MyView = props => <Box>{renderBody(props)}</Box>;
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [{ messageId: "noHooksInView", data: { hook: "useTheme" } }],
+    },
+    {
+      code: `
+        const CardView = () => <Box>{useTranslation().t("k")}</Box>;
+
+        export default memo(CardView);
+      `,
+      filename: "components/Card/CardView.jsx",
+      errors: [
+        { messageId: "noHooksInView", data: { hook: "useTranslation" } },
+      ],
+    },
+  ],
+});

package/eslint-plugin-component-structure/__tests__/no-return-in-view.test.js

@@ -0,0 +1,185 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+/**
+ * Unit tests for the no-return-in-view ESLint rule.
+ *
+ * The rule shipped for its whole life with a single `ArrowFunctionExpression`
+ * visitor, and nothing anywhere required a View to be an arrow function. So
+ * `const XView = (...) => { ... }` was blocked while the byte-equivalent
+ * `function XView(...) { ... }` was never visited at all — a silent, complete,
+ * permanent opt-out of the only statement gate on Views, with
+ * `require-memo-in-view` still passing because it checks the export.
+ *
+ * Every `declaration form` case below fails against that rule. They are the
+ * point of this file: a suite without them is the same green-but-inert control
+ * the rule itself was.
+ * @module eslint-plugin-component-structure/tests/no-return-in-view
+ */
+
+const { RuleTester } = require("eslint");
+
+const rule = require("../rules/no-return-in-view");
+
+const FEATURE_COMPONENTS = "features/example/components";
+const VIEW_FILE = `${FEATURE_COMPONENTS}/MyView.tsx`;
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+ruleTester.run("no-return-in-view", rule, {
+  valid: [
+    {
+      // The shape the rule exists to require.
+      code: `
+        const MyView = ({ label }) => <Text>{label}</Text>;
+
+        MyView.displayName = "MyView";
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+    },
+    {
+      // Parenthesised expression body is still an expression body.
+      code: `
+        const MyView = ({ label }) => (
+          <Box>
+            <Text>{label}</Text>
+          </Box>
+        );
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+    },
+    {
+      // A local render helper is NOT the View component. This is exactly the
+      // case a substring ban on the word "function" gets wrong, and the reason
+      // the rule is stated as "the View must be an expression-bodied arrow"
+      // rather than "no function declarations in View files".
+      code: `
+        function renderBody(props) {
+          return <Text>{props.label}</Text>;
+        }
+
+        const MyView = ({ label }) => <Box>{renderBody({ label })}</Box>;
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+    },
+    {
+      // Not a View file.
+      code: `
+        function MyContainer() {
+          return <MyView />;
+        }
+
+        export default MyContainer;
+      `,
+      filename: `${FEATURE_COMPONENTS}/MyContainer.tsx`,
+    },
+    {
+      // Outside the directories the Container/View pattern applies to.
+      code: `
+        function MyView() {
+          return <Box />;
+        }
+
+        export default MyView;
+      `,
+      filename: "lib/MyView.tsx",
+    },
+  ],
+  invalid: [
+    {
+      // The case the rule already caught: block-bodied arrow.
+      code: `
+        const MyView = ({ label }) => {
+          return <Text>{label}</Text>;
+        };
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [{ messageId: "noReturnInView" }],
+    },
+    {
+      // DECLARATION FORM. Fails against the pre-fix rule, which never visits
+      // a FunctionDeclaration and reports nothing at all.
+      code: `
+        function MyView({ label }) {
+          return <Text>{label}</Text>;
+        }
+
+        MyView.displayName = "MyView";
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [{ messageId: "mustBeArrowFunction" }],
+    },
+    {
+      // Declaration form, exported inline.
+      code: `
+        export default function MyView({ label }) {
+          return <Text>{label}</Text>;
+        }
+      `,
+      filename: VIEW_FILE,
+      errors: [{ messageId: "mustBeArrowFunction" }],
+    },
+    {
+      // Function-expression form assigned to a View-named binding.
+      code: `
+        const MyView = function ({ label }) {
+          return <Text>{label}</Text>;
+        };
+
+        export default memo(MyView);
+      `,
+      filename: VIEW_FILE,
+      errors: [{ messageId: "mustBeArrowFunction" }],
+    },
+    {
+      // The component the file exports, named without the word "View".
+      // Reached through the default export's memo() argument, so the rule does
+      // not depend on the identifier spelling.
+      code: `
+        function HomeScreen({ label }) {
+          return <Text>{label}</Text>;
+        }
+
+        HomeScreen.displayName = "HomeScreen";
+
+        export default memo(HomeScreen);
+      `,
+      filename: `features/home/screens/HomeScreenView.tsx`,
+      errors: [{ messageId: "mustBeArrowFunction" }],
+    },
+    {
+      // Declaration form in a plain components/ directory.
+      code: `
+        function CardView(props) {
+          return <Box>{props.label}</Box>;
+        }
+
+        export default memo(CardView);
+      `,
+      filename: "components/Card/CardView.jsx",
+      errors: [{ messageId: "mustBeArrowFunction" }],
+    },
+  ],
+});

package/eslint-plugin-component-structure/__tests__/plugin-index.test.js

@@ -55,6 +55,13 @@ describe("eslint-plugin-component-structure", () => {
       expect(plugin.rules["no-return-in-view"]).toHaveProperty("meta");
     });
 
+    it("should export no-hooks-in-view rule", () => {
+      expect(plugin.rules).toHaveProperty("no-hooks-in-view");
+      expect(typeof plugin.rules["no-hooks-in-view"]).toBe("object");
+      expect(plugin.rules["no-hooks-in-view"]).toHaveProperty("create");
+      expect(plugin.rules["no-hooks-in-view"]).toHaveProperty("meta");
+    });
+
     it("should export require-memo-in-view rule", () => {
       expect(plugin.rules).toHaveProperty("require-memo-in-view");
       expect(typeof plugin.rules["require-memo-in-view"]).toBe("object");
@@ -73,7 +80,7 @@ describe("eslint-plugin-component-structure", () => {
 
     it("should have correct number of rules", () => {
       const ruleCount = Object.keys(plugin.rules).length;
-      expect(ruleCount).toBe(4);
+      expect(ruleCount).toBe(5);
     });
   });
 

package/eslint-plugin-component-structure/index.js

@@ -11,12 +11,14 @@
  *
  * Rules:
  * - enforce-component-structure: Ensures components follow the Container/View pattern
- * - no-return-in-view: Disallows return statements in View components
+ * - no-return-in-view: Requires View components to be expression-bodied arrows
+ * - no-hooks-in-view: Disallows hook calls in View components
  * - require-memo-in-view: Enforces React.memo usage in View components
  * - single-component-per-file: Ensures only one React component per file
  * @module eslint-plugin-component-structure
  */
 const enforceComponentStructure = require("./rules/enforce-component-structure");
+const noHooksInView = require("./rules/no-hooks-in-view");
 const noReturnInView = require("./rules/no-return-in-view");
 const requireMemoInView = require("./rules/require-memo-in-view");
 const singleComponentPerFile = require("./rules/single-component-per-file");
@@ -28,6 +30,7 @@ const plugin = {
   },
   rules: {
     "enforce-component-structure": enforceComponentStructure,
+    "no-hooks-in-view": noHooksInView,
     "no-return-in-view": noReturnInView,
     "require-memo-in-view": requireMemoInView,
     "single-component-per-file": singleComponentPerFile,

package/eslint-plugin-component-structure/lib/view-file-scope.js

@@ -0,0 +1,62 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+/**
+ * Where the View half of the Container/View pattern is enforced.
+ *
+ * Two rules ask this question — `no-return-in-view` (no statements) and
+ * `no-hooks-in-view` (no hooks) — and they must agree. A second copy of the
+ * predicate is how a gate silently stops covering half the files it names, so
+ * the answer lives here once and both rules require it.
+ *
+ * This is scope, not exemption. `components/ui/**` and `components/custom/ui/**`
+ * hold vendored primitives that the pattern's own applicability table marks as
+ * outside it, and that set is inherited verbatim from `require-memo-in-view` and
+ * from the shipped config's `ignores` rather than invented here. There is no
+ * per-file, per-site, or opt-in-flag way to leave it: a violating View is fixed
+ * by migrating the View.
+ * @module eslint-plugin-component-structure/lib/view-file-scope
+ */
+
+/**
+ * A `components` directory anywhere in the path, as a whole path segment.
+ *
+ * Segment-anchored so `my-components/` is not mistaken for it, and
+ * `(^|/)`-anchored so a RuleTester's repo-relative filename and a real absolute
+ * one resolve identically. A bare `includes("/components/")` gets the relative
+ * form wrong, which is invisible in production and silently disables every test
+ * case written against a relative path.
+ */
+const COMPONENTS_SEGMENT = /(^|\/)components\//u;
+
+/** The vendored-primitive directories the Container/View pattern excludes. */
+const VENDORED_UI_SEGMENT = /(^|\/)components\/(custom\/)?ui\//u;
+
+/**
+ * Whether a rule should run against this file.
+ * @param {string} filename - The file ESLint is linting, in any path style.
+ * @returns {boolean} True when the file is a View inside the pattern's scope.
+ */
+function isEnforcedViewFile(filename) {
+  if (!filename.endsWith("View.tsx") && !filename.endsWith("View.jsx")) {
+    return false;
+  }
+
+  const normalizedPath = filename.replace(/\\/gu, "/");
+
+  const isFeatureComponent =
+    normalizedPath.includes("features/") &&
+    COMPONENTS_SEGMENT.test(normalizedPath);
+  const isFeatureScreen =
+    normalizedPath.includes("features/") &&
+    normalizedPath.includes("/screens/");
+  const isComponentsDir =
+    COMPONENTS_SEGMENT.test(normalizedPath) &&
+    !VENDORED_UI_SEGMENT.test(normalizedPath);
+
+  return isFeatureComponent || isFeatureScreen || isComponentsDir;
+}
+
+module.exports = { isEnforcedViewFile };