Skip to content

refactor: inline to html! callsite #4145

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

Open
Madoshakalaka wants to merge 2 commits into
base: master
Choose a base branch
from
Open

refactor: inline to html! callsite #4145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9644a0d
refactor(examples): inline to html! callsite
Madoshakalaka Apr 26, 2026
ae86f72
style
Madoshakalaka Apr 26, 2026
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
40 changes: 18 additions & 22 deletions examples/actix_ssr_router/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,27 +115,7 @@ fn render_post(post: &content::Post) -> Html {
}
};

let view_content = {
let mut show_hero = false;
let parts: Vec<Html> = post
.content
.iter()
.map(|part| match part {
PostPart::Section(section) => {
let html = render_section(section, show_hero);
show_hero = true;
html
}
PostPart::Quote(quote) => {
show_hero = false;
render_quote(quote)
}
})
.collect();
html! {
{for parts}
}
};
let mut show_hero = false;

html! {
<section class="hero is-medium is-light has-background">
Expand All @@ -157,7 +137,23 @@ fn render_post(post: &content::Post) -> Html {
</div>
</div>
</section>
<div class="section container">{ view_content }</div>
<div class="section container">
for part in post.content.iter() {
match part {
PostPart::Section(section) => {
let rendered = render_section(section, show_hero);
// show hero between sections
show_hero = true;
{ rendered }
}
PostPart::Quote(quote) => {
// don't show hero after a quote
show_hero = false;
{ render_quote(quote) }
}
}
}
</div>
}
}

Expand Down
40 changes: 18 additions & 22 deletions examples/axum_ssr_router/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,27 +115,7 @@ fn render_post(post: &content::Post) -> Html {
}
};

let view_content = {
let mut show_hero = false;
let parts: Vec<Html> = post
.content
.iter()
.map(|part| match part {
PostPart::Section(section) => {
let html = render_section(section, show_hero);
show_hero = true;
html
}
PostPart::Quote(quote) => {
show_hero = false;
render_quote(quote)
}
})
.collect();
html! {
{for parts}
}
};
let mut show_hero = false;

html! {
<section class="hero is-medium is-light has-background">
Expand All @@ -157,7 +137,23 @@ fn render_post(post: &content::Post) -> Html {
</div>
</div>
</section>
<div class="section container">{ view_content }</div>
<div class="section container">
for part in post.content.iter() {
match part {
PostPart::Section(section) => {
let rendered = render_section(section, show_hero);
// show hero between sections
show_hero = true;
{ rendered }
}
PostPart::Quote(quote) => {
// don't show hero after a quote
show_hero = false;
{ render_quote(quote) }
}
}
}
</div>
}
}

Expand Down
36 changes: 4 additions & 32 deletions examples/boids/src/boid.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
use std::fmt::Write;
use std::iter;

use rand::RngExt;
use yew::{Html, html};

use crate::math::{self, Mean, Vector2D, WeightedMean};
use crate::settings::Settings;
use crate::simulation::SIZE;

#[derive(Clone, Debug, PartialEq)]
pub struct Boid {
position: Vector2D,
velocity: Vector2D,
radius: f64,
hue: f64,
pub position: Vector2D,
pub velocity: Vector2D,
pub radius: f64,
pub hue: f64,
}

impl Boid {
Expand Down Expand Up @@ -123,32 +121,6 @@ impl Boid {
boid.update(settings, visible_boids);
}
}

pub fn render(&self) -> Html {
let color = format!("hsl({:.3}rad, 100%, 50%)", self.hue);

let mut points = String::new();
for offset in iter_shape_points(self.radius, self.velocity.angle()) {
let Vector2D { x, y } = self.position + offset;

// Write to string will never fail.
let _ = write!(points, "{x:.2},{y:.2} ");
}

html! { <polygon {points} fill={color} /> }
}
}

fn iter_shape_points(radius: f64, rotation: f64) -> impl Iterator<Item = Vector2D> {
const SHAPE: [(f64, f64); 3] = [
(0. * math::FRAC_TAU_3, 2.0),
(1. * math::FRAC_TAU_3, 1.0),
(2. * math::FRAC_TAU_3, 1.0),
];
SHAPE
.iter()
.copied()
.map(move |(angle, radius_mul)| Vector2D::from_polar(angle + rotation, radius_mul * radius))
}

#[derive(Debug)]
Expand Down
24 changes: 22 additions & 2 deletions examples/boids/src/simulation.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
use std::fmt::Write;

use gloo::timers::callback::Interval;
use yew::{Component, Context, Html, Properties, html};

use crate::boid::Boid;
use crate::math::Vector2D;
use crate::math::{self, Vector2D};
use crate::settings::Settings;

