Merge pull request #663 from Demonthos/doc-fixes
remove references to renderer features that do not exist
This commit is contained in:
16 files changed
+39
-69
No files matched your search
@@ -12,18 +12,3 @@ While it is possible to share state between components, this should only be done
|
|||||||
|
|
||||||
- Keep state local to a component if possible
|
- Keep state local to a component if possible
|
||||||
- When sharing state through props, only pass down the specific data necessary
|
- When sharing state through props, only pass down the specific data necessary
|
||||||
|
|
||||||
## Reusable Libraries
|
|
||||||
|
|
||||||
When publishing a library designed to work with Dioxus, we highly advise using only the core feature on the `dioxus` crate. This makes your crate compile faster, makes it more stable, and avoids bringing in incompatible libraries that might make it not compile on unsupported platforms.
|
|
||||||
|
|
||||||
|
|
||||||
❌ Don't include unnecessary dependencies in libraries:
|
|
||||||
```toml
|
|
||||||
dioxus = { version = "...", features = ["web", "desktop", "full"]}
|
|
||||||
```
|
|
||||||
|
|
||||||
✅ Only add the features you need:
|
|
||||||
```toml
|
|
||||||
dioxus = { version = "...", features = "core"}
|
|
||||||
```
|
|
||||||
@@ -25,19 +25,13 @@ cargo new --bin demo
|
|||||||
cd demo
|
cd demo
|
||||||
```
|
```
|
||||||
|
|
||||||
Add Dioxus with the `desktop` feature (this will edit `Cargo.toml`):
|
Add Dioxus and the `desktop` renderer (this will edit `Cargo.toml`):
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
cargo add dioxus --features desktop
|
cargo add dioxus
|
||||||
|
cargo add dioxus-desktop
|
||||||
```
|
```
|
||||||
|
|
||||||
> If your system does not provide the `libappindicator3` library, like Debian/bullseye, you can enable the replacement `ayatana` with an additional flag:
|
|
||||||
>
|
|
||||||
>```shell
|
|
||||||
># On Debian/bullseye use:
|
|
||||||
>cargo add dioxus --features desktop --features ayatana
|
|
||||||
>```
|
|
||||||
|
|
||||||
Edit your `main.rs`:
|
Edit your `main.rs`:
|
||||||
|
|
||||||
```rust
|
```rust
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
Install [dioxus-cli](https://github.com/DioxusLabs/cli).
|
Install [dioxus-cli](https://github.com/DioxusLabs/cli).
|
||||||
Enable the hot-reload feature on dioxus:
|
Enable the hot-reload feature on dioxus:
|
||||||
```toml
|
```toml
|
||||||
dioxus = { version = "*", features = ["web", "hot-reload"] }
|
dioxus = { version = "*", features = ["hot-reload"] }
|
||||||
```
|
```
|
||||||
|
|
||||||
# Usage
|
# Usage
|
||||||
|
|||||||
@@ -52,7 +52,8 @@ path = "gen/bin/desktop.rs"
|
|||||||
# clear all the dependencies
|
# clear all the dependencies
|
||||||
[dependencies]
|
[dependencies]
|
||||||
mobile-entry-point = "0.1.0"
|
mobile-entry-point = "0.1.0"
|
||||||
dioxus = { version = "*", features = ["mobile"] }
|
dioxus = { version = "*"}
|
||||||
|
dioxus-desktop = { version = "*" }
|
||||||
simple_logger = "*"
|
simple_logger = "*"
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -62,7 +63,7 @@ Edit your `lib.rs`:
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
dioxus_mobile::launch(app);
|
dioxus_desktop::launch(app);
|
||||||
}
|
}
|
||||||
|
|
||||||
fn app(cx: Scope) -> Element {
|
fn app(cx: Scope) -> Element {
|
||||||
|
|||||||
@@ -36,10 +36,11 @@ cargo new --bin demo
|
|||||||
cd app
|
cd app
|
||||||
```
|
```
|
||||||
|
|
||||||
Add Dioxus with the `ssr` feature:
|
Add Dioxus and the `ssr` renderer feature:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
cargo add dioxus --features ssr
|
cargo add dioxus
|
||||||
|
cargo add dioxus-ssr
|
||||||
```
|
```
|
||||||
|
|
||||||
Next, add all the Axum dependencies. This will be different if you're using a different Web Framework
|
Next, add all the Axum dependencies. This will be different if you're using a different Web Framework
|
||||||
@@ -54,7 +55,8 @@ Your dependencies should look roughly like this:
|
|||||||
```toml
|
```toml
|
||||||
[dependencies]
|
[dependencies]
|
||||||
axum = "0.4.5"
|
axum = "0.4.5"
|
||||||
dioxus = { version = "*", features = ["ssr"] }
|
dioxus = { version = "*" }
|
||||||
|
dioxus-ssr = { version = "*" }
|
||||||
tokio = { version = "1.15.0", features = ["full"] }
|
tokio = { version = "1.15.0", features = ["full"] }
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -13,12 +13,13 @@ TUI support is currently quite experimental. Even the project name will change.
|
|||||||
## Getting Set up
|
## Getting Set up
|
||||||
|
|
||||||
|
|
||||||
Start by making a new package and adding our TUI feature.
|
Start by making a new package and adding our TUI renderer.
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
cargo new --bin demo
|
cargo new --bin demo
|
||||||
cd demo
|
cd demo
|
||||||
cargo add dioxus --features tui
|
cargo add dioxus
|
||||||
|
cargo add dioxus-tui
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, edit your `main.rs` with the basic template.
|
Then, edit your `main.rs` with the basic template.
|
||||||
@@ -42,5 +43,6 @@ Press "ctrl-c" to close the app. To switch from "ctrl-c" to just "q" to quit yo
|
|||||||
## Notes
|
## Notes
|
||||||
|
|
||||||
- Our TUI package uses flexbox for layout
|
- Our TUI package uses flexbox for layout
|
||||||
|
- Regular widgets will not work in the tui render, but the tui renderer has it's own widget components (see [the widgets example](https://github.com/DioxusLabs/dioxus/blob/master/packages/tui/examples/tui_widgets.rs)).
|
||||||
- 1px is one character lineheight. Your regular CSS px does not translate.
|
- 1px is one character lineheight. Your regular CSS px does not translate.
|
||||||
- If your app panics, your terminal is wrecked. This will be fixed eventually.
|
- If your app panics, your terminal is wrecked. This will be fixed eventually.
|
||||||
@@ -38,10 +38,11 @@ cargo new --bin demo
|
|||||||
cd demo
|
cd demo
|
||||||
```
|
```
|
||||||
|
|
||||||
Add Dioxus as a dependency with the `web` feature:
|
Add Dioxus as a dependency and add the web renderer:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cargo add dioxus --features web
|
cargo add dioxus
|
||||||
|
cargo add dioxus-web
|
||||||
```
|
```
|
||||||
|
|
||||||
Add an `index.html` for Trunk to use. Make sure your "mount point" element has an ID of "main":
|
Add an `index.html` for Trunk to use. Make sure your "mount point" element has an ID of "main":
|
||||||
|
|||||||
@@ -19,7 +19,8 @@ This is where the router crates come in handy. To make sure we're using the rout
|
|||||||
|
|
||||||
```toml
|
```toml
|
||||||
[dependencies]
|
[dependencies]
|
||||||
dioxus = { version = "0.2", features = ["desktop", "router"] }
|
dioxus = { version = "*" }
|
||||||
|
dioxus-router = { version = "*" }
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -12,19 +12,3 @@ Embora seja possível compartilhar o estado entre os componentes, isso só deve
|
|||||||
|
|
||||||
- Mantenha o estado local para um componente, se possível
|
- Mantenha o estado local para um componente, se possível
|
||||||
- Ao compartilhar o estado por meio de adereços, passe apenas os dados específicos necessários
|
- Ao compartilhar o estado por meio de adereços, passe apenas os dados específicos necessários
|
||||||
|
|
||||||
## Bibliotecas Reutilizáveis
|
|
||||||
|
|
||||||
Ao publicar uma biblioteca projetada para funcionar com o Dioxus, é altamente recomendável usar apenas o recurso principal na `crate` `dioxus`. Isso faz com que sua `crate` seja compilada mais rapidamente, mais estável e evita a inclusão de bibliotecas incompatíveis que podem fazer com que ela não seja compilada em plataformas não suportadas.
|
|
||||||
|
|
||||||
❌ Não inclua dependências desnecessárias nas bibliotecas:
|
|
||||||
|
|
||||||
```toml
|
|
||||||
dioxus = { version = "...", features = ["web", "desktop", "full"]}
|
|
||||||
```
|
|
||||||
|
|
||||||
✅ Adicione apenas os recursos que você precisa:
|
|
||||||
|
|
||||||
```toml
|
|
||||||
dioxus = { version = "...", features = "core"}
|
|
||||||
```
|
|
||||||
@@ -29,16 +29,10 @@ cd demo
|
|||||||
Adicione o Dioxus com o recurso `desktop` (isso irá editar o `Cargo.toml`):
|
Adicione o Dioxus com o recurso `desktop` (isso irá editar o `Cargo.toml`):
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
cargo add dioxus --features desktop
|
cargo add dioxus
|
||||||
|
cargo add dioxus-desktop
|
||||||
```
|
```
|
||||||
|
|
||||||
> Se seu sistema não fornece a biblioteca `libappindicator3`, como Debian/bullseye, você pode habilitar a substituta `ayatana` com um _flag_ adicional:
|
|
||||||
>
|
|
||||||
> ```shell
|
|
||||||
> # On Debian/bullseye use:
|
|
||||||
> cargo add dioxus --features desktop --features ayatana
|
|
||||||
> ```
|
|
||||||
|
|
||||||
Edite seu `main.rs`:
|
Edite seu `main.rs`:
|
||||||
|
|
||||||
```rust
|
```rust
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ Instale o [dioxus-cli](https://github.com/DioxusLabs/cli).
|
|||||||
Habilite o recurso de _hot-reload_ no dioxus:
|
Habilite o recurso de _hot-reload_ no dioxus:
|
||||||
|
|
||||||
```toml
|
```toml
|
||||||
dioxus = { version = "*", features = ["web", "hot-reload"] }
|
dioxus = { version = "*", features = ["hot-reload"] }
|
||||||
```
|
```
|
||||||
|
|
||||||
# Usage
|
# Usage
|
||||||
|
|||||||
@@ -52,7 +52,8 @@ path = "gen/bin/desktop.rs"
|
|||||||
# clear all the dependencies
|
# clear all the dependencies
|
||||||
[dependencies]
|
[dependencies]
|
||||||
mobile-entry-point = "0.1.0"
|
mobile-entry-point = "0.1.0"
|
||||||
dioxus = { version = "*", features = ["mobile"] }
|
dioxus = { version = "*" }
|
||||||
|
dioxus-desktop = { version = "*" }
|
||||||
simple_logger = "*"
|
simple_logger = "*"
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -62,7 +63,7 @@ Edite seu `lib.rs`:
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
dioxus::mobile::launch(app);
|
dioxus_desktop::launch(app);
|
||||||
}
|
}
|
||||||
|
|
||||||
fn app(cx: Scope) -> Element {
|
fn app(cx: Scope) -> Element {
|
||||||
|
|||||||
@@ -38,7 +38,8 @@ cd app
|
|||||||
Adicione o Dioxus com o recurso `ssr`:
|
Adicione o Dioxus com o recurso `ssr`:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
cargo add dioxus --features ssr
|
cargo add dioxus
|
||||||
|
cargo add dioxus-ssr
|
||||||
```
|
```
|
||||||
|
|
||||||
Em seguida, adicione todas as dependências do Axum. Isso será diferente se você estiver usando um Web Framework diferente
|
Em seguida, adicione todas as dependências do Axum. Isso será diferente se você estiver usando um Web Framework diferente
|
||||||
@@ -53,7 +54,8 @@ Suas dependências devem ficar mais ou menos assim:
|
|||||||
```toml
|
```toml
|
||||||
[dependencies]
|
[dependencies]
|
||||||
axum = "0.4.5"
|
axum = "0.4.5"
|
||||||
dioxus = { version = "*", features = ["ssr"] }
|
dioxus = { version = "*" }
|
||||||
|
dioxus-ssr = { version = "*" }
|
||||||
tokio = { version = "1.15.0", features = ["full"] }
|
tokio = { version = "1.15.0", features = ["full"] }
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -83,7 +85,7 @@ E, em seguida, adicione nosso _endpoint_. Podemos renderizar `rsx!` diretamente:
|
|||||||
|
|
||||||
```rust
|
```rust
|
||||||
async fn app_endpoint() -> Html<String> {
|
async fn app_endpoint() -> Html<String> {
|
||||||
Html(dioxus::ssr::render_lazy(rsx! {
|
Html(dioxus_ssr::render_lazy(rsx! {
|
||||||
h1 { "hello world!" }
|
h1 { "hello world!" }
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
@@ -99,7 +101,7 @@ async fn app_endpoint() -> Html<String> {
|
|||||||
let mut app = VirtualDom::new(app);
|
let mut app = VirtualDom::new(app);
|
||||||
let _ = app.rebuild();
|
let _ = app.rebuild();
|
||||||
|
|
||||||
Html(dioxus::ssr::render_vdom(&app))
|
Html(dioxus_ssr::render_vdom(&app))
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,8 @@ Comece criando um novo pacote e adicionando nosso recurso TUI.
|
|||||||
```shell
|
```shell
|
||||||
cargo new --bin demo
|
cargo new --bin demo
|
||||||
cd demo
|
cd demo
|
||||||
cargo add dioxus --features tui
|
cargo add dioxus
|
||||||
|
cargo add dioxus-tui
|
||||||
```
|
```
|
||||||
|
|
||||||
Em seguida, edite seu `main.rs` com o modelo básico.
|
Em seguida, edite seu `main.rs` com o modelo básico.
|
||||||
|
|||||||
@@ -43,7 +43,8 @@ cd demo
|
|||||||
Adicione o Dioxus como uma dependência com o recurso `web`:
|
Adicione o Dioxus como uma dependência com o recurso `web`:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cargo add dioxus --features web
|
cargo add dioxus
|
||||||
|
cargo add dioxus-web
|
||||||
```
|
```
|
||||||
|
|
||||||
Adicione um `index.html` para o `Trunk` usar. Certifique-se de que seu elemento "mount point" tenha um ID de "main":
|
Adicione um `index.html` para o `Trunk` usar. Certifique-se de que seu elemento "mount point" tenha um ID de "main":
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ Cada uma dessas cenas é independente – não queremos renderizar a página ini
|
|||||||
|
|
||||||
```toml
|
```toml
|
||||||
[dependencies]
|
[dependencies]
|
||||||
dioxus = { version = "0.2", features = ["desktop", "router"] }
|
dioxus = { version = "*" }
|
||||||
|
dioxus-router = { version = "*" }
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usando o Roteador
|
## Usando o Roteador
|
||||||
|
|||||||
Reference in new issue
Block a user