@codyswann/lisa 4.33.3 → 4.33.5

package/plugins/lisa-expo/skills/container-view-pattern/scripts/validate_component.py

@@ -10,11 +10,29 @@ This script validates that a component directory follows the Container/View patt
 - Has index.tsx with correct export
 - View uses memo() wrapper
 - View has displayName
-- View uses arrow function shorthand
+- View is an arrow function with an expression body (declaration form is a
+  violation, not an alternative spelling)
+- View calls no hooks — matched by SHAPE (`use` + uppercase), never by a list of
+  names, because the call that motivated this check was a project-local custom
+  hook that no list would have contained
+
+One check reports as an ADVISORY rather than an error: "Container renders JSX
+besides the View". It is a whole-file text scan that cannot tell a returned JSX
+tree from JSX inside a callback, so a Container holding a legitimate `renderItem`
+trips it — and moving a `renderItem` out of a View is one of the sanctioned fixes
+for the View hook ban. It prints and does not fail.
+
+This is a fast pre-check, not the gate. ESLint reads the AST of every file;
+this reads one directory with regexes. When they disagree, ESLint is right.
 
 Usage:
     python3 validate_component.py <path-to-component-directory>
 
+The script ships inside the Lisa plugin, not in a consumer's `.claude/skills/`,
+so invoke it through the plugin root:
+
+    python3 "${CLAUDE_PLUGIN_ROOT:-node_modules/@codyswann/lisa/plugins/lisa-expo}/skills/container-view-pattern/scripts/validate_component.py" <path>
+
 Example:
     python3 validate_component.py features/player-kanban/components/AddColumnButton
 """
@@ -25,21 +43,118 @@ import sys
 from pathlib import Path
 
 
-def validate_component(component_path: str) -> tuple[bool, list[str]]:
+HOOK_CALL = re.compile(r"\b(use[A-Z]\w*)\s*\(")
+"""Every hook call, by SHAPE.
+
+`use` followed by an uppercase letter is React's own definition of a hook name,
+so this matches `useState`, `useMemo`, and every project-local custom hook
+alike. It is a shape and never a list: a list is what let
+`useCreateNoteQuickActionEnabled()` through.
+
+It also matches hook calls inside comments and strings. That is the accepted
+cost of a regex pre-check; ESLint's `component-structure/no-hooks-in-view` reads
+the AST and is the gate.
+"""
+
+
+def _arrow_body_is_block(source: str, start: int) -> bool:
+    """
+    Whether the arrow beginning at `start` has a block body.
+
+    Walks to the first top-level `=>` instead of matching a parameter list with
+    `\\([^)]*\\)`, which fails on any nested paren — a destructured parameter with
+    a default, a type annotation carrying a function type, or a parenthesised
+    union.
+
+    Args:
+        source: The View file's text.
+        start: Index just past the `const <Name>View` binding.
+
+    Returns:
+        True when the arrow's body opens with `{`.
+    """
+    depth = 0
+    index = start
+    while index < len(source) - 1:
+        char = source[index]
+        if char in "([{":
+            depth += 1
+        elif char in ")]}":
+            depth -= 1
+        elif char == ";" and depth == 0:
+            return False
+        elif depth == 0 and source[index : index + 2] == "=>":
+            rest = source[index + 2 :].lstrip()
+            return rest.startswith("{")
+        index += 1
+    return False
+
+
+def view_form_errors(component_name: str, view_content: str) -> list[str]:
+    """
+    Errors about the FORM of the View component.
+
+    The requirement is an arrow function with an expression body. A function
+    declaration cannot have one, so declaration form is banned by construction
+    rather than by scanning for the word "function" — which would fire on JSDoc
+    prose, on local render helpers, and on disable-comment justifications, none
+    of which are the View component.
+
+    Args:
+        component_name: The component directory's name, without the View suffix.
+        view_content: The View file's text.
+
+    Returns:
+        Zero or one error message.
+    """
+    name = f"{component_name}View"
+    expected = f"const {name} = (props) => (...)"
+
+    if re.search(rf"\bfunction\s+{re.escape(name)}\b", view_content):
+        return [
+            f"View must be an arrow function with an expression body: {expected}. "
+            "A function declaration cannot have one, so it always carries a statement list."
+        ]
+
+    function_expression = re.search(
+        rf"\bconst\s+{re.escape(name)}\b[^=]*=\s*function\b", view_content
+    )
+    if function_expression:
+        return [
+            f"View must be an arrow function with an expression body: {expected}. "
+            "A function expression cannot have one."
+        ]
+
+    binding = re.search(rf"\bconst\s+{re.escape(name)}\b", view_content)
+    if binding and _arrow_body_is_block(view_content, binding.end()):
+        return [
+            "View should use arrow function shorthand: () => (...) instead of () => { return (...) }"
+        ]
+
+    return []
+
+
+def validate_component(component_path: str) -> tuple[bool, list[str], list[str]]:
     """
     Validate a component directory follows Container/View pattern.
 
