Merge branch 'master' into url-encode-routes

Cargo.toml

@@ -42,6 +42,7 @@ members = [
     # Full project examples
     "examples/tailwind",
     "examples/PWA-example",
+    "examples/query_segments_demo",
     # Playwright tests
     "playwright-tests/liveview",
     "playwright-tests/web",

examples/query_segments_demo/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "query_segments_demo"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { path = "../../packages/dioxus", version = "*" }
+dioxus-router = { path = "../../packages/router", version = "*" }
+dioxus-web = { path = "../../packages/web", version = "*" }
+form_urlencoded = "1.2.0"

examples/query_segments_demo/src/main.rs

@@ -0,0 +1,73 @@
+#![allow(non_snake_case, unused)]
+//! Example: Url query segments usage
+//! ------------------------------------
+//!
+//! This example shows how to access and use multiple query segments present in an url on the web.
+//!
+//! Run `dx serve` and navigate to `http://localhost:8080/blog?name=John&surname=Doe`
+use std::fmt::Display;
+
+use dioxus::prelude::*;
+use dioxus_router::prelude::*;
+
+// ANCHOR: route
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    // segments that start with ?: are query segments
+    #[route("/blog?:query_params")]
+    BlogPost {
+        // You must include query segments in child variants
+        query_params: BlogQuerySegments,
+    },
+}
+
+#[derive(Debug, Clone, PartialEq)]
+struct BlogQuerySegments {
+    name: String,
+    surname: String,
+}
+
+/// The display impl needs to display the query in a way that can be parsed:
+impl Display for BlogQuerySegments {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "name={}&surname={}", self.name, self.surname)
+    }
+}
+
+/// The query segment is anything that implements https://docs.rs/dioxus-router/latest/dioxus_router/routable/trait.FromQuery.html. You can implement that trait for a struct if you want to parse multiple query parameters.
+impl FromQuery for BlogQuerySegments {
+    fn from_query(query: &str) -> Self {
+        let mut name = None;
+        let mut surname = None;
+        let pairs = form_urlencoded::parse(query.as_bytes());
+        pairs.for_each(|(key, value)| {
+            if key == "name" {
+                name = Some(value.clone().into());
+            }
+            if key == "surname" {
+                surname = Some(value.clone().into());
+            }
+        });
+        Self {
+            name: name.unwrap(),
+            surname: surname.unwrap(),
+        }
+    }
+}
+
+#[inline_props]
+fn BlogPost(cx: Scope, query_params: BlogQuerySegments) -> Element {
+    render! {
+        div{"This is your blogpost with a query segment:"}
+        div{format!("{:?}", query_params)}
+    }
+}
+
+fn App(cx: Scope) -> Element {
+    render! { Router::<Route>{} }
+}
+
+fn main() {
+    dioxus_web::launch(App);
+}

packages/cli/Dioxus.toml

@@ -1,29 +1,31 @@
 [application]
 
-# dioxus project name
-name = "dioxus-cli"
+# App name
+name = "project_name"
 
-# default platfrom
-# you can also use `dx serve/build --platform XXX` to use other platform
-# value: web | desktop
-default_platform = "desktop"
+# The Dioxus platform to default to
+default_platform = "web"
 
-# Web `build` & `serve` dist path
+# `build` & `serve` output path
 out_dir = "dist"
 
-# resource (static) file folder
+# The static resource path
 asset_dir = "public"
 
 [web.app]
 
 # HTML title tag content
-title = "dioxus | ⛺"
+title = "project_name"
 
 [web.watcher]
 
-watch_path = ["src"]
+# When watcher is triggered, regenerate the `index.html`
+reload_html = true
 
-# include `assets` in web platform
+# Which files or dirs will be monitored
+watch_path = ["src", "public"]
+
+# Include style or script assets
 [web.resource]
 
 # CSS style file
@@ -34,12 +36,13 @@ script = []
 
 [web.resource.dev]
 
-# Javascript code file
-# serve: [dev-server] only
-script = []
+# Same as [web.resource], but for development servers
 
-[application.tools]
+# CSS style file
+style = []
+
+# JavaScript files
+script = []
 
-# use binaryen.wasm-opt for output Wasm file
-# binaryen just will trigger in `web` platform
-binaryen = { wasm_opt = true }
+[[web.proxy]]
+backend = "http://localhost:8000/api/"

