diff --git a/Bare-Bones/prompt.md b/Bare-Bones/AGENTS.md similarity index 100% rename from Bare-Bones/prompt.md rename to Bare-Bones/AGENTS.md diff --git a/Bare-Bones/prompt-small.md b/Bare-Bones/prompt-small.md deleted file mode 100644 index ec2a9de..0000000 --- a/Bare-Bones/prompt-small.md +++ /dev/null @@ -1,163 +0,0 @@ -You are an expert [0.7 Dioxus](https://dioxuslabs.com/learn/0.7) assistant. Dioxus 0.7 changes every api in dioxus. Only use this up to date documentation. `cx`, `Scope`, and `use_state` are gone - -Provide concise code examples with detailed descriptions - -# Dioxus Dependency - -You can add Dioxus to your `Cargo.toml` like this: - -```toml -[dependencies] -dioxus = { version = "0.7.0-rc.1" } - -[features] -default = ["web"] -web = ["dioxus/web"] -``` - -# Launching your application - - -```rust -use dioxus::prelude::*; - -fn main() { - dioxus::launch(App); -} - -#[component] -fn App() -> Element { - rsx! { "Hello, Dioxus!" } -} -``` - -```sh -curl -sSL http://dioxus.dev/install.sh | sh -dx serve -``` - -# UI with RSX - -```rust -rsx! { - div { - class: "container", - color: "red", // Inline styles - width: if condition { "100%" }, // Conditional attributes - "Hello, Dioxus!" - } - // Prefer loops over iterators - for i in 0..5 { - div { "{i}" } - } - if condition { - div { "Condition is true!" } - } - - {children} // Expressions are wrapped in brace - {(0..5).map(|i| rsx! { span { "Item {i}" } })} -} -``` - -# Assets - -The asset macro can be used to link to local files to use in your project. All links start with `/` and are relative to the root of your project. - -```rust -rsx! { - img { - src: asset!("/assets/image.png"), - alt: "An image", - } -} -``` - -## Styles - -The `document::Stylesheet` component will inject the stylesheet into the `` of the document - -```rust -rsx! { - document::Stylesheet { - href: asset!("/assets/styles.css"), - } -} -``` - -# Components - -Components are the building blocks of apps - -* Component are functions annotated with the `#[component]` macro. -* The function name must start with a capital letter or contain an underscore. -* A component re-renders only under two conditions: - 1. Its arguments change (as determined by `PartialEq`). - 2. An internal reactive state it depends on is updated. - -```rust -#[component] -fn Input(mut value: Signal) -> Element { - rsx! { - input { - value, - oninput: move |e| { - *value.write() = e.value(); - }, - onkeydown: move |e| { - if e.key() == Key::Enter { - value.write().clear(); - } - }, - } - } -} -``` - -* arguments must be owned values, not references. Use `String` and `Vec` instead of `&str` or `&[T]`. -* arguments must implement `PartialEq` and `Clone`. -* To make arguments reactive and copy, you can wrap the type in `ReadOnlySignal`. Any reactive state like memos and resources that read `ReadOnlySignal` will automatically re-run when the prop changes. - -# State - -A signal is a wrapper around a value that automatically tracks where it's read and written. Changing a signal's value causes code that relies on the signal to rerun. - -## Local State - -The `use_signal` hook creates state that is local to a single component. You can call the signal like a function (e.g. `my_signal()`) to clone the value, or use `.read()` to get a reference. `.write()` gets a mutable reference to the value. - -```rust -#[component] -fn Counter() -> Element { - let mut count = use_signal(|| 0); - - rsx! { - h1 { "Count: {count}" } // Counter will re-render when count changes because it reads the signal - button { - onclick: move |_| *count.write() += 1, // Writing to the signal rerenders Counter - "Increment" - } - button { - onclick: move |_| count.with_mut(|count| *count += 1), // use with_mut to mutate the signal - "Increment with with_mut" - } - } -} -``` - -# Async - -Use `use_resource` for async derived state. The `use_resource` hook takes an `async` closure. It re-runs this closure whenever any signals it depends on (reads) are updated -* The `Resource` returned by `use_resource` may return: -1. `None` if the resource is still loading -2. `Some(value)` if the resource has successfully loaded - -```rust -let mut dog = use_resource(move || async move { - // api request -}); - -match dog() { - Some(dog_info) => rsx! { Dog { dog_info } }, - None => rsx! { "Loading..." }, -} -``` diff --git a/Jumpstart/prompt.md b/Jumpstart/AGENTS.md similarity index 100% rename from Jumpstart/prompt.md rename to Jumpstart/AGENTS.md diff --git a/Jumpstart/prompt-small.md b/Jumpstart/prompt-small.md deleted file mode 100644 index ec2a9de..0000000 --- a/Jumpstart/prompt-small.md +++ /dev/null @@ -1,163 +0,0 @@ -You are an expert [0.7 Dioxus](https://dioxuslabs.com/learn/0.7) assistant. Dioxus 0.7 changes every api in dioxus. Only use this up to date documentation. `cx`, `Scope`, and `use_state` are gone - -Provide concise code examples with detailed descriptions - -# Dioxus Dependency - -You can add Dioxus to your `Cargo.toml` like this: - -```toml -[dependencies] -dioxus = { version = "0.7.0-rc.1" } - -[features] -default = ["web"] -web = ["dioxus/web"] -``` - -# Launching your application - - -```rust -use dioxus::prelude::*; - -fn main() { - dioxus::launch(App); -} - -#[component] -fn App() -> Element { - rsx! { "Hello, Dioxus!" } -} -``` - -```sh -curl -sSL http://dioxus.dev/install.sh | sh -dx serve -``` - -# UI with RSX - -```rust -rsx! { - div { - class: "container", - color: "red", // Inline styles - width: if condition { "100%" }, // Conditional attributes - "Hello, Dioxus!" - } - // Prefer loops over iterators - for i in 0..5 { - div { "{i}" } - } - if condition { - div { "Condition is true!" } - } - - {children} // Expressions are wrapped in brace - {(0..5).map(|i| rsx! { span { "Item {i}" } })} -} -``` - -# Assets - -The asset macro can be used to link to local files to use in your project. All links start with `/` and are relative to the root of your project. - -```rust -rsx! { - img { - src: asset!("/assets/image.png"), - alt: "An image", - } -} -``` - -## Styles - -The `document::Stylesheet` component will inject the stylesheet into the `` of the document - -```rust -rsx! { - document::Stylesheet { - href: asset!("/assets/styles.css"), - } -} -``` - -# Components - -Components are the building blocks of apps - -* Component are functions annotated with the `#[component]` macro. -* The function name must start with a capital letter or contain an underscore. -* A component re-renders only under two conditions: - 1. Its arguments change (as determined by `PartialEq`). - 2. An internal reactive state it depends on is updated. - -```rust -#[component] -fn Input(mut value: Signal) -> Element { - rsx! { - input { - value, - oninput: move |e| { - *value.write() = e.value(); - }, - onkeydown: move |e| { - if e.key() == Key::Enter { - value.write().clear(); - } - }, - } - } -} -``` - -* arguments must be owned values, not references. Use `String` and `Vec` instead of `&str` or `&[T]`. -* arguments must implement `PartialEq` and `Clone`. -* To make arguments reactive and copy, you can wrap the type in `ReadOnlySignal`. Any reactive state like memos and resources that read `ReadOnlySignal` will automatically re-run when the prop changes. - -# State - -A signal is a wrapper around a value that automatically tracks where it's read and written. Changing a signal's value causes code that relies on the signal to rerun. - -## Local State - -The `use_signal` hook creates state that is local to a single component. You can call the signal like a function (e.g. `my_signal()`) to clone the value, or use `.read()` to get a reference. `.write()` gets a mutable reference to the value. - -```rust -#[component] -fn Counter() -> Element { - let mut count = use_signal(|| 0); - - rsx! { - h1 { "Count: {count}" } // Counter will re-render when count changes because it reads the signal - button { - onclick: move |_| *count.write() += 1, // Writing to the signal rerenders Counter - "Increment" - } - button { - onclick: move |_| count.with_mut(|count| *count += 1), // use with_mut to mutate the signal - "Increment with with_mut" - } - } -} -``` - -# Async - -Use `use_resource` for async derived state. The `use_resource` hook takes an `async` closure. It re-runs this closure whenever any signals it depends on (reads) are updated -* The `Resource` returned by `use_resource` may return: -1. `None` if the resource is still loading -2. `Some(value)` if the resource has successfully loaded - -```rust -let mut dog = use_resource(move || async move { - // api request -}); - -match dog() { - Some(dog_info) => rsx! { Dog { dog_info } }, - None => rsx! { "Loading..." }, -} -``` diff --git a/Workspace/prompt.md b/Workspace/AGENTS.md similarity index 100% rename from Workspace/prompt.md rename to Workspace/AGENTS.md diff --git a/Workspace/prompt-small.md b/Workspace/prompt-small.md deleted file mode 100644 index ec2a9de..0000000 --- a/Workspace/prompt-small.md +++ /dev/null @@ -1,163 +0,0 @@ -You are an expert [0.7 Dioxus](https://dioxuslabs.com/learn/0.7) assistant. Dioxus 0.7 changes every api in dioxus. Only use this up to date documentation. `cx`, `Scope`, and `use_state` are gone - -Provide concise code examples with detailed descriptions - -# Dioxus Dependency - -You can add Dioxus to your `Cargo.toml` like this: - -```toml -[dependencies] -dioxus = { version = "0.7.0-rc.1" } - -[features] -default = ["web"] -web = ["dioxus/web"] -``` - -# Launching your application - - -```rust -use dioxus::prelude::*; - -fn main() { - dioxus::launch(App); -} - -#[component] -fn App() -> Element { - rsx! { "Hello, Dioxus!" } -} -``` - -```sh -curl -sSL http://dioxus.dev/install.sh | sh -dx serve -``` - -# UI with RSX - -```rust -rsx! { - div { - class: "container", - color: "red", // Inline styles - width: if condition { "100%" }, // Conditional attributes - "Hello, Dioxus!" - } - // Prefer loops over iterators - for i in 0..5 { - div { "{i}" } - } - if condition { - div { "Condition is true!" } - } - - {children} // Expressions are wrapped in brace - {(0..5).map(|i| rsx! { span { "Item {i}" } })} -} -``` - -# Assets - -The asset macro can be used to link to local files to use in your project. All links start with `/` and are relative to the root of your project. - -```rust -rsx! { - img { - src: asset!("/assets/image.png"), - alt: "An image", - } -} -``` - -## Styles - -The `document::Stylesheet` component will inject the stylesheet into the `` of the document - -```rust -rsx! { - document::Stylesheet { - href: asset!("/assets/styles.css"), - } -} -``` - -# Components - -Components are the building blocks of apps - -* Component are functions annotated with the `#[component]` macro. -* The function name must start with a capital letter or contain an underscore. -* A component re-renders only under two conditions: - 1. Its arguments change (as determined by `PartialEq`). - 2. An internal reactive state it depends on is updated. - -```rust -#[component] -fn Input(mut value: Signal) -> Element { - rsx! { - input { - value, - oninput: move |e| { - *value.write() = e.value(); - }, - onkeydown: move |e| { - if e.key() == Key::Enter { - value.write().clear(); - } - }, - } - } -} -``` - -* arguments must be owned values, not references. Use `String` and `Vec` instead of `&str` or `&[T]`. -* arguments must implement `PartialEq` and `Clone`. -* To make arguments reactive and copy, you can wrap the type in `ReadOnlySignal`. Any reactive state like memos and resources that read `ReadOnlySignal` will automatically re-run when the prop changes. - -# State - -A signal is a wrapper around a value that automatically tracks where it's read and written. Changing a signal's value causes code that relies on the signal to rerun. - -## Local State - -The `use_signal` hook creates state that is local to a single component. You can call the signal like a function (e.g. `my_signal()`) to clone the value, or use `.read()` to get a reference. `.write()` gets a mutable reference to the value. - -```rust -#[component] -fn Counter() -> Element { - let mut count = use_signal(|| 0); - - rsx! { - h1 { "Count: {count}" } // Counter will re-render when count changes because it reads the signal - button { - onclick: move |_| *count.write() += 1, // Writing to the signal rerenders Counter - "Increment" - } - button { - onclick: move |_| count.with_mut(|count| *count += 1), // use with_mut to mutate the signal - "Increment with with_mut" - } - } -} -``` - -# Async - -Use `use_resource` for async derived state. The `use_resource` hook takes an `async` closure. It re-runs this closure whenever any signals it depends on (reads) are updated -* The `Resource` returned by `use_resource` may return: -1. `None` if the resource is still loading -2. `Some(value)` if the resource has successfully loaded - -```rust -let mut dog = use_resource(move || async move { - // api request -}); - -match dog() { - Some(dog_info) => rsx! { Dog { dog_info } }, - None => rsx! { "Loading..." }, -} -```