diff --git a/assets/dioxus/docsite.js b/assets/dioxus/docsite.js index de4e6699a..f4c55a310 100644 --- a/assets/dioxus/docsite.js +++ b/assets/dioxus/docsite.js @@ -266,7 +266,7 @@ function logError(f, args) { function __wbg_adapter_48(arg0, arg1) { _assertNum(arg0); _assertNum(arg1); - wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb24d818a2e65a0c3(arg0, arg1); + wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h67aae8f6eec8f17a(arg0, arg1); } let stack_pointer = 128; @@ -280,7 +280,7 @@ function __wbg_adapter_51(arg0, arg1, arg2) { try { _assertNum(arg0); _assertNum(arg1); - wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he90adf2f78a3eca3(arg0, arg1, addBorrowedObject(arg2)); + wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd6339e3ea86b22a1(arg0, arg1, addBorrowedObject(arg2)); } finally { heap[stack_pointer++] = undefined; } @@ -310,7 +310,7 @@ function makeClosure(arg0, arg1, dtor, f) { function __wbg_adapter_54(arg0, arg1, arg2) { _assertNum(arg0); _assertNum(arg1); - wasm._dyn_core__ops__function__Fn__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hac842e0319ca3674(arg0, arg1, addHeapObject(arg2)); + wasm._dyn_core__ops__function__Fn__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h54c58c682ac69b02(arg0, arg1, addHeapObject(arg2)); } function __wbg_adapter_57(arg0, arg1) { @@ -551,15 +551,10 @@ imports.wbg.__wbg_setstars_0ba69a7b1e51f35a = function() { return logError(funct if (arg0 !== 0) { wasm.__wbindgen_free(arg0, arg1); } set_stars(v0, arg2 >>> 0); }, arguments) }; -imports.wbg.__wbg_fetch_381efb5e862610fa = function() { return logError(function (arg0) { +imports.wbg.__wbg_fetch_b5d6bebed1e6c2d2 = function() { return logError(function (arg0) { const ret = fetch(getObject(arg0)); return addHeapObject(ret); }, arguments) }; -imports.wbg.__wbindgen_is_string = function(arg0) { - const ret = typeof(getObject(arg0)) === 'string'; - _assertBoolean(ret); - return ret; -}; imports.wbg.__wbindgen_number_new = function(arg0) { const ret = arg0; return addHeapObject(ret); @@ -582,6 +577,11 @@ imports.wbg.__wbindgen_cb_drop = function(arg0) { _assertBoolean(ret); return ret; }; +imports.wbg.__wbindgen_is_string = function(arg0) { + const ret = typeof(getObject(arg0)) === 'string'; + _assertBoolean(ret); + return ret; +}; imports.wbg.__wbindgen_jsval_loose_eq = function(arg0, arg1) { const ret = getObject(arg0) == getObject(arg1); _assertBoolean(ret); @@ -1514,24 +1514,24 @@ imports.wbg.__wbindgen_closure_wrapper574 = function() { return logError(functio const ret = makeMutClosure(arg0, arg1, 107, __wbg_adapter_51); return addHeapObject(ret); }, arguments) }; -imports.wbg.__wbindgen_closure_wrapper5924 = function() { return logError(function (arg0, arg1, arg2) { - const ret = makeClosure(arg0, arg1, 1683, __wbg_adapter_54); +imports.wbg.__wbindgen_closure_wrapper5900 = function() { return logError(function (arg0, arg1, arg2) { + const ret = makeClosure(arg0, arg1, 1674, __wbg_adapter_54); return addHeapObject(ret); }, arguments) }; -imports.wbg.__wbindgen_closure_wrapper5983 = function() { return logError(function (arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 1705, __wbg_adapter_57); +imports.wbg.__wbindgen_closure_wrapper5961 = function() { return logError(function (arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 1696, __wbg_adapter_57); return addHeapObject(ret); }, arguments) }; -imports.wbg.__wbindgen_closure_wrapper6008 = function() { return logError(function (arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 1713, __wbg_adapter_60); +imports.wbg.__wbindgen_closure_wrapper5986 = function() { return logError(function (arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 1704, __wbg_adapter_60); return addHeapObject(ret); }, arguments) }; -imports.wbg.__wbindgen_closure_wrapper6023 = function() { return logError(function (arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 1724, __wbg_adapter_63); +imports.wbg.__wbindgen_closure_wrapper6001 = function() { return logError(function (arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 1715, __wbg_adapter_63); return addHeapObject(ret); }, arguments) }; -imports.wbg.__wbindgen_closure_wrapper6266 = function() { return logError(function (arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 1803, __wbg_adapter_66); +imports.wbg.__wbindgen_closure_wrapper6244 = function() { return logError(function (arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 1794, __wbg_adapter_66); return addHeapObject(ret); }, arguments) }; imports['./snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js'] = __wbg_star0; diff --git a/assets/dioxus/docsite_bg.wasm b/assets/dioxus/docsite_bg.wasm index f36c8abf3..2e809b2c3 100644 Binary files a/assets/dioxus/docsite_bg.wasm and b/assets/dioxus/docsite_bg.wasm differ diff --git a/assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js b/assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js index e7e5dff83..0d26aeb5b 100644 --- a/assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js +++ b/assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js @@ -163,19 +163,7 @@ let m,p,ls,d,t,op,i,e,z,metaflags; function truthy(val) { return val === "true" || val === true; } - let s = "";let lsp,sp,sl; let c = new TextDecoder();let u32buf,u32bufp;let u8buf,u8bufp;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++]; @@ -187,6 +175,18 @@ let m,p,ls,d,t,op,i,e,z,metaflags; else{ return ns_cache[ns_cache_tmp2&4294967167]; } + }let u32buf,u32bufp;let u8buf,u8bufp;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() { @@ -200,7 +200,7 @@ let m,p,ls,d,t,op,i,e,z,metaflags; return attr[attr_tmp2&4294967167]; } } - let event_name,id,field,bubbles,value,ns,ptr,len; + let event_name,len,ns,field,ptr,value,id,bubbles; export function create(r){ d=r; } @@ -213,7 +213,13 @@ let m,p,ls,d,t,op,i,e,z,metaflags; ls=m.getUint32(d+12*4,true); } p=ls; - if (metaflags&1){ + if ((metaflags>>>3)&1){ + u32buf=new Uint32Array(m.buffer,m.getUint32(d+3*4,true)) + } + u32bufp=0;if ((metaflags>>>5)&1){ + u8buf=new Uint8Array(m.buffer,m.getUint32(d+5*4,true)) + } + u8bufp=0;if (metaflags&1){ lsp = m.getUint32(d+1*4,true); } if ((metaflags>>>2)&1) { @@ -239,13 +245,7 @@ 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)) - } - u32bufp=0;if ((metaflags>>>5)&1){ - u8buf=new Uint8Array(m.buffer,m.getUint32(d+5*4,true)) - } - u8bufp=0; + sp=0; for(;;){ op=m.getUint32(p,true); p+=4; diff --git a/learn/0.4/getting_started/mobile/index.html b/learn/0.4/getting_started/mobile/index.html index 923efd1f4..2a8677201 100644 --- a/learn/0.4/getting_started/mobile/index.html +++ b/learn/0.4/getting_started/mobile/index.html @@ -153,8 +153,8 @@ cargo new dioxus-mobile-test cd dioxus-mobile-test -

Next, we can use tauri-mobile to create a project for mobile:

-cargo install --git https://github.com/tauri-apps/tauri-mobile
+

Next, we can use cargo-mobile2 to create a project for mobile:

+cargo install --git https://github.com/tauri-apps/cargo-mobile2
 cargo mobile init
 

When you run cargo mobile init, you will be asked a series of questions about your project. One of those questions is what template you should use. Dioxus currently doesn't have a template in Tauri mobile, instead you can use the wry template.

You may also be asked to input your team ID for IOS. You can find your team id here or create a team id by creating a developer account here

Next, we need to modify our dependencies to include dioxus:

diff --git a/learn/0.4/guide/state/index.html b/learn/0.4/guide/state/index.html
index 3de244185..f5bd236e7 100644
--- a/learn/0.4/guide/state/index.html
+++ b/learn/0.4/guide/state/index.html
@@ -216,7 +216,7 @@
     }
 }
 
-
hello hackernews ()
0 points
by Author
10/01/23 1:08 AM
0 comments
Hover over a story to preview it here

Event Handlers

Next, we need to detect when the user hovers over a section or focuses a link. We can use an event listener to listen for the hover and focus events.

Event handlers are similar to regular attributes, but their name usually starts with on- 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 Event structure.

Let's create a onmouseenter event listener in the StoryListing component:

+
hello hackernews ()
0 points
by Author
10/04/23 1:46 PM
0 comments
Hover over a story to preview it here

Event Handlers

Next, we need to detect when the user hovers over a section or focuses a link. We can use an event listener to listen for the hover and focus events.

Event handlers are similar to regular attributes, but their name usually starts with on- 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 Event structure.

Let's create a onmouseenter event listener in the StoryListing component:

 cx.render(rsx! {
     div {
         padding: "0.5rem",
@@ -332,7 +332,7 @@
     // New
     match &*preview_state.read() {
 
-
hello hackernews ()
0 points
by Author
10/01/23 1:08 AM
0 comments
Hover over a story to preview it here

You can read more about Hooks in the Hooks reference

The Rules of Hooks

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:

  1. Hooks may be only used in components or other hooks (we'll get to that later)
  2. On every call to the component function
    1. The same hooks must be called
    2. In the same order
  3. Hooks name's should start with use_ so you don't accidentally confuse them with regular functions

These rules mean that there are certain things you can't do with hooks:

No Hooks in Conditionals

+
hello hackernews ()
0 points
by Author
10/04/23 1:46 PM
0 comments
Hover over a story to preview it here

You can read more about Hooks in the Hooks reference

The Rules of Hooks

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:

  1. Hooks may be only used in components or other hooks (we'll get to that later)
  2. On every call to the component function
    1. The same hooks must be called
    2. In the same order
  3. Hooks name's should start with use_ so you don't accidentally confuse them with regular functions

These rules mean that there are certain things you can't do with hooks:

No Hooks in Conditionals

 // ❌ don't call hooks in conditionals!
 // We must ensure that the same hooks will be called every time
 // But `if` statements only run if the conditional is true!
diff --git a/learn/0.4/guide/your_first_component/index.html b/learn/0.4/guide/your_first_component/index.html
index 16d221179..fc703f1d9 100644
--- a/learn/0.4/guide/your_first_component/index.html
+++ b/learn/0.4/guide/your_first_component/index.html
@@ -153,7 +153,7 @@
     }
 }
 
-
title by author (0) 2023-10-01 01:08:11.618464452 UTC comments

Creating Elements

Next, let's wrap our post description in a div. You can create HTML elements in Dioxus by putting a { after the element name and a } after the last child of the element:

+
title by author (0) 2023-10-04 13:46:52.415518912 UTC comments

Creating Elements

Next, let's wrap our post description in a div. You can create HTML elements in Dioxus by putting a { after the element name and a } after the last child of the element:

 pub fn App(cx: Scope) -> Element {
     let title = "title";
     let by = "author";
@@ -168,7 +168,7 @@
     }
 }
 
-
title by author (0) 2023-10-01 01:08:11.618471352 UTC comments

You can read more about elements in the rsx reference.

Setting Attributes

Next, let's add some padding around our post listing with an attribute.

Attributes (and listeners) modify the behavior or appearance of the element they are attached to. They are specified inside the {} brackets before any children, using the name: value syntax. You can format the text in the attribute as you would with a text node:

+
title by author (0) 2023-10-04 13:46:52.415526413 UTC comments

You can read more about elements in the rsx reference.

Setting Attributes

Next, let's add some padding around our post listing with an attribute.

Attributes (and listeners) modify the behavior or appearance of the element they are attached to. They are specified inside the {} brackets before any children, using the name: value syntax. You can format the text in the attribute as you would with a text node:

 pub fn App(cx: Scope) -> Element {
     let title = "title";
     let by = "author";
@@ -185,7 +185,7 @@
     }
 }
 
-
title by author (0) 2023-10-01 01:08:11.618475752 UTC comments

Note: All attributes defined in dioxus-html follow the snake_case naming convention. They transform their snake_case names to HTML's camelCase attributes.

Note: Styles can be used directly outside of the style: attribute. In the above example, color: "red" is turned into style="color: red".

You can read more about elements in the attribute reference

Creating a Component

Just like you wouldn't want to write a complex program in a single, long, main function, you shouldn't build a complex UI in a single App function. Instead, you should break down the functionality of an app in logical parts called components.

A component is a Rust function, named in UpperCamelCase, that takes a Scope parameter and returns an Element describing the UI it wants to render. In fact, our App function is a component!

Let's pull our story description into a new component:

+
title by author (0) 2023-10-04 13:46:52.415530013 UTC comments

Note: All attributes defined in dioxus-html follow the snake_case naming convention. They transform their snake_case names to HTML's camelCase attributes.

Note: Styles can be used directly outside of the style: attribute. In the above example, color: "red" is turned into style="color: red".

You can read more about elements in the attribute reference

Creating a Component

Just like you wouldn't want to write a complex program in a single, long, main function, you shouldn't build a complex UI in a single App function. Instead, you should break down the functionality of an app in logical parts called components.

A component is a Rust function, named in UpperCamelCase, that takes a Scope parameter and returns an Element describing the UI it wants to render. In fact, our App function is a component!

Let's pull our story description into a new component:

 fn StoryListing(cx: Scope) -> Element {
     let title = "title";
     let by = "author";
@@ -211,7 +211,7 @@
     }
 }
 
-
title by author (0) 2023-10-01 01:08:11.618482652 UTC comments

You can read more about elements in the component reference

Creating Props

Just like you can pass arguments to a function or attributes to an element, you can pass props to a component that customize its behavior!

We can define arguments that components can take when they are rendered (called Props) by adding the #[inline_props] macro before our function definition and adding extra function arguments.

Currently, our StoryListing component always renders the same story. We can modify it to accept a story to render as a prop.

We will also define what a post is and include information for how to transform our post to and from a different format using serde. This will be used with the hackernews API in a later chapter:

+
title by author (0) 2023-10-04 13:46:52.415539113 UTC comments

You can read more about elements in the component reference

Creating Props

Just like you can pass arguments to a function or attributes to an element, you can pass props to a component that customize its behavior!

We can define arguments that components can take when they are rendered (called Props) by adding the #[inline_props] macro before our function definition and adding extra function arguments.

Currently, our StoryListing component always renders the same story. We can modify it to accept a story to render as a prop.

We will also define what a post is and include information for how to transform our post to and from a different format using serde. This will be used with the hackernews API in a later chapter:

 use chrono::{DateTime, Utc};
 use serde::{Deserialize, Serialize};
 
@@ -302,7 +302,7 @@
     }
 }
 
-
hello hackernews by Author (0) 2023-10-01 01:08:11.618486352 UTC 0

You can read more about Props in the Props reference

Cleaning Up Our Interface

Finally, by combining elements and attributes, we can make our post listing much more appealing:

Full code up to this point:

+
hello hackernews by Author (0) 2023-10-04 13:46:52.415542513 UTC 0

You can read more about Props in the Props reference

Cleaning Up Our Interface

Finally, by combining elements and attributes, we can make our post listing much more appealing:

Full code up to this point:

 use dioxus::prelude::*;
 
 // Define the Hackernews types
@@ -443,7 +443,7 @@
     })
 }
 
-
hello hackernews ()
0 points
by Author
10/01/23 1:08 AM
0 comments
+
hello hackernews ()
0 points
by Author
10/04/23 1:46 PM
0 comments