makepad-2.0-dsl

Name: makepad-2.0-dsl
Author: ZhangHanDong

743stars87forks

How to install makepad-2.0-dsl?

zhanghandong/makepad-skills/makepad-2.0-dsl

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-dsl

Installs into the current project.

Summary

CRITICAL: Use for Makepad 2.0 DSL syntax and property system. Triggers on: makepad dsl, script_mod!, makepad syntax, makepad property, makepad 2.0 syntax, colon syntax, merge operator, named instance, let binding, mod.widgets, register_widget, script_component, type_default, widg

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 DSL Syntax Skill
2
3	## Overview
4
5	Makepad 2.0 replaced the compile-time `live_design!` macro with the runtime `script_mod!` macro, powered by the Splash scripting language. This skill covers the complete DSL syntax, property system, registration patterns, and common pitfalls.
6
7	## Key Syntax Rules
8
9	### Property Assignment: Colon, NOT Equals
10
11	```
12	key: value // CORRECT - colon syntax
13	key = value // WRONG - old 1.x syntax, no longer works
14	```
15
16	Properties are whitespace/newline separated. No commas between siblings.
17
18	```
19	View{
20	width: Fill
21	height: Fit
22	flow: Down
23	spacing: 10
24	padding: 15
25	}
26	```
27
28	### Named Instances: `:=` Operator
29
30	Use `:=` to create addressable, named widget instances:
31
32	```
33	my_button := Button{ text: "Click me" }
34	title := Label{ text: "Hello" }
35	```
36
37	Named instances are:
38	- Addressable from Rust code via `id!(my_button)` or `ids!(my_button)`
39	- Overridable via dot-path syntax: `MyTemplate{ title.text: "New text" }`
40	- Stored in the script object's `vec` (not `map`)
41
42	Regular properties use `:` and go into `map`:
43	```
44	width: Fill // regular property -> map
45	label := Label{} // named child -> vec
46	```
47
48	### Merge Operator: `+:`
49
50	The `+:` operator extends/merges with the parent instead of replacing:
51
52	```
53	draw_bg +: {
54	color: #f00 // Only overrides color, keeps all other draw_bg properties
55	}
56	```
57
58	Without `+:`, you REPLACE the entire property:
59	```
60	draw_bg: { color: #f00 } // REPLACES all of draw_bg - loses hover, border, etc.
61	draw_bg +: { color: #f00 } // MERGES - only changes color, keeps everything else
62	```
63
64	### Dot-Path Shorthand
65
66	Dot-path is syntactic sugar for merge:
67
68	```
69	draw_bg.color: #f00
70	// is equivalent to:
71	draw_bg +: { color: #f00 }
72
73	draw_text.text_style.font_size: 14
74	// is equivalent to:
75	draw_text +: { text_style +: { font_size: 14 } }
76	```
77
78	### Let Bindings: Local Templates
79
80	`let` creates local, reusable templates within a `script_mod!` block:
81
82	```
83	let MyCard = RoundedView{
84	width: Fill height: Fit
85	padding: 16 flow: Down spacing: 8
86	draw_bg.color: #2a2a3d
87	draw_bg.border_radius: 8.0
88	title := Label{ text: "Default Title" draw_text.color: #fff }
89	body := Label{ text: "" draw_text.color: #aaa }
90	}
91
92	// Instantiate and override:
93	MyCard{ title.text: "Card 1" body.text: "Content here" }
94	MyCard{ title.text: "Card 2" body.text: "More content" }
95	```
96
97	IMPORTANT: `let` bindings are LOCAL to the `script_mod!` block. They cannot be accessed from other `script_mod!` blocks. To share across modules, store in `mod.widgets.*`.
98
99	### Spread Operator: `..`
100
101	Inherit all properties from another definition:
102
103	```
104	set_type_default() do #(DrawMyShader::script_shader(vm)){
105	..mod.draw.DrawQuad // Inherit from DrawQuad
106	}
107	```
108
109	## Script Module Structure
110
111	### Basic App Structure
112
113	```rust
114	use makepad_widgets::*;
115
116	app_main!(App);
117
118	script_mod!{
119	use mod.prelude.widgets.*
120
121	load_all_resources() do #(App::script_component(vm)){
122	ui: Root{
123	main_window := Window{
124	window.inner_size: vec2(800, 600)
125	body +: {
126	// UI content here
127	my_button := Button{ text: "Click" }
128	}
129	}
130	}
131	}
132	}
133
134	impl App {
135	fn run(vm: &mut ScriptVm) -> Self {
136	crate::makepad_widgets::script_mod(vm); // 1. Register base widgets
137	App::from_script_mod(vm, self::script_mod)
138	}
139	}
140
141	#[derive(Script, ScriptHook)]
142	pub struct App {
143	#[source] source: ScriptObjectRef, // REQUIRED for Script-derived structs
144	#[live] ui: WidgetRef,
145	}
146
147	impl MatchEvent for App {
148	fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
149	if self.ui.button(ids!(my_button)).clicked(actions) {
150	log!("Button clicked!");
151	}
152	}
153	}
154
155	impl AppMain for App {
156	fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
157	self.match_event(cx, event);
158	self.ui.handle_event(cx, event, &mut Scope::empty());
159	}
160	}
161	```
162
163	### Widget Definition Module
164
165	```rust
166	script_mod!{
167	use mod.prelude.widgets_internal.* // For widget library internals
168	use mod.widgets.* // Access other registered widgets
169
170	// Step 1: Register the Rust struct as a widget base
171	mod.widgets.MyWidgetBase = #(MyWidget::register_widget(vm))
172
173	// Step 2: Create a styled variant with default properties
174	mod.widgets.MyWidget = set_type_default() do mod.widgets.MyWidgetBase{
175	width: Fill
176	height: Fit
177	padding: theme.space_2
178
179	draw_bg +: {
180	color: theme.color_bg_app
181	}
182	}
183	}
184	```
185
186	## Registration Patterns
187
188	### Widget Registration
189
190	For struc

