updated the logic for createEffect to run after the component mounts when inside FC

Author: codeAdityagithub

examples/css/src/Timer.tsx

@@ -1,33 +1,23 @@
-import { createSignal, createEffect, cleanUp } from "refract-js";
+import { createSignal, createEffect, cleanUp, createRef } from "refract-js";
 
 function TimerComponent() {
     const seconds = createSignal<number>(0);
-    const other = createSignal([1, 2, 3]);
-
-    const interval = setInterval(() => {
-        seconds.update((seconds) => seconds + 1);
-    }, 1000);
+    const ref = createRef();
 
     createEffect(() => {
-        console.log("Effect");
-        other.update((prev) => prev.push(4));
+        console.log(ref.current);
+        const interval = setInterval(() => {
+            seconds.update((seconds) => seconds + 1);
+        }, 1000);
+
         // Cleanup function to clear the interval when the component unmounts
         return () => {
             console.log("cleanup");
+            clearInterval(interval);
         };
     });
 
-    cleanUp(() => {
-        // console.log("FC cleanup");
-        clearInterval(interval);
-    });
-
-    return (
-        <p>
-            Elapsed Time: {() => seconds.value}
-            {() => other.value.map((i) => i)} seconds
-        </p>
-    );
+    return <p ref={ref}>Elapsed Time: {() => seconds.value}</p>;
 }
 
 export default TimerComponent;

readme.md

@@ -46,8 +46,9 @@ render(<App />, document.getElementById("root"));
 
 ### State Management
 
-In Refract-js, functions serve as an intuitive way to create dynamic nodes.  
-Functional components rerender only once; after that, signals handle the DOM reconciliation process efficiently.
+In Refract-js, functions serve as an intuitive way to create dynamic nodes.
+
+> Functional components rerender only once;after that, signals handle the DOM reconciliation process efficiently.
 
 You can use
 `createSignal()`
@@ -63,7 +64,11 @@ function Counter() {
         <div>
             {/* Functions for dynamic values that depend on signals */}
             <p>Count: {() => count.value}</p>
-            <button onClick={() => count.value++}>Increment</button>
+
+            {/* use the update function to update the count.value */}
+            <button onClick={() => count.update((prevCount) => prevCount + 1)}>
+                Increment
+            </button>
         </div>
     );
 }

src/components/Timer.tsx

@@ -4,53 +4,50 @@ import {
     cleanUp,
     createPromise,
     computed,
+    createRef,
 } from "../index";
 
 function TimerComponent() {
-    const seconds = createSignal<number>(0);
+    const ref = createRef();
     const other = createSignal({ a: [-1], b: 2, c: 3 });
-    // const promise = createPromise(
-    //     () =>
-    //         new Promise<string>((resolve) =>
-    //             setTimeout(() => resolve("hello"), 1000)
-    //         )
-    // );
-    const seconds2 = computed(() => other.value.a[0]);
-    // const interval = setInterval(() => {
-    //     // other.update((other) => other.a++);
-    //     seconds.update((seconds) => seconds + 1);
-    // }, 1000);
+
+    const seconds = createSignal<number>(0);
+    const seconds2 = computed(() => {
+        console.log("hello");
+        return seconds.value * 2;
+    });
+
     createEffect(() => {
-        // seconds.update((prev) => prev + 1);
         // seconds.value;
-        console.log(other.value);
+        // seconds.update((prev) => prev + 1);
+        // console.log(ref.current);
+        console.log(seconds2.value);
+        // console.log("first");
         return () => {
             console.log("cleanup");
         };
     });
-
-    // cleanUp(() => {
-    //     // console.log("FC cleanup");
-    //     clearInterval(interval);
-    // });
-
+    // console.log("inside fc");
     return (
-        <p id="p">
-            Elapsed Time: {() => seconds2.value}
-            {/* {() => other.value.a.map((i) => <p>{i}</p>)} seconds */}
-            <button
-                onClick={() => {
-                    // other.update((other) => other.a.push(seconds.value));
-                    // other.value.a.push(seconds.value);
-                    // seconds.update((prev) => prev + 1);
-                    other.update((prev) => {
-                        prev.a[0]++;
-                    });
-                }}
-            >
-                Click
-            </button>
-        </p>
+        <>
+            <p id="p">
+                Elapsed Time: {() => seconds.value}
+                Computed Time: {() => seconds2.value}
+                <button
+                    onClick={() => {
+                        // other.update((prev) => {
+                        //     prev.a[0]++;
+                        // });
+                        seconds.update((prev) => prev + 1);
+                    }}
+                >
+                    Click
+                </button>
+            </p>
+            {/* <div>
+                <p ref={ref}>I am the last child of TimerComponent</p>
+            </div> */}
+        </>
     );
 }
 

