Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-10 06:34:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use head elements and new manganis syntax in examples (#2688)

Browse source 
* use head elements and new manganis syntax in examples
* only enable desktop workspace example scraping during a dioxus release

---------

Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>
This commit is contained in:
Evan Almloff 2024-07-25 23:58:00 +02:00 committed by GitHub
parent bd58a92441
commit c6a2e5b6c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 379 additions and 374 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

340
Cargo.lock generated
View file

File diff suppressed because it is too large Load diff

4
examples/all_events.rs
View file

@ -6,7 +6,7 @@
use dioxus::prelude::*;
use std::{collections::VecDeque, fmt::Debug, rc::Rc};
const STYLE: &str = asset!(file("./examples/assets/events.css"));
const STYLE: &str = asset!("./examples/assets/events.css");
fn main() {
launch(app);
@ -26,7 +26,7 @@ fn app() -> Element {
};
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
div { id: "container",
// focusing is necessary to catch keyboard events
div { id: "receiver", tabindex: 0,

13
examples/assets/overlay.css Normal file
View file

@ -0,0 +1,13 @@
html, body {
height: 100px;
margin: 0;
overscroll-behavior-y: none;
overscroll-behavior-x: none;
overflow: hidden;
}
#main, #bodywrap {
height: 100%;
margin: 0;
overscroll-behavior-x: none;
overscroll-behavior-y: none;
}

9
examples/assets/read_size.css Normal file
View file

@ -0,0 +1,9 @@
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#main {
height: 100%;
width: 100%;
}

4
examples/calculator.rs
View file

@ -12,7 +12,7 @@ use dioxus::events::*;
use dioxus::html::input_data::keyboard_types::Key;
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/calculator.css"));
const STYLE: &str = asset!("./examples/assets/calculator.css");
fn main() {
LaunchBuilder::desktop()
@ -54,7 +54,7 @@ fn app() -> Element {
};
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
div { id: "wrapper",
div { class: "app",
div { class: "calculator", tabindex: "0", onkeydown: handle_key_down_event,

4
examples/calculator_mutable.rs
View file

@ -25,13 +25,11 @@ fn main() {
.launch(app);
}
const STYLE: &str = include_str!("./assets/calculator.css");
fn app() -> Element {
let mut state = use_signal(Calculator::new);
rsx! {
style { {STYLE} }
head::Link { rel: "stylesheet", href: asset!("./examples/assets/calculator.css") }
div { id: "wrapper",
div { class: "app",
div {

4
examples/clock.rs
View file

@ -5,7 +5,7 @@
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/clock.css"));
const STYLE: &str = asset!("./examples/assets/clock.css");
fn main() {
launch_desktop(app);
@ -38,7 +38,7 @@ fn app() -> Element {
);
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
div { id: "app",
div { id: "title", "Carpe diem 🎉" }
div { id: "clock-display", "{time}" }

4
examples/control_focus.rs
View file

@ -6,7 +6,7 @@
use dioxus::prelude::*;
use std::rc::Rc;
const STYLE: &str = asset!(file("./examples/assets/roulette.css"));
const STYLE: &str = asset!("./examples/assets/roulette.css");
fn main() {
launch_desktop(app);
@ -38,7 +38,7 @@ fn app() -> Element {
});
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
h1 { "Input Roulette" }
button { onclick: move |_| running.toggle(), "Toggle roulette" }
div { id: "roulette-grid",

4
examples/counters.rs
View file

@ -2,7 +2,7 @@
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/counter.css"));
const STYLE: &str = asset!("./examples/assets/counter.css");
fn main() {
launch(app);
@ -16,7 +16,7 @@ fn app() -> Element {
let sum = use_memo(move || counters.read().iter().copied().sum::<i32>());
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
div { id: "controls",
button { onclick: move |_| counters.write().push(0), "Add counter" }

8
examples/crm.rs
View file

@ -11,8 +11,6 @@
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/crm.css"));
fn main() {
LaunchBuilder::new()
.with_cfg(desktop!({
@ -22,13 +20,13 @@ fn main() {
}))
.launch(|| {
rsx! {
link {
head::Link {
rel: "stylesheet",
href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
href: asset!("https://unpkg.com/purecss@2.0.6/build/pure-min.css"),
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
crossorigin: "anonymous"
}
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: asset!("./examples/assets/crm.css") }
h1 { "Dioxus CRM Example" }
Router::<Route> {}
}

3
examples/custom_assets.rs
View file

@ -11,8 +11,7 @@ use dioxus::prelude::*;
static ASSET_PATH: &str = "examples/assets/logo.png";
#[cfg(feature = "collect-assets")]
static ASSET_PATH: &str =
manganis::mg!(image("examples/assets/logo.png").format(ImageType::Avif)).path();
static ASSET_PATH: &str = asset!("examples/assets/logo.png".format(ImageType::Avif));
fn main() {
launch(app);

4
examples/dynamic_asset.rs
View file

@ -7,7 +7,7 @@
use dioxus::desktop::{use_asset_handler, wry::http::Response};
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/custom_assets.css"));
const STYLE: &str = asset!("./examples/assets/custom_assets.css");
fn main() {
launch_desktop(app);
@ -24,7 +24,7 @@ fn app() -> Element {
});
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
h1 { "Dynamic Assets" }
img { src: "/logos/logo.png" }
}

13
examples/file_explorer.rs
View file

@ -14,25 +14,22 @@ fn main() {
.launch(app)
}
#[cfg(not(feature = "collect-assets"))]
const _STYLE: &str = include_str!("../examples/assets/fileexplorer.css");
#[cfg(feature = "collect-assets")]
const _STYLE: &str = manganis::mg!(file("./examples/assets/fileexplorer.css"));
fn app() -> Element {
let mut files = use_signal(Files::new);
rsx! {
head::Link {
rel: "stylesheet",
href: asset!("./examples/assets/fileexplorer.css")
}
div {
link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet" }
head::Link { href: "https://fonts.googleapis.com/icon?family=Material+Icons", rel: "stylesheet" }
header {
i { class: "material-icons icon-menu", "menu" }
h1 { "Files: " {files.read().current()} }
span { }
i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" }
}
style { "{_STYLE}" }
main {
for (dir_id, path) in files.read().path_names.iter().enumerate() {
{

4
examples/file_upload.rs
View file

@ -8,7 +8,7 @@ use std::sync::Arc;
use dioxus::prelude::*;
use dioxus::{html::HasFileData, prelude::dioxus_elements::FileEngine};
const STYLE: &str = asset!(file("./examples/assets/file_upload.css"));
const STYLE: &str = asset!("./examples/assets/file_upload.css");
fn main() {
launch(app);
@ -43,7 +43,7 @@ fn app() -> Element {
};
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
h1 { "File Upload Example" }
p { "Drop a .txt, .rs, or .js file here to read it" }

4
examples/flat_router.rs
View file

@ -9,12 +9,12 @@
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/flat_router.css"));
const STYLE: &str = asset!("./examples/assets/flat_router.css");
fn main() {
launch(|| {
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
Router::<Route> {}
}
})

4
examples/global.rs
View file

@ -7,7 +7,7 @@
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/counter.css"));
const STYLE: &str = asset!("./examples/assets/counter.css");
static COUNT: GlobalSignal<i32> = Signal::global(|| 0);
static DOUBLED_COUNT: GlobalMemo<i32> = Signal::global_memo(|| COUNT() * 2);
@ -18,7 +18,7 @@ fn main() {
fn app() -> Element {
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
Increment {}
Decrement {}
Reset {}

2
examples/image_generator_openai.rs
View file

@ -36,7 +36,7 @@ fn app() -> Element {
});
rsx! {
head { link { rel: "stylesheet", href: "https://unpkg.com/bulma@0.9.0/css/bulma.min.css" } }
head::Link { rel: "stylesheet", href: "https://unpkg.com/bulma@0.9.0/css/bulma.min.css" }
div { class: "container",
div { class: "columns",
div { class: "column",

4
examples/link.rs
View file

@ -8,7 +8,7 @@
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/links.css"));
const STYLE: &str = asset!("./examples/assets/links.css");
fn main() {
launch(app);
@ -16,7 +16,7 @@ fn main() {
fn app() -> Element {
rsx! (
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
Router::<Route> {}
)
}

27
examples/overlay.rs
View file

@ -20,6 +20,10 @@ fn app() -> Element {
_ = use_global_shortcut("cmd+g", move || show_overlay.toggle());
rsx! {
head::Link {
rel: "stylesheet",
href: asset!("./examples/assets/overlay.css"),
}
if show_overlay() {
div {
width: "100%",
@ -41,28 +45,7 @@ fn app() -> Element {
}
fn make_config() -> dioxus::desktop::Config {
dioxus::desktop::Config::default()
.with_window(make_window())
.with_custom_head(
r#"
<style type="text/css">
html, body {
height: 100px;
margin: 0;
overscroll-behavior-y: none;
overscroll-behavior-x: none;
overflow: hidden;
}
#main, #bodywrap {
height: 100%;
margin: 0;
overscroll-behavior-x: none;
overscroll-behavior-y: none;
}
</style>
"#
.to_owned(),
)
dioxus::desktop::Config::default().with_window(make_window())
}
fn make_window() -> WindowBuilder {

22
examples/read_size.rs
View file

@ -9,26 +9,7 @@ use std::rc::Rc;
use dioxus::{html::geometry::euclid::Rect, prelude::*};
fn main() {
LaunchBuilder::desktop()
.with_cfg(
dioxus::desktop::Config::default().with_custom_head(
r#"
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#main {
height: 100%;
width: 100%;
}
</style>
"#
.to_owned(),
),
)
.launch(app);
launch(app);
}
fn app() -> Element {
@ -47,6 +28,7 @@ fn app() -> Element {
};
rsx!(
head::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
div {
width: "50%",
height: "50%",

4
examples/reducer.rs
View file

@ -7,7 +7,7 @@
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/radio.css"));
const STYLE: &str = asset!("./examples/assets/radio.css");
fn main() {
launch(app);
@ -17,7 +17,7 @@ fn app() -> Element {
let mut state = use_signal(|| PlayerState { is_playing: false });
rsx!(
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
h1 {"Select an option"}
// Add some cute animations if the radio is playing!

4
examples/router.rs
View file

@ -8,12 +8,12 @@
use dioxus::prelude::*;
const STYLE: &str = asset!(file("./examples/assets/router.css"));
const STYLE: &str = asset!("./examples/assets/router.css");
fn main() {
launch(|| {
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
Router::<Route> {}
}
});

2
examples/tailwind/src/main.rs
View file

@ -2,7 +2,7 @@
use dioxus::prelude::*;
const _STYLE: &str = manganis::mg!(file("public/tailwind.css"));
const _STYLE: &str = asset!("public/tailwind.css");
fn main() {
launch(app);

4
examples/todomvc.rs
View file

@ -3,7 +3,7 @@
use dioxus::prelude::*;
use std::collections::HashMap;
const STYLE: &str = asset!(file("./examples/assets/todomvc.css"));
const STYLE: &str = asset!("./examples/assets/todomvc.css");
fn main() {
launch(app);
@ -65,7 +65,7 @@ fn app() -> Element {
};
rsx! {
link { rel: "stylesheet", href: STYLE }
head::Link { rel: "stylesheet", href: STYLE }
section { class: "todoapp",
TodoHeader { todos }
section { class: "main",

2
examples/weather_app.rs
View file

@ -19,7 +19,7 @@ fn app() -> Element {
let current_weather = use_resource(move || async move { get_weather(&country()).await });
rsx! {
link { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" }
head::Link { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" }
div { class: "mx-auto p-4 bg-gray-100 h-screen flex justify-center",
div { class: "flex items-center justify-center flex-row",
div { class: "flex items-start justify-center flex-row",

2
examples/window_event.rs
View file

@ -26,7 +26,7 @@ fn main() {
fn app() -> Element {
rsx!(
link { href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel: "stylesheet" }
head::Link { href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel: "stylesheet" }
Header {}
div { class: "container mx-auto",
div { class: "grid grid-cols-5",

91
packages/desktop/Cargo.toml
View file

@ -118,94 +118,3 @@ harness = false
name = "check_eval"
path = "headless_tests/eval.rs"
harness = false
# Most of the examples live in the workspace. We include some here so that docs.rs can scrape our examples for better inline docs
[[example]]
name = "video_stream"
path = "../../examples/video_stream.rs"
doc-scrape-examples = true
[[example]]
name = "suspense"
path = "../../examples/suspense.rs"
doc-scrape-examples = true
[[example]]
name = "calculator_mutable"
path = "../../examples/calculator_mutable.rs"
doc-scrape-examples = true
[[example]]
name = "custom_html"
path = "../../examples/custom_html.rs"
doc-scrape-examples = true
[[example]]
name = "custom_menu"
path = "../../examples/custom_menu.rs"
doc-scrape-examples = true
[[example]]
name = "errors"
path = "../../examples/errors.rs"
doc-scrape-examples = true
[[example]]
name = "file_explorer"
path = "../../examples/file_explorer.rs"
doc-scrape-examples = true
[[example]]
name = "future"
path = "../../examples/future.rs"
doc-scrape-examples = true
[[example]]
name = "hydration"
path = "../../examples/hydration.rs"
doc-scrape-examples = true
[[example]]
name = "multiwindow"
path = "../../examples/multiwindow.rs"
doc-scrape-examples = true
[[example]]
name = "overlay"
path = "../../examples/overlay.rs"
doc-scrape-examples = true
[[example]]
name = "popup"
path = "../../examples/popup.rs"
doc-scrape-examples = true
[[example]]
name = "read_size"
path = "../../examples/read_size.rs"
doc-scrape-examples = true
[[example]]
name = "shortcut"
path = "../../examples/shortcut.rs"
doc-scrape-examples = true
[[example]]
name = "streams"
path = "../../examples/streams.rs"
doc-scrape-examples = true
[[example]]
name = "window_event"
path = "../../examples/window_event.rs"
doc-scrape-examples = true
[[example]]
name = "window_focus"
path = "../../examples/window_focus.rs"
doc-scrape-examples = true
[[example]]
name = "window_zoom"
path = "../../examples/window_zoom.rs"
doc-scrape-examples = true

120
packages/desktop/build.rs
View file

@ -1,3 +1,5 @@
use std::{io::Write as _, path::PathBuf};
fn check_gnu() {
// WARN about wry support on windows gnu targets. GNU windows targets don't work well in wry currently
if std::env::var("CARGO_CFG_WINDOWS").is_ok()
@ -6,8 +8,126 @@ fn check_gnu() {
{
println!("cargo:warning=GNU windows targets have some limitations within Wry. Using the MSVC windows toolchain is recommended. If you would like to use continue using GNU, you can read https://github.com/wravery/webview2-rs#cross-compilation and disable this warning by adding the gnu feature to dioxus-desktop in your Cargo.toml")
}
// To prepare for a release, we add extra examples to desktop for doc scraping and copy assets from the workspace to make those examples compile
if option_env!("DIOXUS_RELEASE").is_some() {
// Append EXAMPLES_TOML to the cargo.toml
let cargo_toml = std::fs::OpenOptions::new()
.append(true)
.open("Cargo.toml")
.unwrap();
let mut write = std::io::BufWriter::new(cargo_toml);
write.write_all(EXAMPLES_TOML.as_bytes()).unwrap();
// Copy the assets from the workspace to the examples directory
let crate_dir = PathBuf::from(std::env::var("CARGO_MANIFEST_DIR").unwrap());
let workspace_dir = crate_dir.parent().unwrap().parent().unwrap();
let workspace_assets_dir = workspace_dir.join("examples").join("assets");
let desktop_assets_dir = PathBuf::from("examples").join("assets");
std::fs::create_dir_all(&desktop_assets_dir).unwrap();
// move all files from the workspace assets dir to the desktop assets dir
for entry in std::fs::read_dir(workspace_assets_dir).unwrap() {
let entry = entry.unwrap();
let path = entry.path();
if path.is_file() {
std::fs::copy(&path, desktop_assets_dir.join(path.file_name().unwrap())).unwrap();
}
}
}
}
fn main() {
check_gnu();
}
const EXAMPLES_TOML: &str = r#"
# Most of the examples live in the workspace. We include some here so that docs.rs can scrape our examples for better inline docs
[[example]]
name = "video_stream"
path = "../../examples/video_stream.rs"
doc-scrape-examples = true
[[example]]
name = "suspense"
path = "../../examples/suspense.rs"
doc-scrape-examples = true
[[example]]
name = "calculator_mutable"
path = "../../examples/calculator_mutable.rs"
doc-scrape-examples = true
[[example]]
name = "custom_html"
path = "../../examples/custom_html.rs"
doc-scrape-examples = true
[[example]]
name = "custom_menu"
path = "../../examples/custom_menu.rs"
doc-scrape-examples = true
[[example]]
name = "errors"
path = "../../examples/errors.rs"
doc-scrape-examples = true
[[example]]
name = "file_explorer"
path = "../../examples/file_explorer.rs"
doc-scrape-examples = true
[[example]]
name = "future"
path = "../../examples/future.rs"
doc-scrape-examples = true
[[example]]
name = "hydration"
path = "../../examples/hydration.rs"
doc-scrape-examples = true
[[example]]
name = "multiwindow"
path = "../../examples/multiwindow.rs"
doc-scrape-examples = true
[[example]]
name = "overlay"
path = "../../examples/overlay.rs"
doc-scrape-examples = true
[[example]]
name = "popup"
path = "../../examples/popup.rs"
doc-scrape-examples = true
[[example]]
name = "read_size"
path = "../../examples/read_size.rs"
doc-scrape-examples = true
[[example]]
name = "shortcut"
path = "../../examples/shortcut.rs"
doc-scrape-examples = true
[[example]]
name = "streams"
path = "../../examples/streams.rs"
doc-scrape-examples = true
[[example]]
name = "window_event"
path = "../../examples/window_event.rs"
doc-scrape-examples = true
[[example]]
name = "window_focus"
path = "../../examples/window_focus.rs"
doc-scrape-examples = true
[[example]]
name = "window_zoom"
path = "../../examples/window_zoom.rs"
doc-scrape-examples = true"#;

17
packages/fullstack/examples/hackernews/assets/hackernews.css Normal file
View file

@ -0,0 +1,17 @@
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
width: 10px;
height: 10px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}

22
packages/fullstack/examples/hackernews/src/main.rs
View file

@ -33,30 +33,10 @@ pub fn App() -> Element {
}
}
const STYLE: &str = r#"@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
width: 10px;
height: 10px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}"#;
#[component]
fn Homepage(story: ReadOnlySignal<PreviewState>) -> Element {
rsx! {
style {
{STYLE}
}
head::Link { rel: "stylesheet", href: asset!("./assets/hackernews.css") }
div { display: "flex", flex_direction: "row", width: "100%",
div {
width: "50%",

4
packages/html/src/document/head.rs
View file

@ -245,7 +245,7 @@ impl ScriptProps {
/// rsx! {
/// // You can use the Script component to render a script tag into the head of the page
/// Script {
/// src: manganis::mg!(file("./assets/script.js")),
/// src: asset!("./assets/script.js"),
/// }
/// }
/// }
@ -435,7 +435,7 @@ impl LinkProps {
/// // You can use the meta component to render a meta tag into the head of the page
/// // This meta tag will redirect the user to the dioxuslabs homepage in 10 seconds
/// head::Link {
/// href: manganis::mg!(file("./assets/style.css")),
/// href: asset!("./assets/style.css"),
/// rel: "stylesheet",
/// }
/// }