From 9b6c5ed38b10953991a96ffeda8a9fb1dcbea2e3 Mon Sep 17 00:00:00 2001 From: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> Date: Sat, 27 Nov 2021 20:24:13 +0200 Subject: [PATCH 1/6] add migration guide for 0.19 --- .../yew-agent/0.0.0-to-0.1.0.md | 7 + .../yew-router/0.15.0-to-0.16.0.md | 7 + .../migration-guides/yew/0.18.0-to-0.19.0.md | 147 +++++++++++++ website/sidebars.js | 200 ++++++++++-------- 4 files changed, 270 insertions(+), 91 deletions(-) create mode 100644 website/docs/migration-guides/yew-agent/0.0.0-to-0.1.0.md create mode 100644 website/docs/migration-guides/yew-router/0.15.0-to-0.16.0.md create mode 100644 website/docs/migration-guides/yew/0.18.0-to-0.19.0.md diff --git a/website/docs/migration-guides/yew-agent/0.0.0-to-0.1.0.md b/website/docs/migration-guides/yew-agent/0.0.0-to-0.1.0.md new file mode 100644 index 00000000000..b00e1eeaa5e --- /dev/null +++ b/website/docs/migration-guides/yew-agent/0.0.0-to-0.1.0.md @@ -0,0 +1,7 @@ +--- +title: "0.0.0 to 0.1.0" +--- + +This is the first release of `yew-agents` being separated from `yew` + +The only thing you will need to do is change the import paths from `yew::*` to `yew_agents::*` diff --git a/website/docs/migration-guides/yew-router/0.15.0-to-0.16.0.md b/website/docs/migration-guides/yew-router/0.15.0-to-0.16.0.md new file mode 100644 index 00000000000..55f7f6aaf46 --- /dev/null +++ b/website/docs/migration-guides/yew-router/0.15.0-to-0.16.0.md @@ -0,0 +1,7 @@ +--- +title: "0.15.0 to 0.16.0" +--- + +The router API has been completely redone in `0.16.0`. + +There would be to many things to list out here, so we highly recommend to read up on the [router documentation](./../../concepts/router) and adapt your app accordingly. diff --git a/website/docs/migration-guides/yew/0.18.0-to-0.19.0.md b/website/docs/migration-guides/yew/0.18.0-to-0.19.0.md new file mode 100644 index 00000000000..224199eff39 --- /dev/null +++ b/website/docs/migration-guides/yew/0.18.0-to-0.19.0.md @@ -0,0 +1,147 @@ +--- +title: "0.18.0 to 0.19.0" +--- + +`Yew 0.19.0` has changed a lot, thus this migration will not cover ALL of the changes. + +Instead only the most impacting changes are mentioned and the rest should be picked up by cargo. + +## html! requirement for braces around most props + +Put it simply almost all the time you have to provide braces for props: + +```rust {4}, ignore +let super_age = 1; +html!{ + +} +``` + +```rust {4}, ignore +let super_age = 1; +html!{ + +} +``` + +Also now you can use a shorthand if prop and variable names are the same: + +```rust {4}, ignore +let age = 1; +html!{ + +} +``` + +There is a community provided regex to help with this change, though we cant promise it will work all the time. + +find with `=(?![{">=\s])([^\s>` argument in lifetime methods that can later give you access to `ctx.props() -> &Properties` and `ctx.link() -> &Scope`. + +You will need to remove `link` and `props` from your component struct fields. + +as such all lifetime methods got updated + +### Lifetime methods in Component trait + +The API looks like this now: + +```rust ,ignore +pub trait Component: Sized + 'static { + type Message: 'static; + type Properties: Properties; + + fn create(ctx: &Context) -> Self; + + #[allow(unused_variables)] + fn update(&mut self, ctx: &Context, msg: Self::Message) -> bool { + false + } + + #[allow(unused_variables)] + fn changed(&mut self, ctx: &Context) -> bool { + true + } + + fn view(&self, ctx: &Context) -> Html; + + #[allow(unused_variables)] + fn rendered(&mut self, ctx: &Context, first_render: bool) {} + + #[allow(unused_variables)] + fn destroy(&mut self, ctx: &Context) {} +} +``` + +## `web-sys` is no longer re-exported + +Add `web-sys` as your project dependency and one by one add the needed features like `Event` or `Window`. + +## Services + +During this update all services were removed in favor of community driven solutions like [gloo](https://github.com/rustwasm/gloo) + +Remove this entirely. `yew-services` adds a layer a abstraction which makes it easier to call external resources. This is all well and good but this layer is supposed to be specific to Yew. It would be better if an framework agnostic abstraction existed instead. + +- `ConsoleService` + Use [gloo-console](https://crates.io/crates/gloo-console) or [`weblog`](https://crates.io/crates/weblog) instead. +- `DialogService` + Use [`gloo-dialogs`](https://docs.rs/gloo-dialogs/) instead. +- `IntervalService` + Use [`gloo-timers`](https://docs.rs/gloo-timers/) instead. +- `KeyboardService` + `on*` event handlers in yew already handle it. Using this service is even more cumbersome because it requires use of `NodeRef` in order to call any functions provided by it. + +```rust ,ignore +let callback = Callback::from(|e| { + e.prevent_default(); + todo!("use `e`, just like in service methods."); +}); +html! { + +} +``` + +- `ResizeService` + Use [`gloo-events`](https://docs.rs/gloo-events) to attach the listener instead. +- `StorageService` + Use [`gloo-storage`](https://docs.rs/gloo-storage/) instead. +- `TimeoutService` + Use [`gloo-timers`](https://docs.rs/gloo-timers/) instead. +- `WebSocketService` + Use [`wasm-sockets`](https://github.com/scratchyone/wasm-sockets) or [`reqwasm`](https://github.com/hamza1311/reqwasm) instead. +- `FetchService` + Use [`reqwest`](https://crates.io/crates/reqwest) or [`reqwasm`](https://github.com/hamza1311/reqwasm) instead. + +## New crate - yew-agent + +Yew agents were removed to their separate crate, see [yew agents migration guide](./../yew-agent/0.0.0-to-0.1.0) + +## Ending note + +We are sorry if some things are not covered in this guide as it was truly a huge update and we hope that the uncovered issues will be clearly explained by cargo check/build/clippy. diff --git a/website/sidebars.js b/website/sidebars.js index 0fbd4760992..32698872761 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -10,104 +10,122 @@ */ module.exports = { - // By default, Docusaurus generates a sidebar from the docs folder structure - // conceptsSidebar: [{type: 'autogenerated', dirName: '.'}], + // By default, Docusaurus generates a sidebar from the docs folder structure + // conceptsSidebar: [{type: 'autogenerated', dirName: '.'}], - // But you can create a sidebar manually - sidebar: [ - "intro", + // But you can create a sidebar manually + sidebar: [ + "intro", + { + type: "category", + label: "Getting Started", + items: [ + "getting-started/build-a-sample-app", + "getting-started/examples", + "getting-started/starter-templates", { - type: 'category', - label: 'Getting Started', - items: [ - "getting-started/build-a-sample-app", - "getting-started/examples", - "getting-started/starter-templates", - { - type: 'category', - label: 'Project Setup', - items: [ - 'getting-started/project-setup', - 'getting-started/project-setup/using-trunk', - 'getting-started/project-setup/using-wasm-pack', - ] - } - ], + type: "category", + label: "Project Setup", + items: [ + "getting-started/project-setup", + "getting-started/project-setup/using-trunk", + "getting-started/project-setup/using-wasm-pack", + ], }, + ], + }, + { + type: "category", + label: "Concepts", + items: [ { - type: "category", - label: "Concepts", - items: [ - { - type: "category", - label: "wasm-bindgen", - items: [ - "concepts/wasm-bindgen", - "concepts/wasm-bindgen/web-sys", - ] - }, - { - type: "category", - label: "Components", - items: [ - "concepts/components", - "concepts/components/callbacks", - "concepts/components/properties", - "concepts/components/children", - "concepts/components/refs" - ], - }, - { - type: "category", - label: "HTML", - items: [ - "concepts/html", - "concepts/html/components", - "concepts/html/elements", - "concepts/html/events", - "concepts/html/classes", - "concepts/html/fragments", - "concepts/html/lists", - "concepts/html/literals-and-expressions" - ] - }, - { - type: "category", - label: "Function Components", - items: [ - "concepts/function-components", - "concepts/function-components/attribute", - "concepts/function-components/pre-defined-hooks", - "concepts/function-components/custom-hooks", - ] - }, - "concepts/agents", - "concepts/contexts", - "concepts/router", - ] + type: "category", + label: "wasm-bindgen", + items: ["concepts/wasm-bindgen", "concepts/wasm-bindgen/web-sys"], }, { - type: 'category', - label: 'Advanced topics', - items: [ - "advanced-topics/how-it-works", - "advanced-topics/optimizations", - "advanced-topics/portals", - ] + type: "category", + label: "Components", + items: [ + "concepts/components", + "concepts/components/callbacks", + "concepts/components/properties", + "concepts/components/children", + "concepts/components/refs", + ], }, { - type: 'category', - label: 'More', - items: [ - "more/debugging", - "more/development-tips", - "more/external-libs", - "more/css", - "more/testing", - "more/roadmap", - "more/wasm-build-tools" - ] + type: "category", + label: "HTML", + items: [ + "concepts/html", + "concepts/html/components", + "concepts/html/elements", + "concepts/html/events", + "concepts/html/classes", + "concepts/html/fragments", + "concepts/html/lists", + "concepts/html/literals-and-expressions", + ], }, - "tutorial" - ], + { + type: "category", + label: "Function Components", + items: [ + "concepts/function-components", + "concepts/function-components/attribute", + "concepts/function-components/pre-defined-hooks", + "concepts/function-components/custom-hooks", + ], + }, + "concepts/agents", + "concepts/contexts", + "concepts/router", + ], + }, + { + type: "category", + label: "Advanced topics", + items: [ + "advanced-topics/how-it-works", + "advanced-topics/optimizations", + "advanced-topics/portals", + ], + }, + { + type: "category", + label: "More", + items: [ + "more/debugging", + "more/development-tips", + "more/external-libs", + "more/css", + "more/testing", + "more/roadmap", + "more/wasm-build-tools", + ], + }, + { + type: "category", + label: "Migration guides", + items: [ + { + type: "category", + label: "yew", + items: ["migration-guides/yew/0.18.0-to-0.19.0"], + }, + { + type: "category", + label: "yew-agent", + items: ["migration-guides/yew-agent/0.0.0-to-0.1.0"], + }, + { + type: "category", + label: "yew-router", + items: ["migration-guides/yew-router/0.15.0-to-0.16.0"], + }, + ], + }, + "tutorial", + ], }; From 50fc1e6d3ddf42aa3da89494137e90dc1584b4a0 Mon Sep 17 00:00:00 2001 From: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> Date: Sat, 27 Nov 2021 20:34:05 +0200 Subject: [PATCH 2/6] fix tests --- .../yew-agent/{0.0.0-to-0.1.0.md => from-0.0.0-to-0.1.0.md} | 2 +- .../{0.15.0-to-0.16.0.md => from-0.15.0-to-0.16.0.md} | 2 +- .../yew/{0.18.0-to-0.19.0.md => from-0.18.0-to-0.19.0.md} | 4 ++-- website/sidebars.js | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) rename website/docs/migration-guides/yew-agent/{0.0.0-to-0.1.0.md => from-0.0.0-to-0.1.0.md} (85%) rename website/docs/migration-guides/yew-router/{0.15.0-to-0.16.0.md => from-0.15.0-to-0.16.0.md} (88%) rename website/docs/migration-guides/yew/{0.18.0-to-0.19.0.md => from-0.18.0-to-0.19.0.md} (98%) diff --git a/website/docs/migration-guides/yew-agent/0.0.0-to-0.1.0.md b/website/docs/migration-guides/yew-agent/from-0.0.0-to-0.1.0.md similarity index 85% rename from website/docs/migration-guides/yew-agent/0.0.0-to-0.1.0.md rename to website/docs/migration-guides/yew-agent/from-0.0.0-to-0.1.0.md index b00e1eeaa5e..251a096ed6c 100644 --- a/website/docs/migration-guides/yew-agent/0.0.0-to-0.1.0.md +++ b/website/docs/migration-guides/yew-agent/from-0.0.0-to-0.1.0.md @@ -1,5 +1,5 @@ --- -title: "0.0.0 to 0.1.0" +title: "From 0.0.0 to 0.1.0" --- This is the first release of `yew-agents` being separated from `yew` diff --git a/website/docs/migration-guides/yew-router/0.15.0-to-0.16.0.md b/website/docs/migration-guides/yew-router/from-0.15.0-to-0.16.0.md similarity index 88% rename from website/docs/migration-guides/yew-router/0.15.0-to-0.16.0.md rename to website/docs/migration-guides/yew-router/from-0.15.0-to-0.16.0.md index 55f7f6aaf46..aa454e1dc01 100644 --- a/website/docs/migration-guides/yew-router/0.15.0-to-0.16.0.md +++ b/website/docs/migration-guides/yew-router/from-0.15.0-to-0.16.0.md @@ -1,5 +1,5 @@ --- -title: "0.15.0 to 0.16.0" +title: "From 0.15.0 to 0.16.0" --- The router API has been completely redone in `0.16.0`. diff --git a/website/docs/migration-guides/yew/0.18.0-to-0.19.0.md b/website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md similarity index 98% rename from website/docs/migration-guides/yew/0.18.0-to-0.19.0.md rename to website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md index 224199eff39..faccf99edc0 100644 --- a/website/docs/migration-guides/yew/0.18.0-to-0.19.0.md +++ b/website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md @@ -1,5 +1,5 @@ --- -title: "0.18.0 to 0.19.0" +title: "From 0.18.0 to 0.19.0" --- `Yew 0.19.0` has changed a lot, thus this migration will not cover ALL of the changes. @@ -140,7 +140,7 @@ html! { ## New crate - yew-agent -Yew agents were removed to their separate crate, see [yew agents migration guide](./../yew-agent/0.0.0-to-0.1.0) +Yew agents were removed to their separate crate, see [yew agents migration guide](./../yew-agent/from-0.0.0-to-0.1.0) ## Ending note diff --git a/website/sidebars.js b/website/sidebars.js index 32698872761..f0afb0b4bac 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -112,17 +112,17 @@ module.exports = { { type: "category", label: "yew", - items: ["migration-guides/yew/0.18.0-to-0.19.0"], + items: ["migration-guides/yew/from-0.18.0-to-0.19.0"], }, { type: "category", label: "yew-agent", - items: ["migration-guides/yew-agent/0.0.0-to-0.1.0"], + items: ["migration-guides/yew-agent/from-0.0.0-to-0.1.0"], }, { type: "category", label: "yew-router", - items: ["migration-guides/yew-router/0.15.0-to-0.16.0"], + items: ["migration-guides/yew-router/from-0.15.0-to-0.16.0"], }, ], }, From c2b8caa7a0b64b3794a3ab38dc12d0c1502417ae Mon Sep 17 00:00:00 2001 From: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> Date: Sat, 27 Nov 2021 22:06:58 +0200 Subject: [PATCH 3/6] update 1 --- .../yew/from-0.18.0-to-0.19.0.md | 39 +++---------------- 1 file changed, 6 insertions(+), 33 deletions(-) diff --git a/website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md b/website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md index faccf99edc0..7bd8fb7c71a 100644 --- a/website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md +++ b/website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md @@ -41,6 +41,8 @@ html!{ There is a community provided regex to help with this change, though we cant promise it will work all the time. +It for sure breaks when it encounters closures, specifically `|_|` syntax. + find with `=(?![{">=\s])([^\s>` argument in lifetime methods that can later give you access to `ctx.props() -> &Properties` and `ctx.link() -> &Scope`. -You will need to remove `link` and `props` from your component struct fields. - -as such all lifetime methods got updated +You will need to remove `link` and `props` from your component struct fields as such all lifetime methods got updated. ### Lifetime methods in Component trait -The API looks like this now: - -```rust ,ignore -pub trait Component: Sized + 'static { - type Message: 'static; - type Properties: Properties; - - fn create(ctx: &Context) -> Self; - - #[allow(unused_variables)] - fn update(&mut self, ctx: &Context, msg: Self::Message) -> bool { - false - } - - #[allow(unused_variables)] - fn changed(&mut self, ctx: &Context) -> bool { - true - } - - fn view(&self, ctx: &Context) -> Html; - - #[allow(unused_variables)] - fn rendered(&mut self, ctx: &Context, first_render: bool) {} - - #[allow(unused_variables)] - fn destroy(&mut self, ctx: &Context) {} -} -``` +For new API look in the [Component trait](https://github.com/yewstack/yew/blob/9b6bc96826d53ec38aa3ecc02e3a1e132692c411/packages/yew/src/html/component/mod.rs#L37-L97) ## `web-sys` is no longer re-exported @@ -118,12 +91,12 @@ Remove this entirely. `yew-services` adds a layer a abstraction which makes it e `on*` event handlers in yew already handle it. Using this service is even more cumbersome because it requires use of `NodeRef` in order to call any functions provided by it. ```rust ,ignore -let callback = Callback::from(|e| { +let onkeydown = Callback::from(|e| { e.prevent_default(); todo!("use `e`, just like in service methods."); }); html! { - + } ``` From a6cbdb2e70bd73032978b0d5aa40bc87188fddc9 Mon Sep 17 00:00:00 2001 From: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> Date: Sat, 27 Nov 2021 22:08:37 +0200 Subject: [PATCH 4/6] fix tests? --- .../{from-0.0.0-to-0.1.0.md => from-0_0_0-to-0_1_0.md} | 0 .../{from-0.15.0-to-0.16.0.md => from-0_15_0-to-0_16_0.md} | 0 .../{from-0.18.0-to-0.19.0.md => from-0_18_0-to-0_19_0.md} | 0 website/sidebars.js | 6 +++--- 4 files changed, 3 insertions(+), 3 deletions(-) rename website/docs/migration-guides/yew-agent/{from-0.0.0-to-0.1.0.md => from-0_0_0-to-0_1_0.md} (100%) rename website/docs/migration-guides/yew-router/{from-0.15.0-to-0.16.0.md => from-0_15_0-to-0_16_0.md} (100%) rename website/docs/migration-guides/yew/{from-0.18.0-to-0.19.0.md => from-0_18_0-to-0_19_0.md} (100%) diff --git a/website/docs/migration-guides/yew-agent/from-0.0.0-to-0.1.0.md b/website/docs/migration-guides/yew-agent/from-0_0_0-to-0_1_0.md similarity index 100% rename from website/docs/migration-guides/yew-agent/from-0.0.0-to-0.1.0.md rename to website/docs/migration-guides/yew-agent/from-0_0_0-to-0_1_0.md diff --git a/website/docs/migration-guides/yew-router/from-0.15.0-to-0.16.0.md b/website/docs/migration-guides/yew-router/from-0_15_0-to-0_16_0.md similarity index 100% rename from website/docs/migration-guides/yew-router/from-0.15.0-to-0.16.0.md rename to website/docs/migration-guides/yew-router/from-0_15_0-to-0_16_0.md diff --git a/website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md b/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md similarity index 100% rename from website/docs/migration-guides/yew/from-0.18.0-to-0.19.0.md rename to website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md diff --git a/website/sidebars.js b/website/sidebars.js index f0afb0b4bac..b9f8b0e1268 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -112,17 +112,17 @@ module.exports = { { type: "category", label: "yew", - items: ["migration-guides/yew/from-0.18.0-to-0.19.0"], + items: ["migration-guides/yew/from-0_18_0-to-0_19_0"], }, { type: "category", label: "yew-agent", - items: ["migration-guides/yew-agent/from-0.0.0-to-0.1.0"], + items: ["migration-guides/yew-agent/from-0_0_0-to-0_1_0"], }, { type: "category", label: "yew-router", - items: ["migration-guides/yew-router/from-0.15.0-to-0.16.0"], + items: ["migration-guides/yew-router/from-0_15_0-to-0_16_0"], }, ], }, From 48c0003c65bba14927cd8a2aa236e5e001fd2030 Mon Sep 17 00:00:00 2001 From: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> Date: Sat, 27 Nov 2021 22:08:59 +0200 Subject: [PATCH 5/6] fix link --- website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md b/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md index 7bd8fb7c71a..ff49588a533 100644 --- a/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md +++ b/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md @@ -113,7 +113,7 @@ html! { ## New crate - yew-agent -Yew agents were removed to their separate crate, see [yew agents migration guide](./../yew-agent/from-0.0.0-to-0.1.0) +Yew agents were removed to their separate crate, see [yew agents migration guide](./../yew-agent/from-0_0_0-to-0_1_0) ## Ending note From 5afb8a61a8b9d6907abe06fffc759dcc21a4b17e Mon Sep 17 00:00:00 2001 From: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> Date: Sun, 28 Nov 2021 17:56:08 +0200 Subject: [PATCH 6/6] add tabs that will work after docosaurus update --- .../migration-guides/yew/from-0_18_0-to-0_19_0.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md b/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md index ff49588a533..244c2e52c63 100644 --- a/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md +++ b/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md @@ -2,6 +2,9 @@ title: "From 0.18.0 to 0.19.0" --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + `Yew 0.19.0` has changed a lot, thus this migration will not cover ALL of the changes. Instead only the most impacting changes are mentioned and the rest should be picked up by cargo. @@ -10,6 +13,9 @@ Instead only the most impacting changes are mentioned and the rest should be pic Put it simply almost all the time you have to provide braces for props: + + + ```rust {4}, ignore let super_age = 1; html!{ @@ -19,6 +25,9 @@ html!{ } ``` + + + ```rust {4}, ignore let super_age = 1; html!{ @@ -28,6 +37,9 @@ html!{ } ``` + + + Also now you can use a shorthand if prop and variable names are the same: ```rust {4}, ignore @@ -39,6 +51,9 @@ html!{ } ``` + + + There is a community provided regex to help with this change, though we cant promise it will work all the time. It for sure breaks when it encounters closures, specifically `|_|` syntax.