Skip to content

Commit

Permalink
Fix some minor issues with the guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@ealmloff
ealmloff committed Jan 10, 2025
1 parent d99148f commit ad86ec8
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 20 deletions.
12 changes: 6 additions & 6 deletions docs-src/0.6/src/guide/backend.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,22 @@ Before we can start using server functions, we need to enable the "fullstack" fe
dioxus = { version = "0.6.0", features = ["fullstack"] }
```

We also need to add the "server" feature to our app's features, also in the Cargo.toml
We also need to add the "server" feature to our app's features in the Cargo.toml and remove the default web target.

```toml
[features]
default = ["web"]
default = [] # <----- remove the default web target
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]
mobile = ["dioxus/mobile"]
server = ["dioxus/server"] # <----- add this additional platform
server = ["dioxus/server"] # <----- add this additional target
```

If you selected _yes_ to the "use fullstack?" prompt when creating your app, you will already have this set up!

> 📣 Unfortunately, `dx` doesn't know how to hot-reload this change, so we'll need to kill our currently running `dx serve` process and launch it again.
Give your app a moment to build again and make sure that the "fullstack" feature is enabled in `dx serve`.
Now instead of running `dx serve`, you need to run with a manual platform with `dx serve --platform web`. Give your app a moment to build again and make sure that the "fullstack" feature is enabled in the dashboard.

![Fullstack Enabled](/assets/06_docs/serve_with_fullstack.png)

Expand Down Expand Up @@ -91,10 +91,10 @@ Instead, we recommend placing server-only code within modules configured for the
{{#include src/doc_examples/guide_backend.rs:server_client_split_fixed}}
```

While Dioxus expects a "server" feature, it does not expect a "client" feature. It is assumed that all client code will make it to the server. However, some libraries like web-sys only work when running in the browser, so make sure to not run specific client code in your server functions or before your `launch`.
In addition to the "server" feature, Dioxus expects a client side rendering feature like "web" or "desktop". Some libraries like web-sys only work when running in the browser, so make sure to not run specific client code in your server functions or before your `launch`. You can place client only code under a config for a client target feature like "web".

```rust
{{#include src/doc_examples/guide_backend.rs:server_client_split_broken_client_broken}}
{{#include src/doc_examples/guide_backend.rs:server_client_split_client}}
```

## Managing Dependencies
Expand Down
4 changes: 2 additions & 2 deletions docs-src/0.6/src/guide/state.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Before we get too far, let's split our app into two parts: the `Title` and the `

## Event Handlers

In the `DogView` component, we want to attach an action to the click of the buttons. For example: skipping or saving the current dog photo. We can use an [EventListener](../reference/event_handlers.md) to listen for the `click` events.
In the `DogView` component, we want to attach an action to the click of the buttons. For example: skipping or saving the current dog photo. We can use an [EventHandler](../reference/event_handlers.md) to listen for the `click` events.

Event handlers are similar to regular attributes, but their name usually starts with `on` - and they accept closures as values. The closure will be called whenever its corresponding event is triggered. The listener receives information about the event in the [Event](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Event.html) object.

Expand Down Expand Up @@ -44,7 +44,7 @@ While `use_hook` makes it possible to store any value that implements `Clone`, y

`Signal` is a wrapper type around an ordinary Rust value that tracks reads and writes, bringing your app to life. You can wrap any Rust value in a signal. Signals can be created manually with `Signal::new()` but we strongly recommend using the `use_signal` hook instead.

> 📣 Manually creating Signals requires remembering to call `.dispose()` on the signal whereas `use_signal` cleans the Signal up for you automatically.
> 📣 Manually creating Signals requires remembering to call `.manually_drop()` on the signal whereas `use_signal` cleans the Signal up for you automatically.
Whenever a signal's value changes, its containing "reactive scope" will be "marked dirty" and re-run. By default, Dioxus components are reactive scopes, and thus, will re-render whenever a signal value changes.

Expand Down
9 changes: 6 additions & 3 deletions src/doc_examples/guide_backend.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,23 +123,26 @@ mod server_client_split_fixed {
// ANCHOR_END: server_client_split_fixed
}