src/rendering/functionalComponents.ts

@@ -1,16 +1,17 @@
-import { BaseSignal } from "../signals/signal";
+import { BaseSignal, runEffect } from "../signals/signal";
+import { Fiber } from "../types";
 
-let currentFC = null;
+let currentFC: Fiber | null = null;
 let fcMap = new WeakMap<
-    Function,
+    Fiber,
     {
         signals: Set<BaseSignal<any>>;
         cleanup: Function[];
         effects: Set<Function>;
     }
 >();
 
-export function setCurrentFC(fc) {
+export function setCurrentFC(fc: Fiber) {
     currentFC = fc;
 }
 
@@ -21,6 +22,16 @@ export function getCurrentFC() {
     return currentFC;
 }
 
+export function runAllEffects(FC: Fiber) {
+    if (fcMap.has(FC)) {
+        const fcData = fcMap.get(FC)!;
+
+        for (const effect of fcData.effects) {
+            runEffect(effect, FC);
+        }
+    }
+}
+
 export function cleanUp(fn: Function) {
     if (currentFC) {
         // console.log(currentFC, fcMap.has(currentFC));
@@ -37,6 +48,22 @@ export function cleanUp(fn: Function) {
         }
     }
 }
+export function cleanUpWFiber(fn: Function, fiber: Fiber) {
+    if (fiber) {
+        // console.log(currentFC, fcMap.has(currentFC));
+        if (fcMap.has(fiber)) {
+            const fcData = fcMap.get(fiber)!;
+
+            fcData.cleanup.push(fn);
+        } else {
+            fcMap.set(fiber, {
+                signals: new Set(),
+                cleanup: [fn],
+                effects: new Set(),
+            });
+        }
+    }
+}
 
 export function addEffect(fn: Function) {
     if (currentFC) {

src/rendering/render.ts

@@ -15,6 +15,7 @@ import {
 import {
     cleanUpFC,
     clearCurrentFC,
+    runAllEffects,
     setCurrentFC,
 } from "./functionalComponents";
 
@@ -50,10 +51,20 @@ let elements: Fiber[] = [];
 let rootContainer: HTMLElement | null = null;
 let rootFragment: DocumentFragment | null = null;
 let startTime = -1;
+let effectQueue: Fiber[] = [];
+
+function processEffectQueue() {
+    for (let i = 0; i < effectQueue.length; i++) {
+        const fiber = effectQueue[i];
+        runAllEffects(fiber);
+    }
+    effectQueue.length = 0;
+}
 
 function workLoop(deadline: IdleDeadline) {
     if (startTime === -1) startTime = performance.now();
 
+    processEffectQueue();
     let shouldYield = false;
     while (elements.length > 0 && !shouldYield) {
         const element = elements.pop();
@@ -62,6 +73,7 @@ function workLoop(deadline: IdleDeadline) {
     }
 
     if (elements.length == 0) {
+        processEffectQueue();
         commitRootFragment();
         return;
     }
@@ -94,7 +106,7 @@ function renderNode(fiber: Fiber) {
 
         const children = fiber.type(fiber.props);
         clearCurrentFC();
-        // fiber.type = "FRAGMENT";
+
         if (Array.isArray(children)) {
             // which means that the FC returned a fragment
             // console.log(children);
@@ -108,6 +120,8 @@ function renderNode(fiber: Fiber) {
             fiber.props.children.push(children);
             elements.push(children);
         }
+        // queue to run its effects
+        effectQueue.push(fiber);
     } else {
         if (!fiber.dom) fiber.dom = createNode(fiber);
         let fiberParent: Fiber | undefined = fiber.parent;
@@ -195,6 +209,10 @@ function commitFiber(
             fiber.props.children.push(children);
             commitFiber(children, referenceNode, replace, true, customParent);
         }
+        // queue to run its effects at the end of current stack
+        queueMicrotask(() => {
+            runAllEffects(fiber);
+        });
     } else {
         if (!fiber.dom) fiber.dom = createNode(fiber);
 

src/signals/signal.ts

@@ -2,7 +2,10 @@ import {
     addEffect,
     addSignal,
     cleanUp,
+    cleanUpWFiber,
+    getCurrentFC,
 } from "../rendering/functionalComponents";
+import { Fiber } from "../types";
 import { isPlainObject, isPrimitive } from "../utils/general";
 import { addEffectCleanup, batchUpdate } from "./batch";
 
@@ -53,17 +56,32 @@ export function reactiveAttribute(fn: Function) {
 export function createEffect(fn: Function) {
     if (typeof fn !== "function")
         throw new Error("createEffect takes a effect function as the argument");
-    currentEffect = fn;
 
     addEffect(fn);
-    const effectCleanup = fn();
+    if (!getCurrentFC()) runEffect(fn);
+}
+
+export function runEffect(effect: Function, fiber?: Fiber) {
+    if (typeof effect !== "function") return;
+
+    currentEffect = effect;
+
+    const effectCleanup = effect();
 
     if (currentEffect.__signals && typeof effectCleanup === "function")
         addEffectCleanup(effectCleanup);
 
-    if (!currentEffect.__signals) {
+    if (
+        !currentEffect.__signals &&
+        effectCleanup &&
+        typeof effectCleanup === "function"
+    ) {
         // which means this effect does not have any signals associated with so its just a cleanup function that we need to call when the component unmounts
-        cleanUp(effectCleanup);
+        if (!fiber) {
+            cleanUp(effectCleanup);
+        } else {
+            cleanUpWFiber(effectCleanup, fiber);
+        }
     }
 
     currentEffect = null;
@@ -75,11 +93,13 @@ function computed<T extends NormalSignal | any[] | Record<any, any>>(
     if (typeof fn !== "function")
         throw new Error("computed takes a function as the argument");
 
+    let firstRun = getCurrentFC() !== null;
     currentEffect = () => {
-        let newVal = fn();
-        if (newVal !== signal.value) {
-            signal.update(newVal);
+        if (firstRun) {
+            firstRun = false;
+            return;
         }
+        signal.update(fn());
     };
 
     addEffect(currentEffect);

src/tests/rendering/extraRender.test.tsx

@@ -464,7 +464,6 @@ describe("Extra Edge cases", () => {
         const FC = () => {
             createEffect(() => {
                 count.update((prev) => prev + 1);
-                count.value;
                 return () => {
                     fn();
                 };
@@ -479,11 +478,17 @@ describe("Extra Edge cases", () => {
         commitFiber(fiber);
 
         expect(fn).toHaveBeenCalledTimes(0);
+        await Promise.resolve();
+
+        expect(count.value).toBe(1);
+        await Promise.resolve();
+
         expect(fiber.dom.innerHTML).toBe("<div>1</div>");
 
         visible.update(false);
         await Promise.resolve();
 
+        expect(visible.value).toBe(false);
         expect(fn).toHaveBeenCalledTimes(1);
         expect(fiber.dom.innerHTML).toBe("hidden");
     });
@@ -493,8 +498,8 @@ describe("Extra Edge cases", () => {
 
         const FC = () => {
             createEffect(() => {
-                count.update((prev) => prev + 1);
                 count.value;
+                count.update((prev) => prev + 1);
             });
 
             return <div>{() => count.value}</div>;
@@ -509,6 +514,11 @@ describe("Extra Edge cases", () => {
         createFiber(fiber);
         commitFiber(fiber);
 
+        await Promise.resolve();
+        expect(count.value).toBe(1);
+
+        await Promise.resolve();
+
         expect(fiber.dom.innerHTML).toBe("<div>1</div>");
 
         count.update((prev) => prev + 1);