CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-types--react

TypeScript definitions for React, the popular JavaScript library for building user interfaces

80

1.48x
Overview
Eval results
Files

rubric.jsonevals/scenario-4/

{
  "context": "This criteria evaluates how well the engineer uses @types/react's event handling types and patterns to implement a canvas drawing tool. The focus is exclusively on proper usage of React's MouseEvent, KeyboardEvent, TouchEvent types and their associated handlers with correct typing.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "MouseEvent typing",
      "description": "Uses React.MouseEvent<HTMLCanvasElement> or React.MouseEventHandler<HTMLCanvasElement> for mouse event handlers (onMouseDown, onMouseMove, onMouseUp)",
      "max_score": 20
    },
    {
      "name": "Mouse position tracking",
      "description": "Correctly accesses mouse coordinates using clientX/clientY properties from MouseEvent and calculates position relative to canvas using getBoundingClientRect() on event.currentTarget",
      "max_score": 15
    },
    {
      "name": "KeyboardEvent typing",
      "description": "Uses React.KeyboardEvent or React.KeyboardEventHandler with proper element typing for keyboard event handlers (onKeyDown or onKeyUp)",
      "max_score": 15
    },
    {
      "name": "Modifier key detection",
      "description": "Uses KeyboardEvent properties (ctrlKey, metaKey, shiftKey) or getModifierState() method to detect modifier keys for keyboard shortcuts",
      "max_score": 15
    },
    {
      "name": "TouchEvent typing",
      "description": "Uses React.TouchEvent<HTMLCanvasElement> or React.TouchEventHandler<HTMLCanvasElement> for touch event handlers (onTouchStart, onTouchMove, onTouchEnd)",
      "max_score": 15
    },
    {
      "name": "Touch coordinate access",
      "description": "Correctly accesses touch coordinates from TouchEvent.touches or TouchEvent.changedTouches TouchList properties",
      "max_score": 10
    },
    {
      "name": "Event methods usage",
      "description": "Uses SyntheticEvent methods like preventDefault() to control default browser behavior for touch or other events",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-types--react

tile.json