Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom event support #1991

Closed
wants to merge 17 commits into from
Closed

Add custom event support #1991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8a7fc5b
Add event listener syntax to support custom event
Aug 7, 2021
653bade
Add custom_event macro and fix CustomEventHandler
Aug 8, 2021
bca1681
Update Custom Events website docs
Aug 8, 2021
bf9c20f
Fix html-element-pass test
Aug 8, 2021
ef1fb86
Add note about JsCast for custom element macro
Aug 8, 2021
60d7e8b
Ignore unsupported doc test
Aug 8, 2021
8834330
Fix spelling in docs
Aug 8, 2021
b388ef5
Update website doc example
Aug 8, 2021
477a00f
Update element-fail test error output
Aug 11, 2021
9afdde4
WIP
Aug 15, 2021
8134d2b
Refactor listeners to use StaticEvent trait
Aug 17, 2021
6072a6c
Fix trybuild tests
Aug 17, 2021
c823d10
Fix doc tests
Aug 17, 2021
fb4acb0
Update website documentation
Aug 17, 2021
5bcb652
Add Trybuild tests for custom_event macro
Aug 17, 2021
2560356
Remove Deref of wrapped type in custom_event macro
Aug 17, 2021
7dc56d9
Fix __macro_new to use IntoEventCallback
Aug 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/boids/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ impl Model {
<div class="panel">
{ self.view_settings(link) }
<div class="panel__buttons">
<button onclick={link.callback(|_| Msg::TogglePause)}>{ pause_text }</button>
<button onclick={link.callback(|_| Msg::ResetSettings)}>{ "Use Defaults" }</button>
<button onclick={link.callback(|_| Msg::RestartSimulation)}>{ "Restart" }</button>
<button on:click={link.callback(|_| Msg::TogglePause)}>{ pause_text }</button>
<button on:click={link.callback(|_| Msg::ResetSettings)}>{ "Use Defaults" }</button>
<button on:click={link.callback(|_| Msg::RestartSimulation)}>{ "Restart" }</button>
</div>
</div>
}
Expand Down
4 changes: 2 additions & 2 deletions examples/boids/src/slider.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ impl Component for Slider {
10f64.powi(-(p as i32))
});

