makepad-2.0-splash

What it does

Guides an AI agent to work with Makepad 2.0 Splash scripts using the script_mod! macro and runtime tooling. It covers the core concepts, syntax rules, state management, event handling, functions, control flow, HTTP requests, HTML parsing, and streaming evaluation. It also explains hot reload and ScriptModKey tracking, ScriptSource variants, and critical layout rules for UI containers. It provides guidance on Canvas rendering via the Claude Code workflow, including HTTP/WS usage, and outlines the two creation paths: Compiled path (script_mod!) and Eval path (POST /splash, Splash.set_text). It highlights pitfalls specific to Splash eval and how to address them, such as lazy initialization and fallback initializations when certain hooks or type-default inheritance behaviors differ between paths.

The skill enumerates examples and patterns for building Splash UI, including properties with dot-path inline syntax for Canvas rendering, how to structure named children, how to specify state and event handlers, and how to perform streaming evaluation token-by-token.

How it works

The skill instructs the agent to:

• Use the script_mod! macro structure with a Rust import and an app_main!(App);
• Define state via mod.state and render reactions via on_render callbacks.
• Implement event handling inline in Splash and from Rust via script_eval! to mutate state and trigger re-render.
• Write functions and control flow (if/else, for loops, while) in Splash syntax as demonstrated.
• Perform HTTP requests with net.HttpRequest, net.HttpMethod, and net.http_request, handling on_response and on_error, plus streaming with is_streaming and on_stream callbacks.
• Parse and query HTML with the provided methods, and handle streaming evaluation using vm.eval_with_append_source for real-time UI updates.
• Enable hot reload with the --hot flag and track ScriptModKey for script_mod! blocks, applying overrides via ScriptCode::script_mod_overrides and maintaining source maps for error reporting.
• Distinguish between Compiled path and Eval path, noting differences in widget creation, on_after_apply behavior, type-default inheritance, and template registration, and apply fixes like lazy initialization in draw_walk when needed.
• Use the Canvas HTTP API for sending Splash to the renderer, including both full and streaming render modes, and manage WS-based event listening for click events.
• Follow the Canvas Syntax rules for properties, radius, padding, alignment, and the specific patterns that differ from script_mod! usage.
• Be aware of Eval Pitfalls, particularly ScrollYView, on_after_apply callbacks, type-default inheritance in eval, and named-child copies, and implement the recommended workarounds.

When to use it

Use when implementing or maintaining Splash scripts that rely on hot-reload capable, streaming-evaluable runtime, and when integrating with the Makepad Canvas for visual output via Claude Code. Activate when working with canvas-based dashboards, UI widgets, and real-time updates through streaming code generation.

What it can touch

• ScriptModKey, ScriptCode, and script_mod! blocks for hot reload tracking
• VM for streaming evaluation and token-by-token UI updates
• HTTP/WS endpoints for Canvas rendering and event streaming
• Splash code blocks, including dot-path inline properties and padding/alignment types for Canvas rendering

Caveats

• Hot reload workflow relies on file watcher and correct ScriptModKey tracking; placeholder counts may require full rebuild when changed
• Eval path (POST /splash) differs from compiled path in widget creation and template/inheritance behavior; certain hooks like on_after_apply may not trigger in eval-created widgets
• Type-default properties and named children may not fully inherit in eval path; workarounds include lazy initialization in draw_walk and querying type defaults via vm.bx.heap.type_default_for_object()
• Some components and patterns are Canvas-specific (Canvas syntax) and require explicit patterns for padding, border radius, and alignment