Skip to content

Commit

Permalink
Deploying to gh-pages from @ c360d35 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@ealmloff
ealmloff committed Oct 10, 2023
1 parent 6ecd953 commit 881cc5f
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 36 deletions.
Binary file modified assets/dioxus/docsite_bg.wasm
View file
Binary file not shown.
54 changes: 27 additions & 27 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,19 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
function truthy(val) {
return val === "true" || val === true;
}
const ns_cache = [];
let ns_cache_tmp1, ns_cache_tmp2;
function get_ns_cache() {
ns_cache_tmp2 = u8buf[u8bufp++];
if(ns_cache_tmp2 & 128){
ns_cache_tmp1=s.substring(sp,sp+=u8buf[u8bufp++]);
ns_cache[ns_cache_tmp2&4294967167]=ns_cache_tmp1;
return ns_cache_tmp1;
const attr = [];
let attr_tmp1, attr_tmp2;
function get_attr() {
attr_tmp2 = u8buf[u8bufp++];
if(attr_tmp2 & 128){
attr_tmp1=s.substring(sp,sp+=u8buf[u8bufp++]);
attr[attr_tmp2&4294967167]=attr_tmp1;
return attr_tmp1;
}
else{
return ns_cache[ns_cache_tmp2&4294967167];
return attr[attr_tmp2&4294967167];
}
}let u8buf,u8bufp;const evt = [];
}let u32buf,u32bufp;const evt = [];
let evt_tmp1, evt_tmp2;
function get_evt() {
evt_tmp2 = u8buf[u8bufp++];
Expand All @@ -187,20 +187,20 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
else{
return evt[evt_tmp2&4294967167];
}
}let s = "";let lsp,sp,sl; let c = new TextDecoder();let u32buf,u32bufp;const attr = [];
let attr_tmp1, attr_tmp2;
function get_attr() {
attr_tmp2 = u8buf[u8bufp++];
if(attr_tmp2 & 128){
attr_tmp1=s.substring(sp,sp+=u8buf[u8bufp++]);
attr[attr_tmp2&4294967167]=attr_tmp1;
return attr_tmp1;
}const ns_cache = [];
let ns_cache_tmp1, ns_cache_tmp2;
function get_ns_cache() {
ns_cache_tmp2 = u8buf[u8bufp++];
if(ns_cache_tmp2 & 128){
ns_cache_tmp1=s.substring(sp,sp+=u8buf[u8bufp++]);
ns_cache[ns_cache_tmp2&4294967167]=ns_cache_tmp1;
return ns_cache_tmp1;
}
else{
return attr[attr_tmp2&4294967167];
return ns_cache[ns_cache_tmp2&4294967167];
}
}
let id,bubbles,value,event_name,field,ns,ptr,len;
}let s = "";let lsp,sp,sl; let c = new TextDecoder();let u8buf,u8bufp;
let len,bubbles,ptr,ns,id,field,value,event_name;
export function create(r){
d=r;
}
Expand All @@ -213,10 +213,10 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
ls=m.getUint32(d+12*4,true);
}
p=ls;
if ((metaflags>>>5)&1){
u8buf=new Uint8Array(m.buffer,m.getUint32(d+5*4,true))
if ((metaflags>>>3)&1){
u32buf=new Uint32Array(m.buffer,m.getUint32(d+3*4,true))
}
u8bufp=0;if (metaflags&1){
u32bufp=0;if (metaflags&1){
lsp = m.getUint32(d+1*4,true);
}
if ((metaflags>>>2)&1) {
Expand All @@ -242,10 +242,10 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
s = c.decode(new DataView(m.buffer, lsp, sl));
}
}
sp=0;if ((metaflags>>>3)&1){
u32buf=new Uint32Array(m.buffer,m.getUint32(d+3*4,true))
sp=0;if ((metaflags>>>5)&1){
u8buf=new Uint8Array(m.buffer,m.getUint32(d+5*4,true))
}
u32bufp=0;
u8bufp=0;
for(;;){
op=m.getUint32(p,true);
p+=4;
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 @@ -237,7 +237,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;"><!--#-->10/10/23 6:18 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;"><!--#-->10/10/23 7:08 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 @@ -353,7 +353,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;"><!--#-->10/10/23 6:18 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;"><!--#-->10/10/23 7:08 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 881cc5f

Please sign in to comment.