updated the effect cleanup logic to be more predictable and easy to reason && some readme changes

Author: codeAdityagithub

package.json

@@ -1,7 +1,7 @@
 {
     "name": "refract-js",
     "type": "module",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Simpler, Faster and Lighter JSX based rendering for Single-Page Applications",
     "main": "build/refract.cjs.js",
     "module": "build/refract.es.js",

readme.md

@@ -78,6 +78,13 @@ export default Counter;
 
 ### Effects
 
+Effects can be created using the `createEffect` function.
+
+-   Effect runs after the components has been mounted to the dom.
+-   You don't need to declare dependency array as dependencies are automatically tracked.
+-   Effect re-runs whenever the signals used inside the effect are updated using the update function.
+-   The cleanup function that is returned from the effect will run when the component unmounts or when the effect is rerun.
+
 ```jsx
 import { createSignal, createEffect } from "refract-js";
 
@@ -86,13 +93,21 @@ function TimerComponent() {
 
     createEffect(() => {
         const interval = setInterval(() => {
-            seconds.value++;
+            seconds.update((prev) => prev + 1);
         }, 1000);
 
-        // Cleanup function to clear the interval when the component unmounts
+        // Cleanup function to clear the interval when the component unmounts or the seconds.value is updated
         return () => clearInterval(interval);
     });
 
+    createEffect(() => {
+        // This effect only runs once after the component mounts.
+
+        return () => {
+            // this cleanup will only run when the component mounts
+        };
+    });
+
     return <p>Elapsed Time: {seconds} seconds</p>;
 }
 ```

src/components/App.tsx

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

src/components/Test.tsx

@@ -9,24 +9,28 @@ import {
 const LazyFC1 = lazy(() => import("./FC1.jsx"));
 const LazyFC2 = lazy(() => import("./FC2.jsx"));
 
-const showTextSignal = createSignal<boolean>(true);
 export const textSignal = createSignal<string>("Initial Text");
 
 const Test = () => {
+    const showTextSignal = createSignal<boolean>(true);
     createEffect(() => {
-        console.log(showTextSignal.value);
+        console.log(showTextSignal.value, "Effect");
+
+        return () => {
+            console.log("cleanup");
+        };
     });
 
     const h1ref = createRef<HTMLHeadingElement>();
-
+    // console.log("hello");
     return (
         <div>
             {/* Static content with reactivity */}
             <h1 ref={h1ref}>
                 <>{() => textSignal.value}</>
             </h1>
 
-            {() =>
+            {/* {() =>
                 showTextSignal.value ? (
                     <LazyFC2
                         fallback={<h2>Loading...</h2>}
@@ -38,17 +42,15 @@ const Test = () => {
                         errorFallback={(error) => <h2>{error.message}</h2>}
                     />
                 )
-            }
-            <button
-                onClick={() => (showTextSignal.value = !showTextSignal.value)}
-            >
+            } */}
+            <button onClick={() => showTextSignal.update((prev) => !prev)}>
                 Toggle
             </button>
 
-            {/* Event handlers with reactivity */}
+            {/* Event handlers with reactivity
             <button onClick={() => (textSignal.value = "Updated Text")}>
                 Update Text
-            </button>
+            </button> */}
         </div>
     );
 };

src/rendering/functionalComponents.ts

@@ -111,6 +111,11 @@ export function cleanUpFC(currentFC, props) {
         fcData.cleanup = [];
 
         for (const effect of fcData.effects) {
+            // @ts-expect-error
+            if (effect.__cleanup && typeof effect.__cleanup === "function") {
+                // @ts-expect-error
+                effect.__cleanup();
+            }
             // @ts-expect-error
             if (effect.__signals) {
                 // @ts-expect-error
@@ -120,6 +125,8 @@ export function cleanUpFC(currentFC, props) {
             }
             // @ts-expect-error
             delete effect.__signals;
+            // @ts-expect-error
+            delete effect.__cleanup;
         }
 
         fcData.signals.forEach((signal) => signal.clearDeps());

src/rendering/render.ts

@@ -42,15 +42,15 @@ export function render(element: Fiber, container: HTMLElement) {
 function commitRootFragment() {
     if (rootFragment && rootContainer) {
         rootContainer.appendChild(rootFragment);
-        const endTime = performance.now();
-        console.log(`Render time: ${endTime - startTime}ms`);
+        // const endTime = performance.now();
+        // console.log(`Render time: ${endTime - startTime}ms`);
     }
 }
 
 let elements: Fiber[] = [];
 let rootContainer: HTMLElement | null = null;
 let rootFragment: DocumentFragment | null = null;
-let startTime = -1;
+// let startTime = -1;
 let effectQueue: Fiber[] = [];
 
 function processEffectQueue() {
@@ -62,7 +62,7 @@ function processEffectQueue() {
 }
 
 function workLoop(deadline: IdleDeadline) {
-    if (startTime === -1) startTime = performance.now();
+    // if (startTime === -1) startTime = performance.now();
 
     processEffectQueue();
     let shouldYield = false;
@@ -293,7 +293,7 @@ function setRenderFunction(fiber: Fiber) {
 
 export function updateFiber(prevFiber: Fiber, newValue) {
     // console.log("Prev value", prevFiber, newValue);
-    startTime = performance.now();
+    // startTime = performance.now();
     if (isPrimitive(newValue)) {
         // console.log(fiber, newValue);
         const newFragment: Fiber = {
@@ -323,8 +323,8 @@ export function updateFiber(prevFiber: Fiber, newValue) {
         // console.log("New Node Fiber", newFragment);
         updateNode(prevFiber, newFragment);
     }
-    const endTime = performance.now();
-    console.log("Update Time:", (endTime - startTime).toFixed(2), "ms");
+    // const endTime = performance.now();
+    // console.log("Update Time:", (endTime - startTime).toFixed(2), "ms");
 }
 
 function replaceRenderFunction(prev: Fiber, next: Fiber) {
@@ -525,7 +525,7 @@ function updateNode(
             )
                 next.dom = prev.dom;
             if (node === undefined) {
-                console.error("no node found", prev, next);
+                // console.error("no node found", prev, next);
                 return;
             }
             // console.log(prev);

src/signals/batch.ts

@@ -7,31 +7,30 @@ const batch = new Set<Function>();
 const depset = new Set();
 const reactiveFiberMap = new WeakMap();
 const domAttributeMap = new WeakMap<Function, HTMLElement | Text>();
-const effectCleanup: any[] = [];
-
-export function addEffectCleanup(fn: Function) {
-    effectCleanup.push(fn);
-}
 
 export function batchUpdate(cb: Function) {
     batch.add(cb);
     if (!scheduled) {
         scheduled = true;
         queueMicrotask(() => {
             // console.log("Current batch has: ", batch.size, " Functions");
-            effectCleanup.forEach((fn) => fn());
-            effectCleanup.length = 0;
+
             batch.forEach((fn) => {
                 const dep = fn();
                 if (depset.has(dep)) {
                     return;
                 }
                 depset.add(dep);
                 // effects and reactive nodes
+                if (dep.__cleanup && typeof dep.__cleanup === "function") {
+                    dep.__cleanup();
+                    dep.__cleanup = null;
+                }
+
                 const val = dep();
 
                 if (typeof val === "function") {
-                    effectCleanup.push(val);
+                    dep.__cleanup = val;
                 }
                 // console.log(dep, "dep");
                 if (reactiveFiberMap.has(dep)) {

src/signals/signal.ts

@@ -7,7 +7,7 @@ import {
 } from "../rendering/functionalComponents";
 import { Fiber } from "../types";
 import { isPlainObject, isPrimitive } from "../utils/general";
-import { addEffectCleanup, batchUpdate } from "./batch";
+import { batchUpdate } from "./batch";
 
 let currentReactiveFunction: any = null;
 let currentEffect: any = null;
@@ -68,8 +68,9 @@ export function runEffect(effect: Function, fiber?: Fiber) {
 
     const effectCleanup = effect();
 
-    if (currentEffect.__signals && typeof effectCleanup === "function")
-        addEffectCleanup(effectCleanup);
+    if (currentEffect.__signals && typeof effectCleanup === "function") {
+        currentEffect.__cleanup = effectCleanup;
+    }
 
     if (
         !currentEffect.__signals &&