index.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <!DOCTYPE HTML>
  2. <html lang="en" class="sidebar-visible no-js light">
  3. <head>
  4. <!-- Book generated using mdBook -->
  5. <meta charset="UTF-8">
  6. <title>Contributing</title>
  7. <!-- Custom HTML head -->
  8. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  9. <meta name="description" content="">
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <meta name="theme-color" content="#ffffff" />
  12. <link rel="icon" href="../favicon.svg">
  13. <link rel="shortcut icon" href="../favicon.png">
  14. <link rel="stylesheet" href="../css/variables.css">
  15. <link rel="stylesheet" href="../css/general.css">
  16. <link rel="stylesheet" href="../css/chrome.css">
  17. <link rel="stylesheet" href="../css/print.css" media="print">
  18. <!-- Fonts -->
  19. <link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
  20. <link rel="stylesheet" href="../fonts/fonts.css">
  21. <!-- Highlight.js Stylesheets -->
  22. <link rel="stylesheet" href="../highlight.css">
  23. <link rel="stylesheet" href="../tomorrow-night.css">
  24. <link rel="stylesheet" href="../ayu-highlight.css">
  25. <!-- Custom theme stylesheets -->
  26. <!-- MathJax -->
  27. <script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  28. </head>
  29. <body>
  30. <!-- Provide site root to javascript -->
  31. <script type="text/javascript">
  32. var path_to_root = "../";
  33. var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
  34. </script>
  35. <!-- Work around some values being stored in localStorage wrapped in quotes -->
  36. <script type="text/javascript">
  37. try {
  38. var theme = localStorage.getItem('mdbook-theme');
  39. var sidebar = localStorage.getItem('mdbook-sidebar');
  40. if (theme.startsWith('"') && theme.endsWith('"')) {
  41. localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
  42. }
  43. if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
  44. localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
  45. }
  46. } catch (e) { }
  47. </script>
  48. <!-- Set the theme before any content is loaded, prevents flash -->
  49. <script type="text/javascript">
  50. var theme;
  51. try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
  52. if (theme === null || theme === undefined) { theme = default_theme; }
  53. var html = document.querySelector('html');
  54. html.classList.remove('no-js')
  55. html.classList.remove('light')
  56. html.classList.add(theme);
  57. html.classList.add('js');
  58. </script>
  59. <!-- Hide / unhide sidebar before it is displayed -->
  60. <script type="text/javascript">
  61. var html = document.querySelector('html');
  62. var sidebar = 'hidden';
  63. if (document.body.clientWidth >= 1080) {
  64. try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
  65. sidebar = sidebar || 'visible';
  66. }
  67. html.classList.remove('sidebar-visible');
  68. html.classList.add("sidebar-" + sidebar);
  69. </script>
  70. <nav id="sidebar" class="sidebar" aria-label="Table of contents">
  71. <div class="sidebar-scrollbox">
  72. <ol class="chapter"><li class="chapter-item expanded affix "><a href="../index.html">Introduction</a></li><li class="chapter-item expanded "><a href="../getting_started/index.html"><strong aria-hidden="true">1.</strong> Getting Started</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../getting_started/desktop.html"><strong aria-hidden="true">1.1.</strong> Desktop</a></li><li class="chapter-item expanded "><a href="../getting_started/web.html"><strong aria-hidden="true">1.2.</strong> Web</a></li><li class="chapter-item expanded "><a href="../getting_started/ssr.html"><strong aria-hidden="true">1.3.</strong> Server-Side Rendering</a></li><li class="chapter-item expanded "><a href="../getting_started/fullstack.html"><strong aria-hidden="true">1.4.</strong> Fullstack</a></li><li class="chapter-item expanded "><a href="../getting_started/liveview.html"><strong aria-hidden="true">1.5.</strong> Liveview</a></li><li class="chapter-item expanded "><a href="../getting_started/tui.html"><strong aria-hidden="true">1.6.</strong> Terminal UI</a></li><li class="chapter-item expanded "><a href="../getting_started/mobile.html"><strong aria-hidden="true">1.7.</strong> Mobile</a></li><li class="chapter-item expanded "><a href="../getting_started/hot_reload.html"><strong aria-hidden="true">1.8.</strong> Hot Reloading</a></li></ol></li><li class="chapter-item expanded "><a href="../describing_ui/index.html"><strong aria-hidden="true">2.</strong> Describing the UI</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../describing_ui/special_attributes.html"><strong aria-hidden="true">2.1.</strong> Special Attributes</a></li><li class="chapter-item expanded "><a href="../describing_ui/components.html"><strong aria-hidden="true">2.2.</strong> Components</a></li><li class="chapter-item expanded "><a href="../describing_ui/component_props.html"><strong aria-hidden="true">2.3.</strong> Props</a></li><li class="chapter-item expanded "><a href="../describing_ui/component_children.html"><strong aria-hidden="true">2.4.</strong> Component Children</a></li></ol></li><li class="chapter-item expanded "><a href="../interactivity/index.html"><strong aria-hidden="true">3.</strong> Interactivity</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../interactivity/event_handlers.html"><strong aria-hidden="true">3.1.</strong> Event Listeners</a></li><li class="chapter-item expanded "><a href="../interactivity/hooks.html"><strong aria-hidden="true">3.2.</strong> Hooks &amp; Component State</a></li><li class="chapter-item expanded "><a href="../interactivity/user_input.html"><strong aria-hidden="true">3.3.</strong> User Input</a></li><li class="chapter-item expanded "><a href="../interactivity/sharing_state.html"><strong aria-hidden="true">3.4.</strong> Sharing State</a></li><li class="chapter-item expanded "><a href="../interactivity/custom_hooks.html"><strong aria-hidden="true">3.5.</strong> Custom Hooks</a></li><li class="chapter-item expanded "><a href="../interactivity/dynamic_rendering.html"><strong aria-hidden="true">3.6.</strong> Dynamic Rendering</a></li><li class="chapter-item expanded "><a href="../interactivity/router.html"><strong aria-hidden="true">3.7.</strong> Routing</a></li></ol></li><li class="chapter-item expanded "><a href="../async/index.html"><strong aria-hidden="true">4.</strong> Async</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../async/use_future.html"><strong aria-hidden="true">4.1.</strong> UseFuture</a></li><li class="chapter-item expanded "><a href="../async/use_coroutine.html"><strong aria-hidden="true">4.2.</strong> UseCoroutine</a></li><li class="chapter-item expanded "><a href="../async/spawn.html"><strong aria-hidden="true">4.3.</strong> Spawning Futures</a></li></ol></li><li class="chapter-item expanded "><a href="../best_practices/index.html"><strong aria-hidden="true">5.</strong> Best Practices</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../best_practices/error_handling.html"><strong aria-hidden="true">5.1.</strong> Error Handling</a></li><li class="chapter-item expanded "><a href="../best_practices/antipatterns.html"><strong aria-hidden="true">5.2.</strong> Antipatterns</a></li></ol></li><li class="chapter-item expanded "><a href="../publishing/index.html"><strong aria-hidden="true">6.</strong> Publishing</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../publishing/desktop.html"><strong aria-hidden="true">6.1.</strong> Desktop</a></li><li class="chapter-item expanded "><a href="../publishing/web.html"><strong aria-hidden="true">6.2.</strong> Web</a></li><li class="spacer"></li></ol></li><li class="chapter-item expanded "><a href="../fullstack/index.html"><strong aria-hidden="true">7.</strong> Fullstack</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fullstack/getting_started.html"><strong aria-hidden="true">7.1.</strong> Getting Started</a></li><li class="chapter-item expanded "><a href="../fullstack/server_functions.html"><strong aria-hidden="true">7.2.</strong> Communicating with the Server</a></li><li class="spacer"></li></ol></li><li class="chapter-item expanded "><a href="../custom_renderer/index.html"><strong aria-hidden="true">8.</strong> Custom Renderer</a></li><li class="spacer"></li><li class="chapter-item expanded "><a href="../contributing/index.html" class="active"><strong aria-hidden="true">9.</strong> Contributing</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../contributing/project_structure.html"><strong aria-hidden="true">9.1.</strong> Project Structure</a></li><li class="chapter-item expanded "><a href="../contributing/walkthrough_readme.html"><strong aria-hidden="true">9.2.</strong> Walkthrough of Internals</a></li><li class="chapter-item expanded "><a href="../contributing/guiding_principles.html"><strong aria-hidden="true">9.3.</strong> Guiding Principles</a></li><li class="chapter-item expanded "><a href="../contributing/roadmap.html"><strong aria-hidden="true">9.4.</strong> Roadmap</a></li></ol></li></ol>
  73. </div>
  74. <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
  75. </nav>
  76. <div id="page-wrapper" class="page-wrapper">
  77. <div class="page">
  78. <div id="menu-bar-hover-placeholder"></div>
  79. <div id="menu-bar" class="menu-bar sticky bordered">
  80. <div class="left-buttons">
  81. <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
  82. <i class="fa fa-bars"></i>
  83. </button>
  84. <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
  85. <i class="fa fa-paint-brush"></i>
  86. </button>
  87. <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
  88. <li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
  89. <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
  90. <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
  91. <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
  92. <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
  93. </ul>
  94. <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
  95. <i class="fa fa-search"></i>
  96. </button>
  97. <button id="language-toggle" class="icon-button" type="button" title="Select language" aria-label="Select language" aria-haspopup="true" aria-expanded="false" aria-controls="language-list">
  98. <i class="fa fa-globe"></i>
  99. </button>
  100. <ul id="language-list" class="language-popup" aria-label="Languages" role="menu">
  101. <li role="none"><a href="../../en/contributing/index.html"><button role="menuitem" class="language" id="light">English</button></a></li>
  102. <li role="none"><a href="../../pt-br/contributing/index.html"><button role="menuitem" class="language" id="light">Português Brasileiro</button></a></li>
  103. </ul>
  104. </div>
  105. <h1 class="menu-title"></h1>
  106. <div class="right-buttons">
  107. <a href="../print.html" title="Print this book" aria-label="Print this book">
  108. <i id="print-button" class="fa fa-print"></i>
  109. </a>
  110. <a href="https://github.com/DioxusLabs/dioxus/edit/master/docs/guide" title="Git repository" aria-label="Git repository">
  111. <i id="git-repository-button" class="fa fa-github"></i>
  112. </a>
  113. <a href="https://github.com/DioxusLabs/dioxus/edit/master/docs/guide/src/contributing/index.md" title="Suggest an edit" aria-label="Suggest an edit">
  114. <i id="git-edit-button" class="fa fa-edit"></i>
  115. </a>
  116. </div>
  117. </div>
  118. <div id="search-wrapper" class="hidden">
  119. <form id="searchbar-outer" class="searchbar-outer">
  120. <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
  121. </form>
  122. <div id="searchresults-outer" class="searchresults-outer hidden">
  123. <div id="searchresults-header" class="searchresults-header"></div>
  124. <ul id="searchresults">
  125. </ul>
  126. </div>
  127. </div>
  128. <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
  129. <script type="text/javascript">
  130. document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
  131. document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
  132. Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
  133. link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
  134. });
  135. </script>
  136. <div id="content" class="content">
  137. <main>
  138. <h1 id="contributing"><a class="header" href="#contributing">Contributing</a></h1>
  139. <p>Development happens in the <a href="https://github.com/DioxusLabs/dioxus">Dioxus GitHub repository</a>. If you've found a bug or have an idea for a feature, please submit an issue (but first check if someone hasn't <a href="https://github.com/DioxusLabs/dioxus/issues">done it already</a>).</p>
  140. <p><a href="https://github.com/DioxusLabs/dioxus/discussions">GitHub discussions</a> can be used as a place to ask for help or talk about features. You can also join <a href="https://discord.gg/XgGxMSkvUM">our Discord channel</a> where some development discussion happens.</p>
  141. <h2 id="improving-docs"><a class="header" href="#improving-docs">Improving Docs</a></h2>
  142. <p>If you'd like to improve the docs, PRs are welcome! Both Rust docs (<a href="https://github.com/DioxusLabs/dioxus/tree/master/packages">source</a>) and this guide (<a href="https://github.com/DioxusLabs/dioxus/tree/master/docs/guide">source</a>) can be found in the GitHub repo.</p>
  143. <h2 id="working-on-the-ecosystem"><a class="header" href="#working-on-the-ecosystem">Working on the Ecosystem</a></h2>
  144. <p>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 <a href="https://www.npmjs.com/search?q=keywords:react-component">browse npm.js</a> for inspiration. Once you are done, add your library to the <a href="https://github.com/DioxusLabs/awesome-dioxus">awesome dioxus</a> list or share it in the <code>#I-made-a-thing</code> channel on <a href="https://discord.gg/XgGxMSkvUM">Discord</a>.</p>
  145. <h2 id="bugs--features"><a class="header" href="#bugs--features">Bugs &amp; Features</a></h2>
  146. <p>If you've fixed <a href="https://github.com/DioxusLabs/dioxus/issues">an open issue</a>, feel free to submit a PR! You can also take a look at <a href="./roadmap.html">the roadmap</a> and work on something in there. Consider <a href="https://discord.gg/XgGxMSkvUM">reaching out</a> to the team first to make sure everyone's on the same page, and you don't do useless work!</p>
  147. <p>All pull requests (including those made by a team member) must be approved by at least one other team member.
  148. Larger, more nuanced decisions about design, architecture, breaking changes, trade-offs, etc. are made by team consensus.</p>
  149. <h2 id="tools"><a class="header" href="#tools">Tools</a></h2>
  150. <p>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.</p>
  151. <ul>
  152. <li>All code is tested with <a href="https://doc.rust-lang.org/cargo/commands/cargo-test.html">cargo test</a></li>
  153. </ul>
  154. <pre><code class="language-sh">cargo fmt --all
  155. </code></pre>
  156. <ul>
  157. <li>All code is formatted with <a href="https://github.com/rust-lang/rustfmt">rustfmt</a></li>
  158. </ul>
  159. <pre><code class="language-sh">cargo check --workspace --examples --tests
  160. </code></pre>
  161. <ul>
  162. <li>All code is linted with <a href="https://doc.rust-lang.org/clippy/">Clippy</a></li>
  163. </ul>
  164. <pre><code class="language-sh">cargo clippy --workspace --examples --tests -- -D warnings
  165. </code></pre>
  166. <ul>
  167. <li>Crates that use unsafe are checked for undefined behavior with <a href="https://github.com/rust-lang/miri">MIRI</a>. 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 <code>dioxus-core</code> and <code>dioxus-native-core</code>.</li>
  168. </ul>
  169. <pre><code class="language-sh">cargo miri test --package dioxus-core --test miri_stress
  170. cargo miri test --package dioxus-native-core --test miri_native
  171. </code></pre>
  172. <ul>
  173. <li><a href="https://rust-analyzer.github.io/">Rust analyzer</a> can be very helpful for quick feedback in your IDE.</li>
  174. </ul>
  175. </main>
  176. <nav class="nav-wrapper" aria-label="Page navigation">
  177. <!-- Mobile navigation buttons -->
  178. <a rel="prev" href="../custom_renderer/index.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
  179. <i class="fa fa-angle-left"></i>
  180. </a>
  181. <a rel="next" href="../contributing/project_structure.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
  182. <i class="fa fa-angle-right"></i>
  183. </a>
  184. <div style="clear: both"></div>
  185. </nav>
  186. </div>
  187. </div>
  188. <nav class="nav-wide-wrapper" aria-label="Page navigation">
  189. <a rel="prev" href="../custom_renderer/index.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
  190. <i class="fa fa-angle-left"></i>
  191. </a>
  192. <a rel="next" href="../contributing/project_structure.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
  193. <i class="fa fa-angle-right"></i>
  194. </a>
  195. </nav>
  196. </div>
  197. <script type="text/javascript">
  198. window.playground_line_numbers = true;
  199. </script>
  200. <script type="text/javascript">
  201. window.playground_copyable = true;
  202. </script>
  203. <script src="../ace.js" type="text/javascript" charset="utf-8"></script>
  204. <script src="../editor.js" type="text/javascript" charset="utf-8"></script>
  205. <script src="../mode-rust.js" type="text/javascript" charset="utf-8"></script>
  206. <script src="../theme-dawn.js" type="text/javascript" charset="utf-8"></script>
  207. <script src="../theme-tomorrow_night.js" type="text/javascript" charset="utf-8"></script>
  208. <script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
  209. <script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
  210. <script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
  211. <script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
  212. <script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
  213. <script src="../book.js" type="text/javascript" charset="utf-8"></script>
  214. <!-- Custom JS scripts -->
  215. </body>
  216. </html>