mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-09-21 06:41:54 +00:00
publish: get web ready gto publish
This commit is contained in:
Jonathan Kelley
parent
639f9f5322
commit
2d58d380be
5 changed files with 17 additions and 364 deletions
|
|
@ -1,6 +1,6 @@
|
|||
[package]
|
||||
name = "dioxus-web"
|
||||
version = "0.0.0"
|
||||
version = "0.0.1"
|
||||
authors = ["Jonathan Kelley"]
|
||||
edition = "2018"
|
||||
description = "Dioxus VirtualDOM renderer for the web browser using websys"
|
||||
|
|
@ -9,20 +9,12 @@ repository = "https://github.com/DioxusLabs/dioxus/"
|
|||
homepage = "https://dioxuslabs.com"
|
||||
documentation = "https://dioxuslabs.com"
|
||||
keywords = ["dom", "ui", "gui", "react", "wasm"]
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
dioxus-core = { path = "../core", version ="^0.1.3"}
|
||||
dioxus-html = { path = "../html" }
|
||||
dioxus-core = { path = "../core", version = "^0.1.4" }
|
||||
dioxus-html = { path = "../html", version = "^0.1.1" }
|
||||
js-sys = "0.3"
|
||||
# wasm-bindgen-shared = { path = "../../../Tinkering/wasm-bindgen/crates/shared" }
|
||||
# wasm-bindgen-macro-support = { path = "../../../Tinkering/wasm-bindgen/crates/macro-support" }
|
||||
# wasm-bindgen = { features = [
|
||||
|
||||
|
||||
wasm-bindgen = { version = "0.2.78", features = ["enable-interning"] }
|
||||
# wasm-bindgen = { version = "0.2.78", features = ["enable-interning"] }
|
||||
# wasm-bindgen = { version = "0.2.78", features = ["enable-interning"] }
|
||||
lazy_static = "1.4.0"
|
||||
wasm-bindgen-futures = "0.4.20"
|
||||
log = { version = "0.4.14", features = ["release_max_level_off"] }
|
||||
|
|
@ -78,23 +70,19 @@ features = [
|
|||
]
|
||||
|
||||
|
||||
[lib]
|
||||
crate-type = ["cdylib", "rlib"]
|
||||
# [lib]
|
||||
# crate-type = ["cdylib", "rlib"]
|
||||
|
||||
[dev-dependencies]
|
||||
im-rc = "15.0.0"
|
||||
separator = "0.4.1"
|
||||
uuid = { version = "0.8.2", features = ["v4", "wasm-bindgen"] }
|
||||
serde = { version = "1.0.126", features = ["derive"] }
|
||||
reqwest = { version = "0.11", features = ["json"] }
|
||||
dioxus-hooks = { path = "../hooks" }
|
||||
dioxus-core-macro = { path = "../core-macro" }
|
||||
rand = { version = "0.8.4", features = ["small_rng"] }
|
||||
# [dev-dependencies]
|
||||
# im-rc = "15.0.0"
|
||||
# separator = "0.4.1"
|
||||
# uuid = { version = "0.8.2", features = ["v4", "wasm-bindgen"] }
|
||||
# serde = { version = "1.0.126", features = ["derive"] }
|
||||
# reqwest = { version = "0.11", features = ["json"] }
|
||||
# dioxus-hooks = { path = "../hooks" }
|
||||
# dioxus-core-macro = { path = "../core-macro" }
|
||||
# rand = { version = "0.8.4", features = ["small_rng"] }
|
||||
|
||||
[dev-dependencies.getrandom]
|
||||
version = "0.2"
|
||||
features = ["js"]
|
||||
|
||||
# surf = { version = "2.3.1", default-features = false, features = [
|
||||
# "wasm-client",
|
||||
# ] }
|
||||
# [dev-dependencies.getrandom]
|
||||
# version = "0.2"
|
||||
# features = ["js"]
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
//! Example: README.md showcase
|
||||
//!
|
||||
//! The example from the README.md.
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_core as dioxus;
|
||||
use dioxus_core_macro::*;
|
||||
use dioxus_hooks::use_state;
|
||||
use dioxus_html as dioxus_elements;
|
||||
use dioxus_web;
|
||||
use gloo_timers::future::TimeoutFuture;
|
||||
|
||||
fn main() {
|
||||
dioxus_web::launch(App);
|
||||
}
|
||||
|
||||
static App: Component = |cx| {
|
||||
let mut count = use_state(&cx, || 0);
|
||||
|
||||
cx.push_future(|| async move {
|
||||
TimeoutFuture::new(100).await;
|
||||
count += 1;
|
||||
});
|
||||
|
||||
rsx!(cx, div {
|
||||
h3 { "High-Five counter: {count}" }
|
||||
button { onclick: move |_| count.set(0), "Reset!" }
|
||||
})
|
||||
};
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
use std::cell::Cell;
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_core as dioxus;
|
||||
use dioxus_core_macro::*;
|
||||
use dioxus_hooks::{use_ref, use_state};
|
||||
use dioxus_html as dioxus_elements;
|
||||
use dioxus_web;
|
||||
use rand::prelude::*;
|
||||
|
||||
fn main() {
|
||||
console_error_panic_hook::set_once();
|
||||
if cfg!(debug_assertions) {
|
||||
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
|
||||
log::debug!("hello world");
|
||||
}
|
||||
|
||||
for a in ADJECTIVES {
|
||||
wasm_bindgen::intern(*a);
|
||||
}
|
||||
for a in COLOURS {
|
||||
wasm_bindgen::intern(*a);
|
||||
}
|
||||
for a in NOUNS {
|
||||
wasm_bindgen::intern(*a);
|
||||
}
|
||||
for a in [
|
||||
"container",
|
||||
"jumbotron",
|
||||
"row",
|
||||
"Dioxus",
|
||||
"col-md-6",
|
||||
"col-md-1",
|
||||
"Create 1,000 rows",
|
||||
"run",
|
||||
"Create 10,000 rows",
|
||||
"runlots",
|
||||
"Append 1,000 rows",
|
||||
"add",
|
||||
"Update every 10th row",
|
||||
"update",
|
||||
"Clear",
|
||||
"clear",
|
||||
"Swap rows",
|
||||
"swaprows",
|
||||
"preloadicon glyphicon glyphicon-remove", //
|
||||
"aria-hidden",
|
||||
"onclick",
|
||||
"true",
|
||||
"false",
|
||||
"danger",
|
||||
"type",
|
||||
"id",
|
||||
"class",
|
||||
"glyphicon glyphicon-remove remove",
|
||||
"dioxus-id",
|
||||
"dioxus-event-click",
|
||||
"dioxus",
|
||||
"click",
|
||||
"1.10",
|
||||
"lbl",
|
||||
"remove",
|
||||
"dioxus-event",
|
||||
"col-sm-6 smallpad",
|
||||
"btn btn-primary btn-block",
|
||||
"",
|
||||
" ",
|
||||
] {
|
||||
wasm_bindgen::intern(a);
|
||||
}
|
||||
for x in 0..100_000 {
|
||||
wasm_bindgen::intern(&x.to_string());
|
||||
}
|
||||
|
||||
dioxus_web::launch(App);
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Copy)]
|
||||
struct Label {
|
||||
key: usize,
|
||||
labels: [&'static str; 3],
|
||||
}
|
||||
|
||||
static mut Counter: Cell<usize> = Cell::new(1);
|
||||
|
||||
impl Label {
|
||||
fn new_list(num: usize) -> Vec<Self> {
|
||||
let mut rng = SmallRng::from_entropy();
|
||||
let mut labels = Vec::with_capacity(num);
|
||||
|
||||
let offset = unsafe { Counter.get() };
|
||||
unsafe { Counter.set(offset + num) };
|
||||
|
||||
for k in offset..(offset + num) {
|
||||
labels.push(Label {
|
||||
key: k,
|
||||
labels: [
|
||||
ADJECTIVES.choose(&mut rng).unwrap(),
|
||||
COLOURS.choose(&mut rng).unwrap(),
|
||||
NOUNS.choose(&mut rng).unwrap(),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
labels
|
||||
}
|
||||
}
|
||||
|
||||
static App: Component = |cx| {
|
||||
let mut items = use_ref(&cx, || vec![]);
|
||||
let mut selected = use_state(&cx, || None);
|
||||
|
||||
cx.render(rsx! {
|
||||
div { class: "container"
|
||||
div { class: "jumbotron"
|
||||
div { class: "row"
|
||||
div { class: "col-md-6", h1 { "Dioxus" } }
|
||||
div { class: "col-md-6"
|
||||
div { class: "row"
|
||||
ActionButton { name: "Create 1,000 rows", id: "run",
|
||||
onclick: move || items.set(Label::new_list(1_000)),
|
||||
}
|
||||
ActionButton { name: "Create 10,000 rows", id: "runlots",
|
||||
onclick: move || items.set(Label::new_list(10_000)),
|
||||
}
|
||||
ActionButton { name: "Append 1,000 rows", id: "add",
|
||||
onclick: move || items.write().extend(Label::new_list(1_000)),
|
||||
}
|
||||
ActionButton { name: "Update every 10th row", id: "update",
|
||||
onclick: move || items.write().iter_mut().step_by(10).for_each(|item| item.labels[2] = "!!!"),
|
||||
}
|
||||
ActionButton { name: "Clear", id: "clear",
|
||||
onclick: move || items.write().clear(),
|
||||
}
|
||||
ActionButton { name: "Swap Rows", id: "swaprows",
|
||||
onclick: move || items.write().swap(0, 998),
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
table { class: "table table-hover table-striped test-data"
|
||||
tbody { id: "tbody"
|
||||
{items.read().iter().enumerate().map(|(id, item)| {
|
||||
let [adj, col, noun] = item.labels;
|
||||
let is_in_danger = if (*selected).map(|s| s == id).unwrap_or(false) {"danger"} else {""};
|
||||
rsx!(tr {
|
||||
class: "{is_in_danger}",
|
||||
key: "{id}",
|
||||
td { class:"col-md-1" }
|
||||
td { class:"col-md-1", "{item.key}" }
|
||||
td { class:"col-md-1", onclick: move |_| selected.set(Some(id)),
|
||||
a { class: "lbl", "{adj} {col} {noun}" }
|
||||
}
|
||||
td { class: "col-md-1"
|
||||
a { class: "remove", onclick: move |_| { items.write().remove(id); },
|
||||
span { class: "glyphicon glyphicon-remove remove" aria_hidden: "true" }
|
||||
}
|
||||
}
|
||||
td { class: "col-md-6" }
|
||||
})
|
||||
})}
|
||||
}
|
||||
}
|
||||
span { class: "preloadicon glyphicon glyphicon-remove" aria_hidden: "true" }
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
#[derive(Props)]
|
||||
struct ActionButtonProps<'a> {
|
||||
name: &'static str,
|
||||
id: &'static str,
|
||||
onclick: &'a dyn Fn(),
|
||||
}
|
||||
|
||||
fn ActionButton<'a>(cx: Scope<'a, ActionButtonProps<'a>>) -> Element {
|
||||
rsx!(cx, div { class: "col-sm-6 smallpad"
|
||||
button { class:"btn btn-primary btn-block", r#type: "button", id: "{cx.props.id}", onclick: move |_| (cx.props.onclick)(),
|
||||
"{cx.props.name}"
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static ADJECTIVES: &[&str] = &[
|
||||
"pretty",
|
||||
"large",
|
||||
"big",
|
||||
"small",
|
||||
"tall",
|
||||
"short",
|
||||
"long",
|
||||
"handsome",
|
||||
"plain",
|
||||
"quaint",
|
||||
"clean",
|
||||
"elegant",
|
||||
"easy",
|
||||
"angry",
|
||||
"crazy",
|
||||
"helpful",
|
||||
"mushy",
|
||||
"odd",
|
||||
"unsightly",
|
||||
"adorable",
|
||||
"important",
|
||||
"inexpensive",
|
||||
"cheap",
|
||||
"expensive",
|
||||
"fancy",
|
||||
];
|
||||
|
||||
static COLOURS: &[&str] = &[
|
||||
"red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black",
|
||||
"orange",
|
||||
];
|
||||
|
||||
static NOUNS: &[&str] = &[
|
||||
"table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger",
|
||||
"pizza", "mouse", "keyboard",
|
||||
];
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
//! Example: README.md showcase
|
||||
//!
|
||||
//! The example from the README.md.
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_core as dioxus;
|
||||
use dioxus_core_macro::*;
|
||||
use dioxus_hooks::use_state;
|
||||
use dioxus_html as dioxus_elements;
|
||||
|
||||
fn main() {
|
||||
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
|
||||
dioxus_web::launch(App);
|
||||
}
|
||||
|
||||
static App: Component = |cx| {
|
||||
let show = use_state(&cx, || true);
|
||||
|
||||
let inner = match *show {
|
||||
true => {
|
||||
rsx!( div {
|
||||
"hello world"
|
||||
})
|
||||
}
|
||||
false => {
|
||||
rsx!( div {
|
||||
// h1 {
|
||||
"bello world"
|
||||
// }
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
rsx!(cx, div {
|
||||
button {
|
||||
"toggle"
|
||||
onclick: move |_| {
|
||||
let cur = *show;
|
||||
show.set(!cur);
|
||||
}
|
||||
}
|
||||
{inner}
|
||||
})
|
||||
};
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
#![allow(non_upper_case_globals)]
|
||||
|
||||
//! Example: README.md showcase
|
||||
//!
|
||||
//! The example from the README.md.
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_core as dioxus;
|
||||
use dioxus_core_macro::*;
|
||||
use dioxus_html as dioxus_elements;
|
||||
use dioxus_web;
|
||||
|
||||
fn main() {
|
||||
dioxus_web::launch(App);
|
||||
}
|
||||
|
||||
static App: Component = |cx| {
|
||||
todo!("suspense is broken")
|
||||
// let doggo = suspend(|| async move {
|
||||
// #[derive(serde::Deserialize)]
|
||||
// struct Doggo {
|
||||
// message: String,
|
||||
// }
|
||||
|
||||
// let src = reqwest::get("https://dog.ceo/api/breeds/image/random")
|
||||
// .await
|
||||
// .expect("Failed to fetch doggo")
|
||||
// .json::<Doggo>()
|
||||
// .await
|
||||
// .expect("Failed to parse doggo")
|
||||
// .message;
|
||||
|
||||
// rsx!(cx, img { src: "{src}" })
|
||||
// });
|
||||
|
||||
// rsx!(cx, div {
|
||||
// h1 {"One doggo coming right up"}
|
||||
// button { onclick: move |_| cx.needs_update(), "Get a new doggo" }
|
||||
// {doggo}
|
||||
// })
|
||||
};
|
||||
Loading…
Reference in a new issue