Initial Commit
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
# Generated by Cargo
|
||||
# will have compiled files and executables
|
||||
/target
|
||||
.DS_Store
|
||||
|
||||
# These are backup files generated by rustfmt
|
||||
**/*.rs.bk
|
||||
@@ -0,0 +1,265 @@
|
||||
You are an expert [0.7 Dioxus](https://dioxuslabs.com/learn/0.7) assistant. Dioxus 0.7 changes every api in dioxus. Only use this up to date documentation. `cx`, `Scope`, and `use_state` are gone
|
||||
|
||||
Provide concise code examples with detailed descriptions
|
||||
|
||||
# Dioxus Dependency
|
||||
|
||||
You can add Dioxus to your `Cargo.toml` like this:
|
||||
|
||||
```toml
|
||||
[dependencies]
|
||||
dioxus = { version = "0.7.1" }
|
||||
|
||||
[features]
|
||||
default = ["web", "webview", "server"]
|
||||
web = ["dioxus/web"]
|
||||
webview = ["dioxus/desktop"]
|
||||
server = ["dioxus/server"]
|
||||
```
|
||||
|
||||
# Launching your application
|
||||
|
||||
You need to create a main function that sets up the Dioxus runtime and mounts your root component.
|
||||
|
||||
```rust
|
||||
use dioxus::prelude::*;
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(App);
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
rsx! { "Hello, Dioxus!" }
|
||||
}
|
||||
```
|
||||
|
||||
Then serve with `dx serve`:
|
||||
|
||||
```sh
|
||||
curl -sSL http://dioxus.dev/install.sh | sh
|
||||
dx serve
|
||||
```
|
||||
|
||||
# UI with RSX
|
||||
|
||||
```rust
|
||||
rsx! {
|
||||
div {
|
||||
class: "container", // Attribute
|
||||
color: "red", // Inline styles
|
||||
width: if condition { "100%" }, // Conditional attributes
|
||||
"Hello, Dioxus!"
|
||||
}
|
||||
// Prefer loops over iterators
|
||||
for i in 0..5 {
|
||||
div { "{i}" } // use elements or components directly in loops
|
||||
}
|
||||
if condition {
|
||||
div { "Condition is true!" } // use elements or components directly in conditionals
|
||||
}
|
||||
|
||||
{children} // Expressions are wrapped in brace
|
||||
{(0..5).map(|i| rsx! { span { "Item {i}" } })} // Iterators must be wrapped in braces
|
||||
}
|
||||
```
|
||||
|
||||
# Assets
|
||||
|
||||
The asset macro can be used to link to local files to use in your project. All links start with `/` and are relative to the root of your project.
|
||||
|
||||
```rust
|
||||
rsx! {
|
||||
img {
|
||||
src: asset!("/assets/image.png"),
|
||||
alt: "An image",
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Styles
|
||||
|
||||
The `document::Stylesheet` component will inject the stylesheet into the `<head>` of the document
|
||||
|
||||
```rust
|
||||
rsx! {
|
||||
document::Stylesheet {
|
||||
href: asset!("/assets/styles.css"),
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# Components
|
||||
|
||||
Components are the building blocks of apps
|
||||
|
||||
* Component are functions annotated with the `#[component]` macro.
|
||||
* The function name must start with a capital letter or contain an underscore.
|
||||
* A component re-renders only under two conditions:
|
||||
1. Its props change (as determined by `PartialEq`).
|
||||
2. An internal reactive state it depends on is updated.
|
||||
|
||||
```rust
|
||||
#[component]
|
||||
fn Input(mut value: Signal<String>) -> Element {
|
||||
rsx! {
|
||||
input {
|
||||
value,
|
||||
oninput: move |e| {
|
||||
*value.write() = e.value();
|
||||
},
|
||||
onkeydown: move |e| {
|
||||
if e.key() == Key::Enter {
|
||||
value.write().clear();
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Each component accepts function arguments (props)
|
||||
|
||||
* Props must be owned values, not references. Use `String` and `Vec<T>` instead of `&str` or `&[T]`.
|
||||
* Props must implement `PartialEq` and `Clone`.
|
||||
* To make props reactive and copy, you can wrap the type in `ReadOnlySignal`. Any reactive state like memos and resources that read `ReadOnlySignal` props will automatically re-run when the prop changes.
|
||||
|
||||
# State
|
||||
|
||||
A signal is a wrapper around a value that automatically tracks where it's read and written. Changing a signal's value causes code that relies on the signal to rerun.
|
||||
|
||||
## Local State
|
||||
|
||||
The `use_signal` hook creates state that is local to a single component. You can call the signal like a function (e.g. `my_signal()`) to clone the value, or use `.read()` to get a reference. `.write()` gets a mutable reference to the value.
|
||||
|
||||
Use `use_memo` to create a memoized value that recalculates when its dependencies change. Memos are useful for expensive calculations that you don't want to repeat unnecessarily.
|
||||
|
||||
```rust
|
||||
#[component]
|
||||
fn Counter() -> Element {
|
||||
let mut count = use_signal(|| 0);
|
||||
let mut doubled = use_memo(move || count() * 2); // doubled will re-run when count changes because it reads the signal
|
||||
|
||||
rsx! {
|
||||
h1 { "Count: {count}" } // Counter will re-render when count changes because it reads the signal
|
||||
h2 { "Doubled: {doubled}" }
|
||||
button {
|
||||
onclick: move |_| *count.write() += 1, // Writing to the signal rerenders Counter
|
||||
"Increment"
|
||||
}
|
||||
button {
|
||||
onclick: move |_| count.with_mut(|count| *count += 1), // use with_mut to mutate the signal
|
||||
"Increment with with_mut"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Context API
|
||||
|
||||
The Context API allows you to share state down the component tree. A parent provides the state using `use_context_provider`, and any child can access it with `use_context`
|
||||
|
||||
```rust
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
let mut theme = use_signal(|| "light".to_string());
|
||||
use_context_provider(|| theme); // Provide a type to children
|
||||
rsx! { Child {} }
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn Child() -> Element {
|
||||
let theme = use_context::<Signal<String>>(); // Consume the same type
|
||||
rsx! {
|
||||
div {
|
||||
"Current theme: {theme}"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# Async
|
||||
|
||||
For state that depends on an asynchronous operation (like a network request), Dioxus provides a hook called `use_resource`. This hook manages the lifecycle of the async task and provides the result to your component.
|
||||
|
||||
* The `use_resource` hook takes an `async` closure. It re-runs this closure whenever any signals it depends on (reads) are updated
|
||||
* The `Resource` object returned can be in several states when read:
|
||||
1. `None` if the resource is still loading
|
||||
2. `Some(value)` if the resource has successfully loaded
|
||||
|
||||
```rust
|
||||
let mut dog = use_resource(move || async move {
|
||||
// api request
|
||||
});
|
||||
|
||||
match dog() {
|
||||
Some(dog_info) => rsx! { Dog { dog_info } },
|
||||
None => rsx! { "Loading..." },
|
||||
}
|
||||
```
|
||||
|
||||
# Routing
|
||||
|
||||
All possible routes are defined in a single Rust `enum` that derives `Routable`. Each variant represents a route and is annotated with `#[route("/path")]`. Dynamic Segments can capture parts of the URL path as parameters by using `:name` in the route string. These become fields in the enum variant.
|
||||
|
||||
The `Router<Route> {}` component is the entry point that manages rendering the correct component for the current URL.
|
||||
|
||||
You can use the `#[layout(NavBar)]` to create a layout shared between pages and place an `Outlet<Route> {}` inside your layout component. The child routes will be rendered in the outlet.
|
||||
|
||||
```rust
|
||||
#[derive(Routable, Clone, PartialEq)]
|
||||
enum Route {
|
||||
#[layout(NavBar)] // This will use NavBar as the layout for all routes
|
||||
#[route("/")]
|
||||
Home {},
|
||||
#[route("/blog/:id")] // Dynamic segment
|
||||
BlogPost { id: i32 },
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn NavBar() -> Element {
|
||||
rsx! {
|
||||
a { href: "/", "Home" }
|
||||
Outlet<Route> {} // Renders Home or BlogPost
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
rsx! { Router::<Route> {} }
|
||||
}
|
||||
```
|
||||
|
||||
```toml
|
||||
dioxus = { version = "0.7.1", features = ["router"] }
|
||||
```
|
||||
|
||||
# Fullstack
|
||||
|
||||
Fullstack enables server rendering and ipc calls. It uses Cargo features (`server` and a client feature like `web`) to split the code into a server and client binaries.
|
||||
|
||||
```toml
|
||||
dioxus = { version = "0.7.1", features = ["fullstack"] }
|
||||
```
|
||||
|
||||
## Server Functions
|
||||
|
||||
Use the `#[post]` / `#[get]` macros to define an `async` function that will only run on the server. On the server, this macro generates an API endpoint. On the client, it generates a function that makes an HTTP request to that endpoint.
|
||||
|
||||
```rust
|
||||
#[post("/api/double/:path/&query")]
|
||||
async fn double_server(number: i32, path: String, query: i32) -> Result<i32, ServerFnError> {
|
||||
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
||||
Ok(number * 2)
|
||||
}
|
||||
```
|
||||
|
||||
## Hydration
|
||||
|
||||
Hydration is the process of making a server-rendered HTML page interactive on the client. The server sends the initial HTML, and then the client-side runs, attaches event listeners, and takes control of future rendering.
|
||||
|
||||
### Errors
|
||||
The initial UI rendered by the component on the client must be identical to the UI rendered on the server.
|
||||
|
||||
* Use the `use_server_future` hook instead of `use_resource`. It runs the future on the server, serializes the result, and sends it to the client, ensuring the client has the data immediately for its first render.
|
||||
* Any code that relies on browser-specific APIs (like accessing `localStorage`) must be run *after* hydration. Place this code inside a `use_effect` hook.
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
[workspace]
|
||||
resolver = "2"
|
||||
members = [
|
||||
"packages/ui",
|
||||
"packages/web",
|
||||
"packages/desktop",
|
||||
"packages/mobile",
|
||||
"packages/api",
|
||||
]
|
||||
|
||||
[workspace.dependencies]
|
||||
dioxus = { version = "0.7.1" }
|
||||
|
||||
# workspace
|
||||
ui = { path = "packages/ui" }
|
||||
api = { path = "packages/api" }
|
||||
@@ -0,0 +1,71 @@
|
||||
# Development
|
||||
|
||||
Your new workspace contains a member crate for each of the web, desktop and mobile platforms, a `ui` crate for shared components and a `api` crate for shared backend logic:
|
||||
|
||||
```
|
||||
your_project/
|
||||
├─ README.md
|
||||
├─ Cargo.toml
|
||||
└─ packages/
|
||||
├─ web/
|
||||
│ └─ ... # Web specific UI/logic
|
||||
├─ desktop/
|
||||
│ └─ ... # Desktop specific UI/logic
|
||||
├─ mobile/
|
||||
│ └─ ... # Mobile specific UI/logic
|
||||
├─ api/
|
||||
│ └─ ... # All shared server logic
|
||||
└─ ui/
|
||||
└─ ... # Component shared between multiple platforms
|
||||
```
|
||||
|
||||
## Platform crates
|
||||
|
||||
Each platform crate contains the entry point for the platform, and any assets, components and dependencies that are specific to that platform. For example, the desktop crate in the workspace looks something like this:
|
||||
|
||||
```
|
||||
desktop/ # The desktop crate contains all platform specific UI, logic and dependencies for the desktop app
|
||||
├─ assets/ # Assets used by the desktop app - Any platform specific assets should go in this folder
|
||||
├─ src/
|
||||
│ ├─ main.rs # The entrypoint for the desktop app.
|
||||
├─ Cargo.toml # The desktop crate's Cargo.toml - This should include all desktop specific dependencies
|
||||
```
|
||||
|
||||
When you start developing with the workspace setup each of the platform crates will look almost identical. The UI starts out exactly the same on all platforms. However, as you continue developing your application, this setup makes it easy to let the views for each platform change independently.
|
||||
|
||||
## Shared UI crate
|
||||
|
||||
The workspace contains a `ui` crate with components that are shared between multiple platforms. You should put any UI elements you want to use in multiple platforms in this crate. You can also put some shared client side logic in this crate, but be careful to not pull in platform specific dependencies. The `ui` crate starts out something like this:
|
||||
|
||||
```
|
||||
ui/
|
||||
├─ src/
|
||||
│ ├─ lib.rs # The entrypoint for the ui crate
|
||||
│ ├─ hero.rs # The Hero component that will be used in every platform
|
||||
│ ├─ echo.rs # The shared echo component that communicates with the server
|
||||
```
|
||||
|
||||
## Shared backend logic
|
||||
|
||||
The workspace contains a `api` crate with shared backend logic. This crate defines all of the shared server functions for all platforms. Server functions are async functions that expose a public API on the server. They can be called like a normal async function from the client. When you run `dx serve`, all of the server functions will be collected in the server build and hosted on a public API for the client to call. The `api` crate starts out something like this:
|
||||
|
||||
```
|
||||
api/
|
||||
├─ src/
|
||||
│ ├─ lib.rs # Exports a server function that echos the input string
|
||||
```
|
||||
|
||||
### Serving Your App
|
||||
|
||||
Navigate to the platform crate of your choice:
|
||||
```bash
|
||||
cd web
|
||||
```
|
||||
|
||||
and serve:
|
||||
|
||||
```bash
|
||||
dx serve
|
||||
```
|
||||
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
await-holding-invalid-types = [
|
||||
"generational_box::GenerationalRef",
|
||||
{ path = "generational_box::GenerationalRef", reason = "Reads should not be held over an await point. This will cause any writes to fail while the await is pending since the read borrow is still active." },
|
||||
"generational_box::GenerationalRefMut",
|
||||
{ path = "generational_box::GenerationalRefMut", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
|
||||
"dioxus_signals::WriteLock",
|
||||
{ path = "dioxus_signals::WriteLock", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
|
||||
]
|
||||
@@ -0,0 +1,10 @@
|
||||
[package]
|
||||
name = "api"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { workspace = true, features = ["fullstack"] }
|
||||
|
||||
[features]
|
||||
server = ["dioxus/server"]
|
||||
@@ -0,0 +1,13 @@
|
||||
# API
|
||||
|
||||
This crate contains all shared fullstack server functions. This is a great place to place any server-only logic you would like to expose in multiple platforms like a method that accesses your database or a method that sends an email.
|
||||
|
||||
This crate will be built twice:
|
||||
1. Once for the server build with the `dioxus/server` feature enabled
|
||||
2. Once for the client build with the client feature disabled
|
||||
|
||||
During the server build, the server functions will be collected and hosted on a public API for the client to call. During the client build, the server functions will be compiled into the client build.
|
||||
|
||||
## Dependencies
|
||||
|
||||
Most server dependencies (like sqlx and tokio) will not compile on client platforms like WASM. To avoid building server dependencies on the client, you should add platform specific dependencies under the `server` feature in the [Cargo.toml](../Cargo.toml) file. More details about managing server only dependencies can be found in the [Dioxus guide](https://dioxuslabs.com/learn/0.7/guides/fullstack/managing_dependencies#adding-server-only-dependencies).
|
||||
@@ -0,0 +1,8 @@
|
||||
//! This crate contains all shared fullstack server functions.
|
||||
use dioxus::prelude::*;
|
||||
|
||||
/// Echo the user input on the server.
|
||||
#[post("/api/echo")]
|
||||
pub async fn echo(input: String) -> Result<String, ServerFnError> {
|
||||
Ok(input)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
[package]
|
||||
name = "desktop"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { workspace = true, features = ["fullstack"] }
|
||||
ui = { workspace = true }
|
||||
|
||||
[features]
|
||||
default = []
|
||||
desktop = ["dioxus/desktop"]
|
||||
server = ["dioxus/server", "ui/server"]
|
||||
@@ -0,0 +1,26 @@
|
||||
# Development
|
||||
|
||||
The desktop crate defines the entrypoint for the desktop app along with any assets, components and dependencies that are specific to desktop builds. The desktop crate starts out something like this:
|
||||
|
||||
```
|
||||
desktop/
|
||||
├─ assets/ # Assets used by the desktop app - Any platform specific assets should go in this folder
|
||||
├─ src/
|
||||
│ ├─ main.rs # The entrypoint for the desktop app.
|
||||
├─ Cargo.toml # The desktop crate's Cargo.toml - This should include all desktop specific dependencies
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
Since you have fullstack enabled, the desktop crate will be built two times:
|
||||
1. Once for the server build with the `server` feature enabled
|
||||
2. Once for the client build with the `desktop` feature enabled
|
||||
|
||||
You should make all desktop specific dependencies optional and only enabled in the `desktop` feature. This will ensure that the server builds don't pull in desktop specific dependencies which cuts down on build times significantly.
|
||||
|
||||
### Serving Your Desktop App
|
||||
|
||||
You can start your desktop app with the following command:
|
||||
|
||||
```bash
|
||||
dx serve
|
||||
```
|
||||
@@ -0,0 +1,8 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use ui::{Echo, Hero};
|
||||
|
||||
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(App);
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
// Build cool things ✌️
|
||||
|
||||
rsx! {
|
||||
// Global app resources
|
||||
document::Link { rel: "stylesheet", href: MAIN_CSS }
|
||||
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
use crate::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const BLOG_CSS: Asset = asset!("/assets/blog.css");
|
||||
|
||||
#[component]
|
||||
pub fn Blog(id: i32) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: BLOG_CSS}
|
||||
|
||||
div {
|
||||
id: "blog",
|
||||
|
||||
// Content
|
||||
h1 { "This is blog #{id}!" }
|
||||
p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
|
||||
|
||||
// Navigation links
|
||||
Link {
|
||||
to: Route::Blog { id: id - 1 },
|
||||
"Previous"
|
||||
}
|
||||
span { " <---> " }
|
||||
Link {
|
||||
to: Route::Blog { id: id + 1 },
|
||||
"Next"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
use dioxus::prelude::*;
|
||||
use ui::{Hero, Echo};
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
@@ -0,0 +1,13 @@
|
||||
[package]
|
||||
name = "mobile"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { workspace = true, features = ["fullstack"] }
|
||||
ui = { workspace = true }
|
||||
|
||||
[features]
|
||||
default = []
|
||||
mobile = ["dioxus/mobile"]
|
||||
server = ["dioxus/server", "ui/server"]
|
||||
@@ -0,0 +1,26 @@
|
||||
# Development
|
||||
|
||||
The mobile crate defines the entrypoint for the mobile app along with any assets, components and dependencies that are specific to mobile builds. The mobile crate starts out something like this:
|
||||
|
||||
```
|
||||
mobile/
|
||||
├─ assets/ # Assets used by the mobile app - Any platform specific assets should go in this folder
|
||||
├─ src/
|
||||
│ ├─ main.rs # The entrypoint for the mobile app.
|
||||
├─ Cargo.toml # The mobile crate's Cargo.toml - This should include all mobile specific dependencies
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
Since you have fullstack enabled, the mobile crate will be built two times:
|
||||
1. Once for the server build with the `server` feature enabled
|
||||
2. Once for the client build with the `mobile` feature enabled
|
||||
|
||||
You should make all mobile specific dependencies optional and only enabled in the `mobile` feature. This will ensure that the server builds don't pull in mobile specific dependencies which cuts down on build times significantly.
|
||||
|
||||
### Serving Your Mobile App
|
||||
|
||||
Mobile platforms are shared in a single crate. To serve mobile, you need to explicitly set your target device to `android` or `ios`:
|
||||
|
||||
```bash
|
||||
dx serve --platform android
|
||||
```
|
||||
@@ -0,0 +1,8 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use ui::{Echo, Hero};
|
||||
|
||||
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(App);
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
// Build cool things ✌️
|
||||
|
||||
rsx! {
|
||||
// Global app resources
|
||||
document::Link { rel: "stylesheet", href: MAIN_CSS }
|
||||
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
use crate::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const BLOG_CSS: Asset = asset!("/assets/blog.css");
|
||||
|
||||
#[component]
|
||||
pub fn Blog(id: i32) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: BLOG_CSS}
|
||||
|
||||
div {
|
||||
id: "blog",
|
||||
|
||||
// Content
|
||||
h1 { "This is blog #{id}!" }
|
||||
p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
|
||||
|
||||
// Navigation links
|
||||
Link {
|
||||
to: Route::Blog { id: id - 1 },
|
||||
"Previous"
|
||||
}
|
||||
span { " <---> " }
|
||||
Link {
|
||||
to: Route::Blog { id: id + 1 },
|
||||
"Next"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
use dioxus::prelude::*;
|
||||
use ui::{Hero, Echo};
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
@@ -0,0 +1,11 @@
|
||||
[package]
|
||||
name = "ui"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { workspace = true }
|
||||
api = { workspace = true }
|
||||
|
||||
[features]
|
||||
server = ["api/server"]
|
||||
@@ -0,0 +1,15 @@
|
||||
# UI
|
||||
|
||||
This crate contains all shared components for the workspace. This is a great place to place any UI you would like to use in multiple platforms like a common `Button` or `Navbar` component.
|
||||
|
||||
```
|
||||
ui/
|
||||
├─ src/
|
||||
│ ├─ lib.rs # The entrypoint for the ui crate
|
||||
│ ├─ hero.rs # The Hero component that will be used in every platform
|
||||
│ ├─ echo.rs # The shared echo component that communicates with the server
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
|
||||
Since this crate is shared between multiple platforms, it should not pull in any platform specific dependencies. For example, if you want to use the `web_sys` crate in the web build of your app, you should not add it to this crate. Instead, you should add platform specific dependencies to the [web](../web/Cargo.toml), [desktop](../desktop/Cargo.toml), or [mobile](../mobile/Cargo.toml) crates.
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,34 @@
|
||||
#echo {
|
||||
width: 360px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 50px;
|
||||
background-color: #1e222d;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#echo>h4 {
|
||||
margin: 0px 0px 15px 0px;
|
||||
}
|
||||
|
||||
|
||||
#echo>input {
|
||||
border: none;
|
||||
border-bottom: 1px white solid;
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
transition: border-bottom-color 0.2s ease;
|
||||
outline: none;
|
||||
display: block;
|
||||
padding: 0px 0px 5px 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#echo>input:focus {
|
||||
border-bottom-color: #6d85c6;
|
||||
}
|
||||
|
||||
#echo>p {
|
||||
margin: 20px 0px 0px auto;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
#hero {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#links {
|
||||
width: 400px;
|
||||
text-align: left;
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
margin: 10px 0px;
|
||||
border: white 1px solid;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#links a:hover {
|
||||
background-color: #1f1f1f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#header {
|
||||
max-width: 1200px;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
#navbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#navbar a {
|
||||
color: #ffffff;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
#navbar a:hover {
|
||||
cursor: pointer;
|
||||
color: #91a4d2;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const ECHO_CSS: Asset = asset!("/assets/styling/echo.css");
|
||||
|
||||
/// Echo component that demonstrates fullstack server functions.
|
||||
#[component]
|
||||
pub fn Echo() -> Element {
|
||||
let mut response = use_signal(|| String::new());
|
||||
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: ECHO_CSS }
|
||||
div {
|
||||
id: "echo",
|
||||
h4 { "ServerFn Echo" }
|
||||
input {
|
||||
placeholder: "Type here to echo...",
|
||||
oninput: move |event| async move {
|
||||
let data = api::echo(event.value()).await.unwrap();
|
||||
response.set(data);
|
||||
},
|
||||
}
|
||||
|
||||
if !response().is_empty() {
|
||||
p {
|
||||
"Server echoed: "
|
||||
i { "{response}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const HERO_CSS: Asset = asset!("/assets/styling/hero.css");
|
||||
const HEADER_SVG: Asset = asset!("/assets/header.svg");
|
||||
|
||||
#[component]
|
||||
pub fn Hero() -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: HERO_CSS }
|
||||
|
||||
div {
|
||||
id: "hero",
|
||||
img { src: HEADER_SVG, id: "header" }
|
||||
div { id: "links",
|
||||
a { href: "https://dioxuslabs.com/learn/0.7/", "📚 Learn Dioxus" }
|
||||
a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
|
||||
a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
|
||||
a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
|
||||
a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
|
||||
a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
//! This crate contains all shared UI for the workspace.
|
||||
|
||||
mod hero;
|
||||
pub use hero::Hero;
|
||||
|
||||
mod echo;
|
||||
pub use echo::Echo;
|
||||
@@ -0,0 +1,15 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
|
||||
|
||||
#[component]
|
||||
pub fn Navbar(children: Element) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: NAVBAR_CSS }
|
||||
|
||||
div {
|
||||
id: "navbar",
|
||||
{children}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
[package]
|
||||
name = "web"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { workspace = true, features = ["fullstack"] }
|
||||
ui = { workspace = true }
|
||||
|
||||
[features]
|
||||
default = []
|
||||
web = ["dioxus/web"]
|
||||
server = ["dioxus/server", "ui/server"]
|
||||
@@ -0,0 +1,26 @@
|
||||
# Development
|
||||
|
||||
The web crate defines the entrypoint for the web app along with any assets, components and dependencies that are specific to web builds. The web crate starts out something like this:
|
||||
|
||||
```
|
||||
web/
|
||||
├─ assets/ # Assets used by the web app - Any platform specific assets should go in this folder
|
||||
├─ src/
|
||||
│ ├─ main.rs # The entrypoint for the web app.
|
||||
├─ Cargo.toml # The web crate's Cargo.toml - This should include all web specific dependencies
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
Since you have fullstack enabled, the web crate will be built two times:
|
||||
1. Once for the server build with the `server` feature enabled
|
||||
2. Once for the client build with the `web` feature enabled
|
||||
|
||||
You should make all web specific dependencies optional and only enabled in the `web` feature. This will ensure that the server builds don't pull in web specific dependencies which cuts down on build times significantly.
|
||||
|
||||
### Serving Your Web App
|
||||
|
||||
You can start your web app with the following command:
|
||||
|
||||
```bash
|
||||
dx serve
|
||||
```
|
||||
@@ -0,0 +1,8 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
@@ -0,0 +1,6 @@
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use ui::{Echo, Hero};
|
||||
|
||||
const FAVICON: Asset = asset!("/assets/favicon.ico");
|
||||
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(App);
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
// Build cool things ✌️
|
||||
|
||||
rsx! {
|
||||
// Global app resources
|
||||
document::Link { rel: "icon", href: FAVICON }
|
||||
document::Link { rel: "stylesheet", href: MAIN_CSS }
|
||||
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
use crate::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const BLOG_CSS: Asset = asset!("/assets/blog.css");
|
||||
|
||||
#[component]
|
||||
pub fn Blog(id: i32) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: BLOG_CSS}
|
||||
|
||||
div {
|
||||
id: "blog",
|
||||
|
||||
// Content
|
||||
h1 { "This is blog #{id}!" }
|
||||
p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
|
||||
|
||||
// Navigation links
|
||||
Link {
|
||||
to: Route::Blog { id: id - 1 },
|
||||
"Previous"
|
||||
}
|
||||
span { " <---> " }
|
||||
Link {
|
||||
to: Route::Blog { id: id + 1 },
|
||||
"Next"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
use dioxus::prelude::*;
|
||||
use ui::{Hero, Echo};
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
Reference in New Issue
Block a user