{"owner":"DioxusLabs","repo":"dioxus","hasSkills":true,"totalSkillsCount":57,"totalTokensCount":47008,"categories":["anthropic-skill","root-instruction","plugin-manifest"],"hasMcp":false,"mcpConfig":null,"found":[".devin/skills/release-alpha/SKILL.md","AGENTS.md","packages/autofmt/README.md","packages/cli-config/README.md","packages/cli-harnesses/README.md","packages/cli/README.md","packages/cli/assets/android/prebuilt/README.md","packages/config-macro/README.md","packages/config-macros/README.md","packages/const-serialize/README.md","packages/core-macro/README.md","packages/core-macro/docs/component.md","packages/core-macro/docs/props.md","packages/core-macro/docs/rsx.md","packages/core/README.md","packages/core/docs/common_spawn_errors.md","packages/core/docs/reactivity.md","packages/core/tests/README.md","packages/depinfo/README.md","packages/desktop/README.md","packages/desktop/src/readme.md","packages/dioxus/README.md","packages/document/docs/eval.md","packages/document/docs/head.md","packages/extension/README.md","packages/fullstack-core/README.md","packages/fullstack-server/README.md","packages/fullstack/README.md","packages/fuzz/README.md","packages/generational-box/README.md","packages/hooks/README.md","packages/hooks/docs/derived_state.md","packages/hooks/docs/moving_state_around.md","packages/hooks/docs/rules_of_hooks.md","packages/hooks/docs/side_effects.md","packages/hooks/docs/use_resource.md","packages/html/README.md","packages/html/docs/common_event_handler_errors.md","packages/html/docs/event_handlers.md","packages/interpreter/README.md","packages/liveview/README.md","packages/logger/README.md","packages/manganis/manganis-macro/README.md","packages/manganis/manganis/README.md","packages/playwright-tests/barebones-template/README.md","packages/router/README.md","packages/rsx-rosetta/README.md","packages/rsx/README.md","packages/signals/README.md","packages/signals/docs/memo.md","packages/signals/docs/signals.md","packages/ssr/README.md","packages/stores/README.md","packages/subsecond/README.md","packages/subsecond/subsecond-tests/cross-tls-test/README.md","packages/wasm-split/README.md","packages/web/README.md"],"skills":{".devin/skills/release-alpha/SKILL.md":"---\nname: release-alpha\ndescription: Cut a Dioxus 0.x alpha release (version bump, crates.io publish, tag, GitHub release, CLI binaries, template update, verification, and optionally the SDK/icons/code/components releases)\nargument-hint: \"<new version, e.g. 0.8.0-alpha.3>\"\ntriggers:\n  - user\n  - model\nallowed-tools:\n  - read\n  - grep\n  - glob\n---\n\n# Releasing a Dioxus alpha\n\nUse this to cut a prerelease of the whole workspace (for example `0.8.0-alpha.3`). The general checklist is in `notes/RELEASING.md`. This skill is the concrete, tested procedure for an alpha, written down after cutting `0.8.0-alpha.2`. Step 8 (ecosystem crates) was added after `0.8.0-alpha.3`.\n\n`NEW` is the version being released and `PREV` is the last release tag (e.g. `v0.8.0-alpha.2`). If the user didn't give `NEW`, ask.\n\n## Confirmation gates\n\nThese steps can't be undone. Do each one only when the user has explicitly asked for it, and don't treat approval of one as approval of the next:\n\n- publishing to crates.io (versions can't be deleted)\n- pushing to `main`. Branch protection requires a PR, and the user's account can bypass that rule, so a direct push goes through silently. Prefer a PR.\n- pushing tags, creating the GitHub release, and running the `Publish CLI` workflow\n- creating new crates on crates.io and changing crate owners\n\nNever edit `.npmrc`, `minimumReleaseAge` or branch protection to get around a failure.\n\n## Environment notes (macOS)\n\n- **bash 3.2:** a heredoc inside `$(...)` that contains an apostrophe fails to parse. Write commit messages and PR bodies to a file and use `git commit -F file` and `gh pr create --body-file file`.\n- **sed:** in-place edits need `sed -i ''`.\n- **crates.io API:** requests are rejected without a User-Agent, so pass `curl -A dioxus-release-check ...`.\n- **Don't touch the user's `dx`:** don't `cargo install` over it. Build `dx` into `target/release/dx` with `cargo build -p dioxus-cli --release`, and set `DX_HOME=<scratch dir>` so its tools are downloaded fresh and the user's dx data stays untouched.\n- **Cleanup:** put scratch work under `/tmp/<name>` and delete it when done.\n\n## 1. Pre-flight\n\n1. **Base commit and CI.** Find the latest `main` commit with `git fetch origin`. Check its CI with `gh run list --branch main --workflow main.yml --limit 3`. Wait for green before cutting.\n2. **What's new.** Find the commit `PREV` was cut from: `git merge-base origin/main PREV`. A tag can be on a side branch (alpha.1's was). List the commits since then with `git log --oneline <base>..origin/main`.\n3. **New publishable crates.** Diff the `[workspace.dependencies]` entries in `Cargo.toml` against `PREV`. For each publishable member, query `https://crates.io/api/v1/crates/<name>`; a 404 means it's new.\n   - **Claim the names first** (confirmation gate). For each new crate, in `/tmp`, run `cargo new --lib --vcs none <name>`. Copy `description`, `license`, `repository`, `homepage`, `keywords` and `authors` from the real crate, set `version = \"0.0.0\"`, and make `src/lib.rs` just `//! Coming soon.`. Then `cargo publish --dry-run` followed by `cargo publish`.\n   - **Add owners:** `github:dioxuslabs:publish`, `jkelleyrtp` (Jonathan Kelley) and `ealmloff` (Evan Almloff), with `cargo owner --add github:dioxuslabs:publish --add jkelleyrtp --add ealmloff <crate>`. This needs a token with the `change-owners` scope. If cargo returns 403, give the user `https://crates.io/crates/<crate>/settings` instead.\n   - **Naming:** a crate name can't be changed once it has a real release, so settle names before publishing.\n4. **Dev-dependencies on `publish = false` crates** (for example `dioxus-renderer-oracle` in `dioxus-core`). These are fine because `cargo workspaces publish` strips dev-dependencies by default (it logs `warn removing dev-deps ...`). Never pass `--no-remove-dev-deps`. Plain `cargo publish` or `cargo publish --workspace` would fail on them.\n5. **Optional packaging dry run.** `cargo workspaces publish --dry-run` can't get past the first crate whose dependencies aren't on crates.io yet, so it isn't useful. Instead:\n   - Create a scratch worktree with `git worktree add --detach /tmp/dioxus-dryrun HEAD`.\n   - Bump the version there, and strip `[dev-dependencies]` from the crates you're checking.\n   - Run `cargo publish --dry-run --no-verify --allow-dirty -p <crate> -p <each workspace crate it depends on, transitively>`.\n   - Remove the worktree afterwards with `git worktree remove --force`.\n6. **Smoke test** (web, from the base commit):\n   - Build `dx` as described in the environment notes.\n   - Run `dx new` in `/tmp`. It needs a TTY, and even with `--yes` it still asks for the sub-template and platform. To run it without a TTY, pass `--subtemplate Bare-Bones --option default_platform=web --yes --vcs none`.\n   - Add `[patch.crates-io] dioxus = { path = \"<repo>/packages/dioxus\" }` to the project.\n   - Run `dx serve --web --port <p> --open false --interactive false`. In the browser, check that the page renders and the CSS/SVG assets load.\n   - Check hot reload: edit RSX text, then CSS, then add a `use_signal` counter button (a Rust hot-patch) and click it.\n   - Run `dx bundle --web --release`, serve `target/dx/<app>/release/web/public` with `python3 -m http.server`, and click the button again.\n   - Check that `dx` installs `wasm-bindgen-cli` at the same version as the project's `wasm-bindgen`, and compare against the latest on crates.io.\n   - To check app logs, use the interactive TUI. `--interactive false --verbose` drops app logs; that's an existing bug.\n\n## 2. Version bump\n\n1. Create the branch: `git switch -c release-NEW origin/main`, then `git branch --unset-upstream`.\n2. Find every reference to the old version with `rg -l --glob '!Cargo.lock' --glob '!target/**' '<OLD_VERSION_REGEX>' .`. Expect:\n   - `Cargo.toml` (the `[workspace.package]` version and every `=<old>` entry in `[workspace.dependencies]`)\n   - `packages/const-serialize/Cargo.toml`\n   - `packages/const-serialize-macro/Cargo.toml`\n   - `packages/manganis/manganis-core/Cargo.toml` (its `const-serialize` dependency)\n3. Replace the version with `sed -i '' 's/<old>/<new>/g' <files>`, then run `cargo update -w`.\n4. Verify:\n   - In `git diff -U0 Cargo.lock`, the only changed lines are `version = \"...\"` lines.\n   - `cargo metadata --locked` succeeds.\n   - `cargo check --locked -p dioxus -p dioxus-cli` succeeds.\n5. Commit with the message `Bump versions for NEW release` (the existing convention).\n6. Get the bump onto `main` before tagging, preferably through a PR. The tag must end up on a commit that's on `main`.\n\n## 3. Release notes\n\n1. Generate the base notes:\n   `gh api repos/DioxusLabs/dioxus/releases/generate-notes -f tag_name=vNEW -f target_commitish=main -f previous_tag_name=PREV --jq .body`.\n   `target_commitish` must be a branch name; a SHA is rejected.\n2. Above the generated list, add a `## Highlights` section and, if needed, a `## Breaking changes` section. Write them from the PR descriptions (`gh pr view <n> --json title,body`), not just the titles. Keep the generated \"What's Changed\", \"New Contributors\" and \"Full Changelog\" sections unchanged.\n3. Credit original authors of rebased or superseded PRs, e.g. `(originally #NNNN by @user)`.\n4. Commits pushed straight to main have no PR and won't appear in the generated list.\n5. Save the notes to `/tmp/vNEW-release-notes.md`.\n\n## 4. Publish (confirmation gate)\n\nFrom a clean tree on the bump commit, run the command from `notes/RELEASING.md`:\n\n```\ncargo workspaces publish --publish-as-is --allow-dirty --no-git-push --no-individual-tags\n```\n\n- **Rate limits:** crates.io allows a burst of about 30 to 34 updates to existing crates, then about 1 per minute. When it returns `429 Too Many Requests ... try again after <date> GMT`, `cargo-workspaces` stops.\n- **Retrying:** re-run with `publish-with-retry.sh` in this skill's directory. Each re-run skips crates that are already published, waits until the time crates.io gave, and stops on any non-rate-limit error. It shows each run's output as it happens and also saves it to `<log prefix><run>.log`. Run it in the background and report progress as `published N/total`.\n- **Timing:** for about 56 crates, expect about 30 minutes in total.\n- **Check the result:** query `https://crates.io/api/v1/crates/<name>/NEW` for every publishable crate. Take the list from `cargo metadata --no-deps` (packages where `publish` is null or non-empty).\n\n## 5. Tag, GitHub release and CLI binaries (each a confirmation gate)\n\n1. **Tag:** previous tags are lightweight. Run `git tag vNEW <bump commit>`, then `git push origin vNEW`.\n2. **GitHub release:**\n   `gh release create vNEW --verify-tag --prerelease --latest=false --title vNEW --notes-file /tmp/vNEW-release-notes.md`.\n   Afterwards, confirm `gh api repos/DioxusLabs/dioxus/releases/latest` still returns the last stable release.\n3. **CLI binaries:** the release must exist first, because the workflow uploads to it:\n   `gh workflow run publish.yml --ref main -f post=vNEW -f channel=vNEW`.\n   It takes about 30 minutes; Intel macOS is the slowest job. When it finishes, the release should have 16 files: `.zip`, `.tar.gz` and `.sha256` for each of 6 targets (Windows has no `.tar.gz`).\n\n## 6. Verify\n\n1. **docs.rs:** check `https://docs.rs/crate/<name>/NEW/status.json` (`doc_status`) for every crate.\n   - `dioxus-cli` always fails because it's binary-only. That's expected.\n   - For any other failure, read the build log at `https://docs.rs/crate/<name>/NEW/builds/<id>`; the first build id is linked from `/builds`. Also check whether the previous version failed the same way.\n2. **binstall:**\n   - Download a `cargo-binstall` release that's at least 7 days old into `/tmp` with `gh release download vX --repo cargo-bins/cargo-binstall --pattern 'cargo-binstall-aarch64-apple-darwin.zip'`.\n   - Run `cargo-binstall dioxus-cli@NEW --root /tmp/<scratch> --no-confirm --no-track --disable-telemetry --strategies crate-meta-data`.\n   - `dx --version` should print `NEW (<tag commit short sha>)`.\n3. **Published crates:**\n   - Run `dx new` with the binstalled `dx`, without the `[patch]` section.\n   - Run `cargo generate-lockfile`, and check that `dioxus*` resolve to `NEW` from the registry.\n   - Run `dx serve` and repeat the browser and hot-reload checks from 1.6.\n\n## 7. Template\n\nThe default `dx new` template is `gh:dioxuslabs/dioxus-template`, on the branch `v<major>.<minor>` (e.g. `v0.8`).\n\n1. Clone it into `/tmp` with `gh repo clone DioxusLabs/dioxus-template /tmp/dioxus-template -- --branch v0.8`, and create a branch.\n2. Bump the old version to `NEW` in:\n   - `common.rhai` (`DIOXUS_DEP_SRC_VAR`)\n   - `Bare-Bones/AGENTS.md`, `Jumpstart/AGENTS.md`, `Workspace/AGENTS.md`\n   - `.github/workflows/main.yml` (the `cargo binstall dioxus-cli@...` line)\n3. Leave `dioxuslabs.com/learn/<ver>/` links alone unless that docs version returns 200.\n4. Test locally the way the template's CI does: for each of Bare-Bones, Jumpstart and Workspace, run `dx new --template . --subtemplate <X> --yes --option default_platform=web --vcs none <dir>` (Workspace doesn't need `default_platform`), then `cargo check --all-features`.\n5. Open a PR against `v0.8`.\n\n## 8. Ecosystem crates (optional)\n\nOnly do this if the user asks. These repos pin Dioxus exactly (`=NEW`), so each one needs a matching release. Their 0.8 work lives on a `0.8` branch (`v<major>.<minor>` without the `v`); `main` stays on 0.7.\n\n| Repo | Crates published | Version |\n|---|---|---|\n| `DioxusLabs/sdk` | `dioxus-sdk` and the `dioxus-sdk-{time,storage,geolocation,notification,sync,util,window}` subcrates | `NEW` (mirrors Dioxus) |\n| `DioxusLabs/dioxus-icons` | `dioxus-icons` | its next minor with Dioxus's prerelease suffix, e.g. `0.2.0-alpha.3` |\n| `DioxusLabs/dioxus-code` | `dioxus-code-macro`, `dioxus-code`, `dioxus-code-editor` (all one version) | same rule as icons |\n| `DioxusLabs/dioxus-components` | nothing; `dx components add` uses the `0.8` branch from git | n/a |\n\nPrerelease versions mean `cargo add` keeps giving 0.7 users the latest stable release.\n\n1. **Look for upgrade work already in progress.** Run `gh pr list --repo <repo> --state open` on each repo. If a contributor has an upgrade branch open, build the release PR on top of their commits rather than starting fresh. Add `Co-authored-by: <name> <email>` (from `git log`) to every commit you make in that repo. Keep their PRs open until yours merge, then close them with a thank-you that links the replacement.\n2. **Release order.** Components depends on the SDK (`dioxus-primitives` → `dioxus-sdk-time`), and its unpublished `preview` crate depends on icons and code. The dioxus-code docsite depends on `dioxus-primitives` from components via git. So:\n   1. Release the SDK and icons: PR to `0.8` (create the branch from `main` if it doesn't exist), merge, publish, tag.\n   2. Open the components PR to `0.8`. Until the crates above are published, point it at their release branches as git dependencies. Merge it.\n   3. Release dioxus-code. Pin the docsite to the components merge commit with `rev = \"<sha>\"`, not `branch = \"0.8\"`. Because both repos pin Dioxus exactly, a branch reference breaks resolution as soon as components moves to the next alpha.\n   4. Follow-up PR in components: switch to exact pins on the published crates (`=NEW`, `=0.x.0-alpha.N`). Check that `Cargo.lock` has no `git+` sources left.\n3. **Each release PR:** bump the Dioxus pins and the crate versions, update the README install lines and any compatibility notes, then run the repo's CI commands locally. CI on these repos usually only runs for PRs into `main`, so it won't run on a PR into `0.8` (components#307 adds version-branch CI there). Expect API fixes from that Dioxus release, such as the keyboard-types 0.8 `Key::Named(NamedKey::…)` change in alpha.3.\n4. **Publish** (confirmation gate). Publish from a clean `git worktree add --detach <dir> <merge commit>`:\n   - Check `git diff --stat <tested head> <merge commit>` is empty (PRs are squash-merged) and the squash commit kept the `Co-authored-by` trailers.\n   - Check `cargo workspaces list` shows only the crates above, with no examples.\n   - Run `publish-with-retry.sh <worktree> <log prefix>`. Use `cargo workspaces` for dioxus-code too: `dioxus-code-macro` dev-depends on `dioxus-code`, and plain `cargo publish` can't handle that cycle.\n5. **Tag and release** (confirmation gates): add a lightweight `v<version>` tag on the merge commit, then run `gh release create ... --prerelease --latest=false`. Above GitHub's generated notes (`target_commitish=0.8`, `previous_tag_name=<last tag>`), add a short intro: the Dioxus version it targets, the install line, a note that 0.7 users aren't affected, and credit for the PRs it builds on. The generated list only credits whoever opened the release PR.\n6. **Verify:**\n   - every version returns 200 from the crates.io API, and `max_stable_version` is unchanged\n   - a scratch project that depends on Dioxus `NEW` plus the new crates resolves everything from the registry, with one `dioxus`, and passes `cargo check`\n   - docs.rs builds. `dioxus-sdk` and `dioxus-sdk-window` fail because `listen` and `get_theme_platform` are defined twice under all features (0.7.0 failed the same way). Large crates like `dioxus-icons` take a few minutes to show as built.\n7. **Gotchas:**\n   - The components `preview` and dioxus-code docsite web builds compile C to wasm32 (`arborium-sysroot`), which Apple clang can't do. Without an LLVM clang, check those for desktop instead.\n   - None of these repos delete merged branches automatically. Delete the temporary release branches only once nothing references them, including the docsite's components rev.\n\n## 9. Wrap up\n\nReport back:\n\n- links to the crates.io release, the GitHub release, the CLI workflow run and any PRs\n- the docs.rs results\n- anything you didn't test (desktop, mobile, fullstack, Windows/Linux)\n- follow-ups: owner invites, open PRs, letting VIP projects like Freya know, and the Discord release-notes channel\n\nDelete all `/tmp` scratch files and worktrees you created.\n","AGENTS.md":"# Dioxus Agent Guide\n\nDioxus is a cross-platform UI framework for Rust, similar to React. It compiles to web (WASM), desktop (webview), mobile (iOS/Android), and native (GPU-rendered).\n\n## Quick Overview\n\n- **Language**: Rust (stable toolchain)\n- **UI Model**: React-like with VirtualDOM, components, hooks, signals\n- **Syntax**: JSX-like `rsx!` macro for declaring UI\n- **Platforms**: Web, Desktop (Windows/macOS/Linux), Mobile, Native, LiveView (server-rendered)\n\n## Workspace Structure\n\n```\npackages/\n├── dioxus/           # Main re-export crate users depend on\n├── core/             # VirtualDOM, components, diffing, scheduling\n├── rsx/              # RSX macro parsing and code generation\n├── rsx-hotreload/    # Template diffing for hot-reload\n├── signals/          # Reactive state (Signal, Memo, Store)\n├── hooks/            # Built-in hooks (use_signal, use_effect, etc.)\n├── router/           # Type-safe routing with #[derive(Routable)]\n├── fullstack/        # SSR, hydration, #[server] functions\n├── cli/              # `dx` build tool, dev server, bundling\n├── web/              # WASM renderer\n├── desktop/          # Wry/Tao webview renderer\n├── native/           # Blitz/Vello GPU renderer\n├── liveview/         # WebSocket streaming renderer\n├── manganis/         # asset!() macro for compile-time assets\n├── subsecond/        # Hot-patching system (jump table indirection)\n├── devtools/         # Dev server communication protocol\n├── interpreter/      # Sledgehammer JS for DOM mutations\n└── wasm-split/       # WASM code splitting\n```\n\n## Architecture Documentation\n\nFor deeper understanding, see `notes/architecture/`:\n\n| When working on...                         | Read...            |\n| ------------------------------------------ | ------------------ |\n| VirtualDOM, components, diffing, events    | `01-CORE.md`       |\n| CLI, build system, bundling, dev server    | `02-CLI.md`        |\n| RSX macro, parsing, formatting             | `03-RSX.md`        |\n| Signals, state management, reactivity      | `04-SIGNALS.md`    |\n| Server functions, SSR, hydration           | `05-FULLSTACK.md`  |\n| Web/desktop/native/liveview renderers      | `06-RENDERERS.md`  |\n| Hot-reload, hot-patching, devtools         | `07-HOTRELOAD.md`  |\n| Asset macro, manganis, const serialization | `08-ASSETS.md`     |\n| Router, navigation, nested routes          | `09-ROUTER.md`     |\n| WASM code splitting                        | `10-WASM-SPLIT.md` |\n\n## Key Concepts\n\n- **VirtualDOM**: Tree of `VNode` with templates, dynamic nodes, and attributes\n- **Signals**: Copy-able reactive primitives via generational-box (generation-based validity)\n- **WriteMutations**: Trait that renderers implement to apply DOM changes\n- **RSX**: Proc macro that compiles JSX-like syntax to `VNode` construction\n- **Server Functions**: `#[server]` macro generates client RPC stubs and server handlers\n- **Subsecond**: Hot-patches Rust code via jump table indirection (no memory modification)\n- **Manganis**: `asset!(\"/main.css\")` macro for including assets by embedding data via linker symbols\n\n## Common Patterns\n\n**Component definition**:\n```rust\n#[component]\nfn MyComponent(name: String) -> Element {\n    let mut count = use_signal(|| 0);\n    rsx! {\n        button { onclick: move |_| count += 1, \"{name}: {count}\" }\n    }\n}\n```\n\n## Notes for Agents\n\n1. The `dioxus` crate re-exports from other crates - most implementation is in `packages/core`, `packages/signals`, etc.\n2. RSX macro expansion happens in `packages/rsx` - look there for syntax questions\n3. Each renderer implements `WriteMutations` differently - see `06-RENDERERS.md`\n4. Hot-reload has two systems: RSX template diffing (fast) and Subsecond code patching (full Rust)\n5. Assets use link sections and binary patching - the `asset!()` macro creates symbols the CLI processes\n","packages/autofmt/README.md":"# dioxus-autofmt\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-autofmt.svg\n[crates-url]: https://crates.io/crates/dioxus-autofmt\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-autofmt/latest/dioxus_autofmt) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-autofmt` provides a pretty printer for the `rsx` syntax tree.\n\nThis is done manually with a via set of formatting rules. The output is not guaranteed to be stable between minor versions of the crate as we might tweak the output.\n\n`dioxus-autofmt` provides an API to perform precision edits as well as just spit out a block of formatted RSX from any RSX syntax tree. This is used by the `rsx-rosetta` crate which can accept various input languages and output valid RSX.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/cli-config/README.md":"# dioxus-cli-config\n\nA crate that provides key/value names and types for configuring Dioxus applications at runtime.\n\nThis crate exists for us to very cleanly define the exact fields we want to pass down to Dioxus applications at runtime but without exposing the entire config object.\n\nThis leads to faster compile times, smaller binaries, and a clearer distinction between the config and the application.\n","packages/cli-harnesses/README.md":"# Test harnesses\n\nThis folder contains a series of CLI harnesses that represent common structures of dioxus apps.\n\nWe test these projects as a form of smoke testing to ensure our argument resolution works properly.\n\nThese projects might not be functionally useful, but they do have interesting properties that the CLI tests.\n\nThe tests for the CLI are contained within the CLI itself.\n\n## This Folder\n\nThe items in this folder are procedurally generated by tests in the CLI crate. We will delete EVERYTHING that ends up here.\n\n## How platform resolution works\n\nDetermine which features, triple, profile, etc to pass to the build.\n\nMost of the time, users should use `dx serve --<platform>` where the platform name directly\ncorresponds to the feature in their cargo.toml. So,\n- `dx serve --web` will enable the `web` feature\n- `dx serve --mobile` will enable the `mobile` feature\n- `dx serve --desktop` will enable the `desktop` feature\n\nIn this case, we set default-features to false and then add back the default features that\naren't renderers, and then add the feature for the given renderer (i.e., web/desktop/mobile).\nWe call this \"no-default-features-stripped.\"\n\nThere are a few cases where the user doesn't need to pass a platform.\n- they selected one via `dioxus = { features = [\"web\"] }`\n- they have a single platform in their default features `default = [\"web\"]`\n- there is only a single non-server renderer as a feature `web = [\"dioxus/web\"], server = [\"dioxus/server\"]`\n- they compose the super triple via triple + bundleformat + features\n\nNote that we only use the names of the features to correspond with the platform.\nPlatforms are \"super triples\", meaning they contain information about\n- bundle format\n- target triple\n- how to serve\n- enabled features\n\nBy default, the --platform presets correspond to:\n- web:          bundle(web), triple(wasm32), serve(http-serve), features(\"web\")\n- desktop:      alias to mac/win/linux\n- mac:          bundle(mac), triple(host), serve(appbundle-open), features(\"desktop\")\n- windows:      bundle(exefolder), triple(host), serve(run-exe), features(\"desktop\")\n- linux:        bundle(appimage), triple(host), serve(run-exe), features(\"desktop\")\n- ios:          bundle(ios), triple(arm64-apple-ios), serve(ios-simulator/xcrun), features(\"mobile\")\n- android:      bundle(android), triple(arm64-apple-ios), serve(android-emulator/adb), features(\"mobile\")\n- server:       bundle(server), triple(host), serve(run-exe), features(\"server\")\n- liveview:     bundle(liveview), triple(host), serve(run-exe), features(\"liveview\")\n- unknown:      <auto or default to desktop>\n\nFullstack usage is inferred from the presence of the fullstack feature or --fullstack.\n\n## List of harnesses (brainstorming)\n\n- app that doesn't use dioxus\n- simple app where the renderer is used as an explicit feature\n- simple app, same as above, but with fullstack enabled\n  - since no `server` feature is present, we don't run the server\n- simple app, same as above, but with a `server` feature\n  - server should launch and take precedence over the client\n- simple server-only app\n  - IE you're doing SSR with dioxus\n","packages/cli/README.md":"<div>\n  <h1>📦✨ Dioxus CLI</h1>\n  <p><strong>Tooling to supercharge Dioxus projects</strong></p>\n</div>\n\nThe **dioxus-cli** (inspired by wasm-pack and webpack) is a tool for getting Dioxus projects up and running.\nIt handles building, bundling, development and publishing to simplify development.\n\n## Installation\n\n### Install the stable version (recommended)\n\n```shell\ncargo install dioxus-cli\n```\n\n### Install the latest development build through git\n\nTo get the latest bug fixes and features, you can install the development version from git.\nHowever, this is not fully tested.\nThat means you're probably going to have more bugs despite having the latest bug fixes.\n\n```shell\ncargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli\n```\n\nThis will download the CLI from the master branch,\nand install it in Cargo's global binary directory (`~/.cargo/bin/` by default).\n\n### Install from local folder\nNote: The CLI will fail to build projects in debug profile. This is currently under investigation.\n```shell\ncargo install --path .\n```\n\n## Get started\n\nUse `dx new` to initialize a new Dioxus project.\nIt will be cloned from the [dioxus-template](https://github.com/DioxusLabs/dioxus-template) repository.\n\nAlternatively, you can specify the template path:\n\n```shell\ndx new --template gh:dioxuslabs/dioxus-template\n```\n\nRun `dx --help` for a list of all the available commands.\nFurthermore, you can run `dx <command> --help` to get help with a specific command.\n\n## Dioxus config file\n\nYou can use the `Dioxus.toml` file for further configuration.\nSome fields are mandatory, but the CLI tool will tell you which ones are missing.\nYou can create a `Dioxus.toml` with all fields already set using `dx config init project-name`,\nor you can use this bare-bones template (only mandatory fields) to get started:\n\n```toml\n[application]\nname = \"project-name\"\n# Currently supported platforms: web, desktop\ndefault_platform = \"web\"\n\n# Optional: enable copying from a static directory (e.g. \"public\")\npublic_dir = \"public\"\n\n[web.app]\ntitle = \"Hello\"\n\n[web.resource.dev]\n```\n","packages/cli/assets/android/prebuilt/README.md":"This folder contains prebuilt versions of android crates to make cross-compiling easier.\n\nWe use the official prebuilds distributed by google.\n\nYou can find the full set of prebuilt libraries that google distributes here:\n\nhttps://maven.google.com/web/index.html?q=com.android.ndk.thirdparty#com.android.ndk.thirdparty\n\nThe version included in `dx` is downloaded from here:\n\nhttps://maven.google.com/web/index.html?q=com.android.ndk.thirdparty#com.android.ndk.thirdparty:openssl:1.1.1q-beta-1\n\nThe SHA of the `.aar` file from google and `dx` are different. The Rust openssl-sys crate expects libcrypto and libssl to be in the same folder, but the `.aar` that google distributes splits the two libraries into two different folders. I (jon) have simply merged the folders together and then re-packed the folder as a `.tar.gz`.\n","packages/config-macro/README.md":"# dioxus-config-macro\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-config-macro.svg\n[crates-url]: https://crates.io/crates/dioxus-config-macro\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guide](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-config-macro/latest/dioxus_config_macro/) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-config-macro` provides a handful of helpful macros to make it easier to work with optional sections of the launch builder.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/config-macros/README.md":"# Dioxus Config Macros\n\nThese macros are used internally by codegen and are not intended for general use.\n\nDioxus will export its feature flags into this crate, allowing downstream codegen to use them under the \"dioxus\" namespace.\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/const-serialize/README.md":"A rust serialization library that works in const with complex(ish) types like enums, nested structs and arrays. Const rust does not have an allocator, so this library cannot work in a cross architecture environment with Vecs, slices or strings.\n\n```rust\nuse const_serialize::{deserialize_const, serialize_const, serialize_eq, ConstVec, SerializeConst};\n#[derive(Clone, Copy, Debug, PartialEq, SerializeConst)]\nstruct Struct {\n    a: u32,\n    b: u8,\n    c: u32,\n    d: Enum,\n}\n\n#[derive(Clone, Copy, Debug, PartialEq, SerializeConst)]\n#[repr(C, u8)]\nenum Enum {\n    A { one: u32, two: u16 },\n    B { one: u8, two: u16 } = 15,\n}\n\nconst {\n    let data = [Struct {\n        a: 0x11111111,\n        b: 0x22,\n        c: 0x33333333,\n        d: Enum::A {\n            one: 0x44444444,\n            two: 0x5555,\n        },\n    }; 3];\n    let mut buf = ConstVec::new();\n    buf = serialize_const(&data, buf);\n    let buf = buf.as_ref();\n    let (buf, deserialized) = match deserialize_const!([Struct; 3], buf) {\n        Some(data) => data,\n        None => panic!(\"data mismatch\"),\n    };\n    if !serialize_eq(&data, &deserialized) {\n        panic!(\"data mismatch\");\n    }\n}\n```\n\n## How it works\n\n`const-serialize` relies heavily on well defined layouts for the types you want to serialize. The serialization format is the linear sequence of unaligned bytes stored in the order of the fields, items or variants of the type. Numbers are stored in little endian order.\n\nIn order to support complex nested types, serialization is done using a trait. Since functions in traits cannot be const, `const-serialize` uses a macro to generate constant associated items that describe the memory layout of the type. That layout is then used to read all of the bytes in the type into the serialized buffer.\n\nThe deserialization is done in a similar way, but the layout is used to write the bytes from the serialized buffer into the type.\n\nThe rust [nomicon](https://doc.rust-lang.org/nomicon/data.html) defines the memory layout of different types. It is used as a reference for the layout of the types implemented in `const-serialize`.\n\n## Limitations\n\n- Only constant sized types are supported. This means that you can't serialize a type like `Vec<T>`. These types are difficult to create in const contexts in general\n- Only types with a well defined memory layout are supported (see <https://github.com/rust-lang/rfcs/pull/3727>). `repr(Rust)` enums don't have a well defined layout, so they are not supported. `repr(C, u8)` enums can be used instead\n- Const rust does not support mutable references or points, so this crate leans heavily on functional data structures for data processing.\n","packages/core-macro/README.md":"# dioxus-core-macro\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-core-macro.svg\n[crates-url]: https://crates.io/crates/dioxus-core-macro\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-core-macro/latest/dioxus_core_macro) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-core-macro` provides a handful of helpful macros used by the `dioxus` crate. These include:\n\n- The `rsx!` macro that underpins templates and node creation.\n- The `component` attribute macro denotes a function as a Dioxus component. Currently, this:\n  - Transforms function arguments into an auto-derived struct.\n  - Ensures that your component name uses PascalCase.\n  - Probably more stuff in the future. This macro allows us to have a way of distinguishing functions and components, which can be quite handy.\n- The `format_args_f` macro which allows f-string formatting with support for expressions.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/core-macro/docs/component.md":"# Component\n\nThe component macro turns a function with arguments that are [`Clone`] and [`PartialEq`] into a component. This is the recommended way of creating most components. If you want more fine grained control over how the overall prop struct implements the `Properties` trait, you can use an explicit props struct with the [`Props`] derive macro instead.\n\n## Arguments\n\n- `no_case_check` - Doesn't enforce `PascalCase` on your component names.\n  **This will be removed/deprecated in a future update in favor of a more complete Clippy-backed linting system.**\n  The reasoning behind this is that Clippy allows more robust and powerful lints, whereas\n  macros are extremely limited.\n\n## Features\n\nThis attribute:\n\n- Enforces that your component uses `PascalCase` or `snake_case` with at least one underscore.\n- Automatically creates a prop struct for your component if the function has arguments.\n- Verifies the function signature is valid as a component.\n\n## Examples\n\n- Without props:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn GreetBob() -> Element {\n    rsx! { \"hello, bob\" }\n}\n```\n\n- With props:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn GreetBob(bob: String) -> Element {\n    rsx! { \"hello, {bob}\" }\n}\n```\n\n## Prop Modifiers\n\nYou can use the `#[props()]` attribute to modify the behavior of the props the component macro creates:\n\n- [`#[props(default)]`](#default-props) - Makes the field optional in the component and uses the default value if it is not set when creating the component.\n- [`#[props(!optional)]`](#optional-props) - Makes a field with the type `Option<T>` required.\n- [`#[props(into)]`](#converting-props) - Converts a field into the correct type by using the [`Into`] trait.\n- [`#[props(extends = GlobalAttributes)]`](#extending-elements) - Extends the props with all the attributes from an element or the global element attributes.\n\nProps also act slightly differently when used with:\n\n- [`Option<T>`](#optional-props) - The field is automatically optional with a default value of `None`.\n- [`ReadSignal<T>`](#reactive-props) - The props macro will automatically convert `T` into `ReadSignal<T>` when it is passed as a prop.\n- [`String`](#formatted-props) - The props macro will accept formatted strings for any prop field with the type `String`.\n- [`children`](#children-props) - The props macro will accept child elements if you include the `children` prop.\n\n### Default Props\n\nThe `default` attribute lets you define a default value for a field if it isn't set when creating the component\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // The default attributes makes your field optional in the component and uses the default value if it is not set.\n    #[props(default)]\n    text: String,\n    // You can also set an explicit default value instead of using the `Default` implementation.\n    #[props(default = \"red\".to_string())]\n    color: String,\n) -> Element {\n    rsx! {\n        button {\n            color: color,\n            \"{text}\"\n        }\n    }\n}\n\nrsx! {\n    // You can skip setting props that have a default value when you use the component.\n    Button {}\n};\n```\n\n### Optional Props\n\nWhen defining a component, you may want to make a prop optional without defining an explicit default value. Any fields with the type `Option<T>` are automatically optional with a default value of `None`.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // Since the `text` field is optional, you don't need to set it when you use the component.\n    text: Option<String>,\n) -> Element {\n    rsx! {\n        button { {text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {}\n};\n```\n\nIf you want to make your `Option<T>` field required, you can use the `!optional` attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // You can use the `!optional` attribute on a field with the type `Option<T>` to make it required.\n    #[props(!optional)]\n    text: Option<String>,\n) -> Element {\n    rsx! {\n        button { {text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {\n        text: None\n    }\n};\n```\n\n### Converting Props\n\nYou can automatically convert a field into the correct type by using the `into` attribute. Any type you pass into the field will be converted with the [`Into`] trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // You can use the `into` attribute on a field to convert types you pass in with the Into trait.\n    #[props(into)]\n    number: u64,\n) -> Element {\n    rsx! {\n        button { \"{number}\" }\n    }\n}\n\nrsx! {\n    Button {\n        // Because we used the into attribute, we can pass in any type that implements Into<u64>\n        number: 10u8\n    }\n};\n```\n\n### Formatted Props\n\nYou can use formatted strings in attributes just like you would in an element. Any prop field with the type `String` can accept a formatted string:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(text: String,) -> Element {\n    rsx! {\n        button { \"{text}\" }\n    }\n}\n\nlet name = \"Bob\";\nrsx! {\n    Button {\n        // You can use formatted strings in props that accept String just like you would in an element.\n        text: \"Hello {name}!\"\n    }\n};\n```\n\n### Children Props\n\nRather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The \"magic\" children prop lets you achieve this:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Clickable(\n    href: String,\n    children: Element,\n) -> Element {\n    rsx! {\n        a {\n            href: \"{href}\",\n            class: \"fancy-button\",\n            {children}\n        }\n    }\n}\n```\n\nThis makes providing children to the component much simpler: simply put the RSX inside the {} brackets:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[component]\n# fn Clickable(\n#     href: String,\n#     children: Element,\n# ) -> Element {\n#     rsx! {\n#         a {\n#             href: \"{href}\",\n#             class: \"fancy-button\",\n#             {children}\n#         }\n#     }\n# }\nrsx! {\n    Clickable {\n        href: \"https://www.youtube.com/watch?v=C-M2hs3sXGo\",\n        \"How to \"\n        i { \"not\" }\n        \" be seen\"\n    }\n};\n```\n\n### Reactive Props\n\nIn dioxus, when a prop changes, the component will rerun with the new value to update the UI. For example, if count changes from 0 to 1, this component will rerun and update the UI to show \"Count: 1\":\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    rsx! {\n        div {\n            \"Count: {count}\"\n        }\n    }\n}\n```\n\nGenerally, just rerunning the component is enough to update the UI. However, if you use your prop inside reactive hooks like `use_memo` or `use_resource`, you may also want to restart those hooks when the prop changes:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can use a memo to calculate the doubled count. Since this memo will only be created the first time the component is run and `count` is not reactive, it will never update when `count` changes.\n    let doubled_count = use_memo(move || count * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\nTo fix this issue you can either:\n\n1. Make the prop reactive by wrapping it in `ReadSignal` (recommended):\n\n`ReadSignal` is a `Copy` reactive value. Dioxus will automatically convert any value into a `ReadSignal` when it is passed as a prop.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: ReadSignal<i32>) -> Element {\n    // Since we made count reactive, the memo will automatically rerun when count changes.\n    let doubled_count = use_memo(move || count() * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n2. Explicitly add the prop as a dependency to the reactive hook with [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/macro.use_reactive.html):\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can add the count prop as an explicit dependency to every reactive hook that uses it with use_reactive.\n    // The use_reactive macro takes a closure with explicit dependencies as its argument.\n    let doubled_count = use_memo(use_reactive!(|count| count * 2));\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n### Extending Elements\n\nThe `extends` attribute lets you extend your props with all the attributes from an element or the global element attributes.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Card(\n    // You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.\n    #[props(extends = GlobalAttributes)]\n    attributes: Vec<Attribute>,\n) -> Element {\n    rsx! {\n        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.\n        div { ..attributes, \"card\" }\n    }\n}\n\nrsx! {\n    // Since we extend global attributes, you can use any attribute that would normally appear on elements.\n    Card {\n        width: \"10px\",\n        height: \"10px\",\n        color: \"red\",\n    }\n};\n```\n\nTo extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    #[props(extends = GlobalAttributes, extends = button)]\n    attributes: Vec<Attribute>,\n) -> Element {\n    rsx! {\n        button { ..attributes, \"button\" }\n    }\n}\n\nrsx! {\n    Button {\n        // A global attribute\n        width: \"10px\",\n        // A button specific attribute\n        disabled: true,\n    }\n};\n```\n\nNote that extending from multiple elements will only work if the elements don't have conflicting attributes.\n","packages/core-macro/docs/props.md":"# Props\n\nThe props derive macro allows you to define what props your component accepts and how to accept those props. Every component must either accept no arguments or accept a single argument that implements the `Properties` trait.\n\n> Note: You should generally prefer using the `#[component]` macro instead of the `#[derive(Props)]` macro with explicit props. The `#[component]` macro will automatically generate the props struct for you and perform extra checks to ensure that your component is valid.\n\n## Example\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// The text of the button\n    text: String,\n\n    /// The color of the button\n    color: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button {\n            color: props.color,\n            \"{props.text}\"\n        }\n    }\n}\n\nrsx! {\n    // Any fields you defined on the props struct will be turned into props for the component.\n    Button {\n        text: \"Click me!\",\n        color: \"red\",\n    }\n};\n```\n\n## Prop Modifiers\n\nYou can use the `#[props()]` attribute to modify the behavior of the props derive macro:\n\n- [`#[props(default)]`](#default-props) - Makes the field optional in the component and uses the default value if it is not set when creating the component.\n- [`#[props(!optional)]`](#optional-props) - Makes a field with the type `Option<T>` required.\n- [`#[props(into)]`](#converting-props) - Converts a field into the correct type by using the [`Into`] trait.\n- [`#[props(extends = GlobalAttributes)]`](#extending-elements) - Extends the props with all the attributes from an element or the global element attributes.\n\nProps also act slightly differently when used with:\n\n- [`Option<T>`](#optional-props) - The field is automatically optional with a default value of `None`.\n- [`ReadSignal<T>`](#reactive-props) - The props macro will automatically convert `T` into `ReadSignal<T>` when it is passed as a prop.\n- [`String`](#formatted-props) - The props macro will accept formatted strings for any prop field with the type `String`.\n- [`children`](#children-props) - The props macro will accept child elements if you include the `children` prop.\n\n### Default Props\n\nThe `default` attribute lets you define a default value for a field if it isn't set when creating the component\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    // The default attributes makes your field optional in the component and uses the default value if it is not set.\n    #[props(default)]\n    text: String,\n\n    /// You can also set an explicit default value instead of using the `Default` implementation.\n    #[props(default = \"red\".to_string())]\n    color: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button {\n            color: props.color,\n            \"{props.text}\"\n        }\n    }\n}\n\nrsx! {\n    // You can skip setting props that have a default value when you use the component.\n    Button {}\n};\n```\n\n### Optional Props\n\nWhen defining props, you may want to make a prop optional without defining an explicit default value. Any fields with the type `Option<T>` are automatically optional with a default value of `None`.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    // Since the `text` field is optional, you don't need to set it when you use the component.\n    text: Option<String>,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { {props.text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {}\n};\n```\n\nIf you want to make your `Option<T>` field required, you can use the `!optional` attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// You can use the `!optional` attribute on a field with the type `Option<T>` to make it required.\n    #[props(!optional)]\n    text: Option<String>,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { {props.text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {\n        text: None\n    }\n};\n```\n\n### Converting Props\n\nYou can automatically convert a field into the correct type by using the `into` attribute. Any type you pass into the field will be converted with the [`Into`] trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// You can use the `into` attribute on a field to convert types you pass in with the Into trait.\n    #[props(into)]\n    number: u64,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { \"{props.number}\" }\n    }\n}\n\nrsx! {\n    Button {\n        // Because we used the into attribute, we can pass in any type that implements Into<u64>\n        number: 10u8\n    }\n};\n```\n\n### Formatted Props\n\nYou can use formatted strings in attributes just like you would in an element. Any prop field with the type `String` can accept a formatted string:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    text: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { \"{props.text}\" }\n    }\n}\n\nlet name = \"Bob\";\nrsx! {\n    Button {\n        // You can use formatted strings in props that accept String just like you would in an element.\n        text: \"Hello {name}!\"\n    }\n};\n```\n\n### Children Props\n\nRather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The \"magic\" children prop lets you achieve this:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(PartialEq, Clone, Props)]\nstruct ClickableProps {\n    href: String,\n    children: Element,\n}\n\nfn Clickable(props: ClickableProps) -> Element {\n    rsx! {\n        a {\n            href: \"{props.href}\",\n            class: \"fancy-button\",\n            {props.children}\n        }\n    }\n}\n```\n\nThis makes providing children to the component much simpler: simply put the RSX inside the {} brackets:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[derive(PartialEq, Clone, Props)]\n# struct ClickableProps {\n#     href: String,\n#     children: Element,\n# }\n#\n# fn Clickable(props: ClickableProps) -> Element {\n#     rsx! {\n#         a {\n#             href: \"{props.href}\",\n#             class: \"fancy-button\",\n#             {props.children}\n#         }\n#     }\n# }\nrsx! {\n    Clickable {\n        href: \"https://www.youtube.com/watch?v=C-M2hs3sXGo\",\n        \"How to \"\n        i { \"not\" }\n        \" be seen\"\n    }\n};\n```\n\n### Reactive Props\n\nIn dioxus, when a prop changes, the component will rerun with the new value to update the UI. For example, if count changes from 0 to 1, this component will rerun and update the UI to show \"Count: 1\":\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    rsx! {\n        div {\n            \"Count: {count}\"\n        }\n    }\n}\n```\n\nGenerally, just rerunning the component is enough to update the UI. However, if you use your prop inside reactive hooks like `use_memo` or `use_resource`, you may also want to restart those hooks when the prop changes:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can use a memo to calculate the doubled count. Since this memo will only be created the first time the component is run and `count` is not reactive, it will never update when `count` changes.\n    let doubled_count = use_memo(move || count * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\nTo fix this issue you can either:\n\n1. Make the prop reactive by wrapping it in `ReadSignal` (recommended):\n\n`ReadSignal` is a `Copy` reactive value. Dioxus will automatically convert any value into a `ReadSignal` when it is passed as a prop.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: ReadSignal<i32>) -> Element {\n    // Since we made count reactive, the memo will automatically rerun when count changes.\n    let doubled_count = use_memo(move || count() * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n2. Explicitly add the prop as a dependency to the reactive hook with [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/macro.use_reactive.html):\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can add the count prop as an explicit dependency to every reactive hook that uses it with use_reactive.\n    // The use_reactive macro takes a closure with explicit dependencies as its argument.\n    let doubled_count = use_memo(use_reactive!(|count| count * 2));\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n### Extending Elements\n\nThe `extends` attribute lets you extend your props with all the attributes from an element or the global element attributes.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct CardProps {\n    /// You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.\n    #[props(extends = GlobalAttributes)]\n    attributes: Vec<Attribute>,\n}\n\n#[component]\nfn Card(props: CardProps) -> Element {\n    rsx! {\n        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.\n        div { ..props.attributes, \"card\" }\n    }\n}\n\nrsx! {\n    // Since we extend global attributes, you can use any attribute that would normally appear on elements.\n    Card {\n        width: \"10px\",\n        height: \"10px\",\n        color: \"red\",\n    }\n};\n```\n\nTo extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    #[props(extends = GlobalAttributes, extends = button)]\n    attributes: Vec<Attribute>,\n}\n\n#[component]\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { ..props.attributes, \"button\" }\n    }\n}\n\nrsx! {\n    Button {\n        // A global attribute\n        width: \"10px\",\n        // A button specific attribute\n        disabled: true,\n    }\n};\n```\n\nNote that extending from multiple elements will only work if the elements don't have conflicting attributes.\n","packages/core-macro/docs/rsx.md":"The rsx! macro makes it easy for developers to write jsx-style markup in their components.\n\n## Elements\n\nYou can render elements with rsx! with the element name and then braces surrounding the attributes and children.\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div {\n        div {}\n    }\n};\n```\n\n<details>\n<summary>Web Components</summary>\n\nDioxus will automatically render any elements with `-` as a untyped web component:\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div-component {\n        div {}\n    }\n};\n```\n\nYou can wrap your web component in a custom component to add type checking:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn MyDivComponent(width: i64) -> Element {\n    rsx! {\n        div-component {\n            \"width\": width\n        }\n    }\n}\n```\n\n</details>\n\n## Attributes\n\nYou can add attributes to any element inside the braces. Attributes are key-value pairs separated by a colon.\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet width = 100;\nrsx! {\n    div {\n        // Set the class attribute to \"my-class\"\n        class: \"my-class\",\n        // attribute strings are automatically formatted with the format macro\n        width: \"{width}px\",\n    }\n};\n```\n\n### Optional Attributes\n\nYou can include optional attributes with an unterminated if statement as the value of the attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# let first_boolean = true;\n# let second_boolean = false;\nrsx! {\n    div {\n        // Set the class attribute to \"my-class\" if true\n        class: if first_boolean {\n            \"my-class\"\n        },\n        // Set the class attribute to \"my-other-class\" if false\n        class: if second_boolean {\n            \"my-other-class\"\n        }\n    }\n};\n```\n\n### Raw Attributes\n\nDioxus defaults to attributes that are type checked as html. If you want to include an attribute that is not included in the html spec, you can use the `raw` attribute surrounded by quotes:\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div {\n        // Set the data-count attribute to \"1\"\n        \"data-count\": \"1\"\n    }\n};\n```\n\n## Text\n\nYou can include text in your markup as a string literal:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet name = \"World\";\nrsx! {\n    div {\n        \"Hello World\"\n        // Just like attributes, you can included formatted segments inside your text\n        \"Hello {name}\"\n    }\n};\n```\n\n## Components\n\nYou can render any [`macro@crate::component`]s you created inside your markup just like elements. Components must either start with a capital letter or contain a `_` character.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn HelloWorld() -> Element {\n    rsx! { \"hello world!\" }\n}\n\nrsx! {\n    div {\n        HelloWorld {}\n    }\n};\n```\n\n## If statements\n\nYou can use if statements to conditionally render children. The body of the for if statement is parsed as rsx markup:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet first_boolean = true;\nlet second_boolean = false;\nrsx! {\n    if first_boolean {\n        div {\n            \"first\"\n        }\n    }\n\n    if second_boolean {\n        \"second\"\n    }\n};\n```\n\n## For loops\n\nYou can also use for loops to iterate over a collection of items. The body of the for loop is parsed as rsx markup:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet numbers = vec![1, 2, 3];\nrsx! {\n    for number in numbers {\n        div {\n            \"{number}\"\n        }\n    }\n};\n```\n\n## Raw Expressions\n\nYou can include raw expressions inside your markup inside curly braces. Your expression must implement the [`IntoDynNode`](https://docs.rs/dioxus-core/latest/dioxus_core/trait.IntoDynNode.html) trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet name = \"World\";\nrsx! {\n    div {\n        // Text can be converted into a dynamic node in rsx\n        {name}\n    }\n    // Iterators can also be converted into dynamic nodes\n    {(0..10).map(|n| n * n).map(|number| rsx! { div { \"{number}\" } })}\n};\n```\n","packages/core/README.md":"# dioxus-core\n\n`dioxus-core` provides a fast and featureful VirtualDom implementation for Rust.\n\n```rust, no_run\n# tokio::runtime::Runtime::new().unwrap().block_on(async {\nuse dioxus_core::{VirtualDom, Event, Element, Mutations, VNode, ElementId};\n\nlet mut vdom = VirtualDom::new(app);\nlet real_dom = SomeRenderer::new();\n\nloop {\n    tokio::select! {\n        evt = real_dom.event() => {\n            let evt = Event::new(evt, true);\n            vdom.runtime().handle_event(\"onclick\", evt, ElementId::from_raw(0))\n        },\n        _ = vdom.wait_for_work() => {}\n    }\n    vdom.render_immediate(&mut real_dom.apply())\n}\n\n# fn app() -> Element { VNode::empty() }\n# struct SomeRenderer; impl SomeRenderer { fn new() -> SomeRenderer { SomeRenderer } async fn event(&self) -> std::rc::Rc<dyn std::any::Any> { unimplemented!() } fn apply(&self) -> Mutations { Mutations::default() } }\n# });\n```\n\n## Features\n\nA virtualdom is an efficient and flexible tree data structure that allows you to manage state for a graphical user interface. The Dioxus VirtualDom is perhaps the most fully-featured virtualdom implementation in Rust and powers renderers running across Web, Desktop, Mobile, SSR, TUI, LiveView, and more. When you use the Dioxus VirtualDom, you immediately enable users of your renderer to leverage the wide ecosystem of Dioxus components, hooks, and associated tooling.\n\nSome features of `dioxus-core` include:\n\n- UI components are just functions\n- State is provided by hooks\n- Deep integration with async\n- Strong focus on performance\n- Integrated hotreloading support\n- Extensible system for UI elements and their attributes\n\nIf you are just starting, check out the Guides first.\n\n## Understanding the implementation\n\n`dioxus-core` is designed to be a lightweight crate that. It exposes a number of flexible primitives without being deeply concerned about the intracices of state management itself. We provide a number of useful abstractions built on these primitives in the `dioxus-hooks` crate as well as the `dioxus-signals` crate.\n\nThe important abstractions to understand are:\n\n- The [`VirtualDom`]\n- The [`Component`] and its [`Properties`]\n- Handling events\n- Working with async\n- Suspense\n\n## Usage\n\nThe `dioxus` crate exports the `rsx` macro which transforms a helpful, simpler syntax of Rust.\n\nFirst, start with your app:\n\n```rust\n# use dioxus::dioxus_core::{Mutations, VirtualDom};\nuse dioxus::prelude::*;\n\n// First, declare a root component\nfn app() -> Element {\n    rsx! {\n        div { \"hello world\" }\n    }\n}\n\nfn main() {\n    // Next, create a new VirtualDom using this app as the root component.\n    let mut dom = VirtualDom::new(app);\n\n    // The initial render of the dom will generate a stream of edits for the real dom to apply\n    let mutations = dom.rebuild_to_vec();\n}\n```\n\n## Contributing\n\n- Check out the website [section on contributing](https://dioxuslabs.com/learn/0.7/beyond/contributing).\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- [Join](https://discord.gg/XgGxMSkvUM) the discord and ask questions!\n\n<a href=\"https://github.com/dioxuslabs/dioxus/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10\" />\n</a>\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","packages/core/docs/common_spawn_errors.md":"## Compiler errors you may run into while using spawn\n\n<details>\n<summary>async block may outlive the current function, but it borrows `value`, which is owned by the current function</summary>\n\nTasks in Dioxus need only access data that can last for the entire lifetime of the application. That generally means data that is moved into the async block. **If you get this error, you may have forgotten to add `move` to your async block.**\n\nBroken component:\n\n```rust, compile_fail\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    let signal = use_signal(|| 0);\n\n    use_hook(move || {\n        // ❌ The task may run at any point and reads the value of the signal, but the signal is dropped at the end of the function\n        spawn(async {\n            println!(\"{}\", signal());\n        })\n    });\n\n    todo!()\n}\n```\n\nFixed component:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    let signal = use_signal(|| 0);\n\n    use_hook(move || {\n        // ✅ The `move` keyword tells rust it can move the `state` signal into the async block. Since the async block owns the signal state, it can read it even after the function returns\n        spawn(async move {\n            println!(\"{}\", signal());\n        })\n    });\n\n    todo!()\n}\n```\n\n</details>\n\n<details>\n<summary>use of moved value: `value`. move occurs because `value` has type `YourType`, which does not implement the `Copy` trait</summary>\n\nData in rust has a single owner. If you run into this error, you have likely tried to move data that isn't `Copy` into two different async tasks. **You can fix this issue by making your data `Copy` or calling `clone` on it before you move it into the async block.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which cannot be copied implicitly\n#[component]\nfn MyComponent(string: String) -> Element {\n    use_hook(move || {\n        // ❌ We are moving the string into the async task which means we can't access it elsewhere\n        spawn(async move {\n            println!(\"{}\", string);\n        });\n        // ❌ Since we already moved the string, we can't move it into our new task. This will cause a compiler error\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\nYou can fix this issue by either:\n\n- Making your data `Copy` with `ReadSignal`:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts `ReadSignal<String>` which implements `Copy`\n#[component]\nfn MyComponent(string: ReadSignal<String>) -> Element {\n    use_hook(move || {\n        // ✅ Because the `string` signal is `Copy`, we can copy it into the async task while still having access to it elsewhere\n        spawn(async move {\n            println!(\"{}\", string);\n        });\n        // ✅ Since `string` is `Copy`, we can copy it into another async task\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\n- Calling `clone` on your data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which doesn't implement `Copy`\n#[component]\nfn MyComponent(string: String) -> Element {\n    use_hook(move || {\n        // ✅ The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n        spawn({\n            // Clone the string in a new block\n            let string = string.clone();\n            // Then move the cloned string into the async block\n            async move {\n                println!(\"{}\", string);\n            }\n        });\n        // ✅ We don't use the string after this closure, so we can just move it into the closure directly\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\n</details>\n","packages/core/docs/reactivity.md":"# Reactivity\n\nThe core of dioxus relies on the concept of reactivity. Reactivity is the system that updates your app when state changes.\n\nThere are two parts to reactivity: **Reactive Contexts** and **Tracked Values**.\n\n## Reactive Contexts\n\nReactive Contexts keep track of what state different parts of your app rely on. Reactive Context show up throughout dioxus: Component, use_effect, use_memo and use_resource all have their own reactive contexts:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet count = use_signal(|| 0);\n// The reactive context in the memo knows that the memo depends on the count signal\nuse_memo(move || count() * 2);\n```\n\n## Tracked Values\n\nTracked values are values that reactive contexts know about. When you read a tracked value, the reactive context will rerun when the value changes. Signals, Memos, and Resources are all tracked values:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// The count signal is tracked\nlet count = use_signal(|| 0);\n// When you read the count signal, the reactive context subscribes to the count signal\nlet double_count = use_memo(move || count() * 2);\n```\n\n## Reactivity\n\nReactivity is the system that combines reactive context and tracked values to update your app when state changes.\n\nYou can use reactivity to create derived state and update your app when state changes.\n\nYou can derive state from other state with [`use_memo`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_memo.html).\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet mut count = use_signal(|| 0);\nlet double_count = use_memo(move || count() * 2);\n\n// Now whenever we read double_count, we know it is always twice the value of count\nprintln!(\"{}\", double_count); // Prints \"2\"\n\n// After we write to count, the reactive context will rerun and double_count will be updated automatically\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"4\"\n```\n\nYou can also use reactivity to create derive state asynchronously. For example, you can use [`use_resource`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_resource.html) to load data from a server:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet count = use_signal(|| 0);\nlet double_count = use_resource(move || async move {\n    // Start a request to the server. We are reading the value of count to format it into the url\n    // Since we are reading count, this resource will \"subscribe\" to changes to count (when count changes, the resource will rerun)\n    let response = reqwest::get(format!(\"https://myserver.com/doubleme?count={count}\")).await.unwrap();\n    response.text().await.unwrap()\n});\n```\n\n## Non Reactive State\n\nYou can use plain Rust types in Dioxus, but you should be aware that they are not reactive. If you read the non-reactive state, reactive scopes will not subscribe to the state.\n\nYou can make non-reactive state reactive by using the `Signal` type instead of a plain Rust type or by using the `use_reactive` hook.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\n// ❌ Don't create non-reactive state\nlet state = use_hook(|| std::cell::RefCell::new(0));\n\n// Computed values will get out of date if the state they depend on is not reactive\nlet doubled = use_memo(move || *state.borrow() * 2);\n\n// ✅ Create reactive state\nlet state = use_signal(|| 0);\n\n// Computed values will automatically keep up to date with the latest reactive state\nlet doubled = use_memo(move || state() * 2);\n\n// ❌ Don't depend on non-reactive prop state in memos/resources\n#[component]\nfn MyComponent(state: i32) -> Element {\n    let doubled = use_memo(move || state * 2);\n    todo!()\n}\n\n// ✅ Wrap your props in ReadSignal to make them reactive\n#[component]\nfn MyReactiveComponent(state: ReadSignal<i32>) -> Element {\n    let doubled = use_memo(move || state() * 2);\n    todo!()\n}\n```\n\nIf your state can't be reactive, you can use the `use_reactive` hook to make it reactive.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet state = rand::random::<i32>();\n\n// You can make the state reactive by wrapping it in use_reactive\nlet doubled = use_memo(use_reactive!(|state| state * 2));\n```\n","packages/core/tests/README.md":"# Testing of Dioxus core\n\n\nDiffing\n- [x] create elements\n- [x] create text\n- [x] create fragments\n- [x] create empty fragments (placeholders)\n- [x] diff elements\n- [x] diff from element/text to fragment\n- [x] diff from element/text to empty fragment\n- [x] diff to element with children works too\n- [x] replace with works forward\n- [x] replace with works backward\n- [x] un-keyed diffing\n- [x] keyed diffing\n- [x] keyed diffing out of order\n- [x] keyed diffing with prefix/suffix\n- [x] suspended nodes work\n\nLifecycle\n- [] Components mount properly\n- [] Components create new child components\n- [] Replaced components unmount old components and mount new\n- [] Post-render effects are called\n\nShared Context\n- [] Shared context propagates downwards\n- [] unwrapping shared context if it doesn't exist works too\n\nSuspense\n- [] use_suspense generates suspended nodes\n\n\nHooks\n- [] Drop order is maintained\n- [] Shared hook state is okay\n- [] use_hook works\n- [] use_ref works\n- [] use_noderef works\n- [] use_provide_state\n- [] use_consume_state\n\n\nVirtualDOM API\n- [] work\n- [] rebuild_to_vec\n- [] change props\n","packages/depinfo/README.md":"# Rustc Dep-Info Parser\n\nThis crate parses the output of rustc's `.d` dep-info file. It is used by the hot-reloading engine and other libraries to provide higher quality dependency analysis for the user's project.\n\n## License\n\nThis project is licensed under either the [MIT license] or the [Apache-2 License].\n\n[apache-2 license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-APACHE\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional\nterms or conditions.\n","packages/desktop/README.md":"# Dioxus Desktop (webview)\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-desktop.svg\n[crates-url]: https://crates.io/crates/dioxus-desktop\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-desktop/latest/dioxus_desktop) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-desktop` provides a webview-based desktop renderer for the Dioxus VirtualDom.\n\nThis requires that webview is installed on the target system. WebView is installed by default on macOS and iOS devices, but might not come preinstalled on Windows or Linux devices. To fix these issues, follow the [instructions in the guide](guide-url).\n\n[guide-url]: https://dioxuslabs.com/learn/0.7/getting_started\n\n## Features\n\n- Simple, one-line launch for desktop apps\n- Dioxus VirtualDom running on a native thread\n- Full HTML/CSS support via `wry` and `tao`\n- Exposed `window` and `Proxy` types from tao for direct window manipulation\n- Helpful hooks for accessing the window, WebView, and running javascript.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/desktop/src/readme.md":"Dioxus Desktop Renderer\n\nRender the Dioxus VirtualDom using the platform's native WebView implementation.\n\n# Desktop\n\nOne of Dioxus' flagship features is the ability to quickly build a native desktop app that looks and feels the same across platforms. Apps built with Dioxus are typically <5mb in size and use existing system resources, so they won't hog extreme amounts of RAM or memory.\n\nDioxus Desktop is built off Tauri. Right now there aren't any Dioxus abstractions over the menubar, handling, etc, so you'll want to leverage Tauri - mostly [Wry](http://github.com/tauri-apps/wry/) and [Tao](http://github.com/tauri-apps/tao) directly. An upcoming release of Dioxus-Desktop will include components and hooks for notifications, global shortcuts, menubar, etc.\n\n## Getting Set up\n\nGetting Set up with Dioxus-Desktop is quite easy. Make sure you have Rust and Cargo installed, and then create a new project:\n\n```shell\n$ cargo new --bin demo\n$ cd app\n```\n\nAdd Dioxus and the `desktop` renderer feature:\n\n```shell\n$ cargo add dioxus\n$ cargo add dioxus-desktop\n```\n\nEdit your `main.rs`:\n\n```rust, ignore\n// main.rs\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus_desktop::launch(app);\n}\n\nfn app() -> Element {\n    rsx! {\n        div {\n            \"hello world!\"\n        }\n    }\n}\n```\n\nTo configure the webview, menubar, and other important desktop-specific features, checkout out some of the launch configuration in the [API reference](https://docs.rs/dioxus-desktop/).\n\n## Future Steps\n\nMake sure to read the [Dioxus Guide](https://dioxuslabs.com/learn/0.7/) if you already haven't!\n","packages/dioxus/README.md":"<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/splash-header.svg\" style=\"width: 80%; height: auto;\">\n</div>\n\n<div align=\"center\">\n  <!-- Crates version -->\n  <a href=\"https://crates.io/crates/dioxus\">\n    <img src=\"https://img.shields.io/crates/v/dioxus.svg?style=flat-square\"\n    alt=\"Crates.io version\" />\n  </a>\n  <!-- Downloads -->\n  <a href=\"https://crates.io/crates/dioxus\">\n    <img src=\"https://img.shields.io/crates/d/dioxus.svg?style=flat-square\"\n      alt=\"Download\" />\n  </a>\n  <!-- docs -->\n  <a href=\"https://docs.rs/dioxus\">\n    <img src=\"https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square\"\n      alt=\"docs.rs docs\" />\n  </a>\n  <!-- CI -->\n  <a href=\"https://github.com/dioxuslabs/dioxus/actions\">\n    <img src=\"https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\"\n      alt=\"CI status\" />\n  </a>\n  <!-- Awesome -->\n  <a href=\"https://dioxuslabs.com/awesome\">\n    <img src=\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\" alt=\"Awesome Page\" />\n  </a>\n  <!-- Discord -->\n  <a href=\"https://discord.gg/XgGxMSkvUM\">\n    <img src=\"https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\" alt=\"Discord Link\" />\n  </a>\n</div>\n\n<div align=\"center\">\n  <h3>\n    <a href=\"https://dioxuslabs.com\"> Website </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/getting_started\"> Getting Started </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/\"> Book (0.7) </a>\n    <span> | </span>\n    <a href=\"https://github.com/DioxusLabs/dioxus/tree/main/examples\"> Examples </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/tutorial\"> Tutorial </a>\n  </h3>\n</div>\n\n---\n\nBuild for web, desktop, and mobile, and more with a single codebase. Zero-config setup, integrated hot-reloading, and signals-based state management. Add backend functionality with Server Functions and bundle with our CLI.\n\n```rust, ignore\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus::launch(app);\n}\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n\n    rsx! {\n        h1 { \"High-Five counter: {count}\" }\n        button { onclick: move |_| count += 1, \"Up high!\" }\n        button { onclick: move |_| count -= 1, \"Down low!\" }\n    }\n}\n```\n\n## ⭐️ Unique features\n\n- Cross-platform apps in three lines of code (web, desktop, mobile, server, and more)\n- [Ergonomic state management](https://dioxuslabs.com/blog/release-050) combines the best of React, Solid, and Svelte\n- Built-in featureful, type-safe, fullstack web framework\n- Integrated bundler for deploying to the web, macOS, Linux, and Windows\n- Subsecond Rust hot-patching and asset hot-reloading\n- And more! [Take a tour of Dioxus](https://dioxuslabs.com/learn/0.7/).\n\n## Quick start\n\nGrab the Dioxus CLI (`dx`) and spin up a new app in seconds:\n\n```shell\n# install the dioxus-cli\ncurl -fsSL https://dioxuslabs.com/install.sh | bash\n\n# create a new app, following the template instructions\ndx new my-app && cd my-app\n\n# and then serve on `--web, --desktop, --ios, or --android`\ndx serve --desktop\n```\n\n## Guides\n\nThis overview doesn't cover everything. Make sure to check out:\n\n- [Long-form tutorial](https://dioxuslabs.com/learn/0.7/tutorial)\n- [Core concept guide](https://dioxuslabs.com/learn/0.7/essentials/)\n- [Platform-specific guides](https://dioxuslabs.com/learn/0.7/guides/)\n- [Code examples on GitHub](https://github.com/DioxusLabs/dioxus/tree/main/examples)\n\n\n## Instant hot-reloading\n\nWith one command, `dx serve` and your app is running. Edit your markup, styles, and see changes in milliseconds. Use our experimental `dx serve --hotpatch` to update Rust code in real time.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/screenshots/refs/heads/main/blitz/hotreload-video.webp\">\n</div>\n\n## Build Beautiful Apps\n\nDioxus apps are styled with HTML and CSS. Use the built-in TailwindCSS support or load your favorite CSS library. Easily call into native code (objective-c, JNI, Web-Sys) for a perfect native touch.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/ebou2.avif\">\n</div>\n\n## Truly fullstack applications\n\nDioxus deeply integrates with [axum](https://github.com/tokio-rs/axum) to provide powerful fullstack capabilities for both clients and servers. Pick from a wide array of built-in batteries like WebSockets, SSE, Streaming, File Upload/Download, Server-Side-Rendering, Forms, Middleware, and Hot-Reload, or go fully custom and integrate your existing axum backend.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/fullstack-websockets.avif\" width=\"700\">\n</div>\n\n## Experimental Native Renderer\n\nRender using web-sys, webview, server-side-rendering, liveview, or even with our experimental WGPU-based renderer. Embed Dioxus in Bevy, WGPU, or even run on embedded Linux!\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/screenshots/refs/heads/main/blitz/native-blitz-wgpu.webp\">\n</div>\n\n## First-party primitive components\n\nGet started quickly with a complete set of primitives modeled after shadcn/ui and Radix-Primitives.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/primitive-components.avif\" width=\"700\">\n</div>\n\n## First-class Android and iOS support\n\nDioxus is the fastest way to build native mobile apps with Rust. Simply run `dx serve --platform android` and your app is running in an emulator or on device in seconds. Call directly into JNI and Native APIs.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/android_and_ios2.avif\" width=\"500\">\n</div>\n\n## Bundle for web, desktop, and mobile\n\nSimply run `dx bundle` and your app will be built and bundled with maximization optimizations. On the web, take advantage of [`.avif` generation, `.wasm` compression, minification](https://dioxuslabs.com/learn/0.7/tutorial/assets), and more. Build WebApps weighing [less than 50kb](https://github.com/ealmloff/tiny-dioxus/) and desktop/mobile apps less than 5mb.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/bundle.gif\">\n</div>\n\n## Fantastic documentation\n\nWe've put a ton of effort into building clean, readable, and comprehensive documentation. All html elements and listeners are documented with MDN docs, and our Docs runs continuous integration with Dioxus itself to ensure that the docs are always up to date. Check out the [Dioxus website](https://dioxuslabs.com/learn/0.7/) for guides, references, recipes, and more.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/docs.avif\">\n</div>\n\n## Community\n\nDioxus is a community-driven project, with a very active [Discord](https://discord.gg/XgGxMSkvUM) and [GitHub](https://github.com/DioxusLabs/dioxus/issues) community. We're always looking for help, and we're happy to answer questions and help you get started. [Our SDK](https://github.com/DioxusLabs/dioxus-std) is community-run and we even have a [GitHub organization](https://github.com/dioxus-community/) for the best Dioxus crates that receive free upgrades and support.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/dioxus-community.avif\">\n</div>\n\n## License\n\nThis project is licensed under either the [MIT license](https://github.com/DioxusLabs/dioxus/blob/main/LICENSE-MIT) or the [Apache-2 License](https://github.com/DioxusLabs/dioxus/blob/main/LICENSE-APACHE).\n\nUnless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional terms or conditions.\n","packages/document/docs/eval.md":"# Communicating with JavaScript\n\nYou can use the `eval` function to execute JavaScript code in your application with the desktop, mobile, web or liveview renderers. Eval takes a block of JavaScript code (that may be asynchronous) and returns a `Eval` object that you can use to send data to the JavaScript code and receive data from it.\n\n<div class=\"warning\">\n\n## Safety\n\nPlease be careful when executing JavaScript code with `eval`. You should only execute code that you trust. **This applies especially to web targets, where the JavaScript context has access to most, if not all of your application data.** Running untrusted code can lead to a [cross-site scripting](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) (XSS) vulnerability.\n\n</div>\n\n```rust\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| async move {\n                // Eval is a global function you can use anywhere inside Dioxus. It will execute the given JavaScript code.\n                let result = document::eval(r#\"console.log(\"Hello World\");\n                return \"Hello World\";\"#);\n\n                // You can use the `await` keyword to wait for the result of the JavaScript code.\n                println!(\"{:?}\", result.await);\n            },\n            \"Log Hello World\"\n        }\n    }\n}\n```\n\n## Sending data to JavaScript\n\nWhen you execute JavaScript code with `eval`, you can pass data to it by formatting the value into the JavaScript code or sending values to the `Eval` channel.\n\n```rust\nuse dioxus::prelude::*;\n\nfn app() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| {\n                // You can pass initial data to the eval function by formatting it into the JavaScript code.\n                const LOOP_COUNT: usize = 10;\n                let eval = document::eval(&format!(r#\"for(let i = 0; i < {LOOP_COUNT}; i++) {{\n                    // You can receive values asynchronously with the `await dioxus.recv()` method.\n                    let value = await dioxus.recv();\n                    console.log(\"Received\", value);\n                }}\"#));\n\n                // You can send values from rust to the JavaScript code with the `send` method on the object returned by `eval`.\n                for i in 0..LOOP_COUNT {\n                    eval.send(i).unwrap();\n                }\n            },\n            \"Log Count\"\n        }\n    }\n}\n```\n\n## Sending data from JavaScript\n\nThe `Eval` struct also contains methods for receiving values you send from JavaScript. You can use the `dioxus.send()` method to send values to the JavaScript code and the `Eval::recv()` method to receive values from the JavaScript code.\n\n```rust\nuse dioxus::prelude::*;\n\nfn app() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| async move {\n                // You can send values from rust to the JavaScript code by using the `send` method on the object returned by `eval`.\n                let mut eval = document::eval(r#\"for(let i = 0; i < 10; i++) {\n                    // You can send values asynchronously with the `dioxus.send()` method.\n                    dioxus.send(i);\n                }\"#);\n\n                // You can receive values from the JavaScript code with the `recv` method on the object returned by `eval`.\n                for _ in 0..10 {\n                    let value: i32 = eval.recv().await.unwrap();\n                    println!(\"Received {}\", value);\n                }\n            },\n            \"Log Count\"\n        }\n    }\n}\n```\n\n## Interacting with the DOM with Eval\n\nYou can also use the `eval` function to execute JavaScript code that reads or modifies the DOM. If you want to interact with the mounted DOM, you need to use `eval` inside the [`use_effect`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html) hook which runs after the component has been mounted.\n\n```rust\nuse dioxus::prelude::*;\n\nconst SCRIPT: &str = r#\"\n    let element = document.getElementById(\"my-element\");\n    element.innerHTML = \"Hello World\";\n    return element.getAttribute(\"data-count\");\n\"#;\n\nfn app() -> Element {\n    // ❌ You shouldn't run eval in the body of a component. This will run before the component has been mounted\n    // document::eval(SCRIPT);\n\n    // ✅ You should run eval inside an effect or event. This will run after the component has been mounted\n    use_effect(move || {\n        spawn(async {\n            let count = document::eval(SCRIPT).await;\n            println!(\"Count is {:?}\", count);\n        });\n    });\n\n\n    rsx! {\n        div {\n            id: \"my-element\",\n            \"data-count\": \"123\",\n        }\n    }\n}\n```\n","packages/document/docs/head.md":"# Modifying the Head\n\nDioxus includes a series of components that render into the head of the page:\n\n- [Title]\n- [Meta]\n- [document::Link](crate::Link)\n- [Script]\n- [Style]\n\nEach of these components can be used to add extra information to the head of the page. For example, you can use the `Title` component to set the title of the page, or the `Meta` component to add extra metadata to the page.\n\n## Limitations\n\nComponents that render into the head of the page do have a few key limitations:\n\n- With the exception of the `Title` component, all components that render into the head cannot be modified after the first time they are rendered.\n- Components that render into the head will not be removed even after the component is removed from the tree.\n- Components that render into the head do not have a guaranteed ordering; thus, components should ideally not be order dependent, since they may not appear in the head in the order they are defined.\n\n## Example\n\n```rust, no_run\n# use dioxus::prelude::*;\nfn RedirectToDioxusHomepageWithoutJS() -> Element {\n    rsx! {\n        // You can use the meta component to render a meta tag into the head of the page\n        // This meta tag will redirect the user to the dioxuslabs homepage in 10 seconds\n        document::Meta {\n            http_equiv: \"refresh\",\n            content: \"10;url=https://dioxuslabs.com\",\n        }\n    }\n}\n```\n\n## Overcoming Ordering Issues\n\nSince Dioxus does not guarantee head element ordering, one can use es6 imports as a more predictable way to handle dependencies.\n\n```rust, ignore\n# use dioxus::prelude::*;\nstatic HIGHLIGHT: Asset = asset!(\"/assets/highlight/es/highlight.min.js\");\nstatic RUST: Asset = asset!(\"/assets/highlight/es/languages/rust.min.js\");\nstatic STYLE: Asset = asset!(\"/assets/highlight/styles/atom-one-dark.css\");\n\nfn App() -> Element {\n    rsx! {\n        document::Link { rel: \"stylesheet\", href: STYLE }\n        document::Script {\n            type: \"module\",\n            r#\"import hljs from \"{HIGHLIGHT}\";\n            import rust from \"{RUST}\";\n            hljs.registerLanguage('rust', rust);\n            hljs.highlightAll();\"#\n        }\n        pre {\n            code {\n                class: \"language-rust\",\n                \"fn main() {{\\nprintln!(\\\"Hello, world!\\\");\\n}}\"\n            }\n        }\n    }\n}\n```\n\n## Fullstack Rendering\n\nHead components are compatible with fullstack rendering, but only head components that are rendered in the initial render (before suspense boundaries resolve) will be rendered into the head.\n\nIf you have any important metadata that you want to render into the head, make sure to render it outside of any pending suspense boundaries.\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[component]\n# fn LoadData(children: Element) -> Element { unimplemented!() }\nfn App() -> Element {\n    rsx! {\n        // This will render in SSR\n        document::Title { \"My Page\" }\n        SuspenseBoundary {\n            fallback: |_| rsx! { \"Loading...\" },\n            LoadData {\n                // This will only be rendered on the client after hydration so it may not be visible to search engines\n                document::Meta { name: \"description\", content: \"My Page\" }\n            }\n        }\n    }\n}\n```\n","packages/extension/README.md":"# Dioxus VSCode Extension\n\n![Dioxus Splash](https://github.com/DioxusLabs/dioxus/raw/main/notes/dioxus_splash_8.avif)\n\nThis extension wraps functionality in Dioxus CLI to be used in your editor!\n\n## Features:\n\n- Auto-format RSX\n- Convert HTML to RSX\n- Convert HTML to Dioxus Component\n- Format RSX\n\n## Current commands:\n\n### Convert HTML to RSX\nConverts a selection of html to valid rsx.\n\n### Convert HTML to Dioxus Component\n\nConverts a selection of html to a valid Dioxus component with all SVGs factored out into their own module.\n\n### Format RSX\n\nFormats the current file as RSX.\n\n## Building this extension from source\n- make sure wasm-bindgen is installed to current version (cargo binstall wasm-bindgen-cli)\n- run `npm install`\n- run `npm run vsix`\n\n# Working with Dioxus:\n\nThis overview provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:\n\n- [Getting Started](https://dioxuslabs.com/learn/0.7/getting_started)\n- [Book (0.6)](https://dioxuslabs.com/learn/0.7/)\n\n## Contributing\n- Check out the website [section on contributing](https://dioxuslabs.com/learn/0.7/beyond/contributing).\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- [Join](https://discord.gg/XgGxMSkvUM) the discord and ask questions!\n\n\n<a href=\"https://github.com/dioxuslabs/dioxus/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10\" />\n</a>\n\n## License\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","packages/fullstack-core/README.md":"# Dioxus Fullstack Core\n\nDioxus-fullstack-core provides types, traits, hooks, contexts for [`dioxus-fullstack`](https://crates.io/crates/dioxus-fullstack). Libraries that need to integrate with dioxus-fullstack should rely on this crate instead of the full-fledged renderer for quicker build times.\n\n## Usage\n\nTo start using this crate, you can run the following command:\n\n```bash\ncargo add dioxus-fullstack-hooks\n```\n\nThen you can use hooks like `use_server_future` in your components:\n\n```rust\nuse dioxus::prelude::*;\n\n\nfn App() -> Element {\n    let mut article_id = use_signal(|| 0);\n\n    // `use_server_future` will spawn a task that runs on the server and serializes the result to send to the client.\n    // The future will rerun any time the\n    // Since we bubble up the suspense with `?`, the server will wait for the future to resolve before rendering\n    let article = use_server_future(move || fetch_article(article_id()))?;\n\n    rsx! {\n        \"{article().unwrap()}\"\n    }\n}\n\nasync fn fetch_article(id: u32) -> String {\n    format!(\"Article {}\", id)\n}\n```\n","packages/fullstack-server/README.md":"# Dioxus Fullstack\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-fullstack.svg\n[crates-url]: https://crates.io/crates/dioxus-fullstack\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-fullstack/latest/dioxus_fullstack/) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\nFullstack utilities for the [`Dioxus`](https://dioxuslabs.com) framework.\n\n# Features\n\n- Integrates with the [Axum](./examples/axum-hello-world/src/main.rs) server framework with utilities for serving and rendering Dioxus applications.\n- Server functions allow you to call code on the server from the client as if it were a normal function.\n- Instant RSX Hot reloading with [`dioxus-hot-reload`](https://crates.io/crates/dioxus-hot-reload).\n- Passing root props from the server to the client.\n\n# Example\nQuickly build fullstack Rust apps with axum and dioxus.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus::launch(|| {\n        let mut meaning = use_action(|| get_meaning(\"life the universe and everything\".into()));\n\n        rsx! {\n            h1 { \"Meaning of life: {meaning:?}\" }\n            button { onclick: move |_| meaning.call(), \"Run a server function\" }\n        }\n    });\n}\n\n#[get(\"/meaning/?of\")]\nasync fn get_meaning(of: String) -> Result<Option<u32>> {\n    Ok(of.contains(\"life\").then(|| 42))\n}\n```\n\n## Axum Integration\n\nIf you have an existing Axum router or you need more control over the server, you can use the [`DioxusRouterExt`](https://docs.rs/dioxus-fullstack/0.6.0-alpha.2/dioxus_fullstack/prelude/trait.DioxusRouterExt.html) trait to integrate with your existing Axum router.\n\nFirst, make sure your `axum` dependency is optional and enabled by the server feature flag. Axum cannot be compiled to wasm, so if it is enabled by default, it will cause a compile error:\n\n```toml\n[dependencies]\ndioxus = { version = \"*\", features = [\"fullstack\"] }\naxum = { version = \"0.8.0\", optional = true }\ntokio = { version = \"1.0\", features = [\"full\"], optional = true }\ndioxus-cli-config = { version = \"*\", optional = true }\n\n[features]\nserver = [\"dioxus/server\", \"dep:axum\", \"dep:tokio\", \"dioxus-cli-config\"]\nweb = [\"dioxus/web\"]\n```\n\nThen we can set up dioxus with the axum server:\n\n```rust, no_run\n#![allow(non_snake_case)]\nuse dioxus::prelude::*;\n\n// The entry point for the server\n#[cfg(feature = \"server\")]\n#[tokio::main]\nasync fn main() {\n    use dioxus_server::DioxusRouterExt;\n\n    // Get the address the server should run on. If the CLI is running, the CLI proxies fullstack into the main address\n    // and we use the generated address the CLI gives us\n    let address = dioxus::cli_config::fullstack_address_or_localhost();\n\n    // Set up the axum router\n    let router = axum::Router::new()\n        // You can add a dioxus application to the router with the `serve_dioxus_application` method\n        // This will add a fallback route to the router that will serve your component and server functions\n        .serve_dioxus_application(dioxus_server::ServeConfig::new(), App);\n\n    // Finally, we can launch the server\n    let router = router.into_make_service();\n    let listener = tokio::net::TcpListener::bind(address).await.unwrap();\n    axum::serve(listener, router).await.unwrap();\n}\n\n// For any other platform, we just launch the app\n#[cfg(not(feature = \"server\"))]\nfn main() {\n    dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n    let mut meaning = use_signal(|| None);\n\n    rsx! {\n        h1 { \"Meaning of life: {meaning:?}\" }\n        button {\n            onclick: move |_| async move {\n                if let Ok(data) = get_meaning(\"life the universe and everything\".into()).await {\n                    meaning.set(data);\n                }\n            },\n            \"Run a server function\"\n        }\n    }\n}\n\n#[server]\nasync fn get_meaning(of: String) -> ServerFnResult<Option<u32>> {\n    Ok(of.contains(\"life\").then(|| 42))\n}\n```\n\n## Getting Started\n\nTo get started with full stack Dioxus, check out our [getting started guide](https://dioxuslabs.com/learn/0.7/getting_started), or the [full stack examples](https://github.com/DioxusLabs/dioxus/tree/master/examples).\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/fullstack/README.md":"# dioxus-fullstack\n\n- wraps dioxus-server\n- exposes rpc system\n\n","packages/fuzz/README.md":"# Dioxus VirtualDom Fuzzer\n\nThis crate provides the structured operation model and renderer oracle used by\nthe local `cargo-fuzz` target in `fuzz/`. LibFuzzer handles coverage guidance,\ncorpus scheduling, crash storage, and minimization. Mutatis provides the custom\nstructure-aware mutator for encoded `FuzzCase` values.\n\nThe fuzzer drives Dioxus `VirtualDom` updates with template, dynamic-node,\ndynamic-attribute, fragment, event-listener, portal/multi-renderer, and suspense\noperations. Each case is applied to per-target incremental renderers and checked\nagainst stable re-render and fresh rebuild snapshots.\n\n## Running\n\nInstall `cargo-fuzz` if needed:\n\n```sh\ncargo install cargo-fuzz\n```\n\nRun a short smoke session from this package directory:\n\n```sh\ncargo +nightly fuzz run vdom_ops -- -runs=256\n```\n\nTo replay the package-local corpus from this package directory:\n\n```sh\ncargo +nightly fuzz run vdom_ops fuzz/corpus/vdom_ops -- -runs=256\n```\n\nFrom the workspace root, pass the nested fuzz project explicitly:\n\n```sh\ncargo +nightly fuzz run --fuzz-dir packages/fuzz/fuzz vdom_ops packages/fuzz/fuzz/corpus/vdom_ops -- -runs=256\n```\n\nRun a longer session:\n\n```sh\ncargo +nightly fuzz run vdom_ops\n```\n\nMinimize a crashing input. This still uses `cargo fuzz tmin`, but the\n`vdom_ops` custom mutator detects libFuzzer minimization mode and first runs the\nstructured operation reducer before falling back to Mutatis shrink candidates:\n\n```sh\ncargo +nightly fuzz tmin vdom_ops fuzz/artifacts/vdom_ops/<crash-file>\n```\n\nGenerate coverage using cargo-fuzz's built-in command:\n\n```sh\ncargo +nightly fuzz coverage vdom_ops\n```\n\n## How It Works\n\n`fuzz/fuzz_targets/vdom_ops.rs` decodes the raw libFuzzer bytes as a postcard\nencoded `FuzzCase`. Invalid raw inputs are ignored by the target. The custom\n`fuzz_mutator!` hook decodes the current case (starting from an empty case\nwhen decoding fails), calls this crate's structured mutator, and writes the\nencoded case back to libFuzzer's input buffer.\n\nThe structured mutator (`src/mutator.rs`) combines field-level mutations of\nencoded ops with a table of model-aware op strategies: it replays the ops\nbefore a splice point, summarizes the resulting model, and inserts op\nsequences that target vnodes, fragments, attribute slots, and suspense\nboundaries that actually exist at that point. Strategies whose target\nstructure is missing emit their own prerequisite ops first.\n\nCases are capped at the crate-internal step limit so mutated corpus inputs\ncannot produce unbounded replay work.\n\nCrate layout:\n\n- `src/case.rs` - encoded op stream, replay, failure reporting\n- `src/ops.rs` - the operation grammar and how ops apply to the model\n- `src/model.rs` - the spec tree the generated app renders from\n- `src/mutator.rs` - structure-aware mutation (the op strategy table)\n- `src/reducer.rs` - structured shrinking of failing cases\n- `src/harness.rs` - incremental-vs-fresh renderer oracle and lifecycle checks\n- `src/vdom.rs` - compiles model specs into real `VNode`s/`Template`s\n- `src/warmup.rs` - one-shot scenarios for paths replay cannot reach\n- `src/targeted.rs` - hand-built recipes replayed as tests and exportable as\n  corpus seeds\n\n## Failures\n\nOn divergence, the fuzz target prints an SSR replay trace for the failing\noperation sequence and then panics. LibFuzzer stores the crashing input under\n`fuzz/artifacts/vdom_ops/`; use `cargo fuzz tmin` to minimize it and rerun the\ntarget on the minimized artifact to reproduce the trace.\n","packages/generational-box/README.md":"# Generational Box\n\nGenerational Box is a runtime for Rust that allows any static type to implement `Copy`. It can be combined with a global runtime to create an ergonomic state solution like `dioxus-signals`. This crate doesn't have any `unsafe` code.\n\nThree main types manage state in Generational Box:\n\n- `Store`: Handles recycling generational boxes that have been dropped. Your application should have one store or one store per thread.\n- `Owner`: Handles dropping generational boxes. The owner acts like a runtime lifetime guard. Any states that you create with an owner will be dropped when that owner is dropped.\n- `GenerationalBox`: The core Copy state type. The generational box will be dropped when the owner is dropped.\n\nExample:\n\n```rust\nuse generational_box::{UnsyncStorage, AnyStorage};\n\n// Create an owner for some state for a scope\nlet owner = UnsyncStorage::owner();\n\n// Create some non-copy data, move it into a owner, and work with copy data\nlet data: String = \"hello world\".to_string();\nlet key = owner.insert(data);\n\n// The generational box can be read from and written to like a RefCell\nlet value = key.read();\nassert_eq!(*value, \"hello world\");\n```\n\n## How it works\n\nInternally, `generational-box` creates an arena of generational `RefCell`s that are recycled when the owner is dropped. You can think of the cells as something like `&'static RefCell<Box<dyn Any>>` with a generational check to make recycling a cell easier to debug. Then `GenerationalBox`es are `Copy` because the `&'static` pointer is `Copy`.\n","packages/hooks/README.md":"# Dioxus Hooks\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-hooks.svg\n[crates-url]: https://crates.io/crates/dioxus-hooks\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-hooks/latest/dioxus_hooks) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-hooks` includes some basic useful hooks for Dioxus such as:\n\n- use_signal\n- use_effect\n- use_resource\n- use_memo\n- use_coroutine\n\nUnlike React, none of these hooks are foundational since they all build off the primitive `use_hook`. You can extend these hooks with [custom hooks](https://dioxuslabs.com/learn/0.7/essentials/advanced/custom_hooks) in your own code. If you think they would be useful for the broader community, you can open a PR to add your hook to the [Dioxus Awesome](https://github.com/DioxusLabs/awesome-dioxus) list.\n\n## State Cheat Sheet\n\nIf you aren't sure what hook to use, you can use this cheat sheet to help you decide:\n\n### State Location\n\nDepending on where you need to access the state, you can put your state in one of three places:\n\n| Location                                                                                 | Where can you access the state? | Recommended for Libraries? | Examples                                                                    |\n| ---------------------------------------------------------------------------------------- | ------------------------------- | -------------------------- | --------------------------------------------------------------------------- |\n| [Hooks](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html)             | Any components you pass it to   | ✅                          | `use_signal(\\|\\| 0)`, `use_memo(\\|\\| state() * 2)`                          |\n| [Context](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html) | Any child components            | ✅                          | `use_context_provider(\\|\\| Signal::new(0))`, `use_context::<Signal<i32>>()` |\n| [Global](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Signal.html#method.global)  | Anything in your app            | ❌                          | `Signal::global(\\|\\| 0)`                                                    |\n\n### Derived State\n\nIf you don't have an initial value for your state, you can derive your state from other states with a closure or asynchronous function:\n\n| Hook                                                                                | Reactive (reruns when dependencies change) | Async | Memorizes Output | Example                                                                             |\n| ----------------------------------------------------------------------------------- | ------------------------------------------ | ----- | ---------------- | ----------------------------------------------------------------------------------- |\n| [`use_memo`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_memo.html)         | ✅                                          | ❌     | ✅                | `use_memo(move \\|\\| count() * 2)`                                                   |\n| [`use_resource`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_resource.html) | ✅                                          | ✅     | ❌                | `use_resource(move \\|\\| reqwest::get(format!(\"/users/{user_id}\")))`                 |\n| [`use_future`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_future.html)     | ❌                                          | ✅     | ❌                | `use_future(move \\|\\| println!(\"{:?}\", reqwest::get(format!(\"/users/{user_id}\"))))` |\n\n### Persistent State\n\nThe core hooks library doesn't provide hooks for persistent state, but you can extend the core hooks with hooks from [dioxus-sdk](https://crates.io/crates/dioxus-sdk) and the [dioxus-router](https://crates.io/crates/dioxus-router) to provide persistent state management.\n\n| State                                                                              | Sharable | Example                                                                                           |\n| ---------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------- |\n| [`use_persistent`](https://github.com/DioxusLabs/sdk/tree/master/examples/storage) | ❌        | `use_persistent(\"unique_key\", move \\|\\| initial_state)`                                           |\n| [`Router<Route> {}`](https://dioxuslabs.com/learn/0.7/essentials/router/)          | ✅        | `#[derive(Routable, Clone, PartialEq)] enum Route { #[route(\"/user/:id\")] Homepage { id: u32 } }` |\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/hooks/docs/derived_state.md":"Creates a new Memo. The memo will be run immediately and whenever any signal it reads is written to. Memos can be used to efficiently compute derived data from signals.\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus_signals::*;\n\nfn App() -> Element {\n    let mut count = use_signal(|| 0);\n    // the double memo will always be equal to two times the value of count, even after count changes\n    let double = use_memo(move || count * 2);\n\n    rsx! {\n        \"{double}\"\n        button {\n            // When count changes, the memo will rerun and double will be updated\n            // memos rerun any time you write to a signal they read. They will only rerun values/component that depend on them if the value of the memo changes\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThe closure you pass into memos will be called whenever the state you read inside the memo is written to even if the value hasn't actually changed, but the memo you get will not rerun other parts of your app unless the output changes (`PartialEq` returns false).\n\nLets dig into some examples to see how this works:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut count = use_signal(|| 1);\n// double_count will rerun when state we read inside the memo changes (count)\nlet double_count = use_memo(move || count() * 2);\n\n// memos act a lot like a read only version of a signal. You can read them, display them, and move them around like any other signal\nprintln!(\"{}\", double_count); // Prints \"2\"\n\n// But you can't write to them directly\n// Instead, any time you write to a value the memo reads, the memo will rerun\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"4\"\n\n// Lets create another memo that reads the value of double_count\nlet double_count_plus_one = use_memo(move || double_count() + 1);\n\nprintln!(\"{}\", double_count_plus_one); // Prints \"5\"\n\n// Now if we write to count the double_count memo will rerun\n// If that the output of double_count changes, then it will cause double_count_plus_one to rerun\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"6\"\nprintln!(\"{}\", double_count_plus_one); // Prints \"7\"\n\n// However if the value of double_count doesn't change after a write, then it won't trigger double_count_plus_one to rerun\n// Since we just write the same value, the doubled value is still 6 and we don't rerun double_count_plus_one\n*count.write() = 3;\n\nprintln!(\"{}\", double_count); // Prints \"6\"\nprintln!(\"{}\", double_count_plus_one); // Prints \"7\"\n```\n\n## With non-reactive dependencies\n\nTo add non-reactive dependencies, you can use the [`crate::use_reactive()`] hook.\n\nSignals will automatically be added as dependencies, so you don't need to call this method for them.\n\n```rust\n# use dioxus::prelude::*;\n#[component]\nfn Comp(count: u32) -> Element {\n// Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.\nlet new_count = use_memo(use_reactive((&count,), |(count,)| count + 1));\n    todo!()\n}\n```\n","packages/hooks/docs/moving_state_around.md":"<details>\n<summary>How should I move around state? (Click here to learn more about moving around and sharing state in Dioxus)</summary>\n\nYou will often need to move state around between your components. Dioxus provides three different ways to pass around state:\n\n1. Just pass your values as [props](https://dioxuslabs.com/learn/0.7/essentials/ui/components#component-properties):\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let count = use_signal(|| 0);\n\n    rsx! {\n        IncrementButton {\n            count\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut count: Signal<i32>) -> Element {\n    rsx! {\n        button {\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThis is the most common way to pass state around. It is the most explicit and local to your component. Use this when it isn't overly annoying to pass around a value.\n\n2. Use [use_context](https://dioxuslabs.com/learn/0.7/essentials/basics/context) to pass state from a parent component to all children:\n\n```rust\n# use dioxus::prelude::*;\n#[derive(Clone, Copy)]\nstruct MyState {\n    count: Signal<i32>\n}\n\nfn ParentComponent() -> Element {\n    // Use context provider provides an unique type to all children of this component\n    use_context_provider(|| MyState { count: Signal::new(0) });\n\n    rsx! {\n        // IncrementButton will have access to the count without explicitly passing it through props\n        IncrementButton {}\n    }\n}\n\n#[component]\nfn IncrementButton() -> Element {\n    // Use context gets the value from a parent component\n    let mut count = use_context::<MyState>().count;\n\n    rsx! {\n        button {\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThis is slightly less explicit than passing it as a prop, but it is still local to the component. This is really great if you want state that is global to part of your app. It lets you create multiple global-ish states while still making state different when you reuse components. If I create a new `ParentComponent`, it will have a new `MyState`.\n\n3. Globals let you share state with your whole app with rust statics:\n\n```rust\n# use dioxus::prelude::*;\n// Count will be created the first time you access it with the closure you pass to Signal::global\nstatic COUNT: GlobalSignal<i32> = Signal::global(|| 0);\n\nfn ParentComponent() -> Element {\n    rsx! {\n        IncrementButton {}\n    }\n}\n\nfn IncrementButton() -> Element {\n    rsx! {\n        button {\n            // You don't need to pass anything around or get anything out of the context because COUNT is global\n            onclick: move |_| *COUNT.write() += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nGlobal state can be very ergonomic if your state is truly global, but you shouldn't use it if you need state to be different for different instances of your component. If I create another `IncrementButton` it will use the same `COUNT`. Libraries should generally avoid this to make components more reusable.\n\n> Note: Even though it is in a static, `COUNT` will be different for each app instance (this is generally only reliant on the server).\n\n</details>\n","packages/hooks/docs/rules_of_hooks.md":"## Additional Information that may be useful\n\n<details>\n<summary>This function is a hook which means you need to <b>follow the rules of hooks</b> when you call it. You can click here to learn more about the rules of hooks.</summary>\n\nHooks in dioxus need to run in the same order every time you run the component. To make sure you run hooks in a consistent order, you should follow the rules of hooks:\n\n1. Hooks should only be called from the root of a component or another hook\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    // ✅ You can call hooks from the body of a component\n    let number = use_signal(|| 1);\n    if number() == 1 {\n        // ❌ You can run into issues if you can hooks inside other expressions inside your component\n        // If number changes from 0 to 1, the order of the hooks will be different and your app may panic\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    todo!()\n}\n\nfn use_my_hook() -> Signal<i32> {\n    // ✅ You can call hooks from the body of other hooks\n    let number = use_signal(|| 1);\n    // ❌ Again, creating hooks inside expressions inside other hooks can cause issues\n    if number() == 1 {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    number\n}\n```\n\n2. Hooks should always start with `use_` to make it clear that you need to call them in a consistent order\n\nBecause hooks should only be called from the root of a component or another hook, you shouldn't call hooks inside of:\n\n- ❌ Conditionals\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1);\n    // ❌ Changing the condition will change the order of the hooks\n    if number() == 1 {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    // ❌ Changing the value you are matching will change the order of the hooks\n    match number() {\n        1 => {\n            let string = use_signal(|| \"hello world\".to_string());\n        },\n        _ => (),\n    }\n\n    todo!()\n}\n```\n\n- ❌ Loops\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1);\n    // ❌ Changing the loop will change the order of the hooks\n    for i in 0..number() {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    todo!()\n}\n```\n\n- ❌ Event Handlers\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| {\n                // ❌ Calling the event handler will change the order of the hooks\n                use_signal(|| \"hello world\".to_string());\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n- ❌ Initialization closures in other hooks\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| {\n        // ❌ This closure will only be called when the component is first created. Running the component will change the order of the hooks\n        let string = use_signal(|| \"hello world\".to_string());\n        string()\n    });\n\n    todo!()\n}\n```\n\n<details>\n<summary>Why do hooks need to run in a consistent order?</summary>\n\nHooks need to be run in a consistent order because dioxus stores hooks in a list and uses the order you run hooks in to determine what part of the state belongs to which hook.\n\nLets look at an example component:\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1); // Hook 1\n    let string = use_signal(|| \"hello world\".to_string()); // Hook 2\n    let doubled = use_memo(move || number() * 2); // Hook 3\n\n    todo!()\n}\n```\n\nWhen we first create the component, we run the hooks in the order they are defined and store the state in the component in a list.\n\n```rust, ignore\n[\n    Box::new(1),\n    Box::new(\"hello world\".to_string()),\n    Box::new(2),\n]\n```\n\nNext time we run the component, we return items from the state list instead of creating state again.\n\n```rust, ignore\n[\n    Box::new(1), // Hook 1 returns 1\n    Box::new(\"hello world\".to_string()), // Hook 2 returns \"hello world\"\n    Box::new(2), // Hook 3 returns 2\n]\n```\n\nThe order the hooks are run it must be the same because the order determines which hook gets what state! If you run the hooks in a different order, dioxus may panic because it can't turn the state back into the right type or you may just get the wrong state for your hook.\n\n</details>\n\n</details>\n","packages/hooks/docs/side_effects.md":"Effects are reactive closures that run **after the component has finished rendering**. Effects are useful for things like manually updating the DOM after it is rendered with web-sys or javascript. Or reading a value from the rendered DOM.\n\n**Effects are specifically created for side effects. If you are trying to derive state, use a [memo](#derived-state), or [resource](#derived-async-state) instead.**\n\nIf you are trying to update the DOM, you can use the [`use_effect`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_effect.html) hook to run an effect after the component has finished rendering.\n\n`use_effect` will subscribe to any changes in the signal values it captures effects will always run after first mount and then whenever the signal values change. If the use_effect call was skipped due to an early return, the effect will no longer activate.\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let mut count = use_signal(|| 0);\n\n    use_effect(move || {\n        // Effects are reactive like memos, and resources. If you read a value inside the effect, the effect will rerun when that value changes\n        let count = count.read();\n\n        // You can use the count value to update the DOM manually\n        document::eval(&format!(\n            r#\"var c = document.getElementById(\"dioxus-canvas\");\nvar ctx = c.getContext(\"2d\");\nctx.font = \"30px Arial\";\nctx.fillText(\"{count}\", 10, 50);\"#\n        ));\n    });\n\n    rsx! {\n        button {\n            // When you click the button, count will be incremented and the effect will rerun\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n        canvas {\n            id: \"dioxus-canvas\",\n        }\n    }\n}\n```\n\n## With non-reactive dependencies\n\nTo add non-reactive dependencies, you can use the [`crate::use_reactive()`] hook.\n\nSignals will automatically be added as dependencies, so you don't need to call this method for them.\n\n```rust\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\n\n#[component]\nfn Comp(count: u32) -> Element {\n    // Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.\n    use_effect(use_reactive((&count,), |(count,)| println!(\"Manually manipulate the dom\") ));\n\n    todo!()\n}\n```\n\n## Modifying mounted nodes\n\nOne of the most common use cases for effects is modifying or reading something from the rendered DOM. Dioxus provides access to the DOM with the [`onmounted`](https://docs.rs/dioxus/latest/dioxus/events/fn.onmounted.html) event.\n\nYou can combine `use_effect` with `onmounted` to run an effect with access to a DOM element after all rendering is finished:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let mut current_text = use_signal(String::new);\n    let mut mounted_text_div: Signal<Option<MountedEvent>> = use_signal(|| None);\n    let mut rendered_size = use_signal(String::new);\n\n    use_effect(move || {\n        // If we have mounted the text div, we can read the width of the div\n        if let Some(div) = mounted_text_div() {\n            // We read the current text here inside of the effect instead of the spawn so the effect subscribes to the signal\n            let text = current_text();\n            spawn(async move {\n                let bounding_box = div.get_client_rect().await;\n                rendered_size.set(format!(\"{text} is {bounding_box:?}\"));\n            });\n        }\n    });\n\n    rsx! {\n        input {\n            // When you enter text into the input, the effect will rerun because it subscribes to the current_text signal\n            oninput: move |evt| current_text.set(evt.value()),\n            placeholder: \"Enter text here\",\n            value: \"{current_text}\"\n        }\n        // When text changes, it will change the size of this div\n        div {\n            onmounted: move |element| {\n                mounted_text_div.set(Some(element.clone()));\n            },\n            \"{current_text}\"\n        }\n\n        \"{rendered_size}\"\n    }\n}\n```\n","packages/hooks/docs/use_resource.md":"[`use_resource()`] is a reactive hook that resolves to the result of a future. It will rerun when you write to any signals you read inside the future.\n\n## Example\n\n```rust\nuse dioxus::prelude::*;\n\nasync fn get_weather(location: &WeatherLocation) -> Result<String, String> {\n    Ok(\"Sunny\".to_string())\n}\n\nfn app() -> Element {\n    let country = use_signal(|| WeatherLocation {\n        city: \"Berlin\".to_string(),\n        country: \"Germany\".to_string(),\n        coordinates: (52.5244, 13.4105),\n    });\n\n    // Because the resource's future subscribes to `country` by reading it (`country.read()`),\n    // every time `country` changes the resource's future will run again and thus provide a new value.\n    let current_weather = use_resource(move || async move { get_weather(&country()).await });\n\n    rsx! {\n        // the value of the resource can be polled to\n        // conditionally render elements based off if it's future\n        // finished (Some(Ok(_)), errored Some(Err(_)),\n        // or is still running (None)\n        match &*current_weather.read_unchecked() {\n            Some(Ok(weather)) => rsx! { WeatherElement { weather } },\n            Some(Err(e)) => rsx! { p { \"Loading weather failed, {e}\" } },\n            None =>  rsx! { p { \"Loading...\" } }\n        }\n    }\n}\n\n#[derive(Clone)]\nstruct WeatherLocation {\n    city: String,\n    country: String,\n    coordinates: (f64, f64),\n}\n\n#[component]\nfn WeatherElement(weather: String) -> Element {\n    rsx! { p { \"The weather is {weather}\" } }\n}\n```\n\n## Reactivity\n\n`use_resource` is reactive which just means that it will rerun when you write to any signals you read inside the future. This means that any time you change something the future depends on, the resource automatically knows to rerun. Lets take a look at some examples:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// Create a new count signal\nlet mut count = use_signal(|| 1);\n// Create a new resource that doubles the value of count\nlet double_count = use_resource(move || async move {\n    // Start a request to the server. We are reading the value of count in the format macro\n    // Reading the value of count makes the resource \"subscribe\" to changes to count (when count changes, the resource will rerun)\n    let response = reqwest::get(format!(\"https://myserver.com/doubleme?count={count}\")).await.unwrap();\n    response.text().await.unwrap()\n});\n\n// Resource can be read in a way that is similar to signals, but they have a bit of extra information about the state of the resource future.\n\n// Calling .state() on a resource will return a Signal<UseResourceState> with information about the current status of the resource\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Pending\"\n\n// You can also try to get the last resolved value of the resource with the .value() method\nprintln!(\"{:?}\", double_count.read()); // Prints \"None\"\n\n// Wait for the resource to finish and get the value\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\n// Now if we read the state, we will see that it is done\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\n// And we can get the value\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(2)\"\n\n// Now if we write to count, the resource will rerun\ncount += 1; // count is now 2\n\n// Wait for the resource to finish and get the value\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\n// Now if we read the state, we will see that it is done\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\n// And we can get the value\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(4)\"\n\n// One more case, what happens if we write to the resource while it is in progress?\n// The resource will rerun and the value will be None\ncount += 1; // count is now 3\n\n// If we write to a value the resource subscribes to again, it will cancel the current future and start a new one\ncount += 1; // count is now 4\n\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Stopped\"\nprintln!(\"{:?}\", double_count.read()); // Prints the last resolved value \"Some(4)\"\n\n// After we wait for the resource to finish, we will get the value of only the latest future\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(8)\"\n```\n\n## With non-reactive dependencies\n\n`use_resource` can determine dependencies automatically with any reactive value ([`Signal`]s, [`ReadSignal`]s, [`Memo`]s, [`Resource`]s, etc). If you need to rerun the future when a normal rust value changes, you can add it as a dependency with the [`crate::use_reactive()`] hook:\n\n```rust\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\n#[component]\nfn Comp(count: u32) -> Element {\n    // We manually add the resource to the dependencies list with the `use_reactive` hook\n    // Any time `count` changes, the resource will rerun\n    let new_count = use_resource(use_reactive!(|(count,)| async move {\n        sleep(100).await;\n        count + 1\n    }));\n    rsx! { \"{new_count:?}\" }\n}\n\n// If your value is already reactive, you never need to call `use_reactive` manually\n// Instead of manually adding count to the dependencies list, you can make your prop reactive by wrapping it in `ReadSignal`\n#[component]\nfn ReactiveComp(count: ReadSignal<u32>) -> Element {\n    // Because `count` is reactive, the resource knows to rerun when `count` changes automatically\n    let new_count = use_resource(move || async move {\n        sleep(100).await;\n        count() + 1\n    });\n    rsx! { \"{new_count:?}\" }\n}\n```\n\n## Differences from `use_future` and `use_memo`\n\nJust like [`crate::use_future()`], `use_resource` spawns an async task in a component. However, unlike [`crate::use_future()`], `use_resource` returns the result of the future and will rerun when any dependencies change.\n\nResources return a value based on some existing state just like memos, but unlike memos, resources do not memorize the output of the closure. They will always rerun any parts of your app that read the value of the resource when the future resolves even if the output doesn't change.\n\nSee also: [`Resource`]\n","packages/html/README.md":"# `dioxus-html`: Html (and SVG) Namespace for Dioxus\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-html.svg\n[crates-url]: https://crates.io/crates/dioxus-html\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-html/latest/dioxus_html) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nThe Dioxus `rsx!` macro can accept any compile-time correct namespace on top of NodeFactory. This crate provides the HTML (and SVG) namespaces which get imported in the Dioxus prelude.\n\nHowever, this abstraction enables you to add any namespace of elements, provided they're in scope when rsx! is called. For an example, a UI that is designed for Augmented Reality might use different primitives than HTML:\n\n```rust, ignore\nuse ar_namespace::*;\n\nrsx! {\n    magic_div {\n        magic_header {}\n        magic_paragraph {\n            on_magic_click: move |event| {\n                //\n            }\n        }\n    }\n}\n```\n\nThis typed-builder system makes it possible to provide syntax highlighting, documentation, \"go to definition\" and compile-time correctness for elements and their attributes.\n\n## How it works:\n\nEvery HTML element is generated by the [`define_elements!`] macro. For each element the macro emits a builder whose methods are that element's attributes, so the `rsx!` macro lowers an element to the same typed builder path it uses for components.\n\nAttributes shared by every element — global attributes (`class`, `id`, `hidden`, ...) and event handlers (`onclick`, ...) — are provided through extension traits rather than being redefined on each tag. The built-in ones live under `dioxus_html::extensions` (`GlobalAttributesExtension`, `SvgAttributesExtension`, `EventsExtension`, and per-element extensions). Because each attribute is a typed method that records its serialized name and namespace, attribute creation is guarded behind a compile-time-correct interface.\n\nSince elements are builders generated by a macro rather than items in a fixed namespace, you can define your own elements from user code with the same macro — the built-in HTML vocabulary is defined this way too. See \"How to extend it\" below.\n\n## How to extend it:\n\nWhenever the rsx! macro is called, it relies on the HTML element constructors and extension traits that are in scope. When you enable the `html` feature in dioxus, the prelude imports the built-in HTML namespace for you. You can extend this with your own custom elements by adding a constructor for the tag and extension traits for any typed attributes you want to support.\n\n```rust, ignore\ndioxus::html::define_elements! {\n    #[element(name = \"analytics-panel\")]\n    analyticsPanel {\n        metric,\n        #[attr(name = \"data-region\")]\n        region,\n    }\n}\n\nrsx! {\n    analyticsPanel {\n        class: \"metric-card\",\n        metric: \"conversion-rate\",\n        region: \"north-america\",\n        \"Rendered as <analytics-panel>\"\n    }\n}\n```\n\nSee [`examples/09-reference/custom_element.rs`](../../examples/09-reference/custom_element.rs) for a complete example.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/html/docs/common_event_handler_errors.md":"## Compiler errors you may run into while using event handlers\n\n<details>\n<summary>function requires argument type to outlive `'static`</summary>\n\nEvent handler in Dioxus need only access data that can last for the entire lifetime of the application. That generally means data that is moved into the closure. **If you get this error, you may have forgotten to add `move` to your closure.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// We return an Element which can last as long as the component is on the screen\nfn App() -> Element {\n    // Signals are `Copy` which makes them very easy to move into `'static` closures like event handlers\n    let state = use_signal(|| \"hello world\".to_string());\n\n    rsx! {\n        button {\n            // ❌ Without `move`, rust will try to borrow the `state` signal which fails because the state signal is dropped at the end of the function\n            onclick: |_| {\n                println!(\"You clicked the button! The state is: {state}\");\n            },\n            \"Click me\"\n        }\n    }\n    // The state signal is dropped here, but the event handler still needs to access it\n}\n```\n\nFixed component:\n\n```rust, no_run\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let state = use_signal(|| \"hello world\".to_string());\n\n    rsx! {\n        button {\n            // ✅ The `move` keyword tells rust it can move the `state` signal into the closure. Since the closure owns the signal state, it can read it even after the function returns\n            onclick: move |_| {\n                println!(\"You clicked the button! The state is: {state}\");\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n</details>\n\n<details>\n<summary>use of moved value: `your_value` value used here after move</summary>\n\nData in rust has a single owner. If you run into this error, you have likely tried to move data that isn't `Copy` into two different closures. **You can fix this issue by making your data `Copy` or calling `clone` on it before you move it into the closure.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which cannot be copied implicitly\n#[component]\nfn MyComponent(string: String) -> Element {\n    rsx! {\n        button {\n            // ❌ We are moving the string into the onclick handler which means we can't access it elsewhere\n            onclick: move |_| {\n                println!(\"{string}\");\n            },\n            \"Print hello world\"\n        }\n        button {\n            // ❌ Since we already moved the string, we can't move it into the onclick handler again. This will cause a compiler error\n            onclick: move |_| {\n                println!(\"{string}\");\n            },\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\nYou can fix this issue by either:\n\n- Making your data `Copy` with `ReadSignal`:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts `ReadSignal<String>` which implements `Copy`\n#[component]\nfn MyComponent(string: ReadSignal<String>) -> Element {\n    rsx! {\n        button {\n            // ✅ Because the `string` signal is `Copy`, we can copy it into the closure while still having access to it elsewhere\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world\"\n        }\n        button {\n            // ✅ Since `string` is `Copy`, we can move it into the onclick handler again\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\n- Calling `clone` on your data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which doesn't implement `Copy`\n#[component]\nfn MyComponent(string: String) -> Element {\n    rsx! {\n        button {\n            // ✅ The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n            onclick: {\n                // Clone the string in a new block\n                let string = string.clone();\n                // Then move the cloned string into the closure\n                move |_| println!(\"{}\", string)\n            },\n            \"Print hello world\"\n        }\n        button {\n            // ✅ We don't use the string after this closure, so we can just move it into the closure directly\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\n</details>\n","packages/html/docs/event_handlers.md":"# Event Handlers\n\nEvent Handlers let you react to user input in your application. In Dioxus, event handlers accept a closure that is called when the event occurs:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            // The `onclick` event accepts a closure with the signature `fn(Event)`\n            onclick: |event_data| println!(\"clicked! I got the event data: {event_data:?}\"),\n            \"Click me\"\n        }\n    }\n}\n```\n\n## Event Lifetimes\n\nEvents take a closure with the `'static` lifetime. This means that the closure can only access data that either exists for the entire lifetime of the application, or data that you move into the closure.\n\nState in dioxus is `copy` which makes it very easy to move into `'static` closures like event handlers:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut count = use_signal(|| 0);\n\nrsx! {\n    button {\n        // Since we added the `move` keyword, the closure will move the `count` signal into the closure\n        onclick: move |_| {\n            // This will panic because the `count` signal is not in scope\n            count.set(count() + 1);\n        },\n        \"Click me\"\n    }\n};\n```\n\nIf you need to access data that is not `Copy`, you may need to clone the data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// String is not `Copy`\nlet string = \"hello world\".to_string();\n\nrsx! {\n    button {\n        // The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n        onclick: {\n            // Clone the string in a new block\n            let string = string.clone();\n            // Then move the cloned string into the closure\n            move |_| println!(\"{}\", string)\n        },\n        \"Print hello world\"\n    }\n    button {\n        // We don't use the string after this closure, so we can just move it into the closure directly\n        onclick: move |_| println!(\"{}\", string),\n        \"Print hello world again\"\n    }\n};\n```\n\n## Async Event Handlers\n\nIn addition to closures that return nothing, you can also use async closures to handle events. If you return an async block from an event handler, dioxus will automatically spawn it:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            // The `onclick` event can also accept a closure that returns an async block\n            onclick: move |_| async move {\n                tokio::time::sleep(std::time::Duration::from_secs(1)).await;\n                println!(\"You clicked the button one second ago!\");\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n","packages/interpreter/README.md":"# `dioxus-interpreter-js`\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-interpreter-js.svg\n[crates-url]: https://crates.io/crates/dioxus-interpreter-js\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-interpreter-js/latest/dioxus_interpreter_js) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-interpreter-js` provides the high-performance JavaScript glue that interprets the stream of edits produced by the Dioxus VirtualDom and converts them into mutations on the actual web DOM.\n\nThis crate features bindings for the web and sledgehammer for increased performance.\n\n## Architecture\n\nWe use TypeScript to write the bindings and a very simple build.rs along with bun to convert them to javascript, minify them, and glue them into the rest of the project.\n\nNot every snippet of JS will be used, so we split out the snippets from the core interpreter.\n\nIn theory, we _could_ use Rust in the browser to do everything these bindings are doing. In reality, we want to stick with JS to skip the need for a WASM build step when running the LiveView and WebView renderers. We also want to use JS to prevent diverging behavior of things like canceling events, uploading files, and collecting form inputs. These details are tough to ensure 1:1 compatibility when implementing them in two languages.\n\nIf you want to contribute to the bindings, you'll need to have the typescript compiler installed on your machine as well as bun:\n\n<https://bun.sh/docs/installation>\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/liveview/README.md":"# Dioxus Liveview\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-liveview.svg\n[crates-url]: https://crates.io/crates/dioxus-liveview\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-liveview/latest/dioxus_liveview) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-liveview` provides adapters for running the Dioxus VirtualDom over a WebSocket connection.\n\nThe current backend frameworks supported include:\n\n- Axum\n\nDioxus-LiveView exports some primitives to wire up an app into an existing backend framework.\n\n- A ThreadPool for spawning the `!Send` VirtualDom and interacting with it from WebSockets\n- An adapter for transforming various socket types into the `LiveViewSocket` type\n- The glue to load the interpreter into your app\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/logger/README.md":"<div align=\"center\">\n  <h1>📡 Dioxus Logger 🛰️</h1>\n  <p><strong>A logging utility to provide a standard interface whether you're targeting web, desktop, fullstack, and more.</strong></p>\n</div>\n\n<div align=\"center\">\n  <!-- Crates version -->\n  <a href=\"https://crates.io/crates/dioxus-logger\">\n    <img src=\"https://img.shields.io/crates/v/dioxus-logger.svg?style=flat-square\"\n    alt=\"Crates.io version\" />\n  </a>\n  <!-- Downloads -->\n  <a href=\"https://crates.io/crates/dioxus-logger\">\n    <img src=\"https://img.shields.io/crates/d/dioxus-logger.svg?style=flat-square\"\n      alt=\"Download\" />\n  </a>\n  <!-- docs -->\n  <a href=\"https://docs.rs/dioxus-logger\">\n    <img src=\"https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square\"\n      alt=\"docs.rs docs\" />\n  </a>\n</div>\n\n-----\n\n`dioxus-logger` is a basic cross-platform facade for logging in [Dioxus](https://dioxuslabs.com/) that uses the [tracing](https://crates.io/crates/tracing) crate.\n\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus_logger::tracing::{Level, info};\n\nfn main() {\n  dioxus_logger::init(Level::INFO).expect(\"logger failed to init\");\n  dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n  info!(\"App rendered\");\n  rsx! {\n    p { \"hi\" }\n  }\n}\n```\n\n## Dioxus support\n\nAs of v0.6, dioxus_logger is part of dioxus itself. Dioxus will call `init` with a default Level, though you can still override the default with `init`.\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus::logger::tracing::{Level, info};\n\nfn main() {\n  dioxus::logger::init(Level::INFO).expect(\"logger failed to init\");\n  dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n  info!(\"App rendered\");\n  rsx! {\n    p { \"hi\" }\n  }\n}\n```\nFor non-wasm targets, runtime filtering is based on the `RUST_LOG` environment variable. e.g. for `RUST_LOG=none,crateName=trace` only logs trace and above for `crateName` will be captured. See [here](https://docs.rs/tracing-subscriber/latest/tracing_subscriber/filter/struct.EnvFilter.html#directives) for syntax. For crates with `-` in the name, these need to be changed to `_` in `RUST_LOG`.\n\n## Platform Support\nDioxus logger will eventually support every target that Dioxus does. Currently mobile and TUI are not supported.\n\n## Installation\n`dioxus_logger` is part of Dioxus v0.6. If you're using Dioxus v0.6, then no installation is required!\n\n\nIf you're on Dioxus v0.5 and below, you can add `dioxus-logger` to your application by adding it to your dependencies.\n```toml\n[dependencies]\ndioxus-logger = \"0.5\"\n```\n\n\n## License\nThis project is licensed under the [MIT license].\n\n[mit license]: ./LICENSE\n\nEvery contribution intentionally submitted for inclusion in `dioxus-logger` by you, shall be licensed as MIT, without any additional terms or conditions.\n","packages/manganis/manganis-macro/README.md":"# Manganis Macro\n\nThis crate contains the macro used to interact with the Manganis asset system. \n","packages/manganis/manganis/README.md":"# Manganis\n\nManganis is a tool for submitting assets and native source files to the program linker. It makes it easy to self-host assets and native plugins that are distributed throughout your libraries.\n\n## Assets\n\nIncluding assets is as simple as using the `asset!()` macro:\n\n```rust\nuse manganis::{Asset, asset};\nconst STYLE: Asset = asset!(\"/assets/style.css\");\n```\n\nAfter cargo builds your app, the asset path is embedded directly in the data section. A tool like the Dioxus CLI can extract this metadata and post-process these assets.\n\n```rust, ignore\nuse manganis::{ImageFormat, Asset, asset, ImageSize, AssetOptions};\n// You can collect arbitrary files. Absolute paths are resolved relative to the package root\nconst _: Asset = asset!(\"/assets/script.js\");\n\n// You can collect images which will be automatically optimized\npub const PNG_ASSET: Asset =\n    asset!(\"/assets/image.png\");\n// Resize the image at compile time to make the assets smaller\npub const RESIZED_PNG_ASSET: Asset =\n    asset!(\"/assets/image.png\", AssetOptions::image().with_size(ImageSize::Manual { width: 52, height: 52 }));\n// Or convert the image at compile time to a web friendly format\npub const AVIF_ASSET: Asset = asset!(\"/assets/image.png\", AssetOptions::image().with_format(ImageFormat::Avif));\n```\n\n## option_asset\n\nIf you have assets that may not always be bundled, you can fall back gracefully with `option_asset!`:\n\n```rust\nuse manganis::{Asset, asset, option_asset};\nconst REQUIRED: Asset = asset!(\"/assets/style.css\");\nconst OPTIONAL: Option<Asset> = option_asset!(\"/assets/missing.css\");\n```\n\n## JavaScript assets\n\nThe CLI auto-detects whether each `.js` asset is an ES module (top-level\n`import`/`export` or `import.meta`) or a classic script and processes it\naccordingly.\n\n- **`with_minify(true)` (default)**: the file is minified in place. Classic\n  scripts are minified verbatim with their format preserved (no IIFE\n  re-wrapping). ES modules are minified and bundled — local relative imports\n  are inlined into a single ESM file, while `http://` / `https://` imports\n  remain as external `import` statements for the browser to resolve at runtime.\n- **`with_minify(false)`**: the file is copied byte-for-byte. Use this when\n  shipping pre-built third-party libraries you do not want re-processed.\n- **`with_static_head(true)`**: appends a `<script>` tag to the document head\n  pointing at the asset. The CLI emits `<script type=\"module\" ...>` when the\n  file is detected (or declared) as an ES module, and a classic `<script>`\n  otherwise.\n- **`with_preload(true)`**: emits a `<link rel=\"preload\" as=\"script\">` for the asset.\n- **`with_module(true)`**: forces the file to be treated as an ES module even\n  when auto-detection would say otherwise. Useful when you author a\n  side-effect-only module without top-level `import`/`export` declarations.\n  Files named `*.mjs` are always treated as modules; files named `*.cjs` are\n  always treated as classic.\n\n```rust, ignore\nuse manganis::{asset, Asset, AssetOptions};\n\n// Vendored UMD library: copy verbatim, emitted as a classic <script>.\nconst SWEETALERT: Asset = asset!(\n    \"/assets/sweetalert2.all.min.js\",\n    AssetOptions::js().with_minify(false).with_static_head(true)\n);\n\n// Authored ES module with local imports: auto-detected from the top-level\n// `import`/`export`, bundled and minified into a single ESM file, emitted as\n// `<script type=\"module\">`.\nconst APP: Asset = asset!(\n    \"/assets/app.js\",\n    AssetOptions::js().with_static_head(true)\n);\n```\n\n## Native FFI Bindings\n\nManganis provides the `#[ffi]` attribute macro for generating direct FFI bindings between Rust and native platforms (Swift/Kotlin). See the `geolocation-native-plugin` example for usage.\n","packages/playwright-tests/barebones-template/README.md":"# Development\n\nYour new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.\n\n```\nproject/\n├─ assets/ # Any assets that are used by the app should be placed here\n├─ src/\n│  ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app\n├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project\n```\n\n### Serving Your App\n\nRun the following command in the root of your project to start developing with the default platform:\n\n```bash\ndx serve\n```\n\nTo run for a different platform, use the `--webview`, `--native`, or `--web` flags. E.g.\n\n```bash\ndx serve --webview\n```\n","packages/router/README.md":"# Dioxus Router\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-router.svg\n[crates-url]: https://crates.io/crates/dioxus-router\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/essentials/router/) |\n[API Docs](https://docs.rs/dioxus-router/latest/dioxus_router) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nDioxus Router is a first-party Router for all your Dioxus Apps. It provides an\ninterface similar to React Router, but takes advantage of types for more\nexpressiveness.\n\n```rust, no_run\nuse dioxus::prelude::*;\nuse std::str::FromStr;\n\n#[rustfmt::skip]\n#[derive(Clone, Debug, PartialEq, Routable)]\nenum Route {\n    #[nest(\"/blog\")]\n        #[layout(Blog)]\n            #[route(\"/\")]\n            BlogList {},\n\n            #[route(\"/:blog_id\")]\n            BlogPost { blog_id: usize },\n        #[end_layout]\n    #[end_nest]\n    #[route(\"/\")]\n    Index {},\n}\n\n#[component]\nfn App() -> Element {\n    rsx! {\n        Router::<Route> { }\n    }\n}\n\n#[component]\nfn Index() -> Element {\n    rsx! {\n        h1 { \"Index\" }\n        Link {\n            to: Route::BlogList {},\n            \"Go to the blog\"\n        }\n    }\n}\n\n#[component]\nfn Blog() -> Element {\n    rsx! {\n        h1 { \"Blog\" }\n        Outlet::<Route> { }\n    }\n}\n\n#[component]\nfn BlogList() -> Element {\n    rsx! {\n        h2 { \"List of blog posts\" }\n        Link {\n            to: Route::BlogPost { blog_id: 0 },\n            \"Blog post 1\"\n        }\n        Link {\n            to: Route::BlogPost { blog_id: 1 },\n            \"Blog post 2\"\n        }\n    }\n}\n\n#[component]\nfn BlogPost(blog_id: usize) -> Element {\n    rsx! {\n        h2 { \"Blog Post\" }\n    }\n}\n```\n\nYou need to enable the right features for the platform you're targeting since these are not determined automatically!\n\n## Bundle Splitting\n\nThe Dioxus Router supports automatic bundle splitting along route variants. To enable this, you need to manually turn on the `wasm-split` feature explicitly on the dioxus-router crate:\n\n```toml\n[dependencies]\ndioxus = { version = \"*\", features = [\"router\", \"wasm-split\"] }\ndioxus-router = { version = \"*\", features = [\"wasm-split\"] }\n```\n\nNote that `wasm-split` must also be turned on in dioxus since the macro uses the re-exported `wasm-split` from the dioxus prelude.\n\nEnabling splitting disconnects the call graph, meaning if you try to run your app with a normal `dx serve`, it won't work. When running with router splitting, you need to pass `--experimental-wasm-split`.\n\n```sh\ndx serve --experimental-wasm-split\n```\n\nIn practice, we recommend passing `dioxus-router?/wasm-split` as a feature only when bundling:\n\n```sh\ndx bundle --features \"dioxus-router?/wasm-split\"  --experimental-wasm-split\n```\n\nNote that the router will call `.suspend()` so you should add a SuspenseBoundary above the Outlet to prevent suspending the entire page.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/rsx-rosetta/README.md":"# `rsx-rosetta`\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/rsx-rosetta.svg\n[crates-url]: https://crates.io/crates/rsx-rosetta\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/rsx-rosetta/latest/rsx_rosetta) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nDioxus sports its own templating language inspired by C#/Kotlin/RTMP, etc. It's pretty straightforward.\n\nHowever, it's NOT HTML. This is done since HTML is verbose and you'd need a dedicated LSP or IDE integration to get a good DX in .rs files.\n\nRSX is simple... It's similar enough to regular Rust code to trick most IDEs into automatically providing support for things like block selections, folding, highlighting, etc.\n\nTo accommodate the transition from HTML to RSX, you might need to translate some existing code.\n\nThis library provides a central AST that can accept a number of inputs:\n\n- HTML\n- Syn (todo)\n- Akama (todo)\n- Jinja (todo)\n\nFrom there, you can convert directly to a string or into some other AST.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","packages/rsx/README.md":"# Dioxus-RSX\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-rsx.svg\n[crates-url]: https://crates.io/crates/dioxus-rsx\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-rsx/latest/dioxus_rsx) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nThis crate provides the actual DSL that Dioxus uses in the `rsx!` macro. This crate is separate from the macro crate to enable tooling like autoformat, translation, and AST manipulation (extract to component).\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## Design\n\nThe architecture of this crate has gone through several redesigns and we're hoping that we've finally landed on a final design that we're happy with.\n\nThere is still some thinking that we could approach this by flattening the AST to have better incremental parsing and performance without having to add metadata to the data structures.\n\nFor now, however, the design we've settled on:\n\n- A top-level CallBody containing a single TemplateBody\n- Each TemplateBody has its dynamic mapping on it, filled in after parsing (...not during)\n- Hotreload Information for things like literals is propagated as a final pass into nodes on the tree\n\nThis lets us incrementally build up the tree to make it modular/easier to test in exchange for extra \"bookkeeping passes\".\n\nThe good part of bookkeeping passes is:\n- They're optional\n- They're generally pretty quick\n- They can be enforced as part of tree construction in the various levels\n\nOf course the major downside is they're 1) slower and 2) need a way to store metadata, which they do on the nodes themselves. Sometimes you might not even want to collect metadata which we currently have no way of opting-out of.\n\nThis can make global reasoning about the tree a bit harder since you need to dig into each node for its metadata, but the local reasoning is much better. Previously we stored the metadata on a secondary \"view\" type item - and this was fine... but it's not ideal for long-lived programs that persist a queryable tree-object.\n\nWe want to query the tree:\n- For its dynamic mappings\n- For its hot-reloadable contents\n\nAn alternative approach would be\n- flattened AST\n- single \"parser\" IE `self.parse_element` / `self.parse_component`\n\nI've done a bunch of research on parsers and cannot find many (any?) parsers that are implemented statefully.\n\nWe *do* want a reference to these items - currently its their path, but it could be done via just an ID for each node. Unfortunately there's no easy way to \"pool\" these up other than Arc/Rc.\n\nAnyways, until our applications are limited by query performance, keeping the tree unflattened seems fine. The JS DOM has a similar API where it flushes changes after modifications, but also has an ID system via pointers. We could try adding IDs with something like generational-box or just Arc/Rc.\n\nNote that we still don't get the \"goodies\" of a proper tree-sitter type parser (skipping tokenization incrementally) but that really isn't achievable without being a part of the LSP. In theory, we can eventually use the LSP to help modify the tree in place and then \"fix\" it if you wanted to modify trees in place. That being said, we still need to perform diffing of two rsx! trees even when we know their shape has changed.\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT, without any additional\nterms or conditions.\n","packages/signals/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsignals%2FREADME.md -->","packages/signals/docs/memo.md":"Memos are the result of computing a value from `use_memo`.\n\nYou may have noticed that this struct doesn't have many methods. Most methods for `Memo` are defined on the [`ReadableExt`] trait.\n\n# Reading a Memo\n\nYou can use the methods on the `ReadableExt` trait to read a memo:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n    // The memo will rerun any time we write to the count signal\n    let halved = use_memo(move || count() / 2);\n\n    rsx! {\n        // When we read the value of memo, the current component will subscribe to the result of the memo. It will only rerun when the result of the memo changes.\n        \"{halved}\"\n        button {\n            onclick: move |_| {\n                count += 1;\n            },\n            \"Increment\"\n        }\n    }\n}\n```\n\nMemo also includes helper methods just like [`Signal`]s to make it easier to use. Calling a memo like a function will clone the inner value:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n    // The memo will rerun any time we write to the count signal\n    let halved = use_memo(move || count() / 2);\n    // This will rerun any time the halved value changes\n    let doubled = use_memo(move || 2 * halved());\n\n    rsx! {\n        \"{doubled}\"\n        button {\n            onclick: move |_| {\n                count += 1;\n            },\n            \"Increment\"\n        }\n    }\n}\n```\n\nFor a full list of all the helpers available, check out the [`Readable`], [`ReadableVecExt`](crate::ReadableVecExt), and [`ReadableOptionExt`](crate::ReadableOptionExt) traits.\n\n# Memos with Async\n\nBecause Memos check borrows at runtime, you need to be careful when reading memos inside of async code. If you hold a read of a memo over an await point, that read may still be open when the memo reruns which will cause a panic:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: &u32) -> u32 {\n    sleep(100).await;\n    *value * 2\n}\nlet mut signal = use_signal(|| 0);\nlet halved = use_memo(move || signal() / 2);\n\nlet doubled = use_resource(move || async move {\n    // Don't hold reads over await points\n    let halved = halved.read();\n    // While the future is waiting for the async work to finish, the read will be open\n    double_me_async(&halved).await\n});\n\nrsx!{\n    \"{doubled:?}\"\n    button {\n        onclick: move |_| {\n            // When you write to signal, it will cause the memo to rerun which may panic because you are holding a read of the memo over an await point\n            signal += 1;\n        },\n        \"Increment\"\n    }\n};\n```\n\nInstead of holding a read over an await point, you can clone whatever values you need out of your memo:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: u32) -> u32 {\n    sleep(100).await;\n    value * 2\n}\nlet mut signal = use_signal(|| 0);\nlet halved = use_memo(move || signal() / 2);\n\nlet doubled = use_resource(move || async move {\n    // Calling the memo will clone the inner value\n    let halved = halved();\n    double_me_async(halved).await;\n});\n\nrsx!{\n    \"{doubled:?}\"\n    button {\n        onclick: move |_| {\n            signal += 1;\n        },\n        \"Increment\"\n    }\n};\n```\n\n# Memo lifecycle\n\nMemos are implemented with [generational-box](https://crates.io/crates/generational-box) which makes all values Copy even if the inner value is not Copy.\n\nThis is incredibly convenient for UI development, but it does come with some tradeoffs. The lifetime of the memo is tied to the lifetime of the component it was created in. If you drop the component that created the memo, the memo will be dropped as well. You might run into this if you try to pass a memo from a child component to a parent component and drop the child component. To avoid this you can create your memo higher up in your component tree, or use global memos.\n\nTLDR **Don't pass memos up in the component tree**. It will cause issues:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let child_signal = use_signal(|| None);\n\n    rsx! {\n        IncrementButton {\n            child_signal\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut child_signal: Signal<Option<Memo<i32>>>) -> Element {\n    let signal_owned_by_child = use_signal(|| 0);\n    let memo_owned_by_child = use_memo(move || signal_owned_by_child() * 2);\n    // Don't do this: it may cause issues if you drop the child component\n    child_signal.set(Some(memo_owned_by_child));\n\n    todo!()\n}\n```\n","packages/signals/docs/signals.md":"Signals are a Copy state management solution with automatic dependency tracking.\n\nYou may have noticed that this struct doesn't have many methods. Most methods for Signal are defined on the [`Readable`] and [`Writable`] traits.\n\n# Reading and Writing to a Signal\n\nSignals are similar to a copy version of `Rc<RefCell<T>>` built for UIs. You can read and write to a signal like a RefCell:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n\n{\n    // This will read the value (we use a block to make sure the read is dropped before the write. You can read more about this in the next section)\n    let read = signal.read();\n    // Just like refcell, read you can deref the read to get the inner &T reference\n    match &*read {\n        &0 => println!(\"read is 0\"),\n        &1 => println!(\"read is 1\"),\n        _ => println!(\"read is something else ({read})\"),\n    }\n}\n\n// This will write to the value\nlet mut write = signal.write();\n// Again, we can deref the write to get the inner &mut T reference\n*write += 1;\n```\n\nSignals also have a bunch of helper methods to make it easier to use. Calling it like a function will clone the inner value. You can also call a few traits like AddAssign on it directly without writing to it manually:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n// This will clone the value\nlet clone: i32 = signal();\n\n// You can directly display the signal\nprintln!(\"{}\", signal);\n\nlet signal_vec = use_signal(|| vec![1, 2, 3]);\n// And use vec methods like .get and .len without reading the signal explicitly\nlet first = signal_vec.get(0);\nlet last = signal_vec.last();\nlet len = signal_vec.len();\n\n// You can also iterate over signals directly\nfor i in signal_vec.iter() {\n    println!(\"{}\", i);\n}\n```\n\nFor a full list of all the helpers available, check out the [`Readable`], [`ReadableVecExt`], [`ReadableOptionExt`], [`Writable`], [`WritableVecExt`], and [`WritableOptionExt`] traits.\n\nJust like `RefCell<T>`, Signal checks borrows at runtime. If you read and write to the signal at the same time, it will panic:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n// If you create a read and hold it while you write to the signal, it will panic\nlet read = signal.read_unchecked();\n// This will panic\nsignal += 1;\nprintln!(\"{}\", read);\n```\n\nTo avoid issues with overlapping reads and writes, you can use the `with_*` variants of methods to read and write to the signal in a single scope or wrap your reads and writes inside a block:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n{\n    // Since this read is inside a block that ends before we write to the signal, the signal will be dropped before the write and it will not panic\n    let read = signal.read();\n    println!(\"{}\", read);\n}\nsignal += 1;\n\n// Or you can use the with and with_write methods which only read or write to the signal inside the closure\nsignal.with(|read| println!(\"{}\", read));\n// Since the read only lasts as long as the closure, this will not panic\nsignal.with_mut(|write| *write += 1);\n```\n\n# Signals with Async\n\nBecause signals check borrows at runtime, you need to be careful when reading and writing to signals inside of async code. If you hold a read or write to a signal over an await point, that read or write may still be open while you run other parts of your app:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: &mut u32) {\n    sleep(100).await;\n    *value *= 2;\n}\nlet mut signal = use_signal(|| 0);\n\nuse_future(move || async move {\n    // Don't hold reads or writes over await points\n    let mut write = signal.write();\n    // While the future is waiting for the async work to finish, the write will be open\n    double_me_async(&mut write).await;\n});\n\nrsx!{\n    // This read may panic because the write is still active while the future is waiting for the async work to finish\n    \"{signal}\"\n};\n```\n\nInstead of holding a read or write over an await point, you can clone whatever values you need out of your signal and then set the signal to the result once the async work is done:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: u32) -> u32 {\n    sleep(100).await;\n    value * 2\n}\nlet mut signal = use_signal(|| 0);\n\nuse_future(move || async move {\n    // Clone the value out of the signal\n    let current_value = signal();\n    // Run the async work\n    let new_value = double_me_async(current_value).await;\n    // Set the signal to the new value\n    signal.set(new_value);\n});\n\nrsx! {\n    // This read will not panic because the write is never held over an await point\n    \"{signal}\"\n};\n```\n\n# Signals lifecycle\n\nSignals are implemented with [generational-box](https://crates.io/crates/generational-box) which makes all values Copy even if the inner value is not Copy.\n\nThis is incredibly convenient for UI development, but it does come with some tradeoffs. The lifetime of the signal is tied to the lifetime of the component it was created in. If you drop the component that created the signal, the signal will be dropped as well. You might run into this if you try to pass a signal from a child component to a parent component and drop the child component. To avoid this you can create your signal higher up in your component tree, use global signals, or create a signal in a specific scope (like the `ScopeId::ROOT`) with [`Signal::new_in_scope`](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Signal.html#method.new_in_scope)\n\nTLDR **Don't pass signals up in the component tree**. It will cause issues:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let child_signal = use_signal(|| None);\n\n    rsx! {\n        IncrementButton {\n            child_signal\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut child_signal: Signal<Option<Signal<i32>>>) -> Element {\n    let signal_owned_by_child = use_signal(|| 0);\n    // Don't do this: it may cause issues if you drop the child component\n    child_signal.set(Some(signal_owned_by_child));\n\n    todo!()\n}\n```\n","packages/ssr/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fssr%2FREADME.md -->","packages/stores/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fstores%2FREADME.md -->","packages/subsecond/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsubsecond%2FREADME.md -->","packages/subsecond/subsecond-tests/cross-tls-test/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsubsecond%2Fsubsecond-tests%2Fcross-tls-test%2FREADME.md -->","packages/wasm-split/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fwasm-split%2FREADME.md -->","packages/web/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fweb%2FREADME.md -->"},"files":{".devin/skills/release-alpha/SKILL.md":"---\nname: release-alpha\ndescription: Cut a Dioxus 0.x alpha release (version bump, crates.io publish, tag, GitHub release, CLI binaries, template update, verification, and optionally the SDK/icons/code/components releases)\nargument-hint: \"<new version, e.g. 0.8.0-alpha.3>\"\ntriggers:\n  - user\n  - model\nallowed-tools:\n  - read\n  - grep\n  - glob\n---\n\n# Releasing a Dioxus alpha\n\nUse this to cut a prerelease of the whole workspace (for example `0.8.0-alpha.3`). The general checklist is in `notes/RELEASING.md`. This skill is the concrete, tested procedure for an alpha, written down after cutting `0.8.0-alpha.2`. Step 8 (ecosystem crates) was added after `0.8.0-alpha.3`.\n\n`NEW` is the version being released and `PREV` is the last release tag (e.g. `v0.8.0-alpha.2`). If the user didn't give `NEW`, ask.\n\n## Confirmation gates\n\nThese steps can't be undone. Do each one only when the user has explicitly asked for it, and don't treat approval of one as approval of the next:\n\n- publishing to crates.io (versions can't be deleted)\n- pushing to `main`. Branch protection requires a PR, and the user's account can bypass that rule, so a direct push goes through silently. Prefer a PR.\n- pushing tags, creating the GitHub release, and running the `Publish CLI` workflow\n- creating new crates on crates.io and changing crate owners\n\nNever edit `.npmrc`, `minimumReleaseAge` or branch protection to get around a failure.\n\n## Environment notes (macOS)\n\n- **bash 3.2:** a heredoc inside `$(...)` that contains an apostrophe fails to parse. Write commit messages and PR bodies to a file and use `git commit -F file` and `gh pr create --body-file file`.\n- **sed:** in-place edits need `sed -i ''`.\n- **crates.io API:** requests are rejected without a User-Agent, so pass `curl -A dioxus-release-check ...`.\n- **Don't touch the user's `dx`:** don't `cargo install` over it. Build `dx` into `target/release/dx` with `cargo build -p dioxus-cli --release`, and set `DX_HOME=<scratch dir>` so its tools are downloaded fresh and the user's dx data stays untouched.\n- **Cleanup:** put scratch work under `/tmp/<name>` and delete it when done.\n\n## 1. Pre-flight\n\n1. **Base commit and CI.** Find the latest `main` commit with `git fetch origin`. Check its CI with `gh run list --branch main --workflow main.yml --limit 3`. Wait for green before cutting.\n2. **What's new.** Find the commit `PREV` was cut from: `git merge-base origin/main PREV`. A tag can be on a side branch (alpha.1's was). List the commits since then with `git log --oneline <base>..origin/main`.\n3. **New publishable crates.** Diff the `[workspace.dependencies]` entries in `Cargo.toml` against `PREV`. For each publishable member, query `https://crates.io/api/v1/crates/<name>`; a 404 means it's new.\n   - **Claim the names first** (confirmation gate). For each new crate, in `/tmp`, run `cargo new --lib --vcs none <name>`. Copy `description`, `license`, `repository`, `homepage`, `keywords` and `authors` from the real crate, set `version = \"0.0.0\"`, and make `src/lib.rs` just `//! Coming soon.`. Then `cargo publish --dry-run` followed by `cargo publish`.\n   - **Add owners:** `github:dioxuslabs:publish`, `jkelleyrtp` (Jonathan Kelley) and `ealmloff` (Evan Almloff), with `cargo owner --add github:dioxuslabs:publish --add jkelleyrtp --add ealmloff <crate>`. This needs a token with the `change-owners` scope. If cargo returns 403, give the user `https://crates.io/crates/<crate>/settings` instead.\n   - **Naming:** a crate name can't be changed once it has a real release, so settle names before publishing.\n4. **Dev-dependencies on `publish = false` crates** (for example `dioxus-renderer-oracle` in `dioxus-core`). These are fine because `cargo workspaces publish` strips dev-dependencies by default (it logs `warn removing dev-deps ...`). Never pass `--no-remove-dev-deps`. Plain `cargo publish` or `cargo publish --workspace` would fail on them.\n5. **Optional packaging dry run.** `cargo workspaces publish --dry-run` can't get past the first crate whose dependencies aren't on crates.io yet, so it isn't useful. Instead:\n   - Create a scratch worktree with `git worktree add --detach /tmp/dioxus-dryrun HEAD`.\n   - Bump the version there, and strip `[dev-dependencies]` from the crates you're checking.\n   - Run `cargo publish --dry-run --no-verify --allow-dirty -p <crate> -p <each workspace crate it depends on, transitively>`.\n   - Remove the worktree afterwards with `git worktree remove --force`.\n6. **Smoke test** (web, from the base commit):\n   - Build `dx` as described in the environment notes.\n   - Run `dx new` in `/tmp`. It needs a TTY, and even with `--yes` it still asks for the sub-template and platform. To run it without a TTY, pass `--subtemplate Bare-Bones --option default_platform=web --yes --vcs none`.\n   - Add `[patch.crates-io] dioxus = { path = \"<repo>/packages/dioxus\" }` to the project.\n   - Run `dx serve --web --port <p> --open false --interactive false`. In the browser, check that the page renders and the CSS/SVG assets load.\n   - Check hot reload: edit RSX text, then CSS, then add a `use_signal` counter button (a Rust hot-patch) and click it.\n   - Run `dx bundle --web --release`, serve `target/dx/<app>/release/web/public` with `python3 -m http.server`, and click the button again.\n   - Check that `dx` installs `wasm-bindgen-cli` at the same version as the project's `wasm-bindgen`, and compare against the latest on crates.io.\n   - To check app logs, use the interactive TUI. `--interactive false --verbose` drops app logs; that's an existing bug.\n\n## 2. Version bump\n\n1. Create the branch: `git switch -c release-NEW origin/main`, then `git branch --unset-upstream`.\n2. Find every reference to the old version with `rg -l --glob '!Cargo.lock' --glob '!target/**' '<OLD_VERSION_REGEX>' .`. Expect:\n   - `Cargo.toml` (the `[workspace.package]` version and every `=<old>` entry in `[workspace.dependencies]`)\n   - `packages/const-serialize/Cargo.toml`\n   - `packages/const-serialize-macro/Cargo.toml`\n   - `packages/manganis/manganis-core/Cargo.toml` (its `const-serialize` dependency)\n3. Replace the version with `sed -i '' 's/<old>/<new>/g' <files>`, then run `cargo update -w`.\n4. Verify:\n   - In `git diff -U0 Cargo.lock`, the only changed lines are `version = \"...\"` lines.\n   - `cargo metadata --locked` succeeds.\n   - `cargo check --locked -p dioxus -p dioxus-cli` succeeds.\n5. Commit with the message `Bump versions for NEW release` (the existing convention).\n6. Get the bump onto `main` before tagging, preferably through a PR. The tag must end up on a commit that's on `main`.\n\n## 3. Release notes\n\n1. Generate the base notes:\n   `gh api repos/DioxusLabs/dioxus/releases/generate-notes -f tag_name=vNEW -f target_commitish=main -f previous_tag_name=PREV --jq .body`.\n   `target_commitish` must be a branch name; a SHA is rejected.\n2. Above the generated list, add a `## Highlights` section and, if needed, a `## Breaking changes` section. Write them from the PR descriptions (`gh pr view <n> --json title,body`), not just the titles. Keep the generated \"What's Changed\", \"New Contributors\" and \"Full Changelog\" sections unchanged.\n3. Credit original authors of rebased or superseded PRs, e.g. `(originally #NNNN by @user)`.\n4. Commits pushed straight to main have no PR and won't appear in the generated list.\n5. Save the notes to `/tmp/vNEW-release-notes.md`.\n\n## 4. Publish (confirmation gate)\n\nFrom a clean tree on the bump commit, run the command from `notes/RELEASING.md`:\n\n```\ncargo workspaces publish --publish-as-is --allow-dirty --no-git-push --no-individual-tags\n```\n\n- **Rate limits:** crates.io allows a burst of about 30 to 34 updates to existing crates, then about 1 per minute. When it returns `429 Too Many Requests ... try again after <date> GMT`, `cargo-workspaces` stops.\n- **Retrying:** re-run with `publish-with-retry.sh` in this skill's directory. Each re-run skips crates that are already published, waits until the time crates.io gave, and stops on any non-rate-limit error. It shows each run's output as it happens and also saves it to `<log prefix><run>.log`. Run it in the background and report progress as `published N/total`.\n- **Timing:** for about 56 crates, expect about 30 minutes in total.\n- **Check the result:** query `https://crates.io/api/v1/crates/<name>/NEW` for every publishable crate. Take the list from `cargo metadata --no-deps` (packages where `publish` is null or non-empty).\n\n## 5. Tag, GitHub release and CLI binaries (each a confirmation gate)\n\n1. **Tag:** previous tags are lightweight. Run `git tag vNEW <bump commit>`, then `git push origin vNEW`.\n2. **GitHub release:**\n   `gh release create vNEW --verify-tag --prerelease --latest=false --title vNEW --notes-file /tmp/vNEW-release-notes.md`.\n   Afterwards, confirm `gh api repos/DioxusLabs/dioxus/releases/latest` still returns the last stable release.\n3. **CLI binaries:** the release must exist first, because the workflow uploads to it:\n   `gh workflow run publish.yml --ref main -f post=vNEW -f channel=vNEW`.\n   It takes about 30 minutes; Intel macOS is the slowest job. When it finishes, the release should have 16 files: `.zip`, `.tar.gz` and `.sha256` for each of 6 targets (Windows has no `.tar.gz`).\n\n## 6. Verify\n\n1. **docs.rs:** check `https://docs.rs/crate/<name>/NEW/status.json` (`doc_status`) for every crate.\n   - `dioxus-cli` always fails because it's binary-only. That's expected.\n   - For any other failure, read the build log at `https://docs.rs/crate/<name>/NEW/builds/<id>`; the first build id is linked from `/builds`. Also check whether the previous version failed the same way.\n2. **binstall:**\n   - Download a `cargo-binstall` release that's at least 7 days old into `/tmp` with `gh release download vX --repo cargo-bins/cargo-binstall --pattern 'cargo-binstall-aarch64-apple-darwin.zip'`.\n   - Run `cargo-binstall dioxus-cli@NEW --root /tmp/<scratch> --no-confirm --no-track --disable-telemetry --strategies crate-meta-data`.\n   - `dx --version` should print `NEW (<tag commit short sha>)`.\n3. **Published crates:**\n   - Run `dx new` with the binstalled `dx`, without the `[patch]` section.\n   - Run `cargo generate-lockfile`, and check that `dioxus*` resolve to `NEW` from the registry.\n   - Run `dx serve` and repeat the browser and hot-reload checks from 1.6.\n\n## 7. Template\n\nThe default `dx new` template is `gh:dioxuslabs/dioxus-template`, on the branch `v<major>.<minor>` (e.g. `v0.8`).\n\n1. Clone it into `/tmp` with `gh repo clone DioxusLabs/dioxus-template /tmp/dioxus-template -- --branch v0.8`, and create a branch.\n2. Bump the old version to `NEW` in:\n   - `common.rhai` (`DIOXUS_DEP_SRC_VAR`)\n   - `Bare-Bones/AGENTS.md`, `Jumpstart/AGENTS.md`, `Workspace/AGENTS.md`\n   - `.github/workflows/main.yml` (the `cargo binstall dioxus-cli@...` line)\n3. Leave `dioxuslabs.com/learn/<ver>/` links alone unless that docs version returns 200.\n4. Test locally the way the template's CI does: for each of Bare-Bones, Jumpstart and Workspace, run `dx new --template . --subtemplate <X> --yes --option default_platform=web --vcs none <dir>` (Workspace doesn't need `default_platform`), then `cargo check --all-features`.\n5. Open a PR against `v0.8`.\n\n## 8. Ecosystem crates (optional)\n\nOnly do this if the user asks. These repos pin Dioxus exactly (`=NEW`), so each one needs a matching release. Their 0.8 work lives on a `0.8` branch (`v<major>.<minor>` without the `v`); `main` stays on 0.7.\n\n| Repo | Crates published | Version |\n|---|---|---|\n| `DioxusLabs/sdk` | `dioxus-sdk` and the `dioxus-sdk-{time,storage,geolocation,notification,sync,util,window}` subcrates | `NEW` (mirrors Dioxus) |\n| `DioxusLabs/dioxus-icons` | `dioxus-icons` | its next minor with Dioxus's prerelease suffix, e.g. `0.2.0-alpha.3` |\n| `DioxusLabs/dioxus-code` | `dioxus-code-macro`, `dioxus-code`, `dioxus-code-editor` (all one version) | same rule as icons |\n| `DioxusLabs/dioxus-components` | nothing; `dx components add` uses the `0.8` branch from git | n/a |\n\nPrerelease versions mean `cargo add` keeps giving 0.7 users the latest stable release.\n\n1. **Look for upgrade work already in progress.** Run `gh pr list --repo <repo> --state open` on each repo. If a contributor has an upgrade branch open, build the release PR on top of their commits rather than starting fresh. Add `Co-authored-by: <name> <email>` (from `git log`) to every commit you make in that repo. Keep their PRs open until yours merge, then close them with a thank-you that links the replacement.\n2. **Release order.** Components depends on the SDK (`dioxus-primitives` → `dioxus-sdk-time`), and its unpublished `preview` crate depends on icons and code. The dioxus-code docsite depends on `dioxus-primitives` from components via git. So:\n   1. Release the SDK and icons: PR to `0.8` (create the branch from `main` if it doesn't exist), merge, publish, tag.\n   2. Open the components PR to `0.8`. Until the crates above are published, point it at their release branches as git dependencies. Merge it.\n   3. Release dioxus-code. Pin the docsite to the components merge commit with `rev = \"<sha>\"`, not `branch = \"0.8\"`. Because both repos pin Dioxus exactly, a branch reference breaks resolution as soon as components moves to the next alpha.\n   4. Follow-up PR in components: switch to exact pins on the published crates (`=NEW`, `=0.x.0-alpha.N`). Check that `Cargo.lock` has no `git+` sources left.\n3. **Each release PR:** bump the Dioxus pins and the crate versions, update the README install lines and any compatibility notes, then run the repo's CI commands locally. CI on these repos usually only runs for PRs into `main`, so it won't run on a PR into `0.8` (components#307 adds version-branch CI there). Expect API fixes from that Dioxus release, such as the keyboard-types 0.8 `Key::Named(NamedKey::…)` change in alpha.3.\n4. **Publish** (confirmation gate). Publish from a clean `git worktree add --detach <dir> <merge commit>`:\n   - Check `git diff --stat <tested head> <merge commit>` is empty (PRs are squash-merged) and the squash commit kept the `Co-authored-by` trailers.\n   - Check `cargo workspaces list` shows only the crates above, with no examples.\n   - Run `publish-with-retry.sh <worktree> <log prefix>`. Use `cargo workspaces` for dioxus-code too: `dioxus-code-macro` dev-depends on `dioxus-code`, and plain `cargo publish` can't handle that cycle.\n5. **Tag and release** (confirmation gates): add a lightweight `v<version>` tag on the merge commit, then run `gh release create ... --prerelease --latest=false`. Above GitHub's generated notes (`target_commitish=0.8`, `previous_tag_name=<last tag>`), add a short intro: the Dioxus version it targets, the install line, a note that 0.7 users aren't affected, and credit for the PRs it builds on. The generated list only credits whoever opened the release PR.\n6. **Verify:**\n   - every version returns 200 from the crates.io API, and `max_stable_version` is unchanged\n   - a scratch project that depends on Dioxus `NEW` plus the new crates resolves everything from the registry, with one `dioxus`, and passes `cargo check`\n   - docs.rs builds. `dioxus-sdk` and `dioxus-sdk-window` fail because `listen` and `get_theme_platform` are defined twice under all features (0.7.0 failed the same way). Large crates like `dioxus-icons` take a few minutes to show as built.\n7. **Gotchas:**\n   - The components `preview` and dioxus-code docsite web builds compile C to wasm32 (`arborium-sysroot`), which Apple clang can't do. Without an LLVM clang, check those for desktop instead.\n   - None of these repos delete merged branches automatically. Delete the temporary release branches only once nothing references them, including the docsite's components rev.\n\n## 9. Wrap up\n\nReport back:\n\n- links to the crates.io release, the GitHub release, the CLI workflow run and any PRs\n- the docs.rs results\n- anything you didn't test (desktop, mobile, fullstack, Windows/Linux)\n- follow-ups: owner invites, open PRs, letting VIP projects like Freya know, and the Discord release-notes channel\n\nDelete all `/tmp` scratch files and worktrees you created.\n","AGENTS.md":"# Dioxus Agent Guide\n\nDioxus is a cross-platform UI framework for Rust, similar to React. It compiles to web (WASM), desktop (webview), mobile (iOS/Android), and native (GPU-rendered).\n\n## Quick Overview\n\n- **Language**: Rust (stable toolchain)\n- **UI Model**: React-like with VirtualDOM, components, hooks, signals\n- **Syntax**: JSX-like `rsx!` macro for declaring UI\n- **Platforms**: Web, Desktop (Windows/macOS/Linux), Mobile, Native, LiveView (server-rendered)\n\n## Workspace Structure\n\n```\npackages/\n├── dioxus/           # Main re-export crate users depend on\n├── core/             # VirtualDOM, components, diffing, scheduling\n├── rsx/              # RSX macro parsing and code generation\n├── rsx-hotreload/    # Template diffing for hot-reload\n├── signals/          # Reactive state (Signal, Memo, Store)\n├── hooks/            # Built-in hooks (use_signal, use_effect, etc.)\n├── router/           # Type-safe routing with #[derive(Routable)]\n├── fullstack/        # SSR, hydration, #[server] functions\n├── cli/              # `dx` build tool, dev server, bundling\n├── web/              # WASM renderer\n├── desktop/          # Wry/Tao webview renderer\n├── native/           # Blitz/Vello GPU renderer\n├── liveview/         # WebSocket streaming renderer\n├── manganis/         # asset!() macro for compile-time assets\n├── subsecond/        # Hot-patching system (jump table indirection)\n├── devtools/         # Dev server communication protocol\n├── interpreter/      # Sledgehammer JS for DOM mutations\n└── wasm-split/       # WASM code splitting\n```\n\n## Architecture Documentation\n\nFor deeper understanding, see `notes/architecture/`:\n\n| When working on...                         | Read...            |\n| ------------------------------------------ | ------------------ |\n| VirtualDOM, components, diffing, events    | `01-CORE.md`       |\n| CLI, build system, bundling, dev server    | `02-CLI.md`        |\n| RSX macro, parsing, formatting             | `03-RSX.md`        |\n| Signals, state management, reactivity      | `04-SIGNALS.md`    |\n| Server functions, SSR, hydration           | `05-FULLSTACK.md`  |\n| Web/desktop/native/liveview renderers      | `06-RENDERERS.md`  |\n| Hot-reload, hot-patching, devtools         | `07-HOTRELOAD.md`  |\n| Asset macro, manganis, const serialization | `08-ASSETS.md`     |\n| Router, navigation, nested routes          | `09-ROUTER.md`     |\n| WASM code splitting                        | `10-WASM-SPLIT.md` |\n\n## Key Concepts\n\n- **VirtualDOM**: Tree of `VNode` with templates, dynamic nodes, and attributes\n- **Signals**: Copy-able reactive primitives via generational-box (generation-based validity)\n- **WriteMutations**: Trait that renderers implement to apply DOM changes\n- **RSX**: Proc macro that compiles JSX-like syntax to `VNode` construction\n- **Server Functions**: `#[server]` macro generates client RPC stubs and server handlers\n- **Subsecond**: Hot-patches Rust code via jump table indirection (no memory modification)\n- **Manganis**: `asset!(\"/main.css\")` macro for including assets by embedding data via linker symbols\n\n## Common Patterns\n\n**Component definition**:\n```rust\n#[component]\nfn MyComponent(name: String) -> Element {\n    let mut count = use_signal(|| 0);\n    rsx! {\n        button { onclick: move |_| count += 1, \"{name}: {count}\" }\n    }\n}\n```\n\n## Notes for Agents\n\n1. The `dioxus` crate re-exports from other crates - most implementation is in `packages/core`, `packages/signals`, etc.\n2. RSX macro expansion happens in `packages/rsx` - look there for syntax questions\n3. Each renderer implements `WriteMutations` differently - see `06-RENDERERS.md`\n4. Hot-reload has two systems: RSX template diffing (fast) and Subsecond code patching (full Rust)\n5. Assets use link sections and binary patching - the `asset!()` macro creates symbols the CLI processes\n","packages/autofmt/README.md":"# dioxus-autofmt\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-autofmt.svg\n[crates-url]: https://crates.io/crates/dioxus-autofmt\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-autofmt/latest/dioxus_autofmt) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-autofmt` provides a pretty printer for the `rsx` syntax tree.\n\nThis is done manually with a via set of formatting rules. The output is not guaranteed to be stable between minor versions of the crate as we might tweak the output.\n\n`dioxus-autofmt` provides an API to perform precision edits as well as just spit out a block of formatted RSX from any RSX syntax tree. This is used by the `rsx-rosetta` crate which can accept various input languages and output valid RSX.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/cli-config/README.md":"# dioxus-cli-config\n\nA crate that provides key/value names and types for configuring Dioxus applications at runtime.\n\nThis crate exists for us to very cleanly define the exact fields we want to pass down to Dioxus applications at runtime but without exposing the entire config object.\n\nThis leads to faster compile times, smaller binaries, and a clearer distinction between the config and the application.\n","packages/cli-harnesses/README.md":"# Test harnesses\n\nThis folder contains a series of CLI harnesses that represent common structures of dioxus apps.\n\nWe test these projects as a form of smoke testing to ensure our argument resolution works properly.\n\nThese projects might not be functionally useful, but they do have interesting properties that the CLI tests.\n\nThe tests for the CLI are contained within the CLI itself.\n\n## This Folder\n\nThe items in this folder are procedurally generated by tests in the CLI crate. We will delete EVERYTHING that ends up here.\n\n## How platform resolution works\n\nDetermine which features, triple, profile, etc to pass to the build.\n\nMost of the time, users should use `dx serve --<platform>` where the platform name directly\ncorresponds to the feature in their cargo.toml. So,\n- `dx serve --web` will enable the `web` feature\n- `dx serve --mobile` will enable the `mobile` feature\n- `dx serve --desktop` will enable the `desktop` feature\n\nIn this case, we set default-features to false and then add back the default features that\naren't renderers, and then add the feature for the given renderer (i.e., web/desktop/mobile).\nWe call this \"no-default-features-stripped.\"\n\nThere are a few cases where the user doesn't need to pass a platform.\n- they selected one via `dioxus = { features = [\"web\"] }`\n- they have a single platform in their default features `default = [\"web\"]`\n- there is only a single non-server renderer as a feature `web = [\"dioxus/web\"], server = [\"dioxus/server\"]`\n- they compose the super triple via triple + bundleformat + features\n\nNote that we only use the names of the features to correspond with the platform.\nPlatforms are \"super triples\", meaning they contain information about\n- bundle format\n- target triple\n- how to serve\n- enabled features\n\nBy default, the --platform presets correspond to:\n- web:          bundle(web), triple(wasm32), serve(http-serve), features(\"web\")\n- desktop:      alias to mac/win/linux\n- mac:          bundle(mac), triple(host), serve(appbundle-open), features(\"desktop\")\n- windows:      bundle(exefolder), triple(host), serve(run-exe), features(\"desktop\")\n- linux:        bundle(appimage), triple(host), serve(run-exe), features(\"desktop\")\n- ios:          bundle(ios), triple(arm64-apple-ios), serve(ios-simulator/xcrun), features(\"mobile\")\n- android:      bundle(android), triple(arm64-apple-ios), serve(android-emulator/adb), features(\"mobile\")\n- server:       bundle(server), triple(host), serve(run-exe), features(\"server\")\n- liveview:     bundle(liveview), triple(host), serve(run-exe), features(\"liveview\")\n- unknown:      <auto or default to desktop>\n\nFullstack usage is inferred from the presence of the fullstack feature or --fullstack.\n\n## List of harnesses (brainstorming)\n\n- app that doesn't use dioxus\n- simple app where the renderer is used as an explicit feature\n- simple app, same as above, but with fullstack enabled\n  - since no `server` feature is present, we don't run the server\n- simple app, same as above, but with a `server` feature\n  - server should launch and take precedence over the client\n- simple server-only app\n  - IE you're doing SSR with dioxus\n","packages/cli/README.md":"<div>\n  <h1>📦✨ Dioxus CLI</h1>\n  <p><strong>Tooling to supercharge Dioxus projects</strong></p>\n</div>\n\nThe **dioxus-cli** (inspired by wasm-pack and webpack) is a tool for getting Dioxus projects up and running.\nIt handles building, bundling, development and publishing to simplify development.\n\n## Installation\n\n### Install the stable version (recommended)\n\n```shell\ncargo install dioxus-cli\n```\n\n### Install the latest development build through git\n\nTo get the latest bug fixes and features, you can install the development version from git.\nHowever, this is not fully tested.\nThat means you're probably going to have more bugs despite having the latest bug fixes.\n\n```shell\ncargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli\n```\n\nThis will download the CLI from the master branch,\nand install it in Cargo's global binary directory (`~/.cargo/bin/` by default).\n\n### Install from local folder\nNote: The CLI will fail to build projects in debug profile. This is currently under investigation.\n```shell\ncargo install --path .\n```\n\n## Get started\n\nUse `dx new` to initialize a new Dioxus project.\nIt will be cloned from the [dioxus-template](https://github.com/DioxusLabs/dioxus-template) repository.\n\nAlternatively, you can specify the template path:\n\n```shell\ndx new --template gh:dioxuslabs/dioxus-template\n```\n\nRun `dx --help` for a list of all the available commands.\nFurthermore, you can run `dx <command> --help` to get help with a specific command.\n\n## Dioxus config file\n\nYou can use the `Dioxus.toml` file for further configuration.\nSome fields are mandatory, but the CLI tool will tell you which ones are missing.\nYou can create a `Dioxus.toml` with all fields already set using `dx config init project-name`,\nor you can use this bare-bones template (only mandatory fields) to get started:\n\n```toml\n[application]\nname = \"project-name\"\n# Currently supported platforms: web, desktop\ndefault_platform = \"web\"\n\n# Optional: enable copying from a static directory (e.g. \"public\")\npublic_dir = \"public\"\n\n[web.app]\ntitle = \"Hello\"\n\n[web.resource.dev]\n```\n","packages/cli/assets/android/prebuilt/README.md":"This folder contains prebuilt versions of android crates to make cross-compiling easier.\n\nWe use the official prebuilds distributed by google.\n\nYou can find the full set of prebuilt libraries that google distributes here:\n\nhttps://maven.google.com/web/index.html?q=com.android.ndk.thirdparty#com.android.ndk.thirdparty\n\nThe version included in `dx` is downloaded from here:\n\nhttps://maven.google.com/web/index.html?q=com.android.ndk.thirdparty#com.android.ndk.thirdparty:openssl:1.1.1q-beta-1\n\nThe SHA of the `.aar` file from google and `dx` are different. The Rust openssl-sys crate expects libcrypto and libssl to be in the same folder, but the `.aar` that google distributes splits the two libraries into two different folders. I (jon) have simply merged the folders together and then re-packed the folder as a `.tar.gz`.\n","packages/config-macro/README.md":"# dioxus-config-macro\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-config-macro.svg\n[crates-url]: https://crates.io/crates/dioxus-config-macro\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guide](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-config-macro/latest/dioxus_config_macro/) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-config-macro` provides a handful of helpful macros to make it easier to work with optional sections of the launch builder.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/config-macros/README.md":"# Dioxus Config Macros\n\nThese macros are used internally by codegen and are not intended for general use.\n\nDioxus will export its feature flags into this crate, allowing downstream codegen to use them under the \"dioxus\" namespace.\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/const-serialize/README.md":"A rust serialization library that works in const with complex(ish) types like enums, nested structs and arrays. Const rust does not have an allocator, so this library cannot work in a cross architecture environment with Vecs, slices or strings.\n\n```rust\nuse const_serialize::{deserialize_const, serialize_const, serialize_eq, ConstVec, SerializeConst};\n#[derive(Clone, Copy, Debug, PartialEq, SerializeConst)]\nstruct Struct {\n    a: u32,\n    b: u8,\n    c: u32,\n    d: Enum,\n}\n\n#[derive(Clone, Copy, Debug, PartialEq, SerializeConst)]\n#[repr(C, u8)]\nenum Enum {\n    A { one: u32, two: u16 },\n    B { one: u8, two: u16 } = 15,\n}\n\nconst {\n    let data = [Struct {\n        a: 0x11111111,\n        b: 0x22,\n        c: 0x33333333,\n        d: Enum::A {\n            one: 0x44444444,\n            two: 0x5555,\n        },\n    }; 3];\n    let mut buf = ConstVec::new();\n    buf = serialize_const(&data, buf);\n    let buf = buf.as_ref();\n    let (buf, deserialized) = match deserialize_const!([Struct; 3], buf) {\n        Some(data) => data,\n        None => panic!(\"data mismatch\"),\n    };\n    if !serialize_eq(&data, &deserialized) {\n        panic!(\"data mismatch\");\n    }\n}\n```\n\n## How it works\n\n`const-serialize` relies heavily on well defined layouts for the types you want to serialize. The serialization format is the linear sequence of unaligned bytes stored in the order of the fields, items or variants of the type. Numbers are stored in little endian order.\n\nIn order to support complex nested types, serialization is done using a trait. Since functions in traits cannot be const, `const-serialize` uses a macro to generate constant associated items that describe the memory layout of the type. That layout is then used to read all of the bytes in the type into the serialized buffer.\n\nThe deserialization is done in a similar way, but the layout is used to write the bytes from the serialized buffer into the type.\n\nThe rust [nomicon](https://doc.rust-lang.org/nomicon/data.html) defines the memory layout of different types. It is used as a reference for the layout of the types implemented in `const-serialize`.\n\n## Limitations\n\n- Only constant sized types are supported. This means that you can't serialize a type like `Vec<T>`. These types are difficult to create in const contexts in general\n- Only types with a well defined memory layout are supported (see <https://github.com/rust-lang/rfcs/pull/3727>). `repr(Rust)` enums don't have a well defined layout, so they are not supported. `repr(C, u8)` enums can be used instead\n- Const rust does not support mutable references or points, so this crate leans heavily on functional data structures for data processing.\n","packages/core-macro/README.md":"# dioxus-core-macro\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-core-macro.svg\n[crates-url]: https://crates.io/crates/dioxus-core-macro\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-core-macro/latest/dioxus_core_macro) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-core-macro` provides a handful of helpful macros used by the `dioxus` crate. These include:\n\n- The `rsx!` macro that underpins templates and node creation.\n- The `component` attribute macro denotes a function as a Dioxus component. Currently, this:\n  - Transforms function arguments into an auto-derived struct.\n  - Ensures that your component name uses PascalCase.\n  - Probably more stuff in the future. This macro allows us to have a way of distinguishing functions and components, which can be quite handy.\n- The `format_args_f` macro which allows f-string formatting with support for expressions.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/core-macro/docs/component.md":"# Component\n\nThe component macro turns a function with arguments that are [`Clone`] and [`PartialEq`] into a component. This is the recommended way of creating most components. If you want more fine grained control over how the overall prop struct implements the `Properties` trait, you can use an explicit props struct with the [`Props`] derive macro instead.\n\n## Arguments\n\n- `no_case_check` - Doesn't enforce `PascalCase` on your component names.\n  **This will be removed/deprecated in a future update in favor of a more complete Clippy-backed linting system.**\n  The reasoning behind this is that Clippy allows more robust and powerful lints, whereas\n  macros are extremely limited.\n\n## Features\n\nThis attribute:\n\n- Enforces that your component uses `PascalCase` or `snake_case` with at least one underscore.\n- Automatically creates a prop struct for your component if the function has arguments.\n- Verifies the function signature is valid as a component.\n\n## Examples\n\n- Without props:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn GreetBob() -> Element {\n    rsx! { \"hello, bob\" }\n}\n```\n\n- With props:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn GreetBob(bob: String) -> Element {\n    rsx! { \"hello, {bob}\" }\n}\n```\n\n## Prop Modifiers\n\nYou can use the `#[props()]` attribute to modify the behavior of the props the component macro creates:\n\n- [`#[props(default)]`](#default-props) - Makes the field optional in the component and uses the default value if it is not set when creating the component.\n- [`#[props(!optional)]`](#optional-props) - Makes a field with the type `Option<T>` required.\n- [`#[props(into)]`](#converting-props) - Converts a field into the correct type by using the [`Into`] trait.\n- [`#[props(extends = GlobalAttributes)]`](#extending-elements) - Extends the props with all the attributes from an element or the global element attributes.\n\nProps also act slightly differently when used with:\n\n- [`Option<T>`](#optional-props) - The field is automatically optional with a default value of `None`.\n- [`ReadSignal<T>`](#reactive-props) - The props macro will automatically convert `T` into `ReadSignal<T>` when it is passed as a prop.\n- [`String`](#formatted-props) - The props macro will accept formatted strings for any prop field with the type `String`.\n- [`children`](#children-props) - The props macro will accept child elements if you include the `children` prop.\n\n### Default Props\n\nThe `default` attribute lets you define a default value for a field if it isn't set when creating the component\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // The default attributes makes your field optional in the component and uses the default value if it is not set.\n    #[props(default)]\n    text: String,\n    // You can also set an explicit default value instead of using the `Default` implementation.\n    #[props(default = \"red\".to_string())]\n    color: String,\n) -> Element {\n    rsx! {\n        button {\n            color: color,\n            \"{text}\"\n        }\n    }\n}\n\nrsx! {\n    // You can skip setting props that have a default value when you use the component.\n    Button {}\n};\n```\n\n### Optional Props\n\nWhen defining a component, you may want to make a prop optional without defining an explicit default value. Any fields with the type `Option<T>` are automatically optional with a default value of `None`.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // Since the `text` field is optional, you don't need to set it when you use the component.\n    text: Option<String>,\n) -> Element {\n    rsx! {\n        button { {text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {}\n};\n```\n\nIf you want to make your `Option<T>` field required, you can use the `!optional` attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // You can use the `!optional` attribute on a field with the type `Option<T>` to make it required.\n    #[props(!optional)]\n    text: Option<String>,\n) -> Element {\n    rsx! {\n        button { {text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {\n        text: None\n    }\n};\n```\n\n### Converting Props\n\nYou can automatically convert a field into the correct type by using the `into` attribute. Any type you pass into the field will be converted with the [`Into`] trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // You can use the `into` attribute on a field to convert types you pass in with the Into trait.\n    #[props(into)]\n    number: u64,\n) -> Element {\n    rsx! {\n        button { \"{number}\" }\n    }\n}\n\nrsx! {\n    Button {\n        // Because we used the into attribute, we can pass in any type that implements Into<u64>\n        number: 10u8\n    }\n};\n```\n\n### Formatted Props\n\nYou can use formatted strings in attributes just like you would in an element. Any prop field with the type `String` can accept a formatted string:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(text: String,) -> Element {\n    rsx! {\n        button { \"{text}\" }\n    }\n}\n\nlet name = \"Bob\";\nrsx! {\n    Button {\n        // You can use formatted strings in props that accept String just like you would in an element.\n        text: \"Hello {name}!\"\n    }\n};\n```\n\n### Children Props\n\nRather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The \"magic\" children prop lets you achieve this:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Clickable(\n    href: String,\n    children: Element,\n) -> Element {\n    rsx! {\n        a {\n            href: \"{href}\",\n            class: \"fancy-button\",\n            {children}\n        }\n    }\n}\n```\n\nThis makes providing children to the component much simpler: simply put the RSX inside the {} brackets:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[component]\n# fn Clickable(\n#     href: String,\n#     children: Element,\n# ) -> Element {\n#     rsx! {\n#         a {\n#             href: \"{href}\",\n#             class: \"fancy-button\",\n#             {children}\n#         }\n#     }\n# }\nrsx! {\n    Clickable {\n        href: \"https://www.youtube.com/watch?v=C-M2hs3sXGo\",\n        \"How to \"\n        i { \"not\" }\n        \" be seen\"\n    }\n};\n```\n\n### Reactive Props\n\nIn dioxus, when a prop changes, the component will rerun with the new value to update the UI. For example, if count changes from 0 to 1, this component will rerun and update the UI to show \"Count: 1\":\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    rsx! {\n        div {\n            \"Count: {count}\"\n        }\n    }\n}\n```\n\nGenerally, just rerunning the component is enough to update the UI. However, if you use your prop inside reactive hooks like `use_memo` or `use_resource`, you may also want to restart those hooks when the prop changes:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can use a memo to calculate the doubled count. Since this memo will only be created the first time the component is run and `count` is not reactive, it will never update when `count` changes.\n    let doubled_count = use_memo(move || count * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\nTo fix this issue you can either:\n\n1. Make the prop reactive by wrapping it in `ReadSignal` (recommended):\n\n`ReadSignal` is a `Copy` reactive value. Dioxus will automatically convert any value into a `ReadSignal` when it is passed as a prop.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: ReadSignal<i32>) -> Element {\n    // Since we made count reactive, the memo will automatically rerun when count changes.\n    let doubled_count = use_memo(move || count() * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n2. Explicitly add the prop as a dependency to the reactive hook with [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/macro.use_reactive.html):\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can add the count prop as an explicit dependency to every reactive hook that uses it with use_reactive.\n    // The use_reactive macro takes a closure with explicit dependencies as its argument.\n    let doubled_count = use_memo(use_reactive!(|count| count * 2));\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n### Extending Elements\n\nThe `extends` attribute lets you extend your props with all the attributes from an element or the global element attributes.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Card(\n    // You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.\n    #[props(extends = GlobalAttributes)]\n    attributes: Vec<Attribute>,\n) -> Element {\n    rsx! {\n        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.\n        div { ..attributes, \"card\" }\n    }\n}\n\nrsx! {\n    // Since we extend global attributes, you can use any attribute that would normally appear on elements.\n    Card {\n        width: \"10px\",\n        height: \"10px\",\n        color: \"red\",\n    }\n};\n```\n\nTo extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    #[props(extends = GlobalAttributes, extends = button)]\n    attributes: Vec<Attribute>,\n) -> Element {\n    rsx! {\n        button { ..attributes, \"button\" }\n    }\n}\n\nrsx! {\n    Button {\n        // A global attribute\n        width: \"10px\",\n        // A button specific attribute\n        disabled: true,\n    }\n};\n```\n\nNote that extending from multiple elements will only work if the elements don't have conflicting attributes.\n","packages/core-macro/docs/props.md":"# Props\n\nThe props derive macro allows you to define what props your component accepts and how to accept those props. Every component must either accept no arguments or accept a single argument that implements the `Properties` trait.\n\n> Note: You should generally prefer using the `#[component]` macro instead of the `#[derive(Props)]` macro with explicit props. The `#[component]` macro will automatically generate the props struct for you and perform extra checks to ensure that your component is valid.\n\n## Example\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// The text of the button\n    text: String,\n\n    /// The color of the button\n    color: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button {\n            color: props.color,\n            \"{props.text}\"\n        }\n    }\n}\n\nrsx! {\n    // Any fields you defined on the props struct will be turned into props for the component.\n    Button {\n        text: \"Click me!\",\n        color: \"red\",\n    }\n};\n```\n\n## Prop Modifiers\n\nYou can use the `#[props()]` attribute to modify the behavior of the props derive macro:\n\n- [`#[props(default)]`](#default-props) - Makes the field optional in the component and uses the default value if it is not set when creating the component.\n- [`#[props(!optional)]`](#optional-props) - Makes a field with the type `Option<T>` required.\n- [`#[props(into)]`](#converting-props) - Converts a field into the correct type by using the [`Into`] trait.\n- [`#[props(extends = GlobalAttributes)]`](#extending-elements) - Extends the props with all the attributes from an element or the global element attributes.\n\nProps also act slightly differently when used with:\n\n- [`Option<T>`](#optional-props) - The field is automatically optional with a default value of `None`.\n- [`ReadSignal<T>`](#reactive-props) - The props macro will automatically convert `T` into `ReadSignal<T>` when it is passed as a prop.\n- [`String`](#formatted-props) - The props macro will accept formatted strings for any prop field with the type `String`.\n- [`children`](#children-props) - The props macro will accept child elements if you include the `children` prop.\n\n### Default Props\n\nThe `default` attribute lets you define a default value for a field if it isn't set when creating the component\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    // The default attributes makes your field optional in the component and uses the default value if it is not set.\n    #[props(default)]\n    text: String,\n\n    /// You can also set an explicit default value instead of using the `Default` implementation.\n    #[props(default = \"red\".to_string())]\n    color: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button {\n            color: props.color,\n            \"{props.text}\"\n        }\n    }\n}\n\nrsx! {\n    // You can skip setting props that have a default value when you use the component.\n    Button {}\n};\n```\n\n### Optional Props\n\nWhen defining props, you may want to make a prop optional without defining an explicit default value. Any fields with the type `Option<T>` are automatically optional with a default value of `None`.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    // Since the `text` field is optional, you don't need to set it when you use the component.\n    text: Option<String>,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { {props.text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {}\n};\n```\n\nIf you want to make your `Option<T>` field required, you can use the `!optional` attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// You can use the `!optional` attribute on a field with the type `Option<T>` to make it required.\n    #[props(!optional)]\n    text: Option<String>,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { {props.text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {\n        text: None\n    }\n};\n```\n\n### Converting Props\n\nYou can automatically convert a field into the correct type by using the `into` attribute. Any type you pass into the field will be converted with the [`Into`] trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// You can use the `into` attribute on a field to convert types you pass in with the Into trait.\n    #[props(into)]\n    number: u64,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { \"{props.number}\" }\n    }\n}\n\nrsx! {\n    Button {\n        // Because we used the into attribute, we can pass in any type that implements Into<u64>\n        number: 10u8\n    }\n};\n```\n\n### Formatted Props\n\nYou can use formatted strings in attributes just like you would in an element. Any prop field with the type `String` can accept a formatted string:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    text: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { \"{props.text}\" }\n    }\n}\n\nlet name = \"Bob\";\nrsx! {\n    Button {\n        // You can use formatted strings in props that accept String just like you would in an element.\n        text: \"Hello {name}!\"\n    }\n};\n```\n\n### Children Props\n\nRather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The \"magic\" children prop lets you achieve this:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(PartialEq, Clone, Props)]\nstruct ClickableProps {\n    href: String,\n    children: Element,\n}\n\nfn Clickable(props: ClickableProps) -> Element {\n    rsx! {\n        a {\n            href: \"{props.href}\",\n            class: \"fancy-button\",\n            {props.children}\n        }\n    }\n}\n```\n\nThis makes providing children to the component much simpler: simply put the RSX inside the {} brackets:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[derive(PartialEq, Clone, Props)]\n# struct ClickableProps {\n#     href: String,\n#     children: Element,\n# }\n#\n# fn Clickable(props: ClickableProps) -> Element {\n#     rsx! {\n#         a {\n#             href: \"{props.href}\",\n#             class: \"fancy-button\",\n#             {props.children}\n#         }\n#     }\n# }\nrsx! {\n    Clickable {\n        href: \"https://www.youtube.com/watch?v=C-M2hs3sXGo\",\n        \"How to \"\n        i { \"not\" }\n        \" be seen\"\n    }\n};\n```\n\n### Reactive Props\n\nIn dioxus, when a prop changes, the component will rerun with the new value to update the UI. For example, if count changes from 0 to 1, this component will rerun and update the UI to show \"Count: 1\":\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    rsx! {\n        div {\n            \"Count: {count}\"\n        }\n    }\n}\n```\n\nGenerally, just rerunning the component is enough to update the UI. However, if you use your prop inside reactive hooks like `use_memo` or `use_resource`, you may also want to restart those hooks when the prop changes:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can use a memo to calculate the doubled count. Since this memo will only be created the first time the component is run and `count` is not reactive, it will never update when `count` changes.\n    let doubled_count = use_memo(move || count * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\nTo fix this issue you can either:\n\n1. Make the prop reactive by wrapping it in `ReadSignal` (recommended):\n\n`ReadSignal` is a `Copy` reactive value. Dioxus will automatically convert any value into a `ReadSignal` when it is passed as a prop.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: ReadSignal<i32>) -> Element {\n    // Since we made count reactive, the memo will automatically rerun when count changes.\n    let doubled_count = use_memo(move || count() * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n2. Explicitly add the prop as a dependency to the reactive hook with [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/macro.use_reactive.html):\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can add the count prop as an explicit dependency to every reactive hook that uses it with use_reactive.\n    // The use_reactive macro takes a closure with explicit dependencies as its argument.\n    let doubled_count = use_memo(use_reactive!(|count| count * 2));\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n### Extending Elements\n\nThe `extends` attribute lets you extend your props with all the attributes from an element or the global element attributes.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct CardProps {\n    /// You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.\n    #[props(extends = GlobalAttributes)]\n    attributes: Vec<Attribute>,\n}\n\n#[component]\nfn Card(props: CardProps) -> Element {\n    rsx! {\n        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.\n        div { ..props.attributes, \"card\" }\n    }\n}\n\nrsx! {\n    // Since we extend global attributes, you can use any attribute that would normally appear on elements.\n    Card {\n        width: \"10px\",\n        height: \"10px\",\n        color: \"red\",\n    }\n};\n```\n\nTo extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    #[props(extends = GlobalAttributes, extends = button)]\n    attributes: Vec<Attribute>,\n}\n\n#[component]\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { ..props.attributes, \"button\" }\n    }\n}\n\nrsx! {\n    Button {\n        // A global attribute\n        width: \"10px\",\n        // A button specific attribute\n        disabled: true,\n    }\n};\n```\n\nNote that extending from multiple elements will only work if the elements don't have conflicting attributes.\n","packages/core-macro/docs/rsx.md":"The rsx! macro makes it easy for developers to write jsx-style markup in their components.\n\n## Elements\n\nYou can render elements with rsx! with the element name and then braces surrounding the attributes and children.\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div {\n        div {}\n    }\n};\n```\n\n<details>\n<summary>Web Components</summary>\n\nDioxus will automatically render any elements with `-` as a untyped web component:\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div-component {\n        div {}\n    }\n};\n```\n\nYou can wrap your web component in a custom component to add type checking:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn MyDivComponent(width: i64) -> Element {\n    rsx! {\n        div-component {\n            \"width\": width\n        }\n    }\n}\n```\n\n</details>\n\n## Attributes\n\nYou can add attributes to any element inside the braces. Attributes are key-value pairs separated by a colon.\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet width = 100;\nrsx! {\n    div {\n        // Set the class attribute to \"my-class\"\n        class: \"my-class\",\n        // attribute strings are automatically formatted with the format macro\n        width: \"{width}px\",\n    }\n};\n```\n\n### Optional Attributes\n\nYou can include optional attributes with an unterminated if statement as the value of the attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# let first_boolean = true;\n# let second_boolean = false;\nrsx! {\n    div {\n        // Set the class attribute to \"my-class\" if true\n        class: if first_boolean {\n            \"my-class\"\n        },\n        // Set the class attribute to \"my-other-class\" if false\n        class: if second_boolean {\n            \"my-other-class\"\n        }\n    }\n};\n```\n\n### Raw Attributes\n\nDioxus defaults to attributes that are type checked as html. If you want to include an attribute that is not included in the html spec, you can use the `raw` attribute surrounded by quotes:\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div {\n        // Set the data-count attribute to \"1\"\n        \"data-count\": \"1\"\n    }\n};\n```\n\n## Text\n\nYou can include text in your markup as a string literal:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet name = \"World\";\nrsx! {\n    div {\n        \"Hello World\"\n        // Just like attributes, you can included formatted segments inside your text\n        \"Hello {name}\"\n    }\n};\n```\n\n## Components\n\nYou can render any [`macro@crate::component`]s you created inside your markup just like elements. Components must either start with a capital letter or contain a `_` character.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn HelloWorld() -> Element {\n    rsx! { \"hello world!\" }\n}\n\nrsx! {\n    div {\n        HelloWorld {}\n    }\n};\n```\n\n## If statements\n\nYou can use if statements to conditionally render children. The body of the for if statement is parsed as rsx markup:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet first_boolean = true;\nlet second_boolean = false;\nrsx! {\n    if first_boolean {\n        div {\n            \"first\"\n        }\n    }\n\n    if second_boolean {\n        \"second\"\n    }\n};\n```\n\n## For loops\n\nYou can also use for loops to iterate over a collection of items. The body of the for loop is parsed as rsx markup:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet numbers = vec![1, 2, 3];\nrsx! {\n    for number in numbers {\n        div {\n            \"{number}\"\n        }\n    }\n};\n```\n\n## Raw Expressions\n\nYou can include raw expressions inside your markup inside curly braces. Your expression must implement the [`IntoDynNode`](https://docs.rs/dioxus-core/latest/dioxus_core/trait.IntoDynNode.html) trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet name = \"World\";\nrsx! {\n    div {\n        // Text can be converted into a dynamic node in rsx\n        {name}\n    }\n    // Iterators can also be converted into dynamic nodes\n    {(0..10).map(|n| n * n).map(|number| rsx! { div { \"{number}\" } })}\n};\n```\n","packages/core/README.md":"# dioxus-core\n\n`dioxus-core` provides a fast and featureful VirtualDom implementation for Rust.\n\n```rust, no_run\n# tokio::runtime::Runtime::new().unwrap().block_on(async {\nuse dioxus_core::{VirtualDom, Event, Element, Mutations, VNode, ElementId};\n\nlet mut vdom = VirtualDom::new(app);\nlet real_dom = SomeRenderer::new();\n\nloop {\n    tokio::select! {\n        evt = real_dom.event() => {\n            let evt = Event::new(evt, true);\n            vdom.runtime().handle_event(\"onclick\", evt, ElementId::from_raw(0))\n        },\n        _ = vdom.wait_for_work() => {}\n    }\n    vdom.render_immediate(&mut real_dom.apply())\n}\n\n# fn app() -> Element { VNode::empty() }\n# struct SomeRenderer; impl SomeRenderer { fn new() -> SomeRenderer { SomeRenderer } async fn event(&self) -> std::rc::Rc<dyn std::any::Any> { unimplemented!() } fn apply(&self) -> Mutations { Mutations::default() } }\n# });\n```\n\n## Features\n\nA virtualdom is an efficient and flexible tree data structure that allows you to manage state for a graphical user interface. The Dioxus VirtualDom is perhaps the most fully-featured virtualdom implementation in Rust and powers renderers running across Web, Desktop, Mobile, SSR, TUI, LiveView, and more. When you use the Dioxus VirtualDom, you immediately enable users of your renderer to leverage the wide ecosystem of Dioxus components, hooks, and associated tooling.\n\nSome features of `dioxus-core` include:\n\n- UI components are just functions\n- State is provided by hooks\n- Deep integration with async\n- Strong focus on performance\n- Integrated hotreloading support\n- Extensible system for UI elements and their attributes\n\nIf you are just starting, check out the Guides first.\n\n## Understanding the implementation\n\n`dioxus-core` is designed to be a lightweight crate that. It exposes a number of flexible primitives without being deeply concerned about the intracices of state management itself. We provide a number of useful abstractions built on these primitives in the `dioxus-hooks` crate as well as the `dioxus-signals` crate.\n\nThe important abstractions to understand are:\n\n- The [`VirtualDom`]\n- The [`Component`] and its [`Properties`]\n- Handling events\n- Working with async\n- Suspense\n\n## Usage\n\nThe `dioxus` crate exports the `rsx` macro which transforms a helpful, simpler syntax of Rust.\n\nFirst, start with your app:\n\n```rust\n# use dioxus::dioxus_core::{Mutations, VirtualDom};\nuse dioxus::prelude::*;\n\n// First, declare a root component\nfn app() -> Element {\n    rsx! {\n        div { \"hello world\" }\n    }\n}\n\nfn main() {\n    // Next, create a new VirtualDom using this app as the root component.\n    let mut dom = VirtualDom::new(app);\n\n    // The initial render of the dom will generate a stream of edits for the real dom to apply\n    let mutations = dom.rebuild_to_vec();\n}\n```\n\n## Contributing\n\n- Check out the website [section on contributing](https://dioxuslabs.com/learn/0.7/beyond/contributing).\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- [Join](https://discord.gg/XgGxMSkvUM) the discord and ask questions!\n\n<a href=\"https://github.com/dioxuslabs/dioxus/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10\" />\n</a>\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","packages/core/docs/common_spawn_errors.md":"## Compiler errors you may run into while using spawn\n\n<details>\n<summary>async block may outlive the current function, but it borrows `value`, which is owned by the current function</summary>\n\nTasks in Dioxus need only access data that can last for the entire lifetime of the application. That generally means data that is moved into the async block. **If you get this error, you may have forgotten to add `move` to your async block.**\n\nBroken component:\n\n```rust, compile_fail\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    let signal = use_signal(|| 0);\n\n    use_hook(move || {\n        // ❌ The task may run at any point and reads the value of the signal, but the signal is dropped at the end of the function\n        spawn(async {\n            println!(\"{}\", signal());\n        })\n    });\n\n    todo!()\n}\n```\n\nFixed component:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    let signal = use_signal(|| 0);\n\n    use_hook(move || {\n        // ✅ The `move` keyword tells rust it can move the `state` signal into the async block. Since the async block owns the signal state, it can read it even after the function returns\n        spawn(async move {\n            println!(\"{}\", signal());\n        })\n    });\n\n    todo!()\n}\n```\n\n</details>\n\n<details>\n<summary>use of moved value: `value`. move occurs because `value` has type `YourType`, which does not implement the `Copy` trait</summary>\n\nData in rust has a single owner. If you run into this error, you have likely tried to move data that isn't `Copy` into two different async tasks. **You can fix this issue by making your data `Copy` or calling `clone` on it before you move it into the async block.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which cannot be copied implicitly\n#[component]\nfn MyComponent(string: String) -> Element {\n    use_hook(move || {\n        // ❌ We are moving the string into the async task which means we can't access it elsewhere\n        spawn(async move {\n            println!(\"{}\", string);\n        });\n        // ❌ Since we already moved the string, we can't move it into our new task. This will cause a compiler error\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\nYou can fix this issue by either:\n\n- Making your data `Copy` with `ReadSignal`:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts `ReadSignal<String>` which implements `Copy`\n#[component]\nfn MyComponent(string: ReadSignal<String>) -> Element {\n    use_hook(move || {\n        // ✅ Because the `string` signal is `Copy`, we can copy it into the async task while still having access to it elsewhere\n        spawn(async move {\n            println!(\"{}\", string);\n        });\n        // ✅ Since `string` is `Copy`, we can copy it into another async task\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\n- Calling `clone` on your data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which doesn't implement `Copy`\n#[component]\nfn MyComponent(string: String) -> Element {\n    use_hook(move || {\n        // ✅ The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n        spawn({\n            // Clone the string in a new block\n            let string = string.clone();\n            // Then move the cloned string into the async block\n            async move {\n                println!(\"{}\", string);\n            }\n        });\n        // ✅ We don't use the string after this closure, so we can just move it into the closure directly\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\n</details>\n","packages/core/docs/reactivity.md":"# Reactivity\n\nThe core of dioxus relies on the concept of reactivity. Reactivity is the system that updates your app when state changes.\n\nThere are two parts to reactivity: **Reactive Contexts** and **Tracked Values**.\n\n## Reactive Contexts\n\nReactive Contexts keep track of what state different parts of your app rely on. Reactive Context show up throughout dioxus: Component, use_effect, use_memo and use_resource all have their own reactive contexts:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet count = use_signal(|| 0);\n// The reactive context in the memo knows that the memo depends on the count signal\nuse_memo(move || count() * 2);\n```\n\n## Tracked Values\n\nTracked values are values that reactive contexts know about. When you read a tracked value, the reactive context will rerun when the value changes. Signals, Memos, and Resources are all tracked values:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// The count signal is tracked\nlet count = use_signal(|| 0);\n// When you read the count signal, the reactive context subscribes to the count signal\nlet double_count = use_memo(move || count() * 2);\n```\n\n## Reactivity\n\nReactivity is the system that combines reactive context and tracked values to update your app when state changes.\n\nYou can use reactivity to create derived state and update your app when state changes.\n\nYou can derive state from other state with [`use_memo`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_memo.html).\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet mut count = use_signal(|| 0);\nlet double_count = use_memo(move || count() * 2);\n\n// Now whenever we read double_count, we know it is always twice the value of count\nprintln!(\"{}\", double_count); // Prints \"2\"\n\n// After we write to count, the reactive context will rerun and double_count will be updated automatically\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"4\"\n```\n\nYou can also use reactivity to create derive state asynchronously. For example, you can use [`use_resource`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_resource.html) to load data from a server:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet count = use_signal(|| 0);\nlet double_count = use_resource(move || async move {\n    // Start a request to the server. We are reading the value of count to format it into the url\n    // Since we are reading count, this resource will \"subscribe\" to changes to count (when count changes, the resource will rerun)\n    let response = reqwest::get(format!(\"https://myserver.com/doubleme?count={count}\")).await.unwrap();\n    response.text().await.unwrap()\n});\n```\n\n## Non Reactive State\n\nYou can use plain Rust types in Dioxus, but you should be aware that they are not reactive. If you read the non-reactive state, reactive scopes will not subscribe to the state.\n\nYou can make non-reactive state reactive by using the `Signal` type instead of a plain Rust type or by using the `use_reactive` hook.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\n// ❌ Don't create non-reactive state\nlet state = use_hook(|| std::cell::RefCell::new(0));\n\n// Computed values will get out of date if the state they depend on is not reactive\nlet doubled = use_memo(move || *state.borrow() * 2);\n\n// ✅ Create reactive state\nlet state = use_signal(|| 0);\n\n// Computed values will automatically keep up to date with the latest reactive state\nlet doubled = use_memo(move || state() * 2);\n\n// ❌ Don't depend on non-reactive prop state in memos/resources\n#[component]\nfn MyComponent(state: i32) -> Element {\n    let doubled = use_memo(move || state * 2);\n    todo!()\n}\n\n// ✅ Wrap your props in ReadSignal to make them reactive\n#[component]\nfn MyReactiveComponent(state: ReadSignal<i32>) -> Element {\n    let doubled = use_memo(move || state() * 2);\n    todo!()\n}\n```\n\nIf your state can't be reactive, you can use the `use_reactive` hook to make it reactive.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet state = rand::random::<i32>();\n\n// You can make the state reactive by wrapping it in use_reactive\nlet doubled = use_memo(use_reactive!(|state| state * 2));\n```\n","packages/core/tests/README.md":"# Testing of Dioxus core\n\n\nDiffing\n- [x] create elements\n- [x] create text\n- [x] create fragments\n- [x] create empty fragments (placeholders)\n- [x] diff elements\n- [x] diff from element/text to fragment\n- [x] diff from element/text to empty fragment\n- [x] diff to element with children works too\n- [x] replace with works forward\n- [x] replace with works backward\n- [x] un-keyed diffing\n- [x] keyed diffing\n- [x] keyed diffing out of order\n- [x] keyed diffing with prefix/suffix\n- [x] suspended nodes work\n\nLifecycle\n- [] Components mount properly\n- [] Components create new child components\n- [] Replaced components unmount old components and mount new\n- [] Post-render effects are called\n\nShared Context\n- [] Shared context propagates downwards\n- [] unwrapping shared context if it doesn't exist works too\n\nSuspense\n- [] use_suspense generates suspended nodes\n\n\nHooks\n- [] Drop order is maintained\n- [] Shared hook state is okay\n- [] use_hook works\n- [] use_ref works\n- [] use_noderef works\n- [] use_provide_state\n- [] use_consume_state\n\n\nVirtualDOM API\n- [] work\n- [] rebuild_to_vec\n- [] change props\n","packages/depinfo/README.md":"# Rustc Dep-Info Parser\n\nThis crate parses the output of rustc's `.d` dep-info file. It is used by the hot-reloading engine and other libraries to provide higher quality dependency analysis for the user's project.\n\n## License\n\nThis project is licensed under either the [MIT license] or the [Apache-2 License].\n\n[apache-2 license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-APACHE\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional\nterms or conditions.\n","packages/desktop/README.md":"# Dioxus Desktop (webview)\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-desktop.svg\n[crates-url]: https://crates.io/crates/dioxus-desktop\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-desktop/latest/dioxus_desktop) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-desktop` provides a webview-based desktop renderer for the Dioxus VirtualDom.\n\nThis requires that webview is installed on the target system. WebView is installed by default on macOS and iOS devices, but might not come preinstalled on Windows or Linux devices. To fix these issues, follow the [instructions in the guide](guide-url).\n\n[guide-url]: https://dioxuslabs.com/learn/0.7/getting_started\n\n## Features\n\n- Simple, one-line launch for desktop apps\n- Dioxus VirtualDom running on a native thread\n- Full HTML/CSS support via `wry` and `tao`\n- Exposed `window` and `Proxy` types from tao for direct window manipulation\n- Helpful hooks for accessing the window, WebView, and running javascript.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/desktop/src/readme.md":"Dioxus Desktop Renderer\n\nRender the Dioxus VirtualDom using the platform's native WebView implementation.\n\n# Desktop\n\nOne of Dioxus' flagship features is the ability to quickly build a native desktop app that looks and feels the same across platforms. Apps built with Dioxus are typically <5mb in size and use existing system resources, so they won't hog extreme amounts of RAM or memory.\n\nDioxus Desktop is built off Tauri. Right now there aren't any Dioxus abstractions over the menubar, handling, etc, so you'll want to leverage Tauri - mostly [Wry](http://github.com/tauri-apps/wry/) and [Tao](http://github.com/tauri-apps/tao) directly. An upcoming release of Dioxus-Desktop will include components and hooks for notifications, global shortcuts, menubar, etc.\n\n## Getting Set up\n\nGetting Set up with Dioxus-Desktop is quite easy. Make sure you have Rust and Cargo installed, and then create a new project:\n\n```shell\n$ cargo new --bin demo\n$ cd app\n```\n\nAdd Dioxus and the `desktop` renderer feature:\n\n```shell\n$ cargo add dioxus\n$ cargo add dioxus-desktop\n```\n\nEdit your `main.rs`:\n\n```rust, ignore\n// main.rs\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus_desktop::launch(app);\n}\n\nfn app() -> Element {\n    rsx! {\n        div {\n            \"hello world!\"\n        }\n    }\n}\n```\n\nTo configure the webview, menubar, and other important desktop-specific features, checkout out some of the launch configuration in the [API reference](https://docs.rs/dioxus-desktop/).\n\n## Future Steps\n\nMake sure to read the [Dioxus Guide](https://dioxuslabs.com/learn/0.7/) if you already haven't!\n","packages/dioxus/README.md":"<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/splash-header.svg\" style=\"width: 80%; height: auto;\">\n</div>\n\n<div align=\"center\">\n  <!-- Crates version -->\n  <a href=\"https://crates.io/crates/dioxus\">\n    <img src=\"https://img.shields.io/crates/v/dioxus.svg?style=flat-square\"\n    alt=\"Crates.io version\" />\n  </a>\n  <!-- Downloads -->\n  <a href=\"https://crates.io/crates/dioxus\">\n    <img src=\"https://img.shields.io/crates/d/dioxus.svg?style=flat-square\"\n      alt=\"Download\" />\n  </a>\n  <!-- docs -->\n  <a href=\"https://docs.rs/dioxus\">\n    <img src=\"https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square\"\n      alt=\"docs.rs docs\" />\n  </a>\n  <!-- CI -->\n  <a href=\"https://github.com/dioxuslabs/dioxus/actions\">\n    <img src=\"https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\"\n      alt=\"CI status\" />\n  </a>\n  <!-- Awesome -->\n  <a href=\"https://dioxuslabs.com/awesome\">\n    <img src=\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\" alt=\"Awesome Page\" />\n  </a>\n  <!-- Discord -->\n  <a href=\"https://discord.gg/XgGxMSkvUM\">\n    <img src=\"https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\" alt=\"Discord Link\" />\n  </a>\n</div>\n\n<div align=\"center\">\n  <h3>\n    <a href=\"https://dioxuslabs.com\"> Website </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/getting_started\"> Getting Started </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/\"> Book (0.7) </a>\n    <span> | </span>\n    <a href=\"https://github.com/DioxusLabs/dioxus/tree/main/examples\"> Examples </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/tutorial\"> Tutorial </a>\n  </h3>\n</div>\n\n---\n\nBuild for web, desktop, and mobile, and more with a single codebase. Zero-config setup, integrated hot-reloading, and signals-based state management. Add backend functionality with Server Functions and bundle with our CLI.\n\n```rust, ignore\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus::launch(app);\n}\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n\n    rsx! {\n        h1 { \"High-Five counter: {count}\" }\n        button { onclick: move |_| count += 1, \"Up high!\" }\n        button { onclick: move |_| count -= 1, \"Down low!\" }\n    }\n}\n```\n\n## ⭐️ Unique features\n\n- Cross-platform apps in three lines of code (web, desktop, mobile, server, and more)\n- [Ergonomic state management](https://dioxuslabs.com/blog/release-050) combines the best of React, Solid, and Svelte\n- Built-in featureful, type-safe, fullstack web framework\n- Integrated bundler for deploying to the web, macOS, Linux, and Windows\n- Subsecond Rust hot-patching and asset hot-reloading\n- And more! [Take a tour of Dioxus](https://dioxuslabs.com/learn/0.7/).\n\n## Quick start\n\nGrab the Dioxus CLI (`dx`) and spin up a new app in seconds:\n\n```shell\n# install the dioxus-cli\ncurl -fsSL https://dioxuslabs.com/install.sh | bash\n\n# create a new app, following the template instructions\ndx new my-app && cd my-app\n\n# and then serve on `--web, --desktop, --ios, or --android`\ndx serve --desktop\n```\n\n## Guides\n\nThis overview doesn't cover everything. Make sure to check out:\n\n- [Long-form tutorial](https://dioxuslabs.com/learn/0.7/tutorial)\n- [Core concept guide](https://dioxuslabs.com/learn/0.7/essentials/)\n- [Platform-specific guides](https://dioxuslabs.com/learn/0.7/guides/)\n- [Code examples on GitHub](https://github.com/DioxusLabs/dioxus/tree/main/examples)\n\n\n## Instant hot-reloading\n\nWith one command, `dx serve` and your app is running. Edit your markup, styles, and see changes in milliseconds. Use our experimental `dx serve --hotpatch` to update Rust code in real time.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/screenshots/refs/heads/main/blitz/hotreload-video.webp\">\n</div>\n\n## Build Beautiful Apps\n\nDioxus apps are styled with HTML and CSS. Use the built-in TailwindCSS support or load your favorite CSS library. Easily call into native code (objective-c, JNI, Web-Sys) for a perfect native touch.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/ebou2.avif\">\n</div>\n\n## Truly fullstack applications\n\nDioxus deeply integrates with [axum](https://github.com/tokio-rs/axum) to provide powerful fullstack capabilities for both clients and servers. Pick from a wide array of built-in batteries like WebSockets, SSE, Streaming, File Upload/Download, Server-Side-Rendering, Forms, Middleware, and Hot-Reload, or go fully custom and integrate your existing axum backend.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/fullstack-websockets.avif\" width=\"700\">\n</div>\n\n## Experimental Native Renderer\n\nRender using web-sys, webview, server-side-rendering, liveview, or even with our experimental WGPU-based renderer. Embed Dioxus in Bevy, WGPU, or even run on embedded Linux!\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/screenshots/refs/heads/main/blitz/native-blitz-wgpu.webp\">\n</div>\n\n## First-party primitive components\n\nGet started quickly with a complete set of primitives modeled after shadcn/ui and Radix-Primitives.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/primitive-components.avif\" width=\"700\">\n</div>\n\n## First-class Android and iOS support\n\nDioxus is the fastest way to build native mobile apps with Rust. Simply run `dx serve --platform android` and your app is running in an emulator or on device in seconds. Call directly into JNI and Native APIs.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/android_and_ios2.avif\" width=\"500\">\n</div>\n\n## Bundle for web, desktop, and mobile\n\nSimply run `dx bundle` and your app will be built and bundled with maximization optimizations. On the web, take advantage of [`.avif` generation, `.wasm` compression, minification](https://dioxuslabs.com/learn/0.7/tutorial/assets), and more. Build WebApps weighing [less than 50kb](https://github.com/ealmloff/tiny-dioxus/) and desktop/mobile apps less than 5mb.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/bundle.gif\">\n</div>\n\n## Fantastic documentation\n\nWe've put a ton of effort into building clean, readable, and comprehensive documentation. All html elements and listeners are documented with MDN docs, and our Docs runs continuous integration with Dioxus itself to ensure that the docs are always up to date. Check out the [Dioxus website](https://dioxuslabs.com/learn/0.7/) for guides, references, recipes, and more.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/docs.avif\">\n</div>\n\n## Community\n\nDioxus is a community-driven project, with a very active [Discord](https://discord.gg/XgGxMSkvUM) and [GitHub](https://github.com/DioxusLabs/dioxus/issues) community. We're always looking for help, and we're happy to answer questions and help you get started. [Our SDK](https://github.com/DioxusLabs/dioxus-std) is community-run and we even have a [GitHub organization](https://github.com/dioxus-community/) for the best Dioxus crates that receive free upgrades and support.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/dioxus-community.avif\">\n</div>\n\n## License\n\nThis project is licensed under either the [MIT license](https://github.com/DioxusLabs/dioxus/blob/main/LICENSE-MIT) or the [Apache-2 License](https://github.com/DioxusLabs/dioxus/blob/main/LICENSE-APACHE).\n\nUnless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional terms or conditions.\n","packages/document/docs/eval.md":"# Communicating with JavaScript\n\nYou can use the `eval` function to execute JavaScript code in your application with the desktop, mobile, web or liveview renderers. Eval takes a block of JavaScript code (that may be asynchronous) and returns a `Eval` object that you can use to send data to the JavaScript code and receive data from it.\n\n<div class=\"warning\">\n\n## Safety\n\nPlease be careful when executing JavaScript code with `eval`. You should only execute code that you trust. **This applies especially to web targets, where the JavaScript context has access to most, if not all of your application data.** Running untrusted code can lead to a [cross-site scripting](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) (XSS) vulnerability.\n\n</div>\n\n```rust\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| async move {\n                // Eval is a global function you can use anywhere inside Dioxus. It will execute the given JavaScript code.\n                let result = document::eval(r#\"console.log(\"Hello World\");\n                return \"Hello World\";\"#);\n\n                // You can use the `await` keyword to wait for the result of the JavaScript code.\n                println!(\"{:?}\", result.await);\n            },\n            \"Log Hello World\"\n        }\n    }\n}\n```\n\n## Sending data to JavaScript\n\nWhen you execute JavaScript code with `eval`, you can pass data to it by formatting the value into the JavaScript code or sending values to the `Eval` channel.\n\n```rust\nuse dioxus::prelude::*;\n\nfn app() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| {\n                // You can pass initial data to the eval function by formatting it into the JavaScript code.\n                const LOOP_COUNT: usize = 10;\n                let eval = document::eval(&format!(r#\"for(let i = 0; i < {LOOP_COUNT}; i++) {{\n                    // You can receive values asynchronously with the `await dioxus.recv()` method.\n                    let value = await dioxus.recv();\n                    console.log(\"Received\", value);\n                }}\"#));\n\n                // You can send values from rust to the JavaScript code with the `send` method on the object returned by `eval`.\n                for i in 0..LOOP_COUNT {\n                    eval.send(i).unwrap();\n                }\n            },\n            \"Log Count\"\n        }\n    }\n}\n```\n\n## Sending data from JavaScript\n\nThe `Eval` struct also contains methods for receiving values you send from JavaScript. You can use the `dioxus.send()` method to send values to the JavaScript code and the `Eval::recv()` method to receive values from the JavaScript code.\n\n```rust\nuse dioxus::prelude::*;\n\nfn app() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| async move {\n                // You can send values from rust to the JavaScript code by using the `send` method on the object returned by `eval`.\n                let mut eval = document::eval(r#\"for(let i = 0; i < 10; i++) {\n                    // You can send values asynchronously with the `dioxus.send()` method.\n                    dioxus.send(i);\n                }\"#);\n\n                // You can receive values from the JavaScript code with the `recv` method on the object returned by `eval`.\n                for _ in 0..10 {\n                    let value: i32 = eval.recv().await.unwrap();\n                    println!(\"Received {}\", value);\n                }\n            },\n            \"Log Count\"\n        }\n    }\n}\n```\n\n## Interacting with the DOM with Eval\n\nYou can also use the `eval` function to execute JavaScript code that reads or modifies the DOM. If you want to interact with the mounted DOM, you need to use `eval` inside the [`use_effect`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html) hook which runs after the component has been mounted.\n\n```rust\nuse dioxus::prelude::*;\n\nconst SCRIPT: &str = r#\"\n    let element = document.getElementById(\"my-element\");\n    element.innerHTML = \"Hello World\";\n    return element.getAttribute(\"data-count\");\n\"#;\n\nfn app() -> Element {\n    // ❌ You shouldn't run eval in the body of a component. This will run before the component has been mounted\n    // document::eval(SCRIPT);\n\n    // ✅ You should run eval inside an effect or event. This will run after the component has been mounted\n    use_effect(move || {\n        spawn(async {\n            let count = document::eval(SCRIPT).await;\n            println!(\"Count is {:?}\", count);\n        });\n    });\n\n\n    rsx! {\n        div {\n            id: \"my-element\",\n            \"data-count\": \"123\",\n        }\n    }\n}\n```\n","packages/document/docs/head.md":"# Modifying the Head\n\nDioxus includes a series of components that render into the head of the page:\n\n- [Title]\n- [Meta]\n- [document::Link](crate::Link)\n- [Script]\n- [Style]\n\nEach of these components can be used to add extra information to the head of the page. For example, you can use the `Title` component to set the title of the page, or the `Meta` component to add extra metadata to the page.\n\n## Limitations\n\nComponents that render into the head of the page do have a few key limitations:\n\n- With the exception of the `Title` component, all components that render into the head cannot be modified after the first time they are rendered.\n- Components that render into the head will not be removed even after the component is removed from the tree.\n- Components that render into the head do not have a guaranteed ordering; thus, components should ideally not be order dependent, since they may not appear in the head in the order they are defined.\n\n## Example\n\n```rust, no_run\n# use dioxus::prelude::*;\nfn RedirectToDioxusHomepageWithoutJS() -> Element {\n    rsx! {\n        // You can use the meta component to render a meta tag into the head of the page\n        // This meta tag will redirect the user to the dioxuslabs homepage in 10 seconds\n        document::Meta {\n            http_equiv: \"refresh\",\n            content: \"10;url=https://dioxuslabs.com\",\n        }\n    }\n}\n```\n\n## Overcoming Ordering Issues\n\nSince Dioxus does not guarantee head element ordering, one can use es6 imports as a more predictable way to handle dependencies.\n\n```rust, ignore\n# use dioxus::prelude::*;\nstatic HIGHLIGHT: Asset = asset!(\"/assets/highlight/es/highlight.min.js\");\nstatic RUST: Asset = asset!(\"/assets/highlight/es/languages/rust.min.js\");\nstatic STYLE: Asset = asset!(\"/assets/highlight/styles/atom-one-dark.css\");\n\nfn App() -> Element {\n    rsx! {\n        document::Link { rel: \"stylesheet\", href: STYLE }\n        document::Script {\n            type: \"module\",\n            r#\"import hljs from \"{HIGHLIGHT}\";\n            import rust from \"{RUST}\";\n            hljs.registerLanguage('rust', rust);\n            hljs.highlightAll();\"#\n        }\n        pre {\n            code {\n                class: \"language-rust\",\n                \"fn main() {{\\nprintln!(\\\"Hello, world!\\\");\\n}}\"\n            }\n        }\n    }\n}\n```\n\n## Fullstack Rendering\n\nHead components are compatible with fullstack rendering, but only head components that are rendered in the initial render (before suspense boundaries resolve) will be rendered into the head.\n\nIf you have any important metadata that you want to render into the head, make sure to render it outside of any pending suspense boundaries.\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[component]\n# fn LoadData(children: Element) -> Element { unimplemented!() }\nfn App() -> Element {\n    rsx! {\n        // This will render in SSR\n        document::Title { \"My Page\" }\n        SuspenseBoundary {\n            fallback: |_| rsx! { \"Loading...\" },\n            LoadData {\n                // This will only be rendered on the client after hydration so it may not be visible to search engines\n                document::Meta { name: \"description\", content: \"My Page\" }\n            }\n        }\n    }\n}\n```\n","packages/extension/README.md":"# Dioxus VSCode Extension\n\n![Dioxus Splash](https://github.com/DioxusLabs/dioxus/raw/main/notes/dioxus_splash_8.avif)\n\nThis extension wraps functionality in Dioxus CLI to be used in your editor!\n\n## Features:\n\n- Auto-format RSX\n- Convert HTML to RSX\n- Convert HTML to Dioxus Component\n- Format RSX\n\n## Current commands:\n\n### Convert HTML to RSX\nConverts a selection of html to valid rsx.\n\n### Convert HTML to Dioxus Component\n\nConverts a selection of html to a valid Dioxus component with all SVGs factored out into their own module.\n\n### Format RSX\n\nFormats the current file as RSX.\n\n## Building this extension from source\n- make sure wasm-bindgen is installed to current version (cargo binstall wasm-bindgen-cli)\n- run `npm install`\n- run `npm run vsix`\n\n# Working with Dioxus:\n\nThis overview provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:\n\n- [Getting Started](https://dioxuslabs.com/learn/0.7/getting_started)\n- [Book (0.6)](https://dioxuslabs.com/learn/0.7/)\n\n## Contributing\n- Check out the website [section on contributing](https://dioxuslabs.com/learn/0.7/beyond/contributing).\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- [Join](https://discord.gg/XgGxMSkvUM) the discord and ask questions!\n\n\n<a href=\"https://github.com/dioxuslabs/dioxus/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10\" />\n</a>\n\n## License\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","packages/fullstack-core/README.md":"# Dioxus Fullstack Core\n\nDioxus-fullstack-core provides types, traits, hooks, contexts for [`dioxus-fullstack`](https://crates.io/crates/dioxus-fullstack). Libraries that need to integrate with dioxus-fullstack should rely on this crate instead of the full-fledged renderer for quicker build times.\n\n## Usage\n\nTo start using this crate, you can run the following command:\n\n```bash\ncargo add dioxus-fullstack-hooks\n```\n\nThen you can use hooks like `use_server_future` in your components:\n\n```rust\nuse dioxus::prelude::*;\n\n\nfn App() -> Element {\n    let mut article_id = use_signal(|| 0);\n\n    // `use_server_future` will spawn a task that runs on the server and serializes the result to send to the client.\n    // The future will rerun any time the\n    // Since we bubble up the suspense with `?`, the server will wait for the future to resolve before rendering\n    let article = use_server_future(move || fetch_article(article_id()))?;\n\n    rsx! {\n        \"{article().unwrap()}\"\n    }\n}\n\nasync fn fetch_article(id: u32) -> String {\n    format!(\"Article {}\", id)\n}\n```\n","packages/fullstack-server/README.md":"# Dioxus Fullstack\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-fullstack.svg\n[crates-url]: https://crates.io/crates/dioxus-fullstack\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-fullstack/latest/dioxus_fullstack/) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\nFullstack utilities for the [`Dioxus`](https://dioxuslabs.com) framework.\n\n# Features\n\n- Integrates with the [Axum](./examples/axum-hello-world/src/main.rs) server framework with utilities for serving and rendering Dioxus applications.\n- Server functions allow you to call code on the server from the client as if it were a normal function.\n- Instant RSX Hot reloading with [`dioxus-hot-reload`](https://crates.io/crates/dioxus-hot-reload).\n- Passing root props from the server to the client.\n\n# Example\nQuickly build fullstack Rust apps with axum and dioxus.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus::launch(|| {\n        let mut meaning = use_action(|| get_meaning(\"life the universe and everything\".into()));\n\n        rsx! {\n            h1 { \"Meaning of life: {meaning:?}\" }\n            button { onclick: move |_| meaning.call(), \"Run a server function\" }\n        }\n    });\n}\n\n#[get(\"/meaning/?of\")]\nasync fn get_meaning(of: String) -> Result<Option<u32>> {\n    Ok(of.contains(\"life\").then(|| 42))\n}\n```\n\n## Axum Integration\n\nIf you have an existing Axum router or you need more control over the server, you can use the [`DioxusRouterExt`](https://docs.rs/dioxus-fullstack/0.6.0-alpha.2/dioxus_fullstack/prelude/trait.DioxusRouterExt.html) trait to integrate with your existing Axum router.\n\nFirst, make sure your `axum` dependency is optional and enabled by the server feature flag. Axum cannot be compiled to wasm, so if it is enabled by default, it will cause a compile error:\n\n```toml\n[dependencies]\ndioxus = { version = \"*\", features = [\"fullstack\"] }\naxum = { version = \"0.8.0\", optional = true }\ntokio = { version = \"1.0\", features = [\"full\"], optional = true }\ndioxus-cli-config = { version = \"*\", optional = true }\n\n[features]\nserver = [\"dioxus/server\", \"dep:axum\", \"dep:tokio\", \"dioxus-cli-config\"]\nweb = [\"dioxus/web\"]\n```\n\nThen we can set up dioxus with the axum server:\n\n```rust, no_run\n#![allow(non_snake_case)]\nuse dioxus::prelude::*;\n\n// The entry point for the server\n#[cfg(feature = \"server\")]\n#[tokio::main]\nasync fn main() {\n    use dioxus_server::DioxusRouterExt;\n\n    // Get the address the server should run on. If the CLI is running, the CLI proxies fullstack into the main address\n    // and we use the generated address the CLI gives us\n    let address = dioxus::cli_config::fullstack_address_or_localhost();\n\n    // Set up the axum router\n    let router = axum::Router::new()\n        // You can add a dioxus application to the router with the `serve_dioxus_application` method\n        // This will add a fallback route to the router that will serve your component and server functions\n        .serve_dioxus_application(dioxus_server::ServeConfig::new(), App);\n\n    // Finally, we can launch the server\n    let router = router.into_make_service();\n    let listener = tokio::net::TcpListener::bind(address).await.unwrap();\n    axum::serve(listener, router).await.unwrap();\n}\n\n// For any other platform, we just launch the app\n#[cfg(not(feature = \"server\"))]\nfn main() {\n    dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n    let mut meaning = use_signal(|| None);\n\n    rsx! {\n        h1 { \"Meaning of life: {meaning:?}\" }\n        button {\n            onclick: move |_| async move {\n                if let Ok(data) = get_meaning(\"life the universe and everything\".into()).await {\n                    meaning.set(data);\n                }\n            },\n            \"Run a server function\"\n        }\n    }\n}\n\n#[server]\nasync fn get_meaning(of: String) -> ServerFnResult<Option<u32>> {\n    Ok(of.contains(\"life\").then(|| 42))\n}\n```\n\n## Getting Started\n\nTo get started with full stack Dioxus, check out our [getting started guide](https://dioxuslabs.com/learn/0.7/getting_started), or the [full stack examples](https://github.com/DioxusLabs/dioxus/tree/master/examples).\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/fullstack/README.md":"# dioxus-fullstack\n\n- wraps dioxus-server\n- exposes rpc system\n\n","packages/fuzz/README.md":"# Dioxus VirtualDom Fuzzer\n\nThis crate provides the structured operation model and renderer oracle used by\nthe local `cargo-fuzz` target in `fuzz/`. LibFuzzer handles coverage guidance,\ncorpus scheduling, crash storage, and minimization. Mutatis provides the custom\nstructure-aware mutator for encoded `FuzzCase` values.\n\nThe fuzzer drives Dioxus `VirtualDom` updates with template, dynamic-node,\ndynamic-attribute, fragment, event-listener, portal/multi-renderer, and suspense\noperations. Each case is applied to per-target incremental renderers and checked\nagainst stable re-render and fresh rebuild snapshots.\n\n## Running\n\nInstall `cargo-fuzz` if needed:\n\n```sh\ncargo install cargo-fuzz\n```\n\nRun a short smoke session from this package directory:\n\n```sh\ncargo +nightly fuzz run vdom_ops -- -runs=256\n```\n\nTo replay the package-local corpus from this package directory:\n\n```sh\ncargo +nightly fuzz run vdom_ops fuzz/corpus/vdom_ops -- -runs=256\n```\n\nFrom the workspace root, pass the nested fuzz project explicitly:\n\n```sh\ncargo +nightly fuzz run --fuzz-dir packages/fuzz/fuzz vdom_ops packages/fuzz/fuzz/corpus/vdom_ops -- -runs=256\n```\n\nRun a longer session:\n\n```sh\ncargo +nightly fuzz run vdom_ops\n```\n\nMinimize a crashing input. This still uses `cargo fuzz tmin`, but the\n`vdom_ops` custom mutator detects libFuzzer minimization mode and first runs the\nstructured operation reducer before falling back to Mutatis shrink candidates:\n\n```sh\ncargo +nightly fuzz tmin vdom_ops fuzz/artifacts/vdom_ops/<crash-file>\n```\n\nGenerate coverage using cargo-fuzz's built-in command:\n\n```sh\ncargo +nightly fuzz coverage vdom_ops\n```\n\n## How It Works\n\n`fuzz/fuzz_targets/vdom_ops.rs` decodes the raw libFuzzer bytes as a postcard\nencoded `FuzzCase`. Invalid raw inputs are ignored by the target. The custom\n`fuzz_mutator!` hook decodes the current case (starting from an empty case\nwhen decoding fails), calls this crate's structured mutator, and writes the\nencoded case back to libFuzzer's input buffer.\n\nThe structured mutator (`src/mutator.rs`) combines field-level mutations of\nencoded ops with a table of model-aware op strategies: it replays the ops\nbefore a splice point, summarizes the resulting model, and inserts op\nsequences that target vnodes, fragments, attribute slots, and suspense\nboundaries that actually exist at that point. Strategies whose target\nstructure is missing emit their own prerequisite ops first.\n\nCases are capped at the crate-internal step limit so mutated corpus inputs\ncannot produce unbounded replay work.\n\nCrate layout:\n\n- `src/case.rs` - encoded op stream, replay, failure reporting\n- `src/ops.rs` - the operation grammar and how ops apply to the model\n- `src/model.rs` - the spec tree the generated app renders from\n- `src/mutator.rs` - structure-aware mutation (the op strategy table)\n- `src/reducer.rs` - structured shrinking of failing cases\n- `src/harness.rs` - incremental-vs-fresh renderer oracle and lifecycle checks\n- `src/vdom.rs` - compiles model specs into real `VNode`s/`Template`s\n- `src/warmup.rs` - one-shot scenarios for paths replay cannot reach\n- `src/targeted.rs` - hand-built recipes replayed as tests and exportable as\n  corpus seeds\n\n## Failures\n\nOn divergence, the fuzz target prints an SSR replay trace for the failing\noperation sequence and then panics. LibFuzzer stores the crashing input under\n`fuzz/artifacts/vdom_ops/`; use `cargo fuzz tmin` to minimize it and rerun the\ntarget on the minimized artifact to reproduce the trace.\n","packages/generational-box/README.md":"# Generational Box\n\nGenerational Box is a runtime for Rust that allows any static type to implement `Copy`. It can be combined with a global runtime to create an ergonomic state solution like `dioxus-signals`. This crate doesn't have any `unsafe` code.\n\nThree main types manage state in Generational Box:\n\n- `Store`: Handles recycling generational boxes that have been dropped. Your application should have one store or one store per thread.\n- `Owner`: Handles dropping generational boxes. The owner acts like a runtime lifetime guard. Any states that you create with an owner will be dropped when that owner is dropped.\n- `GenerationalBox`: The core Copy state type. The generational box will be dropped when the owner is dropped.\n\nExample:\n\n```rust\nuse generational_box::{UnsyncStorage, AnyStorage};\n\n// Create an owner for some state for a scope\nlet owner = UnsyncStorage::owner();\n\n// Create some non-copy data, move it into a owner, and work with copy data\nlet data: String = \"hello world\".to_string();\nlet key = owner.insert(data);\n\n// The generational box can be read from and written to like a RefCell\nlet value = key.read();\nassert_eq!(*value, \"hello world\");\n```\n\n## How it works\n\nInternally, `generational-box` creates an arena of generational `RefCell`s that are recycled when the owner is dropped. You can think of the cells as something like `&'static RefCell<Box<dyn Any>>` with a generational check to make recycling a cell easier to debug. Then `GenerationalBox`es are `Copy` because the `&'static` pointer is `Copy`.\n","packages/hooks/README.md":"# Dioxus Hooks\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-hooks.svg\n[crates-url]: https://crates.io/crates/dioxus-hooks\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-hooks/latest/dioxus_hooks) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-hooks` includes some basic useful hooks for Dioxus such as:\n\n- use_signal\n- use_effect\n- use_resource\n- use_memo\n- use_coroutine\n\nUnlike React, none of these hooks are foundational since they all build off the primitive `use_hook`. You can extend these hooks with [custom hooks](https://dioxuslabs.com/learn/0.7/essentials/advanced/custom_hooks) in your own code. If you think they would be useful for the broader community, you can open a PR to add your hook to the [Dioxus Awesome](https://github.com/DioxusLabs/awesome-dioxus) list.\n\n## State Cheat Sheet\n\nIf you aren't sure what hook to use, you can use this cheat sheet to help you decide:\n\n### State Location\n\nDepending on where you need to access the state, you can put your state in one of three places:\n\n| Location                                                                                 | Where can you access the state? | Recommended for Libraries? | Examples                                                                    |\n| ---------------------------------------------------------------------------------------- | ------------------------------- | -------------------------- | --------------------------------------------------------------------------- |\n| [Hooks](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html)             | Any components you pass it to   | ✅                          | `use_signal(\\|\\| 0)`, `use_memo(\\|\\| state() * 2)`                          |\n| [Context](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html) | Any child components            | ✅                          | `use_context_provider(\\|\\| Signal::new(0))`, `use_context::<Signal<i32>>()` |\n| [Global](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Signal.html#method.global)  | Anything in your app            | ❌                          | `Signal::global(\\|\\| 0)`                                                    |\n\n### Derived State\n\nIf you don't have an initial value for your state, you can derive your state from other states with a closure or asynchronous function:\n\n| Hook                                                                                | Reactive (reruns when dependencies change) | Async | Memorizes Output | Example                                                                             |\n| ----------------------------------------------------------------------------------- | ------------------------------------------ | ----- | ---------------- | ----------------------------------------------------------------------------------- |\n| [`use_memo`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_memo.html)         | ✅                                          | ❌     | ✅                | `use_memo(move \\|\\| count() * 2)`                                                   |\n| [`use_resource`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_resource.html) | ✅                                          | ✅     | ❌                | `use_resource(move \\|\\| reqwest::get(format!(\"/users/{user_id}\")))`                 |\n| [`use_future`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_future.html)     | ❌                                          | ✅     | ❌                | `use_future(move \\|\\| println!(\"{:?}\", reqwest::get(format!(\"/users/{user_id}\"))))` |\n\n### Persistent State\n\nThe core hooks library doesn't provide hooks for persistent state, but you can extend the core hooks with hooks from [dioxus-sdk](https://crates.io/crates/dioxus-sdk) and the [dioxus-router](https://crates.io/crates/dioxus-router) to provide persistent state management.\n\n| State                                                                              | Sharable | Example                                                                                           |\n| ---------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------- |\n| [`use_persistent`](https://github.com/DioxusLabs/sdk/tree/master/examples/storage) | ❌        | `use_persistent(\"unique_key\", move \\|\\| initial_state)`                                           |\n| [`Router<Route> {}`](https://dioxuslabs.com/learn/0.7/essentials/router/)          | ✅        | `#[derive(Routable, Clone, PartialEq)] enum Route { #[route(\"/user/:id\")] Homepage { id: u32 } }` |\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/hooks/docs/derived_state.md":"Creates a new Memo. The memo will be run immediately and whenever any signal it reads is written to. Memos can be used to efficiently compute derived data from signals.\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus_signals::*;\n\nfn App() -> Element {\n    let mut count = use_signal(|| 0);\n    // the double memo will always be equal to two times the value of count, even after count changes\n    let double = use_memo(move || count * 2);\n\n    rsx! {\n        \"{double}\"\n        button {\n            // When count changes, the memo will rerun and double will be updated\n            // memos rerun any time you write to a signal they read. They will only rerun values/component that depend on them if the value of the memo changes\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThe closure you pass into memos will be called whenever the state you read inside the memo is written to even if the value hasn't actually changed, but the memo you get will not rerun other parts of your app unless the output changes (`PartialEq` returns false).\n\nLets dig into some examples to see how this works:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut count = use_signal(|| 1);\n// double_count will rerun when state we read inside the memo changes (count)\nlet double_count = use_memo(move || count() * 2);\n\n// memos act a lot like a read only version of a signal. You can read them, display them, and move them around like any other signal\nprintln!(\"{}\", double_count); // Prints \"2\"\n\n// But you can't write to them directly\n// Instead, any time you write to a value the memo reads, the memo will rerun\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"4\"\n\n// Lets create another memo that reads the value of double_count\nlet double_count_plus_one = use_memo(move || double_count() + 1);\n\nprintln!(\"{}\", double_count_plus_one); // Prints \"5\"\n\n// Now if we write to count the double_count memo will rerun\n// If that the output of double_count changes, then it will cause double_count_plus_one to rerun\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"6\"\nprintln!(\"{}\", double_count_plus_one); // Prints \"7\"\n\n// However if the value of double_count doesn't change after a write, then it won't trigger double_count_plus_one to rerun\n// Since we just write the same value, the doubled value is still 6 and we don't rerun double_count_plus_one\n*count.write() = 3;\n\nprintln!(\"{}\", double_count); // Prints \"6\"\nprintln!(\"{}\", double_count_plus_one); // Prints \"7\"\n```\n\n## With non-reactive dependencies\n\nTo add non-reactive dependencies, you can use the [`crate::use_reactive()`] hook.\n\nSignals will automatically be added as dependencies, so you don't need to call this method for them.\n\n```rust\n# use dioxus::prelude::*;\n#[component]\nfn Comp(count: u32) -> Element {\n// Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.\nlet new_count = use_memo(use_reactive((&count,), |(count,)| count + 1));\n    todo!()\n}\n```\n","packages/hooks/docs/moving_state_around.md":"<details>\n<summary>How should I move around state? (Click here to learn more about moving around and sharing state in Dioxus)</summary>\n\nYou will often need to move state around between your components. Dioxus provides three different ways to pass around state:\n\n1. Just pass your values as [props](https://dioxuslabs.com/learn/0.7/essentials/ui/components#component-properties):\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let count = use_signal(|| 0);\n\n    rsx! {\n        IncrementButton {\n            count\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut count: Signal<i32>) -> Element {\n    rsx! {\n        button {\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThis is the most common way to pass state around. It is the most explicit and local to your component. Use this when it isn't overly annoying to pass around a value.\n\n2. Use [use_context](https://dioxuslabs.com/learn/0.7/essentials/basics/context) to pass state from a parent component to all children:\n\n```rust\n# use dioxus::prelude::*;\n#[derive(Clone, Copy)]\nstruct MyState {\n    count: Signal<i32>\n}\n\nfn ParentComponent() -> Element {\n    // Use context provider provides an unique type to all children of this component\n    use_context_provider(|| MyState { count: Signal::new(0) });\n\n    rsx! {\n        // IncrementButton will have access to the count without explicitly passing it through props\n        IncrementButton {}\n    }\n}\n\n#[component]\nfn IncrementButton() -> Element {\n    // Use context gets the value from a parent component\n    let mut count = use_context::<MyState>().count;\n\n    rsx! {\n        button {\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThis is slightly less explicit than passing it as a prop, but it is still local to the component. This is really great if you want state that is global to part of your app. It lets you create multiple global-ish states while still making state different when you reuse components. If I create a new `ParentComponent`, it will have a new `MyState`.\n\n3. Globals let you share state with your whole app with rust statics:\n\n```rust\n# use dioxus::prelude::*;\n// Count will be created the first time you access it with the closure you pass to Signal::global\nstatic COUNT: GlobalSignal<i32> = Signal::global(|| 0);\n\nfn ParentComponent() -> Element {\n    rsx! {\n        IncrementButton {}\n    }\n}\n\nfn IncrementButton() -> Element {\n    rsx! {\n        button {\n            // You don't need to pass anything around or get anything out of the context because COUNT is global\n            onclick: move |_| *COUNT.write() += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nGlobal state can be very ergonomic if your state is truly global, but you shouldn't use it if you need state to be different for different instances of your component. If I create another `IncrementButton` it will use the same `COUNT`. Libraries should generally avoid this to make components more reusable.\n\n> Note: Even though it is in a static, `COUNT` will be different for each app instance (this is generally only reliant on the server).\n\n</details>\n","packages/hooks/docs/rules_of_hooks.md":"## Additional Information that may be useful\n\n<details>\n<summary>This function is a hook which means you need to <b>follow the rules of hooks</b> when you call it. You can click here to learn more about the rules of hooks.</summary>\n\nHooks in dioxus need to run in the same order every time you run the component. To make sure you run hooks in a consistent order, you should follow the rules of hooks:\n\n1. Hooks should only be called from the root of a component or another hook\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    // ✅ You can call hooks from the body of a component\n    let number = use_signal(|| 1);\n    if number() == 1 {\n        // ❌ You can run into issues if you can hooks inside other expressions inside your component\n        // If number changes from 0 to 1, the order of the hooks will be different and your app may panic\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    todo!()\n}\n\nfn use_my_hook() -> Signal<i32> {\n    // ✅ You can call hooks from the body of other hooks\n    let number = use_signal(|| 1);\n    // ❌ Again, creating hooks inside expressions inside other hooks can cause issues\n    if number() == 1 {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    number\n}\n```\n\n2. Hooks should always start with `use_` to make it clear that you need to call them in a consistent order\n\nBecause hooks should only be called from the root of a component or another hook, you shouldn't call hooks inside of:\n\n- ❌ Conditionals\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1);\n    // ❌ Changing the condition will change the order of the hooks\n    if number() == 1 {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    // ❌ Changing the value you are matching will change the order of the hooks\n    match number() {\n        1 => {\n            let string = use_signal(|| \"hello world\".to_string());\n        },\n        _ => (),\n    }\n\n    todo!()\n}\n```\n\n- ❌ Loops\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1);\n    // ❌ Changing the loop will change the order of the hooks\n    for i in 0..number() {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    todo!()\n}\n```\n\n- ❌ Event Handlers\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| {\n                // ❌ Calling the event handler will change the order of the hooks\n                use_signal(|| \"hello world\".to_string());\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n- ❌ Initialization closures in other hooks\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| {\n        // ❌ This closure will only be called when the component is first created. Running the component will change the order of the hooks\n        let string = use_signal(|| \"hello world\".to_string());\n        string()\n    });\n\n    todo!()\n}\n```\n\n<details>\n<summary>Why do hooks need to run in a consistent order?</summary>\n\nHooks need to be run in a consistent order because dioxus stores hooks in a list and uses the order you run hooks in to determine what part of the state belongs to which hook.\n\nLets look at an example component:\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1); // Hook 1\n    let string = use_signal(|| \"hello world\".to_string()); // Hook 2\n    let doubled = use_memo(move || number() * 2); // Hook 3\n\n    todo!()\n}\n```\n\nWhen we first create the component, we run the hooks in the order they are defined and store the state in the component in a list.\n\n```rust, ignore\n[\n    Box::new(1),\n    Box::new(\"hello world\".to_string()),\n    Box::new(2),\n]\n```\n\nNext time we run the component, we return items from the state list instead of creating state again.\n\n```rust, ignore\n[\n    Box::new(1), // Hook 1 returns 1\n    Box::new(\"hello world\".to_string()), // Hook 2 returns \"hello world\"\n    Box::new(2), // Hook 3 returns 2\n]\n```\n\nThe order the hooks are run it must be the same because the order determines which hook gets what state! If you run the hooks in a different order, dioxus may panic because it can't turn the state back into the right type or you may just get the wrong state for your hook.\n\n</details>\n\n</details>\n","packages/hooks/docs/side_effects.md":"Effects are reactive closures that run **after the component has finished rendering**. Effects are useful for things like manually updating the DOM after it is rendered with web-sys or javascript. Or reading a value from the rendered DOM.\n\n**Effects are specifically created for side effects. If you are trying to derive state, use a [memo](#derived-state), or [resource](#derived-async-state) instead.**\n\nIf you are trying to update the DOM, you can use the [`use_effect`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_effect.html) hook to run an effect after the component has finished rendering.\n\n`use_effect` will subscribe to any changes in the signal values it captures effects will always run after first mount and then whenever the signal values change. If the use_effect call was skipped due to an early return, the effect will no longer activate.\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let mut count = use_signal(|| 0);\n\n    use_effect(move || {\n        // Effects are reactive like memos, and resources. If you read a value inside the effect, the effect will rerun when that value changes\n        let count = count.read();\n\n        // You can use the count value to update the DOM manually\n        document::eval(&format!(\n            r#\"var c = document.getElementById(\"dioxus-canvas\");\nvar ctx = c.getContext(\"2d\");\nctx.font = \"30px Arial\";\nctx.fillText(\"{count}\", 10, 50);\"#\n        ));\n    });\n\n    rsx! {\n        button {\n            // When you click the button, count will be incremented and the effect will rerun\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n        canvas {\n            id: \"dioxus-canvas\",\n        }\n    }\n}\n```\n\n## With non-reactive dependencies\n\nTo add non-reactive dependencies, you can use the [`crate::use_reactive()`] hook.\n\nSignals will automatically be added as dependencies, so you don't need to call this method for them.\n\n```rust\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\n\n#[component]\nfn Comp(count: u32) -> Element {\n    // Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.\n    use_effect(use_reactive((&count,), |(count,)| println!(\"Manually manipulate the dom\") ));\n\n    todo!()\n}\n```\n\n## Modifying mounted nodes\n\nOne of the most common use cases for effects is modifying or reading something from the rendered DOM. Dioxus provides access to the DOM with the [`onmounted`](https://docs.rs/dioxus/latest/dioxus/events/fn.onmounted.html) event.\n\nYou can combine `use_effect` with `onmounted` to run an effect with access to a DOM element after all rendering is finished:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let mut current_text = use_signal(String::new);\n    let mut mounted_text_div: Signal<Option<MountedEvent>> = use_signal(|| None);\n    let mut rendered_size = use_signal(String::new);\n\n    use_effect(move || {\n        // If we have mounted the text div, we can read the width of the div\n        if let Some(div) = mounted_text_div() {\n            // We read the current text here inside of the effect instead of the spawn so the effect subscribes to the signal\n            let text = current_text();\n            spawn(async move {\n                let bounding_box = div.get_client_rect().await;\n                rendered_size.set(format!(\"{text} is {bounding_box:?}\"));\n            });\n        }\n    });\n\n    rsx! {\n        input {\n            // When you enter text into the input, the effect will rerun because it subscribes to the current_text signal\n            oninput: move |evt| current_text.set(evt.value()),\n            placeholder: \"Enter text here\",\n            value: \"{current_text}\"\n        }\n        // When text changes, it will change the size of this div\n        div {\n            onmounted: move |element| {\n                mounted_text_div.set(Some(element.clone()));\n            },\n            \"{current_text}\"\n        }\n\n        \"{rendered_size}\"\n    }\n}\n```\n","packages/hooks/docs/use_resource.md":"[`use_resource()`] is a reactive hook that resolves to the result of a future. It will rerun when you write to any signals you read inside the future.\n\n## Example\n\n```rust\nuse dioxus::prelude::*;\n\nasync fn get_weather(location: &WeatherLocation) -> Result<String, String> {\n    Ok(\"Sunny\".to_string())\n}\n\nfn app() -> Element {\n    let country = use_signal(|| WeatherLocation {\n        city: \"Berlin\".to_string(),\n        country: \"Germany\".to_string(),\n        coordinates: (52.5244, 13.4105),\n    });\n\n    // Because the resource's future subscribes to `country` by reading it (`country.read()`),\n    // every time `country` changes the resource's future will run again and thus provide a new value.\n    let current_weather = use_resource(move || async move { get_weather(&country()).await });\n\n    rsx! {\n        // the value of the resource can be polled to\n        // conditionally render elements based off if it's future\n        // finished (Some(Ok(_)), errored Some(Err(_)),\n        // or is still running (None)\n        match &*current_weather.read_unchecked() {\n            Some(Ok(weather)) => rsx! { WeatherElement { weather } },\n            Some(Err(e)) => rsx! { p { \"Loading weather failed, {e}\" } },\n            None =>  rsx! { p { \"Loading...\" } }\n        }\n    }\n}\n\n#[derive(Clone)]\nstruct WeatherLocation {\n    city: String,\n    country: String,\n    coordinates: (f64, f64),\n}\n\n#[component]\nfn WeatherElement(weather: String) -> Element {\n    rsx! { p { \"The weather is {weather}\" } }\n}\n```\n\n## Reactivity\n\n`use_resource` is reactive which just means that it will rerun when you write to any signals you read inside the future. This means that any time you change something the future depends on, the resource automatically knows to rerun. Lets take a look at some examples:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// Create a new count signal\nlet mut count = use_signal(|| 1);\n// Create a new resource that doubles the value of count\nlet double_count = use_resource(move || async move {\n    // Start a request to the server. We are reading the value of count in the format macro\n    // Reading the value of count makes the resource \"subscribe\" to changes to count (when count changes, the resource will rerun)\n    let response = reqwest::get(format!(\"https://myserver.com/doubleme?count={count}\")).await.unwrap();\n    response.text().await.unwrap()\n});\n\n// Resource can be read in a way that is similar to signals, but they have a bit of extra information about the state of the resource future.\n\n// Calling .state() on a resource will return a Signal<UseResourceState> with information about the current status of the resource\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Pending\"\n\n// You can also try to get the last resolved value of the resource with the .value() method\nprintln!(\"{:?}\", double_count.read()); // Prints \"None\"\n\n// Wait for the resource to finish and get the value\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\n// Now if we read the state, we will see that it is done\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\n// And we can get the value\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(2)\"\n\n// Now if we write to count, the resource will rerun\ncount += 1; // count is now 2\n\n// Wait for the resource to finish and get the value\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\n// Now if we read the state, we will see that it is done\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\n// And we can get the value\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(4)\"\n\n// One more case, what happens if we write to the resource while it is in progress?\n// The resource will rerun and the value will be None\ncount += 1; // count is now 3\n\n// If we write to a value the resource subscribes to again, it will cancel the current future and start a new one\ncount += 1; // count is now 4\n\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Stopped\"\nprintln!(\"{:?}\", double_count.read()); // Prints the last resolved value \"Some(4)\"\n\n// After we wait for the resource to finish, we will get the value of only the latest future\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(8)\"\n```\n\n## With non-reactive dependencies\n\n`use_resource` can determine dependencies automatically with any reactive value ([`Signal`]s, [`ReadSignal`]s, [`Memo`]s, [`Resource`]s, etc). If you need to rerun the future when a normal rust value changes, you can add it as a dependency with the [`crate::use_reactive()`] hook:\n\n```rust\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\n#[component]\nfn Comp(count: u32) -> Element {\n    // We manually add the resource to the dependencies list with the `use_reactive` hook\n    // Any time `count` changes, the resource will rerun\n    let new_count = use_resource(use_reactive!(|(count,)| async move {\n        sleep(100).await;\n        count + 1\n    }));\n    rsx! { \"{new_count:?}\" }\n}\n\n// If your value is already reactive, you never need to call `use_reactive` manually\n// Instead of manually adding count to the dependencies list, you can make your prop reactive by wrapping it in `ReadSignal`\n#[component]\nfn ReactiveComp(count: ReadSignal<u32>) -> Element {\n    // Because `count` is reactive, the resource knows to rerun when `count` changes automatically\n    let new_count = use_resource(move || async move {\n        sleep(100).await;\n        count() + 1\n    });\n    rsx! { \"{new_count:?}\" }\n}\n```\n\n## Differences from `use_future` and `use_memo`\n\nJust like [`crate::use_future()`], `use_resource` spawns an async task in a component. However, unlike [`crate::use_future()`], `use_resource` returns the result of the future and will rerun when any dependencies change.\n\nResources return a value based on some existing state just like memos, but unlike memos, resources do not memorize the output of the closure. They will always rerun any parts of your app that read the value of the resource when the future resolves even if the output doesn't change.\n\nSee also: [`Resource`]\n","packages/html/README.md":"# `dioxus-html`: Html (and SVG) Namespace for Dioxus\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-html.svg\n[crates-url]: https://crates.io/crates/dioxus-html\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-html/latest/dioxus_html) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nThe Dioxus `rsx!` macro can accept any compile-time correct namespace on top of NodeFactory. This crate provides the HTML (and SVG) namespaces which get imported in the Dioxus prelude.\n\nHowever, this abstraction enables you to add any namespace of elements, provided they're in scope when rsx! is called. For an example, a UI that is designed for Augmented Reality might use different primitives than HTML:\n\n```rust, ignore\nuse ar_namespace::*;\n\nrsx! {\n    magic_div {\n        magic_header {}\n        magic_paragraph {\n            on_magic_click: move |event| {\n                //\n            }\n        }\n    }\n}\n```\n\nThis typed-builder system makes it possible to provide syntax highlighting, documentation, \"go to definition\" and compile-time correctness for elements and their attributes.\n\n## How it works:\n\nEvery HTML element is generated by the [`define_elements!`] macro. For each element the macro emits a builder whose methods are that element's attributes, so the `rsx!` macro lowers an element to the same typed builder path it uses for components.\n\nAttributes shared by every element — global attributes (`class`, `id`, `hidden`, ...) and event handlers (`onclick`, ...) — are provided through extension traits rather than being redefined on each tag. The built-in ones live under `dioxus_html::extensions` (`GlobalAttributesExtension`, `SvgAttributesExtension`, `EventsExtension`, and per-element extensions). Because each attribute is a typed method that records its serialized name and namespace, attribute creation is guarded behind a compile-time-correct interface.\n\nSince elements are builders generated by a macro rather than items in a fixed namespace, you can define your own elements from user code with the same macro — the built-in HTML vocabulary is defined this way too. See \"How to extend it\" below.\n\n## How to extend it:\n\nWhenever the rsx! macro is called, it relies on the HTML element constructors and extension traits that are in scope. When you enable the `html` feature in dioxus, the prelude imports the built-in HTML namespace for you. You can extend this with your own custom elements by adding a constructor for the tag and extension traits for any typed attributes you want to support.\n\n```rust, ignore\ndioxus::html::define_elements! {\n    #[element(name = \"analytics-panel\")]\n    analyticsPanel {\n        metric,\n        #[attr(name = \"data-region\")]\n        region,\n    }\n}\n\nrsx! {\n    analyticsPanel {\n        class: \"metric-card\",\n        metric: \"conversion-rate\",\n        region: \"north-america\",\n        \"Rendered as <analytics-panel>\"\n    }\n}\n```\n\nSee [`examples/09-reference/custom_element.rs`](../../examples/09-reference/custom_element.rs) for a complete example.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/html/docs/common_event_handler_errors.md":"## Compiler errors you may run into while using event handlers\n\n<details>\n<summary>function requires argument type to outlive `'static`</summary>\n\nEvent handler in Dioxus need only access data that can last for the entire lifetime of the application. That generally means data that is moved into the closure. **If you get this error, you may have forgotten to add `move` to your closure.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// We return an Element which can last as long as the component is on the screen\nfn App() -> Element {\n    // Signals are `Copy` which makes them very easy to move into `'static` closures like event handlers\n    let state = use_signal(|| \"hello world\".to_string());\n\n    rsx! {\n        button {\n            // ❌ Without `move`, rust will try to borrow the `state` signal which fails because the state signal is dropped at the end of the function\n            onclick: |_| {\n                println!(\"You clicked the button! The state is: {state}\");\n            },\n            \"Click me\"\n        }\n    }\n    // The state signal is dropped here, but the event handler still needs to access it\n}\n```\n\nFixed component:\n\n```rust, no_run\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let state = use_signal(|| \"hello world\".to_string());\n\n    rsx! {\n        button {\n            // ✅ The `move` keyword tells rust it can move the `state` signal into the closure. Since the closure owns the signal state, it can read it even after the function returns\n            onclick: move |_| {\n                println!(\"You clicked the button! The state is: {state}\");\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n</details>\n\n<details>\n<summary>use of moved value: `your_value` value used here after move</summary>\n\nData in rust has a single owner. If you run into this error, you have likely tried to move data that isn't `Copy` into two different closures. **You can fix this issue by making your data `Copy` or calling `clone` on it before you move it into the closure.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which cannot be copied implicitly\n#[component]\nfn MyComponent(string: String) -> Element {\n    rsx! {\n        button {\n            // ❌ We are moving the string into the onclick handler which means we can't access it elsewhere\n            onclick: move |_| {\n                println!(\"{string}\");\n            },\n            \"Print hello world\"\n        }\n        button {\n            // ❌ Since we already moved the string, we can't move it into the onclick handler again. This will cause a compiler error\n            onclick: move |_| {\n                println!(\"{string}\");\n            },\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\nYou can fix this issue by either:\n\n- Making your data `Copy` with `ReadSignal`:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts `ReadSignal<String>` which implements `Copy`\n#[component]\nfn MyComponent(string: ReadSignal<String>) -> Element {\n    rsx! {\n        button {\n            // ✅ Because the `string` signal is `Copy`, we can copy it into the closure while still having access to it elsewhere\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world\"\n        }\n        button {\n            // ✅ Since `string` is `Copy`, we can move it into the onclick handler again\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\n- Calling `clone` on your data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which doesn't implement `Copy`\n#[component]\nfn MyComponent(string: String) -> Element {\n    rsx! {\n        button {\n            // ✅ The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n            onclick: {\n                // Clone the string in a new block\n                let string = string.clone();\n                // Then move the cloned string into the closure\n                move |_| println!(\"{}\", string)\n            },\n            \"Print hello world\"\n        }\n        button {\n            // ✅ We don't use the string after this closure, so we can just move it into the closure directly\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\n</details>\n","packages/html/docs/event_handlers.md":"# Event Handlers\n\nEvent Handlers let you react to user input in your application. In Dioxus, event handlers accept a closure that is called when the event occurs:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            // The `onclick` event accepts a closure with the signature `fn(Event)`\n            onclick: |event_data| println!(\"clicked! I got the event data: {event_data:?}\"),\n            \"Click me\"\n        }\n    }\n}\n```\n\n## Event Lifetimes\n\nEvents take a closure with the `'static` lifetime. This means that the closure can only access data that either exists for the entire lifetime of the application, or data that you move into the closure.\n\nState in dioxus is `copy` which makes it very easy to move into `'static` closures like event handlers:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut count = use_signal(|| 0);\n\nrsx! {\n    button {\n        // Since we added the `move` keyword, the closure will move the `count` signal into the closure\n        onclick: move |_| {\n            // This will panic because the `count` signal is not in scope\n            count.set(count() + 1);\n        },\n        \"Click me\"\n    }\n};\n```\n\nIf you need to access data that is not `Copy`, you may need to clone the data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// String is not `Copy`\nlet string = \"hello world\".to_string();\n\nrsx! {\n    button {\n        // The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n        onclick: {\n            // Clone the string in a new block\n            let string = string.clone();\n            // Then move the cloned string into the closure\n            move |_| println!(\"{}\", string)\n        },\n        \"Print hello world\"\n    }\n    button {\n        // We don't use the string after this closure, so we can just move it into the closure directly\n        onclick: move |_| println!(\"{}\", string),\n        \"Print hello world again\"\n    }\n};\n```\n\n## Async Event Handlers\n\nIn addition to closures that return nothing, you can also use async closures to handle events. If you return an async block from an event handler, dioxus will automatically spawn it:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            // The `onclick` event can also accept a closure that returns an async block\n            onclick: move |_| async move {\n                tokio::time::sleep(std::time::Duration::from_secs(1)).await;\n                println!(\"You clicked the button one second ago!\");\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n","packages/interpreter/README.md":"# `dioxus-interpreter-js`\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-interpreter-js.svg\n[crates-url]: https://crates.io/crates/dioxus-interpreter-js\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-interpreter-js/latest/dioxus_interpreter_js) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-interpreter-js` provides the high-performance JavaScript glue that interprets the stream of edits produced by the Dioxus VirtualDom and converts them into mutations on the actual web DOM.\n\nThis crate features bindings for the web and sledgehammer for increased performance.\n\n## Architecture\n\nWe use TypeScript to write the bindings and a very simple build.rs along with bun to convert them to javascript, minify them, and glue them into the rest of the project.\n\nNot every snippet of JS will be used, so we split out the snippets from the core interpreter.\n\nIn theory, we _could_ use Rust in the browser to do everything these bindings are doing. In reality, we want to stick with JS to skip the need for a WASM build step when running the LiveView and WebView renderers. We also want to use JS to prevent diverging behavior of things like canceling events, uploading files, and collecting form inputs. These details are tough to ensure 1:1 compatibility when implementing them in two languages.\n\nIf you want to contribute to the bindings, you'll need to have the typescript compiler installed on your machine as well as bun:\n\n<https://bun.sh/docs/installation>\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/liveview/README.md":"# Dioxus Liveview\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-liveview.svg\n[crates-url]: https://crates.io/crates/dioxus-liveview\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-liveview/latest/dioxus_liveview) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-liveview` provides adapters for running the Dioxus VirtualDom over a WebSocket connection.\n\nThe current backend frameworks supported include:\n\n- Axum\n\nDioxus-LiveView exports some primitives to wire up an app into an existing backend framework.\n\n- A ThreadPool for spawning the `!Send` VirtualDom and interacting with it from WebSockets\n- An adapter for transforming various socket types into the `LiveViewSocket` type\n- The glue to load the interpreter into your app\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/logger/README.md":"<div align=\"center\">\n  <h1>📡 Dioxus Logger 🛰️</h1>\n  <p><strong>A logging utility to provide a standard interface whether you're targeting web, desktop, fullstack, and more.</strong></p>\n</div>\n\n<div align=\"center\">\n  <!-- Crates version -->\n  <a href=\"https://crates.io/crates/dioxus-logger\">\n    <img src=\"https://img.shields.io/crates/v/dioxus-logger.svg?style=flat-square\"\n    alt=\"Crates.io version\" />\n  </a>\n  <!-- Downloads -->\n  <a href=\"https://crates.io/crates/dioxus-logger\">\n    <img src=\"https://img.shields.io/crates/d/dioxus-logger.svg?style=flat-square\"\n      alt=\"Download\" />\n  </a>\n  <!-- docs -->\n  <a href=\"https://docs.rs/dioxus-logger\">\n    <img src=\"https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square\"\n      alt=\"docs.rs docs\" />\n  </a>\n</div>\n\n-----\n\n`dioxus-logger` is a basic cross-platform facade for logging in [Dioxus](https://dioxuslabs.com/) that uses the [tracing](https://crates.io/crates/tracing) crate.\n\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus_logger::tracing::{Level, info};\n\nfn main() {\n  dioxus_logger::init(Level::INFO).expect(\"logger failed to init\");\n  dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n  info!(\"App rendered\");\n  rsx! {\n    p { \"hi\" }\n  }\n}\n```\n\n## Dioxus support\n\nAs of v0.6, dioxus_logger is part of dioxus itself. Dioxus will call `init` with a default Level, though you can still override the default with `init`.\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus::logger::tracing::{Level, info};\n\nfn main() {\n  dioxus::logger::init(Level::INFO).expect(\"logger failed to init\");\n  dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n  info!(\"App rendered\");\n  rsx! {\n    p { \"hi\" }\n  }\n}\n```\nFor non-wasm targets, runtime filtering is based on the `RUST_LOG` environment variable. e.g. for `RUST_LOG=none,crateName=trace` only logs trace and above for `crateName` will be captured. See [here](https://docs.rs/tracing-subscriber/latest/tracing_subscriber/filter/struct.EnvFilter.html#directives) for syntax. For crates with `-` in the name, these need to be changed to `_` in `RUST_LOG`.\n\n## Platform Support\nDioxus logger will eventually support every target that Dioxus does. Currently mobile and TUI are not supported.\n\n## Installation\n`dioxus_logger` is part of Dioxus v0.6. If you're using Dioxus v0.6, then no installation is required!\n\n\nIf you're on Dioxus v0.5 and below, you can add `dioxus-logger` to your application by adding it to your dependencies.\n```toml\n[dependencies]\ndioxus-logger = \"0.5\"\n```\n\n\n## License\nThis project is licensed under the [MIT license].\n\n[mit license]: ./LICENSE\n\nEvery contribution intentionally submitted for inclusion in `dioxus-logger` by you, shall be licensed as MIT, without any additional terms or conditions.\n","packages/manganis/manganis-macro/README.md":"# Manganis Macro\n\nThis crate contains the macro used to interact with the Manganis asset system. \n","packages/manganis/manganis/README.md":"# Manganis\n\nManganis is a tool for submitting assets and native source files to the program linker. It makes it easy to self-host assets and native plugins that are distributed throughout your libraries.\n\n## Assets\n\nIncluding assets is as simple as using the `asset!()` macro:\n\n```rust\nuse manganis::{Asset, asset};\nconst STYLE: Asset = asset!(\"/assets/style.css\");\n```\n\nAfter cargo builds your app, the asset path is embedded directly in the data section. A tool like the Dioxus CLI can extract this metadata and post-process these assets.\n\n```rust, ignore\nuse manganis::{ImageFormat, Asset, asset, ImageSize, AssetOptions};\n// You can collect arbitrary files. Absolute paths are resolved relative to the package root\nconst _: Asset = asset!(\"/assets/script.js\");\n\n// You can collect images which will be automatically optimized\npub const PNG_ASSET: Asset =\n    asset!(\"/assets/image.png\");\n// Resize the image at compile time to make the assets smaller\npub const RESIZED_PNG_ASSET: Asset =\n    asset!(\"/assets/image.png\", AssetOptions::image().with_size(ImageSize::Manual { width: 52, height: 52 }));\n// Or convert the image at compile time to a web friendly format\npub const AVIF_ASSET: Asset = asset!(\"/assets/image.png\", AssetOptions::image().with_format(ImageFormat::Avif));\n```\n\n## option_asset\n\nIf you have assets that may not always be bundled, you can fall back gracefully with `option_asset!`:\n\n```rust\nuse manganis::{Asset, asset, option_asset};\nconst REQUIRED: Asset = asset!(\"/assets/style.css\");\nconst OPTIONAL: Option<Asset> = option_asset!(\"/assets/missing.css\");\n```\n\n## JavaScript assets\n\nThe CLI auto-detects whether each `.js` asset is an ES module (top-level\n`import`/`export` or `import.meta`) or a classic script and processes it\naccordingly.\n\n- **`with_minify(true)` (default)**: the file is minified in place. Classic\n  scripts are minified verbatim with their format preserved (no IIFE\n  re-wrapping). ES modules are minified and bundled — local relative imports\n  are inlined into a single ESM file, while `http://` / `https://` imports\n  remain as external `import` statements for the browser to resolve at runtime.\n- **`with_minify(false)`**: the file is copied byte-for-byte. Use this when\n  shipping pre-built third-party libraries you do not want re-processed.\n- **`with_static_head(true)`**: appends a `<script>` tag to the document head\n  pointing at the asset. The CLI emits `<script type=\"module\" ...>` when the\n  file is detected (or declared) as an ES module, and a classic `<script>`\n  otherwise.\n- **`with_preload(true)`**: emits a `<link rel=\"preload\" as=\"script\">` for the asset.\n- **`with_module(true)`**: forces the file to be treated as an ES module even\n  when auto-detection would say otherwise. Useful when you author a\n  side-effect-only module without top-level `import`/`export` declarations.\n  Files named `*.mjs` are always treated as modules; files named `*.cjs` are\n  always treated as classic.\n\n```rust, ignore\nuse manganis::{asset, Asset, AssetOptions};\n\n// Vendored UMD library: copy verbatim, emitted as a classic <script>.\nconst SWEETALERT: Asset = asset!(\n    \"/assets/sweetalert2.all.min.js\",\n    AssetOptions::js().with_minify(false).with_static_head(true)\n);\n\n// Authored ES module with local imports: auto-detected from the top-level\n// `import`/`export`, bundled and minified into a single ESM file, emitted as\n// `<script type=\"module\">`.\nconst APP: Asset = asset!(\n    \"/assets/app.js\",\n    AssetOptions::js().with_static_head(true)\n);\n```\n\n## Native FFI Bindings\n\nManganis provides the `#[ffi]` attribute macro for generating direct FFI bindings between Rust and native platforms (Swift/Kotlin). See the `geolocation-native-plugin` example for usage.\n","packages/playwright-tests/barebones-template/README.md":"# Development\n\nYour new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.\n\n```\nproject/\n├─ assets/ # Any assets that are used by the app should be placed here\n├─ src/\n│  ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app\n├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project\n```\n\n### Serving Your App\n\nRun the following command in the root of your project to start developing with the default platform:\n\n```bash\ndx serve\n```\n\nTo run for a different platform, use the `--webview`, `--native`, or `--web` flags. E.g.\n\n```bash\ndx serve --webview\n```\n","packages/router/README.md":"# Dioxus Router\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-router.svg\n[crates-url]: https://crates.io/crates/dioxus-router\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/essentials/router/) |\n[API Docs](https://docs.rs/dioxus-router/latest/dioxus_router) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nDioxus Router is a first-party Router for all your Dioxus Apps. It provides an\ninterface similar to React Router, but takes advantage of types for more\nexpressiveness.\n\n```rust, no_run\nuse dioxus::prelude::*;\nuse std::str::FromStr;\n\n#[rustfmt::skip]\n#[derive(Clone, Debug, PartialEq, Routable)]\nenum Route {\n    #[nest(\"/blog\")]\n        #[layout(Blog)]\n            #[route(\"/\")]\n            BlogList {},\n\n            #[route(\"/:blog_id\")]\n            BlogPost { blog_id: usize },\n        #[end_layout]\n    #[end_nest]\n    #[route(\"/\")]\n    Index {},\n}\n\n#[component]\nfn App() -> Element {\n    rsx! {\n        Router::<Route> { }\n    }\n}\n\n#[component]\nfn Index() -> Element {\n    rsx! {\n        h1 { \"Index\" }\n        Link {\n            to: Route::BlogList {},\n            \"Go to the blog\"\n        }\n    }\n}\n\n#[component]\nfn Blog() -> Element {\n    rsx! {\n        h1 { \"Blog\" }\n        Outlet::<Route> { }\n    }\n}\n\n#[component]\nfn BlogList() -> Element {\n    rsx! {\n        h2 { \"List of blog posts\" }\n        Link {\n            to: Route::BlogPost { blog_id: 0 },\n            \"Blog post 1\"\n        }\n        Link {\n            to: Route::BlogPost { blog_id: 1 },\n            \"Blog post 2\"\n        }\n    }\n}\n\n#[component]\nfn BlogPost(blog_id: usize) -> Element {\n    rsx! {\n        h2 { \"Blog Post\" }\n    }\n}\n```\n\nYou need to enable the right features for the platform you're targeting since these are not determined automatically!\n\n## Bundle Splitting\n\nThe Dioxus Router supports automatic bundle splitting along route variants. To enable this, you need to manually turn on the `wasm-split` feature explicitly on the dioxus-router crate:\n\n```toml\n[dependencies]\ndioxus = { version = \"*\", features = [\"router\", \"wasm-split\"] }\ndioxus-router = { version = \"*\", features = [\"wasm-split\"] }\n```\n\nNote that `wasm-split` must also be turned on in dioxus since the macro uses the re-exported `wasm-split` from the dioxus prelude.\n\nEnabling splitting disconnects the call graph, meaning if you try to run your app with a normal `dx serve`, it won't work. When running with router splitting, you need to pass `--experimental-wasm-split`.\n\n```sh\ndx serve --experimental-wasm-split\n```\n\nIn practice, we recommend passing `dioxus-router?/wasm-split` as a feature only when bundling:\n\n```sh\ndx bundle --features \"dioxus-router?/wasm-split\"  --experimental-wasm-split\n```\n\nNote that the router will call `.suspend()` so you should add a SuspenseBoundary above the Outlet to prevent suspending the entire page.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","packages/rsx-rosetta/README.md":"# `rsx-rosetta`\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/rsx-rosetta.svg\n[crates-url]: https://crates.io/crates/rsx-rosetta\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/rsx-rosetta/latest/rsx_rosetta) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nDioxus sports its own templating language inspired by C#/Kotlin/RTMP, etc. It's pretty straightforward.\n\nHowever, it's NOT HTML. This is done since HTML is verbose and you'd need a dedicated LSP or IDE integration to get a good DX in .rs files.\n\nRSX is simple... It's similar enough to regular Rust code to trick most IDEs into automatically providing support for things like block selections, folding, highlighting, etc.\n\nTo accommodate the transition from HTML to RSX, you might need to translate some existing code.\n\nThis library provides a central AST that can accept a number of inputs:\n\n- HTML\n- Syn (todo)\n- Akama (todo)\n- Jinja (todo)\n\nFrom there, you can convert directly to a string or into some other AST.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","packages/rsx/README.md":"# Dioxus-RSX\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-rsx.svg\n[crates-url]: https://crates.io/crates/dioxus-rsx\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-rsx/latest/dioxus_rsx) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nThis crate provides the actual DSL that Dioxus uses in the `rsx!` macro. This crate is separate from the macro crate to enable tooling like autoformat, translation, and AST manipulation (extract to component).\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## Design\n\nThe architecture of this crate has gone through several redesigns and we're hoping that we've finally landed on a final design that we're happy with.\n\nThere is still some thinking that we could approach this by flattening the AST to have better incremental parsing and performance without having to add metadata to the data structures.\n\nFor now, however, the design we've settled on:\n\n- A top-level CallBody containing a single TemplateBody\n- Each TemplateBody has its dynamic mapping on it, filled in after parsing (...not during)\n- Hotreload Information for things like literals is propagated as a final pass into nodes on the tree\n\nThis lets us incrementally build up the tree to make it modular/easier to test in exchange for extra \"bookkeeping passes\".\n\nThe good part of bookkeeping passes is:\n- They're optional\n- They're generally pretty quick\n- They can be enforced as part of tree construction in the various levels\n\nOf course the major downside is they're 1) slower and 2) need a way to store metadata, which they do on the nodes themselves. Sometimes you might not even want to collect metadata which we currently have no way of opting-out of.\n\nThis can make global reasoning about the tree a bit harder since you need to dig into each node for its metadata, but the local reasoning is much better. Previously we stored the metadata on a secondary \"view\" type item - and this was fine... but it's not ideal for long-lived programs that persist a queryable tree-object.\n\nWe want to query the tree:\n- For its dynamic mappings\n- For its hot-reloadable contents\n\nAn alternative approach would be\n- flattened AST\n- single \"parser\" IE `self.parse_element` / `self.parse_component`\n\nI've done a bunch of research on parsers and cannot find many (any?) parsers that are implemented statefully.\n\nWe *do* want a reference to these items - currently its their path, but it could be done via just an ID for each node. Unfortunately there's no easy way to \"pool\" these up other than Arc/Rc.\n\nAnyways, until our applications are limited by query performance, keeping the tree unflattened seems fine. The JS DOM has a similar API where it flushes changes after modifications, but also has an ID system via pointers. We could try adding IDs with something like generational-box or just Arc/Rc.\n\nNote that we still don't get the \"goodies\" of a proper tree-sitter type parser (skipping tokenization incrementally) but that really isn't achievable without being a part of the LSP. In theory, we can eventually use the LSP to help modify the tree in place and then \"fix\" it if you wanted to modify trees in place. That being said, we still need to perform diffing of two rsx! trees even when we know their shape has changed.\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT, without any additional\nterms or conditions.\n","packages/signals/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsignals%2FREADME.md -->","packages/signals/docs/memo.md":"Memos are the result of computing a value from `use_memo`.\n\nYou may have noticed that this struct doesn't have many methods. Most methods for `Memo` are defined on the [`ReadableExt`] trait.\n\n# Reading a Memo\n\nYou can use the methods on the `ReadableExt` trait to read a memo:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n    // The memo will rerun any time we write to the count signal\n    let halved = use_memo(move || count() / 2);\n\n    rsx! {\n        // When we read the value of memo, the current component will subscribe to the result of the memo. It will only rerun when the result of the memo changes.\n        \"{halved}\"\n        button {\n            onclick: move |_| {\n                count += 1;\n            },\n            \"Increment\"\n        }\n    }\n}\n```\n\nMemo also includes helper methods just like [`Signal`]s to make it easier to use. Calling a memo like a function will clone the inner value:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n    // The memo will rerun any time we write to the count signal\n    let halved = use_memo(move || count() / 2);\n    // This will rerun any time the halved value changes\n    let doubled = use_memo(move || 2 * halved());\n\n    rsx! {\n        \"{doubled}\"\n        button {\n            onclick: move |_| {\n                count += 1;\n            },\n            \"Increment\"\n        }\n    }\n}\n```\n\nFor a full list of all the helpers available, check out the [`Readable`], [`ReadableVecExt`](crate::ReadableVecExt), and [`ReadableOptionExt`](crate::ReadableOptionExt) traits.\n\n# Memos with Async\n\nBecause Memos check borrows at runtime, you need to be careful when reading memos inside of async code. If you hold a read of a memo over an await point, that read may still be open when the memo reruns which will cause a panic:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: &u32) -> u32 {\n    sleep(100).await;\n    *value * 2\n}\nlet mut signal = use_signal(|| 0);\nlet halved = use_memo(move || signal() / 2);\n\nlet doubled = use_resource(move || async move {\n    // Don't hold reads over await points\n    let halved = halved.read();\n    // While the future is waiting for the async work to finish, the read will be open\n    double_me_async(&halved).await\n});\n\nrsx!{\n    \"{doubled:?}\"\n    button {\n        onclick: move |_| {\n            // When you write to signal, it will cause the memo to rerun which may panic because you are holding a read of the memo over an await point\n            signal += 1;\n        },\n        \"Increment\"\n    }\n};\n```\n\nInstead of holding a read over an await point, you can clone whatever values you need out of your memo:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: u32) -> u32 {\n    sleep(100).await;\n    value * 2\n}\nlet mut signal = use_signal(|| 0);\nlet halved = use_memo(move || signal() / 2);\n\nlet doubled = use_resource(move || async move {\n    // Calling the memo will clone the inner value\n    let halved = halved();\n    double_me_async(halved).await;\n});\n\nrsx!{\n    \"{doubled:?}\"\n    button {\n        onclick: move |_| {\n            signal += 1;\n        },\n        \"Increment\"\n    }\n};\n```\n\n# Memo lifecycle\n\nMemos are implemented with [generational-box](https://crates.io/crates/generational-box) which makes all values Copy even if the inner value is not Copy.\n\nThis is incredibly convenient for UI development, but it does come with some tradeoffs. The lifetime of the memo is tied to the lifetime of the component it was created in. If you drop the component that created the memo, the memo will be dropped as well. You might run into this if you try to pass a memo from a child component to a parent component and drop the child component. To avoid this you can create your memo higher up in your component tree, or use global memos.\n\nTLDR **Don't pass memos up in the component tree**. It will cause issues:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let child_signal = use_signal(|| None);\n\n    rsx! {\n        IncrementButton {\n            child_signal\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut child_signal: Signal<Option<Memo<i32>>>) -> Element {\n    let signal_owned_by_child = use_signal(|| 0);\n    let memo_owned_by_child = use_memo(move || signal_owned_by_child() * 2);\n    // Don't do this: it may cause issues if you drop the child component\n    child_signal.set(Some(memo_owned_by_child));\n\n    todo!()\n}\n```\n","packages/signals/docs/signals.md":"Signals are a Copy state management solution with automatic dependency tracking.\n\nYou may have noticed that this struct doesn't have many methods. Most methods for Signal are defined on the [`Readable`] and [`Writable`] traits.\n\n# Reading and Writing to a Signal\n\nSignals are similar to a copy version of `Rc<RefCell<T>>` built for UIs. You can read and write to a signal like a RefCell:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n\n{\n    // This will read the value (we use a block to make sure the read is dropped before the write. You can read more about this in the next section)\n    let read = signal.read();\n    // Just like refcell, read you can deref the read to get the inner &T reference\n    match &*read {\n        &0 => println!(\"read is 0\"),\n        &1 => println!(\"read is 1\"),\n        _ => println!(\"read is something else ({read})\"),\n    }\n}\n\n// This will write to the value\nlet mut write = signal.write();\n// Again, we can deref the write to get the inner &mut T reference\n*write += 1;\n```\n\nSignals also have a bunch of helper methods to make it easier to use. Calling it like a function will clone the inner value. You can also call a few traits like AddAssign on it directly without writing to it manually:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n// This will clone the value\nlet clone: i32 = signal();\n\n// You can directly display the signal\nprintln!(\"{}\", signal);\n\nlet signal_vec = use_signal(|| vec![1, 2, 3]);\n// And use vec methods like .get and .len without reading the signal explicitly\nlet first = signal_vec.get(0);\nlet last = signal_vec.last();\nlet len = signal_vec.len();\n\n// You can also iterate over signals directly\nfor i in signal_vec.iter() {\n    println!(\"{}\", i);\n}\n```\n\nFor a full list of all the helpers available, check out the [`Readable`], [`ReadableVecExt`], [`ReadableOptionExt`], [`Writable`], [`WritableVecExt`], and [`WritableOptionExt`] traits.\n\nJust like `RefCell<T>`, Signal checks borrows at runtime. If you read and write to the signal at the same time, it will panic:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n// If you create a read and hold it while you write to the signal, it will panic\nlet read = signal.read_unchecked();\n// This will panic\nsignal += 1;\nprintln!(\"{}\", read);\n```\n\nTo avoid issues with overlapping reads and writes, you can use the `with_*` variants of methods to read and write to the signal in a single scope or wrap your reads and writes inside a block:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n{\n    // Since this read is inside a block that ends before we write to the signal, the signal will be dropped before the write and it will not panic\n    let read = signal.read();\n    println!(\"{}\", read);\n}\nsignal += 1;\n\n// Or you can use the with and with_write methods which only read or write to the signal inside the closure\nsignal.with(|read| println!(\"{}\", read));\n// Since the read only lasts as long as the closure, this will not panic\nsignal.with_mut(|write| *write += 1);\n```\n\n# Signals with Async\n\nBecause signals check borrows at runtime, you need to be careful when reading and writing to signals inside of async code. If you hold a read or write to a signal over an await point, that read or write may still be open while you run other parts of your app:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: &mut u32) {\n    sleep(100).await;\n    *value *= 2;\n}\nlet mut signal = use_signal(|| 0);\n\nuse_future(move || async move {\n    // Don't hold reads or writes over await points\n    let mut write = signal.write();\n    // While the future is waiting for the async work to finish, the write will be open\n    double_me_async(&mut write).await;\n});\n\nrsx!{\n    // This read may panic because the write is still active while the future is waiting for the async work to finish\n    \"{signal}\"\n};\n```\n\nInstead of holding a read or write over an await point, you can clone whatever values you need out of your signal and then set the signal to the result once the async work is done:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: u32) -> u32 {\n    sleep(100).await;\n    value * 2\n}\nlet mut signal = use_signal(|| 0);\n\nuse_future(move || async move {\n    // Clone the value out of the signal\n    let current_value = signal();\n    // Run the async work\n    let new_value = double_me_async(current_value).await;\n    // Set the signal to the new value\n    signal.set(new_value);\n});\n\nrsx! {\n    // This read will not panic because the write is never held over an await point\n    \"{signal}\"\n};\n```\n\n# Signals lifecycle\n\nSignals are implemented with [generational-box](https://crates.io/crates/generational-box) which makes all values Copy even if the inner value is not Copy.\n\nThis is incredibly convenient for UI development, but it does come with some tradeoffs. The lifetime of the signal is tied to the lifetime of the component it was created in. If you drop the component that created the signal, the signal will be dropped as well. You might run into this if you try to pass a signal from a child component to a parent component and drop the child component. To avoid this you can create your signal higher up in your component tree, use global signals, or create a signal in a specific scope (like the `ScopeId::ROOT`) with [`Signal::new_in_scope`](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Signal.html#method.new_in_scope)\n\nTLDR **Don't pass signals up in the component tree**. It will cause issues:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let child_signal = use_signal(|| None);\n\n    rsx! {\n        IncrementButton {\n            child_signal\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut child_signal: Signal<Option<Signal<i32>>>) -> Element {\n    let signal_owned_by_child = use_signal(|| 0);\n    // Don't do this: it may cause issues if you drop the child component\n    child_signal.set(Some(signal_owned_by_child));\n\n    todo!()\n}\n```\n","packages/ssr/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fssr%2FREADME.md -->","packages/stores/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fstores%2FREADME.md -->","packages/subsecond/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsubsecond%2FREADME.md -->","packages/subsecond/subsecond-tests/cross-tls-test/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsubsecond%2Fsubsecond-tests%2Fcross-tls-test%2FREADME.md -->","packages/wasm-split/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fwasm-split%2FREADME.md -->","packages/web/README.md":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fweb%2FREADME.md -->"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/AGENTS.md","title":"AI Agent Protocol & Instructions","category":"root-instruction","format":"markdown","content":"# Dioxus Agent Guide\n\nDioxus is a cross-platform UI framework for Rust, similar to React. It compiles to web (WASM), desktop (webview), mobile (iOS/Android), and native (GPU-rendered).\n\n## Quick Overview\n\n- **Language**: Rust (stable toolchain)\n- **UI Model**: React-like with VirtualDOM, components, hooks, signals\n- **Syntax**: JSX-like `rsx!` macro for declaring UI\n- **Platforms**: Web, Desktop (Windows/macOS/Linux), Mobile, Native, LiveView (server-rendered)\n\n## Workspace Structure\n\n```\npackages/\n├── dioxus/           # Main re-export crate users depend on\n├── core/             # VirtualDOM, components, diffing, scheduling\n├── rsx/              # RSX macro parsing and code generation\n├── rsx-hotreload/    # Template diffing for hot-reload\n├── signals/          # Reactive state (Signal, Memo, Store)\n├── hooks/            # Built-in hooks (use_signal, use_effect, etc.)\n├── router/           # Type-safe routing with #[derive(Routable)]\n├── fullstack/        # SSR, hydration, #[server] functions\n├── cli/              # `dx` build tool, dev server, bundling\n├── web/              # WASM renderer\n├── desktop/          # Wry/Tao webview renderer\n├── native/           # Blitz/Vello GPU renderer\n├── liveview/         # WebSocket streaming renderer\n├── manganis/         # asset!() macro for compile-time assets\n├── subsecond/        # Hot-patching system (jump table indirection)\n├── devtools/         # Dev server communication protocol\n├── interpreter/      # Sledgehammer JS for DOM mutations\n└── wasm-split/       # WASM code splitting\n```\n\n## Architecture Documentation\n\nFor deeper understanding, see `notes/architecture/`:\n\n| When working on...                         | Read...            |\n| ------------------------------------------ | ------------------ |\n| VirtualDOM, components, diffing, events    | `01-CORE.md`       |\n| CLI, build system, bundling, dev server    | `02-CLI.md`        |\n| RSX macro, parsing, formatting             | `03-RSX.md`        |\n| Signals, state management, reactivity      | `04-SIGNALS.md`    |\n| Server functions, SSR, hydration           | `05-FULLSTACK.md`  |\n| Web/desktop/native/liveview renderers      | `06-RENDERERS.md`  |\n| Hot-reload, hot-patching, devtools         | `07-HOTRELOAD.md`  |\n| Asset macro, manganis, const serialization | `08-ASSETS.md`     |\n| Router, navigation, nested routes          | `09-ROUTER.md`     |\n| WASM code splitting                        | `10-WASM-SPLIT.md` |\n\n## Key Concepts\n\n- **VirtualDOM**: Tree of `VNode` with templates, dynamic nodes, and attributes\n- **Signals**: Copy-able reactive primitives via generational-box (generation-based validity)\n- **WriteMutations**: Trait that renderers implement to apply DOM changes\n- **RSX**: Proc macro that compiles JSX-like syntax to `VNode` construction\n- **Server Functions**: `#[server]` macro generates client RPC stubs and server handlers\n- **Subsecond**: Hot-patches Rust code via jump table indirection (no memory modification)\n- **Manganis**: `asset!(\"/main.css\")` macro for including assets by embedding data via linker symbols\n\n## Common Patterns\n\n**Component definition**:\n```rust\n#[component]\nfn MyComponent(name: String) -> Element {\n    let mut count = use_signal(|| 0);\n    rsx! {\n        button { onclick: move |_| count += 1, \"{name}: {count}\" }\n    }\n}\n```\n\n## Notes for Agents\n\n1. The `dioxus` crate re-exports from other crates - most implementation is in `packages/core`, `packages/signals`, etc.\n2. RSX macro expansion happens in `packages/rsx` - look there for syntax questions\n3. Each renderer implements `WriteMutations` differently - see `06-RENDERERS.md`\n4. Hot-reload has two systems: RSX template diffing (fast) and Subsecond code patching (full Rust)\n5. Assets use link sections and binary patching - the `asset!()` macro creates symbols the CLI processes\n","isInternal":false,"tokens":977,"sizeBytes":3939},{"name":"SKILL.md","path":".devin/skills/release-alpha/SKILL.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/.devin/skills/release-alpha/SKILL.md","title":"release-alpha","category":"anthropic-skill","format":"markdown","content":"---\nname: release-alpha\ndescription: Cut a Dioxus 0.x alpha release (version bump, crates.io publish, tag, GitHub release, CLI binaries, template update, verification, and optionally the SDK/icons/code/components releases)\nargument-hint: \"<new version, e.g. 0.8.0-alpha.3>\"\ntriggers:\n  - user\n  - model\nallowed-tools:\n  - read\n  - grep\n  - glob\n---\n\n# Releasing a Dioxus alpha\n\nUse this to cut a prerelease of the whole workspace (for example `0.8.0-alpha.3`). The general checklist is in `notes/RELEASING.md`. This skill is the concrete, tested procedure for an alpha, written down after cutting `0.8.0-alpha.2`. Step 8 (ecosystem crates) was added after `0.8.0-alpha.3`.\n\n`NEW` is the version being released and `PREV` is the last release tag (e.g. `v0.8.0-alpha.2`). If the user didn't give `NEW`, ask.\n\n## Confirmation gates\n\nThese steps can't be undone. Do each one only when the user has explicitly asked for it, and don't treat approval of one as approval of the next:\n\n- publishing to crates.io (versions can't be deleted)\n- pushing to `main`. Branch protection requires a PR, and the user's account can bypass that rule, so a direct push goes through silently. Prefer a PR.\n- pushing tags, creating the GitHub release, and running the `Publish CLI` workflow\n- creating new crates on crates.io and changing crate owners\n\nNever edit `.npmrc`, `minimumReleaseAge` or branch protection to get around a failure.\n\n## Environment notes (macOS)\n\n- **bash 3.2:** a heredoc inside `$(...)` that contains an apostrophe fails to parse. Write commit messages and PR bodies to a file and use `git commit -F file` and `gh pr create --body-file file`.\n- **sed:** in-place edits need `sed -i ''`.\n- **crates.io API:** requests are rejected without a User-Agent, so pass `curl -A dioxus-release-check ...`.\n- **Don't touch the user's `dx`:** don't `cargo install` over it. Build `dx` into `target/release/dx` with `cargo build -p dioxus-cli --release`, and set `DX_HOME=<scratch dir>` so its tools are downloaded fresh and the user's dx data stays untouched.\n- **Cleanup:** put scratch work under `/tmp/<name>` and delete it when done.\n\n## 1. Pre-flight\n\n1. **Base commit and CI.** Find the latest `main` commit with `git fetch origin`. Check its CI with `gh run list --branch main --workflow main.yml --limit 3`. Wait for green before cutting.\n2. **What's new.** Find the commit `PREV` was cut from: `git merge-base origin/main PREV`. A tag can be on a side branch (alpha.1's was). List the commits since then with `git log --oneline <base>..origin/main`.\n3. **New publishable crates.** Diff the `[workspace.dependencies]` entries in `Cargo.toml` against `PREV`. For each publishable member, query `https://crates.io/api/v1/crates/<name>`; a 404 means it's new.\n   - **Claim the names first** (confirmation gate). For each new crate, in `/tmp`, run `cargo new --lib --vcs none <name>`. Copy `description`, `license`, `repository`, `homepage`, `keywords` and `authors` from the real crate, set `version = \"0.0.0\"`, and make `src/lib.rs` just `//! Coming soon.`. Then `cargo publish --dry-run` followed by `cargo publish`.\n   - **Add owners:** `github:dioxuslabs:publish`, `jkelleyrtp` (Jonathan Kelley) and `ealmloff` (Evan Almloff), with `cargo owner --add github:dioxuslabs:publish --add jkelleyrtp --add ealmloff <crate>`. This needs a token with the `change-owners` scope. If cargo returns 403, give the user `https://crates.io/crates/<crate>/settings` instead.\n   - **Naming:** a crate name can't be changed once it has a real release, so settle names before publishing.\n4. **Dev-dependencies on `publish = false` crates** (for example `dioxus-renderer-oracle` in `dioxus-core`). These are fine because `cargo workspaces publish` strips dev-dependencies by default (it logs `warn removing dev-deps ...`). Never pass `--no-remove-dev-deps`. Plain `cargo publish` or `cargo publish --workspace` would fail on them.\n5. **Optional packaging dry run.** `cargo workspaces publish --dry-run` can't get past the first crate whose dependencies aren't on crates.io yet, so it isn't useful. Instead:\n   - Create a scratch worktree with `git worktree add --detach /tmp/dioxus-dryrun HEAD`.\n   - Bump the version there, and strip `[dev-dependencies]` from the crates you're checking.\n   - Run `cargo publish --dry-run --no-verify --allow-dirty -p <crate> -p <each workspace crate it depends on, transitively>`.\n   - Remove the worktree afterwards with `git worktree remove --force`.\n6. **Smoke test** (web, from the base commit):\n   - Build `dx` as described in the environment notes.\n   - Run `dx new` in `/tmp`. It needs a TTY, and even with `--yes` it still asks for the sub-template and platform. To run it without a TTY, pass `--subtemplate Bare-Bones --option default_platform=web --yes --vcs none`.\n   - Add `[patch.crates-io] dioxus = { path = \"<repo>/packages/dioxus\" }` to the project.\n   - Run `dx serve --web --port <p> --open false --interactive false`. In the browser, check that the page renders and the CSS/SVG assets load.\n   - Check hot reload: edit RSX text, then CSS, then add a `use_signal` counter button (a Rust hot-patch) and click it.\n   - Run `dx bundle --web --release`, serve `target/dx/<app>/release/web/public` with `python3 -m http.server`, and click the button again.\n   - Check that `dx` installs `wasm-bindgen-cli` at the same version as the project's `wasm-bindgen`, and compare against the latest on crates.io.\n   - To check app logs, use the interactive TUI. `--interactive false --verbose` drops app logs; that's an existing bug.\n\n## 2. Version bump\n\n1. Create the branch: `git switch -c release-NEW origin/main`, then `git branch --unset-upstream`.\n2. Find every reference to the old version with `rg -l --glob '!Cargo.lock' --glob '!target/**' '<OLD_VERSION_REGEX>' .`. Expect:\n   - `Cargo.toml` (the `[workspace.package]` version and every `=<old>` entry in `[workspace.dependencies]`)\n   - `packages/const-serialize/Cargo.toml`\n   - `packages/const-serialize-macro/Cargo.toml`\n   - `packages/manganis/manganis-core/Cargo.toml` (its `const-serialize` dependency)\n3. Replace the version with `sed -i '' 's/<old>/<new>/g' <files>`, then run `cargo update -w`.\n4. Verify:\n   - In `git diff -U0 Cargo.lock`, the only changed lines are `version = \"...\"` lines.\n   - `cargo metadata --locked` succeeds.\n   - `cargo check --locked -p dioxus -p dioxus-cli` succeeds.\n5. Commit with the message `Bump versions for NEW release` (the existing convention).\n6. Get the bump onto `main` before tagging, preferably through a PR. The tag must end up on a commit that's on `main`.\n\n## 3. Release notes\n\n1. Generate the base notes:\n   `gh api repos/DioxusLabs/dioxus/releases/generate-notes -f tag_name=vNEW -f target_commitish=main -f previous_tag_name=PREV --jq .body`.\n   `target_commitish` must be a branch name; a SHA is rejected.\n2. Above the generated list, add a `## Highlights` section and, if needed, a `## Breaking changes` section. Write them from the PR descriptions (`gh pr view <n> --json title,body`), not just the titles. Keep the generated \"What's Changed\", \"New Contributors\" and \"Full Changelog\" sections unchanged.\n3. Credit original authors of rebased or superseded PRs, e.g. `(originally #NNNN by @user)`.\n4. Commits pushed straight to main have no PR and won't appear in the generated list.\n5. Save the notes to `/tmp/vNEW-release-notes.md`.\n\n## 4. Publish (confirmation gate)\n\nFrom a clean tree on the bump commit, run the command from `notes/RELEASING.md`:\n\n```\ncargo workspaces publish --publish-as-is --allow-dirty --no-git-push --no-individual-tags\n```\n\n- **Rate limits:** crates.io allows a burst of about 30 to 34 updates to existing crates, then about 1 per minute. When it returns `429 Too Many Requests ... try again after <date> GMT`, `cargo-workspaces` stops.\n- **Retrying:** re-run with `publish-with-retry.sh` in this skill's directory. Each re-run skips crates that are already published, waits until the time crates.io gave, and stops on any non-rate-limit error. It shows each run's output as it happens and also saves it to `<log prefix><run>.log`. Run it in the background and report progress as `published N/total`.\n- **Timing:** for about 56 crates, expect about 30 minutes in total.\n- **Check the result:** query `https://crates.io/api/v1/crates/<name>/NEW` for every publishable crate. Take the list from `cargo metadata --no-deps` (packages where `publish` is null or non-empty).\n\n## 5. Tag, GitHub release and CLI binaries (each a confirmation gate)\n\n1. **Tag:** previous tags are lightweight. Run `git tag vNEW <bump commit>`, then `git push origin vNEW`.\n2. **GitHub release:**\n   `gh release create vNEW --verify-tag --prerelease --latest=false --title vNEW --notes-file /tmp/vNEW-release-notes.md`.\n   Afterwards, confirm `gh api repos/DioxusLabs/dioxus/releases/latest` still returns the last stable release.\n3. **CLI binaries:** the release must exist first, because the workflow uploads to it:\n   `gh workflow run publish.yml --ref main -f post=vNEW -f channel=vNEW`.\n   It takes about 30 minutes; Intel macOS is the slowest job. When it finishes, the release should have 16 files: `.zip`, `.tar.gz` and `.sha256` for each of 6 targets (Windows has no `.tar.gz`).\n\n## 6. Verify\n\n1. **docs.rs:** check `https://docs.rs/crate/<name>/NEW/status.json` (`doc_status`) for every crate.\n   - `dioxus-cli` always fails because it's binary-only. That's expected.\n   - For any other failure, read the build log at `https://docs.rs/crate/<name>/NEW/builds/<id>`; the first build id is linked from `/builds`. Also check whether the previous version failed the same way.\n2. **binstall:**\n   - Download a `cargo-binstall` release that's at least 7 days old into `/tmp` with `gh release download vX --repo cargo-bins/cargo-binstall --pattern 'cargo-binstall-aarch64-apple-darwin.zip'`.\n   - Run `cargo-binstall dioxus-cli@NEW --root /tmp/<scratch> --no-confirm --no-track --disable-telemetry --strategies crate-meta-data`.\n   - `dx --version` should print `NEW (<tag commit short sha>)`.\n3. **Published crates:**\n   - Run `dx new` with the binstalled `dx`, without the `[patch]` section.\n   - Run `cargo generate-lockfile`, and check that `dioxus*` resolve to `NEW` from the registry.\n   - Run `dx serve` and repeat the browser and hot-reload checks from 1.6.\n\n## 7. Template\n\nThe default `dx new` template is `gh:dioxuslabs/dioxus-template`, on the branch `v<major>.<minor>` (e.g. `v0.8`).\n\n1. Clone it into `/tmp` with `gh repo clone DioxusLabs/dioxus-template /tmp/dioxus-template -- --branch v0.8`, and create a branch.\n2. Bump the old version to `NEW` in:\n   - `common.rhai` (`DIOXUS_DEP_SRC_VAR`)\n   - `Bare-Bones/AGENTS.md`, `Jumpstart/AGENTS.md`, `Workspace/AGENTS.md`\n   - `.github/workflows/main.yml` (the `cargo binstall dioxus-cli@...` line)\n3. Leave `dioxuslabs.com/learn/<ver>/` links alone unless that docs version returns 200.\n4. Test locally the way the template's CI does: for each of Bare-Bones, Jumpstart and Workspace, run `dx new --template . --subtemplate <X> --yes --option default_platform=web --vcs none <dir>` (Workspace doesn't need `default_platform`), then `cargo check --all-features`.\n5. Open a PR against `v0.8`.\n\n## 8. Ecosystem crates (optional)\n\nOnly do this if the user asks. These repos pin Dioxus exactly (`=NEW`), so each one needs a matching release. Their 0.8 work lives on a `0.8` branch (`v<major>.<minor>` without the `v`); `main` stays on 0.7.\n\n| Repo | Crates published | Version |\n|---|---|---|\n| `DioxusLabs/sdk` | `dioxus-sdk` and the `dioxus-sdk-{time,storage,geolocation,notification,sync,util,window}` subcrates | `NEW` (mirrors Dioxus) |\n| `DioxusLabs/dioxus-icons` | `dioxus-icons` | its next minor with Dioxus's prerelease suffix, e.g. `0.2.0-alpha.3` |\n| `DioxusLabs/dioxus-code` | `dioxus-code-macro`, `dioxus-code`, `dioxus-code-editor` (all one version) | same rule as icons |\n| `DioxusLabs/dioxus-components` | nothing; `dx components add` uses the `0.8` branch from git | n/a |\n\nPrerelease versions mean `cargo add` keeps giving 0.7 users the latest stable release.\n\n1. **Look for upgrade work already in progress.** Run `gh pr list --repo <repo> --state open` on each repo. If a contributor has an upgrade branch open, build the release PR on top of their commits rather than starting fresh. Add `Co-authored-by: <name> <email>` (from `git log`) to every commit you make in that repo. Keep their PRs open until yours merge, then close them with a thank-you that links the replacement.\n2. **Release order.** Components depends on the SDK (`dioxus-primitives` → `dioxus-sdk-time`), and its unpublished `preview` crate depends on icons and code. The dioxus-code docsite depends on `dioxus-primitives` from components via git. So:\n   1. Release the SDK and icons: PR to `0.8` (create the branch from `main` if it doesn't exist), merge, publish, tag.\n   2. Open the components PR to `0.8`. Until the crates above are published, point it at their release branches as git dependencies. Merge it.\n   3. Release dioxus-code. Pin the docsite to the components merge commit with `rev = \"<sha>\"`, not `branch = \"0.8\"`. Because both repos pin Dioxus exactly, a branch reference breaks resolution as soon as components moves to the next alpha.\n   4. Follow-up PR in components: switch to exact pins on the published crates (`=NEW`, `=0.x.0-alpha.N`). Check that `Cargo.lock` has no `git+` sources left.\n3. **Each release PR:** bump the Dioxus pins and the crate versions, update the README install lines and any compatibility notes, then run the repo's CI commands locally. CI on these repos usually only runs for PRs into `main`, so it won't run on a PR into `0.8` (components#307 adds version-branch CI there). Expect API fixes from that Dioxus release, such as the keyboard-types 0.8 `Key::Named(NamedKey::…)` change in alpha.3.\n4. **Publish** (confirmation gate). Publish from a clean `git worktree add --detach <dir> <merge commit>`:\n   - Check `git diff --stat <tested head> <merge commit>` is empty (PRs are squash-merged) and the squash commit kept the `Co-authored-by` trailers.\n   - Check `cargo workspaces list` shows only the crates above, with no examples.\n   - Run `publish-with-retry.sh <worktree> <log prefix>`. Use `cargo workspaces` for dioxus-code too: `dioxus-code-macro` dev-depends on `dioxus-code`, and plain `cargo publish` can't handle that cycle.\n5. **Tag and release** (confirmation gates): add a lightweight `v<version>` tag on the merge commit, then run `gh release create ... --prerelease --latest=false`. Above GitHub's generated notes (`target_commitish=0.8`, `previous_tag_name=<last tag>`), add a short intro: the Dioxus version it targets, the install line, a note that 0.7 users aren't affected, and credit for the PRs it builds on. The generated list only credits whoever opened the release PR.\n6. **Verify:**\n   - every version returns 200 from the crates.io API, and `max_stable_version` is unchanged\n   - a scratch project that depends on Dioxus `NEW` plus the new crates resolves everything from the registry, with one `dioxus`, and passes `cargo check`\n   - docs.rs builds. `dioxus-sdk` and `dioxus-sdk-window` fail because `listen` and `get_theme_platform` are defined twice under all features (0.7.0 failed the same way). Large crates like `dioxus-icons` take a few minutes to show as built.\n7. **Gotchas:**\n   - The components `preview` and dioxus-code docsite web builds compile C to wasm32 (`arborium-sysroot`), which Apple clang can't do. Without an LLVM clang, check those for desktop instead.\n   - None of these repos delete merged branches automatically. Delete the temporary release branches only once nothing references them, including the docsite's components rev.\n\n## 9. Wrap up\n\nReport back:\n\n- links to the crates.io release, the GitHub release, the CLI workflow run and any PRs\n- the docs.rs results\n- anything you didn't test (desktop, mobile, fullstack, Windows/Linux)\n- follow-ups: owner invites, open PRs, letting VIP projects like Freya know, and the Discord release-notes channel\n\nDelete all `/tmp` scratch files and worktrees you created.\n","frontmatter":{"name":"release-alpha","description":"Cut a Dioxus 0.x alpha release (version bump, crates.io publish, tag, GitHub release, CLI binaries, template update, verification, and optionally the SDK/icons/code/components releases)","argument-hint":"<new version, e.g. 0.8.0-alpha.3>","triggers":["user","model"],"allowed-tools":["read","grep","glob"],"allowedTools":["read","grep","glob"]},"allowedTools":["read","grep","glob"],"isInternal":false,"tokens":4358,"sizeBytes":16104},{"name":"component.md","path":"packages/core-macro/docs/component.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/core-macro/docs/component.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Component\n\nThe component macro turns a function with arguments that are [`Clone`] and [`PartialEq`] into a component. This is the recommended way of creating most components. If you want more fine grained control over how the overall prop struct implements the `Properties` trait, you can use an explicit props struct with the [`Props`] derive macro instead.\n\n## Arguments\n\n- `no_case_check` - Doesn't enforce `PascalCase` on your component names.\n  **This will be removed/deprecated in a future update in favor of a more complete Clippy-backed linting system.**\n  The reasoning behind this is that Clippy allows more robust and powerful lints, whereas\n  macros are extremely limited.\n\n## Features\n\nThis attribute:\n\n- Enforces that your component uses `PascalCase` or `snake_case` with at least one underscore.\n- Automatically creates a prop struct for your component if the function has arguments.\n- Verifies the function signature is valid as a component.\n\n## Examples\n\n- Without props:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn GreetBob() -> Element {\n    rsx! { \"hello, bob\" }\n}\n```\n\n- With props:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn GreetBob(bob: String) -> Element {\n    rsx! { \"hello, {bob}\" }\n}\n```\n\n## Prop Modifiers\n\nYou can use the `#[props()]` attribute to modify the behavior of the props the component macro creates:\n\n- [`#[props(default)]`](#default-props) - Makes the field optional in the component and uses the default value if it is not set when creating the component.\n- [`#[props(!optional)]`](#optional-props) - Makes a field with the type `Option<T>` required.\n- [`#[props(into)]`](#converting-props) - Converts a field into the correct type by using the [`Into`] trait.\n- [`#[props(extends = GlobalAttributes)]`](#extending-elements) - Extends the props with all the attributes from an element or the global element attributes.\n\nProps also act slightly differently when used with:\n\n- [`Option<T>`](#optional-props) - The field is automatically optional with a default value of `None`.\n- [`ReadSignal<T>`](#reactive-props) - The props macro will automatically convert `T` into `ReadSignal<T>` when it is passed as a prop.\n- [`String`](#formatted-props) - The props macro will accept formatted strings for any prop field with the type `String`.\n- [`children`](#children-props) - The props macro will accept child elements if you include the `children` prop.\n\n### Default Props\n\nThe `default` attribute lets you define a default value for a field if it isn't set when creating the component\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // The default attributes makes your field optional in the component and uses the default value if it is not set.\n    #[props(default)]\n    text: String,\n    // You can also set an explicit default value instead of using the `Default` implementation.\n    #[props(default = \"red\".to_string())]\n    color: String,\n) -> Element {\n    rsx! {\n        button {\n            color: color,\n            \"{text}\"\n        }\n    }\n}\n\nrsx! {\n    // You can skip setting props that have a default value when you use the component.\n    Button {}\n};\n```\n\n### Optional Props\n\nWhen defining a component, you may want to make a prop optional without defining an explicit default value. Any fields with the type `Option<T>` are automatically optional with a default value of `None`.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // Since the `text` field is optional, you don't need to set it when you use the component.\n    text: Option<String>,\n) -> Element {\n    rsx! {\n        button { {text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {}\n};\n```\n\nIf you want to make your `Option<T>` field required, you can use the `!optional` attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // You can use the `!optional` attribute on a field with the type `Option<T>` to make it required.\n    #[props(!optional)]\n    text: Option<String>,\n) -> Element {\n    rsx! {\n        button { {text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {\n        text: None\n    }\n};\n```\n\n### Converting Props\n\nYou can automatically convert a field into the correct type by using the `into` attribute. Any type you pass into the field will be converted with the [`Into`] trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // You can use the `into` attribute on a field to convert types you pass in with the Into trait.\n    #[props(into)]\n    number: u64,\n) -> Element {\n    rsx! {\n        button { \"{number}\" }\n    }\n}\n\nrsx! {\n    Button {\n        // Because we used the into attribute, we can pass in any type that implements Into<u64>\n        number: 10u8\n    }\n};\n```\n\n### Formatted Props\n\nYou can use formatted strings in attributes just like you would in an element. Any prop field with the type `String` can accept a formatted string:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(text: String,) -> Element {\n    rsx! {\n        button { \"{text}\" }\n    }\n}\n\nlet name = \"Bob\";\nrsx! {\n    Button {\n        // You can use formatted strings in props that accept String just like you would in an element.\n        text: \"Hello {name}!\"\n    }\n};\n```\n\n### Children Props\n\nRather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The \"magic\" children prop lets you achieve this:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Clickable(\n    href: String,\n    children: Element,\n) -> Element {\n    rsx! {\n        a {\n            href: \"{href}\",\n            class: \"fancy-button\",\n            {children}\n        }\n    }\n}\n```\n\nThis makes providing children to the component much simpler: simply put the RSX inside the {} brackets:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[component]\n# fn Clickable(\n#     href: String,\n#     children: Element,\n# ) -> Element {\n#     rsx! {\n#         a {\n#             href: \"{href}\",\n#             class: \"fancy-button\",\n#             {children}\n#         }\n#     }\n# }\nrsx! {\n    Clickable {\n        href: \"https://www.youtube.com/watch?v=C-M2hs3sXGo\",\n        \"How to \"\n        i { \"not\" }\n        \" be seen\"\n    }\n};\n```\n\n### Reactive Props\n\nIn dioxus, when a prop changes, the component will rerun with the new value to update the UI. For example, if count changes from 0 to 1, this component will rerun and update the UI to show \"Count: 1\":\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    rsx! {\n        div {\n            \"Count: {count}\"\n        }\n    }\n}\n```\n\nGenerally, just rerunning the component is enough to update the UI. However, if you use your prop inside reactive hooks like `use_memo` or `use_resource`, you may also want to restart those hooks when the prop changes:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can use a memo to calculate the doubled count. Since this memo will only be created the first time the component is run and `count` is not reactive, it will never update when `count` changes.\n    let doubled_count = use_memo(move || count * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\nTo fix this issue you can either:\n\n1. Make the prop reactive by wrapping it in `ReadSignal` (recommended):\n\n`ReadSignal` is a `Copy` reactive value. Dioxus will automatically convert any value into a `ReadSignal` when it is passed as a prop.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: ReadSignal<i32>) -> Element {\n    // Since we made count reactive, the memo will automatically rerun when count changes.\n    let doubled_count = use_memo(move || count() * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n2. Explicitly add the prop as a dependency to the reactive hook with [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/macro.use_reactive.html):\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can add the count prop as an explicit dependency to every reactive hook that uses it with use_reactive.\n    // The use_reactive macro takes a closure with explicit dependencies as its argument.\n    let doubled_count = use_memo(use_reactive!(|count| count * 2));\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n### Extending Elements\n\nThe `extends` attribute lets you extend your props with all the attributes from an element or the global element attributes.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Card(\n    // You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.\n    #[props(extends = GlobalAttributes)]\n    attributes: Vec<Attribute>,\n) -> Element {\n    rsx! {\n        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.\n        div { ..attributes, \"card\" }\n    }\n}\n\nrsx! {\n    // Since we extend global attributes, you can use any attribute that would normally appear on elements.\n    Card {\n        width: \"10px\",\n        height: \"10px\",\n        color: \"red\",\n    }\n};\n```\n\nTo extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    #[props(extends = GlobalAttributes, extends = button)]\n    attributes: Vec<Attribute>,\n) -> Element {\n    rsx! {\n        button { ..attributes, \"button\" }\n    }\n}\n\nrsx! {\n    Button {\n        // A global attribute\n        width: \"10px\",\n        // A button specific attribute\n        disabled: true,\n    }\n};\n```\n\nNote that extending from multiple elements will only work if the elements don't have conflicting attributes.\n","isInternal":false,"tokens":2491,"sizeBytes":10109},{"name":"props.md","path":"packages/core-macro/docs/props.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/core-macro/docs/props.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Props\n\nThe props derive macro allows you to define what props your component accepts and how to accept those props. Every component must either accept no arguments or accept a single argument that implements the `Properties` trait.\n\n> Note: You should generally prefer using the `#[component]` macro instead of the `#[derive(Props)]` macro with explicit props. The `#[component]` macro will automatically generate the props struct for you and perform extra checks to ensure that your component is valid.\n\n## Example\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// The text of the button\n    text: String,\n\n    /// The color of the button\n    color: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button {\n            color: props.color,\n            \"{props.text}\"\n        }\n    }\n}\n\nrsx! {\n    // Any fields you defined on the props struct will be turned into props for the component.\n    Button {\n        text: \"Click me!\",\n        color: \"red\",\n    }\n};\n```\n\n## Prop Modifiers\n\nYou can use the `#[props()]` attribute to modify the behavior of the props derive macro:\n\n- [`#[props(default)]`](#default-props) - Makes the field optional in the component and uses the default value if it is not set when creating the component.\n- [`#[props(!optional)]`](#optional-props) - Makes a field with the type `Option<T>` required.\n- [`#[props(into)]`](#converting-props) - Converts a field into the correct type by using the [`Into`] trait.\n- [`#[props(extends = GlobalAttributes)]`](#extending-elements) - Extends the props with all the attributes from an element or the global element attributes.\n\nProps also act slightly differently when used with:\n\n- [`Option<T>`](#optional-props) - The field is automatically optional with a default value of `None`.\n- [`ReadSignal<T>`](#reactive-props) - The props macro will automatically convert `T` into `ReadSignal<T>` when it is passed as a prop.\n- [`String`](#formatted-props) - The props macro will accept formatted strings for any prop field with the type `String`.\n- [`children`](#children-props) - The props macro will accept child elements if you include the `children` prop.\n\n### Default Props\n\nThe `default` attribute lets you define a default value for a field if it isn't set when creating the component\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    // The default attributes makes your field optional in the component and uses the default value if it is not set.\n    #[props(default)]\n    text: String,\n\n    /// You can also set an explicit default value instead of using the `Default` implementation.\n    #[props(default = \"red\".to_string())]\n    color: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button {\n            color: props.color,\n            \"{props.text}\"\n        }\n    }\n}\n\nrsx! {\n    // You can skip setting props that have a default value when you use the component.\n    Button {}\n};\n```\n\n### Optional Props\n\nWhen defining props, you may want to make a prop optional without defining an explicit default value. Any fields with the type `Option<T>` are automatically optional with a default value of `None`.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    // Since the `text` field is optional, you don't need to set it when you use the component.\n    text: Option<String>,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { {props.text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {}\n};\n```\n\nIf you want to make your `Option<T>` field required, you can use the `!optional` attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// You can use the `!optional` attribute on a field with the type `Option<T>` to make it required.\n    #[props(!optional)]\n    text: Option<String>,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { {props.text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {\n        text: None\n    }\n};\n```\n\n### Converting Props\n\nYou can automatically convert a field into the correct type by using the `into` attribute. Any type you pass into the field will be converted with the [`Into`] trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// You can use the `into` attribute on a field to convert types you pass in with the Into trait.\n    #[props(into)]\n    number: u64,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { \"{props.number}\" }\n    }\n}\n\nrsx! {\n    Button {\n        // Because we used the into attribute, we can pass in any type that implements Into<u64>\n        number: 10u8\n    }\n};\n```\n\n### Formatted Props\n\nYou can use formatted strings in attributes just like you would in an element. Any prop field with the type `String` can accept a formatted string:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    text: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { \"{props.text}\" }\n    }\n}\n\nlet name = \"Bob\";\nrsx! {\n    Button {\n        // You can use formatted strings in props that accept String just like you would in an element.\n        text: \"Hello {name}!\"\n    }\n};\n```\n\n### Children Props\n\nRather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The \"magic\" children prop lets you achieve this:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(PartialEq, Clone, Props)]\nstruct ClickableProps {\n    href: String,\n    children: Element,\n}\n\nfn Clickable(props: ClickableProps) -> Element {\n    rsx! {\n        a {\n            href: \"{props.href}\",\n            class: \"fancy-button\",\n            {props.children}\n        }\n    }\n}\n```\n\nThis makes providing children to the component much simpler: simply put the RSX inside the {} brackets:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[derive(PartialEq, Clone, Props)]\n# struct ClickableProps {\n#     href: String,\n#     children: Element,\n# }\n#\n# fn Clickable(props: ClickableProps) -> Element {\n#     rsx! {\n#         a {\n#             href: \"{props.href}\",\n#             class: \"fancy-button\",\n#             {props.children}\n#         }\n#     }\n# }\nrsx! {\n    Clickable {\n        href: \"https://www.youtube.com/watch?v=C-M2hs3sXGo\",\n        \"How to \"\n        i { \"not\" }\n        \" be seen\"\n    }\n};\n```\n\n### Reactive Props\n\nIn dioxus, when a prop changes, the component will rerun with the new value to update the UI. For example, if count changes from 0 to 1, this component will rerun and update the UI to show \"Count: 1\":\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    rsx! {\n        div {\n            \"Count: {count}\"\n        }\n    }\n}\n```\n\nGenerally, just rerunning the component is enough to update the UI. However, if you use your prop inside reactive hooks like `use_memo` or `use_resource`, you may also want to restart those hooks when the prop changes:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can use a memo to calculate the doubled count. Since this memo will only be created the first time the component is run and `count` is not reactive, it will never update when `count` changes.\n    let doubled_count = use_memo(move || count * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\nTo fix this issue you can either:\n\n1. Make the prop reactive by wrapping it in `ReadSignal` (recommended):\n\n`ReadSignal` is a `Copy` reactive value. Dioxus will automatically convert any value into a `ReadSignal` when it is passed as a prop.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: ReadSignal<i32>) -> Element {\n    // Since we made count reactive, the memo will automatically rerun when count changes.\n    let doubled_count = use_memo(move || count() * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n2. Explicitly add the prop as a dependency to the reactive hook with [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/macro.use_reactive.html):\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can add the count prop as an explicit dependency to every reactive hook that uses it with use_reactive.\n    // The use_reactive macro takes a closure with explicit dependencies as its argument.\n    let doubled_count = use_memo(use_reactive!(|count| count * 2));\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n### Extending Elements\n\nThe `extends` attribute lets you extend your props with all the attributes from an element or the global element attributes.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct CardProps {\n    /// You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.\n    #[props(extends = GlobalAttributes)]\n    attributes: Vec<Attribute>,\n}\n\n#[component]\nfn Card(props: CardProps) -> Element {\n    rsx! {\n        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.\n        div { ..props.attributes, \"card\" }\n    }\n}\n\nrsx! {\n    // Since we extend global attributes, you can use any attribute that would normally appear on elements.\n    Card {\n        width: \"10px\",\n        height: \"10px\",\n        color: \"red\",\n    }\n};\n```\n\nTo extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    #[props(extends = GlobalAttributes, extends = button)]\n    attributes: Vec<Attribute>,\n}\n\n#[component]\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { ..props.attributes, \"button\" }\n    }\n}\n\nrsx! {\n    Button {\n        // A global attribute\n        width: \"10px\",\n        // A button specific attribute\n        disabled: true,\n    }\n};\n```\n\nNote that extending from multiple elements will only work if the elements don't have conflicting attributes.\n","isInternal":false,"tokens":2581,"sizeBytes":10574},{"name":"rsx.md","path":"packages/core-macro/docs/rsx.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/core-macro/docs/rsx.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"The rsx! macro makes it easy for developers to write jsx-style markup in their components.\n\n## Elements\n\nYou can render elements with rsx! with the element name and then braces surrounding the attributes and children.\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div {\n        div {}\n    }\n};\n```\n\n<details>\n<summary>Web Components</summary>\n\nDioxus will automatically render any elements with `-` as a untyped web component:\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div-component {\n        div {}\n    }\n};\n```\n\nYou can wrap your web component in a custom component to add type checking:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn MyDivComponent(width: i64) -> Element {\n    rsx! {\n        div-component {\n            \"width\": width\n        }\n    }\n}\n```\n\n</details>\n\n## Attributes\n\nYou can add attributes to any element inside the braces. Attributes are key-value pairs separated by a colon.\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet width = 100;\nrsx! {\n    div {\n        // Set the class attribute to \"my-class\"\n        class: \"my-class\",\n        // attribute strings are automatically formatted with the format macro\n        width: \"{width}px\",\n    }\n};\n```\n\n### Optional Attributes\n\nYou can include optional attributes with an unterminated if statement as the value of the attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# let first_boolean = true;\n# let second_boolean = false;\nrsx! {\n    div {\n        // Set the class attribute to \"my-class\" if true\n        class: if first_boolean {\n            \"my-class\"\n        },\n        // Set the class attribute to \"my-other-class\" if false\n        class: if second_boolean {\n            \"my-other-class\"\n        }\n    }\n};\n```\n\n### Raw Attributes\n\nDioxus defaults to attributes that are type checked as html. If you want to include an attribute that is not included in the html spec, you can use the `raw` attribute surrounded by quotes:\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div {\n        // Set the data-count attribute to \"1\"\n        \"data-count\": \"1\"\n    }\n};\n```\n\n## Text\n\nYou can include text in your markup as a string literal:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet name = \"World\";\nrsx! {\n    div {\n        \"Hello World\"\n        // Just like attributes, you can included formatted segments inside your text\n        \"Hello {name}\"\n    }\n};\n```\n\n## Components\n\nYou can render any [`macro@crate::component`]s you created inside your markup just like elements. Components must either start with a capital letter or contain a `_` character.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn HelloWorld() -> Element {\n    rsx! { \"hello world!\" }\n}\n\nrsx! {\n    div {\n        HelloWorld {}\n    }\n};\n```\n\n## If statements\n\nYou can use if statements to conditionally render children. The body of the for if statement is parsed as rsx markup:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet first_boolean = true;\nlet second_boolean = false;\nrsx! {\n    if first_boolean {\n        div {\n            \"first\"\n        }\n    }\n\n    if second_boolean {\n        \"second\"\n    }\n};\n```\n\n## For loops\n\nYou can also use for loops to iterate over a collection of items. The body of the for loop is parsed as rsx markup:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet numbers = vec![1, 2, 3];\nrsx! {\n    for number in numbers {\n        div {\n            \"{number}\"\n        }\n    }\n};\n```\n\n## Raw Expressions\n\nYou can include raw expressions inside your markup inside curly braces. Your expression must implement the [`IntoDynNode`](https://docs.rs/dioxus-core/latest/dioxus_core/trait.IntoDynNode.html) trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet name = \"World\";\nrsx! {\n    div {\n        // Text can be converted into a dynamic node in rsx\n        {name}\n    }\n    // Iterators can also be converted into dynamic nodes\n    {(0..10).map(|n| n * n).map(|number| rsx! { div { \"{number}\" } })}\n};\n```\n","isInternal":false,"tokens":987,"sizeBytes":3920},{"name":"common_spawn_errors.md","path":"packages/core/docs/common_spawn_errors.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/core/docs/common_spawn_errors.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"## Compiler errors you may run into while using spawn\n\n<details>\n<summary>async block may outlive the current function, but it borrows `value`, which is owned by the current function</summary>\n\nTasks in Dioxus need only access data that can last for the entire lifetime of the application. That generally means data that is moved into the async block. **If you get this error, you may have forgotten to add `move` to your async block.**\n\nBroken component:\n\n```rust, compile_fail\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    let signal = use_signal(|| 0);\n\n    use_hook(move || {\n        // ❌ The task may run at any point and reads the value of the signal, but the signal is dropped at the end of the function\n        spawn(async {\n            println!(\"{}\", signal());\n        })\n    });\n\n    todo!()\n}\n```\n\nFixed component:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    let signal = use_signal(|| 0);\n\n    use_hook(move || {\n        // ✅ The `move` keyword tells rust it can move the `state` signal into the async block. Since the async block owns the signal state, it can read it even after the function returns\n        spawn(async move {\n            println!(\"{}\", signal());\n        })\n    });\n\n    todo!()\n}\n```\n\n</details>\n\n<details>\n<summary>use of moved value: `value`. move occurs because `value` has type `YourType`, which does not implement the `Copy` trait</summary>\n\nData in rust has a single owner. If you run into this error, you have likely tried to move data that isn't `Copy` into two different async tasks. **You can fix this issue by making your data `Copy` or calling `clone` on it before you move it into the async block.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which cannot be copied implicitly\n#[component]\nfn MyComponent(string: String) -> Element {\n    use_hook(move || {\n        // ❌ We are moving the string into the async task which means we can't access it elsewhere\n        spawn(async move {\n            println!(\"{}\", string);\n        });\n        // ❌ Since we already moved the string, we can't move it into our new task. This will cause a compiler error\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\nYou can fix this issue by either:\n\n- Making your data `Copy` with `ReadSignal`:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts `ReadSignal<String>` which implements `Copy`\n#[component]\nfn MyComponent(string: ReadSignal<String>) -> Element {\n    use_hook(move || {\n        // ✅ Because the `string` signal is `Copy`, we can copy it into the async task while still having access to it elsewhere\n        spawn(async move {\n            println!(\"{}\", string);\n        });\n        // ✅ Since `string` is `Copy`, we can copy it into another async task\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\n- Calling `clone` on your data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which doesn't implement `Copy`\n#[component]\nfn MyComponent(string: String) -> Element {\n    use_hook(move || {\n        // ✅ The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n        spawn({\n            // Clone the string in a new block\n            let string = string.clone();\n            // Then move the cloned string into the async block\n            async move {\n                println!(\"{}\", string);\n            }\n        });\n        // ✅ We don't use the string after this closure, so we can just move it into the closure directly\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\n</details>\n","isInternal":false,"tokens":883,"sizeBytes":3869},{"name":"reactivity.md","path":"packages/core/docs/reactivity.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/core/docs/reactivity.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Reactivity\n\nThe core of dioxus relies on the concept of reactivity. Reactivity is the system that updates your app when state changes.\n\nThere are two parts to reactivity: **Reactive Contexts** and **Tracked Values**.\n\n## Reactive Contexts\n\nReactive Contexts keep track of what state different parts of your app rely on. Reactive Context show up throughout dioxus: Component, use_effect, use_memo and use_resource all have their own reactive contexts:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet count = use_signal(|| 0);\n// The reactive context in the memo knows that the memo depends on the count signal\nuse_memo(move || count() * 2);\n```\n\n## Tracked Values\n\nTracked values are values that reactive contexts know about. When you read a tracked value, the reactive context will rerun when the value changes. Signals, Memos, and Resources are all tracked values:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// The count signal is tracked\nlet count = use_signal(|| 0);\n// When you read the count signal, the reactive context subscribes to the count signal\nlet double_count = use_memo(move || count() * 2);\n```\n\n## Reactivity\n\nReactivity is the system that combines reactive context and tracked values to update your app when state changes.\n\nYou can use reactivity to create derived state and update your app when state changes.\n\nYou can derive state from other state with [`use_memo`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_memo.html).\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet mut count = use_signal(|| 0);\nlet double_count = use_memo(move || count() * 2);\n\n// Now whenever we read double_count, we know it is always twice the value of count\nprintln!(\"{}\", double_count); // Prints \"2\"\n\n// After we write to count, the reactive context will rerun and double_count will be updated automatically\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"4\"\n```\n\nYou can also use reactivity to create derive state asynchronously. For example, you can use [`use_resource`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_resource.html) to load data from a server:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet count = use_signal(|| 0);\nlet double_count = use_resource(move || async move {\n    // Start a request to the server. We are reading the value of count to format it into the url\n    // Since we are reading count, this resource will \"subscribe\" to changes to count (when count changes, the resource will rerun)\n    let response = reqwest::get(format!(\"https://myserver.com/doubleme?count={count}\")).await.unwrap();\n    response.text().await.unwrap()\n});\n```\n\n## Non Reactive State\n\nYou can use plain Rust types in Dioxus, but you should be aware that they are not reactive. If you read the non-reactive state, reactive scopes will not subscribe to the state.\n\nYou can make non-reactive state reactive by using the `Signal` type instead of a plain Rust type or by using the `use_reactive` hook.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\n// ❌ Don't create non-reactive state\nlet state = use_hook(|| std::cell::RefCell::new(0));\n\n// Computed values will get out of date if the state they depend on is not reactive\nlet doubled = use_memo(move || *state.borrow() * 2);\n\n// ✅ Create reactive state\nlet state = use_signal(|| 0);\n\n// Computed values will automatically keep up to date with the latest reactive state\nlet doubled = use_memo(move || state() * 2);\n\n// ❌ Don't depend on non-reactive prop state in memos/resources\n#[component]\nfn MyComponent(state: i32) -> Element {\n    let doubled = use_memo(move || state * 2);\n    todo!()\n}\n\n// ✅ Wrap your props in ReadSignal to make them reactive\n#[component]\nfn MyReactiveComponent(state: ReadSignal<i32>) -> Element {\n    let doubled = use_memo(move || state() * 2);\n    todo!()\n}\n```\n\nIf your state can't be reactive, you can use the `use_reactive` hook to make it reactive.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet state = rand::random::<i32>();\n\n// You can make the state reactive by wrapping it in use_reactive\nlet doubled = use_memo(use_reactive!(|state| state * 2));\n```\n","isInternal":false,"tokens":1004,"sizeBytes":4059},{"name":"eval.md","path":"packages/document/docs/eval.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/document/docs/eval.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Communicating with JavaScript\n\nYou can use the `eval` function to execute JavaScript code in your application with the desktop, mobile, web or liveview renderers. Eval takes a block of JavaScript code (that may be asynchronous) and returns a `Eval` object that you can use to send data to the JavaScript code and receive data from it.\n\n<div class=\"warning\">\n\n## Safety\n\nPlease be careful when executing JavaScript code with `eval`. You should only execute code that you trust. **This applies especially to web targets, where the JavaScript context has access to most, if not all of your application data.** Running untrusted code can lead to a [cross-site scripting](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) (XSS) vulnerability.\n\n</div>\n\n```rust\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| async move {\n                // Eval is a global function you can use anywhere inside Dioxus. It will execute the given JavaScript code.\n                let result = document::eval(r#\"console.log(\"Hello World\");\n                return \"Hello World\";\"#);\n\n                // You can use the `await` keyword to wait for the result of the JavaScript code.\n                println!(\"{:?}\", result.await);\n            },\n            \"Log Hello World\"\n        }\n    }\n}\n```\n\n## Sending data to JavaScript\n\nWhen you execute JavaScript code with `eval`, you can pass data to it by formatting the value into the JavaScript code or sending values to the `Eval` channel.\n\n```rust\nuse dioxus::prelude::*;\n\nfn app() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| {\n                // You can pass initial data to the eval function by formatting it into the JavaScript code.\n                const LOOP_COUNT: usize = 10;\n                let eval = document::eval(&format!(r#\"for(let i = 0; i < {LOOP_COUNT}; i++) {{\n                    // You can receive values asynchronously with the `await dioxus.recv()` method.\n                    let value = await dioxus.recv();\n                    console.log(\"Received\", value);\n                }}\"#));\n\n                // You can send values from rust to the JavaScript code with the `send` method on the object returned by `eval`.\n                for i in 0..LOOP_COUNT {\n                    eval.send(i).unwrap();\n                }\n            },\n            \"Log Count\"\n        }\n    }\n}\n```\n\n## Sending data from JavaScript\n\nThe `Eval` struct also contains methods for receiving values you send from JavaScript. You can use the `dioxus.send()` method to send values to the JavaScript code and the `Eval::recv()` method to receive values from the JavaScript code.\n\n```rust\nuse dioxus::prelude::*;\n\nfn app() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| async move {\n                // You can send values from rust to the JavaScript code by using the `send` method on the object returned by `eval`.\n                let mut eval = document::eval(r#\"for(let i = 0; i < 10; i++) {\n                    // You can send values asynchronously with the `dioxus.send()` method.\n                    dioxus.send(i);\n                }\"#);\n\n                // You can receive values from the JavaScript code with the `recv` method on the object returned by `eval`.\n                for _ in 0..10 {\n                    let value: i32 = eval.recv().await.unwrap();\n                    println!(\"Received {}\", value);\n                }\n            },\n            \"Log Count\"\n        }\n    }\n}\n```\n\n## Interacting with the DOM with Eval\n\nYou can also use the `eval` function to execute JavaScript code that reads or modifies the DOM. If you want to interact with the mounted DOM, you need to use `eval` inside the [`use_effect`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html) hook which runs after the component has been mounted.\n\n```rust\nuse dioxus::prelude::*;\n\nconst SCRIPT: &str = r#\"\n    let element = document.getElementById(\"my-element\");\n    element.innerHTML = \"Hello World\";\n    return element.getAttribute(\"data-count\");\n\"#;\n\nfn app() -> Element {\n    // ❌ You shouldn't run eval in the body of a component. This will run before the component has been mounted\n    // document::eval(SCRIPT);\n\n    // ✅ You should run eval inside an effect or event. This will run after the component has been mounted\n    use_effect(move || {\n        spawn(async {\n            let count = document::eval(SCRIPT).await;\n            println!(\"Count is {:?}\", count);\n        });\n    });\n\n\n    rsx! {\n        div {\n            id: \"my-element\",\n            \"data-count\": \"123\",\n        }\n    }\n}\n```\n","isInternal":false,"tokens":1008,"sizeBytes":4663},{"name":"head.md","path":"packages/document/docs/head.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/document/docs/head.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Modifying the Head\n\nDioxus includes a series of components that render into the head of the page:\n\n- [Title]\n- [Meta]\n- [document::Link](crate::Link)\n- [Script]\n- [Style]\n\nEach of these components can be used to add extra information to the head of the page. For example, you can use the `Title` component to set the title of the page, or the `Meta` component to add extra metadata to the page.\n\n## Limitations\n\nComponents that render into the head of the page do have a few key limitations:\n\n- With the exception of the `Title` component, all components that render into the head cannot be modified after the first time they are rendered.\n- Components that render into the head will not be removed even after the component is removed from the tree.\n- Components that render into the head do not have a guaranteed ordering; thus, components should ideally not be order dependent, since they may not appear in the head in the order they are defined.\n\n## Example\n\n```rust, no_run\n# use dioxus::prelude::*;\nfn RedirectToDioxusHomepageWithoutJS() -> Element {\n    rsx! {\n        // You can use the meta component to render a meta tag into the head of the page\n        // This meta tag will redirect the user to the dioxuslabs homepage in 10 seconds\n        document::Meta {\n            http_equiv: \"refresh\",\n            content: \"10;url=https://dioxuslabs.com\",\n        }\n    }\n}\n```\n\n## Overcoming Ordering Issues\n\nSince Dioxus does not guarantee head element ordering, one can use es6 imports as a more predictable way to handle dependencies.\n\n```rust, ignore\n# use dioxus::prelude::*;\nstatic HIGHLIGHT: Asset = asset!(\"/assets/highlight/es/highlight.min.js\");\nstatic RUST: Asset = asset!(\"/assets/highlight/es/languages/rust.min.js\");\nstatic STYLE: Asset = asset!(\"/assets/highlight/styles/atom-one-dark.css\");\n\nfn App() -> Element {\n    rsx! {\n        document::Link { rel: \"stylesheet\", href: STYLE }\n        document::Script {\n            type: \"module\",\n            r#\"import hljs from \"{HIGHLIGHT}\";\n            import rust from \"{RUST}\";\n            hljs.registerLanguage('rust', rust);\n            hljs.highlightAll();\"#\n        }\n        pre {\n            code {\n                class: \"language-rust\",\n                \"fn main() {{\\nprintln!(\\\"Hello, world!\\\");\\n}}\"\n            }\n        }\n    }\n}\n```\n\n## Fullstack Rendering\n\nHead components are compatible with fullstack rendering, but only head components that are rendered in the initial render (before suspense boundaries resolve) will be rendered into the head.\n\nIf you have any important metadata that you want to render into the head, make sure to render it outside of any pending suspense boundaries.\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[component]\n# fn LoadData(children: Element) -> Element { unimplemented!() }\nfn App() -> Element {\n    rsx! {\n        // This will render in SSR\n        document::Title { \"My Page\" }\n        SuspenseBoundary {\n            fallback: |_| rsx! { \"Loading...\" },\n            LoadData {\n                // This will only be rendered on the client after hydration so it may not be visible to search engines\n                document::Meta { name: \"description\", content: \"My Page\" }\n            }\n        }\n    }\n}\n```\n","isInternal":false,"tokens":735,"sizeBytes":3230},{"name":"derived_state.md","path":"packages/hooks/docs/derived_state.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/hooks/docs/derived_state.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"Creates a new Memo. The memo will be run immediately and whenever any signal it reads is written to. Memos can be used to efficiently compute derived data from signals.\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus_signals::*;\n\nfn App() -> Element {\n    let mut count = use_signal(|| 0);\n    // the double memo will always be equal to two times the value of count, even after count changes\n    let double = use_memo(move || count * 2);\n\n    rsx! {\n        \"{double}\"\n        button {\n            // When count changes, the memo will rerun and double will be updated\n            // memos rerun any time you write to a signal they read. They will only rerun values/component that depend on them if the value of the memo changes\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThe closure you pass into memos will be called whenever the state you read inside the memo is written to even if the value hasn't actually changed, but the memo you get will not rerun other parts of your app unless the output changes (`PartialEq` returns false).\n\nLets dig into some examples to see how this works:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut count = use_signal(|| 1);\n// double_count will rerun when state we read inside the memo changes (count)\nlet double_count = use_memo(move || count() * 2);\n\n// memos act a lot like a read only version of a signal. You can read them, display them, and move them around like any other signal\nprintln!(\"{}\", double_count); // Prints \"2\"\n\n// But you can't write to them directly\n// Instead, any time you write to a value the memo reads, the memo will rerun\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"4\"\n\n// Lets create another memo that reads the value of double_count\nlet double_count_plus_one = use_memo(move || double_count() + 1);\n\nprintln!(\"{}\", double_count_plus_one); // Prints \"5\"\n\n// Now if we write to count the double_count memo will rerun\n// If that the output of double_count changes, then it will cause double_count_plus_one to rerun\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"6\"\nprintln!(\"{}\", double_count_plus_one); // Prints \"7\"\n\n// However if the value of double_count doesn't change after a write, then it won't trigger double_count_plus_one to rerun\n// Since we just write the same value, the doubled value is still 6 and we don't rerun double_count_plus_one\n*count.write() = 3;\n\nprintln!(\"{}\", double_count); // Prints \"6\"\nprintln!(\"{}\", double_count_plus_one); // Prints \"7\"\n```\n\n## With non-reactive dependencies\n\nTo add non-reactive dependencies, you can use the [`crate::use_reactive()`] hook.\n\nSignals will automatically be added as dependencies, so you don't need to call this method for them.\n\n```rust\n# use dioxus::prelude::*;\n#[component]\nfn Comp(count: u32) -> Element {\n// Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.\nlet new_count = use_memo(use_reactive((&count,), |(count,)| count + 1));\n    todo!()\n}\n```\n","isInternal":false,"tokens":725,"sizeBytes":3009},{"name":"moving_state_around.md","path":"packages/hooks/docs/moving_state_around.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/hooks/docs/moving_state_around.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"<details>\n<summary>How should I move around state? (Click here to learn more about moving around and sharing state in Dioxus)</summary>\n\nYou will often need to move state around between your components. Dioxus provides three different ways to pass around state:\n\n1. Just pass your values as [props](https://dioxuslabs.com/learn/0.7/essentials/ui/components#component-properties):\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let count = use_signal(|| 0);\n\n    rsx! {\n        IncrementButton {\n            count\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut count: Signal<i32>) -> Element {\n    rsx! {\n        button {\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThis is the most common way to pass state around. It is the most explicit and local to your component. Use this when it isn't overly annoying to pass around a value.\n\n2. Use [use_context](https://dioxuslabs.com/learn/0.7/essentials/basics/context) to pass state from a parent component to all children:\n\n```rust\n# use dioxus::prelude::*;\n#[derive(Clone, Copy)]\nstruct MyState {\n    count: Signal<i32>\n}\n\nfn ParentComponent() -> Element {\n    // Use context provider provides an unique type to all children of this component\n    use_context_provider(|| MyState { count: Signal::new(0) });\n\n    rsx! {\n        // IncrementButton will have access to the count without explicitly passing it through props\n        IncrementButton {}\n    }\n}\n\n#[component]\nfn IncrementButton() -> Element {\n    // Use context gets the value from a parent component\n    let mut count = use_context::<MyState>().count;\n\n    rsx! {\n        button {\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThis is slightly less explicit than passing it as a prop, but it is still local to the component. This is really great if you want state that is global to part of your app. It lets you create multiple global-ish states while still making state different when you reuse components. If I create a new `ParentComponent`, it will have a new `MyState`.\n\n3. Globals let you share state with your whole app with rust statics:\n\n```rust\n# use dioxus::prelude::*;\n// Count will be created the first time you access it with the closure you pass to Signal::global\nstatic COUNT: GlobalSignal<i32> = Signal::global(|| 0);\n\nfn ParentComponent() -> Element {\n    rsx! {\n        IncrementButton {}\n    }\n}\n\nfn IncrementButton() -> Element {\n    rsx! {\n        button {\n            // You don't need to pass anything around or get anything out of the context because COUNT is global\n            onclick: move |_| *COUNT.write() += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nGlobal state can be very ergonomic if your state is truly global, but you shouldn't use it if you need state to be different for different instances of your component. If I create another `IncrementButton` it will use the same `COUNT`. Libraries should generally avoid this to make components more reusable.\n\n> Note: Even though it is in a static, `COUNT` will be different for each app instance (this is generally only reliant on the server).\n\n</details>\n","isInternal":false,"tokens":729,"sizeBytes":3171},{"name":"rules_of_hooks.md","path":"packages/hooks/docs/rules_of_hooks.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/hooks/docs/rules_of_hooks.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"## Additional Information that may be useful\n\n<details>\n<summary>This function is a hook which means you need to <b>follow the rules of hooks</b> when you call it. You can click here to learn more about the rules of hooks.</summary>\n\nHooks in dioxus need to run in the same order every time you run the component. To make sure you run hooks in a consistent order, you should follow the rules of hooks:\n\n1. Hooks should only be called from the root of a component or another hook\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    // ✅ You can call hooks from the body of a component\n    let number = use_signal(|| 1);\n    if number() == 1 {\n        // ❌ You can run into issues if you can hooks inside other expressions inside your component\n        // If number changes from 0 to 1, the order of the hooks will be different and your app may panic\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    todo!()\n}\n\nfn use_my_hook() -> Signal<i32> {\n    // ✅ You can call hooks from the body of other hooks\n    let number = use_signal(|| 1);\n    // ❌ Again, creating hooks inside expressions inside other hooks can cause issues\n    if number() == 1 {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    number\n}\n```\n\n2. Hooks should always start with `use_` to make it clear that you need to call them in a consistent order\n\nBecause hooks should only be called from the root of a component or another hook, you shouldn't call hooks inside of:\n\n- ❌ Conditionals\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1);\n    // ❌ Changing the condition will change the order of the hooks\n    if number() == 1 {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    // ❌ Changing the value you are matching will change the order of the hooks\n    match number() {\n        1 => {\n            let string = use_signal(|| \"hello world\".to_string());\n        },\n        _ => (),\n    }\n\n    todo!()\n}\n```\n\n- ❌ Loops\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1);\n    // ❌ Changing the loop will change the order of the hooks\n    for i in 0..number() {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    todo!()\n}\n```\n\n- ❌ Event Handlers\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| {\n                // ❌ Calling the event handler will change the order of the hooks\n                use_signal(|| \"hello world\".to_string());\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n- ❌ Initialization closures in other hooks\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| {\n        // ❌ This closure will only be called when the component is first created. Running the component will change the order of the hooks\n        let string = use_signal(|| \"hello world\".to_string());\n        string()\n    });\n\n    todo!()\n}\n```\n\n<details>\n<summary>Why do hooks need to run in a consistent order?</summary>\n\nHooks need to be run in a consistent order because dioxus stores hooks in a list and uses the order you run hooks in to determine what part of the state belongs to which hook.\n\nLets look at an example component:\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1); // Hook 1\n    let string = use_signal(|| \"hello world\".to_string()); // Hook 2\n    let doubled = use_memo(move || number() * 2); // Hook 3\n\n    todo!()\n}\n```\n\nWhen we first create the component, we run the hooks in the order they are defined and store the state in the component in a list.\n\n```rust, ignore\n[\n    Box::new(1),\n    Box::new(\"hello world\".to_string()),\n    Box::new(2),\n]\n```\n\nNext time we run the component, we return items from the state list instead of creating state again.\n\n```rust, ignore\n[\n    Box::new(1), // Hook 1 returns 1\n    Box::new(\"hello world\".to_string()), // Hook 2 returns \"hello world\"\n    Box::new(2), // Hook 3 returns 2\n]\n```\n\nThe order the hooks are run it must be the same because the order determines which hook gets what state! If you run the hooks in a different order, dioxus may panic because it can't turn the state back into the right type or you may just get the wrong state for your hook.\n\n</details>\n\n</details>\n","isInternal":false,"tokens":1090,"sizeBytes":4367},{"name":"side_effects.md","path":"packages/hooks/docs/side_effects.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/hooks/docs/side_effects.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"Effects are reactive closures that run **after the component has finished rendering**. Effects are useful for things like manually updating the DOM after it is rendered with web-sys or javascript. Or reading a value from the rendered DOM.\n\n**Effects are specifically created for side effects. If you are trying to derive state, use a [memo](#derived-state), or [resource](#derived-async-state) instead.**\n\nIf you are trying to update the DOM, you can use the [`use_effect`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_effect.html) hook to run an effect after the component has finished rendering.\n\n`use_effect` will subscribe to any changes in the signal values it captures effects will always run after first mount and then whenever the signal values change. If the use_effect call was skipped due to an early return, the effect will no longer activate.\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let mut count = use_signal(|| 0);\n\n    use_effect(move || {\n        // Effects are reactive like memos, and resources. If you read a value inside the effect, the effect will rerun when that value changes\n        let count = count.read();\n\n        // You can use the count value to update the DOM manually\n        document::eval(&format!(\n            r#\"var c = document.getElementById(\"dioxus-canvas\");\nvar ctx = c.getContext(\"2d\");\nctx.font = \"30px Arial\";\nctx.fillText(\"{count}\", 10, 50);\"#\n        ));\n    });\n\n    rsx! {\n        button {\n            // When you click the button, count will be incremented and the effect will rerun\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n        canvas {\n            id: \"dioxus-canvas\",\n        }\n    }\n}\n```\n\n## With non-reactive dependencies\n\nTo add non-reactive dependencies, you can use the [`crate::use_reactive()`] hook.\n\nSignals will automatically be added as dependencies, so you don't need to call this method for them.\n\n```rust\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\n\n#[component]\nfn Comp(count: u32) -> Element {\n    // Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.\n    use_effect(use_reactive((&count,), |(count,)| println!(\"Manually manipulate the dom\") ));\n\n    todo!()\n}\n```\n\n## Modifying mounted nodes\n\nOne of the most common use cases for effects is modifying or reading something from the rendered DOM. Dioxus provides access to the DOM with the [`onmounted`](https://docs.rs/dioxus/latest/dioxus/events/fn.onmounted.html) event.\n\nYou can combine `use_effect` with `onmounted` to run an effect with access to a DOM element after all rendering is finished:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let mut current_text = use_signal(String::new);\n    let mut mounted_text_div: Signal<Option<MountedEvent>> = use_signal(|| None);\n    let mut rendered_size = use_signal(String::new);\n\n    use_effect(move || {\n        // If we have mounted the text div, we can read the width of the div\n        if let Some(div) = mounted_text_div() {\n            // We read the current text here inside of the effect instead of the spawn so the effect subscribes to the signal\n            let text = current_text();\n            spawn(async move {\n                let bounding_box = div.get_client_rect().await;\n                rendered_size.set(format!(\"{text} is {bounding_box:?}\"));\n            });\n        }\n    });\n\n    rsx! {\n        input {\n            // When you enter text into the input, the effect will rerun because it subscribes to the current_text signal\n            oninput: move |evt| current_text.set(evt.value()),\n            placeholder: \"Enter text here\",\n            value: \"{current_text}\"\n        }\n        // When text changes, it will change the size of this div\n        div {\n            onmounted: move |element| {\n                mounted_text_div.set(Some(element.clone()));\n            },\n            \"{current_text}\"\n        }\n\n        \"{rendered_size}\"\n    }\n}\n```\n","isInternal":false,"tokens":907,"sizeBytes":4019},{"name":"use_resource.md","path":"packages/hooks/docs/use_resource.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/hooks/docs/use_resource.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"[`use_resource()`] is a reactive hook that resolves to the result of a future. It will rerun when you write to any signals you read inside the future.\n\n## Example\n\n```rust\nuse dioxus::prelude::*;\n\nasync fn get_weather(location: &WeatherLocation) -> Result<String, String> {\n    Ok(\"Sunny\".to_string())\n}\n\nfn app() -> Element {\n    let country = use_signal(|| WeatherLocation {\n        city: \"Berlin\".to_string(),\n        country: \"Germany\".to_string(),\n        coordinates: (52.5244, 13.4105),\n    });\n\n    // Because the resource's future subscribes to `country` by reading it (`country.read()`),\n    // every time `country` changes the resource's future will run again and thus provide a new value.\n    let current_weather = use_resource(move || async move { get_weather(&country()).await });\n\n    rsx! {\n        // the value of the resource can be polled to\n        // conditionally render elements based off if it's future\n        // finished (Some(Ok(_)), errored Some(Err(_)),\n        // or is still running (None)\n        match &*current_weather.read_unchecked() {\n            Some(Ok(weather)) => rsx! { WeatherElement { weather } },\n            Some(Err(e)) => rsx! { p { \"Loading weather failed, {e}\" } },\n            None =>  rsx! { p { \"Loading...\" } }\n        }\n    }\n}\n\n#[derive(Clone)]\nstruct WeatherLocation {\n    city: String,\n    country: String,\n    coordinates: (f64, f64),\n}\n\n#[component]\nfn WeatherElement(weather: String) -> Element {\n    rsx! { p { \"The weather is {weather}\" } }\n}\n```\n\n## Reactivity\n\n`use_resource` is reactive which just means that it will rerun when you write to any signals you read inside the future. This means that any time you change something the future depends on, the resource automatically knows to rerun. Lets take a look at some examples:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// Create a new count signal\nlet mut count = use_signal(|| 1);\n// Create a new resource that doubles the value of count\nlet double_count = use_resource(move || async move {\n    // Start a request to the server. We are reading the value of count in the format macro\n    // Reading the value of count makes the resource \"subscribe\" to changes to count (when count changes, the resource will rerun)\n    let response = reqwest::get(format!(\"https://myserver.com/doubleme?count={count}\")).await.unwrap();\n    response.text().await.unwrap()\n});\n\n// Resource can be read in a way that is similar to signals, but they have a bit of extra information about the state of the resource future.\n\n// Calling .state() on a resource will return a Signal<UseResourceState> with information about the current status of the resource\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Pending\"\n\n// You can also try to get the last resolved value of the resource with the .value() method\nprintln!(\"{:?}\", double_count.read()); // Prints \"None\"\n\n// Wait for the resource to finish and get the value\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\n// Now if we read the state, we will see that it is done\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\n// And we can get the value\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(2)\"\n\n// Now if we write to count, the resource will rerun\ncount += 1; // count is now 2\n\n// Wait for the resource to finish and get the value\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\n// Now if we read the state, we will see that it is done\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\n// And we can get the value\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(4)\"\n\n// One more case, what happens if we write to the resource while it is in progress?\n// The resource will rerun and the value will be None\ncount += 1; // count is now 3\n\n// If we write to a value the resource subscribes to again, it will cancel the current future and start a new one\ncount += 1; // count is now 4\n\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Stopped\"\nprintln!(\"{:?}\", double_count.read()); // Prints the last resolved value \"Some(4)\"\n\n// After we wait for the resource to finish, we will get the value of only the latest future\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(8)\"\n```\n\n## With non-reactive dependencies\n\n`use_resource` can determine dependencies automatically with any reactive value ([`Signal`]s, [`ReadSignal`]s, [`Memo`]s, [`Resource`]s, etc). If you need to rerun the future when a normal rust value changes, you can add it as a dependency with the [`crate::use_reactive()`] hook:\n\n```rust\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\n#[component]\nfn Comp(count: u32) -> Element {\n    // We manually add the resource to the dependencies list with the `use_reactive` hook\n    // Any time `count` changes, the resource will rerun\n    let new_count = use_resource(use_reactive!(|(count,)| async move {\n        sleep(100).await;\n        count + 1\n    }));\n    rsx! { \"{new_count:?}\" }\n}\n\n// If your value is already reactive, you never need to call `use_reactive` manually\n// Instead of manually adding count to the dependencies list, you can make your prop reactive by wrapping it in `ReadSignal`\n#[component]\nfn ReactiveComp(count: ReadSignal<u32>) -> Element {\n    // Because `count` is reactive, the resource knows to rerun when `count` changes automatically\n    let new_count = use_resource(move || async move {\n        sleep(100).await;\n        count() + 1\n    });\n    rsx! { \"{new_count:?}\" }\n}\n```\n\n## Differences from `use_future` and `use_memo`\n\nJust like [`crate::use_future()`], `use_resource` spawns an async task in a component. However, unlike [`crate::use_future()`], `use_resource` returns the result of the future and will rerun when any dependencies change.\n\nResources return a value based on some existing state just like memos, but unlike memos, resources do not memorize the output of the closure. They will always rerun any parts of your app that read the value of the resource when the future resolves even if the output doesn't change.\n\nSee also: [`Resource`]\n","isInternal":false,"tokens":1520,"sizeBytes":6252},{"name":"common_event_handler_errors.md","path":"packages/html/docs/common_event_handler_errors.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/html/docs/common_event_handler_errors.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"## Compiler errors you may run into while using event handlers\n\n<details>\n<summary>function requires argument type to outlive `'static`</summary>\n\nEvent handler in Dioxus need only access data that can last for the entire lifetime of the application. That generally means data that is moved into the closure. **If you get this error, you may have forgotten to add `move` to your closure.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// We return an Element which can last as long as the component is on the screen\nfn App() -> Element {\n    // Signals are `Copy` which makes them very easy to move into `'static` closures like event handlers\n    let state = use_signal(|| \"hello world\".to_string());\n\n    rsx! {\n        button {\n            // ❌ Without `move`, rust will try to borrow the `state` signal which fails because the state signal is dropped at the end of the function\n            onclick: |_| {\n                println!(\"You clicked the button! The state is: {state}\");\n            },\n            \"Click me\"\n        }\n    }\n    // The state signal is dropped here, but the event handler still needs to access it\n}\n```\n\nFixed component:\n\n```rust, no_run\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let state = use_signal(|| \"hello world\".to_string());\n\n    rsx! {\n        button {\n            // ✅ The `move` keyword tells rust it can move the `state` signal into the closure. Since the closure owns the signal state, it can read it even after the function returns\n            onclick: move |_| {\n                println!(\"You clicked the button! The state is: {state}\");\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n</details>\n\n<details>\n<summary>use of moved value: `your_value` value used here after move</summary>\n\nData in rust has a single owner. If you run into this error, you have likely tried to move data that isn't `Copy` into two different closures. **You can fix this issue by making your data `Copy` or calling `clone` on it before you move it into the closure.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which cannot be copied implicitly\n#[component]\nfn MyComponent(string: String) -> Element {\n    rsx! {\n        button {\n            // ❌ We are moving the string into the onclick handler which means we can't access it elsewhere\n            onclick: move |_| {\n                println!(\"{string}\");\n            },\n            \"Print hello world\"\n        }\n        button {\n            // ❌ Since we already moved the string, we can't move it into the onclick handler again. This will cause a compiler error\n            onclick: move |_| {\n                println!(\"{string}\");\n            },\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\nYou can fix this issue by either:\n\n- Making your data `Copy` with `ReadSignal`:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts `ReadSignal<String>` which implements `Copy`\n#[component]\nfn MyComponent(string: ReadSignal<String>) -> Element {\n    rsx! {\n        button {\n            // ✅ Because the `string` signal is `Copy`, we can copy it into the closure while still having access to it elsewhere\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world\"\n        }\n        button {\n            // ✅ Since `string` is `Copy`, we can move it into the onclick handler again\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\n- Calling `clone` on your data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which doesn't implement `Copy`\n#[component]\nfn MyComponent(string: String) -> Element {\n    rsx! {\n        button {\n            // ✅ The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n            onclick: {\n                // Clone the string in a new block\n                let string = string.clone();\n                // Then move the cloned string into the closure\n                move |_| println!(\"{}\", string)\n            },\n            \"Print hello world\"\n        }\n        button {\n            // ✅ We don't use the string after this closure, so we can just move it into the closure directly\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\n</details>\n","isInternal":false,"tokens":999,"sizeBytes":4515},{"name":"event_handlers.md","path":"packages/html/docs/event_handlers.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/html/docs/event_handlers.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# Event Handlers\n\nEvent Handlers let you react to user input in your application. In Dioxus, event handlers accept a closure that is called when the event occurs:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            // The `onclick` event accepts a closure with the signature `fn(Event)`\n            onclick: |event_data| println!(\"clicked! I got the event data: {event_data:?}\"),\n            \"Click me\"\n        }\n    }\n}\n```\n\n## Event Lifetimes\n\nEvents take a closure with the `'static` lifetime. This means that the closure can only access data that either exists for the entire lifetime of the application, or data that you move into the closure.\n\nState in dioxus is `copy` which makes it very easy to move into `'static` closures like event handlers:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut count = use_signal(|| 0);\n\nrsx! {\n    button {\n        // Since we added the `move` keyword, the closure will move the `count` signal into the closure\n        onclick: move |_| {\n            // This will panic because the `count` signal is not in scope\n            count.set(count() + 1);\n        },\n        \"Click me\"\n    }\n};\n```\n\nIf you need to access data that is not `Copy`, you may need to clone the data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// String is not `Copy`\nlet string = \"hello world\".to_string();\n\nrsx! {\n    button {\n        // The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n        onclick: {\n            // Clone the string in a new block\n            let string = string.clone();\n            // Then move the cloned string into the closure\n            move |_| println!(\"{}\", string)\n        },\n        \"Print hello world\"\n    }\n    button {\n        // We don't use the string after this closure, so we can just move it into the closure directly\n        onclick: move |_| println!(\"{}\", string),\n        \"Print hello world again\"\n    }\n};\n```\n\n## Async Event Handlers\n\nIn addition to closures that return nothing, you can also use async closures to handle events. If you return an async block from an event handler, dioxus will automatically spawn it:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            // The `onclick` event can also accept a closure that returns an async block\n            onclick: move |_| async move {\n                tokio::time::sleep(std::time::Duration::from_secs(1)).await;\n                println!(\"You clicked the button one second ago!\");\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n","isInternal":false,"tokens":622,"sizeBytes":2705},{"name":"memo.md","path":"packages/signals/docs/memo.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/signals/docs/memo.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"Memos are the result of computing a value from `use_memo`.\n\nYou may have noticed that this struct doesn't have many methods. Most methods for `Memo` are defined on the [`ReadableExt`] trait.\n\n# Reading a Memo\n\nYou can use the methods on the `ReadableExt` trait to read a memo:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n    // The memo will rerun any time we write to the count signal\n    let halved = use_memo(move || count() / 2);\n\n    rsx! {\n        // When we read the value of memo, the current component will subscribe to the result of the memo. It will only rerun when the result of the memo changes.\n        \"{halved}\"\n        button {\n            onclick: move |_| {\n                count += 1;\n            },\n            \"Increment\"\n        }\n    }\n}\n```\n\nMemo also includes helper methods just like [`Signal`]s to make it easier to use. Calling a memo like a function will clone the inner value:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n    // The memo will rerun any time we write to the count signal\n    let halved = use_memo(move || count() / 2);\n    // This will rerun any time the halved value changes\n    let doubled = use_memo(move || 2 * halved());\n\n    rsx! {\n        \"{doubled}\"\n        button {\n            onclick: move |_| {\n                count += 1;\n            },\n            \"Increment\"\n        }\n    }\n}\n```\n\nFor a full list of all the helpers available, check out the [`Readable`], [`ReadableVecExt`](crate::ReadableVecExt), and [`ReadableOptionExt`](crate::ReadableOptionExt) traits.\n\n# Memos with Async\n\nBecause Memos check borrows at runtime, you need to be careful when reading memos inside of async code. If you hold a read of a memo over an await point, that read may still be open when the memo reruns which will cause a panic:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: &u32) -> u32 {\n    sleep(100).await;\n    *value * 2\n}\nlet mut signal = use_signal(|| 0);\nlet halved = use_memo(move || signal() / 2);\n\nlet doubled = use_resource(move || async move {\n    // Don't hold reads over await points\n    let halved = halved.read();\n    // While the future is waiting for the async work to finish, the read will be open\n    double_me_async(&halved).await\n});\n\nrsx!{\n    \"{doubled:?}\"\n    button {\n        onclick: move |_| {\n            // When you write to signal, it will cause the memo to rerun which may panic because you are holding a read of the memo over an await point\n            signal += 1;\n        },\n        \"Increment\"\n    }\n};\n```\n\nInstead of holding a read over an await point, you can clone whatever values you need out of your memo:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: u32) -> u32 {\n    sleep(100).await;\n    value * 2\n}\nlet mut signal = use_signal(|| 0);\nlet halved = use_memo(move || signal() / 2);\n\nlet doubled = use_resource(move || async move {\n    // Calling the memo will clone the inner value\n    let halved = halved();\n    double_me_async(halved).await;\n});\n\nrsx!{\n    \"{doubled:?}\"\n    button {\n        onclick: move |_| {\n            signal += 1;\n        },\n        \"Increment\"\n    }\n};\n```\n\n# Memo lifecycle\n\nMemos are implemented with [generational-box](https://crates.io/crates/generational-box) which makes all values Copy even if the inner value is not Copy.\n\nThis is incredibly convenient for UI development, but it does come with some tradeoffs. The lifetime of the memo is tied to the lifetime of the component it was created in. If you drop the component that created the memo, the memo will be dropped as well. You might run into this if you try to pass a memo from a child component to a parent component and drop the child component. To avoid this you can create your memo higher up in your component tree, or use global memos.\n\nTLDR **Don't pass memos up in the component tree**. It will cause issues:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let child_signal = use_signal(|| None);\n\n    rsx! {\n        IncrementButton {\n            child_signal\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut child_signal: Signal<Option<Memo<i32>>>) -> Element {\n    let signal_owned_by_child = use_signal(|| 0);\n    let memo_owned_by_child = use_memo(move || signal_owned_by_child() * 2);\n    // Don't do this: it may cause issues if you drop the child component\n    child_signal.set(Some(memo_owned_by_child));\n\n    todo!()\n}\n```\n","isInternal":false,"tokens":1151,"sizeBytes":4586},{"name":"signals.md","path":"packages/signals/docs/signals.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/signals/docs/signals.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"Signals are a Copy state management solution with automatic dependency tracking.\n\nYou may have noticed that this struct doesn't have many methods. Most methods for Signal are defined on the [`Readable`] and [`Writable`] traits.\n\n# Reading and Writing to a Signal\n\nSignals are similar to a copy version of `Rc<RefCell<T>>` built for UIs. You can read and write to a signal like a RefCell:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n\n{\n    // This will read the value (we use a block to make sure the read is dropped before the write. You can read more about this in the next section)\n    let read = signal.read();\n    // Just like refcell, read you can deref the read to get the inner &T reference\n    match &*read {\n        &0 => println!(\"read is 0\"),\n        &1 => println!(\"read is 1\"),\n        _ => println!(\"read is something else ({read})\"),\n    }\n}\n\n// This will write to the value\nlet mut write = signal.write();\n// Again, we can deref the write to get the inner &mut T reference\n*write += 1;\n```\n\nSignals also have a bunch of helper methods to make it easier to use. Calling it like a function will clone the inner value. You can also call a few traits like AddAssign on it directly without writing to it manually:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n// This will clone the value\nlet clone: i32 = signal();\n\n// You can directly display the signal\nprintln!(\"{}\", signal);\n\nlet signal_vec = use_signal(|| vec![1, 2, 3]);\n// And use vec methods like .get and .len without reading the signal explicitly\nlet first = signal_vec.get(0);\nlet last = signal_vec.last();\nlet len = signal_vec.len();\n\n// You can also iterate over signals directly\nfor i in signal_vec.iter() {\n    println!(\"{}\", i);\n}\n```\n\nFor a full list of all the helpers available, check out the [`Readable`], [`ReadableVecExt`], [`ReadableOptionExt`], [`Writable`], [`WritableVecExt`], and [`WritableOptionExt`] traits.\n\nJust like `RefCell<T>`, Signal checks borrows at runtime. If you read and write to the signal at the same time, it will panic:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n// If you create a read and hold it while you write to the signal, it will panic\nlet read = signal.read_unchecked();\n// This will panic\nsignal += 1;\nprintln!(\"{}\", read);\n```\n\nTo avoid issues with overlapping reads and writes, you can use the `with_*` variants of methods to read and write to the signal in a single scope or wrap your reads and writes inside a block:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n{\n    // Since this read is inside a block that ends before we write to the signal, the signal will be dropped before the write and it will not panic\n    let read = signal.read();\n    println!(\"{}\", read);\n}\nsignal += 1;\n\n// Or you can use the with and with_write methods which only read or write to the signal inside the closure\nsignal.with(|read| println!(\"{}\", read));\n// Since the read only lasts as long as the closure, this will not panic\nsignal.with_mut(|write| *write += 1);\n```\n\n# Signals with Async\n\nBecause signals check borrows at runtime, you need to be careful when reading and writing to signals inside of async code. If you hold a read or write to a signal over an await point, that read or write may still be open while you run other parts of your app:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: &mut u32) {\n    sleep(100).await;\n    *value *= 2;\n}\nlet mut signal = use_signal(|| 0);\n\nuse_future(move || async move {\n    // Don't hold reads or writes over await points\n    let mut write = signal.write();\n    // While the future is waiting for the async work to finish, the write will be open\n    double_me_async(&mut write).await;\n});\n\nrsx!{\n    // This read may panic because the write is still active while the future is waiting for the async work to finish\n    \"{signal}\"\n};\n```\n\nInstead of holding a read or write over an await point, you can clone whatever values you need out of your signal and then set the signal to the result once the async work is done:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: u32) -> u32 {\n    sleep(100).await;\n    value * 2\n}\nlet mut signal = use_signal(|| 0);\n\nuse_future(move || async move {\n    // Clone the value out of the signal\n    let current_value = signal();\n    // Run the async work\n    let new_value = double_me_async(current_value).await;\n    // Set the signal to the new value\n    signal.set(new_value);\n});\n\nrsx! {\n    // This read will not panic because the write is never held over an await point\n    \"{signal}\"\n};\n```\n\n# Signals lifecycle\n\nSignals are implemented with [generational-box](https://crates.io/crates/generational-box) which makes all values Copy even if the inner value is not Copy.\n\nThis is incredibly convenient for UI development, but it does come with some tradeoffs. The lifetime of the signal is tied to the lifetime of the component it was created in. If you drop the component that created the signal, the signal will be dropped as well. You might run into this if you try to pass a signal from a child component to a parent component and drop the child component. To avoid this you can create your signal higher up in your component tree, use global signals, or create a signal in a specific scope (like the `ScopeId::ROOT`) with [`Signal::new_in_scope`](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Signal.html#method.new_in_scope)\n\nTLDR **Don't pass signals up in the component tree**. It will cause issues:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let child_signal = use_signal(|| None);\n\n    rsx! {\n        IncrementButton {\n            child_signal\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut child_signal: Signal<Option<Signal<i32>>>) -> Element {\n    let signal_owned_by_child = use_signal(|| 0);\n    // Don't do this: it may cause issues if you drop the child component\n    child_signal.set(Some(signal_owned_by_child));\n\n    todo!()\n}\n```\n","isInternal":false,"tokens":1494,"sizeBytes":6131},{"name":"README.md","path":"packages/autofmt/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/autofmt/README.md","title":"autofmt Documentation","category":"plugin-manifest","format":"markdown","content":"# dioxus-autofmt\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-autofmt.svg\n[crates-url]: https://crates.io/crates/dioxus-autofmt\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-autofmt/latest/dioxus_autofmt) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-autofmt` provides a pretty printer for the `rsx` syntax tree.\n\nThis is done manually with a via set of formatting rules. The output is not guaranteed to be stable between minor versions of the crate as we might tweak the output.\n\n`dioxus-autofmt` provides an API to perform precision edits as well as just spit out a block of formatted RSX from any RSX syntax tree. This is used by the `rsx-rosetta` crate which can accept various input languages and output valid RSX.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":522,"sizeBytes":1917},{"name":"README.md","path":"packages/cli-config/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/cli-config/README.md","title":"cli-config Documentation","category":"plugin-manifest","format":"markdown","content":"# dioxus-cli-config\n\nA crate that provides key/value names and types for configuring Dioxus applications at runtime.\n\nThis crate exists for us to very cleanly define the exact fields we want to pass down to Dioxus applications at runtime but without exposing the entire config object.\n\nThis leads to faster compile times, smaller binaries, and a clearer distinction between the config and the application.\n","isInternal":false,"tokens":78,"sizeBytes":406},{"name":"README.md","path":"packages/cli-harnesses/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/cli-harnesses/README.md","title":"cli-harnesses Documentation","category":"plugin-manifest","format":"markdown","content":"# Test harnesses\n\nThis folder contains a series of CLI harnesses that represent common structures of dioxus apps.\n\nWe test these projects as a form of smoke testing to ensure our argument resolution works properly.\n\nThese projects might not be functionally useful, but they do have interesting properties that the CLI tests.\n\nThe tests for the CLI are contained within the CLI itself.\n\n## This Folder\n\nThe items in this folder are procedurally generated by tests in the CLI crate. We will delete EVERYTHING that ends up here.\n\n## How platform resolution works\n\nDetermine which features, triple, profile, etc to pass to the build.\n\nMost of the time, users should use `dx serve --<platform>` where the platform name directly\ncorresponds to the feature in their cargo.toml. So,\n- `dx serve --web` will enable the `web` feature\n- `dx serve --mobile` will enable the `mobile` feature\n- `dx serve --desktop` will enable the `desktop` feature\n\nIn this case, we set default-features to false and then add back the default features that\naren't renderers, and then add the feature for the given renderer (i.e., web/desktop/mobile).\nWe call this \"no-default-features-stripped.\"\n\nThere are a few cases where the user doesn't need to pass a platform.\n- they selected one via `dioxus = { features = [\"web\"] }`\n- they have a single platform in their default features `default = [\"web\"]`\n- there is only a single non-server renderer as a feature `web = [\"dioxus/web\"], server = [\"dioxus/server\"]`\n- they compose the super triple via triple + bundleformat + features\n\nNote that we only use the names of the features to correspond with the platform.\nPlatforms are \"super triples\", meaning they contain information about\n- bundle format\n- target triple\n- how to serve\n- enabled features\n\nBy default, the --platform presets correspond to:\n- web:          bundle(web), triple(wasm32), serve(http-serve), features(\"web\")\n- desktop:      alias to mac/win/linux\n- mac:          bundle(mac), triple(host), serve(appbundle-open), features(\"desktop\")\n- windows:      bundle(exefolder), triple(host), serve(run-exe), features(\"desktop\")\n- linux:        bundle(appimage), triple(host), serve(run-exe), features(\"desktop\")\n- ios:          bundle(ios), triple(arm64-apple-ios), serve(ios-simulator/xcrun), features(\"mobile\")\n- android:      bundle(android), triple(arm64-apple-ios), serve(android-emulator/adb), features(\"mobile\")\n- server:       bundle(server), triple(host), serve(run-exe), features(\"server\")\n- liveview:     bundle(liveview), triple(host), serve(run-exe), features(\"liveview\")\n- unknown:      <auto or default to desktop>\n\nFullstack usage is inferred from the presence of the fullstack feature or --fullstack.\n\n## List of harnesses (brainstorming)\n\n- app that doesn't use dioxus\n- simple app where the renderer is used as an explicit feature\n- simple app, same as above, but with fullstack enabled\n  - since no `server` feature is present, we don't run the server\n- simple app, same as above, but with a `server` feature\n  - server should launch and take precedence over the client\n- simple server-only app\n  - IE you're doing SSR with dioxus\n","isInternal":false,"tokens":738,"sizeBytes":3132},{"name":"README.md","path":"packages/cli/assets/android/prebuilt/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/cli/assets/android/prebuilt/README.md","title":"prebuilt Documentation","category":"plugin-manifest","format":"markdown","content":"This folder contains prebuilt versions of android crates to make cross-compiling easier.\n\nWe use the official prebuilds distributed by google.\n\nYou can find the full set of prebuilt libraries that google distributes here:\n\nhttps://maven.google.com/web/index.html?q=com.android.ndk.thirdparty#com.android.ndk.thirdparty\n\nThe version included in `dx` is downloaded from here:\n\nhttps://maven.google.com/web/index.html?q=com.android.ndk.thirdparty#com.android.ndk.thirdparty:openssl:1.1.1q-beta-1\n\nThe SHA of the `.aar` file from google and `dx` are different. The Rust openssl-sys crate expects libcrypto and libssl to be in the same folder, but the `.aar` that google distributes splits the two libraries into two different folders. I (jon) have simply merged the folders together and then re-packed the folder as a `.tar.gz`.\n","isInternal":false,"tokens":193,"sizeBytes":825},{"name":"README.md","path":"packages/cli/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/cli/README.md","title":"cli Documentation","category":"plugin-manifest","format":"markdown","content":"<div>\n  <h1>📦✨ Dioxus CLI</h1>\n  <p><strong>Tooling to supercharge Dioxus projects</strong></p>\n</div>\n\nThe **dioxus-cli** (inspired by wasm-pack and webpack) is a tool for getting Dioxus projects up and running.\nIt handles building, bundling, development and publishing to simplify development.\n\n## Installation\n\n### Install the stable version (recommended)\n\n```shell\ncargo install dioxus-cli\n```\n\n### Install the latest development build through git\n\nTo get the latest bug fixes and features, you can install the development version from git.\nHowever, this is not fully tested.\nThat means you're probably going to have more bugs despite having the latest bug fixes.\n\n```shell\ncargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli\n```\n\nThis will download the CLI from the master branch,\nand install it in Cargo's global binary directory (`~/.cargo/bin/` by default).\n\n### Install from local folder\nNote: The CLI will fail to build projects in debug profile. This is currently under investigation.\n```shell\ncargo install --path .\n```\n\n## Get started\n\nUse `dx new` to initialize a new Dioxus project.\nIt will be cloned from the [dioxus-template](https://github.com/DioxusLabs/dioxus-template) repository.\n\nAlternatively, you can specify the template path:\n\n```shell\ndx new --template gh:dioxuslabs/dioxus-template\n```\n\nRun `dx --help` for a list of all the available commands.\nFurthermore, you can run `dx <command> --help` to get help with a specific command.\n\n## Dioxus config file\n\nYou can use the `Dioxus.toml` file for further configuration.\nSome fields are mandatory, but the CLI tool will tell you which ones are missing.\nYou can create a `Dioxus.toml` with all fields already set using `dx config init project-name`,\nor you can use this bare-bones template (only mandatory fields) to get started:\n\n```toml\n[application]\nname = \"project-name\"\n# Currently supported platforms: web, desktop\ndefault_platform = \"web\"\n\n# Optional: enable copying from a static directory (e.g. \"public\")\npublic_dir = \"public\"\n\n[web.app]\ntitle = \"Hello\"\n\n[web.resource.dev]\n```\n","isInternal":false,"tokens":509,"sizeBytes":2080},{"name":"README.md","path":"packages/config-macro/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/config-macro/README.md","title":"config-macro Documentation","category":"plugin-manifest","format":"markdown","content":"# dioxus-config-macro\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-config-macro.svg\n[crates-url]: https://crates.io/crates/dioxus-config-macro\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guide](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-config-macro/latest/dioxus_config_macro/) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-config-macro` provides a handful of helpful macros to make it easier to work with optional sections of the launch builder.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":435,"sizeBytes":1596},{"name":"README.md","path":"packages/config-macros/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/config-macros/README.md","title":"config-macros Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus Config Macros\n\nThese macros are used internally by codegen and are not intended for general use.\n\nDioxus will export its feature flags into this crate, allowing downstream codegen to use them under the \"dioxus\" namespace.\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":117,"sizeBytes":550},{"name":"README.md","path":"packages/const-serialize/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/const-serialize/README.md","title":"const-serialize Documentation","category":"plugin-manifest","format":"markdown","content":"A rust serialization library that works in const with complex(ish) types like enums, nested structs and arrays. Const rust does not have an allocator, so this library cannot work in a cross architecture environment with Vecs, slices or strings.\n\n```rust\nuse const_serialize::{deserialize_const, serialize_const, serialize_eq, ConstVec, SerializeConst};\n#[derive(Clone, Copy, Debug, PartialEq, SerializeConst)]\nstruct Struct {\n    a: u32,\n    b: u8,\n    c: u32,\n    d: Enum,\n}\n\n#[derive(Clone, Copy, Debug, PartialEq, SerializeConst)]\n#[repr(C, u8)]\nenum Enum {\n    A { one: u32, two: u16 },\n    B { one: u8, two: u16 } = 15,\n}\n\nconst {\n    let data = [Struct {\n        a: 0x11111111,\n        b: 0x22,\n        c: 0x33333333,\n        d: Enum::A {\n            one: 0x44444444,\n            two: 0x5555,\n        },\n    }; 3];\n    let mut buf = ConstVec::new();\n    buf = serialize_const(&data, buf);\n    let buf = buf.as_ref();\n    let (buf, deserialized) = match deserialize_const!([Struct; 3], buf) {\n        Some(data) => data,\n        None => panic!(\"data mismatch\"),\n    };\n    if !serialize_eq(&data, &deserialized) {\n        panic!(\"data mismatch\");\n    }\n}\n```\n\n## How it works\n\n`const-serialize` relies heavily on well defined layouts for the types you want to serialize. The serialization format is the linear sequence of unaligned bytes stored in the order of the fields, items or variants of the type. Numbers are stored in little endian order.\n\nIn order to support complex nested types, serialization is done using a trait. Since functions in traits cannot be const, `const-serialize` uses a macro to generate constant associated items that describe the memory layout of the type. That layout is then used to read all of the bytes in the type into the serialized buffer.\n\nThe deserialization is done in a similar way, but the layout is used to write the bytes from the serialized buffer into the type.\n\nThe rust [nomicon](https://doc.rust-lang.org/nomicon/data.html) defines the memory layout of different types. It is used as a reference for the layout of the types implemented in `const-serialize`.\n\n## Limitations\n\n- Only constant sized types are supported. This means that you can't serialize a type like `Vec<T>`. These types are difficult to create in const contexts in general\n- Only types with a well defined memory layout are supported (see <https://github.com/rust-lang/rfcs/pull/3727>). `repr(Rust)` enums don't have a well defined layout, so they are not supported. `repr(C, u8)` enums can be used instead\n- Const rust does not support mutable references or points, so this crate leans heavily on functional data structures for data processing.\n","isInternal":false,"tokens":646,"sizeBytes":2665},{"name":"README.md","path":"packages/core-macro/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/core-macro/README.md","title":"core-macro Documentation","category":"plugin-manifest","format":"markdown","content":"# dioxus-core-macro\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-core-macro.svg\n[crates-url]: https://crates.io/crates/dioxus-core-macro\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-core-macro/latest/dioxus_core_macro) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-core-macro` provides a handful of helpful macros used by the `dioxus` crate. These include:\n\n- The `rsx!` macro that underpins templates and node creation.\n- The `component` attribute macro denotes a function as a Dioxus component. Currently, this:\n  - Transforms function arguments into an auto-derived struct.\n  - Ensures that your component name uses PascalCase.\n  - Probably more stuff in the future. This macro allows us to have a way of distinguishing functions and components, which can be quite handy.\n- The `format_args_f` macro which allows f-string formatting with support for expressions.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":543,"sizeBytes":2064},{"name":"README.md","path":"packages/core/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/core/README.md","title":"core Documentation","category":"plugin-manifest","format":"markdown","content":"# dioxus-core\n\n`dioxus-core` provides a fast and featureful VirtualDom implementation for Rust.\n\n```rust, no_run\n# tokio::runtime::Runtime::new().unwrap().block_on(async {\nuse dioxus_core::{VirtualDom, Event, Element, Mutations, VNode, ElementId};\n\nlet mut vdom = VirtualDom::new(app);\nlet real_dom = SomeRenderer::new();\n\nloop {\n    tokio::select! {\n        evt = real_dom.event() => {\n            let evt = Event::new(evt, true);\n            vdom.runtime().handle_event(\"onclick\", evt, ElementId::from_raw(0))\n        },\n        _ = vdom.wait_for_work() => {}\n    }\n    vdom.render_immediate(&mut real_dom.apply())\n}\n\n# fn app() -> Element { VNode::empty() }\n# struct SomeRenderer; impl SomeRenderer { fn new() -> SomeRenderer { SomeRenderer } async fn event(&self) -> std::rc::Rc<dyn std::any::Any> { unimplemented!() } fn apply(&self) -> Mutations { Mutations::default() } }\n# });\n```\n\n## Features\n\nA virtualdom is an efficient and flexible tree data structure that allows you to manage state for a graphical user interface. The Dioxus VirtualDom is perhaps the most fully-featured virtualdom implementation in Rust and powers renderers running across Web, Desktop, Mobile, SSR, TUI, LiveView, and more. When you use the Dioxus VirtualDom, you immediately enable users of your renderer to leverage the wide ecosystem of Dioxus components, hooks, and associated tooling.\n\nSome features of `dioxus-core` include:\n\n- UI components are just functions\n- State is provided by hooks\n- Deep integration with async\n- Strong focus on performance\n- Integrated hotreloading support\n- Extensible system for UI elements and their attributes\n\nIf you are just starting, check out the Guides first.\n\n## Understanding the implementation\n\n`dioxus-core` is designed to be a lightweight crate that. It exposes a number of flexible primitives without being deeply concerned about the intracices of state management itself. We provide a number of useful abstractions built on these primitives in the `dioxus-hooks` crate as well as the `dioxus-signals` crate.\n\nThe important abstractions to understand are:\n\n- The [`VirtualDom`]\n- The [`Component`] and its [`Properties`]\n- Handling events\n- Working with async\n- Suspense\n\n## Usage\n\nThe `dioxus` crate exports the `rsx` macro which transforms a helpful, simpler syntax of Rust.\n\nFirst, start with your app:\n\n```rust\n# use dioxus::dioxus_core::{Mutations, VirtualDom};\nuse dioxus::prelude::*;\n\n// First, declare a root component\nfn app() -> Element {\n    rsx! {\n        div { \"hello world\" }\n    }\n}\n\nfn main() {\n    // Next, create a new VirtualDom using this app as the root component.\n    let mut dom = VirtualDom::new(app);\n\n    // The initial render of the dom will generate a stream of edits for the real dom to apply\n    let mutations = dom.rebuild_to_vec();\n}\n```\n\n## Contributing\n\n- Check out the website [section on contributing](https://dioxuslabs.com/learn/0.7/beyond/contributing).\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- [Join](https://discord.gg/XgGxMSkvUM) the discord and ask questions!\n\n<a href=\"https://github.com/dioxuslabs/dioxus/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10\" />\n</a>\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","isInternal":false,"tokens":883,"sizeBytes":3563},{"name":"README.md","path":"packages/core/tests/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/core/tests/README.md","title":"tests Documentation","category":"plugin-manifest","format":"markdown","content":"# Testing of Dioxus core\n\n\nDiffing\n- [x] create elements\n- [x] create text\n- [x] create fragments\n- [x] create empty fragments (placeholders)\n- [x] diff elements\n- [x] diff from element/text to fragment\n- [x] diff from element/text to empty fragment\n- [x] diff to element with children works too\n- [x] replace with works forward\n- [x] replace with works backward\n- [x] un-keyed diffing\n- [x] keyed diffing\n- [x] keyed diffing out of order\n- [x] keyed diffing with prefix/suffix\n- [x] suspended nodes work\n\nLifecycle\n- [] Components mount properly\n- [] Components create new child components\n- [] Replaced components unmount old components and mount new\n- [] Post-render effects are called\n\nShared Context\n- [] Shared context propagates downwards\n- [] unwrapping shared context if it doesn't exist works too\n\nSuspense\n- [] use_suspense generates suspended nodes\n\n\nHooks\n- [] Drop order is maintained\n- [] Shared hook state is okay\n- [] use_hook works\n- [] use_ref works\n- [] use_noderef works\n- [] use_provide_state\n- [] use_consume_state\n\n\nVirtualDOM API\n- [] work\n- [] rebuild_to_vec\n- [] change props\n","isInternal":false,"tokens":297,"sizeBytes":1103},{"name":"README.md","path":"packages/depinfo/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/depinfo/README.md","title":"depinfo Documentation","category":"plugin-manifest","format":"markdown","content":"# Rustc Dep-Info Parser\n\nThis crate parses the output of rustc's `.d` dep-info file. It is used by the hot-reloading engine and other libraries to provide higher quality dependency analysis for the user's project.\n\n## License\n\nThis project is licensed under either the [MIT license] or the [Apache-2 License].\n\n[apache-2 license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-APACHE\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional\nterms or conditions.\n","isInternal":false,"tokens":155,"sizeBytes":666},{"name":"README.md","path":"packages/desktop/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/desktop/README.md","title":"desktop Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus Desktop (webview)\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-desktop.svg\n[crates-url]: https://crates.io/crates/dioxus-desktop\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-desktop/latest/dioxus_desktop) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-desktop` provides a webview-based desktop renderer for the Dioxus VirtualDom.\n\nThis requires that webview is installed on the target system. WebView is installed by default on macOS and iOS devices, but might not come preinstalled on Windows or Linux devices. To fix these issues, follow the [instructions in the guide](guide-url).\n\n[guide-url]: https://dioxuslabs.com/learn/0.7/getting_started\n\n## Features\n\n- Simple, one-line launch for desktop apps\n- Dioxus VirtualDom running on a native thread\n- Full HTML/CSS support via `wry` and `tao`\n- Exposed `window` and `Proxy` types from tao for direct window manipulation\n- Helpful hooks for accessing the window, WebView, and running javascript.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":570,"sizeBytes":2153},{"name":"readme.md","path":"packages/desktop/src/readme.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/desktop/src/readme.md","title":"src Documentation","category":"plugin-manifest","format":"markdown","content":"Dioxus Desktop Renderer\n\nRender the Dioxus VirtualDom using the platform's native WebView implementation.\n\n# Desktop\n\nOne of Dioxus' flagship features is the ability to quickly build a native desktop app that looks and feels the same across platforms. Apps built with Dioxus are typically <5mb in size and use existing system resources, so they won't hog extreme amounts of RAM or memory.\n\nDioxus Desktop is built off Tauri. Right now there aren't any Dioxus abstractions over the menubar, handling, etc, so you'll want to leverage Tauri - mostly [Wry](http://github.com/tauri-apps/wry/) and [Tao](http://github.com/tauri-apps/tao) directly. An upcoming release of Dioxus-Desktop will include components and hooks for notifications, global shortcuts, menubar, etc.\n\n## Getting Set up\n\nGetting Set up with Dioxus-Desktop is quite easy. Make sure you have Rust and Cargo installed, and then create a new project:\n\n```shell\n$ cargo new --bin demo\n$ cd app\n```\n\nAdd Dioxus and the `desktop` renderer feature:\n\n```shell\n$ cargo add dioxus\n$ cargo add dioxus-desktop\n```\n\nEdit your `main.rs`:\n\n```rust, ignore\n// main.rs\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus_desktop::launch(app);\n}\n\nfn app() -> Element {\n    rsx! {\n        div {\n            \"hello world!\"\n        }\n    }\n}\n```\n\nTo configure the webview, menubar, and other important desktop-specific features, checkout out some of the launch configuration in the [API reference](https://docs.rs/dioxus-desktop/).\n\n## Future Steps\n\nMake sure to read the [Dioxus Guide](https://dioxuslabs.com/learn/0.7/) if you already haven't!\n","isInternal":false,"tokens":406,"sizeBytes":1584},{"name":"README.md","path":"packages/dioxus/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/dioxus/README.md","title":"dioxus Documentation","category":"plugin-manifest","format":"markdown","content":"<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/splash-header.svg\" style=\"width: 80%; height: auto;\">\n</div>\n\n<div align=\"center\">\n  <!-- Crates version -->\n  <a href=\"https://crates.io/crates/dioxus\">\n    <img src=\"https://img.shields.io/crates/v/dioxus.svg?style=flat-square\"\n    alt=\"Crates.io version\" />\n  </a>\n  <!-- Downloads -->\n  <a href=\"https://crates.io/crates/dioxus\">\n    <img src=\"https://img.shields.io/crates/d/dioxus.svg?style=flat-square\"\n      alt=\"Download\" />\n  </a>\n  <!-- docs -->\n  <a href=\"https://docs.rs/dioxus\">\n    <img src=\"https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square\"\n      alt=\"docs.rs docs\" />\n  </a>\n  <!-- CI -->\n  <a href=\"https://github.com/dioxuslabs/dioxus/actions\">\n    <img src=\"https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\"\n      alt=\"CI status\" />\n  </a>\n  <!-- Awesome -->\n  <a href=\"https://dioxuslabs.com/awesome\">\n    <img src=\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\" alt=\"Awesome Page\" />\n  </a>\n  <!-- Discord -->\n  <a href=\"https://discord.gg/XgGxMSkvUM\">\n    <img src=\"https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\" alt=\"Discord Link\" />\n  </a>\n</div>\n\n<div align=\"center\">\n  <h3>\n    <a href=\"https://dioxuslabs.com\"> Website </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/getting_started\"> Getting Started </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/\"> Book (0.7) </a>\n    <span> | </span>\n    <a href=\"https://github.com/DioxusLabs/dioxus/tree/main/examples\"> Examples </a>\n    <span> | </span>\n    <a href=\"https://dioxuslabs.com/learn/0.7/tutorial\"> Tutorial </a>\n  </h3>\n</div>\n\n---\n\nBuild for web, desktop, and mobile, and more with a single codebase. Zero-config setup, integrated hot-reloading, and signals-based state management. Add backend functionality with Server Functions and bundle with our CLI.\n\n```rust, ignore\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus::launch(app);\n}\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n\n    rsx! {\n        h1 { \"High-Five counter: {count}\" }\n        button { onclick: move |_| count += 1, \"Up high!\" }\n        button { onclick: move |_| count -= 1, \"Down low!\" }\n    }\n}\n```\n\n## ⭐️ Unique features\n\n- Cross-platform apps in three lines of code (web, desktop, mobile, server, and more)\n- [Ergonomic state management](https://dioxuslabs.com/blog/release-050) combines the best of React, Solid, and Svelte\n- Built-in featureful, type-safe, fullstack web framework\n- Integrated bundler for deploying to the web, macOS, Linux, and Windows\n- Subsecond Rust hot-patching and asset hot-reloading\n- And more! [Take a tour of Dioxus](https://dioxuslabs.com/learn/0.7/).\n\n## Quick start\n\nGrab the Dioxus CLI (`dx`) and spin up a new app in seconds:\n\n```shell\n# install the dioxus-cli\ncurl -fsSL https://dioxuslabs.com/install.sh | bash\n\n# create a new app, following the template instructions\ndx new my-app && cd my-app\n\n# and then serve on `--web, --desktop, --ios, or --android`\ndx serve --desktop\n```\n\n## Guides\n\nThis overview doesn't cover everything. Make sure to check out:\n\n- [Long-form tutorial](https://dioxuslabs.com/learn/0.7/tutorial)\n- [Core concept guide](https://dioxuslabs.com/learn/0.7/essentials/)\n- [Platform-specific guides](https://dioxuslabs.com/learn/0.7/guides/)\n- [Code examples on GitHub](https://github.com/DioxusLabs/dioxus/tree/main/examples)\n\n\n## Instant hot-reloading\n\nWith one command, `dx serve` and your app is running. Edit your markup, styles, and see changes in milliseconds. Use our experimental `dx serve --hotpatch` to update Rust code in real time.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/screenshots/refs/heads/main/blitz/hotreload-video.webp\">\n</div>\n\n## Build Beautiful Apps\n\nDioxus apps are styled with HTML and CSS. Use the built-in TailwindCSS support or load your favorite CSS library. Easily call into native code (objective-c, JNI, Web-Sys) for a perfect native touch.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/ebou2.avif\">\n</div>\n\n## Truly fullstack applications\n\nDioxus deeply integrates with [axum](https://github.com/tokio-rs/axum) to provide powerful fullstack capabilities for both clients and servers. Pick from a wide array of built-in batteries like WebSockets, SSE, Streaming, File Upload/Download, Server-Side-Rendering, Forms, Middleware, and Hot-Reload, or go fully custom and integrate your existing axum backend.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/fullstack-websockets.avif\" width=\"700\">\n</div>\n\n## Experimental Native Renderer\n\nRender using web-sys, webview, server-side-rendering, liveview, or even with our experimental WGPU-based renderer. Embed Dioxus in Bevy, WGPU, or even run on embedded Linux!\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/screenshots/refs/heads/main/blitz/native-blitz-wgpu.webp\">\n</div>\n\n## First-party primitive components\n\nGet started quickly with a complete set of primitives modeled after shadcn/ui and Radix-Primitives.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/primitive-components.avif\" width=\"700\">\n</div>\n\n## First-class Android and iOS support\n\nDioxus is the fastest way to build native mobile apps with Rust. Simply run `dx serve --platform android` and your app is running in an emulator or on device in seconds. Call directly into JNI and Native APIs.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/android_and_ios2.avif\" width=\"500\">\n</div>\n\n## Bundle for web, desktop, and mobile\n\nSimply run `dx bundle` and your app will be built and bundled with maximization optimizations. On the web, take advantage of [`.avif` generation, `.wasm` compression, minification](https://dioxuslabs.com/learn/0.7/tutorial/assets), and more. Build WebApps weighing [less than 50kb](https://github.com/ealmloff/tiny-dioxus/) and desktop/mobile apps less than 5mb.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/bundle.gif\">\n</div>\n\n## Fantastic documentation\n\nWe've put a ton of effort into building clean, readable, and comprehensive documentation. All html elements and listeners are documented with MDN docs, and our Docs runs continuous integration with Dioxus itself to ensure that the docs are always up to date. Check out the [Dioxus website](https://dioxuslabs.com/learn/0.7/) for guides, references, recipes, and more.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/docs.avif\">\n</div>\n\n## Community\n\nDioxus is a community-driven project, with a very active [Discord](https://discord.gg/XgGxMSkvUM) and [GitHub](https://github.com/DioxusLabs/dioxus/issues) community. We're always looking for help, and we're happy to answer questions and help you get started. [Our SDK](https://github.com/DioxusLabs/dioxus-std) is community-run and we even have a [GitHub organization](https://github.com/dioxus-community/) for the best Dioxus crates that receive free upgrades and support.\n\n<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/dioxus-community.avif\">\n</div>\n\n## License\n\nThis project is licensed under either the [MIT license](https://github.com/DioxusLabs/dioxus/blob/main/LICENSE-MIT) or the [Apache-2 License](https://github.com/DioxusLabs/dioxus/blob/main/LICENSE-APACHE).\n\nUnless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional terms or conditions.\n","isInternal":false,"tokens":2139,"sizeBytes":7877},{"name":"README.md","path":"packages/extension/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/extension/README.md","title":"extension Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus VSCode Extension\n\n![Dioxus Splash](https://github.com/DioxusLabs/dioxus/raw/main/notes/dioxus_splash_8.avif)\n\nThis extension wraps functionality in Dioxus CLI to be used in your editor!\n\n## Features:\n\n- Auto-format RSX\n- Convert HTML to RSX\n- Convert HTML to Dioxus Component\n- Format RSX\n\n## Current commands:\n\n### Convert HTML to RSX\nConverts a selection of html to valid rsx.\n\n### Convert HTML to Dioxus Component\n\nConverts a selection of html to a valid Dioxus component with all SVGs factored out into their own module.\n\n### Format RSX\n\nFormats the current file as RSX.\n\n## Building this extension from source\n- make sure wasm-bindgen is installed to current version (cargo binstall wasm-bindgen-cli)\n- run `npm install`\n- run `npm run vsix`\n\n# Working with Dioxus:\n\nThis overview provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:\n\n- [Getting Started](https://dioxuslabs.com/learn/0.7/getting_started)\n- [Book (0.6)](https://dioxuslabs.com/learn/0.7/)\n\n## Contributing\n- Check out the website [section on contributing](https://dioxuslabs.com/learn/0.7/beyond/contributing).\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- [Join](https://discord.gg/XgGxMSkvUM) the discord and ask questions!\n\n\n<a href=\"https://github.com/dioxuslabs/dioxus/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10\" />\n</a>\n\n## License\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","isInternal":false,"tokens":472,"sizeBytes":1768},{"name":"README.md","path":"packages/fullstack-core/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/fullstack-core/README.md","title":"fullstack-core Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus Fullstack Core\n\nDioxus-fullstack-core provides types, traits, hooks, contexts for [`dioxus-fullstack`](https://crates.io/crates/dioxus-fullstack). Libraries that need to integrate with dioxus-fullstack should rely on this crate instead of the full-fledged renderer for quicker build times.\n\n## Usage\n\nTo start using this crate, you can run the following command:\n\n```bash\ncargo add dioxus-fullstack-hooks\n```\n\nThen you can use hooks like `use_server_future` in your components:\n\n```rust\nuse dioxus::prelude::*;\n\n\nfn App() -> Element {\n    let mut article_id = use_signal(|| 0);\n\n    // `use_server_future` will spawn a task that runs on the server and serializes the result to send to the client.\n    // The future will rerun any time the\n    // Since we bubble up the suspense with `?`, the server will wait for the future to resolve before rendering\n    let article = use_server_future(move || fetch_article(article_id()))?;\n\n    rsx! {\n        \"{article().unwrap()}\"\n    }\n}\n\nasync fn fetch_article(id: u32) -> String {\n    format!(\"Article {}\", id)\n}\n```\n","isInternal":false,"tokens":260,"sizeBytes":1068},{"name":"README.md","path":"packages/fullstack-server/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/fullstack-server/README.md","title":"fullstack-server Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus Fullstack\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-fullstack.svg\n[crates-url]: https://crates.io/crates/dioxus-fullstack\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-fullstack/latest/dioxus_fullstack/) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\nFullstack utilities for the [`Dioxus`](https://dioxuslabs.com) framework.\n\n# Features\n\n- Integrates with the [Axum](./examples/axum-hello-world/src/main.rs) server framework with utilities for serving and rendering Dioxus applications.\n- Server functions allow you to call code on the server from the client as if it were a normal function.\n- Instant RSX Hot reloading with [`dioxus-hot-reload`](https://crates.io/crates/dioxus-hot-reload).\n- Passing root props from the server to the client.\n\n# Example\nQuickly build fullstack Rust apps with axum and dioxus.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn main() {\n    dioxus::launch(|| {\n        let mut meaning = use_action(|| get_meaning(\"life the universe and everything\".into()));\n\n        rsx! {\n            h1 { \"Meaning of life: {meaning:?}\" }\n            button { onclick: move |_| meaning.call(), \"Run a server function\" }\n        }\n    });\n}\n\n#[get(\"/meaning/?of\")]\nasync fn get_meaning(of: String) -> Result<Option<u32>> {\n    Ok(of.contains(\"life\").then(|| 42))\n}\n```\n\n## Axum Integration\n\nIf you have an existing Axum router or you need more control over the server, you can use the [`DioxusRouterExt`](https://docs.rs/dioxus-fullstack/0.6.0-alpha.2/dioxus_fullstack/prelude/trait.DioxusRouterExt.html) trait to integrate with your existing Axum router.\n\nFirst, make sure your `axum` dependency is optional and enabled by the server feature flag. Axum cannot be compiled to wasm, so if it is enabled by default, it will cause a compile error:\n\n```toml\n[dependencies]\ndioxus = { version = \"*\", features = [\"fullstack\"] }\naxum = { version = \"0.8.0\", optional = true }\ntokio = { version = \"1.0\", features = [\"full\"], optional = true }\ndioxus-cli-config = { version = \"*\", optional = true }\n\n[features]\nserver = [\"dioxus/server\", \"dep:axum\", \"dep:tokio\", \"dioxus-cli-config\"]\nweb = [\"dioxus/web\"]\n```\n\nThen we can set up dioxus with the axum server:\n\n```rust, no_run\n#![allow(non_snake_case)]\nuse dioxus::prelude::*;\n\n// The entry point for the server\n#[cfg(feature = \"server\")]\n#[tokio::main]\nasync fn main() {\n    use dioxus_server::DioxusRouterExt;\n\n    // Get the address the server should run on. If the CLI is running, the CLI proxies fullstack into the main address\n    // and we use the generated address the CLI gives us\n    let address = dioxus::cli_config::fullstack_address_or_localhost();\n\n    // Set up the axum router\n    let router = axum::Router::new()\n        // You can add a dioxus application to the router with the `serve_dioxus_application` method\n        // This will add a fallback route to the router that will serve your component and server functions\n        .serve_dioxus_application(dioxus_server::ServeConfig::new(), App);\n\n    // Finally, we can launch the server\n    let router = router.into_make_service();\n    let listener = tokio::net::TcpListener::bind(address).await.unwrap();\n    axum::serve(listener, router).await.unwrap();\n}\n\n// For any other platform, we just launch the app\n#[cfg(not(feature = \"server\"))]\nfn main() {\n    dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n    let mut meaning = use_signal(|| None);\n\n    rsx! {\n        h1 { \"Meaning of life: {meaning:?}\" }\n        button {\n            onclick: move |_| async move {\n                if let Ok(data) = get_meaning(\"life the universe and everything\".into()).await {\n                    meaning.set(data);\n                }\n            },\n            \"Run a server function\"\n        }\n    }\n}\n\n#[server]\nasync fn get_meaning(of: String) -> ServerFnResult<Option<u32>> {\n    Ok(of.contains(\"life\").then(|| 42))\n}\n```\n\n## Getting Started\n\nTo get started with full stack Dioxus, check out our [getting started guide](https://dioxuslabs.com/learn/0.7/getting_started), or the [full stack examples](https://github.com/DioxusLabs/dioxus/tree/master/examples).\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":1386,"sizeBytes":5267},{"name":"README.md","path":"packages/fullstack/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/fullstack/README.md","title":"fullstack Documentation","category":"plugin-manifest","format":"markdown","content":"# dioxus-fullstack\n\n- wraps dioxus-server\n- exposes rpc system\n\n","isInternal":false,"tokens":19,"sizeBytes":64},{"name":"README.md","path":"packages/fuzz/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/fuzz/README.md","title":"fuzz Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus VirtualDom Fuzzer\n\nThis crate provides the structured operation model and renderer oracle used by\nthe local `cargo-fuzz` target in `fuzz/`. LibFuzzer handles coverage guidance,\ncorpus scheduling, crash storage, and minimization. Mutatis provides the custom\nstructure-aware mutator for encoded `FuzzCase` values.\n\nThe fuzzer drives Dioxus `VirtualDom` updates with template, dynamic-node,\ndynamic-attribute, fragment, event-listener, portal/multi-renderer, and suspense\noperations. Each case is applied to per-target incremental renderers and checked\nagainst stable re-render and fresh rebuild snapshots.\n\n## Running\n\nInstall `cargo-fuzz` if needed:\n\n```sh\ncargo install cargo-fuzz\n```\n\nRun a short smoke session from this package directory:\n\n```sh\ncargo +nightly fuzz run vdom_ops -- -runs=256\n```\n\nTo replay the package-local corpus from this package directory:\n\n```sh\ncargo +nightly fuzz run vdom_ops fuzz/corpus/vdom_ops -- -runs=256\n```\n\nFrom the workspace root, pass the nested fuzz project explicitly:\n\n```sh\ncargo +nightly fuzz run --fuzz-dir packages/fuzz/fuzz vdom_ops packages/fuzz/fuzz/corpus/vdom_ops -- -runs=256\n```\n\nRun a longer session:\n\n```sh\ncargo +nightly fuzz run vdom_ops\n```\n\nMinimize a crashing input. This still uses `cargo fuzz tmin`, but the\n`vdom_ops` custom mutator detects libFuzzer minimization mode and first runs the\nstructured operation reducer before falling back to Mutatis shrink candidates:\n\n```sh\ncargo +nightly fuzz tmin vdom_ops fuzz/artifacts/vdom_ops/<crash-file>\n```\n\nGenerate coverage using cargo-fuzz's built-in command:\n\n```sh\ncargo +nightly fuzz coverage vdom_ops\n```\n\n## How It Works\n\n`fuzz/fuzz_targets/vdom_ops.rs` decodes the raw libFuzzer bytes as a postcard\nencoded `FuzzCase`. Invalid raw inputs are ignored by the target. The custom\n`fuzz_mutator!` hook decodes the current case (starting from an empty case\nwhen decoding fails), calls this crate's structured mutator, and writes the\nencoded case back to libFuzzer's input buffer.\n\nThe structured mutator (`src/mutator.rs`) combines field-level mutations of\nencoded ops with a table of model-aware op strategies: it replays the ops\nbefore a splice point, summarizes the resulting model, and inserts op\nsequences that target vnodes, fragments, attribute slots, and suspense\nboundaries that actually exist at that point. Strategies whose target\nstructure is missing emit their own prerequisite ops first.\n\nCases are capped at the crate-internal step limit so mutated corpus inputs\ncannot produce unbounded replay work.\n\nCrate layout:\n\n- `src/case.rs` - encoded op stream, replay, failure reporting\n- `src/ops.rs` - the operation grammar and how ops apply to the model\n- `src/model.rs` - the spec tree the generated app renders from\n- `src/mutator.rs` - structure-aware mutation (the op strategy table)\n- `src/reducer.rs` - structured shrinking of failing cases\n- `src/harness.rs` - incremental-vs-fresh renderer oracle and lifecycle checks\n- `src/vdom.rs` - compiles model specs into real `VNode`s/`Template`s\n- `src/warmup.rs` - one-shot scenarios for paths replay cannot reach\n- `src/targeted.rs` - hand-built recipes replayed as tests and exportable as\n  corpus seeds\n\n## Failures\n\nOn divergence, the fuzz target prints an SSR replay trace for the failing\noperation sequence and then panics. LibFuzzer stores the crashing input under\n`fuzz/artifacts/vdom_ops/`; use `cargo fuzz tmin` to minimize it and rerun the\ntarget on the minimized artifact to reproduce the trace.\n","isInternal":false,"tokens":841,"sizeBytes":3485},{"name":"README.md","path":"packages/generational-box/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/generational-box/README.md","title":"generational-box Documentation","category":"plugin-manifest","format":"markdown","content":"# Generational Box\n\nGenerational Box is a runtime for Rust that allows any static type to implement `Copy`. It can be combined with a global runtime to create an ergonomic state solution like `dioxus-signals`. This crate doesn't have any `unsafe` code.\n\nThree main types manage state in Generational Box:\n\n- `Store`: Handles recycling generational boxes that have been dropped. Your application should have one store or one store per thread.\n- `Owner`: Handles dropping generational boxes. The owner acts like a runtime lifetime guard. Any states that you create with an owner will be dropped when that owner is dropped.\n- `GenerationalBox`: The core Copy state type. The generational box will be dropped when the owner is dropped.\n\nExample:\n\n```rust\nuse generational_box::{UnsyncStorage, AnyStorage};\n\n// Create an owner for some state for a scope\nlet owner = UnsyncStorage::owner();\n\n// Create some non-copy data, move it into a owner, and work with copy data\nlet data: String = \"hello world\".to_string();\nlet key = owner.insert(data);\n\n// The generational box can be read from and written to like a RefCell\nlet value = key.read();\nassert_eq!(*value, \"hello world\");\n```\n\n## How it works\n\nInternally, `generational-box` creates an arena of generational `RefCell`s that are recycled when the owner is dropped. You can think of the cells as something like `&'static RefCell<Box<dyn Any>>` with a generational check to make recycling a cell easier to debug. Then `GenerationalBox`es are `Copy` because the `&'static` pointer is `Copy`.\n","isInternal":false,"tokens":352,"sizeBytes":1535},{"name":"README.md","path":"packages/hooks/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/hooks/README.md","title":"hooks Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus Hooks\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-hooks.svg\n[crates-url]: https://crates.io/crates/dioxus-hooks\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-hooks/latest/dioxus_hooks) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-hooks` includes some basic useful hooks for Dioxus such as:\n\n- use_signal\n- use_effect\n- use_resource\n- use_memo\n- use_coroutine\n\nUnlike React, none of these hooks are foundational since they all build off the primitive `use_hook`. You can extend these hooks with [custom hooks](https://dioxuslabs.com/learn/0.7/essentials/advanced/custom_hooks) in your own code. If you think they would be useful for the broader community, you can open a PR to add your hook to the [Dioxus Awesome](https://github.com/DioxusLabs/awesome-dioxus) list.\n\n## State Cheat Sheet\n\nIf you aren't sure what hook to use, you can use this cheat sheet to help you decide:\n\n### State Location\n\nDepending on where you need to access the state, you can put your state in one of three places:\n\n| Location                                                                                 | Where can you access the state? | Recommended for Libraries? | Examples                                                                    |\n| ---------------------------------------------------------------------------------------- | ------------------------------- | -------------------------- | --------------------------------------------------------------------------- |\n| [Hooks](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html)             | Any components you pass it to   | ✅                          | `use_signal(\\|\\| 0)`, `use_memo(\\|\\| state() * 2)`                          |\n| [Context](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html) | Any child components            | ✅                          | `use_context_provider(\\|\\| Signal::new(0))`, `use_context::<Signal<i32>>()` |\n| [Global](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Signal.html#method.global)  | Anything in your app            | ❌                          | `Signal::global(\\|\\| 0)`                                                    |\n\n### Derived State\n\nIf you don't have an initial value for your state, you can derive your state from other states with a closure or asynchronous function:\n\n| Hook                                                                                | Reactive (reruns when dependencies change) | Async | Memorizes Output | Example                                                                             |\n| ----------------------------------------------------------------------------------- | ------------------------------------------ | ----- | ---------------- | ----------------------------------------------------------------------------------- |\n| [`use_memo`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_memo.html)         | ✅                                          | ❌     | ✅                | `use_memo(move \\|\\| count() * 2)`                                                   |\n| [`use_resource`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_resource.html) | ✅                                          | ✅     | ❌                | `use_resource(move \\|\\| reqwest::get(format!(\"/users/{user_id}\")))`                 |\n| [`use_future`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_future.html)     | ❌                                          | ✅     | ❌                | `use_future(move \\|\\| println!(\"{:?}\", reqwest::get(format!(\"/users/{user_id}\"))))` |\n\n### Persistent State\n\nThe core hooks library doesn't provide hooks for persistent state, but you can extend the core hooks with hooks from [dioxus-sdk](https://crates.io/crates/dioxus-sdk) and the [dioxus-router](https://crates.io/crates/dioxus-router) to provide persistent state management.\n\n| State                                                                              | Sharable | Example                                                                                           |\n| ---------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------- |\n| [`use_persistent`](https://github.com/DioxusLabs/sdk/tree/master/examples/storage) | ❌        | `use_persistent(\"unique_key\", move \\|\\| initial_state)`                                           |\n| [`Router<Route> {}`](https://dioxuslabs.com/learn/0.7/essentials/router/)          | ✅        | `#[derive(Routable, Clone, PartialEq)] enum Route { #[route(\"/user/:id\")] Homepage { id: u32 } }` |\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":1237,"sizeBytes":5873},{"name":"README.md","path":"packages/html/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/html/README.md","title":"html Documentation","category":"plugin-manifest","format":"markdown","content":"# `dioxus-html`: Html (and SVG) Namespace for Dioxus\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-html.svg\n[crates-url]: https://crates.io/crates/dioxus-html\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-html/latest/dioxus_html) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nThe Dioxus `rsx!` macro can accept any compile-time correct namespace on top of NodeFactory. This crate provides the HTML (and SVG) namespaces which get imported in the Dioxus prelude.\n\nHowever, this abstraction enables you to add any namespace of elements, provided they're in scope when rsx! is called. For an example, a UI that is designed for Augmented Reality might use different primitives than HTML:\n\n```rust, ignore\nuse ar_namespace::*;\n\nrsx! {\n    magic_div {\n        magic_header {}\n        magic_paragraph {\n            on_magic_click: move |event| {\n                //\n            }\n        }\n    }\n}\n```\n\nThis typed-builder system makes it possible to provide syntax highlighting, documentation, \"go to definition\" and compile-time correctness for elements and their attributes.\n\n## How it works:\n\nEvery HTML element is generated by the [`define_elements!`] macro. For each element the macro emits a builder whose methods are that element's attributes, so the `rsx!` macro lowers an element to the same typed builder path it uses for components.\n\nAttributes shared by every element — global attributes (`class`, `id`, `hidden`, ...) and event handlers (`onclick`, ...) — are provided through extension traits rather than being redefined on each tag. The built-in ones live under `dioxus_html::extensions` (`GlobalAttributesExtension`, `SvgAttributesExtension`, `EventsExtension`, and per-element extensions). Because each attribute is a typed method that records its serialized name and namespace, attribute creation is guarded behind a compile-time-correct interface.\n\nSince elements are builders generated by a macro rather than items in a fixed namespace, you can define your own elements from user code with the same macro — the built-in HTML vocabulary is defined this way too. See \"How to extend it\" below.\n\n## How to extend it:\n\nWhenever the rsx! macro is called, it relies on the HTML element constructors and extension traits that are in scope. When you enable the `html` feature in dioxus, the prelude imports the built-in HTML namespace for you. You can extend this with your own custom elements by adding a constructor for the tag and extension traits for any typed attributes you want to support.\n\n```rust, ignore\ndioxus::html::define_elements! {\n    #[element(name = \"analytics-panel\")]\n    analyticsPanel {\n        metric,\n        #[attr(name = \"data-region\")]\n        region,\n    }\n}\n\nrsx! {\n    analyticsPanel {\n        class: \"metric-card\",\n        metric: \"conversion-rate\",\n        region: \"north-america\",\n        \"Rendered as <analytics-panel>\"\n    }\n}\n```\n\nSee [`examples/09-reference/custom_element.rs`](../../examples/09-reference/custom_element.rs) for a complete example.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":980,"sizeBytes":4182},{"name":"README.md","path":"packages/interpreter/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/interpreter/README.md","title":"interpreter Documentation","category":"plugin-manifest","format":"markdown","content":"# `dioxus-interpreter-js`\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-interpreter-js.svg\n[crates-url]: https://crates.io/crates/dioxus-interpreter-js\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-interpreter-js/latest/dioxus_interpreter_js) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-interpreter-js` provides the high-performance JavaScript glue that interprets the stream of edits produced by the Dioxus VirtualDom and converts them into mutations on the actual web DOM.\n\nThis crate features bindings for the web and sledgehammer for increased performance.\n\n## Architecture\n\nWe use TypeScript to write the bindings and a very simple build.rs along with bun to convert them to javascript, minify them, and glue them into the rest of the project.\n\nNot every snippet of JS will be used, so we split out the snippets from the core interpreter.\n\nIn theory, we _could_ use Rust in the browser to do everything these bindings are doing. In reality, we want to stick with JS to skip the need for a WASM build step when running the LiveView and WebView renderers. We also want to use JS to prevent diverging behavior of things like canceling events, uploading files, and collecting form inputs. These details are tough to ensure 1:1 compatibility when implementing them in two languages.\n\nIf you want to contribute to the bindings, you'll need to have the typescript compiler installed on your machine as well as bun:\n\n<https://bun.sh/docs/installation>\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":654,"sizeBytes":2647},{"name":"README.md","path":"packages/liveview/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/liveview/README.md","title":"liveview Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus Liveview\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-liveview.svg\n[crates-url]: https://crates.io/crates/dioxus-liveview\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-liveview/latest/dioxus_liveview) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-liveview` provides adapters for running the Dioxus VirtualDom over a WebSocket connection.\n\nThe current backend frameworks supported include:\n\n- Axum\n\nDioxus-LiveView exports some primitives to wire up an app into an existing backend framework.\n\n- A ThreadPool for spawning the `!Send` VirtualDom and interacting with it from WebSockets\n- An adapter for transforming various socket types into the `LiveViewSocket` type\n- The glue to load the interpreter into your app\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":506,"sizeBytes":1921},{"name":"README.md","path":"packages/logger/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/logger/README.md","title":"logger Documentation","category":"plugin-manifest","format":"markdown","content":"<div align=\"center\">\n  <h1>📡 Dioxus Logger 🛰️</h1>\n  <p><strong>A logging utility to provide a standard interface whether you're targeting web, desktop, fullstack, and more.</strong></p>\n</div>\n\n<div align=\"center\">\n  <!-- Crates version -->\n  <a href=\"https://crates.io/crates/dioxus-logger\">\n    <img src=\"https://img.shields.io/crates/v/dioxus-logger.svg?style=flat-square\"\n    alt=\"Crates.io version\" />\n  </a>\n  <!-- Downloads -->\n  <a href=\"https://crates.io/crates/dioxus-logger\">\n    <img src=\"https://img.shields.io/crates/d/dioxus-logger.svg?style=flat-square\"\n      alt=\"Download\" />\n  </a>\n  <!-- docs -->\n  <a href=\"https://docs.rs/dioxus-logger\">\n    <img src=\"https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square\"\n      alt=\"docs.rs docs\" />\n  </a>\n</div>\n\n-----\n\n`dioxus-logger` is a basic cross-platform facade for logging in [Dioxus](https://dioxuslabs.com/) that uses the [tracing](https://crates.io/crates/tracing) crate.\n\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus_logger::tracing::{Level, info};\n\nfn main() {\n  dioxus_logger::init(Level::INFO).expect(\"logger failed to init\");\n  dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n  info!(\"App rendered\");\n  rsx! {\n    p { \"hi\" }\n  }\n}\n```\n\n## Dioxus support\n\nAs of v0.6, dioxus_logger is part of dioxus itself. Dioxus will call `init` with a default Level, though you can still override the default with `init`.\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus::logger::tracing::{Level, info};\n\nfn main() {\n  dioxus::logger::init(Level::INFO).expect(\"logger failed to init\");\n  dioxus::launch(App);\n}\n\n#[component]\nfn App() -> Element {\n  info!(\"App rendered\");\n  rsx! {\n    p { \"hi\" }\n  }\n}\n```\nFor non-wasm targets, runtime filtering is based on the `RUST_LOG` environment variable. e.g. for `RUST_LOG=none,crateName=trace` only logs trace and above for `crateName` will be captured. See [here](https://docs.rs/tracing-subscriber/latest/tracing_subscriber/filter/struct.EnvFilter.html#directives) for syntax. For crates with `-` in the name, these need to be changed to `_` in `RUST_LOG`.\n\n## Platform Support\nDioxus logger will eventually support every target that Dioxus does. Currently mobile and TUI are not supported.\n\n## Installation\n`dioxus_logger` is part of Dioxus v0.6. If you're using Dioxus v0.6, then no installation is required!\n\n\nIf you're on Dioxus v0.5 and below, you can add `dioxus-logger` to your application by adding it to your dependencies.\n```toml\n[dependencies]\ndioxus-logger = \"0.5\"\n```\n\n\n## License\nThis project is licensed under the [MIT license].\n\n[mit license]: ./LICENSE\n\nEvery contribution intentionally submitted for inclusion in `dioxus-logger` by you, shall be licensed as MIT, without any additional terms or conditions.\n","isInternal":false,"tokens":790,"sizeBytes":2758},{"name":"README.md","path":"packages/manganis/manganis-macro/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/manganis/manganis-macro/README.md","title":"manganis-macro Documentation","category":"plugin-manifest","format":"markdown","content":"# Manganis Macro\n\nThis crate contains the macro used to interact with the Manganis asset system. \n","isInternal":false,"tokens":23,"sizeBytes":98},{"name":"README.md","path":"packages/manganis/manganis/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/manganis/manganis/README.md","title":"manganis Documentation","category":"plugin-manifest","format":"markdown","content":"# Manganis\n\nManganis is a tool for submitting assets and native source files to the program linker. It makes it easy to self-host assets and native plugins that are distributed throughout your libraries.\n\n## Assets\n\nIncluding assets is as simple as using the `asset!()` macro:\n\n```rust\nuse manganis::{Asset, asset};\nconst STYLE: Asset = asset!(\"/assets/style.css\");\n```\n\nAfter cargo builds your app, the asset path is embedded directly in the data section. A tool like the Dioxus CLI can extract this metadata and post-process these assets.\n\n```rust, ignore\nuse manganis::{ImageFormat, Asset, asset, ImageSize, AssetOptions};\n// You can collect arbitrary files. Absolute paths are resolved relative to the package root\nconst _: Asset = asset!(\"/assets/script.js\");\n\n// You can collect images which will be automatically optimized\npub const PNG_ASSET: Asset =\n    asset!(\"/assets/image.png\");\n// Resize the image at compile time to make the assets smaller\npub const RESIZED_PNG_ASSET: Asset =\n    asset!(\"/assets/image.png\", AssetOptions::image().with_size(ImageSize::Manual { width: 52, height: 52 }));\n// Or convert the image at compile time to a web friendly format\npub const AVIF_ASSET: Asset = asset!(\"/assets/image.png\", AssetOptions::image().with_format(ImageFormat::Avif));\n```\n\n## option_asset\n\nIf you have assets that may not always be bundled, you can fall back gracefully with `option_asset!`:\n\n```rust\nuse manganis::{Asset, asset, option_asset};\nconst REQUIRED: Asset = asset!(\"/assets/style.css\");\nconst OPTIONAL: Option<Asset> = option_asset!(\"/assets/missing.css\");\n```\n\n## JavaScript assets\n\nThe CLI auto-detects whether each `.js` asset is an ES module (top-level\n`import`/`export` or `import.meta`) or a classic script and processes it\naccordingly.\n\n- **`with_minify(true)` (default)**: the file is minified in place. Classic\n  scripts are minified verbatim with their format preserved (no IIFE\n  re-wrapping). ES modules are minified and bundled — local relative imports\n  are inlined into a single ESM file, while `http://` / `https://` imports\n  remain as external `import` statements for the browser to resolve at runtime.\n- **`with_minify(false)`**: the file is copied byte-for-byte. Use this when\n  shipping pre-built third-party libraries you do not want re-processed.\n- **`with_static_head(true)`**: appends a `<script>` tag to the document head\n  pointing at the asset. The CLI emits `<script type=\"module\" ...>` when the\n  file is detected (or declared) as an ES module, and a classic `<script>`\n  otherwise.\n- **`with_preload(true)`**: emits a `<link rel=\"preload\" as=\"script\">` for the asset.\n- **`with_module(true)`**: forces the file to be treated as an ES module even\n  when auto-detection would say otherwise. Useful when you author a\n  side-effect-only module without top-level `import`/`export` declarations.\n  Files named `*.mjs` are always treated as modules; files named `*.cjs` are\n  always treated as classic.\n\n```rust, ignore\nuse manganis::{asset, Asset, AssetOptions};\n\n// Vendored UMD library: copy verbatim, emitted as a classic <script>.\nconst SWEETALERT: Asset = asset!(\n    \"/assets/sweetalert2.all.min.js\",\n    AssetOptions::js().with_minify(false).with_static_head(true)\n);\n\n// Authored ES module with local imports: auto-detected from the top-level\n// `import`/`export`, bundled and minified into a single ESM file, emitted as\n// `<script type=\"module\">`.\nconst APP: Asset = asset!(\n    \"/assets/app.js\",\n    AssetOptions::js().with_static_head(true)\n);\n```\n\n## Native FFI Bindings\n\nManganis provides the `#[ffi]` attribute macro for generating direct FFI bindings between Rust and native platforms (Swift/Kotlin). See the `geolocation-native-plugin` example for usage.\n","isInternal":false,"tokens":910,"sizeBytes":3723},{"name":"README.md","path":"packages/playwright-tests/barebones-template/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/playwright-tests/barebones-template/README.md","title":"barebones-template Documentation","category":"plugin-manifest","format":"markdown","content":"# Development\n\nYour new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.\n\n```\nproject/\n├─ assets/ # Any assets that are used by the app should be placed here\n├─ src/\n│  ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app\n├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project\n```\n\n### Serving Your App\n\nRun the following command in the root of your project to start developing with the default platform:\n\n```bash\ndx serve\n```\n\nTo run for a different platform, use the `--webview`, `--native`, or `--web` flags. E.g.\n\n```bash\ndx serve --webview\n```\n","isInternal":false,"tokens":172,"sizeBytes":712},{"name":"README.md","path":"packages/router/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/router/README.md","title":"router Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus Router\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-router.svg\n[crates-url]: https://crates.io/crates/dioxus-router\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/essentials/router/) |\n[API Docs](https://docs.rs/dioxus-router/latest/dioxus_router) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nDioxus Router is a first-party Router for all your Dioxus Apps. It provides an\ninterface similar to React Router, but takes advantage of types for more\nexpressiveness.\n\n```rust, no_run\nuse dioxus::prelude::*;\nuse std::str::FromStr;\n\n#[rustfmt::skip]\n#[derive(Clone, Debug, PartialEq, Routable)]\nenum Route {\n    #[nest(\"/blog\")]\n        #[layout(Blog)]\n            #[route(\"/\")]\n            BlogList {},\n\n            #[route(\"/:blog_id\")]\n            BlogPost { blog_id: usize },\n        #[end_layout]\n    #[end_nest]\n    #[route(\"/\")]\n    Index {},\n}\n\n#[component]\nfn App() -> Element {\n    rsx! {\n        Router::<Route> { }\n    }\n}\n\n#[component]\nfn Index() -> Element {\n    rsx! {\n        h1 { \"Index\" }\n        Link {\n            to: Route::BlogList {},\n            \"Go to the blog\"\n        }\n    }\n}\n\n#[component]\nfn Blog() -> Element {\n    rsx! {\n        h1 { \"Blog\" }\n        Outlet::<Route> { }\n    }\n}\n\n#[component]\nfn BlogList() -> Element {\n    rsx! {\n        h2 { \"List of blog posts\" }\n        Link {\n            to: Route::BlogPost { blog_id: 0 },\n            \"Blog post 1\"\n        }\n        Link {\n            to: Route::BlogPost { blog_id: 1 },\n            \"Blog post 2\"\n        }\n    }\n}\n\n#[component]\nfn BlogPost(blog_id: usize) -> Element {\n    rsx! {\n        h2 { \"Blog Post\" }\n    }\n}\n```\n\nYou need to enable the right features for the platform you're targeting since these are not determined automatically!\n\n## Bundle Splitting\n\nThe Dioxus Router supports automatic bundle splitting along route variants. To enable this, you need to manually turn on the `wasm-split` feature explicitly on the dioxus-router crate:\n\n```toml\n[dependencies]\ndioxus = { version = \"*\", features = [\"router\", \"wasm-split\"] }\ndioxus-router = { version = \"*\", features = [\"wasm-split\"] }\n```\n\nNote that `wasm-split` must also be turned on in dioxus since the macro uses the re-exported `wasm-split` from the dioxus prelude.\n\nEnabling splitting disconnects the call graph, meaning if you try to run your app with a normal `dx serve`, it won't work. When running with router splitting, you need to pass `--experimental-wasm-split`.\n\n```sh\ndx serve --experimental-wasm-split\n```\n\nIn practice, we recommend passing `dioxus-router?/wasm-split` as a feature only when bundling:\n\n```sh\ndx bundle --features \"dioxus-router?/wasm-split\"  --experimental-wasm-split\n```\n\nNote that the router will call `.suspend()` so you should add a SuspenseBoundary above the Outlet to prevent suspending the entire page.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n","isInternal":false,"tokens":1041,"sizeBytes":3947},{"name":"README.md","path":"packages/rsx-rosetta/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/rsx-rosetta/README.md","title":"rsx-rosetta Documentation","category":"plugin-manifest","format":"markdown","content":"# `rsx-rosetta`\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/rsx-rosetta.svg\n[crates-url]: https://crates.io/crates/rsx-rosetta\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/rsx-rosetta/latest/rsx_rosetta) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nDioxus sports its own templating language inspired by C#/Kotlin/RTMP, etc. It's pretty straightforward.\n\nHowever, it's NOT HTML. This is done since HTML is verbose and you'd need a dedicated LSP or IDE integration to get a good DX in .rs files.\n\nRSX is simple... It's similar enough to regular Rust code to trick most IDEs into automatically providing support for things like block selections, folding, highlighting, etc.\n\nTo accommodate the transition from HTML to RSX, you might need to translate some existing code.\n\nThis library provides a central AST that can accept a number of inputs:\n\n- HTML\n- Syn (todo)\n- Akama (todo)\n- Jinja (todo)\n\nFrom there, you can convert directly to a string or into some other AST.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n","isInternal":false,"tokens":571,"sizeBytes":2146},{"name":"README.md","path":"packages/rsx/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/rsx/README.md","title":"rsx Documentation","category":"plugin-manifest","format":"markdown","content":"# Dioxus-RSX\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-rsx.svg\n[crates-url]: https://crates.io/crates/dioxus-rsx\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-rsx/latest/dioxus_rsx) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\nThis crate provides the actual DSL that Dioxus uses in the `rsx!` macro. This crate is separate from the macro crate to enable tooling like autoformat, translation, and AST manipulation (extract to component).\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## Design\n\nThe architecture of this crate has gone through several redesigns and we're hoping that we've finally landed on a final design that we're happy with.\n\nThere is still some thinking that we could approach this by flattening the AST to have better incremental parsing and performance without having to add metadata to the data structures.\n\nFor now, however, the design we've settled on:\n\n- A top-level CallBody containing a single TemplateBody\n- Each TemplateBody has its dynamic mapping on it, filled in after parsing (...not during)\n- Hotreload Information for things like literals is propagated as a final pass into nodes on the tree\n\nThis lets us incrementally build up the tree to make it modular/easier to test in exchange for extra \"bookkeeping passes\".\n\nThe good part of bookkeeping passes is:\n- They're optional\n- They're generally pretty quick\n- They can be enforced as part of tree construction in the various levels\n\nOf course the major downside is they're 1) slower and 2) need a way to store metadata, which they do on the nodes themselves. Sometimes you might not even want to collect metadata which we currently have no way of opting-out of.\n\nThis can make global reasoning about the tree a bit harder since you need to dig into each node for its metadata, but the local reasoning is much better. Previously we stored the metadata on a secondary \"view\" type item - and this was fine... but it's not ideal for long-lived programs that persist a queryable tree-object.\n\nWe want to query the tree:\n- For its dynamic mappings\n- For its hot-reloadable contents\n\nAn alternative approach would be\n- flattened AST\n- single \"parser\" IE `self.parse_element` / `self.parse_component`\n\nI've done a bunch of research on parsers and cannot find many (any?) parsers that are implemented statefully.\n\nWe *do* want a reference to these items - currently its their path, but it could be done via just an ID for each node. Unfortunately there's no easy way to \"pool\" these up other than Arc/Rc.\n\nAnyways, until our applications are limited by query performance, keeping the tree unflattened seems fine. The JS DOM has a similar API where it flushes changes after modifications, but also has an ID system via pointers. We could try adding IDs with something like generational-box or just Arc/Rc.\n\nNote that we still don't get the \"goodies\" of a proper tree-sitter type parser (skipping tokenization incrementally) but that really isn't achievable without being a part of the LSP. In theory, we can eventually use the LSP to help modify the tree in place and then \"fix\" it if you wanted to modify trees in place. That being said, we still need to perform diffing of two rsx! trees even when we know their shape has changed.\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT, without any additional\nterms or conditions.\n","isInternal":false,"tokens":1042,"sizeBytes":4359},{"name":"README.md","path":"packages/signals/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/signals/README.md","title":"signals Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsignals%2FREADME.md -->","isInternal":false,"tokens":655,"sizeBytes":2805},{"name":"README.md","path":"packages/ssr/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/ssr/README.md","title":"ssr Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fssr%2FREADME.md -->","isInternal":false,"tokens":862,"sizeBytes":3302},{"name":"README.md","path":"packages/stores/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/stores/README.md","title":"stores Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fstores%2FREADME.md -->","isInternal":false,"tokens":459,"sizeBytes":2068},{"name":"README.md","path":"packages/subsecond/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/subsecond/README.md","title":"subsecond Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsubsecond%2FREADME.md -->","isInternal":false,"tokens":568,"sizeBytes":2359},{"name":"README.md","path":"packages/subsecond/subsecond-tests/cross-tls-test/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/subsecond/subsecond-tests/cross-tls-test/README.md","title":"cross-tls-test Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fsubsecond%2Fsubsecond-tests%2Fcross-tls-test%2FREADME.md -->","isInternal":false,"tokens":101,"sizeBytes":420},{"name":"README.md","path":"packages/wasm-split/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/wasm-split/README.md","title":"wasm-split Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fwasm-split%2FREADME.md -->","isInternal":false,"tokens":129,"sizeBytes":585},{"name":"README.md","path":"packages/web/README.md","rawUrl":"https://raw.githubusercontent.com/DioxusLabs/dioxus/HEAD/packages/web/README.md","title":"web Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/DioxusLabs/dioxus?path=packages%2Fweb%2FREADME.md -->","isInternal":false,"tokens":486,"sizeBytes":1724}],"systemPromptSnippet":"<yakaai_skills repo=\"DioxusLabs/dioxus\">\n<!-- File: AGENTS.md (Tokens: ~977 | Category: root-instruction) -->\n# Dioxus Agent Guide\n\nDioxus is a cross-platform UI framework for Rust, similar to React. It compiles to web (WASM), desktop (webview), mobile (iOS/Android), and native (GPU-rendered).\n\n## Quick Overview\n\n- **Language**: Rust (stable toolchain)\n- **UI Model**: React-like with VirtualDOM, components, hooks, signals\n- **Syntax**: JSX-like `rsx!` macro for declaring UI\n- **Platforms**: Web, Desktop (Windows/macOS/Linux), Mobile, Native, LiveView (server-rendered)\n\n## Workspace Structure\n\n```\npackages/\n├── dioxus/           # Main re-export crate users depend on\n├── core/             # VirtualDOM, components, diffing, scheduling\n├── rsx/              # RSX macro parsing and code generation\n├── rsx-hotreload/    # Template diffing for hot-reload\n├── signals/          # Reactive state (Signal, Memo, Store)\n├── hooks/            # Built-in hooks (use_signal, use_effect, etc.)\n├── router/           # Type-safe routing with #[derive(Routable)]\n├── fullstack/        # SSR, hydration, #[server] functions\n├── cli/              # `dx` build tool, dev server, bundling\n├── web/              # WASM renderer\n├── desktop/          # Wry/Tao webview renderer\n├── native/           # Blitz/Vello GPU renderer\n├── liveview/         # WebSocket streaming renderer\n├── manganis/         # asset!() macro for compile-time assets\n├── subsecond/        # Hot-patching system (jump table indirection)\n├── devtools/         # Dev server communication protocol\n├── interpreter/      # Sledgehammer JS for DOM mutations\n└── wasm-split/       # WASM code splitting\n```\n\n## Architecture Documentation\n\nFor deeper understanding, see `notes/architecture/`:\n\n| When working on...                         | Read...            |\n| ------------------------------------------ | ------------------ |\n| VirtualDOM, components, diffing, events    | `01-CORE.md`       |\n| CLI, build system, bundling, dev server    | `02-CLI.md`        |\n| RSX macro, parsing, formatting             | `03-RSX.md`        |\n| Signals, state management, reactivity      | `04-SIGNALS.md`    |\n| Server functions, SSR, hydration           | `05-FULLSTACK.md`  |\n| Web/desktop/native/liveview renderers      | `06-RENDERERS.md`  |\n| Hot-reload, hot-patching, devtools         | `07-HOTRELOAD.md`  |\n| Asset macro, manganis, const serialization | `08-ASSETS.md`     |\n| Router, navigation, nested routes          | `09-ROUTER.md`     |\n| WASM code splitting                        | `10-WASM-SPLIT.md` |\n\n## Key Concepts\n\n- **VirtualDOM**: Tree of `VNode` with templates, dynamic nodes, and attributes\n- **Signals**: Copy-able reactive primitives via generational-box (generation-based validity)\n- **WriteMutations**: Trait that renderers implement to apply DOM changes\n- **RSX**: Proc macro that compiles JSX-like syntax to `VNode` construction\n- **Server Functions**: `#[server]` macro generates client RPC stubs and server handlers\n- **Subsecond**: Hot-patches Rust code via jump table indirection (no memory modification)\n- **Manganis**: `asset!(\"/main.css\")` macro for including assets by embedding data via linker symbols\n\n## Common Patterns\n\n**Component definition**:\n```rust\n#[component]\nfn MyComponent(name: String) -> Element {\n    let mut count = use_signal(|| 0);\n    rsx! {\n        button { onclick: move |_| count += 1, \"{name}: {count}\" }\n    }\n}\n```\n\n## Notes for Agents\n\n1. The `dioxus` crate re-exports from other crates - most implementation is in `packages/core`, `packages/signals`, etc.\n2. RSX macro expansion happens in `packages/rsx` - look there for syntax questions\n3. Each renderer implements `WriteMutations` differently - see `06-RENDERERS.md`\n4. Hot-reload has two systems: RSX template diffing (fast) and Subsecond code patching (full Rust)\n5. Assets use link sections and binary patching - the `asset!()` macro creates symbols the CLI processes\n\n<!-- File: .devin/skills/release-alpha/SKILL.md (Tokens: ~4358 | Category: anthropic-skill) -->\n---\nname: release-alpha\ndescription: Cut a Dioxus 0.x alpha release (version bump, crates.io publish, tag, GitHub release, CLI binaries, template update, verification, and optionally the SDK/icons/code/components releases)\nargument-hint: \"<new version, e.g. 0.8.0-alpha.3>\"\ntriggers:\n  - user\n  - model\nallowed-tools:\n  - read\n  - grep\n  - glob\n---\n\n# Releasing a Dioxus alpha\n\nUse this to cut a prerelease of the whole workspace (for example `0.8.0-alpha.3`). The general checklist is in `notes/RELEASING.md`. This skill is the concrete, tested procedure for an alpha, written down after cutting `0.8.0-alpha.2`. Step 8 (ecosystem crates) was added after `0.8.0-alpha.3`.\n\n`NEW` is the version being released and `PREV` is the last release tag (e.g. `v0.8.0-alpha.2`). If the user didn't give `NEW`, ask.\n\n## Confirmation gates\n\nThese steps can't be undone. Do each one only when the user has explicitly asked for it, and don't treat approval of one as approval of the next:\n\n- publishing to crates.io (versions can't be deleted)\n- pushing to `main`. Branch protection requires a PR, and the user's account can bypass that rule, so a direct push goes through silently. Prefer a PR.\n- pushing tags, creating the GitHub release, and running the `Publish CLI` workflow\n- creating new crates on crates.io and changing crate owners\n\nNever edit `.npmrc`, `minimumReleaseAge` or branch protection to get around a failure.\n\n## Environment notes (macOS)\n\n- **bash 3.2:** a heredoc inside `$(...)` that contains an apostrophe fails to parse. Write commit messages and PR bodies to a file and use `git commit -F file` and `gh pr create --body-file file`.\n- **sed:** in-place edits need `sed -i ''`.\n- **crates.io API:** requests are rejected without a User-Agent, so pass `curl -A dioxus-release-check ...`.\n- **Don't touch the user's `dx`:** don't `cargo install` over it. Build `dx` into `target/release/dx` with `cargo build -p dioxus-cli --release`, and set `DX_HOME=<scratch dir>` so its tools are downloaded fresh and the user's dx data stays untouched.\n- **Cleanup:** put scratch work under `/tmp/<name>` and delete it when done.\n\n## 1. Pre-flight\n\n1. **Base commit and CI.** Find the latest `main` commit with `git fetch origin`. Check its CI with `gh run list --branch main --workflow main.yml --limit 3`. Wait for green before cutting.\n2. **What's new.** Find the commit `PREV` was cut from: `git merge-base origin/main PREV`. A tag can be on a side branch (alpha.1's was). List the commits since then with `git log --oneline <base>..origin/main`.\n3. **New publishable crates.** Diff the `[workspace.dependencies]` entries in `Cargo.toml` against `PREV`. For each publishable member, query `https://crates.io/api/v1/crates/<name>`; a 404 means it's new.\n   - **Claim the names first** (confirmation gate). For each new crate, in `/tmp`, run `cargo new --lib --vcs none <name>`. Copy `description`, `license`, `repository`, `homepage`, `keywords` and `authors` from the real crate, set `version = \"0.0.0\"`, and make `src/lib.rs` just `//! Coming soon.`. Then `cargo publish --dry-run` followed by `cargo publish`.\n   - **Add owners:** `github:dioxuslabs:publish`, `jkelleyrtp` (Jonathan Kelley) and `ealmloff` (Evan Almloff), with `cargo owner --add github:dioxuslabs:publish --add jkelleyrtp --add ealmloff <crate>`. This needs a token with the `change-owners` scope. If cargo returns 403, give the user `https://crates.io/crates/<crate>/settings` instead.\n   - **Naming:** a crate name can't be changed once it has a real release, so settle names before publishing.\n4. **Dev-dependencies on `publish = false` crates** (for example `dioxus-renderer-oracle` in `dioxus-core`). These are fine because `cargo workspaces publish` strips dev-dependencies by default (it logs `warn removing dev-deps ...`). Never pass `--no-remove-dev-deps`. Plain `cargo publish` or `cargo publish --workspace` would fail on them.\n5. **Optional packaging dry run.** `cargo workspaces publish --dry-run` can't get past the first crate whose dependencies aren't on crates.io yet, so it isn't useful. Instead:\n   - Create a scratch worktree with `git worktree add --detach /tmp/dioxus-dryrun HEAD`.\n   - Bump the version there, and strip `[dev-dependencies]` from the crates you're checking.\n   - Run `cargo publish --dry-run --no-verify --allow-dirty -p <crate> -p <each workspace crate it depends on, transitively>`.\n   - Remove the worktree afterwards with `git worktree remove --force`.\n6. **Smoke test** (web, from the base commit):\n   - Build `dx` as described in the environment notes.\n   - Run `dx new` in `/tmp`. It needs a TTY, and even with `--yes` it still asks for the sub-template and platform. To run it without a TTY, pass `--subtemplate Bare-Bones --option default_platform=web --yes --vcs none`.\n   - Add `[patch.crates-io] dioxus = { path = \"<repo>/packages/dioxus\" }` to the project.\n   - Run `dx serve --web --port <p> --open false --interactive false`. In the browser, check that the page renders and the CSS/SVG assets load.\n   - Check hot reload: edit RSX text, then CSS, then add a `use_signal` counter button (a Rust hot-patch) and click it.\n   - Run `dx bundle --web --release`, serve `target/dx/<app>/release/web/public` with `python3 -m http.server`, and click the button again.\n   - Check that `dx` installs `wasm-bindgen-cli` at the same version as the project's `wasm-bindgen`, and compare against the latest on crates.io.\n   - To check app logs, use the interactive TUI. `--interactive false --verbose` drops app logs; that's an existing bug.\n\n## 2. Version bump\n\n1. Create the branch: `git switch -c release-NEW origin/main`, then `git branch --unset-upstream`.\n2. Find every reference to the old version with `rg -l --glob '!Cargo.lock' --glob '!target/**' '<OLD_VERSION_REGEX>' .`. Expect:\n   - `Cargo.toml` (the `[workspace.package]` version and every `=<old>` entry in `[workspace.dependencies]`)\n   - `packages/const-serialize/Cargo.toml`\n   - `packages/const-serialize-macro/Cargo.toml`\n   - `packages/manganis/manganis-core/Cargo.toml` (its `const-serialize` dependency)\n3. Replace the version with `sed -i '' 's/<old>/<new>/g' <files>`, then run `cargo update -w`.\n4. Verify:\n   - In `git diff -U0 Cargo.lock`, the only changed lines are `version = \"...\"` lines.\n   - `cargo metadata --locked` succeeds.\n   - `cargo check --locked -p dioxus -p dioxus-cli` succeeds.\n5. Commit with the message `Bump versions for NEW release` (the existing convention).\n6. Get the bump onto `main` before tagging, preferably through a PR. The tag must end up on a commit that's on `main`.\n\n## 3. Release notes\n\n1. Generate the base notes:\n   `gh api repos/DioxusLabs/dioxus/releases/generate-notes -f tag_name=vNEW -f target_commitish=main -f previous_tag_name=PREV --jq .body`.\n   `target_commitish` must be a branch name; a SHA is rejected.\n2. Above the generated list, add a `## Highlights` section and, if needed, a `## Breaking changes` section. Write them from the PR descriptions (`gh pr view <n> --json title,body`), not just the titles. Keep the generated \"What's Changed\", \"New Contributors\" and \"Full Changelog\" sections unchanged.\n3. Credit original authors of rebased or superseded PRs, e.g. `(originally #NNNN by @user)`.\n4. Commits pushed straight to main have no PR and won't appear in the generated list.\n5. Save the notes to `/tmp/vNEW-release-notes.md`.\n\n## 4. Publish (confirmation gate)\n\nFrom a clean tree on the bump commit, run the command from `notes/RELEASING.md`:\n\n```\ncargo workspaces publish --publish-as-is --allow-dirty --no-git-push --no-individual-tags\n```\n\n- **Rate limits:** crates.io allows a burst of about 30 to 34 updates to existing crates, then about 1 per minute. When it returns `429 Too Many Requests ... try again after <date> GMT`, `cargo-workspaces` stops.\n- **Retrying:** re-run with `publish-with-retry.sh` in this skill's directory. Each re-run skips crates that are already published, waits until the time crates.io gave, and stops on any non-rate-limit error. It shows each run's output as it happens and also saves it to `<log prefix><run>.log`. Run it in the background and report progress as `published N/total`.\n- **Timing:** for about 56 crates, expect about 30 minutes in total.\n- **Check the result:** query `https://crates.io/api/v1/crates/<name>/NEW` for every publishable crate. Take the list from `cargo metadata --no-deps` (packages where `publish` is null or non-empty).\n\n## 5. Tag, GitHub release and CLI binaries (each a confirmation gate)\n\n1. **Tag:** previous tags are lightweight. Run `git tag vNEW <bump commit>`, then `git push origin vNEW`.\n2. **GitHub release:**\n   `gh release create vNEW --verify-tag --prerelease --latest=false --title vNEW --notes-file /tmp/vNEW-release-notes.md`.\n   Afterwards, confirm `gh api repos/DioxusLabs/dioxus/releases/latest` still returns the last stable release.\n3. **CLI binaries:** the release must exist first, because the workflow uploads to it:\n   `gh workflow run publish.yml --ref main -f post=vNEW -f channel=vNEW`.\n   It takes about 30 minutes; Intel macOS is the slowest job. When it finishes, the release should have 16 files: `.zip`, `.tar.gz` and `.sha256` for each of 6 targets (Windows has no `.tar.gz`).\n\n## 6. Verify\n\n1. **docs.rs:** check `https://docs.rs/crate/<name>/NEW/status.json` (`doc_status`) for every crate.\n   - `dioxus-cli` always fails because it's binary-only. That's expected.\n   - For any other failure, read the build log at `https://docs.rs/crate/<name>/NEW/builds/<id>`; the first build id is linked from `/builds`. Also check whether the previous version failed the same way.\n2. **binstall:**\n   - Download a `cargo-binstall` release that's at least 7 days old into `/tmp` with `gh release download vX --repo cargo-bins/cargo-binstall --pattern 'cargo-binstall-aarch64-apple-darwin.zip'`.\n   - Run `cargo-binstall dioxus-cli@NEW --root /tmp/<scratch> --no-confirm --no-track --disable-telemetry --strategies crate-meta-data`.\n   - `dx --version` should print `NEW (<tag commit short sha>)`.\n3. **Published crates:**\n   - Run `dx new` with the binstalled `dx`, without the `[patch]` section.\n   - Run `cargo generate-lockfile`, and check that `dioxus*` resolve to `NEW` from the registry.\n   - Run `dx serve` and repeat the browser and hot-reload checks from 1.6.\n\n## 7. Template\n\nThe default `dx new` template is `gh:dioxuslabs/dioxus-template`, on the branch `v<major>.<minor>` (e.g. `v0.8`).\n\n1. Clone it into `/tmp` with `gh repo clone DioxusLabs/dioxus-template /tmp/dioxus-template -- --branch v0.8`, and create a branch.\n2. Bump the old version to `NEW` in:\n   - `common.rhai` (`DIOXUS_DEP_SRC_VAR`)\n   - `Bare-Bones/AGENTS.md`, `Jumpstart/AGENTS.md`, `Workspace/AGENTS.md`\n   - `.github/workflows/main.yml` (the `cargo binstall dioxus-cli@...` line)\n3. Leave `dioxuslabs.com/learn/<ver>/` links alone unless that docs version returns 200.\n4. Test locally the way the template's CI does: for each of Bare-Bones, Jumpstart and Workspace, run `dx new --template . --subtemplate <X> --yes --option default_platform=web --vcs none <dir>` (Workspace doesn't need `default_platform`), then `cargo check --all-features`.\n5. Open a PR against `v0.8`.\n\n## 8. Ecosystem crates (optional)\n\nOnly do this if the user asks. These repos pin Dioxus exactly (`=NEW`), so each one needs a matching release. Their 0.8 work lives on a `0.8` branch (`v<major>.<minor>` without the `v`); `main` stays on 0.7.\n\n| Repo | Crates published | Version |\n|---|---|---|\n| `DioxusLabs/sdk` | `dioxus-sdk` and the `dioxus-sdk-{time,storage,geolocation,notification,sync,util,window}` subcrates | `NEW` (mirrors Dioxus) |\n| `DioxusLabs/dioxus-icons` | `dioxus-icons` | its next minor with Dioxus's prerelease suffix, e.g. `0.2.0-alpha.3` |\n| `DioxusLabs/dioxus-code` | `dioxus-code-macro`, `dioxus-code`, `dioxus-code-editor` (all one version) | same rule as icons |\n| `DioxusLabs/dioxus-components` | nothing; `dx components add` uses the `0.8` branch from git | n/a |\n\nPrerelease versions mean `cargo add` keeps giving 0.7 users the latest stable release.\n\n1. **Look for upgrade work already in progress.** Run `gh pr list --repo <repo> --state open` on each repo. If a contributor has an upgrade branch open, build the release PR on top of their commits rather than starting fresh. Add `Co-authored-by: <name> <email>` (from `git log`) to every commit you make in that repo. Keep their PRs open until yours merge, then close them with a thank-you that links the replacement.\n2. **Release order.** Components depends on the SDK (`dioxus-primitives` → `dioxus-sdk-time`), and its unpublished `preview` crate depends on icons and code. The dioxus-code docsite depends on `dioxus-primitives` from components via git. So:\n   1. Release the SDK and icons: PR to `0.8` (create the branch from `main` if it doesn't exist), merge, publish, tag.\n   2. Open the components PR to `0.8`. Until the crates above are published, point it at their release branches as git dependencies. Merge it.\n   3. Release dioxus-code. Pin the docsite to the components merge commit with `rev = \"<sha>\"`, not `branch = \"0.8\"`. Because both repos pin Dioxus exactly, a branch reference breaks resolution as soon as components moves to the next alpha.\n   4. Follow-up PR in components: switch to exact pins on the published crates (`=NEW`, `=0.x.0-alpha.N`). Check that `Cargo.lock` has no `git+` sources left.\n3. **Each release PR:** bump the Dioxus pins and the crate versions, update the README install lines and any compatibility notes, then run the repo's CI commands locally. CI on these repos usually only runs for PRs into `main`, so it won't run on a PR into `0.8` (components#307 adds version-branch CI there). Expect API fixes from that Dioxus release, such as the keyboard-types 0.8 `Key::Named(NamedKey::…)` change in alpha.3.\n4. **Publish** (confirmation gate). Publish from a clean `git worktree add --detach <dir> <merge commit>`:\n   - Check `git diff --stat <tested head> <merge commit>` is empty (PRs are squash-merged) and the squash commit kept the `Co-authored-by` trailers.\n   - Check `cargo workspaces list` shows only the crates above, with no examples.\n   - Run `publish-with-retry.sh <worktree> <log prefix>`. Use `cargo workspaces` for dioxus-code too: `dioxus-code-macro` dev-depends on `dioxus-code`, and plain `cargo publish` can't handle that cycle.\n5. **Tag and release** (confirmation gates): add a lightweight `v<version>` tag on the merge commit, then run `gh release create ... --prerelease --latest=false`. Above GitHub's generated notes (`target_commitish=0.8`, `previous_tag_name=<last tag>`), add a short intro: the Dioxus version it targets, the install line, a note that 0.7 users aren't affected, and credit for the PRs it builds on. The generated list only credits whoever opened the release PR.\n6. **Verify:**\n   - every version returns 200 from the crates.io API, and `max_stable_version` is unchanged\n   - a scratch project that depends on Dioxus `NEW` plus the new crates resolves everything from the registry, with one `dioxus`, and passes `cargo check`\n   - docs.rs builds. `dioxus-sdk` and `dioxus-sdk-window` fail because `listen` and `get_theme_platform` are defined twice under all features (0.7.0 failed the same way). Large crates like `dioxus-icons` take a few minutes to show as built.\n7. **Gotchas:**\n   - The components `preview` and dioxus-code docsite web builds compile C to wasm32 (`arborium-sysroot`), which Apple clang can't do. Without an LLVM clang, check those for desktop instead.\n   - None of these repos delete merged branches automatically. Delete the temporary release branches only once nothing references them, including the docsite's components rev.\n\n## 9. Wrap up\n\nReport back:\n\n- links to the crates.io release, the GitHub release, the CLI workflow run and any PRs\n- the docs.rs results\n- anything you didn't test (desktop, mobile, fullstack, Windows/Linux)\n- follow-ups: owner invites, open PRs, letting VIP projects like Freya know, and the Discord release-notes channel\n\nDelete all `/tmp` scratch files and worktrees you created.\n\n<!-- File: packages/core-macro/docs/component.md (Tokens: ~2491 | Category: anthropic-skill) -->\n# Component\n\nThe component macro turns a function with arguments that are [`Clone`] and [`PartialEq`] into a component. This is the recommended way of creating most components. If you want more fine grained control over how the overall prop struct implements the `Properties` trait, you can use an explicit props struct with the [`Props`] derive macro instead.\n\n## Arguments\n\n- `no_case_check` - Doesn't enforce `PascalCase` on your component names.\n  **This will be removed/deprecated in a future update in favor of a more complete Clippy-backed linting system.**\n  The reasoning behind this is that Clippy allows more robust and powerful lints, whereas\n  macros are extremely limited.\n\n## Features\n\nThis attribute:\n\n- Enforces that your component uses `PascalCase` or `snake_case` with at least one underscore.\n- Automatically creates a prop struct for your component if the function has arguments.\n- Verifies the function signature is valid as a component.\n\n## Examples\n\n- Without props:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn GreetBob() -> Element {\n    rsx! { \"hello, bob\" }\n}\n```\n\n- With props:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn GreetBob(bob: String) -> Element {\n    rsx! { \"hello, {bob}\" }\n}\n```\n\n## Prop Modifiers\n\nYou can use the `#[props()]` attribute to modify the behavior of the props the component macro creates:\n\n- [`#[props(default)]`](#default-props) - Makes the field optional in the component and uses the default value if it is not set when creating the component.\n- [`#[props(!optional)]`](#optional-props) - Makes a field with the type `Option<T>` required.\n- [`#[props(into)]`](#converting-props) - Converts a field into the correct type by using the [`Into`] trait.\n- [`#[props(extends = GlobalAttributes)]`](#extending-elements) - Extends the props with all the attributes from an element or the global element attributes.\n\nProps also act slightly differently when used with:\n\n- [`Option<T>`](#optional-props) - The field is automatically optional with a default value of `None`.\n- [`ReadSignal<T>`](#reactive-props) - The props macro will automatically convert `T` into `ReadSignal<T>` when it is passed as a prop.\n- [`String`](#formatted-props) - The props macro will accept formatted strings for any prop field with the type `String`.\n- [`children`](#children-props) - The props macro will accept child elements if you include the `children` prop.\n\n### Default Props\n\nThe `default` attribute lets you define a default value for a field if it isn't set when creating the component\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // The default attributes makes your field optional in the component and uses the default value if it is not set.\n    #[props(default)]\n    text: String,\n    // You can also set an explicit default value instead of using the `Default` implementation.\n    #[props(default = \"red\".to_string())]\n    color: String,\n) -> Element {\n    rsx! {\n        button {\n            color: color,\n            \"{text}\"\n        }\n    }\n}\n\nrsx! {\n    // You can skip setting props that have a default value when you use the component.\n    Button {}\n};\n```\n\n### Optional Props\n\nWhen defining a component, you may want to make a prop optional without defining an explicit default value. Any fields with the type `Option<T>` are automatically optional with a default value of `None`.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // Since the `text` field is optional, you don't need to set it when you use the component.\n    text: Option<String>,\n) -> Element {\n    rsx! {\n        button { {text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {}\n};\n```\n\nIf you want to make your `Option<T>` field required, you can use the `!optional` attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // You can use the `!optional` attribute on a field with the type `Option<T>` to make it required.\n    #[props(!optional)]\n    text: Option<String>,\n) -> Element {\n    rsx! {\n        button { {text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {\n        text: None\n    }\n};\n```\n\n### Converting Props\n\nYou can automatically convert a field into the correct type by using the `into` attribute. Any type you pass into the field will be converted with the [`Into`] trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    // You can use the `into` attribute on a field to convert types you pass in with the Into trait.\n    #[props(into)]\n    number: u64,\n) -> Element {\n    rsx! {\n        button { \"{number}\" }\n    }\n}\n\nrsx! {\n    Button {\n        // Because we used the into attribute, we can pass in any type that implements Into<u64>\n        number: 10u8\n    }\n};\n```\n\n### Formatted Props\n\nYou can use formatted strings in attributes just like you would in an element. Any prop field with the type `String` can accept a formatted string:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(text: String,) -> Element {\n    rsx! {\n        button { \"{text}\" }\n    }\n}\n\nlet name = \"Bob\";\nrsx! {\n    Button {\n        // You can use formatted strings in props that accept String just like you would in an element.\n        text: \"Hello {name}!\"\n    }\n};\n```\n\n### Children Props\n\nRather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The \"magic\" children prop lets you achieve this:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Clickable(\n    href: String,\n    children: Element,\n) -> Element {\n    rsx! {\n        a {\n            href: \"{href}\",\n            class: \"fancy-button\",\n            {children}\n        }\n    }\n}\n```\n\nThis makes providing children to the component much simpler: simply put the RSX inside the {} brackets:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[component]\n# fn Clickable(\n#     href: String,\n#     children: Element,\n# ) -> Element {\n#     rsx! {\n#         a {\n#             href: \"{href}\",\n#             class: \"fancy-button\",\n#             {children}\n#         }\n#     }\n# }\nrsx! {\n    Clickable {\n        href: \"https://www.youtube.com/watch?v=C-M2hs3sXGo\",\n        \"How to \"\n        i { \"not\" }\n        \" be seen\"\n    }\n};\n```\n\n### Reactive Props\n\nIn dioxus, when a prop changes, the component will rerun with the new value to update the UI. For example, if count changes from 0 to 1, this component will rerun and update the UI to show \"Count: 1\":\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    rsx! {\n        div {\n            \"Count: {count}\"\n        }\n    }\n}\n```\n\nGenerally, just rerunning the component is enough to update the UI. However, if you use your prop inside reactive hooks like `use_memo` or `use_resource`, you may also want to restart those hooks when the prop changes:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can use a memo to calculate the doubled count. Since this memo will only be created the first time the component is run and `count` is not reactive, it will never update when `count` changes.\n    let doubled_count = use_memo(move || count * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\nTo fix this issue you can either:\n\n1. Make the prop reactive by wrapping it in `ReadSignal` (recommended):\n\n`ReadSignal` is a `Copy` reactive value. Dioxus will automatically convert any value into a `ReadSignal` when it is passed as a prop.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: ReadSignal<i32>) -> Element {\n    // Since we made count reactive, the memo will automatically rerun when count changes.\n    let doubled_count = use_memo(move || count() * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n2. Explicitly add the prop as a dependency to the reactive hook with [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/macro.use_reactive.html):\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can add the count prop as an explicit dependency to every reactive hook that uses it with use_reactive.\n    // The use_reactive macro takes a closure with explicit dependencies as its argument.\n    let doubled_count = use_memo(use_reactive!(|count| count * 2));\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n### Extending Elements\n\nThe `extends` attribute lets you extend your props with all the attributes from an element or the global element attributes.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Card(\n    // You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.\n    #[props(extends = GlobalAttributes)]\n    attributes: Vec<Attribute>,\n) -> Element {\n    rsx! {\n        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.\n        div { ..attributes, \"card\" }\n    }\n}\n\nrsx! {\n    // Since we extend global attributes, you can use any attribute that would normally appear on elements.\n    Card {\n        width: \"10px\",\n        height: \"10px\",\n        color: \"red\",\n    }\n};\n```\n\nTo extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Button(\n    #[props(extends = GlobalAttributes, extends = button)]\n    attributes: Vec<Attribute>,\n) -> Element {\n    rsx! {\n        button { ..attributes, \"button\" }\n    }\n}\n\nrsx! {\n    Button {\n        // A global attribute\n        width: \"10px\",\n        // A button specific attribute\n        disabled: true,\n    }\n};\n```\n\nNote that extending from multiple elements will only work if the elements don't have conflicting attributes.\n\n<!-- File: packages/core-macro/docs/props.md (Tokens: ~2581 | Category: anthropic-skill) -->\n# Props\n\nThe props derive macro allows you to define what props your component accepts and how to accept those props. Every component must either accept no arguments or accept a single argument that implements the `Properties` trait.\n\n> Note: You should generally prefer using the `#[component]` macro instead of the `#[derive(Props)]` macro with explicit props. The `#[component]` macro will automatically generate the props struct for you and perform extra checks to ensure that your component is valid.\n\n## Example\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// The text of the button\n    text: String,\n\n    /// The color of the button\n    color: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button {\n            color: props.color,\n            \"{props.text}\"\n        }\n    }\n}\n\nrsx! {\n    // Any fields you defined on the props struct will be turned into props for the component.\n    Button {\n        text: \"Click me!\",\n        color: \"red\",\n    }\n};\n```\n\n## Prop Modifiers\n\nYou can use the `#[props()]` attribute to modify the behavior of the props derive macro:\n\n- [`#[props(default)]`](#default-props) - Makes the field optional in the component and uses the default value if it is not set when creating the component.\n- [`#[props(!optional)]`](#optional-props) - Makes a field with the type `Option<T>` required.\n- [`#[props(into)]`](#converting-props) - Converts a field into the correct type by using the [`Into`] trait.\n- [`#[props(extends = GlobalAttributes)]`](#extending-elements) - Extends the props with all the attributes from an element or the global element attributes.\n\nProps also act slightly differently when used with:\n\n- [`Option<T>`](#optional-props) - The field is automatically optional with a default value of `None`.\n- [`ReadSignal<T>`](#reactive-props) - The props macro will automatically convert `T` into `ReadSignal<T>` when it is passed as a prop.\n- [`String`](#formatted-props) - The props macro will accept formatted strings for any prop field with the type `String`.\n- [`children`](#children-props) - The props macro will accept child elements if you include the `children` prop.\n\n### Default Props\n\nThe `default` attribute lets you define a default value for a field if it isn't set when creating the component\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    // The default attributes makes your field optional in the component and uses the default value if it is not set.\n    #[props(default)]\n    text: String,\n\n    /// You can also set an explicit default value instead of using the `Default` implementation.\n    #[props(default = \"red\".to_string())]\n    color: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button {\n            color: props.color,\n            \"{props.text}\"\n        }\n    }\n}\n\nrsx! {\n    // You can skip setting props that have a default value when you use the component.\n    Button {}\n};\n```\n\n### Optional Props\n\nWhen defining props, you may want to make a prop optional without defining an explicit default value. Any fields with the type `Option<T>` are automatically optional with a default value of `None`.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    // Since the `text` field is optional, you don't need to set it when you use the component.\n    text: Option<String>,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { {props.text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {}\n};\n```\n\nIf you want to make your `Option<T>` field required, you can use the `!optional` attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// You can use the `!optional` attribute on a field with the type `Option<T>` to make it required.\n    #[props(!optional)]\n    text: Option<String>,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { {props.text.unwrap_or(\"button\".to_string())} }\n    }\n}\n\nrsx! {\n    Button {\n        text: None\n    }\n};\n```\n\n### Converting Props\n\nYou can automatically convert a field into the correct type by using the `into` attribute. Any type you pass into the field will be converted with the [`Into`] trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    /// You can use the `into` attribute on a field to convert types you pass in with the Into trait.\n    #[props(into)]\n    number: u64,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { \"{props.number}\" }\n    }\n}\n\nrsx! {\n    Button {\n        // Because we used the into attribute, we can pass in any type that implements Into<u64>\n        number: 10u8\n    }\n};\n```\n\n### Formatted Props\n\nYou can use formatted strings in attributes just like you would in an element. Any prop field with the type `String` can accept a formatted string:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    text: String,\n}\n\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { \"{props.text}\" }\n    }\n}\n\nlet name = \"Bob\";\nrsx! {\n    Button {\n        // You can use formatted strings in props that accept String just like you would in an element.\n        text: \"Hello {name}!\"\n    }\n};\n```\n\n### Children Props\n\nRather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The \"magic\" children prop lets you achieve this:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(PartialEq, Clone, Props)]\nstruct ClickableProps {\n    href: String,\n    children: Element,\n}\n\nfn Clickable(props: ClickableProps) -> Element {\n    rsx! {\n        a {\n            href: \"{props.href}\",\n            class: \"fancy-button\",\n            {props.children}\n        }\n    }\n}\n```\n\nThis makes providing children to the component much simpler: simply put the RSX inside the {} brackets:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[derive(PartialEq, Clone, Props)]\n# struct ClickableProps {\n#     href: String,\n#     children: Element,\n# }\n#\n# fn Clickable(props: ClickableProps) -> Element {\n#     rsx! {\n#         a {\n#             href: \"{props.href}\",\n#             class: \"fancy-button\",\n#             {props.children}\n#         }\n#     }\n# }\nrsx! {\n    Clickable {\n        href: \"https://www.youtube.com/watch?v=C-M2hs3sXGo\",\n        \"How to \"\n        i { \"not\" }\n        \" be seen\"\n    }\n};\n```\n\n### Reactive Props\n\nIn dioxus, when a prop changes, the component will rerun with the new value to update the UI. For example, if count changes from 0 to 1, this component will rerun and update the UI to show \"Count: 1\":\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    rsx! {\n        div {\n            \"Count: {count}\"\n        }\n    }\n}\n```\n\nGenerally, just rerunning the component is enough to update the UI. However, if you use your prop inside reactive hooks like `use_memo` or `use_resource`, you may also want to restart those hooks when the prop changes:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can use a memo to calculate the doubled count. Since this memo will only be created the first time the component is run and `count` is not reactive, it will never update when `count` changes.\n    let doubled_count = use_memo(move || count * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\nTo fix this issue you can either:\n\n1. Make the prop reactive by wrapping it in `ReadSignal` (recommended):\n\n`ReadSignal` is a `Copy` reactive value. Dioxus will automatically convert any value into a `ReadSignal` when it is passed as a prop.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: ReadSignal<i32>) -> Element {\n    // Since we made count reactive, the memo will automatically rerun when count changes.\n    let doubled_count = use_memo(move || count() * 2);\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n2. Explicitly add the prop as a dependency to the reactive hook with [`use_reactive`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/macro.use_reactive.html):\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn Counter(count: i32) -> Element {\n    // We can add the count prop as an explicit dependency to every reactive hook that uses it with use_reactive.\n    // The use_reactive macro takes a closure with explicit dependencies as its argument.\n    let doubled_count = use_memo(use_reactive!(|count| count * 2));\n    rsx! {\n        div {\n            \"Count: {count}\"\n            \"Doubled Count: {doubled_count}\"\n        }\n    }\n}\n```\n\n### Extending Elements\n\nThe `extends` attribute lets you extend your props with all the attributes from an element or the global element attributes.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[derive(Props, PartialEq, Clone)]\nstruct CardProps {\n    /// You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.\n    #[props(extends = GlobalAttributes)]\n    attributes: Vec<Attribute>,\n}\n\n#[component]\nfn Card(props: CardProps) -> Element {\n    rsx! {\n        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.\n        div { ..props.attributes, \"card\" }\n    }\n}\n\nrsx! {\n    // Since we extend global attributes, you can use any attribute that would normally appear on elements.\n    Card {\n        width: \"10px\",\n        height: \"10px\",\n        color: \"red\",\n    }\n};\n```\n\nTo extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\n#[derive(Props, PartialEq, Clone)]\nstruct ButtonProps {\n    #[props(extends = GlobalAttributes, extends = button)]\n    attributes: Vec<Attribute>,\n}\n\n#[component]\nfn Button(props: ButtonProps) -> Element {\n    rsx! {\n        button { ..props.attributes, \"button\" }\n    }\n}\n\nrsx! {\n    Button {\n        // A global attribute\n        width: \"10px\",\n        // A button specific attribute\n        disabled: true,\n    }\n};\n```\n\nNote that extending from multiple elements will only work if the elements don't have conflicting attributes.\n\n<!-- File: packages/core-macro/docs/rsx.md (Tokens: ~987 | Category: anthropic-skill) -->\nThe rsx! macro makes it easy for developers to write jsx-style markup in their components.\n\n## Elements\n\nYou can render elements with rsx! with the element name and then braces surrounding the attributes and children.\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div {\n        div {}\n    }\n};\n```\n\n<details>\n<summary>Web Components</summary>\n\nDioxus will automatically render any elements with `-` as a untyped web component:\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div-component {\n        div {}\n    }\n};\n```\n\nYou can wrap your web component in a custom component to add type checking:\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn MyDivComponent(width: i64) -> Element {\n    rsx! {\n        div-component {\n            \"width\": width\n        }\n    }\n}\n```\n\n</details>\n\n## Attributes\n\nYou can add attributes to any element inside the braces. Attributes are key-value pairs separated by a colon.\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet width = 100;\nrsx! {\n    div {\n        // Set the class attribute to \"my-class\"\n        class: \"my-class\",\n        // attribute strings are automatically formatted with the format macro\n        width: \"{width}px\",\n    }\n};\n```\n\n### Optional Attributes\n\nYou can include optional attributes with an unterminated if statement as the value of the attribute:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# let first_boolean = true;\n# let second_boolean = false;\nrsx! {\n    div {\n        // Set the class attribute to \"my-class\" if true\n        class: if first_boolean {\n            \"my-class\"\n        },\n        // Set the class attribute to \"my-other-class\" if false\n        class: if second_boolean {\n            \"my-other-class\"\n        }\n    }\n};\n```\n\n### Raw Attributes\n\nDioxus defaults to attributes that are type checked as html. If you want to include an attribute that is not included in the html spec, you can use the `raw` attribute surrounded by quotes:\n\n```rust, no_run\n# use dioxus::prelude::*;\nrsx! {\n    div {\n        // Set the data-count attribute to \"1\"\n        \"data-count\": \"1\"\n    }\n};\n```\n\n## Text\n\nYou can include text in your markup as a string literal:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet name = \"World\";\nrsx! {\n    div {\n        \"Hello World\"\n        // Just like attributes, you can included formatted segments inside your text\n        \"Hello {name}\"\n    }\n};\n```\n\n## Components\n\nYou can render any [`macro@crate::component`]s you created inside your markup just like elements. Components must either start with a capital letter or contain a `_` character.\n\n```rust, no_run\n# use dioxus::prelude::*;\n#[component]\nfn HelloWorld() -> Element {\n    rsx! { \"hello world!\" }\n}\n\nrsx! {\n    div {\n        HelloWorld {}\n    }\n};\n```\n\n## If statements\n\nYou can use if statements to conditionally render children. The body of the for if statement is parsed as rsx markup:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet first_boolean = true;\nlet second_boolean = false;\nrsx! {\n    if first_boolean {\n        div {\n            \"first\"\n        }\n    }\n\n    if second_boolean {\n        \"second\"\n    }\n};\n```\n\n## For loops\n\nYou can also use for loops to iterate over a collection of items. The body of the for loop is parsed as rsx markup:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet numbers = vec![1, 2, 3];\nrsx! {\n    for number in numbers {\n        div {\n            \"{number}\"\n        }\n    }\n};\n```\n\n## Raw Expressions\n\nYou can include raw expressions inside your markup inside curly braces. Your expression must implement the [`IntoDynNode`](https://docs.rs/dioxus-core/latest/dioxus_core/trait.IntoDynNode.html) trait:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet name = \"World\";\nrsx! {\n    div {\n        // Text can be converted into a dynamic node in rsx\n        {name}\n    }\n    // Iterators can also be converted into dynamic nodes\n    {(0..10).map(|n| n * n).map(|number| rsx! { div { \"{number}\" } })}\n};\n```\n\n<!-- File: packages/core/docs/common_spawn_errors.md (Tokens: ~883 | Category: anthropic-skill) -->\n## Compiler errors you may run into while using spawn\n\n<details>\n<summary>async block may outlive the current function, but it borrows `value`, which is owned by the current function</summary>\n\nTasks in Dioxus need only access data that can last for the entire lifetime of the application. That generally means data that is moved into the async block. **If you get this error, you may have forgotten to add `move` to your async block.**\n\nBroken component:\n\n```rust, compile_fail\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    let signal = use_signal(|| 0);\n\n    use_hook(move || {\n        // ❌ The task may run at any point and reads the value of the signal, but the signal is dropped at the end of the function\n        spawn(async {\n            println!(\"{}\", signal());\n        })\n    });\n\n    todo!()\n}\n```\n\nFixed component:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    let signal = use_signal(|| 0);\n\n    use_hook(move || {\n        // ✅ The `move` keyword tells rust it can move the `state` signal into the async block. Since the async block owns the signal state, it can read it even after the function returns\n        spawn(async move {\n            println!(\"{}\", signal());\n        })\n    });\n\n    todo!()\n}\n```\n\n</details>\n\n<details>\n<summary>use of moved value: `value`. move occurs because `value` has type `YourType`, which does not implement the `Copy` trait</summary>\n\nData in rust has a single owner. If you run into this error, you have likely tried to move data that isn't `Copy` into two different async tasks. **You can fix this issue by making your data `Copy` or calling `clone` on it before you move it into the async block.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which cannot be copied implicitly\n#[component]\nfn MyComponent(string: String) -> Element {\n    use_hook(move || {\n        // ❌ We are moving the string into the async task which means we can't access it elsewhere\n        spawn(async move {\n            println!(\"{}\", string);\n        });\n        // ❌ Since we already moved the string, we can't move it into our new task. This will cause a compiler error\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\nYou can fix this issue by either:\n\n- Making your data `Copy` with `ReadSignal`:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts `ReadSignal<String>` which implements `Copy`\n#[component]\nfn MyComponent(string: ReadSignal<String>) -> Element {\n    use_hook(move || {\n        // ✅ Because the `string` signal is `Copy`, we can copy it into the async task while still having access to it elsewhere\n        spawn(async move {\n            println!(\"{}\", string);\n        });\n        // ✅ Since `string` is `Copy`, we can copy it into another async task\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\n- Calling `clone` on your data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which doesn't implement `Copy`\n#[component]\nfn MyComponent(string: String) -> Element {\n    use_hook(move || {\n        // ✅ The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n        spawn({\n            // Clone the string in a new block\n            let string = string.clone();\n            // Then move the cloned string into the async block\n            async move {\n                println!(\"{}\", string);\n            }\n        });\n        // ✅ We don't use the string after this closure, so we can just move it into the closure directly\n        spawn(async move {\n            println!(\"{}\", string);\n        })\n    });\n\n    todo!()\n}\n```\n\n</details>\n\n<!-- File: packages/core/docs/reactivity.md (Tokens: ~1004 | Category: anthropic-skill) -->\n# Reactivity\n\nThe core of dioxus relies on the concept of reactivity. Reactivity is the system that updates your app when state changes.\n\nThere are two parts to reactivity: **Reactive Contexts** and **Tracked Values**.\n\n## Reactive Contexts\n\nReactive Contexts keep track of what state different parts of your app rely on. Reactive Context show up throughout dioxus: Component, use_effect, use_memo and use_resource all have their own reactive contexts:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet count = use_signal(|| 0);\n// The reactive context in the memo knows that the memo depends on the count signal\nuse_memo(move || count() * 2);\n```\n\n## Tracked Values\n\nTracked values are values that reactive contexts know about. When you read a tracked value, the reactive context will rerun when the value changes. Signals, Memos, and Resources are all tracked values:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// The count signal is tracked\nlet count = use_signal(|| 0);\n// When you read the count signal, the reactive context subscribes to the count signal\nlet double_count = use_memo(move || count() * 2);\n```\n\n## Reactivity\n\nReactivity is the system that combines reactive context and tracked values to update your app when state changes.\n\nYou can use reactivity to create derived state and update your app when state changes.\n\nYou can derive state from other state with [`use_memo`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_memo.html).\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet mut count = use_signal(|| 0);\nlet double_count = use_memo(move || count() * 2);\n\n// Now whenever we read double_count, we know it is always twice the value of count\nprintln!(\"{}\", double_count); // Prints \"2\"\n\n// After we write to count, the reactive context will rerun and double_count will be updated automatically\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"4\"\n```\n\nYou can also use reactivity to create derive state asynchronously. For example, you can use [`use_resource`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_resource.html) to load data from a server:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet count = use_signal(|| 0);\nlet double_count = use_resource(move || async move {\n    // Start a request to the server. We are reading the value of count to format it into the url\n    // Since we are reading count, this resource will \"subscribe\" to changes to count (when count changes, the resource will rerun)\n    let response = reqwest::get(format!(\"https://myserver.com/doubleme?count={count}\")).await.unwrap();\n    response.text().await.unwrap()\n});\n```\n\n## Non Reactive State\n\nYou can use plain Rust types in Dioxus, but you should be aware that they are not reactive. If you read the non-reactive state, reactive scopes will not subscribe to the state.\n\nYou can make non-reactive state reactive by using the `Signal` type instead of a plain Rust type or by using the `use_reactive` hook.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\n// ❌ Don't create non-reactive state\nlet state = use_hook(|| std::cell::RefCell::new(0));\n\n// Computed values will get out of date if the state they depend on is not reactive\nlet doubled = use_memo(move || *state.borrow() * 2);\n\n// ✅ Create reactive state\nlet state = use_signal(|| 0);\n\n// Computed values will automatically keep up to date with the latest reactive state\nlet doubled = use_memo(move || state() * 2);\n\n// ❌ Don't depend on non-reactive prop state in memos/resources\n#[component]\nfn MyComponent(state: i32) -> Element {\n    let doubled = use_memo(move || state * 2);\n    todo!()\n}\n\n// ✅ Wrap your props in ReadSignal to make them reactive\n#[component]\nfn MyReactiveComponent(state: ReadSignal<i32>) -> Element {\n    let doubled = use_memo(move || state() * 2);\n    todo!()\n}\n```\n\nIf your state can't be reactive, you can use the `use_reactive` hook to make it reactive.\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nlet state = rand::random::<i32>();\n\n// You can make the state reactive by wrapping it in use_reactive\nlet doubled = use_memo(use_reactive!(|state| state * 2));\n```\n\n<!-- File: packages/document/docs/eval.md (Tokens: ~1008 | Category: anthropic-skill) -->\n# Communicating with JavaScript\n\nYou can use the `eval` function to execute JavaScript code in your application with the desktop, mobile, web or liveview renderers. Eval takes a block of JavaScript code (that may be asynchronous) and returns a `Eval` object that you can use to send data to the JavaScript code and receive data from it.\n\n<div class=\"warning\">\n\n## Safety\n\nPlease be careful when executing JavaScript code with `eval`. You should only execute code that you trust. **This applies especially to web targets, where the JavaScript context has access to most, if not all of your application data.** Running untrusted code can lead to a [cross-site scripting](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) (XSS) vulnerability.\n\n</div>\n\n```rust\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| async move {\n                // Eval is a global function you can use anywhere inside Dioxus. It will execute the given JavaScript code.\n                let result = document::eval(r#\"console.log(\"Hello World\");\n                return \"Hello World\";\"#);\n\n                // You can use the `await` keyword to wait for the result of the JavaScript code.\n                println!(\"{:?}\", result.await);\n            },\n            \"Log Hello World\"\n        }\n    }\n}\n```\n\n## Sending data to JavaScript\n\nWhen you execute JavaScript code with `eval`, you can pass data to it by formatting the value into the JavaScript code or sending values to the `Eval` channel.\n\n```rust\nuse dioxus::prelude::*;\n\nfn app() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| {\n                // You can pass initial data to the eval function by formatting it into the JavaScript code.\n                const LOOP_COUNT: usize = 10;\n                let eval = document::eval(&format!(r#\"for(let i = 0; i < {LOOP_COUNT}; i++) {{\n                    // You can receive values asynchronously with the `await dioxus.recv()` method.\n                    let value = await dioxus.recv();\n                    console.log(\"Received\", value);\n                }}\"#));\n\n                // You can send values from rust to the JavaScript code with the `send` method on the object returned by `eval`.\n                for i in 0..LOOP_COUNT {\n                    eval.send(i).unwrap();\n                }\n            },\n            \"Log Count\"\n        }\n    }\n}\n```\n\n## Sending data from JavaScript\n\nThe `Eval` struct also contains methods for receiving values you send from JavaScript. You can use the `dioxus.send()` method to send values to the JavaScript code and the `Eval::recv()` method to receive values from the JavaScript code.\n\n```rust\nuse dioxus::prelude::*;\n\nfn app() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| async move {\n                // You can send values from rust to the JavaScript code by using the `send` method on the object returned by `eval`.\n                let mut eval = document::eval(r#\"for(let i = 0; i < 10; i++) {\n                    // You can send values asynchronously with the `dioxus.send()` method.\n                    dioxus.send(i);\n                }\"#);\n\n                // You can receive values from the JavaScript code with the `recv` method on the object returned by `eval`.\n                for _ in 0..10 {\n                    let value: i32 = eval.recv().await.unwrap();\n                    println!(\"Received {}\", value);\n                }\n            },\n            \"Log Count\"\n        }\n    }\n}\n```\n\n## Interacting with the DOM with Eval\n\nYou can also use the `eval` function to execute JavaScript code that reads or modifies the DOM. If you want to interact with the mounted DOM, you need to use `eval` inside the [`use_effect`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html) hook which runs after the component has been mounted.\n\n```rust\nuse dioxus::prelude::*;\n\nconst SCRIPT: &str = r#\"\n    let element = document.getElementById(\"my-element\");\n    element.innerHTML = \"Hello World\";\n    return element.getAttribute(\"data-count\");\n\"#;\n\nfn app() -> Element {\n    // ❌ You shouldn't run eval in the body of a component. This will run before the component has been mounted\n    // document::eval(SCRIPT);\n\n    // ✅ You should run eval inside an effect or event. This will run after the component has been mounted\n    use_effect(move || {\n        spawn(async {\n            let count = document::eval(SCRIPT).await;\n            println!(\"Count is {:?}\", count);\n        });\n    });\n\n\n    rsx! {\n        div {\n            id: \"my-element\",\n            \"data-count\": \"123\",\n        }\n    }\n}\n```\n\n<!-- File: packages/document/docs/head.md (Tokens: ~735 | Category: anthropic-skill) -->\n# Modifying the Head\n\nDioxus includes a series of components that render into the head of the page:\n\n- [Title]\n- [Meta]\n- [document::Link](crate::Link)\n- [Script]\n- [Style]\n\nEach of these components can be used to add extra information to the head of the page. For example, you can use the `Title` component to set the title of the page, or the `Meta` component to add extra metadata to the page.\n\n## Limitations\n\nComponents that render into the head of the page do have a few key limitations:\n\n- With the exception of the `Title` component, all components that render into the head cannot be modified after the first time they are rendered.\n- Components that render into the head will not be removed even after the component is removed from the tree.\n- Components that render into the head do not have a guaranteed ordering; thus, components should ideally not be order dependent, since they may not appear in the head in the order they are defined.\n\n## Example\n\n```rust, no_run\n# use dioxus::prelude::*;\nfn RedirectToDioxusHomepageWithoutJS() -> Element {\n    rsx! {\n        // You can use the meta component to render a meta tag into the head of the page\n        // This meta tag will redirect the user to the dioxuslabs homepage in 10 seconds\n        document::Meta {\n            http_equiv: \"refresh\",\n            content: \"10;url=https://dioxuslabs.com\",\n        }\n    }\n}\n```\n\n## Overcoming Ordering Issues\n\nSince Dioxus does not guarantee head element ordering, one can use es6 imports as a more predictable way to handle dependencies.\n\n```rust, ignore\n# use dioxus::prelude::*;\nstatic HIGHLIGHT: Asset = asset!(\"/assets/highlight/es/highlight.min.js\");\nstatic RUST: Asset = asset!(\"/assets/highlight/es/languages/rust.min.js\");\nstatic STYLE: Asset = asset!(\"/assets/highlight/styles/atom-one-dark.css\");\n\nfn App() -> Element {\n    rsx! {\n        document::Link { rel: \"stylesheet\", href: STYLE }\n        document::Script {\n            type: \"module\",\n            r#\"import hljs from \"{HIGHLIGHT}\";\n            import rust from \"{RUST}\";\n            hljs.registerLanguage('rust', rust);\n            hljs.highlightAll();\"#\n        }\n        pre {\n            code {\n                class: \"language-rust\",\n                \"fn main() {{\\nprintln!(\\\"Hello, world!\\\");\\n}}\"\n            }\n        }\n    }\n}\n```\n\n## Fullstack Rendering\n\nHead components are compatible with fullstack rendering, but only head components that are rendered in the initial render (before suspense boundaries resolve) will be rendered into the head.\n\nIf you have any important metadata that you want to render into the head, make sure to render it outside of any pending suspense boundaries.\n\n```rust, no_run\n# use dioxus::prelude::*;\n# #[component]\n# fn LoadData(children: Element) -> Element { unimplemented!() }\nfn App() -> Element {\n    rsx! {\n        // This will render in SSR\n        document::Title { \"My Page\" }\n        SuspenseBoundary {\n            fallback: |_| rsx! { \"Loading...\" },\n            LoadData {\n                // This will only be rendered on the client after hydration so it may not be visible to search engines\n                document::Meta { name: \"description\", content: \"My Page\" }\n            }\n        }\n    }\n}\n```\n\n<!-- File: packages/hooks/docs/derived_state.md (Tokens: ~725 | Category: anthropic-skill) -->\nCreates a new Memo. The memo will be run immediately and whenever any signal it reads is written to. Memos can be used to efficiently compute derived data from signals.\n\n```rust\nuse dioxus::prelude::*;\nuse dioxus_signals::*;\n\nfn App() -> Element {\n    let mut count = use_signal(|| 0);\n    // the double memo will always be equal to two times the value of count, even after count changes\n    let double = use_memo(move || count * 2);\n\n    rsx! {\n        \"{double}\"\n        button {\n            // When count changes, the memo will rerun and double will be updated\n            // memos rerun any time you write to a signal they read. They will only rerun values/component that depend on them if the value of the memo changes\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThe closure you pass into memos will be called whenever the state you read inside the memo is written to even if the value hasn't actually changed, but the memo you get will not rerun other parts of your app unless the output changes (`PartialEq` returns false).\n\nLets dig into some examples to see how this works:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut count = use_signal(|| 1);\n// double_count will rerun when state we read inside the memo changes (count)\nlet double_count = use_memo(move || count() * 2);\n\n// memos act a lot like a read only version of a signal. You can read them, display them, and move them around like any other signal\nprintln!(\"{}\", double_count); // Prints \"2\"\n\n// But you can't write to them directly\n// Instead, any time you write to a value the memo reads, the memo will rerun\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"4\"\n\n// Lets create another memo that reads the value of double_count\nlet double_count_plus_one = use_memo(move || double_count() + 1);\n\nprintln!(\"{}\", double_count_plus_one); // Prints \"5\"\n\n// Now if we write to count the double_count memo will rerun\n// If that the output of double_count changes, then it will cause double_count_plus_one to rerun\ncount += 1;\n\nprintln!(\"{}\", double_count); // Prints \"6\"\nprintln!(\"{}\", double_count_plus_one); // Prints \"7\"\n\n// However if the value of double_count doesn't change after a write, then it won't trigger double_count_plus_one to rerun\n// Since we just write the same value, the doubled value is still 6 and we don't rerun double_count_plus_one\n*count.write() = 3;\n\nprintln!(\"{}\", double_count); // Prints \"6\"\nprintln!(\"{}\", double_count_plus_one); // Prints \"7\"\n```\n\n## With non-reactive dependencies\n\nTo add non-reactive dependencies, you can use the [`crate::use_reactive()`] hook.\n\nSignals will automatically be added as dependencies, so you don't need to call this method for them.\n\n```rust\n# use dioxus::prelude::*;\n#[component]\nfn Comp(count: u32) -> Element {\n// Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.\nlet new_count = use_memo(use_reactive((&count,), |(count,)| count + 1));\n    todo!()\n}\n```\n\n<!-- File: packages/hooks/docs/moving_state_around.md (Tokens: ~729 | Category: anthropic-skill) -->\n<details>\n<summary>How should I move around state? (Click here to learn more about moving around and sharing state in Dioxus)</summary>\n\nYou will often need to move state around between your components. Dioxus provides three different ways to pass around state:\n\n1. Just pass your values as [props](https://dioxuslabs.com/learn/0.7/essentials/ui/components#component-properties):\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let count = use_signal(|| 0);\n\n    rsx! {\n        IncrementButton {\n            count\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut count: Signal<i32>) -> Element {\n    rsx! {\n        button {\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThis is the most common way to pass state around. It is the most explicit and local to your component. Use this when it isn't overly annoying to pass around a value.\n\n2. Use [use_context](https://dioxuslabs.com/learn/0.7/essentials/basics/context) to pass state from a parent component to all children:\n\n```rust\n# use dioxus::prelude::*;\n#[derive(Clone, Copy)]\nstruct MyState {\n    count: Signal<i32>\n}\n\nfn ParentComponent() -> Element {\n    // Use context provider provides an unique type to all children of this component\n    use_context_provider(|| MyState { count: Signal::new(0) });\n\n    rsx! {\n        // IncrementButton will have access to the count without explicitly passing it through props\n        IncrementButton {}\n    }\n}\n\n#[component]\nfn IncrementButton() -> Element {\n    // Use context gets the value from a parent component\n    let mut count = use_context::<MyState>().count;\n\n    rsx! {\n        button {\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nThis is slightly less explicit than passing it as a prop, but it is still local to the component. This is really great if you want state that is global to part of your app. It lets you create multiple global-ish states while still making state different when you reuse components. If I create a new `ParentComponent`, it will have a new `MyState`.\n\n3. Globals let you share state with your whole app with rust statics:\n\n```rust\n# use dioxus::prelude::*;\n// Count will be created the first time you access it with the closure you pass to Signal::global\nstatic COUNT: GlobalSignal<i32> = Signal::global(|| 0);\n\nfn ParentComponent() -> Element {\n    rsx! {\n        IncrementButton {}\n    }\n}\n\nfn IncrementButton() -> Element {\n    rsx! {\n        button {\n            // You don't need to pass anything around or get anything out of the context because COUNT is global\n            onclick: move |_| *COUNT.write() += 1,\n            \"Increment\"\n        }\n    }\n}\n```\n\nGlobal state can be very ergonomic if your state is truly global, but you shouldn't use it if you need state to be different for different instances of your component. If I create another `IncrementButton` it will use the same `COUNT`. Libraries should generally avoid this to make components more reusable.\n\n> Note: Even though it is in a static, `COUNT` will be different for each app instance (this is generally only reliant on the server).\n\n</details>\n\n<!-- File: packages/hooks/docs/rules_of_hooks.md (Tokens: ~1090 | Category: anthropic-skill) -->\n## Additional Information that may be useful\n\n<details>\n<summary>This function is a hook which means you need to <b>follow the rules of hooks</b> when you call it. You can click here to learn more about the rules of hooks.</summary>\n\nHooks in dioxus need to run in the same order every time you run the component. To make sure you run hooks in a consistent order, you should follow the rules of hooks:\n\n1. Hooks should only be called from the root of a component or another hook\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    // ✅ You can call hooks from the body of a component\n    let number = use_signal(|| 1);\n    if number() == 1 {\n        // ❌ You can run into issues if you can hooks inside other expressions inside your component\n        // If number changes from 0 to 1, the order of the hooks will be different and your app may panic\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    todo!()\n}\n\nfn use_my_hook() -> Signal<i32> {\n    // ✅ You can call hooks from the body of other hooks\n    let number = use_signal(|| 1);\n    // ❌ Again, creating hooks inside expressions inside other hooks can cause issues\n    if number() == 1 {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    number\n}\n```\n\n2. Hooks should always start with `use_` to make it clear that you need to call them in a consistent order\n\nBecause hooks should only be called from the root of a component or another hook, you shouldn't call hooks inside of:\n\n- ❌ Conditionals\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1);\n    // ❌ Changing the condition will change the order of the hooks\n    if number() == 1 {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    // ❌ Changing the value you are matching will change the order of the hooks\n    match number() {\n        1 => {\n            let string = use_signal(|| \"hello world\".to_string());\n        },\n        _ => (),\n    }\n\n    todo!()\n}\n```\n\n- ❌ Loops\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1);\n    // ❌ Changing the loop will change the order of the hooks\n    for i in 0..number() {\n        let string = use_signal(|| \"hello world\".to_string());\n    }\n\n    todo!()\n}\n```\n\n- ❌ Event Handlers\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    rsx! {\n        button {\n            onclick: move |_| {\n                // ❌ Calling the event handler will change the order of the hooks\n                use_signal(|| \"hello world\".to_string());\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n- ❌ Initialization closures in other hooks\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| {\n        // ❌ This closure will only be called when the component is first created. Running the component will change the order of the hooks\n        let string = use_signal(|| \"hello world\".to_string());\n        string()\n    });\n\n    todo!()\n}\n```\n\n<details>\n<summary>Why do hooks need to run in a consistent order?</summary>\n\nHooks need to be run in a consistent order because dioxus stores hooks in a list and uses the order you run hooks in to determine what part of the state belongs to which hook.\n\nLets look at an example component:\n\n```rust\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let number = use_signal(|| 1); // Hook 1\n    let string = use_signal(|| \"hello world\".to_string()); // Hook 2\n    let doubled = use_memo(move || number() * 2); // Hook 3\n\n    todo!()\n}\n```\n\nWhen we first create the component, we run the hooks in the order they are defined and store the state in the component in a list.\n\n```rust, ignore\n[\n    Box::new(1),\n    Box::new(\"hello world\".to_string()),\n    Box::new(2),\n]\n```\n\nNext time we run the component, we return items from the state list instead of creating state again.\n\n```rust, ignore\n[\n    Box::new(1), // Hook 1 returns 1\n    Box::new(\"hello world\".to_string()), // Hook 2 returns \"hello world\"\n    Box::new(2), // Hook 3 returns 2\n]\n```\n\nThe order the hooks are run it must be the same because the order determines which hook gets what state! If you run the hooks in a different order, dioxus may panic because it can't turn the state back into the right type or you may just get the wrong state for your hook.\n\n</details>\n\n</details>\n\n<!-- File: packages/hooks/docs/side_effects.md (Tokens: ~907 | Category: anthropic-skill) -->\nEffects are reactive closures that run **after the component has finished rendering**. Effects are useful for things like manually updating the DOM after it is rendered with web-sys or javascript. Or reading a value from the rendered DOM.\n\n**Effects are specifically created for side effects. If you are trying to derive state, use a [memo](#derived-state), or [resource](#derived-async-state) instead.**\n\nIf you are trying to update the DOM, you can use the [`use_effect`](https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_effect.html) hook to run an effect after the component has finished rendering.\n\n`use_effect` will subscribe to any changes in the signal values it captures effects will always run after first mount and then whenever the signal values change. If the use_effect call was skipped due to an early return, the effect will no longer activate.\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let mut count = use_signal(|| 0);\n\n    use_effect(move || {\n        // Effects are reactive like memos, and resources. If you read a value inside the effect, the effect will rerun when that value changes\n        let count = count.read();\n\n        // You can use the count value to update the DOM manually\n        document::eval(&format!(\n            r#\"var c = document.getElementById(\"dioxus-canvas\");\nvar ctx = c.getContext(\"2d\");\nctx.font = \"30px Arial\";\nctx.fillText(\"{count}\", 10, 50);\"#\n        ));\n    });\n\n    rsx! {\n        button {\n            // When you click the button, count will be incremented and the effect will rerun\n            onclick: move |_| count += 1,\n            \"Increment\"\n        }\n        canvas {\n            id: \"dioxus-canvas\",\n        }\n    }\n}\n```\n\n## With non-reactive dependencies\n\nTo add non-reactive dependencies, you can use the [`crate::use_reactive()`] hook.\n\nSignals will automatically be added as dependencies, so you don't need to call this method for them.\n\n```rust\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\n\n#[component]\nfn Comp(count: u32) -> Element {\n    // Because the memo subscribes to `count` by adding it as a dependency, the memo will rerun every time `count` changes.\n    use_effect(use_reactive((&count,), |(count,)| println!(\"Manually manipulate the dom\") ));\n\n    todo!()\n}\n```\n\n## Modifying mounted nodes\n\nOne of the most common use cases for effects is modifying or reading something from the rendered DOM. Dioxus provides access to the DOM with the [`onmounted`](https://docs.rs/dioxus/latest/dioxus/events/fn.onmounted.html) event.\n\nYou can combine `use_effect` with `onmounted` to run an effect with access to a DOM element after all rendering is finished:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let mut current_text = use_signal(String::new);\n    let mut mounted_text_div: Signal<Option<MountedEvent>> = use_signal(|| None);\n    let mut rendered_size = use_signal(String::new);\n\n    use_effect(move || {\n        // If we have mounted the text div, we can read the width of the div\n        if let Some(div) = mounted_text_div() {\n            // We read the current text here inside of the effect instead of the spawn so the effect subscribes to the signal\n            let text = current_text();\n            spawn(async move {\n                let bounding_box = div.get_client_rect().await;\n                rendered_size.set(format!(\"{text} is {bounding_box:?}\"));\n            });\n        }\n    });\n\n    rsx! {\n        input {\n            // When you enter text into the input, the effect will rerun because it subscribes to the current_text signal\n            oninput: move |evt| current_text.set(evt.value()),\n            placeholder: \"Enter text here\",\n            value: \"{current_text}\"\n        }\n        // When text changes, it will change the size of this div\n        div {\n            onmounted: move |element| {\n                mounted_text_div.set(Some(element.clone()));\n            },\n            \"{current_text}\"\n        }\n\n        \"{rendered_size}\"\n    }\n}\n```\n\n<!-- File: packages/hooks/docs/use_resource.md (Tokens: ~1520 | Category: anthropic-skill) -->\n[`use_resource()`] is a reactive hook that resolves to the result of a future. It will rerun when you write to any signals you read inside the future.\n\n## Example\n\n```rust\nuse dioxus::prelude::*;\n\nasync fn get_weather(location: &WeatherLocation) -> Result<String, String> {\n    Ok(\"Sunny\".to_string())\n}\n\nfn app() -> Element {\n    let country = use_signal(|| WeatherLocation {\n        city: \"Berlin\".to_string(),\n        country: \"Germany\".to_string(),\n        coordinates: (52.5244, 13.4105),\n    });\n\n    // Because the resource's future subscribes to `country` by reading it (`country.read()`),\n    // every time `country` changes the resource's future will run again and thus provide a new value.\n    let current_weather = use_resource(move || async move { get_weather(&country()).await });\n\n    rsx! {\n        // the value of the resource can be polled to\n        // conditionally render elements based off if it's future\n        // finished (Some(Ok(_)), errored Some(Err(_)),\n        // or is still running (None)\n        match &*current_weather.read_unchecked() {\n            Some(Ok(weather)) => rsx! { WeatherElement { weather } },\n            Some(Err(e)) => rsx! { p { \"Loading weather failed, {e}\" } },\n            None =>  rsx! { p { \"Loading...\" } }\n        }\n    }\n}\n\n#[derive(Clone)]\nstruct WeatherLocation {\n    city: String,\n    country: String,\n    coordinates: (f64, f64),\n}\n\n#[component]\nfn WeatherElement(weather: String) -> Element {\n    rsx! { p { \"The weather is {weather}\" } }\n}\n```\n\n## Reactivity\n\n`use_resource` is reactive which just means that it will rerun when you write to any signals you read inside the future. This means that any time you change something the future depends on, the resource automatically knows to rerun. Lets take a look at some examples:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// Create a new count signal\nlet mut count = use_signal(|| 1);\n// Create a new resource that doubles the value of count\nlet double_count = use_resource(move || async move {\n    // Start a request to the server. We are reading the value of count in the format macro\n    // Reading the value of count makes the resource \"subscribe\" to changes to count (when count changes, the resource will rerun)\n    let response = reqwest::get(format!(\"https://myserver.com/doubleme?count={count}\")).await.unwrap();\n    response.text().await.unwrap()\n});\n\n// Resource can be read in a way that is similar to signals, but they have a bit of extra information about the state of the resource future.\n\n// Calling .state() on a resource will return a Signal<UseResourceState> with information about the current status of the resource\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Pending\"\n\n// You can also try to get the last resolved value of the resource with the .value() method\nprintln!(\"{:?}\", double_count.read()); // Prints \"None\"\n\n// Wait for the resource to finish and get the value\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\n// Now if we read the state, we will see that it is done\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\n// And we can get the value\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(2)\"\n\n// Now if we write to count, the resource will rerun\ncount += 1; // count is now 2\n\n// Wait for the resource to finish and get the value\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\n// Now if we read the state, we will see that it is done\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\n// And we can get the value\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(4)\"\n\n// One more case, what happens if we write to the resource while it is in progress?\n// The resource will rerun and the value will be None\ncount += 1; // count is now 3\n\n// If we write to a value the resource subscribes to again, it will cancel the current future and start a new one\ncount += 1; // count is now 4\n\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Stopped\"\nprintln!(\"{:?}\", double_count.read()); // Prints the last resolved value \"Some(4)\"\n\n// After we wait for the resource to finish, we will get the value of only the latest future\nstd::thread::sleep(std::time::Duration::from_secs(1));\n\nprintln!(\"{:?}\", double_count.state().read()); // Prints \"UseResourceState::Done\"\n\nprintln!(\"{:?}\", double_count.read()); // Prints \"Some(8)\"\n```\n\n## With non-reactive dependencies\n\n`use_resource` can determine dependencies automatically with any reactive value ([`Signal`]s, [`ReadSignal`]s, [`Memo`]s, [`Resource`]s, etc). If you need to rerun the future when a normal rust value changes, you can add it as a dependency with the [`crate::use_reactive()`] hook:\n\n```rust\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\n#[component]\nfn Comp(count: u32) -> Element {\n    // We manually add the resource to the dependencies list with the `use_reactive` hook\n    // Any time `count` changes, the resource will rerun\n    let new_count = use_resource(use_reactive!(|(count,)| async move {\n        sleep(100).await;\n        count + 1\n    }));\n    rsx! { \"{new_count:?}\" }\n}\n\n// If your value is already reactive, you never need to call `use_reactive` manually\n// Instead of manually adding count to the dependencies list, you can make your prop reactive by wrapping it in `ReadSignal`\n#[component]\nfn ReactiveComp(count: ReadSignal<u32>) -> Element {\n    // Because `count` is reactive, the resource knows to rerun when `count` changes automatically\n    let new_count = use_resource(move || async move {\n        sleep(100).await;\n        count() + 1\n    });\n    rsx! { \"{new_count:?}\" }\n}\n```\n\n## Differences from `use_future` and `use_memo`\n\nJust like [`crate::use_future()`], `use_resource` spawns an async task in a component. However, unlike [`crate::use_future()`], `use_resource` returns the result of the future and will rerun when any dependencies change.\n\nResources return a value based on some existing state just like memos, but unlike memos, resources do not memorize the output of the closure. They will always rerun any parts of your app that read the value of the resource when the future resolves even if the output doesn't change.\n\nSee also: [`Resource`]\n\n<!-- File: packages/html/docs/common_event_handler_errors.md (Tokens: ~999 | Category: anthropic-skill) -->\n## Compiler errors you may run into while using event handlers\n\n<details>\n<summary>function requires argument type to outlive `'static`</summary>\n\nEvent handler in Dioxus need only access data that can last for the entire lifetime of the application. That generally means data that is moved into the closure. **If you get this error, you may have forgotten to add `move` to your closure.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// We return an Element which can last as long as the component is on the screen\nfn App() -> Element {\n    // Signals are `Copy` which makes them very easy to move into `'static` closures like event handlers\n    let state = use_signal(|| \"hello world\".to_string());\n\n    rsx! {\n        button {\n            // ❌ Without `move`, rust will try to borrow the `state` signal which fails because the state signal is dropped at the end of the function\n            onclick: |_| {\n                println!(\"You clicked the button! The state is: {state}\");\n            },\n            \"Click me\"\n        }\n    }\n    // The state signal is dropped here, but the event handler still needs to access it\n}\n```\n\nFixed component:\n\n```rust, no_run\n# use dioxus::prelude::*;\nfn App() -> Element {\n    let state = use_signal(|| \"hello world\".to_string());\n\n    rsx! {\n        button {\n            // ✅ The `move` keyword tells rust it can move the `state` signal into the closure. Since the closure owns the signal state, it can read it even after the function returns\n            onclick: move |_| {\n                println!(\"You clicked the button! The state is: {state}\");\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n</details>\n\n<details>\n<summary>use of moved value: `your_value` value used here after move</summary>\n\nData in rust has a single owner. If you run into this error, you have likely tried to move data that isn't `Copy` into two different closures. **You can fix this issue by making your data `Copy` or calling `clone` on it before you move it into the closure.**\n\nBroken component:\n\n```rust, compile_fail\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which cannot be copied implicitly\n#[component]\nfn MyComponent(string: String) -> Element {\n    rsx! {\n        button {\n            // ❌ We are moving the string into the onclick handler which means we can't access it elsewhere\n            onclick: move |_| {\n                println!(\"{string}\");\n            },\n            \"Print hello world\"\n        }\n        button {\n            // ❌ Since we already moved the string, we can't move it into the onclick handler again. This will cause a compiler error\n            onclick: move |_| {\n                println!(\"{string}\");\n            },\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\nYou can fix this issue by either:\n\n- Making your data `Copy` with `ReadSignal`:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts `ReadSignal<String>` which implements `Copy`\n#[component]\nfn MyComponent(string: ReadSignal<String>) -> Element {\n    rsx! {\n        button {\n            // ✅ Because the `string` signal is `Copy`, we can copy it into the closure while still having access to it elsewhere\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world\"\n        }\n        button {\n            // ✅ Since `string` is `Copy`, we can move it into the onclick handler again\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\n- Calling `clone` on your data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// `MyComponent` accepts a string which doesn't implement `Copy`\n#[component]\nfn MyComponent(string: String) -> Element {\n    rsx! {\n        button {\n            // ✅ The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n            onclick: {\n                // Clone the string in a new block\n                let string = string.clone();\n                // Then move the cloned string into the closure\n                move |_| println!(\"{}\", string)\n            },\n            \"Print hello world\"\n        }\n        button {\n            // ✅ We don't use the string after this closure, so we can just move it into the closure directly\n            onclick: move |_| println!(\"{}\", string),\n            \"Print hello world again\"\n        }\n    }\n}\n```\n\n</details>\n\n<!-- File: packages/html/docs/event_handlers.md (Tokens: ~622 | Category: anthropic-skill) -->\n# Event Handlers\n\nEvent Handlers let you react to user input in your application. In Dioxus, event handlers accept a closure that is called when the event occurs:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            // The `onclick` event accepts a closure with the signature `fn(Event)`\n            onclick: |event_data| println!(\"clicked! I got the event data: {event_data:?}\"),\n            \"Click me\"\n        }\n    }\n}\n```\n\n## Event Lifetimes\n\nEvents take a closure with the `'static` lifetime. This means that the closure can only access data that either exists for the entire lifetime of the application, or data that you move into the closure.\n\nState in dioxus is `copy` which makes it very easy to move into `'static` closures like event handlers:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut count = use_signal(|| 0);\n\nrsx! {\n    button {\n        // Since we added the `move` keyword, the closure will move the `count` signal into the closure\n        onclick: move |_| {\n            // This will panic because the `count` signal is not in scope\n            count.set(count() + 1);\n        },\n        \"Click me\"\n    }\n};\n```\n\nIf you need to access data that is not `Copy`, you may need to clone the data before you move it into the closure:\n\n```rust, no_run\n# use dioxus::prelude::*;\n// String is not `Copy`\nlet string = \"hello world\".to_string();\n\nrsx! {\n    button {\n        // The string only has one owner. We could move it into this closure, but since we want to use the string in other closures later, we will clone it instead\n        onclick: {\n            // Clone the string in a new block\n            let string = string.clone();\n            // Then move the cloned string into the closure\n            move |_| println!(\"{}\", string)\n        },\n        \"Print hello world\"\n    }\n    button {\n        // We don't use the string after this closure, so we can just move it into the closure directly\n        onclick: move |_| println!(\"{}\", string),\n        \"Print hello world again\"\n    }\n};\n```\n\n## Async Event Handlers\n\nIn addition to closures that return nothing, you can also use async closures to handle events. If you return an async block from an event handler, dioxus will automatically spawn it:\n\n```rust, no_run\nuse dioxus::prelude::*;\n\nfn App() -> Element {\n    rsx! {\n        button {\n            // The `onclick` event can also accept a closure that returns an async block\n            onclick: move |_| async move {\n                tokio::time::sleep(std::time::Duration::from_secs(1)).await;\n                println!(\"You clicked the button one second ago!\");\n            },\n            \"Click me\"\n        }\n    }\n}\n```\n\n<!-- File: packages/signals/docs/memo.md (Tokens: ~1151 | Category: anthropic-skill) -->\nMemos are the result of computing a value from `use_memo`.\n\nYou may have noticed that this struct doesn't have many methods. Most methods for `Memo` are defined on the [`ReadableExt`] trait.\n\n# Reading a Memo\n\nYou can use the methods on the `ReadableExt` trait to read a memo:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n    // The memo will rerun any time we write to the count signal\n    let halved = use_memo(move || count() / 2);\n\n    rsx! {\n        // When we read the value of memo, the current component will subscribe to the result of the memo. It will only rerun when the result of the memo changes.\n        \"{halved}\"\n        button {\n            onclick: move |_| {\n                count += 1;\n            },\n            \"Increment\"\n        }\n    }\n}\n```\n\nMemo also includes helper methods just like [`Signal`]s to make it easier to use. Calling a memo like a function will clone the inner value:\n\n```rust, no_run\n# use dioxus::prelude::*;\n\nfn app() -> Element {\n    let mut count = use_signal(|| 0);\n    // The memo will rerun any time we write to the count signal\n    let halved = use_memo(move || count() / 2);\n    // This will rerun any time the halved value changes\n    let doubled = use_memo(move || 2 * halved());\n\n    rsx! {\n        \"{doubled}\"\n        button {\n            onclick: move |_| {\n                count += 1;\n            },\n            \"Increment\"\n        }\n    }\n}\n```\n\nFor a full list of all the helpers available, check out the [`Readable`], [`ReadableVecExt`](crate::ReadableVecExt), and [`ReadableOptionExt`](crate::ReadableOptionExt) traits.\n\n# Memos with Async\n\nBecause Memos check borrows at runtime, you need to be careful when reading memos inside of async code. If you hold a read of a memo over an await point, that read may still be open when the memo reruns which will cause a panic:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: &u32) -> u32 {\n    sleep(100).await;\n    *value * 2\n}\nlet mut signal = use_signal(|| 0);\nlet halved = use_memo(move || signal() / 2);\n\nlet doubled = use_resource(move || async move {\n    // Don't hold reads over await points\n    let halved = halved.read();\n    // While the future is waiting for the async work to finish, the read will be open\n    double_me_async(&halved).await\n});\n\nrsx!{\n    \"{doubled:?}\"\n    button {\n        onclick: move |_| {\n            // When you write to signal, it will cause the memo to rerun which may panic because you are holding a read of the memo over an await point\n            signal += 1;\n        },\n        \"Increment\"\n    }\n};\n```\n\nInstead of holding a read over an await point, you can clone whatever values you need out of your memo:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: u32) -> u32 {\n    sleep(100).await;\n    value * 2\n}\nlet mut signal = use_signal(|| 0);\nlet halved = use_memo(move || signal() / 2);\n\nlet doubled = use_resource(move || async move {\n    // Calling the memo will clone the inner value\n    let halved = halved();\n    double_me_async(halved).await;\n});\n\nrsx!{\n    \"{doubled:?}\"\n    button {\n        onclick: move |_| {\n            signal += 1;\n        },\n        \"Increment\"\n    }\n};\n```\n\n# Memo lifecycle\n\nMemos are implemented with [generational-box](https://crates.io/crates/generational-box) which makes all values Copy even if the inner value is not Copy.\n\nThis is incredibly convenient for UI development, but it does come with some tradeoffs. The lifetime of the memo is tied to the lifetime of the component it was created in. If you drop the component that created the memo, the memo will be dropped as well. You might run into this if you try to pass a memo from a child component to a parent component and drop the child component. To avoid this you can create your memo higher up in your component tree, or use global memos.\n\nTLDR **Don't pass memos up in the component tree**. It will cause issues:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let child_signal = use_signal(|| None);\n\n    rsx! {\n        IncrementButton {\n            child_signal\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut child_signal: Signal<Option<Memo<i32>>>) -> Element {\n    let signal_owned_by_child = use_signal(|| 0);\n    let memo_owned_by_child = use_memo(move || signal_owned_by_child() * 2);\n    // Don't do this: it may cause issues if you drop the child component\n    child_signal.set(Some(memo_owned_by_child));\n\n    todo!()\n}\n```\n\n<!-- File: packages/signals/docs/signals.md (Tokens: ~1494 | Category: anthropic-skill) -->\nSignals are a Copy state management solution with automatic dependency tracking.\n\nYou may have noticed that this struct doesn't have many methods. Most methods for Signal are defined on the [`Readable`] and [`Writable`] traits.\n\n# Reading and Writing to a Signal\n\nSignals are similar to a copy version of `Rc<RefCell<T>>` built for UIs. You can read and write to a signal like a RefCell:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n\n{\n    // This will read the value (we use a block to make sure the read is dropped before the write. You can read more about this in the next section)\n    let read = signal.read();\n    // Just like refcell, read you can deref the read to get the inner &T reference\n    match &*read {\n        &0 => println!(\"read is 0\"),\n        &1 => println!(\"read is 1\"),\n        _ => println!(\"read is something else ({read})\"),\n    }\n}\n\n// This will write to the value\nlet mut write = signal.write();\n// Again, we can deref the write to get the inner &mut T reference\n*write += 1;\n```\n\nSignals also have a bunch of helper methods to make it easier to use. Calling it like a function will clone the inner value. You can also call a few traits like AddAssign on it directly without writing to it manually:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n// This will clone the value\nlet clone: i32 = signal();\n\n// You can directly display the signal\nprintln!(\"{}\", signal);\n\nlet signal_vec = use_signal(|| vec![1, 2, 3]);\n// And use vec methods like .get and .len without reading the signal explicitly\nlet first = signal_vec.get(0);\nlet last = signal_vec.last();\nlet len = signal_vec.len();\n\n// You can also iterate over signals directly\nfor i in signal_vec.iter() {\n    println!(\"{}\", i);\n}\n```\n\nFor a full list of all the helpers available, check out the [`Readable`], [`ReadableVecExt`], [`ReadableOptionExt`], [`Writable`], [`WritableVecExt`], and [`WritableOptionExt`] traits.\n\nJust like `RefCell<T>`, Signal checks borrows at runtime. If you read and write to the signal at the same time, it will panic:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n// If you create a read and hold it while you write to the signal, it will panic\nlet read = signal.read_unchecked();\n// This will panic\nsignal += 1;\nprintln!(\"{}\", read);\n```\n\nTo avoid issues with overlapping reads and writes, you can use the `with_*` variants of methods to read and write to the signal in a single scope or wrap your reads and writes inside a block:\n\n```rust, no_run\n# use dioxus::prelude::*;\nlet mut signal = use_signal(|| 0);\n{\n    // Since this read is inside a block that ends before we write to the signal, the signal will be dropped before the write and it will not panic\n    let read = signal.read();\n    println!(\"{}\", read);\n}\nsignal += 1;\n\n// Or you can use the with and with_write methods which only read or write to the signal inside the closure\nsignal.with(|read| println!(\"{}\", read));\n// Since the read only lasts as long as the closure, this will not panic\nsignal.with_mut(|write| *write += 1);\n```\n\n# Signals with Async\n\nBecause signals check borrows at runtime, you need to be careful when reading and writing to signals inside of async code. If you hold a read or write to a signal over an await point, that read or write may still be open while you run other parts of your app:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: &mut u32) {\n    sleep(100).await;\n    *value *= 2;\n}\nlet mut signal = use_signal(|| 0);\n\nuse_future(move || async move {\n    // Don't hold reads or writes over await points\n    let mut write = signal.write();\n    // While the future is waiting for the async work to finish, the write will be open\n    double_me_async(&mut write).await;\n});\n\nrsx!{\n    // This read may panic because the write is still active while the future is waiting for the async work to finish\n    \"{signal}\"\n};\n```\n\nInstead of holding a read or write over an await point, you can clone whatever values you need out of your signal and then set the signal to the result once the async work is done:\n\n```rust, no_run\n# use dioxus::prelude::*;\n# async fn sleep(delay: u32) {}\nasync fn double_me_async(value: u32) -> u32 {\n    sleep(100).await;\n    value * 2\n}\nlet mut signal = use_signal(|| 0);\n\nuse_future(move || async move {\n    // Clone the value out of the signal\n    let current_value = signal();\n    // Run the async work\n    let new_value = double_me_async(current_value).await;\n    // Set the signal to the new value\n    signal.set(new_value);\n});\n\nrsx! {\n    // This read will not panic because the write is never held over an await point\n    \"{signal}\"\n};\n```\n\n# Signals lifecycle\n\nSignals are implemented with [generational-box](https://crates.io/crates/generational-box) which makes all values Copy even if the inner value is not Copy.\n\nThis is incredibly convenient for UI development, but it does come with some tradeoffs. The lifetime of the signal is tied to the lifetime of the component it was created in. If you drop the component that created the signal, the signal will be dropped as well. You might run into this if you try to pass a signal from a child component to a parent component and drop the child component. To avoid this you can create your signal higher up in your component tree, use global signals, or create a signal in a specific scope (like the `ScopeId::ROOT`) with [`Signal::new_in_scope`](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Signal.html#method.new_in_scope)\n\nTLDR **Don't pass signals up in the component tree**. It will cause issues:\n\n```rust\n# use dioxus::prelude::*;\nfn MyComponent() -> Element {\n    let child_signal = use_signal(|| None);\n\n    rsx! {\n        IncrementButton {\n            child_signal\n        }\n    }\n}\n\n#[component]\nfn IncrementButton(mut child_signal: Signal<Option<Signal<i32>>>) -> Element {\n    let signal_owned_by_child = use_signal(|| 0);\n    // Don't do this: it may cause issues if you drop the child component\n    child_signal.set(Some(signal_owned_by_child));\n\n    todo!()\n}\n```\n\n<!-- File: packages/autofmt/README.md (Tokens: ~522 | Category: plugin-manifest) -->\n# dioxus-autofmt\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-autofmt.svg\n[crates-url]: https://crates.io/crates/dioxus-autofmt\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-autofmt/latest/dioxus_autofmt) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-autofmt` provides a pretty printer for the `rsx` syntax tree.\n\nThis is done manually with a via set of formatting rules. The output is not guaranteed to be stable between minor versions of the crate as we might tweak the output.\n\n`dioxus-autofmt` provides an API to perform precision edits as well as just spit out a block of formatted RSX from any RSX syntax tree. This is used by the `rsx-rosetta` crate which can accept various input languages and output valid RSX.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n\n<!-- File: packages/cli-config/README.md (Tokens: ~78 | Category: plugin-manifest) -->\n# dioxus-cli-config\n\nA crate that provides key/value names and types for configuring Dioxus applications at runtime.\n\nThis crate exists for us to very cleanly define the exact fields we want to pass down to Dioxus applications at runtime but without exposing the entire config object.\n\nThis leads to faster compile times, smaller binaries, and a clearer distinction between the config and the application.\n\n<!-- File: packages/cli-harnesses/README.md (Tokens: ~738 | Category: plugin-manifest) -->\n# Test harnesses\n\nThis folder contains a series of CLI harnesses that represent common structures of dioxus apps.\n\nWe test these projects as a form of smoke testing to ensure our argument resolution works properly.\n\nThese projects might not be functionally useful, but they do have interesting properties that the CLI tests.\n\nThe tests for the CLI are contained within the CLI itself.\n\n## This Folder\n\nThe items in this folder are procedurally generated by tests in the CLI crate. We will delete EVERYTHING that ends up here.\n\n## How platform resolution works\n\nDetermine which features, triple, profile, etc to pass to the build.\n\nMost of the time, users should use `dx serve --<platform>` where the platform name directly\ncorresponds to the feature in their cargo.toml. So,\n- `dx serve --web` will enable the `web` feature\n- `dx serve --mobile` will enable the `mobile` feature\n- `dx serve --desktop` will enable the `desktop` feature\n\nIn this case, we set default-features to false and then add back the default features that\naren't renderers, and then add the feature for the given renderer (i.e., web/desktop/mobile).\nWe call this \"no-default-features-stripped.\"\n\nThere are a few cases where the user doesn't need to pass a platform.\n- they selected one via `dioxus = { features = [\"web\"] }`\n- they have a single platform in their default features `default = [\"web\"]`\n- there is only a single non-server renderer as a feature `web = [\"dioxus/web\"], server = [\"dioxus/server\"]`\n- they compose the super triple via triple + bundleformat + features\n\nNote that we only use the names of the features to correspond with the platform.\nPlatforms are \"super triples\", meaning they contain information about\n- bundle format\n- target triple\n- how to serve\n- enabled features\n\nBy default, the --platform presets correspond to:\n- web:          bundle(web), triple(wasm32), serve(http-serve), features(\"web\")\n- desktop:      alias to mac/win/linux\n- mac:          bundle(mac), triple(host), serve(appbundle-open), features(\"desktop\")\n- windows:      bundle(exefolder), triple(host), serve(run-exe), features(\"desktop\")\n- linux:        bundle(appimage), triple(host), serve(run-exe), features(\"desktop\")\n- ios:          bundle(ios), triple(arm64-apple-ios), serve(ios-simulator/xcrun), features(\"mobile\")\n- android:      bundle(android), triple(arm64-apple-ios), serve(android-emulator/adb), features(\"mobile\")\n- server:       bundle(server), triple(host), serve(run-exe), features(\"server\")\n- liveview:     bundle(liveview), triple(host), serve(run-exe), features(\"liveview\")\n- unknown:      <auto or default to desktop>\n\nFullstack usage is inferred from the presence of the fullstack feature or --fullstack.\n\n## List of harnesses (brainstorming)\n\n- app that doesn't use dioxus\n- simple app where the renderer is used as an explicit feature\n- simple app, same as above, but with fullstack enabled\n  - since no `server` feature is present, we don't run the server\n- simple app, same as above, but with a `server` feature\n  - server should launch and take precedence over the client\n- simple server-only app\n  - IE you're doing SSR with dioxus\n\n<!-- File: packages/cli/assets/android/prebuilt/README.md (Tokens: ~193 | Category: plugin-manifest) -->\nThis folder contains prebuilt versions of android crates to make cross-compiling easier.\n\nWe use the official prebuilds distributed by google.\n\nYou can find the full set of prebuilt libraries that google distributes here:\n\nhttps://maven.google.com/web/index.html?q=com.android.ndk.thirdparty#com.android.ndk.thirdparty\n\nThe version included in `dx` is downloaded from here:\n\nhttps://maven.google.com/web/index.html?q=com.android.ndk.thirdparty#com.android.ndk.thirdparty:openssl:1.1.1q-beta-1\n\nThe SHA of the `.aar` file from google and `dx` are different. The Rust openssl-sys crate expects libcrypto and libssl to be in the same folder, but the `.aar` that google distributes splits the two libraries into two different folders. I (jon) have simply merged the folders together and then re-packed the folder as a `.tar.gz`.\n\n<!-- File: packages/cli/README.md (Tokens: ~509 | Category: plugin-manifest) -->\n<div>\n  <h1>📦✨ Dioxus CLI</h1>\n  <p><strong>Tooling to supercharge Dioxus projects</strong></p>\n</div>\n\nThe **dioxus-cli** (inspired by wasm-pack and webpack) is a tool for getting Dioxus projects up and running.\nIt handles building, bundling, development and publishing to simplify development.\n\n## Installation\n\n### Install the stable version (recommended)\n\n```shell\ncargo install dioxus-cli\n```\n\n### Install the latest development build through git\n\nTo get the latest bug fixes and features, you can install the development version from git.\nHowever, this is not fully tested.\nThat means you're probably going to have more bugs despite having the latest bug fixes.\n\n```shell\ncargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli\n```\n\nThis will download the CLI from the master branch,\nand install it in Cargo's global binary directory (`~/.cargo/bin/` by default).\n\n### Install from local folder\nNote: The CLI will fail to build projects in debug profile. This is currently under investigation.\n```shell\ncargo install --path .\n```\n\n## Get started\n\nUse `dx new` to initialize a new Dioxus project.\nIt will be cloned from the [dioxus-template](https://github.com/DioxusLabs/dioxus-template) repository.\n\nAlternatively, you can specify the template path:\n\n```shell\ndx new --template gh:dioxuslabs/dioxus-template\n```\n\nRun `dx --help` for a list of all the available commands.\nFurthermore, you can run `dx <command> --help` to get help with a specific command.\n\n## Dioxus config file\n\nYou can use the `Dioxus.toml` file for further configuration.\nSome fields are mandatory, but the CLI tool will tell you which ones are missing.\nYou can create a `Dioxus.toml` with all fields already set using `dx config init project-name`,\nor you can use this bare-bones template (only mandatory fields) to get started:\n\n```toml\n[application]\nname = \"project-name\"\n# Currently supported platforms: web, desktop\ndefault_platform = \"web\"\n\n# Optional: enable copying from a static directory (e.g. \"public\")\npublic_dir = \"public\"\n\n[web.app]\ntitle = \"Hello\"\n\n[web.resource.dev]\n```\n\n<!-- File: packages/config-macro/README.md (Tokens: ~435 | Category: plugin-manifest) -->\n# dioxus-config-macro\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-config-macro.svg\n[crates-url]: https://crates.io/crates/dioxus-config-macro\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guide](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-config-macro/latest/dioxus_config_macro/) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-config-macro` provides a handful of helpful macros to make it easier to work with optional sections of the launch builder.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n\n<!-- File: packages/config-macros/README.md (Tokens: ~117 | Category: plugin-manifest) -->\n# Dioxus Config Macros\n\nThese macros are used internally by codegen and are not intended for general use.\n\nDioxus will export its feature flags into this crate, allowing downstream codegen to use them under the \"dioxus\" namespace.\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n\n<!-- File: packages/const-serialize/README.md (Tokens: ~646 | Category: plugin-manifest) -->\nA rust serialization library that works in const with complex(ish) types like enums, nested structs and arrays. Const rust does not have an allocator, so this library cannot work in a cross architecture environment with Vecs, slices or strings.\n\n```rust\nuse const_serialize::{deserialize_const, serialize_const, serialize_eq, ConstVec, SerializeConst};\n#[derive(Clone, Copy, Debug, PartialEq, SerializeConst)]\nstruct Struct {\n    a: u32,\n    b: u8,\n    c: u32,\n    d: Enum,\n}\n\n#[derive(Clone, Copy, Debug, PartialEq, SerializeConst)]\n#[repr(C, u8)]\nenum Enum {\n    A { one: u32, two: u16 },\n    B { one: u8, two: u16 } = 15,\n}\n\nconst {\n    let data = [Struct {\n        a: 0x11111111,\n        b: 0x22,\n        c: 0x33333333,\n        d: Enum::A {\n            one: 0x44444444,\n            two: 0x5555,\n        },\n    }; 3];\n    let mut buf = ConstVec::new();\n    buf = serialize_const(&data, buf);\n    let buf = buf.as_ref();\n    let (buf, deserialized) = match deserialize_const!([Struct; 3], buf) {\n        Some(data) => data,\n        None => panic!(\"data mismatch\"),\n    };\n    if !serialize_eq(&data, &deserialized) {\n        panic!(\"data mismatch\");\n    }\n}\n```\n\n## How it works\n\n`const-serialize` relies heavily on well defined layouts for the types you want to serialize. The serialization format is the linear sequence of unaligned bytes stored in the order of the fields, items or variants of the type. Numbers are stored in little endian order.\n\nIn order to support complex nested types, serialization is done using a trait. Since functions in traits cannot be const, `const-serialize` uses a macro to generate constant associated items that describe the memory layout of the type. That layout is then used to read all of the bytes in the type into the serialized buffer.\n\nThe deserialization is done in a similar way, but the layout is used to write the bytes from the serialized buffer into the type.\n\nThe rust [nomicon](https://doc.rust-lang.org/nomicon/data.html) defines the memory layout of different types. It is used as a reference for the layout of the types implemented in `const-serialize`.\n\n## Limitations\n\n- Only constant sized types are supported. This means that you can't serialize a type like `Vec<T>`. These types are difficult to create in const contexts in general\n- Only types with a well defined memory layout are supported (see <https://github.com/rust-lang/rfcs/pull/3727>). `repr(Rust)` enums don't have a well defined layout, so they are not supported. `repr(C, u8)` enums can be used instead\n- Const rust does not support mutable references or points, so this crate leans heavily on functional data structures for data processing.\n\n<!-- File: packages/core-macro/README.md (Tokens: ~543 | Category: plugin-manifest) -->\n# dioxus-core-macro\n\n[![Crates.io][crates-badge]][crates-url]\n[![MIT licensed][mit-badge]][mit-url]\n[![Build Status][actions-badge]][actions-url]\n[![Discord chat][discord-badge]][discord-url]\n\n[crates-badge]: https://img.shields.io/crates/v/dioxus-core-macro.svg\n[crates-url]: https://crates.io/crates/dioxus-core-macro\n[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[mit-url]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n[actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg\n[actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster\n[discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square\n[discord-url]: https://discord.gg/XgGxMSkvUM\n\n[Website](https://dioxuslabs.com) |\n[Guides](https://dioxuslabs.com/learn/0.7/) |\n[API Docs](https://docs.rs/dioxus-core-macro/latest/dioxus_core_macro) |\n[Chat](https://discord.gg/XgGxMSkvUM)\n\n## Overview\n\n`dioxus-core-macro` provides a handful of helpful macros used by the `dioxus` crate. These include:\n\n- The `rsx!` macro that underpins templates and node creation.\n- The `component` attribute macro denotes a function as a Dioxus component. Currently, this:\n  - Transforms function arguments into an auto-derived struct.\n  - Ensures that your component name uses PascalCase.\n  - Probably more stuff in the future. This macro allows us to have a way of distinguishing functions and components, which can be quite handy.\n- The `format_args_f` macro which allows f-string formatting with support for expressions.\n\n## Contributing\n\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- Join the discord and ask questions!\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/dioxuslabs/dioxus/blob/main/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you shall be licensed as MIT without any additional\nterms or conditions.\n\n<!-- File: packages/core/README.md (Tokens: ~883 | Category: plugin-manifest) -->\n# dioxus-core\n\n`dioxus-core` provides a fast and featureful VirtualDom implementation for Rust.\n\n```rust, no_run\n# tokio::runtime::Runtime::new().unwrap().block_on(async {\nuse dioxus_core::{VirtualDom, Event, Element, Mutations, VNode, ElementId};\n\nlet mut vdom = VirtualDom::new(app);\nlet real_dom = SomeRenderer::new();\n\nloop {\n    tokio::select! {\n        evt = real_dom.event() => {\n            let evt = Event::new(evt, true);\n            vdom.runtime().handle_event(\"onclick\", evt, ElementId::from_raw(0))\n        },\n        _ = vdom.wait_for_work() => {}\n    }\n    vdom.render_immediate(&mut real_dom.apply())\n}\n\n# fn app() -> Element { VNode::empty() }\n# struct SomeRenderer; impl SomeRenderer { fn new() -> SomeRenderer { SomeRenderer } async fn event(&self) -> std::rc::Rc<dyn std::any::Any> { unimplemented!() } fn apply(&self) -> Mutations { Mutations::default() } }\n# });\n```\n\n## Features\n\nA virtualdom is an efficient and flexible tree data structure that allows you to manage state for a graphical user interface. The Dioxus VirtualDom is perhaps the most fully-featured virtualdom implementation in Rust and powers renderers running across Web, Desktop, Mobile, SSR, TUI, LiveView, and more. When you use the Dioxus VirtualDom, you immediately enable users of your renderer to leverage the wide ecosystem of Dioxus components, hooks, and associated tooling.\n\nSome features of `dioxus-core` include:\n\n- UI components are just functions\n- State is provided by hooks\n- Deep integration with async\n- Strong focus on performance\n- Integrated hotreloading support\n- Extensible system for UI elements and their attributes\n\nIf you are just starting, check out the Guides first.\n\n## Understanding the implementation\n\n`dioxus-core` is designed to be a lightweight crate that. It exposes a number of flexible primitives without being deeply concerned about the intracices of state management itself. We provide a number of useful abstractions built on these primitives in the `dioxus-hooks` crate as well as the `dioxus-signals` crate.\n\nThe important abstractions to understand are:\n\n- The [`VirtualDom`]\n- The [`Component`] and its [`Properties`]\n- Handling events\n- Working with async\n- Suspense\n\n## Usage\n\nThe `dioxus` crate exports the `rsx` macro which transforms a helpful, simpler syntax of Rust.\n\nFirst, start with your app:\n\n```rust\n# use dioxus::dioxus_core::{Mutations, VirtualDom};\nuse dioxus::prelude::*;\n\n// First, declare a root component\nfn app() -> Element {\n    rsx! {\n        div { \"hello world\" }\n    }\n}\n\nfn main() {\n    // Next, create a new VirtualDom using this app as the root component.\n    let mut dom = VirtualDom::new(app);\n\n    // The initial render of the dom will generate a stream of edits for the real dom to apply\n    let mutations = dom.rebuild_to_vec();\n}\n```\n\n## Contributing\n\n- Check out the website [section on contributing](https://dioxuslabs.com/learn/0.7/beyond/contributing).\n- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).\n- [Join](https://discord.gg/XgGxMSkvUM) the discord and ask questions!\n\n<a href=\"https://github.com/dioxuslabs/dioxus/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10\" />\n</a>\n\n## License\n\nThis project is licensed under the [MIT license].\n\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT, without any additional\nterms or conditions.\n\n<!-- File: packages/core/tests/README.md (Tokens: ~297 | Category: plugin-manifest) -->\n# Testing of Dioxus core\n\n\nDiffing\n- [x] create elements\n- [x] create text\n- [x] create fragments\n- [x] create empty fragments (placeholders)\n- [x] diff elements\n- [x] diff from element/text to fragment\n- [x] diff from element/text to empty fragment\n- [x] diff to element with children works too\n- [x] replace with works forward\n- [x] replace with works backward\n- [x] un-keyed diffing\n- [x] keyed diffing\n- [x] keyed diffing out of order\n- [x] keyed diffing with prefix/suffix\n- [x] suspended nodes work\n\nLifecycle\n- [] Components mount properly\n- [] Components create new child components\n- [] Replaced components unmount old components and mount new\n- [] Post-render effects are called\n\nShared Context\n- [] Shared context propagates downwards\n- [] unwrapping shared context if it doesn't exist works too\n\nSuspense\n- [] use_suspense generates suspended nodes\n\n\nHooks\n- [] Drop order is maintained\n- [] Shared hook state is okay\n- [] use_hook works\n- [] use_ref works\n- [] use_noderef works\n- [] use_provide_state\n- [] use_consume_state\n\n\nVirtualDOM API\n- [] work\n- [] rebuild_to_vec\n- [] change props\n\n<!-- File: packages/depinfo/README.md (Tokens: ~155 | Category: plugin-manifest) -->\n# Rustc Dep-Info Parser\n\nThis crate parses the output of rustc's `.d` dep-info file. It is used by the hot-reloading engine and other libraries to provide higher quality dependency analysis for the user's project.\n\n## License\n\nThis project is licensed under either the [MIT license] or the [Apache-2 License].\n\n[apache-2 license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-APACHE\n[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional\nterms or conditions.\n\n<!-- ... +27 more modular skills available via /api/skills/DioxusLabs/dioxus?path={path} -->\n</yakaai_skills>"}