Blog 8

examples/hello-world/package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "dayjs": "^1.11.10",
-    "react": "file://../../packages/react/pkg/react",
-    "react-dom": "file://../../packages/react-dom/pkg/react-dom",
+    "react": "file://../../dist/react",
+    "react-dom": "file://../../dist/react-dom",
     "vite-plugin-wasm": "^3.3.0"
   },
   "devDependencies": {

examples/hello-world/src/App.tsx

@@ -1,8 +1,12 @@
-import dayjs from 'dayjs'
+import {useState} from 'react'
 
 function App() {
+    const [name, setName] = useState(() => 'ayou')
+    setTimeout(() => {
+        setName('ayouayou')
+    }, 1000)
     return (
-        <div><Comp>{dayjs().format()}</Comp></div>
+        <div><Comp>{name}</Comp></div>
     )
 }
 

package.json

@@ -7,9 +7,7 @@
     "example": "examples"
   },
   "scripts": {
-    "build:react": "wasm-pack build packages/react --out-dir pkg/react --out-name jsx-dev-runtime",
-    "build:react-dom": "wasm-pack build packages/react-dom --out-dir pkg/react-dom --out-name index",
-    "build": "npm run build:react && npm run build:react-dom"
+    "build": "node scripts/build.js"
   },
   "author": "",
   "license": "ISC"

packages/react-dom/src/renderer.rs

@@ -3,7 +3,6 @@ use std::rc::Rc;
 
 use wasm_bindgen::JsValue;
 use wasm_bindgen::prelude::*;
-use wasm_bindgen::prelude::wasm_bindgen;
 
 use react_reconciler::fiber::FiberRootNode;
 use react_reconciler::Reconciler;

packages/react-reconciler/src/begin_work.rs

@@ -6,8 +6,8 @@ use wasm_bindgen::JsValue;
 use shared::derive_from_js_value;
 
 use crate::child_fiber::{mount_child_fibers, reconcile_child_fibers};
-use crate::fiber::FiberNode;
-use crate::fiber_hooks::FiberHooks;
+use crate::fiber::{FiberNode, MemoizedState};
+use crate::fiber_hooks::render_with_hooks;
 use crate::update_queue::process_update_queue;
 use crate::work_tags::WorkTag;
 
@@ -24,16 +24,20 @@ pub fn begin_work(work_in_progress: Rc<RefCell<FiberNode>>) -> Result<Option<Rc<
 fn update_function_component(
     work_in_progress: Rc<RefCell<FiberNode>>,
 ) -> Result<Option<Rc<RefCell<FiberNode>>>, JsValue> {
-    let fiber_hooks = &mut FiberHooks::new();
-    let next_children = Rc::new(fiber_hooks.render_with_hooks(work_in_progress.clone())?);
+    let next_children = Rc::new(render_with_hooks(work_in_progress.clone())?);
     reconcile_children(work_in_progress.clone(), Some(next_children));
     Ok(work_in_progress.clone().borrow().child.clone())
 }
 
 fn update_host_root(work_in_progress: Rc<RefCell<FiberNode>>) -> Option<Rc<RefCell<FiberNode>>> {
     process_update_queue(work_in_progress.clone());
     let next_children = work_in_progress.clone().borrow().memoized_state.clone();
-    reconcile_children(work_in_progress.clone(), next_children);
+    if next_children.is_none() {
+        panic!("update_host_root next_children is none")
+    }
+    if let MemoizedState::JsValue(next_children) = next_children.unwrap() {
+        reconcile_children(work_in_progress.clone(), Some(next_children));
+    }
     work_in_progress.clone().borrow().child.clone()
 }
 

packages/react-reconciler/src/child_fiber.rs

@@ -81,7 +81,6 @@ fn _reconcile_child_fibers(
         }
     }
     todo!("Unsupported child type when reconcile");
