diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 000000000..e2fd03ad8 --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,8 @@ +ARG VARIANT="nightly-bookworm-slim" +FROM rustlang/rust:${VARIANT} +ENV DEBIAN_FRONTEND noninteractive +RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections + +RUN apt-get update && export DEBIAN_FRONTEND=noninteractive + +RUN apt-get -qq install build-essential libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev \ No newline at end of file diff --git a/.devcontainer/README.md b/.devcontainer/README.md new file mode 100644 index 000000000..570435663 --- /dev/null +++ b/.devcontainer/README.md @@ -0,0 +1,26 @@ +# Dev Container + +A dev container in the most simple context allows one to create a consistent development environment within a docker container that can easily be opened locally or remotely via codespaces such that contributors don't need to install anything to contribute. + +## Useful Links + +- +- +- +- + +## Using A Dev Container + +### Locally + +To use this dev container locally, make sure Docker is installed and in VSCode install the `ms-vscode-remote.remote-containers` extension. Then from the root of Dioxus you can type `Ctrl + Shift + P`, then choose `Dev Containers: Rebuild and Reopen in Devcontainer`. + +### Codespaces + +[Codespaces Setup](https://docs.github.com/en/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository) + +## Troubleshooting + +If having difficulty commiting with github, and you use ssh or gpg keys, you may need to ensure that the keys are being shared properly between your host and VSCode. + +Though VSCode does a pretty good job sharing credentials between host and devcontainer, to save some time you can always just reopen the container locally to commit with `Ctrl + Shift + P`, then choose `Dev Containers: Reopen Folder Locally` diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 000000000..aa536ab53 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,37 @@ +{ + "name": "dioxus", + "remoteUser": "vscode", + "build": { + "dockerfile": "./Dockerfile", + "context": "." + }, + "features": { + "ghcr.io/devcontainers/features/common-utils:2": { + "installZsh": "true", + "username": "vscode", + "uid": "1000", + "gid": "1000", + "upgradePackages": "true" + } + }, + "containerEnv": { + "RUST_LOG": "INFO" + }, + "customizations": { + "vscode": { + "settings": { + "files.watcherExclude": { + "**/target/**": true + }, + "[rust]": { + "editor.formatOnSave": true + } + }, + "extensions": [ + "rust-lang.rust-analyzer", + "tamasfe.even-better-toml", + "serayuzgur.crates" + ] + } + } +} \ No newline at end of file diff --git a/docs/guide/src/en/custom_renderer/index.md b/docs/guide/src/en/custom_renderer/index.md index 2d4ddb759..b531593dc 100644 --- a/docs/guide/src/en/custom_renderer/index.md +++ b/docs/guide/src/en/custom_renderer/index.md @@ -15,7 +15,7 @@ Essentially, your renderer needs to process edits and generate events to update Internally, Dioxus handles the tree relationship, diffing, memory management, and the event system, leaving as little as possible required for renderers to implement themselves. -For reference, check out the [javascript interpreter](https://github.com/DioxusLabs/dioxus/tree/master/packages/interpreter) or [tui renderer](https://github.com/DioxusLabs/dioxus/tree/master/packages/tui) as a starting point for your custom renderer. +For reference, check out the [javascript interpreter](https://github.com/DioxusLabs/dioxus/tree/master/packages/interpreter) or [tui renderer](https://github.com/DioxusLabs/dioxus/tree/master/packages/dioxus-tui) as a starting point for your custom renderer. ## Templates diff --git a/docs/guide/src/en/getting_started/tui.md b/docs/guide/src/en/getting_started/tui.md index e49cb84a8..4e8d36cf9 100644 --- a/docs/guide/src/en/getting_started/tui.md +++ b/docs/guide/src/en/getting_started/tui.md @@ -12,14 +12,12 @@ TUI support is currently quite experimental. But, if you're willing to venture i - It uses flexbox for the layout - It only supports a subset of the attributes and elements -- Regular widgets will not work in the tui render, but the tui renderer has its own widget components that start with a capital letter. See the [widgets example](https://github.com/DioxusLabs/dioxus/blob/master/packages/tui/examples/widgets.rs) +- Regular widgets will not work in the tui render, but the tui renderer has its own widget components that start with a capital letter. See the [widgets example](https://github.com/DioxusLabs/dioxus/blob/master/packages/dioxus-tui/examples/widgets.rs) - 1px is one character line height. Your regular CSS px does not translate - If your app panics, your terminal is wrecked. This will be fixed eventually - ## Getting Set up - Start by making a new package and adding Dioxus and the TUI renderer as dependancies. ```shell diff --git a/examples/inputs.rs b/examples/inputs.rs index cf848d99e..311afc1f0 100644 --- a/examples/inputs.rs +++ b/examples/inputs.rs @@ -37,6 +37,7 @@ const FIELDS: &[(&str, &str)] = &[ fn app(cx: Scope) -> Element { cx.render(rsx! { div { margin_left: "30px", + select_example(cx), div { // handling inputs on divs will catch all input events below // so the value of our input event will be either huey, dewey, louie, or true/false (because of the checkboxe) @@ -134,3 +135,34 @@ fn app(cx: Scope) -> Element { } }) } + +fn select_example(cx: Scope) -> Element { + cx.render(rsx! { + div { + select { + id: "selection", + name: "selection", + multiple: true, + oninput: move |evt| { + println!("{evt:?}"); + }, + option { + value : "Option 1", + label : "Option 1", + } + option { + value : "Option 2", + label : "Option 2", + selected : true, + }, + option { + value : "Option 3", + label : "Option 3", + } + } + label { + r#for: "selection", + "select element" + } + }}) +} diff --git a/packages/core/Cargo.toml b/packages/core/Cargo.toml index b86466692..af0feba9c 100644 --- a/packages/core/Cargo.toml +++ b/packages/core/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "dioxus-core" -version = "0.3.2" +version = "0.3.3" authors = ["Jonathan Kelley"] edition = "2018" description = "Core functionality for Dioxus - a concurrent renderer-agnostic Virtual DOM for interactive user experiences" diff --git a/packages/dioxus-tui/examples/all_events.rs b/packages/dioxus-tui/examples/all_terminal_events.rs similarity index 100% rename from packages/dioxus-tui/examples/all_events.rs rename to packages/dioxus-tui/examples/all_terminal_events.rs diff --git a/packages/dioxus-tui/examples/components.rs b/packages/dioxus-tui/examples/components.rs deleted file mode 100644 index 45ed56338..000000000 --- a/packages/dioxus-tui/examples/components.rs +++ /dev/null @@ -1,67 +0,0 @@ -#![allow(non_snake_case)] - -use dioxus::prelude::*; -use dioxus_tui::Config; - -fn main() { - dioxus_tui::launch_cfg(app, Config::default()); -} - -#[derive(Props, PartialEq)] -struct QuadrentProps { - color: String, - text: String, -} - -fn Quadrant(cx: Scope) -> Element { - cx.render(rsx! { - div { - border_width: "1px", - width: "50%", - height: "100%", - background_color: "{cx.props.color}", - justify_content: "center", - align_items: "center", - - "{cx.props.text}" - } - }) -} - -fn app(cx: Scope) -> Element { - cx.render(rsx! { - div { - width: "100%", - height: "100%", - flex_direction: "column", - - div { - width: "100%", - height: "50%", - flex_direction: "row", - Quadrant{ - color: "red".to_string(), - text: "[A]".to_string() - }, - Quadrant{ - color: "black".to_string(), - text: "[B]".to_string() - } - } - - div { - width: "100%", - height: "50%", - flex_direction: "row", - Quadrant{ - color: "green".to_string(), - text: "[C]".to_string() - }, - Quadrant{ - color: "blue".to_string(), - text: "[D]".to_string() - } - } - } - }) -} diff --git a/packages/dioxus-tui/examples/stress.rs b/packages/dioxus-tui/examples/many_small_edit_stress.rs similarity index 100% rename from packages/dioxus-tui/examples/stress.rs rename to packages/dioxus-tui/examples/many_small_edit_stress.rs diff --git a/packages/dioxus-tui/examples/quadrants.rs b/packages/dioxus-tui/examples/quadrants.rs index d9da5dcb5..45ed56338 100644 --- a/packages/dioxus-tui/examples/quadrants.rs +++ b/packages/dioxus-tui/examples/quadrants.rs @@ -1,7 +1,31 @@ +#![allow(non_snake_case)] + use dioxus::prelude::*; +use dioxus_tui::Config; fn main() { - dioxus_tui::launch(app); + dioxus_tui::launch_cfg(app, Config::default()); +} + +#[derive(Props, PartialEq)] +struct QuadrentProps { + color: String, + text: String, +} + +fn Quadrant(cx: Scope) -> Element { + cx.render(rsx! { + div { + border_width: "1px", + width: "50%", + height: "100%", + background_color: "{cx.props.color}", + justify_content: "center", + align_items: "center", + + "{cx.props.text}" + } + }) } fn app(cx: Scope) -> Element { @@ -15,22 +39,13 @@ fn app(cx: Scope) -> Element { width: "100%", height: "50%", flex_direction: "row", - div { - border_width: "1px", - width: "50%", - height: "100%", - background_color: "red", - justify_content: "center", - align_items: "center", - "[A]" - } - div { - width: "50%", - height: "100%", - background_color: "black", - justify_content: "center", - align_items: "center", - "[B]" + Quadrant{ + color: "red".to_string(), + text: "[A]".to_string() + }, + Quadrant{ + color: "black".to_string(), + text: "[B]".to_string() } } @@ -38,21 +53,13 @@ fn app(cx: Scope) -> Element { width: "100%", height: "50%", flex_direction: "row", - div { - width: "50%", - height: "100%", - background_color: "green", - justify_content: "center", - align_items: "center", - "[C]" - } - div { - width: "50%", - height: "100%", - background_color: "blue", - justify_content: "center", - align_items: "center", - "[D]" + Quadrant{ + color: "green".to_string(), + text: "[C]".to_string() + }, + Quadrant{ + color: "blue".to_string(), + text: "[D]".to_string() } } } diff --git a/packages/dioxus-tui/examples/readme.rs b/packages/dioxus-tui/examples/readme_hello_world.rs similarity index 100% rename from packages/dioxus-tui/examples/readme.rs rename to packages/dioxus-tui/examples/readme_hello_world.rs diff --git a/packages/native-core/src/tree.rs b/packages/native-core/src/tree.rs index df25deac3..e0c55eece 100644 --- a/packages/native-core/src/tree.rs +++ b/packages/native-core/src/tree.rs @@ -178,7 +178,7 @@ impl<'a> TreeMut for TreeMutView<'a> { fn set_height(tree: &mut TreeMutView<'_>, node: NodeId, height: u16) { let children = { let mut node_data_mut = &mut tree.1; - let mut node = (&mut node_data_mut).get(node).unwrap(); + let node = (&mut node_data_mut).get(node).unwrap(); node.height = height; node.children.clone() }; diff --git a/packages/rink/examples/counter.rs b/packages/rink/examples/counter_button.rs similarity index 100% rename from packages/rink/examples/counter.rs rename to packages/rink/examples/counter_button.rs diff --git a/packages/rink/src/widget.rs b/packages/rink/src/widget.rs index 7c6645692..ab9044998 100644 --- a/packages/rink/src/widget.rs +++ b/packages/rink/src/widget.rs @@ -26,7 +26,7 @@ impl<'a> RinkBuffer<'a> { // panic!("({x}, {y}) is not in {area:?}"); return; } - let mut cell = self.buf.get_mut(x, y); + let cell = self.buf.get_mut(x, y); cell.bg = convert(self.cfg.rendering_mode, new.bg.blend(cell.bg)); if new.symbol.is_empty() { if !cell.symbol.is_empty() { diff --git a/packages/router/examples/simple.rs b/packages/router/examples/simple_routes.rs similarity index 100% rename from packages/router/examples/simple.rs rename to packages/router/examples/simple_routes.rs