packages/cli/README.md

@@ -1,43 +1,69 @@
-<div align="center">
-  <h1>📦✨ Dioxus CLI </h1>
+<div style="text-align: center">
+  <h1>📦✨ Dioxus CLI</h1>
   <p><strong>Tooling to supercharge Dioxus projects</strong></p>
 </div>
-**dioxus-cli** (inspired by wasm-pack and webpack) is a tool for getting Dioxus projects up and running.
-It handles all build, bundling, development and publishing to simplify web development.
 
+The **dioxus-cli** (inspired by wasm-pack and webpack) is a tool for getting Dioxus projects up and running.
+It handles all building, bundling, development and publishing to simplify development.
 
 ## Installation
 
-### Install stable version
+### Install the stable version (recommended)
+
 ```
 cargo install dioxus-cli
 ```
-### Install from git repository
+
+### Install the latest development build through git
+
+To get the latest bug fixes and features, you can install the development version from git.
+However, this is not fully tested.
+That means you're probably going to have more bugs despite having the latest bug fixes.
+
 ```
 cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli
 ```
+
+This will download the CLI from the master branch,
+and install it in Cargo's global binary directory (`~/.cargo/bin/` by default).
+
 ### Install from local folder
 ```
 cargo install --path . --debug
 ```
 
+## Get started
 
-## Get Started
-
-Use `dx create project-name` to initialize a new Dioxus project. <br>
-
+Use `dx create project-name` to initialize a new Dioxus project.
 It will be cloned from the [dioxus-template](https://github.com/DioxusLabs/dioxus-template) repository.
 
-<br>
-
 Alternatively, you can specify the template path:
 
 ```
 dx create hello --template gh:dioxuslabs/dioxus-template
 ```
 
-## Dioxus Config File
+Run `dx --help` for a list of all the available commands.
+Furthermore, you can run `dx <command> --help` to get help with a specific command.
+
+## Dioxus config file
+
+You can use the `Dioxus.toml` file for further configuration.
+Some fields are mandatory, but the CLI tool will tell you which ones are missing.
+You can create a `Dioxus.toml` with all fields already set using `dx config init project-name`,
+or you can use this bare-bones template (only mandatory fields) to get started:
+```toml
+[application]
+name = "project-name"
+# Currently supported platforms: web, desktop
+default_platform = "web"
 
-Dioxus CLI will use `Dioxus.toml` file to Identify some project info and switch some cli feature.
+[web.app]
+title = "Hello"
+
+[web.watcher]
+
+[web.resource.dev]
+```
 
-You can get more configure information from [Dioxus CLI Document](https://dioxuslabs.com/cli/configure.html).
+The full anatomy of `Dioxus.toml` is shown on the [Dioxus website](https://dioxuslabs.com/learn/0.4/CLI/configure).

packages/cli/docs/book.toml

@@ -3,4 +3,4 @@ authors = ["YuKun Liu"]
 language = "en"
 multilingual = false
 src = "src"
-title = "Dioxus Cli"
+title = "Dioxus CLI"

packages/cli/docs/src/SUMMARY.md

@@ -2,17 +2,12 @@
 
 - [Introduction](./introduction.md)
 - [Installation](./installation.md)
-- [Create a Project](./creating.md)
-- [Configure Project](./configure.md)
-- [Commands](./cmd/README.md)
-  - [Build](./cmd/build.md)
-  - [Serve](./cmd/serve.md)
-  - [Clean](./cmd/clean.md)
-  - [Translate](./cmd/translate.md)
-- [Plugin Development](./plugin/README.md)
-  - [API.Log](./plugin/interface/log.md)
-  - [API.Command](./plugin/interface/command.md)
-  - [API.OS](./plugin/interface/os.md)
-  - [API.Directories](./plugin/interface/dirs.md)
-  - [API.Network](./plugin/interface/network.md)
-  - [API.Path](./plugin/interface/path.md)
+- [Create a project](./creating.md)
+- [Configure a project](./configure.md)
+- [Plugin development](./plugin/README.md)
+  - [API.Log](plugin/interface/log.md)
+  - [API.Command](plugin/interface/command.md)
+  - [API.OS](plugin/interface/os.md)
+  - [API.Directories](plugin/interface/dirs.md)
+  - [API.Network](plugin/interface/network.md)
+  - [API.Path](plugin/interface/path.md)