let oninput = onchange.reform(|e: InputEvent| {
let input = onchange.reform(|e: InputEvent| {
let input: HtmlInputElement = e.target_unchecked_into();
input.value_as_number()
});
Expand All @@ -82,7 +82,7 @@ impl Component for Slider {
{id}
class="slider__input"
min={min.to_string()} max={max.to_string()} step={step.to_string()}
{oninput}
on:{input}
/>
<span class="slider__value">{ display_value }</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions examples/counter/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,17 @@ impl Component for Model {
<div>
<div class="panel">
// A button to send the Increment message
<button class="button" onclick={ctx.link().callback(|_| Msg::Increment)}>
<button class="button" on:click={ctx.link().callback(|_| Msg::Increment)}>
{ "+1" }
</button>

// A button to send the Decrement message
<button onclick={ctx.link().callback(|_| Msg::Decrement)}>
<button on:click={ctx.link().callback(|_| Msg::Decrement)}>
{ "-1" }
</button>

// A button to send two Increment messages
<button onclick={ctx.link().batch_callback(|_| vec![Msg::Increment, Msg::Increment])}>
<button on:click={ctx.link().batch_callback(|_| vec![Msg::Increment, Msg::Increment])}>
{ "+1, +1" }
</button>

Expand Down
10 changes: 5 additions & 5 deletions examples/crm/src/add_client.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,27 +78,27 @@ impl Component for AddClientForm {
<input
class={classes!("new-client", "firstname")}
placeholder="First name"
onchange={update_name(Msg::UpdateFirstName)}
on:change={update_name(Msg::UpdateFirstName)}
/>
<input
class={classes!("new-client", "lastname")}
placeholder="Last name"
onchange={update_name(Msg::UpdateLastName)}
on:change={update_name(Msg::UpdateLastName)}
/>
<textarea
class={classes!("new-client", "description")}
placeholder="Description"
onchange={update_desc}
on:change={update_desc}
/>
</div>

<button
disabled={client.first_name.is_empty() || client.last_name.is_empty()}
onclick={link.callback(|_| Msg::Add)}
on:click={link.callback(|_| Msg::Add)}
>
{ "Add New" }
</button>
<button onclick={link.callback(|_| Msg::Abort)}>
<button on:click={link.callback(|_| Msg::Abort)}>
{ "Go Back" }
</button>
</>
Expand Down
8 changes: 4 additions & 4 deletions examples/crm/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ impl Component for Model {
<div class="clients">
{ for self.clients.iter().map(Client::render) }
</div>
<button onclick={ctx.link().callback(|_| Msg::SwitchTo(Scene::NewClientForm))}>{ "Add New" }</button>
<button onclick={ctx.link().callback(|_| Msg::SwitchTo(Scene::Settings))}>{ "Settings" }</button>
<button on:click={ctx.link().callback(|_| Msg::SwitchTo(Scene::NewClientForm))}>{ "Add New" }</button>
<button on:click={ctx.link().callback(|_| Msg::SwitchTo(Scene::Settings))}>{ "Settings" }</button>
</div>
},
Scene::NewClientForm => html! {
Expand All @@ -104,8 +104,8 @@ impl Component for Model {
Scene::Settings => html! {
<div>
<h1>{"Settings"}</h1>
<button onclick={ctx.link().callback(|_| Msg::ClearClients)}>{ "Remove all clients" }</button>
<button onclick={ctx.link().callback(|_| Msg::SwitchTo(Scene::ClientsList))}>{ "Go Back" }</button>
<button on:click={ctx.link().callback(|_| Msg::ClearClients)}>{ "Remove all clients" }</button>
<button on:click={ctx.link().callback(|_| Msg::SwitchTo(Scene::ClientsList))}>{ "Go Back" }</button>
</div>
},
}
Expand Down
2 changes: 1 addition & 1 deletion examples/dyn_create_destroy_apps/src/counter.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ impl Component for CounterModel {
</p>

// Add button to send a destroy command to the parent app
<button class="destroy" onclick={Callback::from(move |_| destroy_callback.emit(()))}>
<button class="destroy" on:click={Callback::from(move |_| destroy_callback.emit(()))}>
{ "Destroy this app" }
</button>
</>
Expand Down
2 changes: 1 addition & 1 deletion examples/dyn_create_destroy_apps/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ impl Component for Model {
// Create button to create a new app
<button
class="create"
onclick={ctx.link().callback(|_| Msg::SpawnCounterAppInstance)}
on:click={ctx.link().callback(|_| Msg::SpawnCounterAppInstance)}
>
{ "Spawn new CounterModel app" }
</button>
Expand Down
4 changes: 2 additions & 2 deletions examples/file_upload/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ impl Component for Model {
<div>
<div>
<p>{ "Choose a file to upload to see the uploaded bytes" }</p>
<input type="file" multiple=true onchange={ctx.link().callback(move |e: Event| {
<input type="file" multiple=true on:change={ctx.link().callback(move |e: Event| {
let mut result = Vec::new();
let input: HtmlInputElement = e.target_unchecked_into();

Expand All @@ -100,7 +100,7 @@ impl Component for Model {
</div>
<div>
<label>{ "Read bytes" }</label>
<input type="checkbox" checked={flag} onclick={ctx.link().callback(|_| Msg::ToggleReadBytes)} />
<input type="checkbox" checked={flag} on:click={ctx.link().callback(|_| Msg::ToggleReadBytes)} />
</div>
<ul>
{ for self.files.iter().map(|f| Self::view_file(f)) }
Expand Down
4 changes: 2 additions & 2 deletions examples/futures/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,10 @@ impl Component for Model {
match &self.markdown {
FetchState::NotFetching => html! {
<>
<button onclick={ctx.link().callback(|_| Msg::GetMarkdown)}>
<button on:click={ctx.link().callback(|_| Msg::GetMarkdown)}>
{ "Get Markdown" }
</button>
<button onclick={ctx.link().callback(|_| Msg::GetError)}>
<button on:click={ctx.link().callback(|_| Msg::GetError)}>
{ "Get using incorrect URL" }
</button>
</>
Expand Down
12 changes: 6 additions & 6 deletions examples/game_of_life/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ impl Model {
};
html! {
<div key={idx} class={classes!("game-cellule", cellule_status)}
onclick={link.callback(move |_| Msg::ToggleCellule(idx))}>
on:click={link.callback(move |_| Msg::ToggleCellule(idx))}>
</div>
}
}
Expand Down Expand Up @@ -193,11 +193,11 @@ impl Component for Model {
{ for cell_rows }
</div>
<div class="game-buttons">
<button class="game-button" onclick={ctx.link().callback(|_| Msg::Random)}>{ "Random" }</button>
<button class="game-button" onclick={ctx.link().callback(|_| Msg::Step)}>{ "Step" }</button>
<button class="game-button" onclick={ctx.link().callback(|_| Msg::Start)}>{ "Start" }</button>
<button class="game-button" onclick={ctx.link().callback(|_| Msg::Stop)}>{ "Stop" }</button>
<button class="game-button" onclick={ctx.link().callback(|_| Msg::Reset)}>{ "Reset" }</button>
<button class="game-button" on:click={ctx.link().callback(|_| Msg::Random)}>{ "Random" }</button>
<button class="game-button" on:click={ctx.link().callback(|_| Msg::Step)}>{ "Step" }</button>
<button class="game-button" on:click={ctx.link().callback(|_| Msg::Start)}>{ "Start" }</button>
<button class="game-button" on:click={ctx.link().callback(|_| Msg::Stop)}>{ "Stop" }</button>
<button class="game-button" on:click={ctx.link().callback(|_| Msg::Reset)}>{ "Reset" }</button>
</div>
</section>
</section>
Expand Down
6 changes: 3 additions & 3 deletions examples/js_callback/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,16 @@ impl Component for Model {
<>
<textarea
class="code-block"
oninput={ctx.link().callback(|e: InputEvent| {
on:input={ctx.link().callback(|e: InputEvent| {
let input: HtmlTextAreaElement = e.target_unchecked_into();
Msg::Payload(input.value())
})}
value={self.payload.clone()}
/>
<button onclick={ctx.link().callback(|_| Msg::Payload(bindings::get_payload()))}>
<button on:click={ctx.link().callback(|_| Msg::Payload(bindings::get_payload()))}>
{ "Get the payload!" }
</button>
<button onclick={ctx.link().callback(|_| Msg::AsyncPayload)} >
<button on:click={ctx.link().callback(|_| Msg::AsyncPayload)} >
{ "Get the payload later!" }
</button>
<p class="code-block">
Expand Down
30 changes: 15 additions & 15 deletions examples/keyed_list/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ impl Model {
{ self.build_component_ratio }
</p>
<input name="ratio" type="range" class="form-control-range" min="0.0" max="1.0" step="any"
oninput={link.callback(|e: InputEvent| {
on:input={link.callback(|e: InputEvent| {
let input: HtmlInputElement = e.target_unchecked_into();
Msg::ChangeRatio(input.value_as_number())
})}
Expand All @@ -179,74 +179,74 @@ impl Model {
<>
<div class="row">
<div class="col">
<button class="btn_size alert alert-danger" onclick={link.callback(|_| Msg::DeleteEverybody)}>
<button class="btn_size alert alert-danger" on:click={link.callback(|_| Msg::DeleteEverybody)}>
{ "Delete everybody" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(1))}>
<button class="btn_size alert alert-success" on:click={link.callback(|_| Msg::CreatePersons(1))}>
{ "Create 1" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(5))}>
<button class="btn_size alert alert-success" on:click={link.callback(|_| Msg::CreatePersons(5))}>
{ "Create 5" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(100))}>
<button class="btn_size alert alert-success" on:click={link.callback(|_| Msg::CreatePersons(100))}>
{ "Create 100" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(500))}>
<button class="btn_size alert alert-success" on:click={link.callback(|_| Msg::CreatePersons(500))}>
{ "Create 500" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersonsPrepend(1))}>
<button class="btn_size alert alert-success" on:click={link.callback(|_| Msg::CreatePersonsPrepend(1))}>
{ "Prepend 1" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersonsPrepend(5))}>
<button class="btn_size alert alert-success" on:click={link.callback(|_| Msg::CreatePersonsPrepend(5))}>
{ "Prepend 5" }
</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn_size alert alert-warning" onclick={link.callback(|_| Msg::ToggleKeyed)}>
<button class="btn_size alert alert-warning" on:click={link.callback(|_| Msg::ToggleKeyed)}>
{ if self.keyed { "Disable keys" } else { "Enable keys" } }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SwapRandom)}>
<button class="btn_size alert alert-info" on:click={link.callback(|_| Msg::SwapRandom)}>
{ "Swap random" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::ReverseList)}>
<button class="btn_size alert alert-info" on:click={link.callback(|_| Msg::ReverseList)}>
{ "Reverse list" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortById)}>
<button class="btn_size alert alert-info" on:click={link.callback(|_| Msg::SortById)}>
{ "Sort by id" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByName)}>
<button class="btn_size alert alert-info" on:click={link.callback(|_| Msg::SortByName)}>
{ "Sort by name" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByAge)}>
<button class="btn_size alert alert-info" on:click={link.callback(|_| Msg::SortByAge)}>
{ "Sort by age" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByAddress)}>
<button class="btn_size alert alert-info" on:click={link.callback(|_| Msg::SortByAddress)}>
{ "Sort by address" }
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion examples/mount_point/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ impl Component for Model {
<div>
<input
value={self.name.clone()}
oninput={ctx.link().callback(|e: InputEvent| {
on:input={ctx.link().callback(|e: InputEvent| {
let input = e.target_unchecked_into::<HtmlInputElement>();
Msg::UpdateName(input.value())
})}
Expand Down
6 changes: 3 additions & 3 deletions examples/multi_thread/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ impl Component for Model {
html! {
<div>
<nav class="menu">
<button onclick={ctx.link().callback(|_| Msg::SendToWorker)}>{ "Send to Thread" }</button>
<button onclick={ctx.link().callback(|_| Msg::SendToJob)}>{ "Send to Job" }</button>
<button onclick={ctx.link().callback(|_| Msg::SendToContext)}>{ "Send to Context" }</button>
<button on:click={ctx.link().callback(|_| Msg::SendToWorker)}>{ "Send to Thread" }</button>
<button on:click={ctx.link().callback(|_| Msg::SendToJob)}>{ "Send to Job" }</button>
<button on:click={ctx.link().callback(|_| Msg::SendToContext)}>{ "Send to Context" }</button>
</nav>
</div>
}
Expand Down
4 changes: 2 additions & 2 deletions examples/nested_list/src/app.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ impl Component for App {

fn view(&self, ctx: &Context<Self>) -> Html {
let on_hover = &ctx.link().callback(Msg::Hover);
let onmouseenter = &ctx.link().callback(|_| Msg::Hover(Hovered::None));
let mouseenter = &ctx.link().callback(|_| Msg::Hover(Hovered::None));
let list_link = &self.list_link;
let sub_list_link = &self.sub_list_link;

Expand All @@ -46,7 +46,7 @@ impl Component for App {
.map(|letter| html_nested! { <ListItem name={letter.to_string()} {on_hover} /> });

html! {
<div class="main" {onmouseenter}>
<div class="main" on:{mouseenter}>
<h1>{ "Nested List Demo" }</h1>
<List {on_hover} weak_link={list_link}>
<ListHeader text="Calling all Rusties!" {on_hover} {list_link} />
Expand Down
6 changes: 3 additions & 3 deletions examples/nested_list/src/header.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@ impl Component for ListHeader {

fn view(&self, ctx: &Context<Self>) -> Html {
let list_link = ctx.props().list_link.borrow().clone().unwrap();
let onmouseover = ctx.props().on_hover.reform(|e: MouseEvent| {
let mouseover = ctx.props().on_hover.reform(|e: MouseEvent| {
e.stop_propagation();
Hovered::Header
});

html! {
<div
class="list-header"
{onmouseover}
onclick={list_link.callback(|_| ListMsg::HeaderClick)}
on:{mouseover}
on:click={list_link.callback(|_| ListMsg::HeaderClick)}
>
{ &ctx.props().text }
</div>
Expand Down
Loading