You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/advanced-topics/portals.mdx
+10-3Lines changed: 10 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,17 +3,24 @@ title: "Portals"
3
3
description: "Rendering into out-of-tree DOM nodes"
4
4
---
5
5
6
-
## How to think about portals?
6
+
## What is a portal?
7
7
8
8
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
9
9
`yew::create_portal(child, host)` returns a `Html` value that renders `child` not hierarchically under its parent component,
10
10
but as a child of the `host` element.
11
11
12
12
## Usage
13
13
14
-
Typical uses of portals can include modal dialogs and hovercards, as well as more technical applications such as controlling the contents of an element's [`shadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot), appending stylesheets to the surrounding document's `<head>` and collecting referenced elements inside a central `<defs>` element of an `<svg>`.
14
+
Typical uses of portals can include modal dialogs and hovercards, as well as more technical applications
stylesheets to the surrounding document's `<head>` and collecting referenced elements inside a
18
+
central `<defs>` element of an `<svg>`.
15
19
16
-
Note that `yew::create_portal` is a rather low-level building block, on which other components should be built that provide the interface for your specific use case. As an example, here is a simple modal dialogue that renders its `children` into an element outside `yew`'s control, identified by the `id="modal_host"`.
20
+
Note that `yew::create_portal` is a low-level building block. Libraries should use it to implement
21
+
higher-level APIs which can then be consumed by applications. For example, here is a
22
+
simple modal dialogue that renders its `children` into an element outside `yew`'s control,
Copy file name to clipboardExpand all lines: website/docs/getting-started/build-a-sample-app.mdx
+10-7Lines changed: 10 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,13 +31,15 @@ cd yew-app
31
31
32
32
### Run a hello world example
33
33
34
-
To verify the Rust environment is setup, run the initial project using the cargo build tool. After output about the build process, you should see the expected "Hello World" message.
34
+
To verify the Rust environment is setup, run the initial project using `cargo run`. You should see
35
+
a "Hello World!" message.
35
36
36
37
```bash
37
38
cargo run
39
+
# output: Hello World!
38
40
```
39
41
40
-
### Converting the project into a Yew web application
42
+
### Setting up the project as a Yew web application
41
43
42
44
To convert this simple command line application to a basic Yew web application, a few changes are needed.
43
45
@@ -58,12 +60,13 @@ yew = "0.19"
58
60
59
61
#### Update main.rs
60
62
61
-
We need to generate a template which sets up a root Component called `App` which renders a button that updates its value when clicked.
62
-
Replace the contents of `src/main.rs` with the following code.
63
+
We need to generate a template which sets up a root Component called `App` which renders a button
64
+
that updates its value when clicked. Replace the contents of `src/main.rs` with the following code.
63
65
64
66
:::note
65
-
The line `yew::start_app::<App>()` inside `main()` starts your application and mounts it to the page's `<body>` tag.
66
-
If you would like to start your application with any dynamic properties, you can instead use `yew::start_app_with_props::<App>(..)`.
67
+
The call to `yew::start_app::<App>()` inside the `main` function starts your application and mounts
68
+
it to the page's `<body>` tag. If you would like to start your application with any dynamic
69
+
properties, you can instead use `yew::start_app_with_props::<App>(..)`.
67
70
:::
68
71
69
72
```rust ,no_run, title=main.rs
@@ -115,7 +118,7 @@ Run the following command to build and serve the application locally.
115
118
trunk serve
116
119
```
117
120
118
-
Trunk will helpfully rebuild your application if you modify any of its files.
121
+
Trunk will rebuild your application if you modify any of its source code files.
Copy file name to clipboardExpand all lines: website/docs/migration-guides/yew-agent/from-0_1_0-to-0_2_0.mdx
+3-2Lines changed: 3 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,11 +6,12 @@ title: "From 0.1.0 to 0.2.0"
6
6
7
7
The `Context` and `Job` Agents have been removed in favour of Yew's Context API.
8
8
9
-
You can see the updated [`pub_sub`](https://github.com/yewstack/yew/tree/master/examples/pub_sub) example about how to use Context API.
9
+
You can see the updated [`pub_sub`](https://github.com/yewstack/yew/tree/master/examples/pub_sub)
10
+
which demonstrate how to use the context API.
10
11
11
12
For users of `yew_agent::utils::store`, you may switch to third party solutions like: [Yewdux](https://github.com/intendednull/yewdux) or [Bounce](https://github.com/futursolo/bounce).
12
13
13
-
## `Threaded`is separated into `PublicAgent` and `PrivateAgent`
14
+
## `Threaded`has been separated into `PublicAgent` and `PrivateAgent`
14
15
15
16
Replace `use yew_agent::Threaded;` with `use yew_agent::PublicAgent;`.
Copy file name to clipboardExpand all lines: website/docs/migration-guides/yew-router/from-0_15_0-to-0_16_0.mdx
+4-2Lines changed: 4 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,8 @@
2
2
title: "From 0.15.0 to 0.16.0"
3
3
---
4
4
5
-
The router API has been completely redone in `0.16.0`.
5
+
The router API has been completely rewritten in `0.16.0`.
6
6
7
-
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.
7
+
Because it is such a radical change, there are too many things to list out here, so we highly
8
+
recommend to read the updated [router documentation](./../../concepts/router) and adapt your app
Copy file name to clipboardExpand all lines: website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.mdx
+14-10Lines changed: 14 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,12 @@ import TabItem from '@theme/TabItem';
7
7
8
8
`Yew 0.19.0` has changed a lot, thus this migration will not cover ALL of the changes.
9
9
10
-
Instead only the most impacting changes are mentioned and the rest should be picked up by cargo.
10
+
Instead only the most impactful changes are mentioned and the rest should be picked up by `cargo`.
11
11
12
-
## html! requirement for braces around most props
12
+
## `html!` requirement for braces around most props
13
13
14
-
Put it simply almost all the time you have to provide braces for props:
14
+
The syntax of the `html!` macro has been updated, such that in most cases you will need to enclose
15
+
props with braces.
15
16
16
17
<Tabs>
17
18
<TabItemvalue="Invalid"label="Invalid">
@@ -40,7 +41,7 @@ html!{
40
41
</TabItem>
41
42
<TabItemvalue="Shorthand"label="Shorthand">
42
43
43
-
Also now you can use a shorthand if prop and variable names are the same:
44
+
Shorthand initialization has been added:
44
45
45
46
```rust {4}, ignore
46
47
letage=1;
@@ -54,19 +55,21 @@ html!{
54
55
</TabItem>
55
56
</Tabs>
56
57
57
-
There is a community provided regex to help with this change, though we cant promise it will work all the time.
58
+
There is a community provided regex to help automate the update, though we can't promise it will work
59
+
all the time.
58
60
59
-
It for sure breaks when it encounters closures, specifically `|_|` syntax.
61
+
It breaks when it encounters closures (specifically the `|_|` syntax).
60
62
61
63
find with `=(?![{">=\s])([^\s></]*(\s!{0,1}[=|&]{2}\s[^\s></]*)*)`
62
64
63
65
replace with `={$1}`
64
66
65
67
## Function components
66
68
67
-
[Function components](./../../concepts/function-components/introduction) are a brand new way to write components that require less boilerplate than their structural counter part.
69
+
[Function components](./../../concepts/function-components/introduction) are a brand new way to write components that
70
+
requires less boilerplate than their structural counterpart.
68
71
69
-
While this change does not force you to change your codebase, this migration time is a good opportunity to start using them in your codebase.
72
+
While this change does not force you to change your codebase, as you migrate from `0.18` to `0.19`, this migration time might present a good opportunity to start using them in your codebase.
70
73
71
74
## Struct components lifecycle methods and ctx
72
75
@@ -128,8 +131,9 @@ html! {
128
131
129
132
## New crate - yew-agent
130
133
131
-
Yew agents were removed to their separate crate, see [yew agents migration guide](./../yew-agent/from-0_0_0-to-0_1_0)
134
+
Yew agents were removed to a separate crate, see [yew agents migration guide](./../yew-agent/from-0_0_0-to-0_1_0)
132
135
133
136
## Ending note
134
137
135
-
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.
138
+
We are sorry if some things are not covered in this guide as it was truly a huge update and we hope
139
+
that the uncovered issues will be clearly explained in error messages emitted by the Rust compiler.
0 commit comments