Skip to content

Commit

Permalink
Merge pull request #13 from mrchypark/main
Browse files Browse the repository at this point in the history
Add dioxus-web demo
  • Loading branch information
yuankunzhang authored Jul 25, 2023
2 parents 18c136f + e316b14 commit 83c6c49
Show file tree
Hide file tree
Showing 8 changed files with 1,398 additions and 10 deletions.
1,216 changes: 1,206 additions & 10 deletions examples/Cargo.lock

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions examples/dioxus-web-demo/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Generated by Cargo
# will have compiled files and executables
/target/

# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
Cargo.lock

# These are backup files generated by rustfmt
**/*.rs.bk


# Added by cargo

/target
18 changes: 18 additions & 0 deletions examples/dioxus-web-demo/Cargo.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
[package]
name = "dioxus-web-demo"
version = "0.1.0"
authors = ["Chanyub.Park <[email protected]>"]
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
dioxus = "0.3"
dioxus-web = "0.3"

charming = { path = "../../charming", features = ["wasm"] }

# Debug
log = "0.4.19"
dioxus-logger = "0.4.1"
console_error_panic_hook = "0.1.7"
45 changes: 45 additions & 0 deletions examples/dioxus-web-demo/Dioxus.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
[application]

# App (Project) Name
name = "dioxus-web-demo"

# Dioxus App Default Platform
# desktop, web, mobile, ssr
default_platform = "web"

# `build` & `serve` dist path
out_dir = "dist"

# resource (public) file folder
asset_dir = "public"

[web.app]

# HTML title tag content
title = "Dioxus | ⛺"

[web.watcher]

# when watcher trigger, regenerate the `index.html`
reload_html = true

# which files or dirs will be watcher monitoring
watch_path = ["src", "public"]

# include `assets` in web platform
[web.resource]

# CSS style file
style = []

# Javascript code file
script = [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"
]

[web.resource.dev]

# Javascript code file
# serve: [dev-server] only
script = []
21 changes: 21 additions & 0 deletions examples/dioxus-web-demo/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2022 Dioxus

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
46 changes: 46 additions & 0 deletions examples/dioxus-web-demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# charming with dioxus-web

## Prerequisites

Before you start working on this project, make sure you have the following prerequisites installed:

- [Rust](https://www.rust-lang.org/)
- [Dioxus CLI](https://dioxus.org/)
- Rust target for WebAssembly: `wasm32-unknown-unknown`

```sh
cargo install dioxus-cli --force
rustup target add wasm32-unknown-unknown
```

## Project Structure

The project follows the following directory structure:

```
dioxus-web-demo/
├── src/
│ └─ main.rs
├── ...
└── dioxus.toml
```

- `src/main.rs`: This directory contains the main Rust files for your front-end application.
- `dioxus.toml`: This is a file used to write configurations required for building dioxus-web, specifically to declare elements outside the <div id="main"></div> tag. Here's an example of what it may contain:

```toml
...
script = [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"
]
...
```

## Getting started

```sh
dioxus serve
```

<http://localhost:8080/>
Binary file added examples/dioxus-web-demo/public/favicon.ico
Binary file not shown.
47 changes: 47 additions & 0 deletions examples/dioxus-web-demo/src/main.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
use dioxus::prelude::*;
use log::LevelFilter;

use charming::{component::{Axis, Title}, element::AxisType, series::Line, Chart, WasmRenderer};

fn main() {
// Init debug
dioxus_logger::init(LevelFilter::Info).expect("failed to init logger");
console_error_panic_hook::set_once();

log::info!("starting app");
dioxus_web::launch(app);
}

fn app(cx: Scope) -> Element {

let renderer: WasmRenderer = WasmRenderer::new(600, 400);
use_future!(cx, || async move {
let chart = Chart::new()
.x_axis(
Axis::new()
.type_(AxisType::Category)
.data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]),
)
.y_axis(Axis::new().type_(AxisType::Value))
.series(Line::new().data(vec![150, 230, 224, 218, 135, 147, 260]));

renderer.render("chart",&chart).unwrap();
});


cx.render(rsx! (
div {
style: "text-align: center;",
h1 { "🌗 Dioxus + Charming 🚀" }
h3 { "Frontend that scales." }
p { "Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust." }
}
div {
style: "width: 100%; text-align: center;",
div {
id: "chart",
style: "display: inline-block;",
}
}
))
}

0 comments on commit 83c6c49

Please sign in to comment.