-    return None;
 }
 
 pub fn reconcile_child_fibers(

packages/react-reconciler/src/commit_work.rs

@@ -2,6 +2,8 @@ use std::any::Any;
 use std::cell::RefCell;
 use std::rc::Rc;
 
+use shared::log;
+
 use crate::fiber::{FiberNode, StateNode};
 use crate::fiber_flags::{Flags, get_mutation_mask};
 use crate::HostConfig;
@@ -101,6 +103,7 @@ impl CommitWork {
         let fiber = fiber.clone();
         let tag = fiber.borrow().tag.clone();
         if tag == WorkTag::HostComponent || tag == WorkTag::HostText {
+            log!("{:?}", fiber.clone().borrow()._type);
             let state_node = fiber.clone().borrow().state_node.clone().unwrap();
             self.host_config.append_child_to_container(
                 self.get_element_from_state_node(state_node),

packages/react-reconciler/src/fiber.rs

@@ -11,7 +11,8 @@ use web_sys::js_sys::Reflect;
 use shared::derive_from_js_value;
 
 use crate::fiber_flags::Flags;
-use crate::update_queue::{Update, UpdateQueue, UpdateType};
+use crate::fiber_hooks::Hook;
+use crate::update_queue::{Update, UpdateQueue};
 use crate::work_tags::WorkTag;
 
 #[derive(Debug)]
@@ -20,6 +21,12 @@ pub enum StateNode {
     Element(Rc<dyn Any>),
 }
 
+#[derive(Debug, Clone)]
+pub enum MemoizedState {
+    JsValue(Rc<JsValue>),
+    Hook(Rc<RefCell<Hook>>),
+}
+
 #[derive(Debug)]
 pub struct FiberNode {
     pub tag: WorkTag,
@@ -35,7 +42,7 @@ pub struct FiberNode {
     pub flags: Flags,
     pub subtree_flags: Flags,
     pub memoized_props: Option<Rc<JsValue>>,
-    pub memoized_state: Option<Rc<JsValue>>,
+    pub memoized_state: Option<MemoizedState>,
 }
 
 impl FiberNode {
@@ -76,7 +83,7 @@ impl FiberNode {
     }
 
     pub fn enqueue_update(&mut self, update: Update) {
-        let mut update_queue = match &self.update_queue {
+        let update_queue = match &self.update_queue {
             None => {
                 return;
             }
@@ -87,14 +94,6 @@ impl FiberNode {
         u.shared.pending = Some(update);
     }
 
-    pub fn initialize_update_queue(&mut self) {
-        self.update_queue = Some(Rc::new(RefCell::new(UpdateQueue {
-            shared: UpdateType {
-                pending: Some(Update { action: None }),
-            },
-        })));
-    }
-
     pub fn create_work_in_progress(
         current: Rc<RefCell<FiberNode>>,
         pending_props: Rc<JsValue>,
@@ -131,7 +130,7 @@ impl FiberNode {
             wip.pending_props = Some(pending_props.clone());
             wip.update_queue = Some(c.update_queue.as_ref().unwrap().clone());
             wip.flags = c.flags.clone();
-            wip.child = Some(Rc::clone(c.child.as_ref().unwrap()));
+            wip.child = c.child.clone();
             wip.memoized_props = c.memoized_props.clone();
             wip.memoized_state = c.memoized_state.clone();
             w.clone().unwrap()
@@ -169,7 +168,7 @@ impl FiberRootNode {
 
 impl Debug for FiberRootNode {
     fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
-        let mut root = self.current.clone().borrow().alternate.clone();
+        let root = self.current.clone().borrow().alternate.clone();
         Ok(if let Some(node) = root {
             let mut queue = VecDeque::new();
             queue.push_back(Rc::clone(&node));
@@ -186,15 +185,17 @@ impl Debug for FiberRootNode {
                             current_borrowed._type.as_ref().unwrap(),
                             current_borrowed.flags,
                             current_borrowed.subtree_flags
-                        );
+                        )
+                            .expect("print error");
                     }
                     WorkTag::HostRoot => {
                         write!(
                             f,
                             "{:?}(subtreeFlags:{:?})",
                             WorkTag::HostRoot,
                             current_ref.subtree_flags
-                        );
+                        )
+                            .expect("print error");
                     }
                     WorkTag::HostComponent => {
                         let current_borrowed = current.borrow();
@@ -209,7 +210,8 @@ impl Debug for FiberRootNode {
                                 .unwrap(),
                             current_borrowed.flags,
                             current_borrowed.subtree_flags
-                        );
+                        )
+                            .expect("print error");
                     }
                     WorkTag::HostText => {
                         let current_borrowed = current.borrow();
@@ -226,7 +228,8 @@ impl Debug for FiberRootNode {
                                 .as_string()
                                 .unwrap(),
                             current_borrowed.flags
-                        );
+                        )
+                            .expect("print error");
                     }
                 };
                 if let Some(ref child) = current_ref.child {
@@ -244,17 +247,18 @@ impl Debug for FiberRootNode {
                         (current_ref._return.as_ref(), next_ref._return.as_ref())
                     {
                         if !Rc::ptr_eq(current_parent, next_parent) {
-                            writeln!(f, "");
-                            writeln!(f, "------------------------------------");
+                            writeln!(f, "").expect("print error");
+                            writeln!(f, "------------------------------------")
+                                .expect("print error");
                             continue;
                         }
                     }
 
                     if current_ref._return.is_some() {
-                        write!(f, ",");
+                        write!(f, ",").expect("print error");
                     } else {
-                        writeln!(f, "");
-                        writeln!(f, "------------------------------------");
+                        writeln!(f, "").expect("print error");
+                        writeln!(f, "------------------------------------").expect("print error");
                     }
                 }
             }