Skip to content

Commit

Permalink
Deploying to gh-pages from @ e535eac 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@ealmloff
ealmloff committed Sep 11, 2023
1 parent bd7b42b commit aba9563
Show file tree
Hide file tree
Showing 7 changed files with 180 additions and 181 deletions.
309 changes: 154 additions & 155 deletions assets/dioxus/docsite.js
View file

Large diffs are not rendered by default.

Binary file modified assets/dioxus/docsite_bg.wasm
View file
Binary file not shown.
30 changes: 15 additions & 15 deletions assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,19 +163,7 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
function truthy(val) {
return val === "true" || val === true;
}
const evt = [];
let evt_tmp1, evt_tmp2;
function get_evt() {
evt_tmp2 = u8buf[u8bufp++];
if(evt_tmp2 & 128){
evt_tmp1=s.substring(sp,sp+=u8buf[u8bufp++]);
evt[evt_tmp2&4294967167]=evt_tmp1;
return evt_tmp1;
}
else{
return evt[evt_tmp2&4294967167];
}
}const ns_cache = [];
const ns_cache = [];
let ns_cache_tmp1, ns_cache_tmp2;
function get_ns_cache() {
ns_cache_tmp2 = u8buf[u8bufp++];
Expand All @@ -187,6 +175,18 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
else{
return ns_cache[ns_cache_tmp2&4294967167];
}
}let u8buf,u8bufp;let u32buf,u32bufp;let s = "";let lsp,sp,sl; let c = new TextDecoder();const evt = [];
let evt_tmp1, evt_tmp2;
function get_evt() {
evt_tmp2 = u8buf[u8bufp++];
if(evt_tmp2 & 128){
evt_tmp1=s.substring(sp,sp+=u8buf[u8bufp++]);
evt[evt_tmp2&4294967167]=evt_tmp1;
return evt_tmp1;
}
else{
return evt[evt_tmp2&4294967167];
}
}const attr = [];
let attr_tmp1, attr_tmp2;
function get_attr() {
Expand All @@ -199,8 +199,8 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
else{
return attr[attr_tmp2&4294967167];
}
}let u8buf,u8bufp;let u32buf,u32bufp;let s = "";let lsp,sp,sl; let c = new TextDecoder();
let event_name,ptr,bubbles,id,len,field,ns,value;
}
let id,field,event_name,value,ptr,bubbles,len,ns;
export function create(r){
d=r;
}
Expand Down
4 changes: 2 additions & 2 deletions learn/0.4/guide/state/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@
</span><span style="color:#c0c5ce;"> }
</span><span style="color:#c0c5ce;">}
</span></pre>
</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;"><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0 points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/10/23 1:39 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0 comments<!--#--></div></div></div></div><div style="width:50%;">Hover over a story to preview it here</div></div></div><h2 id="event-handlers"><a class="header" href="#event-handlers">Event Handlers</a></h2><p>Next, we need to detect when the user hovers over a section or focuses a link. We can use an <a href="../reference/event_handlers">event listener</a> to listen for the hover and focus events.</p><p>Event handlers are similar to regular attributes, but their name usually starts with <code>on</code>- and they accept closures as values. The closure will be called whenever the event it listens for is triggered. When an event is triggered, information about the event is passed to the closure though the <a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.Event.html">Event</a> structure.</p><p>Let&#x27;s create a <a href="https://docs.rs/dioxus/latest/dioxus/events/fn.onmouseenter.html"><code>onmouseenter</code></a> event listener in the StoryListing component:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;"><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0 points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/11/23 5:19 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0 comments<!--#--></div></div></div></div><div style="width:50%;">Hover over a story to preview it here</div></div></div><h2 id="event-handlers"><a class="header" href="#event-handlers">Event Handlers</a></h2><p>Next, we need to detect when the user hovers over a section or focuses a link. We can use an <a href="../reference/event_handlers">event listener</a> to listen for the hover and focus events.</p><p>Event handlers are similar to regular attributes, but their name usually starts with <code>on</code>- and they accept closures as values. The closure will be called whenever the event it listens for is triggered. When an event is triggered, information about the event is passed to the closure though the <a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.Event.html">Event</a> structure.</p><p>Let&#x27;s create a <a href="https://docs.rs/dioxus/latest/dioxus/events/fn.onmouseenter.html"><code>onmouseenter</code></a> event listener in the StoryListing component:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
<span style="color:#c0c5ce;">cx.</span><span style="color:#96b5b4;">render</span><span style="color:#c0c5ce;">(rsx! {
</span><span style="color:#c0c5ce;"> div {
</span><span style="color:#c0c5ce;"> padding: &quot;</span><span style="color:#a3be8c;">0.5rem</span><span style="color:#c0c5ce;">&quot;,
Expand Down Expand Up @@ -332,7 +332,7 @@
</span><span style="color:#c0c5ce;"> </span><span style="color:#65737e;">// New
</span><span style="color:#c0c5ce;"> </span><span style="color:#b48ead;">match </span><span style="color:#c0c5ce;">&amp;*preview_state.</span><span style="color:#96b5b4;">read</span><span style="color:#c0c5ce;">() {
</span></pre>
</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;"><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0 points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/10/23 1:39 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0 comments<!--#--></div></div></div></div><div style="width:50%;">Hover over a story to preview it here</div></div></div><blockquote><p>You can read more about Hooks in the <a href="../reference/hooks">Hooks reference</a></p></blockquote><h3 id="the-rules-of-hooks"><a class="header" href="#the-rules-of-hooks">The Rules of Hooks</a></h3><p>Hooks are a powerful way to manage state in Dioxus, but there are some rules you need to follow to insure they work as expected. Dioxus uses the order you call hooks to differentiate between hooks. Because the order you call hooks matters, you must follow these rules:</p><ol><li>Hooks may be only used in components or other hooks (we&#x27;ll get to that later)</li><li>On every call to the component function<ol><li>The same hooks must be called</li><li>In the same order</li></ol></li><li>Hooks name&#x27;s should start with use_ so you don&#x27;t accidentally confuse them with regular functions</li></ol><p>These rules mean that there are certain things you can&#x27;t do with hooks:</p><h4 id="no-hooks-in-conditionals"><a class="header" href="#no-hooks-in-conditionals">No Hooks in Conditionals</a></h4><div style="position: relative;"><div><pre style="background-color:#2b303b;">
</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;"><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0 points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/11/23 5:19 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0 comments<!--#--></div></div></div></div><div style="width:50%;">Hover over a story to preview it here</div></div></div><blockquote><p>You can read more about Hooks in the <a href="../reference/hooks">Hooks reference</a></p></blockquote><h3 id="the-rules-of-hooks"><a class="header" href="#the-rules-of-hooks">The Rules of Hooks</a></h3><p>Hooks are a powerful way to manage state in Dioxus, but there are some rules you need to follow to insure they work as expected. Dioxus uses the order you call hooks to differentiate between hooks. Because the order you call hooks matters, you must follow these rules:</p><ol><li>Hooks may be only used in components or other hooks (we&#x27;ll get to that later)</li><li>On every call to the component function<ol><li>The same hooks must be called</li><li>In the same order</li></ol></li><li>Hooks name&#x27;s should start with use_ so you don&#x27;t accidentally confuse them with regular functions</li></ol><p>These rules mean that there are certain things you can&#x27;t do with hooks:</p><h4 id="no-hooks-in-conditionals"><a class="header" href="#no-hooks-in-conditionals">No Hooks in Conditionals</a></h4><div style="position: relative;"><div><pre style="background-color:#2b303b;">
<span style="color:#65737e;">// ❌ don&#39;t call hooks in conditionals!
</span><span style="color:#65737e;">// We must ensure that the same hooks will be called every time
</span><span style="color:#65737e;">// But `if` statements only run if the conditional is true!
Expand Down
Loading

0 comments on commit aba9563

Please sign in to comment.