update

Author: ParadeTo

__tests__/react-dom/ReactFunctionComponent-test.js

@@ -39,18 +39,21 @@ describe('ReactFunctionComponent', () => {
     expect(el.textContent).toBe('A')
   })
 
-  // it('should update stateless component', () => {
-  // 	function Parent(props) {
-  // 		return <FunctionComponent {...props} />;
-  // 	}
+  it('should update stateless component', async () => {
+    function Parent(props) {
+      return <FunctionComponent {...props} />
+    }
 
-  // 	const el = document.createElement('div');
-  // 	ReactDOM.createRoot(el).render(<Parent name="A" />);
-  // 	expect(el.textContent).toBe('A');
+    let el = document.createElement('div')
+    ReactDOM.createRoot(el).render(<Parent name='A' />)
+    await sleep(10)
+    expect(el.textContent).toBe('A')
 
-  // 	ReactDOM.createRoot(el).render(<Parent name="B" />);
-  // 	expect(el.textContent).toBe('B');
-  // });
+    el = document.createElement('div')
+    ReactDOM.createRoot(el).render(<Parent name='B' />)
+    await sleep(10)
+    expect(el.textContent).toBe('B')
+  })
 
   it('should not throw when stateless component returns undefined', () => {
     function NotAComponent() {}

examples/node-demo/index.js

@@ -15,14 +15,18 @@ async function test1() {
 
   function Parent() {
     useEffect(() => {
-      return () => arr.push('Unmount parent')
+      return () => {
+        arr.push('Unmount parent')
+      }
     })
     return <Child />
   }
 
   function Child() {
     useEffect(() => {
-      return () => arr.push('Unmount child')
+      return () => {
+        arr.push('Unmount child')
+      }
     })
     return 'Child'
   }
@@ -33,12 +37,11 @@ async function test1() {
     throw new Error('test1 failed')
   }
 
-  root.render(<div>a</div>)
+  root.render(null)
   await sleep(10)
-  console.log(root.getChildrenAsJSX())
-  // if (root.getChildrenAsJSX() !== null) {
-  //   throw new Error('test1 failed')
-  // }
+  if (arr.join('') !== 'Unmount parentUnmount child') {
+    throw new Error('test1 failed')
+  }
 }
 
 test1()

packages/react-dom/src/lib.rs

@@ -1,13 +1,17 @@
+use gloo::console::log;
+use js_sys::{Array, Function, Object, Reflect};
+use react_reconciler::fiber::FiberRootNode;
+use std::cell::RefCell;
+use std::collections::HashMap;
+use std::hash::{Hash, Hasher};
 use std::rc::Rc;
-
-use js_sys::{Array, Function};
 use wasm_bindgen::prelude::*;
 use web_sys::Node;
 
 use react_reconciler::Reconciler;
 use scheduler::{
-    Priority, unstable_cancel_callback,
-    unstable_schedule_callback as origin_unstable_schedule_callback, unstable_should_yield_to_host,
+    unstable_cancel_callback, unstable_schedule_callback as origin_unstable_schedule_callback,
+    unstable_should_yield_to_host, Priority,
 };
 
 use crate::host_config::ReactDomHostConfig;
@@ -19,6 +23,8 @@ mod renderer;
 mod synthetic_event;
 mod utils;
 
+// static mut CONTAINER_TO_ROOT: Option<HashMap<JsValue, Rc<RefCell<FiberRootNode>>>> = None;
+
 #[wasm_bindgen(js_name = createRoot)]
 pub fn create_root(container: &JsValue) -> Renderer {
     set_panic_hook();
@@ -29,28 +35,22 @@ pub fn create_root(container: &JsValue) -> Renderer {
             panic!("container should be Node")
         }
     };
+
+    // let mut root;
+    // unsafe {
+    //     if CONTAINER_TO_ROOT.is_none() {
+    //         CONTAINER_TO_ROOT = Some(HashMap::new());
+    //     }
+    // };
+    // log!(
+    //     "ptr {:?}",
+    //     Reflect::get(container, &JsValue::from_str("ptr")).unwrap()
+    // );
+    // unsafe {
+    //     CONTAINER_TO_ROOT.unwrap().insert(container.clone(), root);
+    // }
+
     let root = reconciler.create_container(Rc::new(node));
     let renderer = Renderer::new(root, reconciler, container);
     renderer
 }
-
-#[wasm_bindgen(js_name = scheduleCallback, variadic)]
-pub fn unstable_schedule_callback(
-    priority_level: Priority,
-    callback: Function,
-    delay: &JsValue,
-) -> u32 {
-    let delay = delay.dyn_ref::<Array>().unwrap();
-    let d = delay.get(0).as_f64().unwrap_or_else(|| 0.0);
-    origin_unstable_schedule_callback(priority_level, callback, d)
-}
-
-#[wasm_bindgen(js_name = cancelCallback)]
-pub fn cancel_callback(id: u32) {
-    unstable_cancel_callback(id)
-}
-
-#[wasm_bindgen(js_name = shouldYieldToHost)]
-pub fn should_yield_to_host() -> bool {
-    unstable_should_yield_to_host()
-}

packages/react-reconciler/src/child_fiber.rs

@@ -6,7 +6,7 @@ use std::rc::Rc;
 use wasm_bindgen::{JsCast, JsValue};
 use web_sys::js_sys::{Array, Object, Reflect};
 
-use shared::{derive_from_js_value, log, REACT_ELEMENT_TYPE, type_of};
+use shared::{derive_from_js_value, log, type_of, REACT_ELEMENT_TYPE};
 
 use crate::fiber::FiberNode;
 use crate::fiber_flags::Flags;
@@ -58,9 +58,9 @@ fn delete_remaining_children(
     return_fiber: Rc<RefCell<FiberNode>>,
     current_first_child: Option<Rc<RefCell<FiberNode>>>,
     should_track_effects: bool,
-) {
+) -> Option<Rc<RefCell<FiberNode>>> {
     if !should_track_effects {
-        return;
+        return None;
     }
 
     let mut child_to_delete = current_first_child;
@@ -78,6 +78,8 @@ fn delete_remaining_children(
             .sibling
             .clone();
     }
+
+    return None;
 }
 
 fn reconcile_single_element(
@@ -226,7 +228,9 @@ fn update_from_map(
                 delete_child(return_fiber, before, should_track_effects);
             }
         }
-        return if type_of(element, "null") { None } else {
+        return if type_of(element, "null") {
+            None
+        } else {
             Some(Rc::new(RefCell::new(FiberNode::new(
                 WorkTag::HostText,
                 props.clone(),
@@ -245,13 +249,18 @@ fn update_from_map(
                 &before.borrow()._type,
                 &derive_from_js_value(&(*element).clone(), "type"),
             ) {
-                return Some(use_fiber(before.clone(), derive_from_js_value(element, "props")));
+                return Some(use_fiber(
+                    before.clone(),
+                    derive_from_js_value(element, "props"),
+                ));
             } else {
                 delete_child(return_fiber, before, should_track_effects);
             }
         }
 
-        return Some(Rc::new(RefCell::new(FiberNode::create_fiber_from_element(element))));
+        return Some(Rc::new(RefCell::new(FiberNode::create_fiber_from_element(
+            element,
+        ))));
     }
     // panic!("update_from_map unsupported");
     None
@@ -379,8 +388,8 @@ fn _reconcile_child_fibers(
             }
         }
     }
-    log!("Unsupported child type when reconcile");
-    None
+
+    delete_remaining_children(return_fiber, current_first_child, should_track_effects)
 }
 
 pub fn reconcile_child_fibers(