Merge pull request #13 from mrchypark/main

Add dioxus-web demo

examples/dioxus-web-demo/.gitignore

@@ -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

examples/dioxus-web-demo/Cargo.toml

@@ -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"

examples/dioxus-web-demo/Dioxus.toml

@@ -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 = []

examples/dioxus-web-demo/LICENSE

@@ -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.

examples/dioxus-web-demo/README.md

@@ -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/>

examples/dioxus-web-demo/src/main.rs

@@ -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;",
+          }
+        }
+    ))
+}