Skip to content

Interactivity inference: AST analysis for hooks + event handlers #22

@qantrepreneur

Description

@qantrepreneur

What to build

Implement the static analysis module that determines whether a component (and its import tree) is interactive. This is the Marko-style auto-inference engine.

The analyzer receives a component's source code and its resolved import graph, then checks for signals of interactivity:

  • React hooks: useState, useEffect, useRef, useReducer, useCallback, useMemo, useSyncExternalStore, useTransition
  • Event handler props in JSX: onClick, onChange, onSubmit, onKeyDown, etc.
  • Browser APIs: window, document, addEventListener, navigator
  • Custom hooks (functions starting with use that call other hooks)

If a component OR any component in its import tree uses any of these, it's marked interactive.

Returns a boolean per component/slot.

Acceptance criteria

  • Detects React hook usage in a component
  • Detects event handler props in JSX
  • Detects browser API usage
  • Walks the import tree (transitive dependencies)
  • A static component importing only static children → not interactive
  • A static component importing one interactive child → interactive
  • Pure function: accepts source code + import graph, returns boolean
  • Unit tests for each detection category and transitive inference

Blocked by

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions