wip: more examples

Cargo.toml

@@ -10,6 +10,8 @@ description = "Core functionality for Dioxus - a concurrent renderer-agnostic Vi
 [dependencies]
 dioxus-core = { path="./packages/core", version="0.1.0" }
 dioxus-core-macro = { path="./packages/core-macro", version="0.1.0" }
+
+dioxus-web = { path="./packages/web", optional=true }
 # dioxus-hooks = { path="./packages/hooks", version="0.0.0" }
 
 
@@ -20,7 +22,7 @@ core = []
 ssr = []
 hooks = []
 router = []
-web = []
+web = ["dioxus-web"]
 desktop = []
 
 
@@ -32,21 +34,6 @@ split-debuginfo = "unpacked"
 futures = "0.3.15"
 log = "0.4.14"
 num-format = "0.4.0"
-# For the tide ssr examples
-# async-std = { version="1.9.0", features=["attributes"] }
-# tide = { version="0.16.0" }
-
-# For the livewview example
-# tide-websockets = "0.4.0"
-# serde_millis = "0.1"
-# serde_json = "1"
-# serde = { version="1", features=['derive'] }
-
-# For the doc generator
-# pulldown-cmark = { version="0.8.0", default-features=false }
-
-# dioxus-webview = { path="./packages/webview", version="0.0.0" }
-# dioxus-hooks = { path="./packages/hooks", version="0.0.0" }
 rand = "0.8.4"
 separator = "0.4.1"
 serde = { version="1.0.126", features=["derive"] }

examples/calculator.rs