+    Errors and advisories are separated because one check here cannot decide
+    what it reports on — see the Container JSX scan below. A check that cannot
+    tell a violation from a legitimate shape must say so rather than fail the
+    run; a confident wrong verdict is worse than a flagged uncertainty.
+
     Args:
         component_path: Path to the component directory
 
     Returns:
-        Tuple of (is_valid, list of error messages)
+        Tuple of (is_valid, list of error messages, list of advisory messages)
     """
     errors = []
+    advisories = []
     component_dir = Path(component_path)
 
     if not component_dir.is_dir():
-        return False, [f"Path is not a directory: {component_path}"]
+        return False, [f"Path is not a directory: {component_path}"], advisories
 
     component_name = component_dir.name
 
@@ -92,39 +207,24 @@ def validate_component(component_path: str) -> tuple[bool, list[str]]:
         if not re.search(display_name_pattern, view_content):
             errors.append(f"View should have displayName: {component_name}View.displayName = \"{component_name}View\"")
 
-        # Check for block body (return statement) in main component
-        # This is a simplified check - ESLint does the full validation
-        block_body_pattern = rf"const\s+{component_name}View\s*=\s*\([^)]*\)\s*=>\s*{{"
-        if re.search(block_body_pattern, view_content):
-            errors.append("View should use arrow function shorthand: () => (...) instead of () => { return (...) }")
-
-        # Check for hooks in View (they should be in Container)
-        hook_patterns = [
-            r"\buse[A-Z]\w+\s*\(",  # General hook pattern
-            r"\buseState\s*\(",
-            r"\buseEffect\s*\(",
-            r"\buseMemo\s*\(",
-            r"\buseCallback\s*\(",
-            r"\buseReducer\s*\(",
-            r"\buseContext\s*\(",
-        ]
-
-        for hook_pattern in hook_patterns:
-            # Exclude memo import check
-            if hook_pattern == r"\buse[A-Z]\w+\s*\(":
-                # More specific check to avoid false positives
-                if re.search(r"\buseState\s*\(", view_content):
-                    errors.append("View should not contain useState - move to Container")
-                    break
-                if re.search(r"\buseEffect\s*\(", view_content):
-                    errors.append("View should not contain useEffect - move to Container")
-                    break
-                if re.search(r"\buseMemo\s*\(", view_content):
-                    errors.append("View should not contain useMemo - move to Container")
-                    break
-                if re.search(r"\buseCallback\s*\(", view_content):
-                    errors.append("View should not contain useCallback - move to Container")
-                    break
+        # Check the View component's form.
+        #
+        # The old check was `const {name}View = ([^)]*) => {` — arrow-only, and
+        # therefore blind to `function {name}View(...) {`, independently
+        # reproducing the exact defect the ESLint rule carried. It also broke on
+        # any parameter list containing a nested paren.
+        errors.extend(view_form_errors(component_name, view_content))
+
+        # Check for hooks in View (they should be in Container).
+        #
+        # One generic shape match, deliberately. The previous version listed
+        # `\buse[A-Z]\w+\s*\(` first and then narrowed to four hardcoded names
+        # and `break`ed, so the general pattern was UNREACHABLE — dead code that
+        # read as coverage. A project-local hook such as
+        # `useCreateNoteQuickActionEnabled()` matched the pattern that was never
+        # evaluated and none of the four that were.
+        for hook in sorted(set(HOOK_CALL.findall(view_content))):
+            errors.append(f"View should not contain {hook} - move to Container")
 
     # Validate Container file
     if container_file.exists():
@@ -140,14 +240,31 @@ def validate_component(component_path: str) -> tuple[bool, list[str]]:
         if not re.search(return_view_pattern, container_content):
             errors.append(f"Container should return <{component_name}View />")
 
-        # Check that Container ONLY renders View (no other JSX elements)
-        # Find all JSX tags in Container (excluding the View)
+        # ADVISORY, not an error — and deliberately so.
+        #
+        # "Container should ONLY render View" is a naive `<([A-Z]\w*)` scan over
+        # the ENTIRE container file. It cannot tell a component's returned JSX
+        # tree from JSX inside a callback, so a Container holding a perfectly
+        # legitimate `renderItem` — `useCallback(({item}) => <Row … />, […])` —
+        # trips it.
+        #
+        # That matters now that Views may not call hooks: moving a renderItem
+        # callback to the Container is one of the two sanctioned fixes, and
+        # Containers ARE allowed to hold logic, including a callback that
+        # returns JSX. Left as an error, this check would reject the very
+        # migration the View rules ask for.
+        #
+        # So it reports and does not fail. Scoping it to the returned tree needs
+        # a parser, which a regex pre-check is not; until then, saying plainly
+        # what it cannot distinguish beats a confident wrong verdict.
         all_jsx_pattern = r"<([A-Z][a-zA-Z0-9]*)"
         jsx_matches = re.findall(all_jsx_pattern, container_content)
         other_components = [m for m in jsx_matches if m != f"{component_name}View"]
         if other_components:
-            errors.append(
-                f"Container should ONLY render {component_name}View, but found: {', '.join(set(other_components))}"
+            advisories.append(
+                f"Container renders JSX besides {component_name}View: {', '.join(sorted(set(other_components)))}. "
+                "This is a whole-file text scan and cannot tell a returned JSX tree from JSX inside a callback, "
+                "so a legitimate renderItem callback lands here too. Review it; this does not fail validation."
             )
 
     # Check for extra files
@@ -178,7 +295,7 @@ def validate_component(component_path: str) -> tuple[bool, list[str]]:
             if not is_allowed and item.is_file():
                 errors.append(f"Unexpected file in component directory: {item.name}")
 
-    return len(errors) == 0, errors
+    return len(errors) == 0, errors, advisories
 
 
 def main():
@@ -193,7 +310,13 @@ def main():
     print(f"Validating component: {component_path}")
     print("-" * 50)
 
-    is_valid, errors = validate_component(component_path)
+    is_valid, errors, advisories = validate_component(component_path)
+
+    if advisories:
+        print("Advisories (reviewed by a human, not a failure):")
+        for advisory in advisories:
+            print(f"  ~ {advisory}")
+        print("-" * 50)
 
     if is_valid:
         print("Component follows Container/View pattern")

package/plugins/lisa-expo-agy/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "lisa-expo",
-  "version": "4.33.3",
+  "version": "4.33.5",
   "description": "Expo/React Native-specific skills, agents, rules, and MCP servers",
   "author": {
     "name": "Cody Swann"

package/plugins/lisa-expo-agy/skills/container-view-pattern/SKILL.md

@@ -43,9 +43,16 @@ The Container/View pattern is **required** in these directories:
 Run the skill's generator script for any component type:
 
 ```bash
-python3 .claude/skills/container-view-pattern/scripts/create_component.py <type> <name> [feature]
+python3 "${CLAUDE_PLUGIN_ROOT:-node_modules/@codyswann/lisa/plugins/lisa-expo}/skills/container-view-pattern/scripts/create_component.py" <type> <name> [feature]
 ```
 
+The `:-` default is load-bearing. This skill ships inside the Lisa plugin, not in
+the consumer's `.claude/skills/`, and `CLAUDE_PLUGIN_ROOT` is not exported into
+an agent's Bash environment — so a bare `.claude/skills/…` path names a file that
+does not exist in a consumer, and a bare `"${CLAUDE_PLUGIN_ROOT}/…"` expands to
+an absolute `/skills/…` and exits 1. The default resolves from the consumer
+repository root, which is where the script is actually invoked.
+
 **Component Types:**
 
 | Type              | Command                                                          | Creates in                                      |
@@ -71,7 +78,7 @@ ComponentName/
 
 Container components handle all business logic:
 
-1. **Single View render**: Container must ONLY render its corresponding View component - no other UI elements or components
+1. **Single View render**: A Container's **returned tree** is only its corresponding View component — no other UI elements beside it. This constrains what the Container renders, not what it holds: a Container may define a callback that returns JSX (a `renderItem` passed down as a prop is the common case), and that is where such a callback belongs once a View may no longer call hooks.
 2. **State management**: Use `useState`, `useReducer`
 3. **Data fetching**: Use GraphQL hooks, API calls
 4. **Memoization**: Wrap all computed values in `useMemo`
@@ -146,15 +153,33 @@ export default ComponentNameContainer;
 
 ## View Component Requirements
 
-View components are pure presentation:
-
-1. **Arrow function shorthand**: Use `() => (...)` not `() => { return (...); }`
-2. **No return statements**: The component body must be a single JSX expression
+View components carry **no statements and no hooks**. That is the guarantee, and
+it is deliberately narrower than "pure": `{Date.now()}` and
+`{Math.random() > 0.5 ? … : …}` sit happily inside an expression body and no
+rule below rejects them. Claiming purity here would repeat the defect this
+section was rewritten to fix — see [Validation](#validation).
+
+1. **Expression-bodied arrow function**: The View component must be
+   `const XView = (props) => (...)`. Not `() => { return (...); }`, and not
+   `function XView(props) { ... }` — a function declaration cannot have an
+   expression body, so declaration form always carries a statement list. This is
+   the requirement; the other two shapes are the two ways of failing it.
+2. **No statements**: The component body is a single JSX expression.
 3. **memo wrapper**: Export with `memo()` for performance optimization
 4. **displayName**: Set `ComponentName.displayName = "ComponentName"`
 5. **Readonly props**: All props should be marked as `readonly`
-6. **No hooks**: View should not contain `useState`, `useEffect`, `useMemo`, etc.
-7. **No logic**: All conditional rendering should use ternary expressions in JSX
+6. **No hooks anywhere in the file**: No call of the shape `use` + an uppercase
+   letter — `useState`, `useEffect`, `useMemo`, `useCallback`, and every
+   project-local custom hook alike. The ban is on the shape, not on a list of
+   names: the call that motivated this gate was a project-local hook that no
+   name list would have contained. `useMemo` and `useCallback` are caught for
+   the same reason — a data hook and a render helper are indistinguishable by
+   name, and this document already forbade `useMemo` in a View. There is no
+   exemption list, no per-site waiver, and no opt-out flag; a View that calls a
+   hook is fixed by moving the hook into the Container.
+7. **No logic**: All conditional rendering should use ternary expressions in JSX.
+   Unlike 1, 2 and 6, this one is **not lint-enforced** — see the second table
+   under [Validation](#validation).
 
 ### View Template
 
@@ -207,23 +232,47 @@ export { default } from "./ComponentNameContainer";
 
 ### ESLint Rules
 
-The following ESLint rules enforce the pattern:
+Each row names the numbered requirement it enforces. Every requirement above
+appears in exactly one of the two tables, so a requirement with no rule is
+visible as such rather than implied to be covered.
+
+For most of this skill's life the table below listed four rules under the
+heading "the following ESLint rules enforce the pattern" — and none of them
+enforced requirement 6 or 7. That false assurance is why nobody checked, and why
+a declaration-form View with a hook in it passed lint for years.
+
+| Rule                                              | Enforces  | Description                                                       |
+| ------------------------------------------------- | --------- | ----------------------------------------------------------------- |
+| `component-structure/enforce-component-structure` | structure | Validates directory structure and file naming                     |
+| `component-structure/no-return-in-view`           | 1, 2      | View must be an arrow function with an expression body            |
+| `component-structure/no-hooks-in-view`            | 6         | No `use[A-Z]…()` call anywhere in a View file, by shape not name  |
+| `no-restricted-imports` (View files)              | 6         | No React hook named-import, and no `**/hooks/**` import           |
+| `component-structure/require-memo-in-view`        | 3, 4      | Ensures View uses memo and displayName                            |
+| `component-structure/single-component-per-file`   | structure | One component per file                                            |
 
-| Rule                                              | Description                                   |
-| ------------------------------------------------- | --------------------------------------------- |
-| `component-structure/enforce-component-structure` | Validates directory structure and file naming |
-| `component-structure/no-return-in-view`           | Ensures View uses arrow shorthand             |
-| `component-structure/require-memo-in-view`        | Ensures View uses memo and displayName        |
-| `component-structure/single-component-per-file`   | One component per file                        |
+`no-hooks-in-view` and `no-restricted-imports` are two independent axes, not one
+duplicated: a hook re-exported through a barrel escapes the import patterns, and
+an import with no call site yet escapes the call matcher.
+
+### What lint does NOT enforce
+
+| Requirement                       | Why not                                                                                                 |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| 5 — readonly props                | A convention on the props interface; carried by review and the templates above.                          |
+| 7 — no logic beyond ternaries     | "Logic" has no AST shape. `{Date.now()}` and `{Math.random() > 0.5 ? … : …}` are legal expression bodies. |
 
 ### Manual Validation
 
 Run the validation script to check a component:
 
 ```bash
-python3 .claude/skills/container-view-pattern/scripts/validate_component.py <path-to-component-directory>
+python3 "${CLAUDE_PLUGIN_ROOT:-node_modules/@codyswann/lisa/plugins/lisa-expo}/skills/container-view-pattern/scripts/validate_component.py" <path-to-component-directory>
 ```
 
+The script is a fast pre-check, not the gate: it reads one component directory
+with regexes, while ESLint reads the AST of every file. When they disagree,
+ESLint is right.
+
 Run ESLint to check all components:
 
 ```bash
@@ -238,7 +287,7 @@ bun run lint
 
 | Issue                                | Resolution                                                  |
 | ------------------------------------ | ----------------------------------------------------------- |
-| Rendering UI elements besides View   | Container must ONLY return the corresponding View component |
+| Returning UI elements besides View   | Container's returned tree is ONLY the corresponding View     |
 | Rendering multiple components        | Move all UI to View; Container returns only View            |
 | Missing `useMemo` for objects/arrays | Wrap computed values in `useMemo`                           |
 | Missing `useCallback` for functions  | Wrap handlers in `useCallback`                              |
@@ -247,13 +296,14 @@ bun run lint
 
 ### View Violations
 
-| Issue                         | Resolution                                        |
-| ----------------------------- | ------------------------------------------------- |
-| Using block body `{ return }` | Convert to arrow shorthand `() => (...)`          |
-| Missing `memo` wrapper        | Add `export default memo(ComponentView)`          |
-| Missing `displayName`         | Add `ComponentView.displayName = "ComponentView"` |
-| Contains hooks                | Move hooks to Container                           |
-| Contains state                | Move state to Container                           |
+| Issue                                | Resolution                                        |
+| ------------------------------------ | ------------------------------------------------- |
+| Using block body `{ return }`        | Convert to arrow shorthand `() => (...)`          |
+| Declared as `function XView() {…}`   | Convert to `const XView = (props) => (...)`       |
+| Missing `memo` wrapper               | Add `export default memo(ComponentView)`          |
+| Missing `displayName`                | Add `ComponentView.displayName = "ComponentView"` |
+| Contains hooks (including custom)    | Move hooks to Container                           |
+| Contains state                       | Move state to Container                           |
 
 ## Extracting Helper Functions
 
@@ -275,6 +325,12 @@ const ComponentView = ({ isLoading, isDark }: Props) => (
 );
 ```
 
+A local render helper may be a function declaration. Requirement 1 is about the
+**View component**, not about the word `function` appearing in the file — which
+is why it is stated as "expression-bodied arrow" rather than as a ban on
+declarations. The helper is still inside a View file, so requirement 6 applies to
+it: it may not call a hook either.
+
 ## Event Handler Naming Convention
 
 - **Container**: Use `handle*` prefix (e.g., `handleSubmit`, `handleClick`)