From 807df71eb76ddb5d100e28717b916011da04cd0c Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Thu, 6 Mar 2025 16:02:30 +0000 Subject: [PATCH 01/14] doc: Add cheat sheet --- docs-src/0.6/src/SUMMARY.md | 1 + docs-src/0.6/src/reference/cheat_sheet.md | 3 + docs-src/0.6/src/reference/cheat_sheet.txt | 141 +++++++++++++++++++++ 3 files changed, 145 insertions(+) create mode 100644 docs-src/0.6/src/reference/cheat_sheet.md create mode 100644 docs-src/0.6/src/reference/cheat_sheet.txt diff --git a/docs-src/0.6/src/SUMMARY.md b/docs-src/0.6/src/SUMMARY.md index 86603c976..83db53b07 100644 --- a/docs-src/0.6/src/SUMMARY.md +++ b/docs-src/0.6/src/SUMMARY.md @@ -94,6 +94,7 @@ - [Resource](reference/use_resource.md) - [UseCoroutine](reference/use_coroutine.md) - [Spawn](reference/spawn.md) + - [Cheat Sheet](reference/cheat_sheet.md) --- - [Contributing](contributing/index.md) diff --git a/docs-src/0.6/src/reference/cheat_sheet.md b/docs-src/0.6/src/reference/cheat_sheet.md new file mode 100644 index 000000000..60bcaaee8 --- /dev/null +++ b/docs-src/0.6/src/reference/cheat_sheet.md @@ -0,0 +1,3 @@ +# State and Hooks Cheat Sheet + +![State And Hooks Cheat Sheet](/assets/06_docs/state_and_hooks_cheat_sheet.svg) \ No newline at end of file diff --git a/docs-src/0.6/src/reference/cheat_sheet.txt b/docs-src/0.6/src/reference/cheat_sheet.txt new file mode 100644 index 000000000..7b1336bcf --- /dev/null +++ b/docs-src/0.6/src/reference/cheat_sheet.txt @@ -0,0 +1,141 @@ + flowchart TD + A("**Start**
Which scope does your state or utility belong to?") + + A --> B["Local
(per component)"] + A --> C["Shared
(Context)"] + A --> D["Persistent
(Storage)"] + A --> E["Global
(Truly app-wide)"] + A --> F["Route-based"] + + B --> LH("When does the code need to run?") + + LH --> Init["First Render (Non-Reactive)"] + LH --> BeforeRender["Before Every
Subsequent Render"] + LH --> Render["Render Phase (While Component Is Alive)"] + LH --> Post["Post Renders"] + LH --> Clean["Cleanup"] + + %% First Render + subgraph FR_Sync ["Sync"] + L14["**use_hook**
Run on the first use of the hook, which is typically the initial render"] + L16["**use_hook_with_cleanup**
Use a hook with a cleanup function that runs when component is dropped"] + U1["**use_debounce**
Calls a function only after provided duration has passed (dioxus_sdk)"] + U2["**use_interval**
Repeatedly calls a function every certain period (dioxus_sdk)"] + L18["**use_server_cached**
Runs a function on the server (or client if server is not enabled) and sends result to client. Caches the value on the client"] + end + + subgraph FR_Async ["Async"] + U3["**use_channel/use_listen_channel**
Create and listen to channels for communication between components (dioxus_sdk)"] + end + + Init --> FR_Sync + Init --> FR_Async + + %% Before Every Render + subgraph BR_Sync ["Sync"] + L19["**use_before_render**
Register a function to run before every subsequent render"] + end + + BeforeRender --> BR_Sync + + %% Render phase + subgraph RP_Sync ["Sync"] + L7["**use_callback**
Keeps a callback up to date for all references to the handle"] + L1["**use_signal**
Basic local state, triggers re-renders on write, does not subscribe to other signals"] + L1b["**use_signal_sync**
Thread-safe signal - Send + Sync"] + L3["**use_memo**
Derived state (memoized), composes signals"] + L10["**use_set_compare/use_set_compare_equal**
Efficient value change tracking"] + end + + subgraph RP_Both ["Sync & Async"] + L8["**use_reactive**
Creates a closure (async/sync) to track 'non-reactive' data"] + end + + subgraph RP_Async ["Async"] + L5["**use_future**
Run an async task once"] + L6["**use_coroutine**
Stream-based concurrency through channels"] + L4["**use_resource**
Async derived state"] + L15["**use_server_future**
Async derived state that runs on the server and caches on the client"] + end + + Render --> RP_Sync + Render --> RP_Both + Render --> RP_Async + + %% Post render + subgraph PR_Sync ["Sync"] + L2["**use_effect**
Side effects after render, composes signals"] + L9["**use_hook_did_run**
Lifecycle check if this hook has been called on the latest render"] + L17["**use_after_render**
Push a function to be run after the next render"] + end + + Post --> PR_Sync + + %% Cleanup + subgraph CL_Sync ["Sync"] + L13["**use_drop**
Callback invoked when component is dropped"] + end + + Clean --> CL_Sync + + %% Context + subgraph CT_Sync ["Sync"] + C1["**use_context_provider**
Provides data to any child"] + C2["**use_context**
Consume provided data"] + C3["**try_use_context**
Like use_context but returns None if missing"] + C4["**use_root_context**
Like use_context except creates context at root if missing"] + C5["**use_coroutine_handle**
Obtain handle to a context-provided coroutine"] + + subgraph CT_Utils ["Utils"] + C6["**use_clipboard**
Access the clipboard (dioxus_sdk)"] + C7["**use_window_size**
Initial window size will be returned with this hook and updated continously as the window is resized (dioxus_sdk)"] + C8["**use_geolocation**
Provides the latest geocoordinates. Good for navigation-type apps (dioxus_sdk)"] + C9["**use_system_theme**
Initial theme will be returned and updated if the system theme changes (dioxus_sdk)"] + end + end + + C --> CT_Sync + + %% Persistent + subgraph PS_Sync ["Sync"] + P1["**use_persistent**
Store data across application reloads as either local storage or a file storage (dioxus_sdk)"] + P2["**use_storage**
Like use_persistent except the storage location is generic, which may be useful for custom implementations (dioxus_sdk)"] + P3["**use_synced_storage**
Store data that persists and syncs across all app sessions (dioxus_sdk)"] + P4["**use_singleton_persistent**
Persistent storage shared for calls from same line (dioxus_sdk)"] + P5["**use_storage_entry**
Creates a StorageEntry with latest value from storage or init if does not exist (dioxus_sdk)"] + P6["**use_synced_storage_entry**
Creates a StorageEntry with updates subscription (dioxus_sdk)"] + end + + D --> PS_Sync + + %% Global + subgraph GB_Sync ["Sync"] + G1["**GlobalSignal**
Global signal (sync)"] + G2["**GlobalMemo**
Derived global state (sync)"] + G3["**Global**
A lazy value that is created once per application (sync)"] + end + + E --> GB_Sync + + %% Route + subgraph RT_Sync ["Sync"] + R3["**Routable**
The dioxus-router macro used for routing"] + + subgraph RT_Utils ["Utils"] + R1["**use_route**
Access information about the current routing location"] + R2["**use_navigator**
Access navigator to change router history"] + R4["**use_outlet_context**
Access to the outlet context for the route nesting level"] + end + end + + F --> RT_Sync + + %% Legend + subgraph Legend ["Legend"] + L_HIGHLIGHT["Frequently Used"] + L_NORMAL["Standard"] + end + + %% Styling + classDef frequentlyUsed fill:#ff9,stroke:#333,stroke-width:2px + class L_HIGHLIGHT,L1,L2,L3,L4,L5,L8,L14,C1,C2,R1,R2,R3,P1 frequentlyUsed \ No newline at end of file From 403f10f059d6998244c3fdb1320e7abed3d37f2c Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Thu, 6 Mar 2025 23:24:52 +0000 Subject: [PATCH 02/14] feat: Add mermaid block component --- docs-src/0.6/src/reference/cheat_sheet.md | 152 +++++++++++++++++++++- packages/docs-router/src/docs.rs | 140 ++++++++++++++++++++ 2 files changed, 291 insertions(+), 1 deletion(-) create mode 100644 packages/docs-router/src/docs.rs diff --git a/docs-src/0.6/src/reference/cheat_sheet.md b/docs-src/0.6/src/reference/cheat_sheet.md index 60bcaaee8..dcbe5359d 100644 --- a/docs-src/0.6/src/reference/cheat_sheet.md +++ b/docs-src/0.6/src/reference/cheat_sheet.md @@ -1,3 +1,153 @@ # State and Hooks Cheat Sheet -![State And Hooks Cheat Sheet](/assets/06_docs/state_and_hooks_cheat_sheet.svg) \ No newline at end of file +```inject-dioxus +MermaidBlock { + chart: r#"flowchart TD + A("**Start**
Which scope does your state or utility belong to?") + + A --> B["Local
(per component)"] + A --> C["Shared
(Context)"] + A --> D["Persistent
(Storage)"] + A --> E["Global
(Truly app-wide)"] + A --> F["Route-based"] + + B --> LH("When does the code need to run?") + + LH --> Init["First Render (Non-Reactive)"] + LH --> BeforeRender["Before Every
Subsequent Render"] + LH --> Render["Render Phase (While Component Is Alive)"] + LH --> Post["Post Renders"] + LH --> Clean["Cleanup"] + + %% First Render + subgraph FR_Sync ["Sync"] + L14["**use_hook**
Run on the first use of the hook, which is typically the initial render"] + L16["**use_hook_with_cleanup**
Use a hook with a cleanup function that runs when component is dropped"] + U1["**use_debounce**
Calls a function only after provided duration has passed (dioxus_sdk)"] + U2["**use_interval**
Repeatedly calls a function every certain period (dioxus_sdk)"] + L18["**use_server_cached**
Runs a function on the server (or client if server is not enabled) and sends result + to client. Caches the value on the client"] + end + + subgraph FR_Async ["Async"] + U3["**use_channel/use_listen_channel**
Create and listen to channels for communication between components + (dioxus_sdk)"] + end + + Init --> FR_Sync + Init --> FR_Async + + %% Before Every Render + subgraph BR_Sync ["Sync"] + L19["**use_before_render**
Register a function to run before every subsequent render"] + end + + BeforeRender --> BR_Sync + + %% Render phase + subgraph RP_Sync ["Sync"] + L7["**use_callback**
Keeps a callback up to date for all references to the handle"] + L1["**use_signal**
Basic local state, triggers re-renders on write, does not subscribe to other signals"] + L1b["**use_signal_sync**
Thread-safe signal - Send + Sync"] + L3["**use_memo**
Derived state (memoized), composes signals"] + L10["**use_set_compare/use_set_compare_equal**
Efficient value change tracking"] + end + + subgraph RP_Both ["Sync & Async"] + L8["**use_reactive**
Creates a closure (async/sync) to track 'non-reactive' data"] + end + + subgraph RP_Async ["Async"] + L5["**use_future**
Run an async task once"] + L6["**use_coroutine**
Stream-based concurrency through channels"] + L4["**use_resource**
Async derived state"] + L15["**use_server_future**
Async derived state that runs on the server and caches on the client"] + end + + Render --> RP_Sync + Render --> RP_Both + Render --> RP_Async + + %% Post render + subgraph PR_Sync ["Sync"] + L2["**use_effect**
Side effects after render, composes signals"] + L9["**use_hook_did_run**
Lifecycle check if this hook has been called on the latest render"] + L17["**use_after_render**
Push a function to be run after the next render"] + end + + Post --> PR_Sync + + %% Cleanup + subgraph CL_Sync ["Sync"] + L13["**use_drop**
Callback invoked when component is dropped"] + end + + Clean --> CL_Sync + + %% Context + subgraph CT_Sync ["Sync"] + C1["**use_context_provider**
Provides data to any child"] + C2["**use_context**
Consume provided data"] + C3["**try_use_context**
Like use_context but returns None if missing"] + C4["**use_root_context**
Like use_context except creates context at root if missing"] + C5["**use_coroutine_handle**
Obtain handle to a context-provided coroutine"] + + subgraph CT_Utils ["Utils"] + C6["**use_clipboard**
Access the clipboard (dioxus_sdk)"] + C7["**use_window_size**
Initial window size will be returned with this hook and updated continously as the + window is resized (dioxus_sdk)"] + C8["**use_geolocation**
Provides the latest geocoordinates. Good for navigation-type apps (dioxus_sdk)"] + C9["**use_system_theme**
Initial theme will be returned and updated if the system theme changes (dioxus_sdk)"] + end + end + + C --> CT_Sync + + %% Persistent + subgraph PS_Sync ["Sync"] + P1["**use_persistent**
Store data across application reloads as either local storage or a file storage + (dioxus_sdk)"] + P2["**use_storage**
Like use_persistent except the storage location is generic, which may be useful for custom + implementations (dioxus_sdk)"] + P3["**use_synced_storage**
Store data that persists and syncs across all app sessions (dioxus_sdk)"] + P4["**use_singleton_persistent**
Persistent storage shared for calls from same line (dioxus_sdk)"] + P5["**use_storage_entry**
Creates a StorageEntry with latest value from storage or init if does not exist + (dioxus_sdk)"] + P6["**use_synced_storage_entry**
Creates a StorageEntry with updates subscription (dioxus_sdk)"] + end + + D --> PS_Sync + + %% Global + subgraph GB_Sync ["Sync"] + G1["**GlobalSignal**
Global signal (sync)"] + G2["**GlobalMemo**
Derived global state (sync)"] + G3["**Global**
A lazy value that is created once per application (sync)"] + end + + E --> GB_Sync + + %% Route + subgraph RT_Sync ["Sync"] + R3["**Routable**
The dioxus-router macro used for routing"] + + subgraph RT_Utils ["Utils"] + R1["**use_route**
Access information about the current routing location"] + R2["**use_navigator**
Access navigator to change router history"] + R4["**use_outlet_context**
Access to the outlet context for the route nesting level"] + end + end + + F --> RT_Sync + + %% Legend + subgraph Legend ["Legend"] + L_HIGHLIGHT["Frequently Used"] + L_NORMAL["Standard"] + end + + %% Styling + classDef frequentlyUsed fill:#ff9,stroke:#333,stroke-width:2px + class L_HIGHLIGHT,L1,L2,L3,L4,L5,L8,L14,C1,C2,R1,R2,R3,P1 frequentlyUsed"# +} +``` \ No newline at end of file diff --git a/packages/docs-router/src/docs.rs b/packages/docs-router/src/docs.rs new file mode 100644 index 000000000..13cc4cf81 --- /dev/null +++ b/packages/docs-router/src/docs.rs @@ -0,0 +1,140 @@ +use crate::desktop_dependencies::*; +use crate::doc_examples::*; +use dioxus::prelude::*; +use std::hash::Hash; + +pub mod router_03; +pub mod router_04; +pub mod router_05; +pub mod router_06; +pub mod router_blog; + +#[component] +fn SandBoxFrame(url: String) -> Element { + rsx! { + iframe { + style: "border: 1px solid rgba(0, 0, 0, 0.1);border-radius:2px;", + width: "800", + height: "450", + src: "{url}?embed=1", + "allowfullscreen": true, + } + } +} + +#[component] +fn DemoFrame(children: Element) -> Element { + rsx! { + div { + class: "bg-white rounded-md shadow-md p-4 my-4 overflow-auto text-black dioxus-demo", + max_height: "50vh", + {children} + } + } +} + +fn LayoutsExplanation() -> Element { + rsx! { + pre { onmouseenter: move |_| {}, onmouseleave: move |_| {}, + span { + "#[derive(Clone, Routable, PartialEq, Eq, Serialize, Deserialize)] +#[rustfmt::skip] +pub enum Route {{\n\t" + } + span { + onmouseenter: move |_| {}, + onmouseleave: move |_| {}, + class: "border border-orange-600 rounded-md", + "#[layout(HeaderFooter)]" + } + span { "\n\t\t// ... other routes\n\t\t" } + span { + onmouseenter: move |_| {}, + onmouseleave: move |_| {}, + class: "border border-green-600 rounded-md", + r##"#[layout(DocsSidebars)]"## + } + "\n\t\t\t" + span { + onmouseenter: move |_| {}, + onmouseleave: move |_| {}, + class: "border border-blue-600 rounded-md", + r##"#[route("/learn")]"## + } + span { "\n\t\t\tDocs {{}},\n}}" } + } + } +} + +#[component] +fn CodeBlock(contents: String, name: Option) -> Element { + let mut copied = use_signal(|| false); + rsx! { + div { class: "border overflow-hidden rounded-md border-gray-300 dark:border-gray-700 mb-8", + div { class: "w-full bg-red flex flex-row justify-between border-b border-gray-300 dark:border-gray-700 py-1 px-2 text-xs items-center bg-gray-100 dark:bg-ideblack", + div { class: "font-mono", + if let Some(path) = name { + "src/{path}" + } + } + button { + class: "hover:text-blue-600 flex flex-row items-center gap-1", + class: if copied() { "text-green-600" }, + "onclick": "navigator.clipboard.writeText(this.parentNode.parentNode.lastChild.innerText);", + onclick: move |_| copied.set(true), + if copied() { + "Copied!" + } + span { Copy {} } + } + } + div { class: "codeblock", dangerous_inner_html: contents } + } + } +} + +#[component] +fn MermaidBlock(chart: &'static str) -> Element { + rsx! { + div { + document::Link { rel: "stylesheet", href: asset!("assets/mermaid_block.css") } + div { class: "diagram-container", style: "height: 600px;", + div { class: "diagram-wrapper", id: "diagram-wrapper", + pre { class: "mermaid", dangerous_inner_html: "{chart}" } + script { r#type: "module", + r#" +import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/+esm'; +mermaid.initialize({{ startOnLoad: false }}); +const mermaidElements = document.querySelectorAll('.mermaid'); +mermaidElements.forEach((element, index) => {{ + element.textContent = element.textContent.trim(); +}}); +mermaid.run().catch(error => {{ + console.error('Mermaid rendering error:', error); +}}); + "# + } + } + div { class: "zoom-controls", + button { class: "zoom-in", "+" } + button { class: "zoom-reset", "Reset" } + button { class: "zoom-out", "-" } + div { class: "zoom-level", "100%" } + } + } + } + } +} + +pub(crate) static Copy: Component<()> = |_| { + rsx!( + svg { + width: "24", + height: "24", + stroke_width: "1.5", + fill: "none", + stroke: "currentColor", + path { d: "M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8" } + } + ) +}; From 6fee4ec43d6dac16b45130c8191f37035b3929b8 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Fri, 7 Mar 2025 02:54:04 +0000 Subject: [PATCH 03/14] feat: Add pan and zoom to mermaid block --- packages/docs-router/assets/mermaid_block.css | 8 ++++ packages/docs-router/src/docs.rs | 46 ++++++++++++------- 2 files changed, 38 insertions(+), 16 deletions(-) create mode 100644 packages/docs-router/assets/mermaid_block.css diff --git a/packages/docs-router/assets/mermaid_block.css b/packages/docs-router/assets/mermaid_block.css new file mode 100644 index 000000000..47cacc1dd --- /dev/null +++ b/packages/docs-router/assets/mermaid_block.css @@ -0,0 +1,8 @@ +.mermaid { + position: relative; + width: 100%; + overflow: hidden; + border: 1px solid #ddd; + margin: 20px 0px; + cursor: grab; +} \ No newline at end of file diff --git a/packages/docs-router/src/docs.rs b/packages/docs-router/src/docs.rs index 13cc4cf81..23b5bd9ce 100644 --- a/packages/docs-router/src/docs.rs +++ b/packages/docs-router/src/docs.rs @@ -98,29 +98,43 @@ fn MermaidBlock(chart: &'static str) -> Element { rsx! { div { document::Link { rel: "stylesheet", href: asset!("assets/mermaid_block.css") } - div { class: "diagram-container", style: "height: 600px;", - div { class: "diagram-wrapper", id: "diagram-wrapper", - pre { class: "mermaid", dangerous_inner_html: "{chart}" } - script { r#type: "module", - r#" + pre { + class: "mermaid", + style: "background-color: #fff", + dangerous_inner_html: "{chart}", + } + script { r#type: "module", + r#" import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/+esm'; -mermaid.initialize({{ startOnLoad: false }}); +import Panzoom from 'https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.6.0/+esm'; + +mermaid.initialize({{ + startOnLoad: false, +}}); + const mermaidElements = document.querySelectorAll('.mermaid'); +let elements = []; mermaidElements.forEach((element, index) => {{ + if (element.getAttribute('data-processed') === 'true') {{ + return; + }} element.textContent = element.textContent.trim(); + elements.push(element); }}); -mermaid.run().catch(error => {{ - console.error('Mermaid rendering error:', error); + +mermaid.run().then(() => {{ + elements.forEach((element, index) => {{ + let svg = element.firstElementChild; + const panzoom = Panzoom(svg, {{ + step: 1, + maxScale: 10, + minScale: 0.5, + }}); + element.addEventListener('wheel', panzoom.zoomWithWheel); + }}) }}); + "# - } - } - div { class: "zoom-controls", - button { class: "zoom-in", "+" } - button { class: "zoom-reset", "Reset" } - button { class: "zoom-out", "-" } - div { class: "zoom-level", "100%" } - } } } } From bc2a9124433c492bf4f73ed05b162ac51b088e82 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Fri, 7 Mar 2025 02:54:48 +0000 Subject: [PATCH 04/14] fix: Fix markdown body not expanding to full width --- packages/docsite/src/components/learn.rs | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/docsite/src/components/learn.rs b/packages/docsite/src/components/learn.rs index 2b809ae7f..a261cbadb 100644 --- a/packages/docsite/src/components/learn.rs +++ b/packages/docsite/src/components/learn.rs @@ -341,9 +341,7 @@ fn Content() -> Element { div { class: "", Breadcrumbs:: {} VersionWarning {} - div { class: "flex w-full flex-wrap list-none", - article { class: "markdown-body", Outlet:: {} } - } + article { class: "markdown-body w-full list-none", Outlet:: {} } NextPrev:: {} } } From 29685ca4c58757610b86ac107e9e8fc7ff7436e4 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Fri, 7 Mar 2025 02:55:37 +0000 Subject: [PATCH 05/14] feat: Remove raw cheat sheet files --- docs-src/0.6/src/reference/cheat_sheet.txt | 141 --------------------- 1 file changed, 141 deletions(-) delete mode 100644 docs-src/0.6/src/reference/cheat_sheet.txt diff --git a/docs-src/0.6/src/reference/cheat_sheet.txt b/docs-src/0.6/src/reference/cheat_sheet.txt deleted file mode 100644 index 7b1336bcf..000000000 --- a/docs-src/0.6/src/reference/cheat_sheet.txt +++ /dev/null @@ -1,141 +0,0 @@ - flowchart TD - A("**Start**
Which scope does your state or utility belong to?") - - A --> B["Local
(per component)"] - A --> C["Shared
(Context)"] - A --> D["Persistent
(Storage)"] - A --> E["Global
(Truly app-wide)"] - A --> F["Route-based"] - - B --> LH("When does the code need to run?") - - LH --> Init["First Render (Non-Reactive)"] - LH --> BeforeRender["Before Every
Subsequent Render"] - LH --> Render["Render Phase (While Component Is Alive)"] - LH --> Post["Post Renders"] - LH --> Clean["Cleanup"] - - %% First Render - subgraph FR_Sync ["Sync"] - L14["**use_hook**
Run on the first use of the hook, which is typically the initial render"] - L16["**use_hook_with_cleanup**
Use a hook with a cleanup function that runs when component is dropped"] - U1["**use_debounce**
Calls a function only after provided duration has passed (dioxus_sdk)"] - U2["**use_interval**
Repeatedly calls a function every certain period (dioxus_sdk)"] - L18["**use_server_cached**
Runs a function on the server (or client if server is not enabled) and sends result to client. Caches the value on the client"] - end - - subgraph FR_Async ["Async"] - U3["**use_channel/use_listen_channel**
Create and listen to channels for communication between components (dioxus_sdk)"] - end - - Init --> FR_Sync - Init --> FR_Async - - %% Before Every Render - subgraph BR_Sync ["Sync"] - L19["**use_before_render**
Register a function to run before every subsequent render"] - end - - BeforeRender --> BR_Sync - - %% Render phase - subgraph RP_Sync ["Sync"] - L7["**use_callback**
Keeps a callback up to date for all references to the handle"] - L1["**use_signal**
Basic local state, triggers re-renders on write, does not subscribe to other signals"] - L1b["**use_signal_sync**
Thread-safe signal - Send + Sync"] - L3["**use_memo**
Derived state (memoized), composes signals"] - L10["**use_set_compare/use_set_compare_equal**
Efficient value change tracking"] - end - - subgraph RP_Both ["Sync & Async"] - L8["**use_reactive**
Creates a closure (async/sync) to track 'non-reactive' data"] - end - - subgraph RP_Async ["Async"] - L5["**use_future**
Run an async task once"] - L6["**use_coroutine**
Stream-based concurrency through channels"] - L4["**use_resource**
Async derived state"] - L15["**use_server_future**
Async derived state that runs on the server and caches on the client"] - end - - Render --> RP_Sync - Render --> RP_Both - Render --> RP_Async - - %% Post render - subgraph PR_Sync ["Sync"] - L2["**use_effect**
Side effects after render, composes signals"] - L9["**use_hook_did_run**
Lifecycle check if this hook has been called on the latest render"] - L17["**use_after_render**
Push a function to be run after the next render"] - end - - Post --> PR_Sync - - %% Cleanup - subgraph CL_Sync ["Sync"] - L13["**use_drop**
Callback invoked when component is dropped"] - end - - Clean --> CL_Sync - - %% Context - subgraph CT_Sync ["Sync"] - C1["**use_context_provider**
Provides data to any child"] - C2["**use_context**
Consume provided data"] - C3["**try_use_context**
Like use_context but returns None if missing"] - C4["**use_root_context**
Like use_context except creates context at root if missing"] - C5["**use_coroutine_handle**
Obtain handle to a context-provided coroutine"] - - subgraph CT_Utils ["Utils"] - C6["**use_clipboard**
Access the clipboard (dioxus_sdk)"] - C7["**use_window_size**
Initial window size will be returned with this hook and updated continously as the window is resized (dioxus_sdk)"] - C8["**use_geolocation**
Provides the latest geocoordinates. Good for navigation-type apps (dioxus_sdk)"] - C9["**use_system_theme**
Initial theme will be returned and updated if the system theme changes (dioxus_sdk)"] - end - end - - C --> CT_Sync - - %% Persistent - subgraph PS_Sync ["Sync"] - P1["**use_persistent**
Store data across application reloads as either local storage or a file storage (dioxus_sdk)"] - P2["**use_storage**
Like use_persistent except the storage location is generic, which may be useful for custom implementations (dioxus_sdk)"] - P3["**use_synced_storage**
Store data that persists and syncs across all app sessions (dioxus_sdk)"] - P4["**use_singleton_persistent**
Persistent storage shared for calls from same line (dioxus_sdk)"] - P5["**use_storage_entry**
Creates a StorageEntry with latest value from storage or init if does not exist (dioxus_sdk)"] - P6["**use_synced_storage_entry**
Creates a StorageEntry with updates subscription (dioxus_sdk)"] - end - - D --> PS_Sync - - %% Global - subgraph GB_Sync ["Sync"] - G1["**GlobalSignal**
Global signal (sync)"] - G2["**GlobalMemo**
Derived global state (sync)"] - G3["**Global**
A lazy value that is created once per application (sync)"] - end - - E --> GB_Sync - - %% Route - subgraph RT_Sync ["Sync"] - R3["**Routable**
The dioxus-router macro used for routing"] - - subgraph RT_Utils ["Utils"] - R1["**use_route**
Access information about the current routing location"] - R2["**use_navigator**
Access navigator to change router history"] - R4["**use_outlet_context**
Access to the outlet context for the route nesting level"] - end - end - - F --> RT_Sync - - %% Legend - subgraph Legend ["Legend"] - L_HIGHLIGHT["Frequently Used"] - L_NORMAL["Standard"] - end - - %% Styling - classDef frequentlyUsed fill:#ff9,stroke:#333,stroke-width:2px - class L_HIGHLIGHT,L1,L2,L3,L4,L5,L8,L14,C1,C2,R1,R2,R3,P1 frequentlyUsed \ No newline at end of file From 1a3e22e5c3da3afb2282860d56a2a02f4438d5cc Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Fri, 7 Mar 2025 03:31:25 +0000 Subject: [PATCH 06/14] fix: Mermaid break in graph not respected and add height padding --- packages/docs-router/src/docs.rs | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/docs-router/src/docs.rs b/packages/docs-router/src/docs.rs index 23b5bd9ce..34e6cd327 100644 --- a/packages/docs-router/src/docs.rs +++ b/packages/docs-router/src/docs.rs @@ -98,10 +98,10 @@ fn MermaidBlock(chart: &'static str) -> Element { rsx! { div { document::Link { rel: "stylesheet", href: asset!("assets/mermaid_block.css") } - pre { - class: "mermaid", - style: "background-color: #fff", - dangerous_inner_html: "{chart}", + div { + class: "mermaid min-h-[60vh]", + style: "background-color: #fff; ", + "value": "{chart}", } script { r#type: "module", r#" @@ -118,7 +118,7 @@ mermaidElements.forEach((element, index) => {{ if (element.getAttribute('data-processed') === 'true') {{ return; }} - element.textContent = element.textContent.trim(); + element.textContent = element.value; elements.push(element); }}); @@ -132,9 +132,7 @@ mermaid.run().then(() => {{ }}); element.addEventListener('wheel', panzoom.zoomWithWheel); }}) -}}); - - "# +}});"# } } } From 6f5b28d1b5310020344c5c7b6c113463ab1817ae Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Fri, 7 Mar 2025 04:02:40 +0000 Subject: [PATCH 07/14] chore: Update tailwind --- packages/docsite/assets/tailwind.css | 434 ++++++++++++++++++++++----- 1 file changed, 363 insertions(+), 71 deletions(-) diff --git a/packages/docsite/assets/tailwind.css b/packages/docsite/assets/tailwind.css index a7b9e422a..fb356df9d 100644 --- a/packages/docsite/assets/tailwind.css +++ b/packages/docsite/assets/tailwind.css @@ -1,42 +1,46 @@ -/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */ -@layer properties; +/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */ @layer theme, base, components, utilities; @layer theme { + :root, :host { :root, :host { --font-sans: "Inter var",sans-serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', - monospace; - --color-red-500: oklch(63.7% 0.237 25.331); - --color-red-600: oklch(57.7% 0.245 27.325); - --color-yellow-200: oklch(94.5% 0.129 101.54); - --color-yellow-600: oklch(68.1% 0.162 75.834); - --color-yellow-800: oklch(47.6% 0.114 61.907); - --color-green-600: oklch(62.7% 0.194 149.214); - --color-sky-400: oklch(74.6% 0.16 232.661); - --color-sky-500: oklch(68.5% 0.169 237.323); - --color-sky-600: oklch(58.8% 0.158 241.966); - --color-blue-500: oklch(62.3% 0.214 259.815); - --color-indigo-500: oklch(58.5% 0.233 277.117); - --color-indigo-600: oklch(51.1% 0.262 276.966); - --color-slate-700: oklch(37.2% 0.044 257.287); - --color-gray-50: oklch(98.5% 0.002 247.839); - --color-gray-100: oklch(96.7% 0.003 264.542); - --color-gray-200: oklch(92.8% 0.006 264.531); - --color-gray-300: oklch(87.2% 0.01 258.338); - --color-gray-400: oklch(70.7% 0.022 261.325); - --color-gray-500: oklch(55.1% 0.027 264.364); - --color-gray-600: oklch(44.6% 0.03 256.802); - --color-gray-700: oklch(37.3% 0.034 259.733); - --color-gray-800: oklch(27.8% 0.033 256.848); - --color-gray-900: oklch(21% 0.034 264.665); - --color-gray-950: oklch(13% 0.028 261.692); - --color-zinc-100: oklch(96.7% 0.001 286.375); - --color-zinc-700: oklch(37% 0.013 285.805); - --color-neutral-500: oklch(55.6% 0 0); - --color-neutral-800: oklch(26.9% 0 0); - --color-neutral-900: oklch(20.5% 0 0); - --color-stone-300: oklch(86.9% 0.005 56.366); - --color-stone-700: oklch(37.4% 0.01 67.558); + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + --color-red-100: oklch(0.936 0.032 17.717); + --color-red-500: oklch(0.637 0.237 25.331); + --color-red-600: oklch(0.577 0.245 27.325); + --color-orange-600: oklch(0.646 0.222 41.116); + --color-yellow-200: oklch(0.945 0.129 101.54); + --color-yellow-600: oklch(0.681 0.162 75.834); + --color-yellow-800: oklch(0.476 0.114 61.907); + --color-green-600: oklch(0.627 0.194 149.214); + --color-sky-400: oklch(0.746 0.16 232.661); + --color-sky-500: oklch(0.685 0.169 237.323); + --color-sky-600: oklch(0.588 0.158 241.966); + --color-blue-400: oklch(0.707 0.165 254.624); + --color-blue-500: oklch(0.623 0.214 259.815); + --color-blue-600: oklch(0.546 0.245 262.881); + --color-indigo-500: oklch(0.585 0.233 277.117); + --color-indigo-600: oklch(0.511 0.262 276.966); + --color-slate-700: oklch(0.372 0.044 257.287); + --color-gray-50: oklch(0.985 0.002 247.839); + --color-gray-100: oklch(0.967 0.003 264.542); + --color-gray-200: oklch(0.928 0.006 264.531); + --color-gray-300: oklch(0.872 0.01 258.338); + --color-gray-400: oklch(0.707 0.022 261.325); + --color-gray-500: oklch(0.551 0.027 264.364); + --color-gray-600: oklch(0.446 0.03 256.802); + --color-gray-700: oklch(0.373 0.034 259.733); + --color-gray-800: oklch(0.278 0.033 256.848); + --color-gray-900: oklch(0.21 0.034 264.665); + --color-zinc-100: oklch(0.967 0.001 286.375); + --color-zinc-700: oklch(0.37 0.013 285.805); + --color-neutral-400: oklch(0.708 0 0); + --color-neutral-500: oklch(0.556 0 0); + --color-neutral-800: oklch(0.269 0 0); + --color-neutral-900: oklch(0.205 0 0); + --color-stone-300: oklch(0.869 0.005 56.366); + --color-stone-700: oklch(0.374 0.01 67.558); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; @@ -65,7 +69,6 @@ --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; - --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; @@ -73,7 +76,6 @@ --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -0.025em; - --tracking-wide: 0.025em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; @@ -82,12 +84,24 @@ --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; + --ease-in: cubic-bezier(0.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --blur-sm: 8px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); + --default-font-feature-settings: var(--font-sans--font-feature-settings); + --default-font-variation-settings: var( + --font-sans--font-variation-settings + ); --default-mono-font-family: var(--font-mono); + --default-mono-font-feature-settings: var( + --font-mono--font-feature-settings + ); + --default-mono-font-variation-settings: var( + --font-mono--font-variation-settings + ); --color-ghmetal: #24292f; --color-ghdarkmetal: #161b22; --color-ideblack: #0e1116; @@ -105,9 +119,9 @@ line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var(--default-font-variation-settings, normal); + font-variation-settings: var( --default-font-variation-settings, normal ); -webkit-tap-highlight-color: transparent; } hr { @@ -132,9 +146,9 @@ font-weight: bolder; } code, kbd, samp, pre { - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); - font-feature-settings: var(--default-mono-font-feature-settings, normal); - font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); + font-feature-settings: var( --default-mono-font-feature-settings, normal ); + font-variation-settings: var( --default-mono-font-variation-settings, normal ); font-size: 1em; } small { @@ -229,17 +243,26 @@ :-moz-ui-invalid { box-shadow: none; } - button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } - [hidden]:where(:not([hidden='until-found'])) { + [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { + .\@container { + container-type: inline-size; + } + .collapse { + visibility: collapse; + } + .invisible { + visibility: hidden; + } .visible { visibility: visible; } @@ -275,14 +298,23 @@ .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } - .-top-3 { - top: calc(var(--spacing) * -3); + .start-1 { + inset-inline-start: calc(var(--spacing) * 1); + } + .end-1 { + inset-inline-end: calc(var(--spacing) * 1); } .top-0 { top: calc(var(--spacing) * 0); } - .top-24 { - top: calc(var(--spacing) * 24); + .top-1 { + top: calc(var(--spacing) * 1); + } + .top-28 { + top: calc(var(--spacing) * 28); + } + .top-35 { + top: calc(var(--spacing) * 35); } .bottom-0 { bottom: calc(var(--spacing) * 0); @@ -290,6 +322,18 @@ .left-0 { left: calc(var(--spacing) * 0); } + .isolate { + isolation: isolate; + } + .z-1 { + z-index: 1; + } + .z-2 { + z-index: 2; + } + .z-7 { + z-index: 7; + } .z-10 { z-index: 10; } @@ -338,6 +382,18 @@ .m-0 { margin: calc(var(--spacing) * 0); } + .m-1 { + margin: calc(var(--spacing) * 1); + } + .m-2 { + margin: calc(var(--spacing) * 2); + } + .m-4 { + margin: calc(var(--spacing) * 4); + } + .m-5 { + margin: calc(var(--spacing) * 5); + } .-mx-4 { margin-inline: calc(var(--spacing) * -4); } @@ -365,8 +421,11 @@ .my-auto { margin-block: auto; } - .-mt-13 { - margin-top: calc(var(--spacing) * -13); + .me-1 { + margin-inline-end: calc(var(--spacing) * 1); + } + .me-2 { + margin-inline-end: calc(var(--spacing) * 2); } .mt-1 { margin-top: calc(var(--spacing) * 1); @@ -428,9 +487,18 @@ .block { display: block; } + .block\! { + display: block !important; + } + .contents { + display: contents; + } .flex { display: flex; } + .flow-root { + display: flow-root; + } .grid { display: grid; } @@ -443,6 +511,42 @@ .inline-flex { display: inline-flex; } + .inline-table { + display: inline-table; + } + .list-item { + display: list-item; + } + .table { + display: table; + } + .table-caption { + display: table-caption; + } + .table-cell { + display: table-cell; + } + .table-column { + display: table-column; + } + .table-column-group { + display: table-column-group; + } + .table-footer-group { + display: table-footer-group; + } + .table-header-group { + display: table-header-group; + } + .table-row { + display: table-row; + } + .table-row-group { + display: table-row-group; + } + .h-1 { + height: calc(var(--spacing) * 1); + } .h-2 { height: calc(var(--spacing) * 2); } @@ -509,6 +613,9 @@ .min-h-0 { min-height: calc(var(--spacing) * 0); } + .min-h-\[60vh\] { + min-height: 60vh; + } .min-h-\[100vh\] { min-height: 100vh; } @@ -542,11 +649,26 @@ .w-10 { width: calc(var(--spacing) * 10); } + .w-12 { + width: calc(var(--spacing) * 12); + } + .w-32 { + width: calc(var(--spacing) * 32); + } + .w-40 { + width: calc(var(--spacing) * 40); + } + .w-48 { + width: calc(var(--spacing) * 48); + } + .w-56 { + width: calc(var(--spacing) * 56); + } .w-60 { width: calc(var(--spacing) * 60); } - .w-72 { - width: calc(var(--spacing) * 72); + .w-64 { + width: calc(var(--spacing) * 64); } .w-auto { width: auto; @@ -608,6 +730,9 @@ .flex-shrink-0 { flex-shrink: 0; } + .shrink { + flex-shrink: 1; + } .flex-grow { flex-grow: 1; } @@ -634,7 +759,7 @@ translate: var(--tw-translate-x) var(--tw-translate-y); } .transform { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } .resize { resize: both; @@ -711,7 +836,7 @@ .gap-8 { gap: calc(var(--spacing) * 8); } - .space-y-0\.5 { + .space-y-1 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse)); @@ -741,6 +866,12 @@ .gap-x-24 { column-gap: calc(var(--spacing) * 24); } + .gap-x-2 { + column-gap: calc(var(--spacing) * 2); + } + .gap-x-24 { + column-gap: calc(var(--spacing) * 24); + } .space-x-1\.5 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -762,12 +893,43 @@ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } - .gap-y-0\.5 { - row-gap: calc(var(--spacing) * 0.5); - } .gap-y-8 { row-gap: calc(var(--spacing) * 8); } + .divide-y { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + } + } + .divide-y-2 { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(2px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); + } + } + .divide-neutral-400 { + :where(& > :not(:last-child)) { + border-color: var(--color-neutral-400); + } + } + .self-end { + align-self: flex-end; + } + .self-start { + align-self: flex-start; + } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } .overflow-auto { overflow: auto; } @@ -1011,6 +1173,9 @@ .py-24 { padding-block: calc(var(--spacing) * 24); } + .pe-1 { + padding-inline-end: calc(var(--spacing) * 1); + } .pt-1 { padding-top: calc(var(--spacing) * 1); } @@ -1083,12 +1248,18 @@ .text-center { text-align: center; } + .text-justify { + text-align: justify; + } .text-left { text-align: left; } .text-right { text-align: right; } + .indent-16 { + text-indent: calc(var(--spacing) * 16); + } .align-middle { vertical-align: middle; } @@ -1137,6 +1308,9 @@ .text-\[\.75rem\] { font-size: .75rem; } + .text-\[1\.2em\] { + font-size: 1.2em; + } .text-\[1\.5em\] { font-size: 1.5em; } @@ -1229,6 +1403,12 @@ .text-balance { text-wrap: balance; } + .text-wrap { + text-wrap: wrap; + } + .break-all { + word-break: break-all; + } .whitespace-nowrap { white-space: nowrap; } @@ -1283,10 +1463,64 @@ .text-yellow-800 { color: var(--color-yellow-800); } + .capitalize { + text-transform: capitalize; + } + .lowercase { + text-transform: lowercase; + } .uppercase { text-transform: uppercase; } - .placeholder-gray-400 { + .italic { + font-style: italic; + } + .diagonal-fractions { + --tw-numeric-fraction: diagonal-fractions; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .lining-nums { + --tw-numeric-figure: lining-nums; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .oldstyle-nums { + --tw-numeric-figure: oldstyle-nums; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .ordinal { + --tw-ordinal: ordinal; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .proportional-nums { + --tw-numeric-spacing: proportional-nums; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .slashed-zero { + --tw-slashed-zero: slashed-zero; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .stacked-fractions { + --tw-numeric-fraction: stacked-fractions; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .line-through { + text-decoration-line: line-through; + } + .overline { + text-decoration-line: overline; + } + .underline { + text-decoration-line: underline; + } + .antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + .placeholder-gray-200 { &::placeholder { color: var(--color-gray-400); } @@ -1309,10 +1543,37 @@ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .blur { + --tw-blur: blur(8px); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .drop-shadow { + --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .grayscale { + --tw-grayscale: grayscale(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } .invert { --tw-invert: invert(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } + .sepia { + --tw-sepia: sepia(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); @@ -1350,14 +1611,38 @@ --tw-duration: 500ms; transition-duration: 500ms; } + .ease-in { + --tw-ease: var(--ease-in); + transition-timing-function: var(--ease-in); + } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } + .ease-out { + --tw-ease: var(--ease-out); + transition-timing-function: var(--ease-out); + } .outline-none { --tw-outline-style: none; outline-style: none; } + .select-all { + -webkit-user-select: all; + user-select: all; + } + .\[a-zA-Z0-9\:\\\\-\\\\\._\$\] { + a-zA-Z0-9: \\-\\. $; + } + .\[a-zA-Z\:\.\] { + a-zA-Z: .; + } + .\[a-zA-Z\:_\] { + a-zA-Z: ; + } + .\[localhost\:8080\] { + localhost: 8080; + } .group-hover\:text-gray-500 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -2242,6 +2527,26 @@ syntax: "*"; inherits: false; } +@property --tw-ordinal { + syntax: "*"; + inherits: false; +} +@property --tw-slashed-zero { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-figure { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-spacing { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-fraction { + syntax: "*"; + inherits: false; +} @property --tw-shadow { syntax: "*"; inherits: false; @@ -2347,19 +2652,6 @@ syntax: "*"; inherits: false; } -@property --tw-drop-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} -@property --tw-drop-shadow-size { - syntax: "*"; - inherits: false; -} @property --tw-backdrop-blur { syntax: "*"; inherits: false; From 7616ee30a22c8043b4061374086c2d4068b501a4 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Fri, 7 Mar 2025 04:03:45 +0000 Subject: [PATCH 08/14] doc: Update tailwind generation doc --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 7ccfcf257..d4411c605 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,12 @@ rehydrated with interactivity provided by `dioxus_web`. ## Development +The docsite uses the newest Tailwind (v4) so you need to install it first and then run it using: + +```sh +npx @tailwindcss/cli -i ./tailwind.css -o ./packages/docsite/assets/tailwind.css --watch +``` + The documentation can be edited using any text editor. Most commonly used editors support syntax highlighting for the `markdown` format. To view your changes you can install the [`dx`][dx] tool locally, assuming you already have a From db3057bada5c1a51fb490e1e4db263d98ffe2dd4 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Thu, 10 Apr 2025 08:34:56 +0000 Subject: [PATCH 09/14] tailwind updates after merge --- packages/docsite/assets/tailwind.css | 323 +++++++++++---------------- 1 file changed, 128 insertions(+), 195 deletions(-) diff --git a/packages/docsite/assets/tailwind.css b/packages/docsite/assets/tailwind.css index fb356df9d..42b01527d 100644 --- a/packages/docsite/assets/tailwind.css +++ b/packages/docsite/assets/tailwind.css @@ -1,4 +1,5 @@ -/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */ +@layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { @@ -6,41 +7,42 @@ --font-sans: "Inter var",sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --color-red-100: oklch(0.936 0.032 17.717); - --color-red-500: oklch(0.637 0.237 25.331); - --color-red-600: oklch(0.577 0.245 27.325); - --color-orange-600: oklch(0.646 0.222 41.116); - --color-yellow-200: oklch(0.945 0.129 101.54); - --color-yellow-600: oklch(0.681 0.162 75.834); - --color-yellow-800: oklch(0.476 0.114 61.907); - --color-green-600: oklch(0.627 0.194 149.214); - --color-sky-400: oklch(0.746 0.16 232.661); - --color-sky-500: oklch(0.685 0.169 237.323); - --color-sky-600: oklch(0.588 0.158 241.966); - --color-blue-400: oklch(0.707 0.165 254.624); - --color-blue-500: oklch(0.623 0.214 259.815); - --color-blue-600: oklch(0.546 0.245 262.881); - --color-indigo-500: oklch(0.585 0.233 277.117); - --color-indigo-600: oklch(0.511 0.262 276.966); - --color-slate-700: oklch(0.372 0.044 257.287); - --color-gray-50: oklch(0.985 0.002 247.839); - --color-gray-100: oklch(0.967 0.003 264.542); - --color-gray-200: oklch(0.928 0.006 264.531); - --color-gray-300: oklch(0.872 0.01 258.338); - --color-gray-400: oklch(0.707 0.022 261.325); - --color-gray-500: oklch(0.551 0.027 264.364); - --color-gray-600: oklch(0.446 0.03 256.802); - --color-gray-700: oklch(0.373 0.034 259.733); - --color-gray-800: oklch(0.278 0.033 256.848); - --color-gray-900: oklch(0.21 0.034 264.665); - --color-zinc-100: oklch(0.967 0.001 286.375); - --color-zinc-700: oklch(0.37 0.013 285.805); - --color-neutral-400: oklch(0.708 0 0); - --color-neutral-500: oklch(0.556 0 0); - --color-neutral-800: oklch(0.269 0 0); - --color-neutral-900: oklch(0.205 0 0); - --color-stone-300: oklch(0.869 0.005 56.366); - --color-stone-700: oklch(0.374 0.01 67.558); + --color-red-100: oklch(93.6% 0.032 17.717); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-600: oklch(57.7% 0.245 27.325); + --color-orange-600: oklch(64.6% 0.222 41.116); + --color-yellow-200: oklch(94.5% 0.129 101.54); + --color-yellow-600: oklch(68.1% 0.162 75.834); + --color-yellow-800: oklch(47.6% 0.114 61.907); + --color-green-600: oklch(62.7% 0.194 149.214); + --color-sky-400: oklch(74.6% 0.16 232.661); + --color-sky-500: oklch(68.5% 0.169 237.323); + --color-sky-600: oklch(58.8% 0.158 241.966); + --color-blue-400: oklch(70.7% 0.165 254.624); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-indigo-500: oklch(58.5% 0.233 277.117); + --color-indigo-600: oklch(51.1% 0.262 276.966); + --color-slate-700: oklch(37.2% 0.044 257.287); + --color-gray-50: oklch(98.5% 0.002 247.839); + --color-gray-100: oklch(96.7% 0.003 264.542); + --color-gray-200: oklch(92.8% 0.006 264.531); + --color-gray-300: oklch(87.2% 0.01 258.338); + --color-gray-400: oklch(70.7% 0.022 261.325); + --color-gray-500: oklch(55.1% 0.027 264.364); + --color-gray-600: oklch(44.6% 0.03 256.802); + --color-gray-700: oklch(37.3% 0.034 259.733); + --color-gray-800: oklch(27.8% 0.033 256.848); + --color-gray-900: oklch(21% 0.034 264.665); + --color-gray-950: oklch(13% 0.028 261.692); + --color-zinc-100: oklch(96.7% 0.001 286.375); + --color-zinc-700: oklch(37% 0.013 285.805); + --color-neutral-400: oklch(70.8% 0 0); + --color-neutral-500: oklch(55.6% 0 0); + --color-neutral-800: oklch(26.9% 0 0); + --color-neutral-900: oklch(20.5% 0 0); + --color-stone-300: oklch(86.9% 0.005 56.366); + --color-stone-700: oklch(37.4% 0.01 67.558); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; @@ -121,7 +123,7 @@ tab-size: 4; font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var( --default-font-variation-settings, normal ); + font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { @@ -219,6 +221,10 @@ @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } } textarea { @@ -313,9 +319,6 @@ .top-28 { top: calc(var(--spacing) * 28); } - .top-35 { - top: calc(var(--spacing) * 35); - } .bottom-0 { bottom: calc(var(--spacing) * 0); } @@ -325,15 +328,6 @@ .isolate { isolation: isolate; } - .z-1 { - z-index: 1; - } - .z-2 { - z-index: 2; - } - .z-7 { - z-index: 7; - } .z-10 { z-index: 10; } @@ -346,9 +340,6 @@ .z-50 { z-index: 50; } - .z-\[1\] { - z-index: 1; - } .col-span-2 { grid-column: span 2 / span 2; } @@ -406,6 +397,9 @@ .mx-auto { margin-inline: auto; } + .-my-8 { + margin-block: calc(var(--spacing) * -8); + } .my-2 { margin-block: calc(var(--spacing) * 2); } @@ -421,12 +415,6 @@ .my-auto { margin-block: auto; } - .me-1 { - margin-inline-end: calc(var(--spacing) * 1); - } - .me-2 { - margin-inline-end: calc(var(--spacing) * 2); - } .mt-1 { margin-top: calc(var(--spacing) * 1); } @@ -544,9 +532,6 @@ .table-row-group { display: table-row-group; } - .h-1 { - height: calc(var(--spacing) * 1); - } .h-2 { height: calc(var(--spacing) * 2); } @@ -607,9 +592,6 @@ .max-h-\[calc\(100\%-8rem\)\] { max-height: calc(100% - 8rem); } - .max-h-\[calc\(100vh_-_calc\(var\(--spacing\)_\*_28\)\)\] { - max-height: calc(100vh - calc(var(--spacing) * 28)); - } .min-h-0 { min-height: calc(var(--spacing) * 0); } @@ -661,24 +643,15 @@ .w-48 { width: calc(var(--spacing) * 48); } - .w-56 { - width: calc(var(--spacing) * 56); - } .w-60 { width: calc(var(--spacing) * 60); } - .w-64 { - width: calc(var(--spacing) * 64); - } .w-auto { width: auto; } .w-full { width: 100%; } - .max-w-3\/4 { - max-width: calc(3/4 * 100%); - } .max-w-4xl { max-width: var(--container-4xl); } @@ -742,6 +715,9 @@ .basis-0 { flex-basis: calc(var(--spacing) * 0); } + .border-collapse { + border-collapse: collapse; + } .translate-x-px { --tw-translate-x: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); @@ -866,12 +842,6 @@ .gap-x-24 { column-gap: calc(var(--spacing) * 24); } - .gap-x-2 { - column-gap: calc(var(--spacing) * 2); - } - .gap-x-24 { - column-gap: calc(var(--spacing) * 24); - } .space-x-1\.5 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -967,10 +937,6 @@ border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } - .rounded-r-md { - border-top-right-radius: var(--radius-md); - border-bottom-right-radius: var(--radius-md); - } .border { border-style: var(--tw-border-style); border-width: 1px; @@ -1026,12 +992,24 @@ border-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent); } } + .border-orange-600 { + border-color: var(--color-orange-600); + } .border-stone-300 { border-color: var(--color-stone-300); } + .border-white { + border-color: var(--color-white); + } .bg-\[\#EDEDED\] { background-color: #EDEDED; } + .bg-black { + background-color: var(--color-black); + } + .bg-blue-500 { + background-color: var(--color-blue-500); + } .bg-ghdarkmetal { background-color: var(--color-ghdarkmetal); } @@ -1050,6 +1028,9 @@ background-color: color-mix(in oklab, var(--color-gray-100) 70%, transparent); } } + .bg-gray-200 { + background-color: var(--color-gray-200); + } .bg-green-600 { background-color: var(--color-green-600); } @@ -1061,10 +1042,17 @@ @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent); } + background-color: color-mix(in srgb, oklch(55.6% 0 0) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent); + } } .bg-neutral-800 { background-color: var(--color-neutral-800); } + .bg-red-100 { + background-color: var(--color-red-100); + } .bg-red-600 { background-color: var(--color-red-600); } @@ -1080,17 +1068,8 @@ .bg-yellow-600 { background-color: var(--color-yellow-600); } - .bg-gradient-to-b { - --tw-gradient-position: to bottom in oklab; - background-image: linear-gradient(var(--tw-gradient-stops)); - } - .from-white { - --tw-gradient-from: var(--color-white); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - .to-transparent { - --tw-gradient-to: transparent; - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + .mask-repeat { + mask-repeat: repeat; } .fill-\[\#444\] { fill: #444; @@ -1173,9 +1152,6 @@ .py-24 { padding-block: calc(var(--spacing) * 24); } - .pe-1 { - padding-inline-end: calc(var(--spacing) * 1); - } .pt-1 { padding-top: calc(var(--spacing) * 1); } @@ -1257,9 +1233,6 @@ .text-right { text-align: right; } - .indent-16 { - text-indent: calc(var(--spacing) * 16); - } .align-middle { vertical-align: middle; } @@ -1516,10 +1489,6 @@ .underline { text-decoration-line: underline; } - .antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } .placeholder-gray-200 { &::placeholder { color: var(--color-gray-400); @@ -1544,7 +1513,7 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .outline { @@ -1555,22 +1524,10 @@ --tw-blur: blur(8px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .drop-shadow { - --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } - .grayscale { - --tw-grayscale: grayscale(100%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } .invert { --tw-invert: invert(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .sepia { - --tw-sepia: sepia(100%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } @@ -1579,6 +1536,10 @@ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } + .backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -1631,18 +1592,6 @@ -webkit-user-select: all; user-select: all; } - .\[a-zA-Z0-9\:\\\\-\\\\\._\$\] { - a-zA-Z0-9: \\-\\. $; - } - .\[a-zA-Z\:\.\] { - a-zA-Z: .; - } - .\[a-zA-Z\:_\] { - a-zA-Z: ; - } - .\[localhost\:8080\] { - localhost: 8080; - } .group-hover\:text-gray-500 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -1847,9 +1796,9 @@ min-height: 520px; } } - .md\:w-72 { + .md\:w-60 { @media (width >= 48rem) { - width: calc(var(--spacing) * 72); + width: calc(var(--spacing) * 60); } } .md\:w-auto { @@ -1887,6 +1836,11 @@ flex-direction: column; } } + .md\:flex-col { + @media (width >= 48rem) { + flex-direction: column; + } + } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; @@ -2222,7 +2176,7 @@ } } .dark\:bg-gray-950\/70 { - &:where([data-theme=dark], [data-theme=dark] *) { + @media (prefers-color-scheme: dark) { background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-950) 70%, transparent); @@ -2240,19 +2194,13 @@ } } .dark\:bg-neutral-900\/70 { - &:where([data-theme=dark], [data-theme=dark] *) { + @media (prefers-color-scheme: dark) { background-color: color-mix(in srgb, oklch(20.5% 0 0) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-900) 70%, transparent); } } } - .dark\:from-black { - &:where([data-theme=dark], [data-theme=dark] *) { - --tw-gradient-from: var(--color-black); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - } .dark\:fill-white { &:where([data-theme=dark], [data-theme=dark] *) { fill: var(--color-white); @@ -2314,13 +2262,13 @@ } } .dark\:ring-1 { - &:where([data-theme=dark], [data-theme=dark] *) { + @media (prefers-color-scheme: dark) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .dark\:shadow-white { - &:where([data-theme=dark], [data-theme=dark] *) { + @media (prefers-color-scheme: dark) { --tw-shadow-color: #fff; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-white) var(--tw-shadow-alpha), transparent); @@ -2328,7 +2276,7 @@ } } .dark\:ring-white\/10 { - &:where([data-theme=dark], [data-theme=dark] *) { + @media (prefers-color-scheme: dark) { --tw-ring-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent); @@ -2442,18 +2390,6 @@ syntax: "*"; inherits: false; } -@property --tw-rotate-y { - syntax: "*"; - inherits: false; -} -@property --tw-rotate-z { - syntax: "*"; - inherits: false; -} -@property --tw-skew-x { - syntax: "*"; - inherits: false; -} @property --tw-skew-y { syntax: "*"; inherits: false; @@ -2473,26 +2409,7 @@ inherits: false; initial-value: solid; } -@property --tw-gradient-position { - syntax: "*"; - inherits: false; -} -@property --tw-gradient-from { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-via { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-to { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-stops { +@property --tw-space-y-reverse { syntax: "*"; inherits: false; } @@ -2500,8 +2417,8 @@ syntax: "*"; inherits: false; } -@property --tw-gradient-from-position { - syntax: ""; +@property --tw-divide-y-reverse { + syntax: "*"; inherits: false; initial-value: 0%; } @@ -2510,11 +2427,6 @@ inherits: false; initial-value: 50%; } -@property --tw-gradient-to-position { - syntax: ""; - inherits: false; - initial-value: 100%; -} @property --tw-leading { syntax: "*"; inherits: false; @@ -2561,6 +2473,11 @@ inherits: false; initial-value: 100%; } +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} @property --tw-inset-shadow { syntax: "*"; inherits: false; @@ -2575,6 +2492,11 @@ inherits: false; initial-value: 100%; } +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} @property --tw-ring-color { syntax: "*"; inherits: false; @@ -2652,6 +2574,19 @@ syntax: "*"; inherits: false; } +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false; +} @property --tw-backdrop-blur { syntax: "*"; inherits: false; @@ -2702,26 +2637,23 @@ --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; + --tw-divide-y-reverse: 0; --tw-border-style: solid; - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; @@ -2736,6 +2668,7 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; From d1156735246312326d5a6da7e777297447bb1a4e Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Wed, 23 Jul 2025 11:15:21 +0000 Subject: [PATCH 10/14] Post rebase changes --- docs-src/0.6/src/SUMMARY.md | 1 - docs-src/0.7/src/SUMMARY.md | 1 + .../src/guides}/cheat_sheet.md | 0 packages/docs-router/src/doc_examples/mod.rs | 2 +- packages/docs-router/src/docs.rs | 152 ------ packages/docs-router/src/lib.rs | 45 ++ packages/docsite/assets/tailwind.css | 453 +++++------------- 7 files changed, 161 insertions(+), 493 deletions(-) rename docs-src/{0.6/src/reference => 0.7/src/guides}/cheat_sheet.md (100%) delete mode 100644 packages/docs-router/src/docs.rs diff --git a/docs-src/0.6/src/SUMMARY.md b/docs-src/0.6/src/SUMMARY.md index 83db53b07..86603c976 100644 --- a/docs-src/0.6/src/SUMMARY.md +++ b/docs-src/0.6/src/SUMMARY.md @@ -94,7 +94,6 @@ - [Resource](reference/use_resource.md) - [UseCoroutine](reference/use_coroutine.md) - [Spawn](reference/spawn.md) - - [Cheat Sheet](reference/cheat_sheet.md) --- - [Contributing](contributing/index.md) diff --git a/docs-src/0.7/src/SUMMARY.md b/docs-src/0.7/src/SUMMARY.md index ecebb8620..4834810bb 100644 --- a/docs-src/0.7/src/SUMMARY.md +++ b/docs-src/0.7/src/SUMMARY.md @@ -125,6 +125,7 @@ - [In-Depth](guides/depth/index.md) - [Asset Pipeline](guides/depth/assets.md) - [Custom Renderer](guides/depth/custom_renderer.md) + - [Cheat Sheet](guides/cheat_sheet.md) - [Migration](migration/index.md) - [To 0.7](migration/to_07.md) - [To 0.6](migration/to_06.md) diff --git a/docs-src/0.6/src/reference/cheat_sheet.md b/docs-src/0.7/src/guides/cheat_sheet.md similarity index 100% rename from docs-src/0.6/src/reference/cheat_sheet.md rename to docs-src/0.7/src/guides/cheat_sheet.md diff --git a/packages/docs-router/src/doc_examples/mod.rs b/packages/docs-router/src/doc_examples/mod.rs index e5ca4ef3e..d4142c42a 100644 --- a/packages/docs-router/src/doc_examples/mod.rs +++ b/packages/docs-router/src/doc_examples/mod.rs @@ -1,4 +1,4 @@ -pub use crate::{DemoFrame, SandBoxFrame, ComponentWithLogs, FakePage, CodeBlock, log, LogState, TwoPanelComponent}; +pub use crate::{DemoFrame, SandBoxFrame, ComponentWithLogs, FakePage, CodeBlock, log, LogState, TwoPanelComponent, MermaidBlock}; // Include any examples we compile into the docsite #[cfg(not(feature = "doc_test"))] diff --git a/packages/docs-router/src/docs.rs b/packages/docs-router/src/docs.rs deleted file mode 100644 index 34e6cd327..000000000 --- a/packages/docs-router/src/docs.rs +++ /dev/null @@ -1,152 +0,0 @@ -use crate::desktop_dependencies::*; -use crate::doc_examples::*; -use dioxus::prelude::*; -use std::hash::Hash; - -pub mod router_03; -pub mod router_04; -pub mod router_05; -pub mod router_06; -pub mod router_blog; - -#[component] -fn SandBoxFrame(url: String) -> Element { - rsx! { - iframe { - style: "border: 1px solid rgba(0, 0, 0, 0.1);border-radius:2px;", - width: "800", - height: "450", - src: "{url}?embed=1", - "allowfullscreen": true, - } - } -} - -#[component] -fn DemoFrame(children: Element) -> Element { - rsx! { - div { - class: "bg-white rounded-md shadow-md p-4 my-4 overflow-auto text-black dioxus-demo", - max_height: "50vh", - {children} - } - } -} - -fn LayoutsExplanation() -> Element { - rsx! { - pre { onmouseenter: move |_| {}, onmouseleave: move |_| {}, - span { - "#[derive(Clone, Routable, PartialEq, Eq, Serialize, Deserialize)] -#[rustfmt::skip] -pub enum Route {{\n\t" - } - span { - onmouseenter: move |_| {}, - onmouseleave: move |_| {}, - class: "border border-orange-600 rounded-md", - "#[layout(HeaderFooter)]" - } - span { "\n\t\t// ... other routes\n\t\t" } - span { - onmouseenter: move |_| {}, - onmouseleave: move |_| {}, - class: "border border-green-600 rounded-md", - r##"#[layout(DocsSidebars)]"## - } - "\n\t\t\t" - span { - onmouseenter: move |_| {}, - onmouseleave: move |_| {}, - class: "border border-blue-600 rounded-md", - r##"#[route("/learn")]"## - } - span { "\n\t\t\tDocs {{}},\n}}" } - } - } -} - -#[component] -fn CodeBlock(contents: String, name: Option) -> Element { - let mut copied = use_signal(|| false); - rsx! { - div { class: "border overflow-hidden rounded-md border-gray-300 dark:border-gray-700 mb-8", - div { class: "w-full bg-red flex flex-row justify-between border-b border-gray-300 dark:border-gray-700 py-1 px-2 text-xs items-center bg-gray-100 dark:bg-ideblack", - div { class: "font-mono", - if let Some(path) = name { - "src/{path}" - } - } - button { - class: "hover:text-blue-600 flex flex-row items-center gap-1", - class: if copied() { "text-green-600" }, - "onclick": "navigator.clipboard.writeText(this.parentNode.parentNode.lastChild.innerText);", - onclick: move |_| copied.set(true), - if copied() { - "Copied!" - } - span { Copy {} } - } - } - div { class: "codeblock", dangerous_inner_html: contents } - } - } -} - -#[component] -fn MermaidBlock(chart: &'static str) -> Element { - rsx! { - div { - document::Link { rel: "stylesheet", href: asset!("assets/mermaid_block.css") } - div { - class: "mermaid min-h-[60vh]", - style: "background-color: #fff; ", - "value": "{chart}", - } - script { r#type: "module", - r#" -import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/+esm'; -import Panzoom from 'https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.6.0/+esm'; - -mermaid.initialize({{ - startOnLoad: false, -}}); - -const mermaidElements = document.querySelectorAll('.mermaid'); -let elements = []; -mermaidElements.forEach((element, index) => {{ - if (element.getAttribute('data-processed') === 'true') {{ - return; - }} - element.textContent = element.value; - elements.push(element); -}}); - -mermaid.run().then(() => {{ - elements.forEach((element, index) => {{ - let svg = element.firstElementChild; - const panzoom = Panzoom(svg, {{ - step: 1, - maxScale: 10, - minScale: 0.5, - }}); - element.addEventListener('wheel', panzoom.zoomWithWheel); - }}) -}});"# - } - } - } -} - -pub(crate) static Copy: Component<()> = |_| { - rsx!( - svg { - width: "24", - height: "24", - stroke_width: "1.5", - fill: "none", - stroke: "currentColor", - path { d: "M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8" } - } - ) -}; diff --git a/packages/docs-router/src/lib.rs b/packages/docs-router/src/lib.rs index c683162e7..e24ecbb5e 100644 --- a/packages/docs-router/src/lib.rs +++ b/packages/docs-router/src/lib.rs @@ -157,6 +157,51 @@ pub fn CodeBlock(contents: String, name: Option) -> Element { } } +#[component] +pub fn MermaidBlock(chart: &'static str) -> Element { + rsx! { + div { + document::Link { rel: "stylesheet", href: asset!("assets/mermaid_block.css") } + div { + class: "mermaid min-h-[60vh]", + style: "background-color: #fff; ", + "value": "{chart}", + } + script { r#type: "module", + r#" +import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/+esm'; +import Panzoom from 'https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.6.0/+esm'; + +mermaid.initialize({{ + startOnLoad: false, +}}); + +const mermaidElements = document.querySelectorAll('.mermaid'); +let elements = []; +mermaidElements.forEach((element, index) => {{ + if (element.getAttribute('data-processed') === 'true') {{ + return; + }} + element.textContent = element.value; + elements.push(element); +}}); + +mermaid.run().then(() => {{ + elements.forEach((element, index) => {{ + let svg = element.firstElementChild; + const panzoom = Panzoom(svg, {{ + step: 1, + maxScale: 10, + minScale: 0.5, + }}); + element.addEventListener('wheel', panzoom.zoomWithWheel); + }}) +}});"# + } + } + } +} + pub(crate) static Copy: Component<()> = |_| { rsx!( svg { diff --git a/packages/docsite/assets/tailwind.css b/packages/docsite/assets/tailwind.css index 42b01527d..a7b9e422a 100644 --- a/packages/docsite/assets/tailwind.css +++ b/packages/docsite/assets/tailwind.css @@ -1,16 +1,13 @@ -/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { - :root, :host { :root, :host { --font-sans: "Inter var",sans-serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; - --color-red-100: oklch(93.6% 0.032 17.717); + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + monospace; --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); - --color-orange-600: oklch(64.6% 0.222 41.116); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-800: oklch(47.6% 0.114 61.907); @@ -18,9 +15,7 @@ --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); - --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); - --color-blue-600: oklch(54.6% 0.245 262.881); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-slate-700: oklch(37.2% 0.044 257.287); @@ -37,7 +32,6 @@ --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-700: oklch(37% 0.013 285.805); - --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); @@ -71,6 +65,7 @@ --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; + --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; @@ -78,6 +73,7 @@ --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -0.025em; + --tracking-wide: 0.025em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; @@ -86,24 +82,12 @@ --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; - --ease-in: cubic-bezier(0.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --blur-sm: 8px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); - --default-font-feature-settings: var(--font-sans--font-feature-settings); - --default-font-variation-settings: var( - --font-sans--font-variation-settings - ); --default-mono-font-family: var(--font-mono); - --default-mono-font-feature-settings: var( - --font-mono--font-feature-settings - ); - --default-mono-font-variation-settings: var( - --font-mono--font-variation-settings - ); --color-ghmetal: #24292f; --color-ghdarkmetal: #161b22; --color-ideblack: #0e1116; @@ -121,7 +105,7 @@ line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; - font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; @@ -148,9 +132,9 @@ font-weight: bolder; } code, kbd, samp, pre { - font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); - font-feature-settings: var( --default-mono-font-feature-settings, normal ); - font-variation-settings: var( --default-mono-font-variation-settings, normal ); + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { @@ -221,10 +205,6 @@ @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } } } textarea { @@ -249,26 +229,17 @@ :-moz-ui-invalid { box-shadow: none; } - button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { + button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } - [hidden]:where(:not([hidden="until-found"])) { + [hidden]:where(:not([hidden='until-found'])) { display: none !important; } } @layer utilities { - .\@container { - container-type: inline-size; - } - .collapse { - visibility: collapse; - } - .invisible { - visibility: hidden; - } .visible { visibility: visible; } @@ -304,20 +275,14 @@ .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } - .start-1 { - inset-inline-start: calc(var(--spacing) * 1); - } - .end-1 { - inset-inline-end: calc(var(--spacing) * 1); + .-top-3 { + top: calc(var(--spacing) * -3); } .top-0 { top: calc(var(--spacing) * 0); } - .top-1 { - top: calc(var(--spacing) * 1); - } - .top-28 { - top: calc(var(--spacing) * 28); + .top-24 { + top: calc(var(--spacing) * 24); } .bottom-0 { bottom: calc(var(--spacing) * 0); @@ -325,9 +290,6 @@ .left-0 { left: calc(var(--spacing) * 0); } - .isolate { - isolation: isolate; - } .z-10 { z-index: 10; } @@ -340,6 +302,9 @@ .z-50 { z-index: 50; } + .z-\[1\] { + z-index: 1; + } .col-span-2 { grid-column: span 2 / span 2; } @@ -373,18 +338,6 @@ .m-0 { margin: calc(var(--spacing) * 0); } - .m-1 { - margin: calc(var(--spacing) * 1); - } - .m-2 { - margin: calc(var(--spacing) * 2); - } - .m-4 { - margin: calc(var(--spacing) * 4); - } - .m-5 { - margin: calc(var(--spacing) * 5); - } .-mx-4 { margin-inline: calc(var(--spacing) * -4); } @@ -397,9 +350,6 @@ .mx-auto { margin-inline: auto; } - .-my-8 { - margin-block: calc(var(--spacing) * -8); - } .my-2 { margin-block: calc(var(--spacing) * 2); } @@ -415,6 +365,9 @@ .my-auto { margin-block: auto; } + .-mt-13 { + margin-top: calc(var(--spacing) * -13); + } .mt-1 { margin-top: calc(var(--spacing) * 1); } @@ -475,18 +428,9 @@ .block { display: block; } - .block\! { - display: block !important; - } - .contents { - display: contents; - } .flex { display: flex; } - .flow-root { - display: flow-root; - } .grid { display: grid; } @@ -499,39 +443,6 @@ .inline-flex { display: inline-flex; } - .inline-table { - display: inline-table; - } - .list-item { - display: list-item; - } - .table { - display: table; - } - .table-caption { - display: table-caption; - } - .table-cell { - display: table-cell; - } - .table-column { - display: table-column; - } - .table-column-group { - display: table-column-group; - } - .table-footer-group { - display: table-footer-group; - } - .table-header-group { - display: table-header-group; - } - .table-row { - display: table-row; - } - .table-row-group { - display: table-row-group; - } .h-2 { height: calc(var(--spacing) * 2); } @@ -592,12 +503,12 @@ .max-h-\[calc\(100\%-8rem\)\] { max-height: calc(100% - 8rem); } + .max-h-\[calc\(100vh_-_calc\(var\(--spacing\)_\*_28\)\)\] { + max-height: calc(100vh - calc(var(--spacing) * 28)); + } .min-h-0 { min-height: calc(var(--spacing) * 0); } - .min-h-\[60vh\] { - min-height: 60vh; - } .min-h-\[100vh\] { min-height: 100vh; } @@ -631,27 +542,21 @@ .w-10 { width: calc(var(--spacing) * 10); } - .w-12 { - width: calc(var(--spacing) * 12); - } - .w-32 { - width: calc(var(--spacing) * 32); - } - .w-40 { - width: calc(var(--spacing) * 40); - } - .w-48 { - width: calc(var(--spacing) * 48); - } .w-60 { width: calc(var(--spacing) * 60); } + .w-72 { + width: calc(var(--spacing) * 72); + } .w-auto { width: auto; } .w-full { width: 100%; } + .max-w-3\/4 { + max-width: calc(3/4 * 100%); + } .max-w-4xl { max-width: var(--container-4xl); } @@ -703,9 +608,6 @@ .flex-shrink-0 { flex-shrink: 0; } - .shrink { - flex-shrink: 1; - } .flex-grow { flex-grow: 1; } @@ -715,9 +617,6 @@ .basis-0 { flex-basis: calc(var(--spacing) * 0); } - .border-collapse { - border-collapse: collapse; - } .translate-x-px { --tw-translate-x: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); @@ -735,7 +634,7 @@ translate: var(--tw-translate-x) var(--tw-translate-y); } .transform { - transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .resize { resize: both; @@ -812,7 +711,7 @@ .gap-8 { gap: calc(var(--spacing) * 8); } - .space-y-1 { + .space-y-0\.5 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse)); @@ -863,43 +762,12 @@ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } + .gap-y-0\.5 { + row-gap: calc(var(--spacing) * 0.5); + } .gap-y-8 { row-gap: calc(var(--spacing) * 8); } - .divide-y { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(1px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - } - } - .divide-y-2 { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(2px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); - } - } - .divide-neutral-400 { - :where(& > :not(:last-child)) { - border-color: var(--color-neutral-400); - } - } - .self-end { - align-self: flex-end; - } - .self-start { - align-self: flex-start; - } - .truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } .overflow-auto { overflow: auto; } @@ -937,6 +805,10 @@ border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } + .rounded-r-md { + border-top-right-radius: var(--radius-md); + border-bottom-right-radius: var(--radius-md); + } .border { border-style: var(--tw-border-style); border-width: 1px; @@ -992,24 +864,12 @@ border-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent); } } - .border-orange-600 { - border-color: var(--color-orange-600); - } .border-stone-300 { border-color: var(--color-stone-300); } - .border-white { - border-color: var(--color-white); - } .bg-\[\#EDEDED\] { background-color: #EDEDED; } - .bg-black { - background-color: var(--color-black); - } - .bg-blue-500 { - background-color: var(--color-blue-500); - } .bg-ghdarkmetal { background-color: var(--color-ghdarkmetal); } @@ -1028,9 +888,6 @@ background-color: color-mix(in oklab, var(--color-gray-100) 70%, transparent); } } - .bg-gray-200 { - background-color: var(--color-gray-200); - } .bg-green-600 { background-color: var(--color-green-600); } @@ -1042,17 +899,10 @@ @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent); } - background-color: color-mix(in srgb, oklch(55.6% 0 0) 30%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent); - } } .bg-neutral-800 { background-color: var(--color-neutral-800); } - .bg-red-100 { - background-color: var(--color-red-100); - } .bg-red-600 { background-color: var(--color-red-600); } @@ -1068,8 +918,17 @@ .bg-yellow-600 { background-color: var(--color-yellow-600); } - .mask-repeat { - mask-repeat: repeat; + .bg-gradient-to-b { + --tw-gradient-position: to bottom in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .from-white { + --tw-gradient-from: var(--color-white); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-transparent { + --tw-gradient-to: transparent; + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .fill-\[\#444\] { fill: #444; @@ -1224,9 +1083,6 @@ .text-center { text-align: center; } - .text-justify { - text-align: justify; - } .text-left { text-align: left; } @@ -1281,9 +1137,6 @@ .text-\[\.75rem\] { font-size: .75rem; } - .text-\[1\.2em\] { - font-size: 1.2em; - } .text-\[1\.5em\] { font-size: 1.5em; } @@ -1376,12 +1229,6 @@ .text-balance { text-wrap: balance; } - .text-wrap { - text-wrap: wrap; - } - .break-all { - word-break: break-all; - } .whitespace-nowrap { white-space: nowrap; } @@ -1436,60 +1283,10 @@ .text-yellow-800 { color: var(--color-yellow-800); } - .capitalize { - text-transform: capitalize; - } - .lowercase { - text-transform: lowercase; - } .uppercase { text-transform: uppercase; } - .italic { - font-style: italic; - } - .diagonal-fractions { - --tw-numeric-fraction: diagonal-fractions; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .lining-nums { - --tw-numeric-figure: lining-nums; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .oldstyle-nums { - --tw-numeric-figure: oldstyle-nums; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .ordinal { - --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .proportional-nums { - --tw-numeric-spacing: proportional-nums; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .slashed-zero { - --tw-slashed-zero: slashed-zero; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .stacked-fractions { - --tw-numeric-fraction: stacked-fractions; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .tabular-nums { - --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .line-through { - text-decoration-line: line-through; - } - .overline { - text-decoration-line: overline; - } - .underline { - text-decoration-line: underline; - } - .placeholder-gray-200 { + .placeholder-gray-400 { &::placeholder { color: var(--color-gray-400); } @@ -1512,34 +1309,15 @@ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .ring { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .outline { - outline-style: var(--tw-outline-style); - outline-width: 1px; - } - .blur { - --tw-blur: blur(8px); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } .invert { --tw-invert: invert(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .filter { - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -1572,26 +1350,14 @@ --tw-duration: 500ms; transition-duration: 500ms; } - .ease-in { - --tw-ease: var(--ease-in); - transition-timing-function: var(--ease-in); - } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } - .ease-out { - --tw-ease: var(--ease-out); - transition-timing-function: var(--ease-out); - } .outline-none { --tw-outline-style: none; outline-style: none; } - .select-all { - -webkit-user-select: all; - user-select: all; - } .group-hover\:text-gray-500 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -1796,9 +1562,9 @@ min-height: 520px; } } - .md\:w-60 { + .md\:w-72 { @media (width >= 48rem) { - width: calc(var(--spacing) * 60); + width: calc(var(--spacing) * 72); } } .md\:w-auto { @@ -1836,11 +1602,6 @@ flex-direction: column; } } - .md\:flex-col { - @media (width >= 48rem) { - flex-direction: column; - } - } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; @@ -2176,7 +1937,7 @@ } } .dark\:bg-gray-950\/70 { - @media (prefers-color-scheme: dark) { + &:where([data-theme=dark], [data-theme=dark] *) { background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-gray-950) 70%, transparent); @@ -2194,13 +1955,19 @@ } } .dark\:bg-neutral-900\/70 { - @media (prefers-color-scheme: dark) { + &:where([data-theme=dark], [data-theme=dark] *) { background-color: color-mix(in srgb, oklch(20.5% 0 0) 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-900) 70%, transparent); } } } + .dark\:from-black { + &:where([data-theme=dark], [data-theme=dark] *) { + --tw-gradient-from: var(--color-black); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } .dark\:fill-white { &:where([data-theme=dark], [data-theme=dark] *) { fill: var(--color-white); @@ -2262,13 +2029,13 @@ } } .dark\:ring-1 { - @media (prefers-color-scheme: dark) { + &:where([data-theme=dark], [data-theme=dark] *) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .dark\:shadow-white { - @media (prefers-color-scheme: dark) { + &:where([data-theme=dark], [data-theme=dark] *) { --tw-shadow-color: #fff; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-white) var(--tw-shadow-alpha), transparent); @@ -2276,7 +2043,7 @@ } } .dark\:ring-white\/10 { - @media (prefers-color-scheme: dark) { + &:where([data-theme=dark], [data-theme=dark] *) { --tw-ring-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent); @@ -2390,6 +2157,18 @@ syntax: "*"; inherits: false; } +@property --tw-rotate-y { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; +} @property --tw-skew-y { syntax: "*"; inherits: false; @@ -2409,53 +2188,57 @@ inherits: false; initial-value: solid; } -@property --tw-space-y-reverse { +@property --tw-gradient-position { syntax: "*"; inherits: false; } -@property --tw-gradient-via-stops { - syntax: "*"; +@property --tw-gradient-from { + syntax: ""; inherits: false; + initial-value: #0000; } -@property --tw-divide-y-reverse { - syntax: "*"; +@property --tw-gradient-via { + syntax: ""; inherits: false; - initial-value: 0%; + initial-value: #0000; } -@property --tw-gradient-via-position { - syntax: ""; +@property --tw-gradient-to { + syntax: ""; inherits: false; - initial-value: 50%; + initial-value: #0000; } -@property --tw-leading { +@property --tw-gradient-stops { syntax: "*"; inherits: false; } -@property --tw-font-weight { +@property --tw-gradient-via-stops { syntax: "*"; inherits: false; } -@property --tw-tracking { - syntax: "*"; +@property --tw-gradient-from-position { + syntax: ""; inherits: false; + initial-value: 0%; } -@property --tw-ordinal { - syntax: "*"; +@property --tw-gradient-via-position { + syntax: ""; inherits: false; + initial-value: 50%; } -@property --tw-slashed-zero { - syntax: "*"; +@property --tw-gradient-to-position { + syntax: ""; inherits: false; + initial-value: 100%; } -@property --tw-numeric-figure { +@property --tw-leading { syntax: "*"; inherits: false; } -@property --tw-numeric-spacing { +@property --tw-font-weight { syntax: "*"; inherits: false; } -@property --tw-numeric-fraction { +@property --tw-tracking { syntax: "*"; inherits: false; } @@ -2473,11 +2256,6 @@ inherits: false; initial-value: 100%; } -@property --tw-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} @property --tw-inset-shadow { syntax: "*"; inherits: false; @@ -2492,11 +2270,6 @@ inherits: false; initial-value: 100%; } -@property --tw-inset-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} @property --tw-ring-color { syntax: "*"; inherits: false; @@ -2637,23 +2410,26 @@ --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; - --tw-rotate-x: rotateX(0); - --tw-rotate-y: rotateY(0); - --tw-rotate-z: rotateZ(0); - --tw-skew-x: skewX(0); - --tw-skew-y: skewY(0); + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; - --tw-divide-y-reverse: 0; --tw-border-style: solid; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; - --tw-ordinal: initial; - --tw-slashed-zero: initial; - --tw-numeric-figure: initial; - --tw-numeric-spacing: initial; - --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; @@ -2668,7 +2444,6 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; - --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; From cbb917666bf7b36bbba7ba09279cd71e0390ebcc Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Wed, 23 Jul 2025 11:48:52 +0000 Subject: [PATCH 11/14] Change mermaid block cheat sheet into markdown cheat sheet --- docs-src/0.7/src/guides/cheat_sheet.md | 277 +++++++++++-------------- 1 file changed, 124 insertions(+), 153 deletions(-) diff --git a/docs-src/0.7/src/guides/cheat_sheet.md b/docs-src/0.7/src/guides/cheat_sheet.md index dcbe5359d..c0255c636 100644 --- a/docs-src/0.7/src/guides/cheat_sheet.md +++ b/docs-src/0.7/src/guides/cheat_sheet.md @@ -1,153 +1,124 @@ -# State and Hooks Cheat Sheet - -```inject-dioxus -MermaidBlock { - chart: r#"flowchart TD - A("**Start**
Which scope does your state or utility belong to?") - - A --> B["Local
(per component)"] - A --> C["Shared
(Context)"] - A --> D["Persistent
(Storage)"] - A --> E["Global
(Truly app-wide)"] - A --> F["Route-based"] - - B --> LH("When does the code need to run?") - - LH --> Init["First Render (Non-Reactive)"] - LH --> BeforeRender["Before Every
Subsequent Render"] - LH --> Render["Render Phase (While Component Is Alive)"] - LH --> Post["Post Renders"] - LH --> Clean["Cleanup"] - - %% First Render - subgraph FR_Sync ["Sync"] - L14["**use_hook**
Run on the first use of the hook, which is typically the initial render"] - L16["**use_hook_with_cleanup**
Use a hook with a cleanup function that runs when component is dropped"] - U1["**use_debounce**
Calls a function only after provided duration has passed (dioxus_sdk)"] - U2["**use_interval**
Repeatedly calls a function every certain period (dioxus_sdk)"] - L18["**use_server_cached**
Runs a function on the server (or client if server is not enabled) and sends result - to client. Caches the value on the client"] - end - - subgraph FR_Async ["Async"] - U3["**use_channel/use_listen_channel**
Create and listen to channels for communication between components - (dioxus_sdk)"] - end - - Init --> FR_Sync - Init --> FR_Async - - %% Before Every Render - subgraph BR_Sync ["Sync"] - L19["**use_before_render**
Register a function to run before every subsequent render"] - end - - BeforeRender --> BR_Sync - - %% Render phase - subgraph RP_Sync ["Sync"] - L7["**use_callback**
Keeps a callback up to date for all references to the handle"] - L1["**use_signal**
Basic local state, triggers re-renders on write, does not subscribe to other signals"] - L1b["**use_signal_sync**
Thread-safe signal - Send + Sync"] - L3["**use_memo**
Derived state (memoized), composes signals"] - L10["**use_set_compare/use_set_compare_equal**
Efficient value change tracking"] - end - - subgraph RP_Both ["Sync & Async"] - L8["**use_reactive**
Creates a closure (async/sync) to track 'non-reactive' data"] - end - - subgraph RP_Async ["Async"] - L5["**use_future**
Run an async task once"] - L6["**use_coroutine**
Stream-based concurrency through channels"] - L4["**use_resource**
Async derived state"] - L15["**use_server_future**
Async derived state that runs on the server and caches on the client"] - end - - Render --> RP_Sync - Render --> RP_Both - Render --> RP_Async - - %% Post render - subgraph PR_Sync ["Sync"] - L2["**use_effect**
Side effects after render, composes signals"] - L9["**use_hook_did_run**
Lifecycle check if this hook has been called on the latest render"] - L17["**use_after_render**
Push a function to be run after the next render"] - end - - Post --> PR_Sync - - %% Cleanup - subgraph CL_Sync ["Sync"] - L13["**use_drop**
Callback invoked when component is dropped"] - end - - Clean --> CL_Sync - - %% Context - subgraph CT_Sync ["Sync"] - C1["**use_context_provider**
Provides data to any child"] - C2["**use_context**
Consume provided data"] - C3["**try_use_context**
Like use_context but returns None if missing"] - C4["**use_root_context**
Like use_context except creates context at root if missing"] - C5["**use_coroutine_handle**
Obtain handle to a context-provided coroutine"] - - subgraph CT_Utils ["Utils"] - C6["**use_clipboard**
Access the clipboard (dioxus_sdk)"] - C7["**use_window_size**
Initial window size will be returned with this hook and updated continously as the - window is resized (dioxus_sdk)"] - C8["**use_geolocation**
Provides the latest geocoordinates. Good for navigation-type apps (dioxus_sdk)"] - C9["**use_system_theme**
Initial theme will be returned and updated if the system theme changes (dioxus_sdk)"] - end - end - - C --> CT_Sync - - %% Persistent - subgraph PS_Sync ["Sync"] - P1["**use_persistent**
Store data across application reloads as either local storage or a file storage - (dioxus_sdk)"] - P2["**use_storage**
Like use_persistent except the storage location is generic, which may be useful for custom - implementations (dioxus_sdk)"] - P3["**use_synced_storage**
Store data that persists and syncs across all app sessions (dioxus_sdk)"] - P4["**use_singleton_persistent**
Persistent storage shared for calls from same line (dioxus_sdk)"] - P5["**use_storage_entry**
Creates a StorageEntry with latest value from storage or init if does not exist - (dioxus_sdk)"] - P6["**use_synced_storage_entry**
Creates a StorageEntry with updates subscription (dioxus_sdk)"] - end - - D --> PS_Sync - - %% Global - subgraph GB_Sync ["Sync"] - G1["**GlobalSignal**
Global signal (sync)"] - G2["**GlobalMemo**
Derived global state (sync)"] - G3["**Global**
A lazy value that is created once per application (sync)"] - end - - E --> GB_Sync - - %% Route - subgraph RT_Sync ["Sync"] - R3["**Routable**
The dioxus-router macro used for routing"] - - subgraph RT_Utils ["Utils"] - R1["**use_route**
Access information about the current routing location"] - R2["**use_navigator**
Access navigator to change router history"] - R4["**use_outlet_context**
Access to the outlet context for the route nesting level"] - end - end - - F --> RT_Sync - - %% Legend - subgraph Legend ["Legend"] - L_HIGHLIGHT["Frequently Used"] - L_NORMAL["Standard"] - end - - %% Styling - classDef frequentlyUsed fill:#ff9,stroke:#333,stroke-width:2px - class L_HIGHLIGHT,L1,L2,L3,L4,L5,L8,L14,C1,C2,R1,R2,R3,P1 frequentlyUsed"# -} -``` \ No newline at end of file +# Dioxus Hooks Reference Guide + +## Start: Which scope does your state or utility belong to? + +Choose the appropriate category based on your state management needs: + +- **Local** - Per component state +- **Shared** - Context-based sharing +- **Persistent** - Storage across app reloads +- **Global** - Truly app-wide state +- **Route-based** - Router-related functionality + +## Legend + +⭐ **Frequently Used Hooks** - These are the most commonly used hooks in Dioxus applications + +**Standard Hooks** - All other hooks for specific use cases + +--- + +## Local (Per Component) + +### When Does the Code Need to Run? + +#### First Render (Non-Reactive) + +**Sync Hooks:** +- **[`use_hook`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook.html)** ⭐ - Run on the first use of the hook, which is typically the initial render +- **[`use_hook_with_cleanup`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook_with_cleanup.html)** - Use a hook with a cleanup function that runs when component is dropped +- **[`use_debounce`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_debounce.html)** ⭐ - Calls a function only after provided duration has passed (dioxus_sdk) +- **[`use_interval`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_interval.html)** - Repeatedly calls a function every certain period (dioxus_sdk) +- **[`use_server_cached`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_server_cached.html)** - Runs a function on the server (or client if server is not enabled) and sends result to client. Caches the value on the client + +**Async Hooks:** +- **[`use_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_channel.html)** - Create channels for communication between components (dioxus_sdk) +- **[`use_listen_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_listen_channel.html)** - Listen to channels for communication between components (dioxus_sdk) + +#### Before Every Subsequent Render + +**Sync Hooks:** +- **[`use_before_render`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/fn.use_before_render.html)** - Register a function to run before every subsequent render + +#### Render Phase (While Component Is Alive) + +**Sync Hooks:** +- **[`use_callback`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_callback.html)** - Keeps a callback up to date for all references to the handle +- **[`use_signal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html)** ⭐ - Basic local state, triggers re-renders on write, does not subscribe to other signals +- **[`use_signal_sync`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal_sync.html)** - Thread-safe signal - Send + Sync +- **[`use_memo`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_memo.html)** ⭐ - Derived state (memoized), composes signals +- **[`use_set_compare`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare.html)** - Efficient value change tracking +- **[`use_set_compare_equal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare_equal.html)** - Efficient value change tracking with custom equality + +**Sync & Async Hooks:** +- **[`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_reactive.html)** ⭐ - Creates a closure (async/sync) to track 'non-reactive' data + +**Async Hooks:** +- **[`use_future`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_future.html)** ⭐ - Run an async task once +- **[`use_coroutine`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine.html)** - Stream-based concurrency through channels +- **[`use_resource`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_resource.html)** ⭐ - Async derived state +- **[`use_server_future`](https://docs.rs/dioxus-fullstack/latest/dioxus_fullstack/prelude/fn.use_server_future.html)** - Async derived state that runs on the server and caches on the client + +#### Post Renders + +**Sync Hooks:** +- **[`use_effect`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html)** ⭐ - Side effects after render, composes signals +- **[`use_hook_did_run`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_hook_did_run.html)** - Lifecycle check if this hook has been called on the latest render +- **[`use_after_render`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_after_render.html)** - Push a function to be run after the next render + +#### Cleanup + +**Sync Hooks:** +- **[`use_drop`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/fn.use_drop.html)** - Callback invoked when component is dropped + +--- + +## Shared (Context) + +**Sync Hooks:** +- **[`use_context_provider`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html)** ⭐ - Provides data to any child +- **[`use_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context.html)** ⭐ - Consume provided data +- **[`try_use_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.try_use_context.html)** - Like use_context but returns None if missing +- **[`use_root_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_root_context.html)** - Like use_context except creates context at root if missing +- **[`use_coroutine_handle`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine_handle.html)** - Obtain handle to a context-provided coroutine + +### Context Utilities + +- **[`use_clipboard`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/clipboard/fn.use_clipboard.html)** - Access the clipboard (dioxus_sdk) +- **[`use_window_size`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/window/fn.use_window_size.html)** - Initial window size will be returned with this hook and updated continuously as the window is resized (dioxus_sdk) +- **[`use_geolocation`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/geolocation/use_geolocation/fn.use_geolocation.html)** - Provides the latest geocoordinates. Good for navigation-type apps (dioxus_sdk) +- **[`use_system_theme`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/theme/fn.use_system_theme.html)** - Initial theme will be returned and updated if the system theme changes (dioxus_sdk) + +--- + +## Persistent (Storage) + +**Sync Hooks:** +- **[`use_persistent`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_persistent.html)** ⭐ - Store data across application reloads as either local storage or a file storage (dioxus_sdk) +- **[`use_storage`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_storage.html)** - Like use_persistent except the storage location is generic, which may be useful for custom implementations (dioxus_sdk) +- **[`use_synced_storage`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_synced_storage.html)** - Store data that persists and syncs across all app sessions (dioxus_sdk) +- **[`use_singleton_persistent`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_singleton_persistent.html)** - Persistent storage shared for calls from same line (dioxus_sdk) +- **[`use_storage_entry`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_storage_entry.html)** - Creates a StorageEntry with latest value from storage or init if does not exist (dioxus_sdk) +- **[`use_synced_storage_entry`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_synced_storage_entry.html)** - Creates a StorageEntry with updates subscription (dioxus_sdk) + +--- + +## Global (Truly App-wide) + +**Sync Hooks:** +- **[`GlobalSignal`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/type.GlobalSignal.html)** - Global signal (sync) +- **[`GlobalMemo`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/type.GlobalMemo.html)** - Derived global state (sync) +- **[`Global`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/struct.Global.html)** - A lazy value that is created once per application (sync) + +--- + +## Route-based + +**Core:** +- **[`Routable`](https://docs.rs/dioxus/latest/dioxus/prelude/trait.Routable.html)** ⭐ - The dioxus-router macro used for routing + +### Route Utilities + +- **[`use_route`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_route.html)** ⭐ - Access information about the current routing location +- **[`use_navigator`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_navigator.html)** ⭐ - Access navigator to change router history +- **[`use_outlet_context`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_outlet_context.html)** - Access to the outlet context for the route nesting level \ No newline at end of file From 9781ba64a97532ea386bd80f814af09cb5737d30 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Wed, 23 Jul 2025 12:20:17 +0000 Subject: [PATCH 12/14] Re-org cheat sheet --- docs-src/0.7/src/guides/cheat_sheet.md | 186 ++++++++++++++----------- 1 file changed, 104 insertions(+), 82 deletions(-) diff --git a/docs-src/0.7/src/guides/cheat_sheet.md b/docs-src/0.7/src/guides/cheat_sheet.md index c0255c636..07dddb671 100644 --- a/docs-src/0.7/src/guides/cheat_sheet.md +++ b/docs-src/0.7/src/guides/cheat_sheet.md @@ -1,124 +1,146 @@ -# Dioxus Hooks Reference Guide +# 📘 Cheat Sheet -## Start: Which scope does your state or utility belong to? +⭐ = Most commonly used hooks -Choose the appropriate category based on your state management needs: +--- + +## 🏠 Managing Component State + +*"Which scope does your state or utility belong to?"* -- **Local** - Per component state -- **Shared** - Context-based sharing -- **Persistent** - Storage across app reloads -- **Global** - Truly app-wide state -- **Route-based** - Router-related functionality +### Basic State -## Legend +* ⭐ [`use_signal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html) — Basic local state, triggers re-renders on write, does not subscribe to other signals +* [`use_signal_sync`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal_sync.html) — Thread-safe signal - Send + Sync -⭐ **Frequently Used Hooks** - These are the most commonly used hooks in Dioxus applications +### Derived State -**Standard Hooks** - All other hooks for specific use cases +* ⭐ [`use_memo`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_memo.html) — Derived state (memoized), composes signals +* ⭐ [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_reactive.html) — Creates a closure (async/sync) to track 'non-reactive' data +* [`use_set_compare`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare.html) — Efficient value change tracking +* [`use_set_compare_equal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare_equal.html) — Like `use_set_compare` but uses a custom equality function + +### Callbacks + +* [`use_callback`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_callback.html) — Keeps a callback up to date for all references to the handle --- -## Local (Per Component) +## 🔄 Sharing Data Between Components + +*"Shared (Context)"* -### When Does the Code Need to Run? +### Context -#### First Render (Non-Reactive) +* ⭐ [`use_context_provider`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html) — Provides data to any child +* ⭐ [`use_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context.html) — Consume provided data +* [`try_use_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.try_use_context.html) — Like `use_context` but returns None if missing +* [`use_root_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_root_context.html) — Like `use_context` except creates context at root if missing +* [`use_coroutine_handle`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine_handle.html) — Obtain handle to a context-provided coroutine -**Sync Hooks:** -- **[`use_hook`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook.html)** ⭐ - Run on the first use of the hook, which is typically the initial render -- **[`use_hook_with_cleanup`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook_with_cleanup.html)** - Use a hook with a cleanup function that runs when component is dropped -- **[`use_debounce`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_debounce.html)** ⭐ - Calls a function only after provided duration has passed (dioxus_sdk) -- **[`use_interval`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_interval.html)** - Repeatedly calls a function every certain period (dioxus_sdk) -- **[`use_server_cached`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_server_cached.html)** - Runs a function on the server (or client if server is not enabled) and sends result to client. Caches the value on the client +### Context Utilities -**Async Hooks:** -- **[`use_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_channel.html)** - Create channels for communication between components (dioxus_sdk) -- **[`use_listen_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_listen_channel.html)** - Listen to channels for communication between components (dioxus_sdk) +* [`use_clipboard`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/clipboard/fn.use_clipboard.html) — Access the clipboard (dioxus\_sdk) +* [`use_window_size`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/window/fn.use_window_size.html) — Initial window size will be returned with this hook and updated continously as the window is resized (dioxus\_sdk) +* [`use_geolocation`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/geolocation/use_geolocation/fn.use_geolocation.html) — Provides the latest geocoordinates. Good for navigation-type apps (dioxus\_sdk) +* [`use_system_theme`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/theme/fn.use_system_theme.html) — Initial theme will be returned and updated if the system theme changes (dioxus\_sdk) -#### Before Every Subsequent Render +--- -**Sync Hooks:** -- **[`use_before_render`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/fn.use_before_render.html)** - Register a function to run before every subsequent render +## ⚡ Async Operations & Side Effects -#### Render Phase (While Component Is Alive) +*"When does the code need to run?"* -**Sync Hooks:** -- **[`use_callback`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_callback.html)** - Keeps a callback up to date for all references to the handle -- **[`use_signal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html)** ⭐ - Basic local state, triggers re-renders on write, does not subscribe to other signals -- **[`use_signal_sync`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal_sync.html)** - Thread-safe signal - Send + Sync -- **[`use_memo`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_memo.html)** ⭐ - Derived state (memoized), composes signals -- **[`use_set_compare`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare.html)** - Efficient value change tracking -- **[`use_set_compare_equal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare_equal.html)** - Efficient value change tracking with custom equality +### First Render (Non-Reactive) -**Sync & Async Hooks:** -- **[`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_reactive.html)** ⭐ - Creates a closure (async/sync) to track 'non-reactive' data +#### Sync -**Async Hooks:** -- **[`use_future`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_future.html)** ⭐ - Run an async task once -- **[`use_coroutine`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine.html)** - Stream-based concurrency through channels -- **[`use_resource`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_resource.html)** ⭐ - Async derived state -- **[`use_server_future`](https://docs.rs/dioxus-fullstack/latest/dioxus_fullstack/prelude/fn.use_server_future.html)** - Async derived state that runs on the server and caches on the client +* ⭐ [`use_hook`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook.html) — Run on the first use of the hook, which is typically the initial render +* [`use_hook_with_cleanup`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook_with_cleanup.html) — Use a hook with a cleanup function that runs when component is dropped +* ⭐ [`use_debounce`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_debounce.html) — Calls a function only after provided duration has passed (dioxus\_sdk) +* [`use_interval`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_interval.html) — Repeatedly calls a function every certain period (dioxus\_sdk) +* [`use_server_cached`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_server_cached.html) — Runs a function on the server (or client if server is not enabled) and sends result to client. Caches the value on the client -#### Post Renders +#### Async -**Sync Hooks:** -- **[`use_effect`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html)** ⭐ - Side effects after render, composes signals -- **[`use_hook_did_run`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_hook_did_run.html)** - Lifecycle check if this hook has been called on the latest render -- **[`use_after_render`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_after_render.html)** - Push a function to be run after the next render +* [`use_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_channel.html), [`use_listen_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_listen_channel.html) — Create and listen to channels for communication between components (dioxus\_sdk) -#### Cleanup +### Before Every Render -**Sync Hooks:** -- **[`use_drop`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/fn.use_drop.html)** - Callback invoked when component is dropped +* [`use_before_render`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_before_render.html) — Register a function to run before every subsequent render ---- +### Render Phase (While Component Is Alive) -## Shared (Context) +#### Sync -**Sync Hooks:** -- **[`use_context_provider`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html)** ⭐ - Provides data to any child -- **[`use_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context.html)** ⭐ - Consume provided data -- **[`try_use_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.try_use_context.html)** - Like use_context but returns None if missing -- **[`use_root_context`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_root_context.html)** - Like use_context except creates context at root if missing -- **[`use_coroutine_handle`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine_handle.html)** - Obtain handle to a context-provided coroutine +* [`use_callback`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_callback.html) — Keeps a callback up to date for all references to the handle +* [`use_signal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html) — *(already listed)* +* [`use_signal_sync`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal_sync.html) — *(already listed)* +* [`use_memo`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_memo.html) — *(already listed)* +* [`use_set_compare`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare.html) — *(already listed)* +* [`use_set_compare_equal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare_equal.html) — *(already listed)* -### Context Utilities +#### Sync & Async + +* [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_reactive.html) — *(already listed)* + +#### Async -- **[`use_clipboard`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/clipboard/fn.use_clipboard.html)** - Access the clipboard (dioxus_sdk) -- **[`use_window_size`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/window/fn.use_window_size.html)** - Initial window size will be returned with this hook and updated continuously as the window is resized (dioxus_sdk) -- **[`use_geolocation`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/geolocation/use_geolocation/fn.use_geolocation.html)** - Provides the latest geocoordinates. Good for navigation-type apps (dioxus_sdk) -- **[`use_system_theme`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/theme/fn.use_system_theme.html)** - Initial theme will be returned and updated if the system theme changes (dioxus_sdk) +* ⭐ [`use_future`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_future.html) — Run an async task once +* [`use_coroutine`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine.html) — Stream-based concurrency through channels +* ⭐ [`use_resource`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_resource.html) — Async derived state +* [`use_server_future`](https://docs.rs/dioxus-fullstack/latest/dioxus_fullstack/prelude/fn.use_server_future.html) — Async derived state that runs on the server and caches on the client + +### Post Renders + +* ⭐ [`use_effect`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html) — Side effects after render, composes signals +* [`use_hook_did_run`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_hook_did_run.html) — Lifecycle check if this hook has been called on the latest render +* [`use_after_render`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_after_render.html) — Push a function to be run after the next render + +### Cleanup + +* [`use_drop`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_drop.html) — Callback invoked when component is dropped --- -## Persistent (Storage) +## 💾 Persisting Data + +*"Persistent (Storage)"* + +### Local Storage -**Sync Hooks:** -- **[`use_persistent`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_persistent.html)** ⭐ - Store data across application reloads as either local storage or a file storage (dioxus_sdk) -- **[`use_storage`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_storage.html)** - Like use_persistent except the storage location is generic, which may be useful for custom implementations (dioxus_sdk) -- **[`use_synced_storage`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_synced_storage.html)** - Store data that persists and syncs across all app sessions (dioxus_sdk) -- **[`use_singleton_persistent`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_singleton_persistent.html)** - Persistent storage shared for calls from same line (dioxus_sdk) -- **[`use_storage_entry`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_storage_entry.html)** - Creates a StorageEntry with latest value from storage or init if does not exist (dioxus_sdk) -- **[`use_synced_storage_entry`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_synced_storage_entry.html)** - Creates a StorageEntry with updates subscription (dioxus_sdk) +* ⭐ [`use_persistent`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_persistent.html) — Store data across application reloads as either local storage or a file storage (dioxus\_sdk) +* [`use_storage`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_storage.html) — Like `use_persistent` except the storage location is generic, which may be useful for custom implementations (dioxus\_sdk) +* [`use_singleton_persistent`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_singleton_persistent.html) — Persistent storage shared for calls from same line (dioxus\_sdk) +* [`use_storage_entry`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_storage_entry.html) — Creates a `StorageEntry` with latest value from storage or init if does not exist (dioxus\_sdk) + +### Synced Storage + +* [`use_synced_storage`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_synced_storage.html) — Store data that persists and syncs across all app sessions (dioxus\_sdk) +* [`use_synced_storage_entry`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_synced_storage_entry.html) — Creates a `StorageEntry` with updates subscription (dioxus\_sdk) --- -## Global (Truly App-wide) +## 🌐 Global State + +*"Global (Truly app-wide)"* -**Sync Hooks:** -- **[`GlobalSignal`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/type.GlobalSignal.html)** - Global signal (sync) -- **[`GlobalMemo`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/type.GlobalMemo.html)** - Derived global state (sync) -- **[`Global`](https://docs.rs/dioxus/latest/i686-pc-windows-msvc/dioxus/prelude/struct.Global.html)** - A lazy value that is created once per application (sync) +* [`GlobalSignal`](https://docs.rs/dioxus/latest/dioxus/prelude/type.GlobalSignal.html) — Global signal (sync) +* [`GlobalMemo`](https://docs.rs/dioxus/latest/dioxus/prelude/type.GlobalMemo.html) — Derived global state (sync) +* [`Global`](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Global.html) — A lazy value that is created once per application (sync) --- -## Route-based +## 🧭 Navigation & Routing + +*"Route-based"* + +### Core Routing -**Core:** -- **[`Routable`](https://docs.rs/dioxus/latest/dioxus/prelude/trait.Routable.html)** ⭐ - The dioxus-router macro used for routing +* ⭐ [`Routable`](https://docs.rs/dioxus/latest/dioxus/prelude/trait.Routable.html) — The `dioxus-router` macro used for routing +* ⭐ [`use_route`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_route.html) — Access information about the current routing location +* ⭐ [`use_navigator`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_navigator.html) — Access navigator to change router history -### Route Utilities +### Nested Routes -- **[`use_route`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_route.html)** ⭐ - Access information about the current routing location -- **[`use_navigator`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_navigator.html)** ⭐ - Access navigator to change router history -- **[`use_outlet_context`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_outlet_context.html)** - Access to the outlet context for the route nesting level \ No newline at end of file +* [`use_outlet_context`](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_outlet_context.html) — Access to the outlet context for the route nesting level From 6e4b0ff79b6ca7dbcb58c3b7fe93f863704df7ec Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Thu, 24 Jul 2025 01:40:01 +0000 Subject: [PATCH 13/14] Re-org cheat sheet --- docs-src/0.7/src/guides/cheat_sheet.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs-src/0.7/src/guides/cheat_sheet.md b/docs-src/0.7/src/guides/cheat_sheet.md index 07dddb671..36a43cef4 100644 --- a/docs-src/0.7/src/guides/cheat_sheet.md +++ b/docs-src/0.7/src/guides/cheat_sheet.md @@ -10,6 +10,7 @@ ### Basic State +* ⭐ [`use_hook`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook.html) — Non-reactive, runs on the first use of the hook, which is typically the initial render * ⭐ [`use_signal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html) — Basic local state, triggers re-renders on write, does not subscribe to other signals * [`use_signal_sync`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal_sync.html) — Thread-safe signal - Send + Sync @@ -55,7 +56,7 @@ #### Sync -* ⭐ [`use_hook`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook.html) — Run on the first use of the hook, which is typically the initial render +* ⭐ [`use_hook`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook.html) — *(already listed)* * [`use_hook_with_cleanup`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook_with_cleanup.html) — Use a hook with a cleanup function that runs when component is dropped * ⭐ [`use_debounce`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_debounce.html) — Calls a function only after provided duration has passed (dioxus\_sdk) * [`use_interval`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_interval.html) — Repeatedly calls a function every certain period (dioxus\_sdk) @@ -65,7 +66,7 @@ * [`use_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_channel.html), [`use_listen_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_listen_channel.html) — Create and listen to channels for communication between components (dioxus\_sdk) -### Before Every Render +### Before Every Subsequent Render * [`use_before_render`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_before_render.html) — Register a function to run before every subsequent render @@ -73,7 +74,7 @@ #### Sync -* [`use_callback`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_callback.html) — Keeps a callback up to date for all references to the handle +* [`use_callback`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_callback.html) — *(already listed)* * [`use_signal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html) — *(already listed)* * [`use_signal_sync`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal_sync.html) — *(already listed)* * [`use_memo`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_memo.html) — *(already listed)* From d9eef4c5bc2920e4400ab2423a55117c170dc2a3 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Thu, 14 Aug 2025 04:34:26 +0000 Subject: [PATCH 14/14] Fix route section collisions in cheat sheet --- docs-src/0.7/src/guides/cheat_sheet.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs-src/0.7/src/guides/cheat_sheet.md b/docs-src/0.7/src/guides/cheat_sheet.md index 36a43cef4..939e86428 100644 --- a/docs-src/0.7/src/guides/cheat_sheet.md +++ b/docs-src/0.7/src/guides/cheat_sheet.md @@ -54,7 +54,7 @@ ### First Render (Non-Reactive) -#### Sync +**Sync** * ⭐ [`use_hook`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook.html) — *(already listed)* * [`use_hook_with_cleanup`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook_with_cleanup.html) — Use a hook with a cleanup function that runs when component is dropped @@ -62,7 +62,7 @@ * [`use_interval`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_interval.html) — Repeatedly calls a function every certain period (dioxus\_sdk) * [`use_server_cached`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_server_cached.html) — Runs a function on the server (or client if server is not enabled) and sends result to client. Caches the value on the client -#### Async +**Async** * [`use_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_channel.html), [`use_listen_channel`](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_listen_channel.html) — Create and listen to channels for communication between components (dioxus\_sdk) @@ -72,7 +72,7 @@ ### Render Phase (While Component Is Alive) -#### Sync +**Sync** * [`use_callback`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_callback.html) — *(already listed)* * [`use_signal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html) — *(already listed)* @@ -81,11 +81,11 @@ * [`use_set_compare`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare.html) — *(already listed)* * [`use_set_compare_equal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare_equal.html) — *(already listed)* -#### Sync & Async +**Sync & Async** * [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_reactive.html) — *(already listed)* -#### Async +**Async** * ⭐ [`use_future`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_future.html) — Run an async task once * [`use_coroutine`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine.html) — Stream-based concurrency through channels