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 new file mode 100644 index 00000000000..251a096ed6c --- /dev/null +++ b/website/docs/migration-guides/yew-agent/from-0_0_0-to-0_1_0.md @@ -0,0 +1,7 @@ +--- +title: "From 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/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 new file mode 100644 index 00000000000..aa454e1dc01 --- /dev/null +++ b/website/docs/migration-guides/yew-router/from-0_15_0-to-0_16_0.md @@ -0,0 +1,7 @@ +--- +title: "From 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/from-0_18_0-to-0_19_0.md b/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md new file mode 100644 index 00000000000..244c2e52c63 --- /dev/null +++ b/website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.md @@ -0,0 +1,135 @@ +--- +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. + +## 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. + +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. + +### Lifetime methods in Component trait + +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 + +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 onkeydown = 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/from-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 ec97e5bd6b1..d90d6e371d4 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -10,104 +10,125 @@ */ 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/introduction', - 'getting-started/project-setup/using-trunk', - 'getting-started/project-setup/using-wasm-pack', - ] - } - ], + type: "category", + label: "Project Setup", + items: [ + "getting-started/project-setup/introduction", + "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/introduction", - "concepts/wasm-bindgen/web-sys", - ] - }, - { - type: "category", - label: "Components", - items: [ - "concepts/components/introduction", - "concepts/components/callbacks", - "concepts/components/properties", - "concepts/components/children", - "concepts/components/refs" - ], - }, - { - type: "category", - label: "HTML", - items: [ - "concepts/html/introduction", - "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/introduction", - "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/introduction", + "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/introduction", + "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/introduction", + "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/introduction", + "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/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"], + }, + { + type: "category", + label: "yew-router", + items: ["migration-guides/yew-router/from-0_15_0-to-0_16_0"], + }, + ], + }, + "tutorial", + ], };