diff --git a/Cargo.toml b/Cargo.toml index 4c78f05..cc0ea44 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -12,3 +12,8 @@ members = [ "examples/yew-theme-yewdux", ] resolver = "2" + +[patch.crates-io] +yew = { git = "https://github.com/yewstack/yew", rev = "7a55441daed1b154df47077133e377120a23de75" } +yew-agent = { git = "https://github.com/yewstack/yew", rev = "7a55441daed1b154df47077133e377120a23de75" } +yewdux = { git = "https://github.com/intendednull/yewdux", rev = "d844ab9918ff0eaae59be57cce3773ed33f72dca" } diff --git a/examples/benchmarks/src/main.rs b/examples/benchmarks/src/main.rs index 6528469..408634d 100644 --- a/examples/benchmarks/src/main.rs +++ b/examples/benchmarks/src/main.rs @@ -34,7 +34,6 @@ pub enum BenchMsg { } pub struct Benchmarks { - link: ComponentLink, finished: bool, parse_simple: Option, @@ -56,9 +55,8 @@ impl Component for Benchmarks { type Message = BenchMsg; type Properties = (); - fn create(_: Self::Properties, link: ComponentLink) -> Self { + fn create(_: &Context) -> Self { Self { - link, finished: false, parse_simple: None, macro_simple: None, @@ -74,28 +72,28 @@ impl Component for Benchmarks { } } - fn rendered(&mut self, first_render: bool) { + fn rendered(&mut self, ctx: &Context, first_render: bool) { if first_render { - let cb = self - .link + let cb = ctx + .link() .callback(|_| BenchMsg::ParseSimpleFinish(benchmarks::bench_parse_simple())); Timeout::new(100, move || cb.emit(())).forget(); } } - fn update(&mut self, msg: Self::Message) -> ShouldRender { + fn update(&mut self, ctx: &Context, msg: Self::Message) -> bool { match msg { BenchMsg::ParseSimpleFinish(m) => { self.parse_simple = Some(m); - let cb = self - .link + let cb = ctx + .link() .callback(|_| BenchMsg::MacroSimpleFinish(benchmarks::bench_macro_simple())); Timeout::new(100, move || cb.emit(())).forget(); } BenchMsg::MacroSimpleFinish(m) => { self.macro_simple = Some(m); - let cb = self.link.callback(|_| { + let cb = ctx.link().callback(|_| { BenchMsg::MacroInlineSimpleFinish(benchmarks::bench_macro_inline_simple()) }); @@ -103,7 +101,7 @@ impl Component for Benchmarks { } BenchMsg::MacroInlineSimpleFinish(m) => { self.macro_inline_simple = Some(m); - let cb = self.link.callback(|_| { + let cb = ctx.link().callback(|_| { BenchMsg::ParseSimpleNoCacheFinish(benchmarks::bench_parse_simple_no_cache()) }); @@ -111,8 +109,8 @@ impl Component for Benchmarks { } BenchMsg::ParseSimpleNoCacheFinish(m) => { self.parse_simple_no_cache = Some(m); - let cb = self - .link + let cb = ctx + .link() .callback(|_| BenchMsg::ParseComplexFinish(benchmarks::bench_parse_complex())); Timeout::new(100, move || cb.emit(())).forget(); @@ -121,8 +119,8 @@ impl Component for Benchmarks { BenchMsg::ParseComplexFinish(m) => { self.parse_complex = Some(m); - let cb = self - .link + let cb = ctx + .link() .callback(|_| BenchMsg::MacroComplexFinish(benchmarks::bench_macro_complex())); Timeout::new(100, move || cb.emit(())).forget(); @@ -130,7 +128,7 @@ impl Component for Benchmarks { BenchMsg::MacroComplexFinish(m) => { self.macro_complex = Some(m); - let cb = self.link.callback(|_| { + let cb = ctx.link().callback(|_| { BenchMsg::MacroInlineComplexFinish(benchmarks::bench_macro_inline_complex()) }); @@ -139,7 +137,7 @@ impl Component for Benchmarks { BenchMsg::MacroInlineComplexFinish(m) => { self.macro_inline_complex = Some(m); - let cb = self.link.callback(|_| { + let cb = ctx.link().callback(|_| { BenchMsg::ParseComplexNoCacheFinish(benchmarks::bench_parse_complex_no_cache()) }); @@ -148,8 +146,8 @@ impl Component for Benchmarks { BenchMsg::ParseComplexNoCacheFinish(m) => { self.parse_complex_no_cache = Some(m); - let cb = self - .link + let cb = ctx + .link() .callback(|_| BenchMsg::CachedLookupFinish(benchmarks::bench_cached_lookup())); Timeout::new(100, move || cb.emit(())).forget(); @@ -159,7 +157,7 @@ impl Component for Benchmarks { self.cached_lookup = Some(m); let cb = - self.link.callback(|_| { + ctx.link().callback(|_| { BenchMsg::CachedLookupBigSheetFinish( benchmarks::bench_cached_lookup_big_sheet(), ) @@ -171,8 +169,8 @@ impl Component for Benchmarks { BenchMsg::CachedLookupBigSheetFinish(m) => { self.cached_lookup_big_sheet = Some(m); - let cb = self - .link + let cb = ctx + .link() .callback(|_| BenchMsg::MountingFinish(benchmarks::bench_mounting())); Timeout::new(100, move || cb.emit(())).forget(); @@ -186,13 +184,13 @@ impl Component for Benchmarks { true } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, _: &Context) -> Html { html! { -
+
{ if !self.finished { html!{
{"Benchmarking..."}
{"The browser may be unresponsive during the benchmark."}
} @@ -316,7 +314,6 @@ pub enum AppMsg { } pub struct App { - link: ComponentLink, started: bool, } @@ -324,14 +321,11 @@ impl Component for App { type Message = AppMsg; type Properties = (); - fn create(_: Self::Properties, link: ComponentLink) -> Self { - Self { - link, - started: false, - } + fn create(_: &Context) -> Self { + Self { started: false } } - fn update(&mut self, msg: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, msg: Self::Message) -> bool { assert_eq!(msg, AppMsg::Start); self.started = true; @@ -339,15 +333,15 @@ impl Component for App { true } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, ctx: &Context) -> Html { html! { <> - -
+ +

{"Stylist Benchmark"}

{ if self.started { @@ -356,7 +350,7 @@ impl Component for App { html!{ <>
{"To start benchmarking, please click start:"}
- diff --git a/examples/proc-macros/src/main.rs b/examples/proc-macros/src/main.rs index a1d66a9..a7a816f 100644 --- a/examples/proc-macros/src/main.rs +++ b/examples/proc-macros/src/main.rs @@ -1,6 +1,5 @@ -use stylist::css; -use stylist::yew::Global; -use yew::{html, Component, ComponentLink, Html, ShouldRender}; +use stylist::{css, yew::Global}; +use yew::{html, Component, Context, Html}; use log::Level; @@ -13,21 +12,21 @@ impl Component for Inside { type Message = (); type Properties = (); - fn create(_: Self::Properties, _: ComponentLink) -> Self { + fn create(_: &Context) -> Self { Self {} } - fn update(&mut self, _: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, _: Self::Message) -> bool { false } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, _: &Context) -> Html { html! { -
+ )}> {"The quick brown fox jumps over the lazy dog"}
} @@ -55,22 +54,22 @@ impl Component for App { type Message = (); type Properties = (); - fn create(_: Self::Properties, _: ComponentLink) -> Self { + fn create(_: &Context) -> Self { Self {} } - fn update(&mut self, _: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, _: Self::Message) -> bool { false } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, _: &Context) -> Html { html! { <> - + "#)} />

{"Procedural Macro Example"}

-
+ "#)} > {"The quick brown fox jumps over the lazy dog"}
diff --git a/examples/yew-integration/src/main.rs b/examples/yew-integration/src/main.rs index f3aad21..ca16754 100644 --- a/examples/yew-integration/src/main.rs +++ b/examples/yew-integration/src/main.rs @@ -1,6 +1,5 @@ -use stylist::yew::Global; -use stylist::{Style, StyleSource, YieldStyle}; -use yew::{html, Component, ComponentLink, Html, ShouldRender}; +use stylist::{yew::Global, Style, StyleSource, YieldStyle}; +use yew::{html, Component, Context, Html}; use log::Level; @@ -10,21 +9,21 @@ impl Component for Inside { type Message = (); type Properties = (); - fn create(_: Self::Properties, _: ComponentLink) -> Self { + fn create(_: &Context) -> Self { Self {} } - fn update(&mut self, _: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, _: Self::Message) -> bool { false } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, _: &Context) -> Html { html! { -
+
{"The quick brown fox jumps over the lazy dog"}
} @@ -62,7 +61,7 @@ impl Component for App { type Message = (); type Properties = (); - fn create(_: Self::Properties, _: ComponentLink) -> Self { + fn create(_: &Context) -> Self { // Alternatively, you can create Style manually during Component creation. let style = Style::new( r#" @@ -86,19 +85,19 @@ impl Component for App { Self { style } } - fn update(&mut self, _: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, _: Self::Message) -> bool { false } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, _: &Context) -> Html { html! { <> // Global Styles can be applied with component. - + "#} />

{"Yew Integration"}

-
+
{"The quick brown fox jumps over the lazy dog"}
@@ -140,8 +139,9 @@ mod tests { #[wasm_bindgen_test] fn test_simple() { - yew::app::App::::new() - .mount(yew::utils::document().get_element_by_id("output").unwrap()); + yew::start_app_in_element::( + yew::utils::document().get_element_by_id("output").unwrap(), + ); let window = window().unwrap(); let doc = window.document().unwrap(); let body = window.document().unwrap().body().unwrap(); diff --git a/examples/yew-shadow/src/main.rs b/examples/yew-shadow/src/main.rs index 7585262..6861a2a 100644 --- a/examples/yew-shadow/src/main.rs +++ b/examples/yew-shadow/src/main.rs @@ -1,6 +1,4 @@ -use stylist::manager::StyleManager; -use stylist::yew::Global; -use stylist::{Style, StyleSource, YieldStyle}; +use stylist::{manager::StyleManager, yew::Global, Style, StyleSource, YieldStyle}; use web_sys::{window, Element, ShadowRootInit, ShadowRootMode}; use yew::prelude::*; @@ -14,13 +12,13 @@ impl Component for ShadowRoot { type Message = (); type Properties = (); - fn create(_: Self::Properties, _: ComponentLink) -> Self { + fn create(_: &Context) -> Self { Self { root_ref: NodeRef::default(), } } - fn rendered(&mut self, first_render: bool) { + fn rendered(&mut self, _: &Context, first_render: bool) { if first_render { if let Some(m) = self.root_ref.cast::() { if let Ok(root) = m.attach_shadow(&ShadowRootInit::new(ShadowRootMode::Open)) { @@ -66,17 +64,17 @@ impl Component for ShadowRoot { } } - fn update(&mut self, _: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, _: Self::Message) -> bool { false } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, _: &Context) -> Html { html! { -
+
} } } @@ -87,22 +85,22 @@ impl Component for App { type Message = (); type Properties = (); - fn create(_: Self::Properties, _: ComponentLink) -> Self { + fn create(_: &Context) -> Self { Self } - fn update(&mut self, _: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, _: Self::Message) -> bool { false } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, _: &Context) -> Html { html! { <> - + "#} />

{"Yew Shadow DOM Example"}

-
+
{"Outside of Shadow DOM."}
diff --git a/examples/yew-theme-agent/Cargo.toml b/examples/yew-theme-agent/Cargo.toml index ff5663a..75ef0b6 100644 --- a/examples/yew-theme-agent/Cargo.toml +++ b/examples/yew-theme-agent/Cargo.toml @@ -8,5 +8,5 @@ edition = "2018" log = "0.4.14" console_log = { version = "0.2.0", features = ["color"] } yew = "0.18.0" -yewtil = "0.4.0" +yew-agent = "0.1.0" stylist = { path = "../../packages/stylist", features = ["yew_integration"] } diff --git a/examples/yew-theme-agent/src/main.rs b/examples/yew-theme-agent/src/main.rs index 6ba0736..f779b60 100644 --- a/examples/yew-theme-agent/src/main.rs +++ b/examples/yew-theme-agent/src/main.rs @@ -1,11 +1,12 @@ use std::sync::Arc; -use stylist::yew::Global; -use stylist::{StyleSource, YieldStyle}; -use yew::{html, Bridge, Component, ComponentLink, Html, ShouldRender}; -use yewtil::store::{Bridgeable, ReadOnly, StoreWrapper}; - use log::Level; +use stylist::{yew::Global, StyleSource, YieldStyle}; +use yew::{html, Component, Context, Html}; +use yew_agent::{ + utils::store::{Bridgeable, ReadOnly, StoreWrapper}, + Bridge, +}; mod theme; @@ -17,7 +18,6 @@ pub(crate) enum InsideMsg { } pub(crate) struct Inside { - link: ComponentLink, theme_kind: ThemeKind, theme: Option>, theme_store: Box>>, @@ -27,17 +27,16 @@ impl Component for Inside { type Message = InsideMsg; type Properties = (); - fn create(_: Self::Properties, link: ComponentLink) -> Self { - let callback = link.callback(InsideMsg::ThemeUpdated); + fn create(ctx: &Context) -> Self { + let callback = ctx.link().callback(InsideMsg::ThemeUpdated); Self { - link, theme_kind: ThemeKind::Light, theme: None, theme_store: ThemeStore::bridge(callback), } } - fn update(&mut self, msg: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, msg: Self::Message) -> bool { match msg { InsideMsg::ThemeUpdated(m) => { let m = m.borrow(); @@ -52,11 +51,11 @@ impl Component for Inside { true } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, ctx: &Context) -> Html { let theme_str = match self.theme_kind { ThemeKind::Light => "Dark Theme", ThemeKind::Dark => "Light Theme", @@ -67,13 +66,13 @@ impl Component for Inside { ThemeKind::Dark => ThemeKind::Light, }; - let switch_theme = self - .link + let switch_theme = ctx + .link() .callback(move |_| InsideMsg::SetTheme(other_theme.clone())); html! { -
- +
+
} } @@ -110,8 +109,8 @@ impl Component for App { type Message = AppMsg; type Properties = (); - fn create(_: Self::Properties, link: ComponentLink) -> Self { - let callback = link.callback(AppMsg::ThemeUpdated); + fn create(ctx: &Context) -> Self { + let callback = ctx.link().callback(AppMsg::ThemeUpdated); Self { theme: None, @@ -120,7 +119,7 @@ impl Component for App { } } - fn update(&mut self, msg: Self::Message) -> ShouldRender { + fn update(&mut self, _: &Context, msg: Self::Message) -> bool { match msg { AppMsg::ThemeUpdated(m) => { let m = m.borrow(); @@ -132,11 +131,11 @@ impl Component for App { true } - fn change(&mut self, _: Self::Properties) -> ShouldRender { + fn changed(&mut self, _: &Context) -> bool { false } - fn view(&self) -> Html { + fn view(&self, _: &Context) -> Html { if self.theme.is_none() { return Html::default(); } @@ -151,7 +150,7 @@ impl Component for App { html! { <> // Global Styles can be applied with component. - + )} />

{"Yew Theming w/ Agent"}

-
+
{"You are now using the "}{theme_str}{"!"}
diff --git a/examples/yew-theme-agent/src/theme.rs b/examples/yew-theme-agent/src/theme.rs index 3bed0fa..6ebe937 100644 --- a/examples/yew-theme-agent/src/theme.rs +++ b/examples/yew-theme-agent/src/theme.rs @@ -1,7 +1,9 @@ use std::sync::Arc; -use yew::agent::AgentLink; -use yewtil::store::{Store, StoreWrapper}; +use yew_agent::{ + utils::store::{Store, StoreWrapper}, + AgentLink, +}; #[derive(Debug, Clone)] pub(crate) enum ThemeKind { diff --git a/examples/yew-theme-yewdux/Cargo.toml b/examples/yew-theme-yewdux/Cargo.toml index 46d1d21..c5c1626 100644 --- a/examples/yew-theme-yewdux/Cargo.toml +++ b/examples/yew-theme-yewdux/Cargo.toml @@ -8,9 +8,8 @@ edition = "2018" log = "0.4.14" console_log = { version = "0.2.0", features = ["color"] } yew = "0.18.0" -yewtil = "0.4.0" stylist = { path = "../../packages/stylist", features = ["yew_integration"] } -yewdux = "0.6.2" +yewdux = "0.6" [dev-dependencies] wasm-bindgen-test = "0.3.26" diff --git a/packages/stylist/Cargo.toml b/packages/stylist/Cargo.toml index 696c910..461369b 100644 --- a/packages/stylist/Cargo.toml +++ b/packages/stylist/Cargo.toml @@ -30,7 +30,7 @@ stylist-macros = { path = "../stylist-macros", version = "0.9.0", optional = tru once_cell = "1.8.0" rand = { version = "0.8.4", features = ["small_rng"], optional = true } wasm-bindgen = "0.2.76" -yew = { version = "0.18.0", optional = true, default-features = false, features = ["web_sys"] } +yew = { version = "0.18.0", optional = true, default-features = false } [target.'cfg(target_arch = "wasm32")'.dependencies] getrandom = { version = "0.2.3", features = ["js"], optional = true } diff --git a/packages/stylist/src/yew/global.rs b/packages/stylist/src/yew/global.rs index 8775b60..b875d5c 100644 --- a/packages/stylist/src/yew/global.rs +++ b/packages/stylist/src/yew/global.rs @@ -3,7 +3,7 @@ use yew::prelude::*; use crate::{GlobalStyle, StyleSource}; /// The properties for [`Global`] Component, please see its documentation for usage. -#[derive(Properties, Clone, Debug)] +#[derive(Properties, Clone, Debug, PartialEq)] pub struct GlobalProps { pub css: StyleSource<'static>, } @@ -50,8 +50,6 @@ pub struct GlobalProps { /// ``` #[derive(Debug)] pub struct Global { - props: GlobalProps, - global_style: Option, } @@ -59,44 +57,37 @@ impl Component for Global { type Message = (); type Properties = GlobalProps; - fn create(props: Self::Properties, _link: ComponentLink) -> Self { - Self { - props, - - global_style: None, - } + fn create(_ctx: &Context) -> Self { + Self { global_style: None } } - fn rendered(&mut self, first_render: bool) { + fn rendered(&mut self, ctx: &Context, first_render: bool) { if first_render { - self.update_global_style(); + self.update_global_style(ctx.props()); } } - fn update(&mut self, _msg: Self::Message) -> ShouldRender { + fn update(&mut self, _ctx: &Context, _msg: Self::Message) -> bool { false } - fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - - self.update_global_style(); - + fn changed(&mut self, ctx: &Context) -> bool { + self.update_global_style(ctx.props()); false } - fn view(&self) -> Html { + fn view(&self, _ctx: &Context) -> Html { Html::default() } } impl Global { - fn update_global_style(&mut self) { + fn update_global_style(&mut self, props: &GlobalProps) { if let Some(ref m) = self.global_style { m.unregister(); } self.global_style = - Some(GlobalStyle::new(self.props.css.clone()).expect("Failed to parse style.")); + Some(GlobalStyle::new(props.css.clone()).expect("Failed to parse style.")); } } diff --git a/packages/stylist/tests/macro_sheet_tests.rs b/packages/stylist/tests/macro_sheet_tests.rs index 04594ae..34f5f57 100644 --- a/packages/stylist/tests/macro_sheet_tests.rs +++ b/packages/stylist/tests/macro_sheet_tests.rs @@ -96,7 +96,7 @@ fn test_sheet_interpolation() { .into(), }), ]); - assert_eq!(parsed, expected.into()); + assert_eq!(parsed, expected); } #[test] @@ -123,5 +123,5 @@ fn test_sheet_escaped() { }] .into(), })]); - assert_eq!(parsed, expected.into()); + assert_eq!(parsed, expected); }