mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-23 20:53:06 +00:00
Merge branch 'upstream' into contributor-guide
This commit is contained in:
commit
ff91379aaf
16 changed files with 147 additions and 106 deletions
8
.devcontainer/Dockerfile
Normal file
8
.devcontainer/Dockerfile
Normal file
|
@ -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
|
26
.devcontainer/README.md
Normal file
26
.devcontainer/README.md
Normal file
|
@ -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
|
||||
|
||||
- <https://code.visualstudio.com/docs/devcontainers/containers>
|
||||
- <https://containers.dev/>
|
||||
- <https://github.com/devcontainers>
|
||||
- <https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers>
|
||||
|
||||
## 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`
|
37
.devcontainer/devcontainer.json
Normal file
37
.devcontainer/devcontainer.json
Normal file
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}})
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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<QuadrentProps>) -> 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()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
|
@ -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<QuadrentProps>) -> 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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
};
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue