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 @@ } }-
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:
+
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() {-
You can read more about Hooks in the Hooks reference
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:
These rules mean that there are certain things you can't do with hooks:
+
You can read more about Hooks in the Hooks reference
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:
These rules mean that there are certain things you can't do with hooks:
// ❌ 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 @@ } }-
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:
+
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 @@ } }-
You can read more about elements in the rsx reference.
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:
+
You can read more about elements in the rsx reference.
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 @@ } }-
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 intostyle="color: red"
.
You can read more about elements in the attribute reference
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:
+
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 intostyle="color: red"
.
You can read more about elements in the attribute reference
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 @@ } }-
You can read more about elements in the component reference
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:
+
You can read more about elements in the component reference
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 @@ } }-
You can read more about Props in the Props reference
Finally, by combining elements and attributes, we can make our post listing much more appealing:
Full code up to this point:
+
You can read more about Props in the Props reference
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 @@ }) }-