@@ -19,9 +19,9 @@ enum Operator {
 }
 
 static App: FC<()> = |cx| {
-    let cur_val = use_state_new(&cx, || 0.0_f64);
+    let cur_val = use_state(&cx, || 0.0_f64);
-    let operator = use_state_new(&cx, || None as Option<Operator>);
+    let operator = use_state(&cx, || None as Option<Operator>);
-    let display_value = use_state_new(&cx, || "".to_string());
+    let display_value = use_state(&cx, || "".to_string());
 
     let clear_display = display_value.eq("0");
     let clear_text = if clear_display { "C" } else { "AC" };

examples/doggo.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 fn main() {}
 
 static Example: FC<()> = |cx| {
-    let (g, set_g) = use_state(&cx, || 0);
+    let (g, set_g) = use_state_classic(&cx, || 0);
     let v = (0..10).map(move |f| {
         rsx!(li {
             onclick: move |_| set_g(10)

examples/readme.rs

@@ -0,0 +1,18 @@
+//! Example: README.md showcase
+//!
+//! The example from the README.md
+
+use dioxus::prelude::*;
+fn main() {
+    dioxus::web::launch(Example)
+}
+
+fn Example(cx: Context<()>) -> VNode {
+    let name = use_state(&cx, || "..?");
+
+    cx.render(rsx! {
+        h1 { "Hello, {name}" }
+        button { "?", onclick: move |_| name.set("world!")}
+        button { "?", onclick: move |_| name.set("Dioxus 🎉")}
+    })
+}

examples/reference/antipatterns.rs

@@ -85,7 +85,7 @@ static AntipatternNestedFragments: FC<()> = |cx| {
 /// recognize from the function signature, but Dioxus will not update the "live" version of state. Calling `set_state`
 /// merely places a new value in the queue and schedules the component for a future update.
 static AntipaternRelyingOnSetState: FC<()> = |cx| {
-    let (state, set_state) = use_state(&cx, || "Hello world");
+    let (state, set_state) = use_state_classic(&cx, || "Hello world");
     set_state("New state");
     // This will return false! `state` will *still* be "Hello world"
     assert!(state == &"New state");
@@ -126,7 +126,7 @@ static AntipatternMisusedHooks: FC<MisuedHooksProps> = |cx| {
     if cx.should_render_state {
         // do not place a hook in the conditional!
         // prefer to move it out of the conditional
-        let (state, set_state) = use_state(&cx, || "hello world");
+        let (state, set_state) = use_state_classic(&cx, || "hello world");
         rsx!(in cx, div { "{state}" })
     } else {
         rsx!(in cx, div { "Not rendering state" })

examples/reference/iterators.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 fn main() {}
 
 static Example: FC<()> = |cx| {
-    let (g, set_g) = use_state(&cx, || 0);
+    let (g, set_g) = use_state_classic(&cx, || 0);
     let v = (0..10).map(|f| {
         rsx! {
             li {

examples/reference/listener.rs

@@ -11,7 +11,7 @@ fn main() {}
 
 /// We can use `set_name` in multiple closures; the closures automatically *copy* the reference to set_name.
 static ButtonList: FC<()> = |cx| {
-    let (name, set_name) = use_state(&cx, || "...?");
+    let (name, set_name) = use_state_classic(&cx, || "...?");
 
     let names = ["jack", "jill", "john", "jane"]
         .iter()

examples/webview.rs

@@ -16,7 +16,7 @@ fn main() {
 }
 
 static App: FC<()> = |cx| {
-    let (count, set_count) = use_state(&cx, || 0);
+    let (count, set_count) = use_state_classic(&cx, || 0);
 
     cx.render(rsx! {
         div {

packages/core/examples/borrowed.rs

@@ -20,7 +20,7 @@ struct ListItem {
 }
 
 fn app(cx: Context<AppProps>) -> VNode {
-    let (val, set_val) = use_state(&cx, || 0);
+    let (val, set_val) = use_state_classic(&cx, || 0);
 
     cx.render(LazyNodes::new(move |_nodecx| {
         builder::ElementBuilder::new(_nodecx, "div")

packages/core/src/hooks.rs

@@ -36,7 +36,7 @@ use std::{
 ///     }
 /// }
 /// ```
-pub fn use_state<'a, 'c, T: 'static, F: FnOnce() -> T>(
+pub fn use_state_classic<'a, 'c, T: 'static, F: FnOnce() -> T>(
     cx: &impl Scoped<'a>,
     initial_state_fn: F,
 ) -> (&'a T, &'a Rc<dyn Fn(T)>) {
@@ -158,7 +158,7 @@ impl<'a, T: 'static + Display> std::fmt::Display for UseState<T> {
 ///     }
 /// }
 /// ```
-pub fn use_state_new<'a, 'c, T: 'static, F: FnOnce() -> T>(
+pub fn use_state<'a, 'c, T: 'static, F: FnOnce() -> T>(
     cx: &impl Scoped<'a>,
     initial_state_fn: F,
 ) -> &'a UseState<T> {

packages/web/examples/basic.rs

@@ -15,7 +15,7 @@ fn main() {
 }
 
 static App: FC<()> = |cx| {
-    let (state, set_state) = use_state(&cx, || 0);
+    let (state, set_state) = use_state_classic(&cx, || 0);
     cx.render(rsx! {
         div {
             section { class: "py-12 px-4 text-center"

packages/web/examples/calculator.rs

@@ -27,9 +27,9 @@ enum Operator {
 }
 
 static App: FC<()> = |cx| {
-    let (cur_val, set_cur_val) = use_state(&cx, || 0.0_f64);
+    let (cur_val, set_cur_val) = use_state_classic(&cx, || 0.0_f64);
-    let (operator, set_operator) = use_state(&cx, || None as Option<Operator>);
+    let (operator, set_operator) = use_state_classic(&cx, || None as Option<Operator>);
-    let (display_value, set_display_value) = use_state(&cx, || "0".to_string());
+    let (display_value, set_display_value) = use_state_classic(&cx, || "0".to_string());
 
     let clear_display = display_value.eq("0");
     let clear_text = if clear_display { "C" } else { "AC" };

packages/web/examples/deep.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn CustomA(cx: Context<()>) -> VNode {
-    let (val, set_val) = use_state(&cx, || "abcdef".to_string() as String);
+    let (val, set_val) = use_state_classic(&cx, || "abcdef".to_string() as String);
 
     cx.render(rsx! {
         div {

packages/web/examples/derive.rs

@@ -9,7 +9,7 @@ fn main() {
 }
 
 fn App(cx: Context<()>) -> VNode {
-    let cansee = use_state_new(&cx, || false);
+    let cansee = use_state(&cx, || false);
     rsx! { in cx,
         div {
             "Shadow of the child:"

packages/web/examples/framework_benchmark.rs

@@ -24,8 +24,8 @@ fn main() {
 type RowList = im_rc::HashMap<usize, Rc<str>, nohash_hasher::BuildNoHashHasher<usize>>;
 
 static App: FC<()> = |cx| {
-    let (items, set_items) = use_state(&cx, || RowList::default());
+    let (items, set_items) = use_state_classic(&cx, || RowList::default());
-    let (selection, set_selection) = use_state(&cx, || None as Option<usize>);
+    let (selection, set_selection) = use_state_classic(&cx, || None as Option<usize>);
 
     let create_rendered_rows = move |from, num| move |_| set_items(create_row_list(from, num));
 

packages/web/examples/infer.rs

@@ -13,7 +13,7 @@ fn main() {
 
 // this is a component
 static Example: FC<()> = |cx| {
-    let (event, set_event) = use_state(&cx, || None);
+    let (event, set_event) = use_state_classic(&cx, || None);
 
     let handler = move |evt| {
         set_event(Some(evt));

packages/web/examples/input.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 static App: FC<()> = |cx| {
-    let (val, set_val) = use_state(&cx, || "asd".to_string());
+    let (val, set_val) = use_state_classic(&cx, || "asd".to_string());
 
     cx.render(rsx! {
         div { class: "max-w-lg max-w-xs bg-blue-800 shadow-2xl rounded-lg mx-auto text-center py-12 mt-4 rounded-xl"
@@ -49,7 +49,7 @@ static Example: FC<()> = |cx| {
 };
 
 static UserInput: FC<()> = |cx| {
-    let (val, set_val) = use_state(&cx, || "asd".to_string());
+    let (val, set_val) = use_state_classic(&cx, || "asd".to_string());
 
     rsx! { in cx,
         div { class: "mb-4"

packages/web/examples/jackjill.rs

@@ -10,7 +10,7 @@ fn main() {
 }
 
 static Example: FC<()> = |cx| {
-    let (name, set_name) = use_state(&cx, || "...?");
+    let (name, set_name) = use_state_classic(&cx, || "...?");
 
     log::debug!("Running component....");
 

packages/web/examples/jackjillrsx.rs

@@ -9,7 +9,7 @@ fn main() {
 }
 
 static Example: FC<()> = |cx| {
-    let (name, set_name) = use_state(&cx, || "...?");
+    let (name, set_name) = use_state_classic(&cx, || "...?");
     cx.render(rsx! {
         section { class: "py-12 px-4 text-center"
             div { class: "w-full max-w-2xl mx-auto"

packages/web/examples/landingpage.rs

@@ -13,7 +13,7 @@ fn main() {
 }
 
 static App: FC<()> = |cx| {
-    let (contents, set_contents) = use_state(&cx, || "asd");
+    let (contents, set_contents) = use_state_classic(&cx, || "asd");
 
     cx.render(rsx! {
         div  {

packages/web/examples/landingpage2.rs

@@ -14,7 +14,7 @@ fn main() {
 }
 
 static App: FC<()> = |cx| {
-    let (contents, set_contents) = use_state(&cx, || "asd");
+    let (contents, set_contents) = use_state_classic(&cx, || "asd");
 
     cx.render(rsx! {
         div  { class: "flex items-center justify-center flex-col"

packages/web/examples/list.rs

@@ -26,9 +26,9 @@ pub struct TodoItem {
 }
 
 static App: FC<()> = |cx| {
-    let (draft, set_draft) = use_state(&cx, || "".to_string());
+    let (draft, set_draft) = use_state_classic(&cx, || "".to_string());
-    let (filter, set_filter) = use_state(&cx, || FilterState::All);
+    let (filter, set_filter) = use_state_classic(&cx, || FilterState::All);
-    let todos = use_state_new(&cx, || BTreeMap::<uuid::Uuid, TodoItem>::new());
+    let todos = use_state(&cx, || BTreeMap::<uuid::Uuid, TodoItem>::new());
     cx.render(rsx!(
         div {
             id: "app"

packages/web/examples/rsxt.rs

@@ -26,7 +26,7 @@ struct ExampleProps {
 }
 
 static Example: FC<ExampleProps> = |cx| {
-    let name = use_state_new(&cx, move || cx.initial_name);
+    let name = use_state(&cx, move || cx.initial_name);
 
     cx.render(rsx! {
         div {

packages/web/examples/todomvc-nodeps.rs

@@ -25,9 +25,9 @@ pub struct TodoItem {
 }
 
 pub fn App(cx: Context<()>) -> VNode {
-    let (draft, set_draft) = use_state(&cx, || "".to_string());
+    let (draft, set_draft) = use_state_classic(&cx, || "".to_string());
-    let (todos, set_todos) = use_state(&cx, || HashMap::<uuid::Uuid, Rc<TodoItem>>::new());
+    let (todos, set_todos) = use_state_classic(&cx, || HashMap::<uuid::Uuid, Rc<TodoItem>>::new());
-    let (filter, set_filter) = use_state(&cx, || FilterState::All);
+    let (filter, set_filter) = use_state_classic(&cx, || FilterState::All);
 
     let filtered_todos = todos.iter().filter(move |(id, item)| match filter {
         FilterState::All => true,
@@ -99,7 +99,7 @@ pub struct TodoEntryProps {
 }
 
 pub fn TodoEntry(cx: Context<TodoEntryProps>) -> VNode {
-    let (is_editing, set_is_editing) = use_state(&cx, || false);
+    let (is_editing, set_is_editing) = use_state_classic(&cx, || false);
     let contents = "";
     let todo = TodoItem {
         checked: false,

packages/web/examples/todomvc_simple.rs

@@ -53,9 +53,9 @@ pub fn App(cx: Context<()>) -> VNode {
 }
 
 pub fn TodoList(cx: Context<()>) -> VNode {
-    let (draft, set_draft) = use_state(&cx, || "".to_string());
+    let (draft, set_draft) = use_state_classic(&cx, || "".to_string());
-    let (todos, set_todos) = use_state(&cx, || HashMap::<uuid::Uuid, Rc<TodoItem>>::new());
+    let (todos, set_todos) = use_state_classic(&cx, || HashMap::<uuid::Uuid, Rc<TodoItem>>::new());
-    let (filter, set_filter) = use_state(&cx, || FilterState::All);
+    let (filter, set_filter) = use_state_classic(&cx, || FilterState::All);
 
     cx.render(rsx! {
         div {
@@ -102,7 +102,7 @@ pub struct TodoEntryProps {
 }
 
 pub fn TodoEntry(cx: Context<TodoEntryProps>) -> VNode {
-    let (is_editing, set_is_editing) = use_state(&cx, || false);
+    let (is_editing, set_is_editing) = use_state_classic(&cx, || false);
     let contents = "";
     let todo = TodoItem {
         checked: false,

packages/web/examples/todomvcsingle.rs

@@ -74,7 +74,7 @@ impl TodoManager {
 }
 
 pub fn TodoList(cx: Context<()>) -> VNode {
-    let draft = use_state_new(&cx, || "".to_string());
+    let draft = use_state(&cx, || "".to_string());
     let todos = use_read(&cx, &TODO_LIST);
     let filter = use_read(&cx, &FILTER);
 
@@ -118,7 +118,7 @@ pub struct TodoEntryProps {
 }
 
 pub fn TodoEntry(cx: Context, props: &TodoEntryProps) -> VNode {
-    let (is_editing, set_is_editing) = use_state(&cx, || false);
+    let (is_editing, set_is_editing) = use_state_classic(&cx, || false);
     let todo = use_read(&cx, &TODO_LIST).get(&cx.id).unwrap();
 
     cx.render(rsx! (

src/lib.rs

@@ -196,6 +196,8 @@ pub mod inputs {
 #[cfg(feature = "web")]
 pub mod web {
     //! A web-sys based renderer for building fast and interactive web applications
+    use dioxus_core::prelude::{Properties, FC};
+    pub fn launch<P: Properties>(f: FC<P>) {}
 }
 #[cfg(feature = "ssr")]
 pub mod ssr {