pub const SIZE: Vector2D = Vector2D::new(1600.0, 1000.0);
Expand Down Expand Up @@ -103,7 +105,25 @@ impl Component for Simulation {

html! {
<svg class="simulation-window" viewBox={view_box}>
{ for self.boids.iter().map(Boid::render) }
for boid in &self.boids {

let color = format!("hsl({:.3}rad, 100%, 50%)", boid.hue);
let mut points = String::new();
for offset in [
(0. * math::FRAC_TAU_3, 2.0),
(1. * math::FRAC_TAU_3, 1.0),
(2. * math::FRAC_TAU_3, 1.0),
]
.iter()
.copied()
.map(move |(angle, radius_mul)| Vector2D::from_polar(angle + boid.velocity.angle(), radius_mul * boid.radius)) {
let Vector2D { x, y } = boid.position + offset;
// Write to string will never fail.
let _ = write!(points, "{x:.2},{y:.2} ");
};

<polygon {points} fill={color} />
}
</svg>
}
}
Expand Down
37 changes: 16 additions & 21 deletions examples/file_upload/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,33 +97,28 @@ impl Component for App {
})}
/>
<div id="preview-area">
{ for self.files.iter().map(Self::view_file) }
</div>
</div>
}
}
}

impl App {
fn view_file(file: &FileDetails) -> Html {
let file_type = file.file_type.to_string();
let src = format!("data:{};base64,{}", file_type, STANDARD.encode(&file.data));
html! {
<div class="preview-tile">
<p class="preview-name">{ &file.name }</p>
<div class="preview-media">
if file.file_type.contains("image") {
<img src={src} />
} else if file.file_type.contains("video") {
<video controls={true}>
<source src={src} type={ file_type }/>
</video>
for file in &self.files {
let file_type = file.file_type.to_string();
let src = format!("data:{};base64,{}", file_type, STANDARD.encode(&file.data));
<div class="preview-tile">
<p class="preview-name">{ &file.name }</p>
<div class="preview-media">
if file.file_type.contains("image") {
<img src={src} />
} else if file.file_type.contains("video") {
<video controls={true}>
<source src={src} type={ file_type }/>
</video>
}
</div>
</div>
}
</div>
</div>
}
}
}

fn main() {
yew::Renderer::<App>::new().render();
}
29 changes: 16 additions & 13 deletions examples/function_router/src/pages/post.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,20 +101,23 @@ pub fn Post(props: &Props) -> Html {
// don't show hero for the first section
let mut show_hero = false;

let parts = post.content.iter().map(|part| match part {
PostPart::Section(section) => {
let html = render_section(section, show_hero);
// show hero between sections
show_hero = true;
html
}
PostPart::Quote(quote) => {
// don't show hero after a quote
show_hero = false;
render_quote(quote)
html! {
for part in post.content.iter() {
match part {
PostPart::Section(section) => {
let rendered = render_section(section, show_hero);
// show hero between sections
show_hero = true;
{rendered}
}
PostPart::Quote(quote) => {
// don't show hero after a quote
show_hero = false;
{render_quote(quote)}
}
}
}
});
html! {{for parts}}
}
};

html! {
Expand Down
20 changes: 11 additions & 9 deletions examples/function_router/src/pages/post_list.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,25 @@ pub fn PostList() -> Html {

let posts = {
let start_seed = (current_page - 1) * ITEMS_PER_PAGE;
let mut cards = (0..ITEMS_PER_PAGE).map(|seed_offset| {
html! {
<li class="list-item mb-5">
<PostCard seed={start_seed + seed_offset} />
</li>
}
});
let half = ITEMS_PER_PAGE / 2;
html! {
<div class="columns">
<div class="column">
<ul class="list">
{ for cards.by_ref().take(ITEMS_PER_PAGE as usize / 2) }
for seed_offset in 0..half {
<li class="list-item mb-5">
<PostCard seed={start_seed + seed_offset} />
</li>
}
</ul>
</div>
<div class="column">
<ul class="list">
{ for cards }
for seed_offset in half..ITEMS_PER_PAGE {
<li class="list-item mb-5">
<PostCard seed={start_seed + seed_offset} />
</li>
}
</ul>
</div>
</div>
Expand Down
23 changes: 5 additions & 18 deletions examples/game_of_life/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
use gloo::timers::callback::Interval;
use yew::html::Scope;
use yew::{Component, Context, Html, classes, html};

mod conway;
Expand All @@ -20,21 +19,6 @@ pub struct App {
_interval: Interval,
}

impl App {
fn view_cellule(&self, row: usize, col: usize, link: &Scope<Self>) -> Html {
let status = if self.conway.alive(row, col) {
"cellule-live"
} else {
"cellule-dead"
};
html! {
<div class={classes!("game-cellule", status)}
onclick={link.callback(move |_| Msg::ToggleCellule((row,col)))}>
</div>
}
}
}

impl Component for App {
type Message = Msg;
type Properties = ();
Expand Down Expand Up @@ -96,9 +80,12 @@ impl Component for App {
<section class="game-area">
<div class="game-of-life">
for (row, cellules) in self.conway.cellules.chunks(self.conway.width).enumerate() {
let cells = cellules.iter().enumerate().map(|(col, _)| self.view_cellule(row, col, ctx.link()));
<div class="game-row">
{ for cells }
for (col, _) in cellules.iter().enumerate() {
<div class={classes!("game-cellule", if self.conway.alive(row, col) {"cellule-live"} else {"cellule-dead"})}
onclick={ctx.link().callback(move |_| Msg::ToggleCellule((row,col)))}>
</div>
}
</div>
}
</div>
Expand Down
Loading
Loading