mod server_client_split_client_broken {
mod server_client_split_client {
use dioxus::prelude::*;

fn App() -> Element {
rsx! { "hello world" }
}

// ANCHOR: server_client_split_broken_client_broken
// ANCHOR: server_client_split_client
fn main() {
// ❌ attempting to use web_sys on the server will panic!
let window = web_sys::window();
// ✅ moving the web-sys call under the web feature flag will make sure it only runs in the browser
#[cfg(feature = "web")]
let window = web_sys::window();

// ..

dioxus::launch(App);
}
// ANCHOR_END: server_client_split_broken_client_broken
// ANCHOR_END: server_client_split_client
}

mod save_dog_v2 {
Expand Down
22 changes: 13 additions & 9 deletions src/docs/router_06.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5976,7 +5976,7 @@ pub fn GuideState() -> dioxus::prelude::Element {
"In the "
code { "DogView" }
" component, we want to attach an action to the click of the buttons. For example: skipping or saving the current dog photo. We can use an "
a { href: "../reference/event_handlers", "EventListener" }
a { href: "../reference/event_handlers", "EventHandler" }
" to listen for the "
code { "click" }
" events."
Expand Down Expand Up @@ -6066,7 +6066,7 @@ pub fn GuideState() -> dioxus::prelude::Element {
blockquote {
p {
"📣 Manually creating Signals requires remembering to call "
code { ".dispose()" }
code { ".manually_drop()" }
" on the signal whereas "
code { "use_signal" }
" cleans the Signal up for you automatically."
Expand Down Expand Up @@ -6381,9 +6381,11 @@ pub fn GuideBackend() -> dioxus::prelude::Element {
"Before we can start using server functions, we need to enable the \"fullstack\" feature on Dioxus in our Cargo.toml."
}
CodeBlock { contents: "<pre style=\"background-color:#0d0d0d;\">\n<span style=\"color:#f8f8f2;\">[dependencies]\n</span><span style=\"color:#f8f8f2;\">dioxus </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">{{ version </span><span style=\"color:#f92672;\">= </span><span style=\"color:#ffee99;\">&quot;0.6.0&quot;</span><span style=\"color:#f8f8f2;\">, features </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;fullstack&quot;</span><span style=\"color:#f8f8f2;\">] }}</span></pre>\n" }
p { "We also need to add the \"server\" feature to our app's features, also in the Cargo.toml" }
p {
"We also need to add the \"server\" feature to our app's features in the Cargo.toml and remove the default web target."
}
CodeBlock {
contents: "<pre style=\"background-color:#0d0d0d;\">\n<span style=\"color:#f8f8f2;\">[features]\n</span><span style=\"color:#f8f8f2;\">default </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;web&quot;</span><span style=\"color:#f8f8f2;\">]\n</span><span style=\"color:#f8f8f2;\">web </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;dioxus/web&quot;</span><span style=\"color:#f8f8f2;\">]\n</span><span style=\"color:#f8f8f2;\">desktop </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;dioxus/desktop&quot;</span><span style=\"color:#f8f8f2;\">]\n</span><span style=\"color:#f8f8f2;\">mobile </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;dioxus/mobile&quot;</span><span style=\"color:#f8f8f2;\">]\n</span><span style=\"color:#f8f8f2;\">server </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;dioxus/server&quot;</span><span style=\"color:#f8f8f2;\">] </span><span style=\"color:#f92672;\"># &lt;-----</span><span style=\"color:#f8f8f2;\"> add this additional platform</span></pre>\n",
contents: "<pre style=\"background-color:#0d0d0d;\">\n<span style=\"color:#f8f8f2;\">[features]\n</span><span style=\"color:#f8f8f2;\">default </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[] </span><span style=\"color:#f92672;\"># &lt;-----</span><span style=\"color:#f8f8f2;\"> remove the default web target\n</span><span style=\"color:#f8f8f2;\">web </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;dioxus/web&quot;</span><span style=\"color:#f8f8f2;\">]\n</span><span style=\"color:#f8f8f2;\">desktop </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;dioxus/desktop&quot;</span><span style=\"color:#f8f8f2;\">]\n</span><span style=\"color:#f8f8f2;\">mobile </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;dioxus/mobile&quot;</span><span style=\"color:#f8f8f2;\">]\n</span><span style=\"color:#f8f8f2;\">server </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">[</span><span style=\"color:#ffee99;\">&quot;dioxus/server&quot;</span><span style=\"color:#f8f8f2;\">] </span><span style=\"color:#f92672;\"># &lt;-----</span><span style=\"color:#f8f8f2;\"> add this additional target</span></pre>\n",
}
p {
"If you selected "
Expand All @@ -6400,9 +6402,11 @@ pub fn GuideBackend() -> dioxus::prelude::Element {
}
}
p {
"Give your app a moment to build again and make sure that the \"fullstack\" feature is enabled in "
"Now instead of running "
code { "dx serve" }
"."
", you need to run with a manual platform with "
code { "dx serve --platform web" }
". Give your app a moment to build again and make sure that the \"fullstack\" feature is enabled in the dashboard."
}
p {
img {
Expand Down Expand Up @@ -6534,12 +6538,12 @@ pub fn GuideBackend() -> dioxus::prelude::Element {
name: "guide_backend.rs".to_string(),
}
p {
"While Dioxus expects a \"server\" feature, it does not expect a \"client\" feature. It is assumed that all client code will make it to the server. However, some libraries like web-sys only work when running in the browser, so make sure to not run specific client code in your server functions or before your "
"In addition to the \"server\" feature, Dioxus expects a client side rendering feature like \"web\" or \"desktop\". Some libraries like web-sys only work when running in the browser, so make sure to not run specific client code in your server functions or before your "
code { "launch" }
"."
". You can place client only code under a config for a client target feature like \"web\"."
}
CodeBlock {
contents: "<pre style=\"background-color:#0d0d0d;\">\n<span style=\"font-style:italic;color:#66d9ef;\">fn </span><span style=\"color:#a6e22e;\">main</span><span style=\"color:#f8f8f2;\">() {{\n</span><span style=\"color:#f8f8f2;\"> </span><span style=\"color:#8c8c8c;\">// ❌ attempting to use web_sys on the server will panic!\n</span><span style=\"color:#f8f8f2;\"> </span><span style=\"font-style:italic;color:#66d9ef;\">let</span><span style=\"color:#f8f8f2;\"> window </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">web_sys::window();\n</span><span style=\"color:#f8f8f2;\">\n</span><span style=\"color:#f8f8f2;\"> </span><span style=\"color:#8c8c8c;\">// ..\n</span><span style=\"color:#f8f8f2;\">\n</span><span style=\"color:#f8f8f2;\"> dioxus::launch(App);\n</span><span style=\"color:#f8f8f2;\">}}</span></pre>\n",
contents: "<pre style=\"background-color:#0d0d0d;\">\n<span style=\"font-style:italic;color:#66d9ef;\">fn </span><span style=\"color:#a6e22e;\">main</span><span style=\"color:#f8f8f2;\">() {{\n</span><span style=\"color:#f8f8f2;\"> </span><span style=\"color:#8c8c8c;\">// ❌ attempting to use web_sys on the server will panic!\n</span><span style=\"color:#f8f8f2;\"> </span><span style=\"font-style:italic;color:#66d9ef;\">let</span><span style=\"color:#f8f8f2;\"> window </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">web_sys::window();\n</span><span style=\"color:#f8f8f2;\"> </span><span style=\"color:#8c8c8c;\">// ✅ moving the web-sys call under the web feature flag will make sure it only runs in the browser\n</span><span style=\"color:#f8f8f2;\"> #[cfg(feature </span><span style=\"color:#f92672;\">= </span><span style=\"color:#ffee99;\">&quot;web&quot;</span><span style=\"color:#f8f8f2;\">)]\n</span><span style=\"color:#f8f8f2;\"> </span><span style=\"font-style:italic;color:#66d9ef;\">let</span><span style=\"color:#f8f8f2;\"> window </span><span style=\"color:#f92672;\">= </span><span style=\"color:#f8f8f2;\">web_sys::window();\n</span><span style=\"color:#f8f8f2;\">\n</span><span style=\"color:#f8f8f2;\"> </span><span style=\"color:#8c8c8c;\">// ..\n</span><span style=\"color:#f8f8f2;\">\n</span><span style=\"color:#f8f8f2;\"> dioxus::launch(App);\n</span><span style=\"color:#f8f8f2;\">}}</span></pre>\n",
name: "guide_backend.rs".to_string(),
}
h2 { id: "managing-dependencies",
Expand Down

0 comments on commit ad86ec8

Please sign in to comment.