People who liked this also viewed

6 picks

Type

makepad-2.0-dsl

743stars87forks

View on GitHub

How to install makepad-2.0-dsl?

zhanghandong/makepad-skills/makepad-2.0-dsl

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-dsl

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 DSL Syntax Skill
2
3	## Overview
4
5	Makepad 2.0 replaced the compile-time `live_design!` macro with the runtime `script_mod!` macro, powered by the Splash scripting language. This skill covers the complete DSL syntax, property system, registration patterns, and common pitfalls.
6
7	## Key Syntax Rules
8
9	### Property Assignment: Colon, NOT Equals
10
11	```
12	key: value // CORRECT - colon syntax
13	key = value // WRONG - old 1.x syntax, no longer works
14	```
15
16	Properties are whitespace/newline separated. No commas between siblings.
17
18	```
19	View{
20	width: Fill
21	height: Fit
22	flow: Down
23	spacing: 10
24	padding: 15
25	}
26	```
27
28	### Named Instances: `:=` Operator
29
30	Use `:=` to create addressable, named widget instances:
31
32	```
33	my_button := Button{ text: "Click me" }
34	title := Label{ text: "Hello" }
35	```
36
37	Named instances are:
38	- Addressable from Rust code via `id!(my_button)` or `ids!(my_button)`
39	- Overridable via dot-path syntax: `MyTemplate{ title.text: "New text" }`
40	- Stored in the script object's `vec` (not `map`)
41
42	Regular properties use `:` and go into `map`:
43	```
44	width: Fill // regular property -> map
45	label := Label{} // named child -> vec
46	```
47
48	### Merge Operator: `+:`
49
50	The `+:` operator extends/merges with the parent instead of replacing:
51
52	```
53	draw_bg +: {
54	color: #f00 // Only overrides color, keeps all other draw_bg properties
55	}
56	```
57
58	Without `+:`, you REPLACE the entire property:
59	```
60	draw_bg: { color: #f00 } // REPLACES all of draw_bg - loses hover, border, etc.
61	draw_bg +: { color: #f00 } // MERGES - only changes color, keeps everything else
62	```
63
64	### Dot-Path Shorthand
65
66	Dot-path is syntactic sugar for merge:
67
68	```
69	draw_bg.color: #f00
70	// is equivalent to:
71	draw_bg +: { color: #f00 }
72
73	draw_text.text_style.font_size: 14
74	// is equivalent to:
75	draw_text +: { text_style +: { font_size: 14 } }
76	```
77
78	### Let Bindings: Local Templates
79
80	`let` creates local, reusable templates within a `script_mod!` block:
81
82	```
83	let MyCard = RoundedView{
84	width: Fill height: Fit
85	padding: 16 flow: Down spacing: 8
86	draw_bg.color: #2a2a3d
87	draw_bg.border_radius: 8.0
88	title := Label{ text: "Default Title" draw_text.color: #fff }
89	body := Label{ text: "" draw_text.color: #aaa }
90	}
91
92	// Instantiate and override:
93	MyCard{ title.text: "Card 1" body.text: "Content here" }
94	MyCard{ title.text: "Card 2" body.text: "More content" }
95	```
96
97	IMPORTANT: `let` bindings are LOCAL to the `script_mod!` block. They cannot be accessed from other `script_mod!` blocks. To share across modules, store in `mod.widgets.*`.
98
99	### Spread Operator: `..`
100
101	Inherit all properties from another definition:
102
103	```
104	set_type_default() do #(DrawMyShader::script_shader(vm)){
105	..mod.draw.DrawQuad // Inherit from DrawQuad
106	}
107	```
108
109	## Script Module Structure
110
111	### Basic App Structure
112
113	```rust
114	use makepad_widgets::*;
115
116	app_main!(App);
117
118	script_mod!{
119	use mod.prelude.widgets.*
120
121	load_all_resources() do #(App::script_component(vm)){
122	ui: Root{
123	main_window := Window{
124	window.inner_size: vec2(800, 600)
125	body +: {
126	// UI content here
127	my_button := Button{ text: "Click" }
128	}
129	}
130	}
131	}
132	}
133
134	impl App {
135	fn run(vm: &mut ScriptVm) -> Self {
136	crate::makepad_widgets::script_mod(vm); // 1. Register base widgets
137	App::from_script_mod(vm, self::script_mod)
138	}
139	}
140
141	#[derive(Script, ScriptHook)]
142	pub struct App {
143	#[source] source: ScriptObjectRef, // REQUIRED for Script-derived structs
144	#[live] ui: WidgetRef,
145	}
146
147	impl MatchEvent for App {
148	fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
149	if self.ui.button(ids!(my_button)).clicked(actions) {
150	log!("Button clicked!");
151	}
152	}
153	}
154
155	impl AppMain for App {
156	fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
157	self.match_event(cx, event);
158	self.ui.handle_event(cx, event, &mut Scope::empty());
159	}
160	}
161	```
162
163	### Widget Definition Module
164
165	```rust
166	script_mod!{
167	use mod.prelude.widgets_internal.* // For widget library internals
168	use mod.widgets.* // Access other registered widgets
169
170	// Step 1: Register the Rust struct as a widget base
171	mod.widgets.MyWidgetBase = #(MyWidget::register_widget(vm))
172
173	// Step 2: Create a styled variant with default properties
174	mod.widgets.MyWidget = set_type_default() do mod.widgets.MyWidgetBase{
175	width: Fill
176	height: Fit
177	padding: theme.space_2
178
179	draw_bg +: {
180	color: theme.color_bg_app
181	}
182	}
183	}
184	```
185
186	## Registration Patterns
187
188	### Widget Registration
189
190	For struc

People who liked this also viewed

6 picks

Type