Ver código fonte

start a contributing guide

Evan Almloff 2 anos atrás
pai
commit
5f1f3e1b58

+ 21 - 0
docs/README.md

@@ -0,0 +1,21 @@
+# Building the Documentation
+
+Dioxus uses a fork of MdBook with multilanguage support. To build the documentation, you will need to install the forked version of MdBook.
+
+```sh
+cargo install mdbook --git https://github.com/Demonthos/mdBook.git --branch master
+```
+
+Then, you can build the documentation by running:
+
+Linux and MacOS:
+
+```sh
+cd docs && cd guide && mdbook build -d ../nightly/guide && cd .. && cd router && mdbook build -d ../nightly/router && cd .. && cd ..
+```
+
+Windows:
+
+```cmd
+cd docs; cd guide; mdbook build -d ../nightly/guide; cd ..; cd router; mdbook build -d ../nightly/router; cd ..; cd ..
+```

+ 5 - 2
docs/guide/src/en/SUMMARY.md

@@ -31,6 +31,7 @@
   - [Error Handling](best_practices/error_handling.md)
   - [Error Handling](best_practices/error_handling.md)
   - [Antipatterns](best_practices/antipatterns.md)
   - [Antipatterns](best_practices/antipatterns.md)
 - [Publishing](publishing/index.md)
 - [Publishing](publishing/index.md)
+
   - [Desktop](publishing/desktop.md)
   - [Desktop](publishing/desktop.md)
   - [Web](publishing/web.md)
   - [Web](publishing/web.md)
 
 
@@ -40,5 +41,7 @@
 
 
 ---
 ---
 
 
-[Roadmap](roadmap.md)
-[Contributing](contributing.md)
+- [Contributing](contributing/index.md)
+  - [Project Structure](contributing/project_structure.md)
+  - [Guiding Principles](contributing/guiding_principles.md)
+  - [Roadmap](contributing/roadmap.md)

+ 39 - 0
docs/guide/src/en/contributing/guiding_principles.md

@@ -0,0 +1,39 @@
+# Overall Goals
+
+This document outlines some of the overall goals for Dioxus. These goals are not set in stone, but they represent general guidelines for the project.
+
+The goal of Dioxus is to make it easy to build **cross-platform applications that scale**.
+
+## Cross-Platform
+
+Dioxus is designed to be cross-platform by default. This means that it should be easy to build applications that run on the web, desktop, and mobile. However, Dioxus should also be flexible enough to allow users to opt into platform-specific features when needed. The `use_eval` is one example of this. By default, Dioxus does not assume that the platform supports JavaScript, but it does provide a hook that allows users to opt into JavaScript when needed.
+
+## Performance
+
+As Dioxus applications grow, they should remain relatively performant without the need for manual optimizations. There will be cases where manual optimizations are needed, but Dioxus should try to make these cases as rare as possible.
+
+The is one of the benefits of the core architecture of Dioxus. It is based on a Virtual Dom which performs diffing which should prevent unnecessary re-renders even when large parts of the component tree are rerun. On top of this, Dioxus groups static parts of the RSX tree together to skip diffing them entirely.
+
+## Type Safety
+
+As teams grow, the Type safety of Rust is a huge advantage. Dioxus should leverage this advantage to make it easy to build applications with large teams.
+
+To take full advantage of Rust's type system, Dioxus should try to avoid exposing public `Any` types and stringly typed APIs where possible.
+
+## Developer Experience
+
+Dioxus should be easy to learn and ergonomic to use.
+
+- The API of Dioxus should try to remain close to React's API where possible
+
+  - This makes it easier for people to learn Dioxus if they already know React
+
+- We can avoid the tradeoff between simplicity and flexibility by providing multiple layers of API: One for the very common use case, one for low-level control
+
+  - Hooks: the hooks crate has the most common use cases, but `cx.hook` provides a way to access the underlying persistent reference if needed.
+  - The builder pattern in platform Configs: The builder pattern is used to default to the most common use case, but users can change the defaults if needed.
+
+- Documentation:
+  - All public APIs should have rust documentation
+  - Examples should be provided for all public features. These examples both serve as documentation and are checked by CI to ensure that they continue to compile
+  - The most common workflows should be documented in the guide

