added tests for hooks lifecycle and edge cases

Author: codeAdityagithub

src/components/App.tsx

@@ -16,7 +16,7 @@ const App = (props: any) => {
             <button onClick={() => visible.update((prev) => !prev)}>
                 Show/Hide
             </button>
-            {() => (visible.value ? <TimerComponent /> : "Hidden")}
+            {() => (visible.value ? <PerformanceTest /> : "Hidden")}
         </>
     );
     // return <StylesTest />;

src/components/Performance.tsx

@@ -18,20 +18,20 @@ const PerformanceTest = () => {
 
             // Simulating add item after 1 second
             setTimeout(() => {
-                items.value.push(`Item ${items.value.length + 1}`);
+                items.update((items) => items.push(`Item ${items.length + 1}`));
                 console.timeEnd("Update 1");
                 console.time("Update 2");
                 // Simulating sort after another second
                 setTimeout(() => {
-                    sortAsc.value = !sortAsc.value;
+                    sortAsc.update((prev) => !prev);
                     console.timeEnd("Update 2");
                 }, 1000);
             }, 1000);
         }, 1000);
     });
 
     setTimeout(() => {
-        items.value = [];
+        items.update([]);
         // items.value[0] = "item modified";
         // setTimeout(() => {
         //     items.value = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
@@ -40,7 +40,7 @@ const PerformanceTest = () => {
 
     // Sorting the list based on the selected order
     const sortedItems = computed(() => {
-        return items.value.sort((a, b) => {
+        return [...items.value].sort((a, b) => {
             if (sortAsc.value) return a.localeCompare(b);
             return b.localeCompare(a);
         });

src/rendering/render.ts

@@ -73,8 +73,9 @@ function workLoop(deadline: IdleDeadline) {
     }
 
     if (elements.length == 0) {
-        processEffectQueue();
         commitRootFragment();
+
+        processEffectQueue();
         return;
     }
     requestIdleCallback(workLoop);

src/tests/rendering/functionalComponents.test.tsx

@@ -7,7 +7,12 @@ import {
 } from "../../rendering/functionalComponents";
 import * as rendering from "../../rendering/render";
 
-import { computed, createEffect, createSignal } from "../../signals/signal";
+import {
+    computed,
+    createEffect,
+    createRef,
+    createSignal,
+} from "../../signals/signal";
 
 vi.stubGlobal("requestIdleCallback", (cb) => {
     queueMicrotask(() => cb({ timeRemaining: () => 2 }));
@@ -98,3 +103,196 @@ describe("Functional Components life cycle", () => {
         expect(computedCount).toBe(2);
     });
 });
+
+describe("hooks lifecycle", () => {
+    it("create effect should run synchrounously when outside of a FC", async () => {
+        let count = 0;
+        createEffect(() => {
+            count++;
+        });
+        await Promise.resolve();
+        expect(count).toBe(1);
+    });
+    it("computed should run synchrounously when outside of a FC or inside and should run only once", async () => {
+        let fn = vi.fn();
+
+        const signal = createSignal(1);
+        const comp = computed(() => {
+            fn();
+            return signal.value * 2;
+        });
+        expect(fn).toHaveBeenCalledTimes(1);
+        expect(comp.value).toBe(2);
+
+        // inside FC
+        const FC = () => {
+            const signal = createSignal(1);
+            const comp = computed(() => {
+                fn();
+                return signal.value * 2;
+            });
+            return <div></div>;
+        };
+
+        const fiber = (
+            <div>
+                <FC />
+            </div>
+        );
+
+        createFiber(fiber);
+        commitFiber(fiber);
+
+        expect(fn).toHaveBeenCalledTimes(2);
+        await Promise.resolve();
+        expect(fn).toHaveBeenCalledTimes(2);
+    });
+
+    it("create effect should run asynchronously when inside of a FC, in render and commitFiber both", async () => {
+        let fn1 = vi.fn();
+        let fn2 = vi.fn();
+        // render
+        const FC = () => {
+            createEffect(() => {
+                fn1();
+            });
+            fn2();
+            return <div></div>;
+        };
+
+        const container = document.createElement("div");
+
+        rendering.render(<FC />, container);
+        await Promise.resolve();
+
+        expect(container.innerHTML).toBe("<div></div>");
+        expect(fn1).toHaveBeenCalledAfter(fn2);
+
+        // commitFiber
+        const fiber = (
+            <div>
+                <FC />
+            </div>
+        );
+
+        createFiber(fiber);
+        commitFiber(fiber);
+
+        expect(container.innerHTML).toBe("<div></div>");
+        await Promise.resolve();
+
+        expect(fn1).toHaveBeenCalledTimes(2);
+        expect(fn2).toHaveBeenCalledTimes(2);
+        expect(fn1).toHaveBeenCalledAfter(fn2);
+    });
+
+    // this is just a test to make sure that this does not cause an infinite loop and it is an anti-pattern
+    it("create effect should run twice not infinitely when inside a FC with self dependency", async () => {
+        let fn1 = vi.fn();
+        let fn2 = vi.fn();
+        // render
+        const FC = () => {
+            const signal = createSignal<number>(1);
+            createEffect(() => {
+                signal.value;
+                // if the signal is registered first then only it will be called twice
+                signal.update((prev) => prev + 1);
+                fn1();
+            });
+            fn2();
+            return <div></div>;
+        };
+
+        const fiber = (
+            <div>
+                <FC />
+            </div>
+        );
+
+        createFiber(fiber);
+        commitFiber(fiber);
+
+        await Promise.resolve();
+
+        expect(fn1).toHaveBeenCalledTimes(1);
+        await Promise.resolve();
+
+        // if the signal is registered first then only it will be called twice
+        expect(fn1).toHaveBeenCalledTimes(2);
+    });
+
+    it("createEffect with a ref should always have the ref defined", async () => {
+        // render
+
+        const fn = vi.fn();
+        const FC = () => {
+            const ref = createRef();
+
+            createEffect(() => {
+                fn(ref.current);
+            });
+
+            return (
+                <div>
+                    <p>Child1</p>
+                    <div>
+                        Child2
+                        <p>Subchild 2</p>
+                        <div>
+                            Subchild 3<p ref={ref}>Subchild 4</p>
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+
+        const fiber = (
+            <div>
+                <FC />
+            </div>
+        );
+
+        createFiber(fiber);
+        commitFiber(fiber);
+
+        expect(fn).toHaveBeenCalledTimes(0);
+        await Promise.resolve();
+
+        expect(fn).toHaveBeenCalledWith(expect.any(HTMLParagraphElement));
+    });
+    it("createEffect with a ref should always have the ref defined, with render also", async () => {
+        // render
+
+        const fn = vi.fn();
+        const FC = () => {
+            const ref = createRef();
+
+            createEffect(() => {
+                fn(ref.current);
+            });
+
+            return (
+                <div>
+                    <p>Child1</p>
+                    <div>
+                        Child2
+                        <p>Subchild 2</p>
+                        <div>
+                            Subchild 3<p ref={ref}>Subchild 4</p>
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+
+        rendering.render(<FC />, document.body);
+
+        expect(document.body.innerHTML).toBe("");
+        expect(fn).toHaveBeenCalledTimes(0);
+        await Promise.resolve();
+        expect(document.body.innerHTML).toBe(
+            "<div><p>Child1</p><div>Child2<p>Subchild 2</p><div>Subchild 3<p>Subchild 4</p></div></div></div>"
+        );
+        expect(fn).toHaveBeenCalledWith(expect.any(HTMLParagraphElement));
+    });
+});