+ 32 - 1
docs/guide/src/en/contributing.md → docs/guide/src/en/contributing/index.md

@@ -10,7 +10,7 @@ If you'd like to improve the docs, PRs are welcome! Both Rust docs ([source](htt
 
 
 ## Working on the Ecosystem
 ## Working on the Ecosystem
 
 
-Part of what makes React great is the rich ecosystem. We'd like the same for Dioxus! So if you have a library in mind that you'd like to write and many people would benefit from, it will be appreciated. You can [browse npm.js](https://www.npmjs.com/search?q=keywords:react-component) for inspiration.
+Part of what makes React great is the rich ecosystem. We'd like the same for Dioxus! So if you have a library in mind that you'd like to write and many people would benefit from, it will be appreciated. You can [browse npm.js](https://www.npmjs.com/search?q=keywords:react-component) for inspiration. Once you are done, add your library to the [awesome dioxus](https://github.com/DioxusLabs/awesome-dioxus) list or share it in the `#I-made-a-thing` channel on [Discord](https://discord.gg/XgGxMSkvUM).
 
 
 ## Bugs & Features
 ## Bugs & Features
 
 
@@ -18,3 +18,34 @@ If you've fixed [an open issue](https://github.com/DioxusLabs/dioxus/issues), fe
 
 
 All pull requests (including those made by a team member) must be approved by at least one other team member.
 All pull requests (including those made by a team member) must be approved by at least one other team member.
 Larger, more nuanced decisions about design, architecture, breaking changes, trade-offs, etc. are made by team consensus.
 Larger, more nuanced decisions about design, architecture, breaking changes, trade-offs, etc. are made by team consensus.
+
+## Tools
+
+The following tools can be helpful when developing Dioxus. Many of these tools are used in the CI pipeline. Running them locally before submitting a PR instead of waiting for CI can save time.
+
+- All code is tested with [cargo test](https://doc.rust-lang.org/cargo/commands/cargo-test.html)
+
+```sh
+cargo fmt --all
+```
+
+- All code is formatted with [rustfmt](https://github.com/rust-lang/rustfmt)
+
+```sh
+cargo check --workspace --examples --tests
+```
+
+- All code is linted with [Clippy](https://doc.rust-lang.org/clippy/)
+
+```sh
+cargo clippy --workspace --examples --tests -- -D warnings
+```
+
+- Crates that use unsafe are checked for undefined behavior with [MIRI](https://github.com/rust-lang/miri). MIRI can be helpful to debug what unsafe code is causing issues. Only code that does not interact with system calls can be checked with MIRI. Currently this is used for the two MIRI tests in `dioxus-core` and `dioxus-native-core`.
+
+```sh
+cargo miri test --package dioxus-core --test miri_stress
+cargo miri test --package dioxus-native-core --test miri_native
+```
+
+- [Rust analyzer](https://rust-analyzer.github.io/) can be very helpful for quick feedback in your IDE.

+ 50 - 0
docs/guide/src/en/contributing/project_structure.md

@@ -0,0 +1,50 @@
+# Project Struture
+
+There are many packages in the Dioxus organization. This document will help you understand the purpose of each package and how they fit together.
+
+## Renderers
+
+- [Desktop](https://github.com/DioxusLabs/dioxus/tree/master/packages/desktop): A Render that Runs Dioxus applications natively, but renders them with the system webview
+- [Mobile](https://github.com/DioxusLabs/dioxus/tree/master/packages/mobile): A Render that Runs Dioxus applications natively, but renders them with the system webview. This is currently a copy of the desktop render
+- [Web](https://github.com/DioxusLabs/dioxus/tree/master/packages/Web): Renders Dioxus applications in the browser by compiling to WASM and manipulating the DOM
+- [Liveview](https://github.com/DioxusLabs/dioxus/tree/master/packages/liveview): A Render that Runs on the server, and renders using a websocket proxy in the browser
+- [Rink](https://github.com/DioxusLabs/dioxus/tree/master/packages/rink): A Renderer that renders a HTML-like tree into a terminal
+- [TUI](https://github.com/DioxusLabs/dioxus/tree/master/packages/dioxus-tui): A Renderer that uses Rink to render a Dioxus application in a terminal
+- [Blitz-Core](https://github.com/DioxusLabs/blitz/tree/master/blitz-core): An experimental native renderer that renders a HTML-like tree using WGPU.
+- [Blitz](https://github.com/DioxusLabs/blitz): An experimental native renderer that uses Blitz-Core to render a Dioxus application using WGPU.
+- [SSR](https://github.com/DioxusLabs/dioxus/tree/master/packages/ssr): A Render that Runs Dioxus applications on the server, and renders them to HTML
+
+## State Management/Hooks
+
+- [Hooks](https://github.com/DioxusLabs/dioxus/tree/master/packages/hooks): A collection of common hooks for Dioxus applications
+- [Signals](https://github.com/DioxusLabs/dioxus/tree/master/packages/signals): A experimental state management library for Dioxus applications. This currently contains a `Copy` version of UseRef
+- [Dioxus STD](https://github.com/DioxusLabs/dioxus-std): A collection of platform agnostic hooks to interact with system interfaces (The clipboard, camera, etc.).
+- [Fermi](https://github.com/DioxusLabs/dioxus/tree/master/packages/fermi): A global state management library for Dioxus applications.
+  [Router](https://github.com/DioxusLabs/dioxus/tree/master/packages/router): A client-side router for Dioxus applications
+
+## Core utilities
+
+- [core](https://github.com/DioxusLabs/dioxus/tree/master/packages/core): The core virtual dom implementation every Dioxus application uses
+  - You can read more about the archetecture of the core [in this blog post](https://dioxuslabs.com/blog/templates-diffing/) and the [custom renderer section of the guide](../custom_renderer/index.md)
+- [RSX](https://github.com/DioxusLabs/dioxus/tree/master/packages/RSX): The core parsing for RSX used for hot reloading, autoformatting, and the macro
+- [core-macro](https://github.com/DioxusLabs/dioxus/tree/master/packages/core-macro): The rsx! macro used to write Dioxus applications. (This is a wrapper over the RSX crate)
+- [HTML macro](https://github.com/DioxusLabs/dioxus-html-macro): A html-like alternative to the RSX macro
+
+## Native Renderer Utilities
+
+- [native-core](https://github.com/DioxusLabs/dioxus/tree/master/packages/native-core): Incrementally computed tree of states (mostly styles)
+  - You can read more about how native-core can help you build native renderers in the [custom renderer section of the guide](../custom_renderer/index.html#native-core)
+- [native-core-macro](https://github.com/DioxusLabs/dioxus/tree/master/packages/native-core-macro): A helper macro for native core
+- [Taffy](https://github.com/DioxusLabs/taffy): Layout engine powering Blitz-Core, Rink, and Bevy UI
+
+## Web renderer tooling
+
+- [HTML](https://github.com/DioxusLabs/dioxus/tree/master/packages/html): defines html specific elements, events, and attributes
+- [Interpreter](https://github.com/DioxusLabs/dioxus/tree/master/packages/interpreter): defines browser bindings used by the web and desktop renderers
+
+## Developer tooling
+
+- [hot-reload](https://github.com/DioxusLabs/dioxus/tree/master/packages/hot-reload): Macro that uses the RSX crate to hot reload static parts of any rsx! macro. This macro works with any non-web renderer with an [integration](https://crates.io/crates/dioxus-hot-reload)
+- [autofmt](https://github.com/DioxusLabs/dioxus/tree/master/packages/autofmt): Formats RSX code
+- [rsx-rosetta](https://github.com/DioxusLabs/dioxus/tree/master/packages/RSX-rosetta): Handles conversion between HTML and RSX
+- [CLI](https://github.com/DioxusLabs/cli): A Command Line Interface and VSCode extension to assist with Dioxus usage

+ 38 - 34
docs/guide/src/en/roadmap.md → docs/guide/src/en/contributing/roadmap.md

@@ -17,53 +17,55 @@ Generally, here's the status of each platform:
 - **LiveView**: LiveView support is very young. You'll be figuring things out as you go. Thankfully, none of it is too hard and any work can be upstreamed into Dioxus.
 - **LiveView**: LiveView support is very young. You'll be figuring things out as you go. Thankfully, none of it is too hard and any work can be upstreamed into Dioxus.
 
 
 ## Features
 ## Features
+
 ---
 ---
 
 
 | Feature                   | Status | Description                                                          |
 | Feature                   | Status | Description                                                          |
 | ------------------------- | ------ | -------------------------------------------------------------------- |
 | ------------------------- | ------ | -------------------------------------------------------------------- |
-| Conditional Rendering     | ✅      | if/then to hide/show component                                       |
-| Map, Iterator             | ✅      | map/filter/reduce to produce rsx!                                    |
-| Keyed Components          | ✅      | advanced diffing with keys                                           |
-| Web                       | ✅      | renderer for web browser                                             |
-| Desktop (webview)         | ✅      | renderer for desktop                                                 |
-| Shared State (Context)    | ✅      | share state through the tree                                         |
-| Hooks                     | ✅      | memory cells in components                                           |
-| SSR                       | ✅      | render directly to string                                            |
-| Component Children        | ✅      | cx.children() as a list of nodes                                     |
-| Headless components       | ✅      | components that don't return real elements                           |
-| Fragments                 | ✅      | multiple elements without a real root                                |
-| Manual Props              | ✅      | Manually pass in props with spread syntax                            |
-| Controlled Inputs         | ✅      | stateful wrappers around inputs                                      |
-| CSS/Inline Styles         | ✅      | syntax for inline styles/attribute groups                            |
-| Custom elements           | ✅      | Define new element primitives                                        |
-| Suspense                  | ✅      | schedule future render from future/promise                           |
-| Integrated error handling | ✅      | Gracefully handle errors with ? syntax                               |
-| NodeRef                   | ✅      | gain direct access to nodes                                          |
-| Re-hydration              | ✅      | Pre-render to HTML to speed up first contentful paint                |
-| Jank-Free Rendering       | ✅      | Large diffs are segmented across frames for silky-smooth transitions |
-| Effects                   | ✅      | Run effects after a component has been committed to render           |
+| Conditional Rendering     | ✅     | if/then to hide/show component                                       |
+| Map, Iterator             | ✅     | map/filter/reduce to produce rsx!                                    |
+| Keyed Components          | ✅     | advanced diffing with keys                                           |
+| Web                       | ✅     | renderer for web browser                                             |
+| Desktop (webview)         | ✅     | renderer for desktop                                                 |
+| Shared State (Context)    | ✅     | share state through the tree                                         |
+| Hooks                     | ✅     | memory cells in components                                           |
+| SSR                       | ✅     | render directly to string                                            |
+| Component Children        | ✅     | cx.children() as a list of nodes                                     |
+| Headless components       | ✅     | components that don't return real elements                           |
+| Fragments                 | ✅     | multiple elements without a real root                                |
+| Manual Props              | ✅     | Manually pass in props with spread syntax                            |
+| Controlled Inputs         | ✅     | stateful wrappers around inputs                                      |
+| CSS/Inline Styles         | ✅     | syntax for inline styles/attribute groups                            |
+| Custom elements           | ✅     | Define new element primitives                                        |
+| Suspense                  | ✅     | schedule future render from future/promise                           |
+| Integrated error handling | ✅     | Gracefully handle errors with ? syntax                               |
+| NodeRef                   | ✅     | gain direct access to nodes                                          |
+| Re-hydration              | ✅     | Pre-render to HTML to speed up first contentful paint                |
+| Jank-Free Rendering       | ✅     | Large diffs are segmented across frames for silky-smooth transitions |
+| Effects                   | ✅     | Run effects after a component has been committed to render           |
 | Portals                   | 🛠      | Render nodes outside of the traditional tree structure               |
 | Portals                   | 🛠      | Render nodes outside of the traditional tree structure               |
 | Cooperative Scheduling    | 🛠      | Prioritize important events over non-important events                |
 | Cooperative Scheduling    | 🛠      | Prioritize important events over non-important events                |
 | Server Components         | 🛠      | Hybrid components for SPA and Server                                 |
 | Server Components         | 🛠      | Hybrid components for SPA and Server                                 |
-| Bundle Splitting          | 👀      | Efficiently and asynchronously load the app                          |
-| Lazy Components           | 👀      | Dynamically load the new components as the page is loaded            |
-| 1st class global state    | ✅      | redux/recoil/mobx on top of context                                  |
-| Runs natively             | ✅      | runs as a portable binary w/o a runtime (Node)                       |
-| Subtree Memoization       | ✅      | skip diffing static element subtrees                                 |
-| High-efficiency templates | ✅      | rsx! calls are translated to templates on the DOM's side             |
-| Compile-time correct      | ✅      | Throw errors on invalid template layouts                             |
-| Heuristic Engine          | ✅      | track component memory usage to minimize future allocations          |
-| Fine-grained reactivity   | 👀      | Skip diffing for fine-grain updates                                  |
+| Bundle Splitting          | 👀     | Efficiently and asynchronously load the app                          |
+| Lazy Components           | 👀     | Dynamically load the new components as the page is loaded            |
+| 1st class global state    | ✅     | redux/recoil/mobx on top of context                                  |
+| Runs natively             | ✅     | runs as a portable binary w/o a runtime (Node)                       |
+| Subtree Memoization       | ✅     | skip diffing static element subtrees                                 |
+| High-efficiency templates | ✅     | rsx! calls are translated to templates on the DOM's side             |
+| Compile-time correct      | ✅     | Throw errors on invalid template layouts                             |
+| Heuristic Engine          | ✅     | track component memory usage to minimize future allocations          |
+| Fine-grained reactivity   | 👀     | Skip diffing for fine-grain updates                                  |
 
 
 - ✅ = implemented and working
 - ✅ = implemented and working
 - 🛠 = actively being worked on
 - 🛠 = actively being worked on
 - 👀 = not yet implemented or being worked on
 - 👀 = not yet implemented or being worked on
 
 
-
 ## Roadmap
 ## Roadmap
+
 These Features are planned for the future of Dioxus:
 These Features are planned for the future of Dioxus:
 
 
 ### Core
 ### Core
+
 - [x] Release of Dioxus Core
 - [x] Release of Dioxus Core
 - [x] Upgrade documentation to include more theory and be more comprehensive
 - [x] Upgrade documentation to include more theory and be more comprehensive
 - [x] Support for HTML-side templates for lightning-fast dom manipulation
 - [x] Support for HTML-side templates for lightning-fast dom manipulation
@@ -72,16 +74,18 @@ These Features are planned for the future of Dioxus:
 - [ ] Support for Portals
 - [ ] Support for Portals
 
 
 ### SSR
 ### SSR
+
 - [x] SSR Support + Hydration
 - [x] SSR Support + Hydration
 - [ ] Integrated suspense support for SSR
 - [ ] Integrated suspense support for SSR
 
 
 ### Desktop
 ### Desktop
+
 - [ ] Declarative window management
 - [ ] Declarative window management
 - [ ] Templates for building/bundling
 - [ ] Templates for building/bundling
-- [ ] Fully native renderer
 - [ ] Access to Canvas/WebGL context natively
 - [ ] Access to Canvas/WebGL context natively
 
 
 ### Mobile
 ### Mobile
+
 - [ ] Mobile standard library
 - [ ] Mobile standard library
   - [ ] GPS
   - [ ] GPS
   - [ ] Camera
   - [ ] Camera
@@ -92,9 +96,9 @@ These Features are planned for the future of Dioxus:
   - [ ] Notifications
   - [ ] Notifications
   - [ ] Clipboard
   - [ ] Clipboard
 - [ ] Animations
 - [ ] Animations
-- [ ] Native Renderer
 
 
 ### Bundling (CLI)
 ### Bundling (CLI)
+
 - [x] Translation from HTML into RSX
 - [x] Translation from HTML into RSX
 - [x] Dev server
 - [x] Dev server
 - [x] Live reload
 - [x] Live reload
@@ -106,11 +110,11 @@ These Features are planned for the future of Dioxus:
 - [ ] Image pipeline
 - [ ] Image pipeline
 
 
 ### Essential hooks
 ### Essential hooks
+
 - [x] Router
 - [x] Router
 - [x] Global state management
 - [x] Global state management
 - [ ] Resize observer
 - [ ] Resize observer
 
 
-
 ## Work in Progress
 ## Work in Progress
 
 
 ### Build Tool
 ### Build Tool