updated the readme and the build

Author: codeAdityagithub

build/refract.cjs.js

@@ -1,8 +1,11 @@
 import { BaseSignal } from '../signals/signal';
-export declare function setCurrentFC(fc: any): void;
+import { Fiber } from '../types';
+export declare function setCurrentFC(fc: Fiber): void;
 export declare function clearCurrentFC(): void;
-export declare function getCurrentFC(): null;
+export declare function getCurrentFC(): Fiber | null;
+export declare function runAllEffects(FC: Fiber): void;
 export declare function cleanUp(fn: Function): void;
+export declare function cleanUpWFiber(fn: Function, fiber: Fiber): void;
 export declare function addEffect(fn: Function): void;
 export declare function addSignal(signal: BaseSignal<any>): void;
 export declare function cleanUpFC(currentFC: any, props: any): void;

build/refract.es.js

@@ -1,5 +1,4 @@
 import { Fiber } from '../types';
-export declare function addEffectCleanup(fn: Function): void;
 export declare function batchUpdate(cb: Function): void;
 export declare function setReactiveFunction(fn: Function, fiber: Fiber): void;
 export declare function setReactiveAttributes(fn: Function, dom: HTMLElement | Text): void;

build/refract.umd.js

@@ -1,6 +1,8 @@
+import { Fiber } from '../types';
 export declare function reactive(fn: Function): any;
 export declare function reactiveAttribute(fn: Function): any;
 export declare function createEffect(fn: Function): void;
+export declare function runEffect(effect: Function, fiber?: Fiber): void;
 declare function computed<T extends NormalSignal | any[] | Record<any, any>>(fn: () => T): {
     readonly value: DeepReadonly<T>;
 };

build/rendering/functionalComponents.d.ts

@@ -54,6 +54,29 @@ You can use
 `createSignal()`
 to create signals and access the signal's value using `signal.value`
 
+#### Syntax:
+
+```jsx
+const signal = createSignal(initialValue);
+
+signal.value; // This is a readonly value that must be used if you want to make reactive nodes
+signal.update(newValue); // update the value to a newValue
+signal.update((prev) => {
+    // mutate the previous value if it is a array or object.
+    // or
+    // return a new value if it is a primitive.
+});
+```
+
+#### Note:
+
+>
+
+-   You cannot update signal values into different types ie., `You cannot update a array value to a object value or a primitive and vice-versa`.
+
+-   Primitive Values includes the following: `String, Number, Boolean, undefined, null and Error`.
+    -   These values can be updated into one another ie., `a number signal can be updated to any of the above types`.
+
 ```jsx
 import { createSignal } from "refract-js";
 
@@ -76,14 +99,44 @@ function Counter() {
 export default Counter;
 ```
 
+### Computed Values
+
+The built-in `computed` function creates a state that automatically updates whenever its dependent signals change.
+
+> This behaves similarly to React's `useMemo` hook but doesn't require specifying a dependency array.
+
+```jsx
+import { createSignal, computed } from "refract-js";
+
+function Counter() {
+    const count = createSignal(0);
+    const double = computed(() => count.value * 2);
+
+    return (
+        <div>
+            {/* Functions for dynamically accessing signal-based values */}
+            <p>Count: {() => count.value}</p>
+            <p>Double: {() => double.value}</p>
+
+            {/* Use the update function to modify count.value */}
+            <button onClick={() => count.update((prev) => prev + 1)}>
+                Increment
+            </button>
+        </div>
+    );
+}
+
+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.
+-   An effect runs after the component has mounted to the DOM.
+-   You don't need to specify a dependency array—dependencies are automatically tracked.
+-   The effect re-runs whenever the signals used inside it are updated via the `update` function.
+-   If the effect returns a cleanup function, it runs when the component unmounts or before the effect re-runs.
 
 ```jsx
 import { createSignal, createEffect } from "refract-js";
@@ -96,35 +149,243 @@ function TimerComponent() {
             seconds.update((prev) => prev + 1);
         }, 1000);
 
-        // Cleanup function to clear the interval when the component unmounts or the seconds.value is updated
+        // Cleanup function to clear the interval when the component unmounts or the effect re-runs
         return () => clearInterval(interval);
     });
 
     createEffect(() => {
-        // This effect only runs once after the component mounts.
+        // This effect runs once after the component mounts.
 
         return () => {
-            // this cleanup will only run when the component mounts
+            // Cleanup runs only when the component unmounts
         };
     });
 
-    return <p>Elapsed Time: {seconds} seconds</p>;
+    return <p>Elapsed Time: {() => seconds.value} seconds</p>;
+}
+```
+
+### Cleanup in Functional Components
+
+The built-in `cleanUp` function allows you to define cleanup logic for any functional component.  
+Since functional components only render once, any logic can be written inline for better clarity.
+
+```jsx
+import { createSignal, cleanUp } from "refract-js";
+
+function AlternateTimerComponent() {
+    const seconds = createSignal(0);
+
+    // Since the component renders once, logic can be written synchronously
+    const interval = setInterval(() => {
+        seconds.update((prev) => prev + 1);
+    }, 1000);
+
+    // Cleanup function to clear the interval when the component unmounts
+    cleanUp(() => {
+        clearInterval(interval);
+    });
+
+    return <p>Elapsed Time: {() => seconds.value} seconds</p>;
 }
 ```
 
+### Ref's for dom elements
+
+Use the `createRef` function to create references to dom elements.
+
+-   The `ref.current` is null until the component has rendered.
+-   `ref.current` property is defined when inside a effect or inside any event listener.
+
+```jsx
+import { createEffect, createRef } from "refract-js";
+
+export default function Form() {
+    const inputRef = createRef();
+
+    createEffect(() => {
+        console.log(inputRef.current); // it is defined here
+    });
+
+    function handleClick() {
+        inputRef.current.focus(); // is is defined here
+    }
+
+    console.log(inputRef.current); // prints null to the console
+
+    return (
+        <>
+            <input ref={inputRef} />
+            <button onClick={handleClick}>Focus the input</button>
+        </>
+    );
+}
+```
+
+### Handling Asynchronous Tasks
+
+The `createPromise` function allows handling promises and asynchronous tasks with ease.
+
+#### Syntax:
+
+```jsx
+type Data = {
+    // typedata
+}
+const getData = async () => {
+    const data = await fetch(...)
+
+    return data as Data;
+};
+
+const promise = createPromise(getData);
+
+promise.data;    // Data  | null
+
+promise.error;   // Error | null
+
+promise.status;  // "pending" || "resolved" || "rejected"
+```
+
+#### Example:
+
+```jsx
+import { createPromise } from "refract-js";
+
+const getUser = async () => {
+    try {
+        const response = await axios.get("https://jsonplaceholder.typicode.com/users/1");
+        return response.data.username;
+    } catch (err) {
+        throw new Error("Cannot fetch User. Error: " + (err as Error).message);
+    }
+};
+const Users = () => {
+    const promise = createPromise(getUser);
+
+    return (
+        <div>
+            {() => {
+                if (promise.value.data) {
+                    return <div>{promise.value.data}</div>;
+                }
+                if (promise.value.error) {
+                    return <div>{promise.value.error.message}</div>;
+                }
+                return <div>Loading...</div>;
+            }}
+        </div>
+    );
+};
+
+export default Users;
+```
+
+### Lazy Loading Components
+
+You can use the built-in `lazy` function to load components only when they are needed. This improves initial load times and enables a smoother user experience by displaying a pending UI while the component loads.
+
+> Note: Lazy loading only works for loading functional components.
+> Important Points:
+
+-   The `lazy` function returns another functional component that wraps your imported component.
+-   The new component has two extra props `errorFallback` and `fallback`.
+    -   `fallback` takes another component or jsx as a fallback UI while the component loads.
+    -   `errorFallback` takes a fallback component or a function with the error as argument ie.,
+
+```jsx
+ errorFallback = {(error)=><div>{error.message}</div>}
+```
+
+Example:
+
+```jsx
+import { lazy } from "refract-js";
+
+const Component = lazy(() => import("./Component.tsx"));
+
+const App = ()=>{
+
+    return (
+
+        <div>
+            <Component otherProps = {...} fallback = {<div>Loading...</div>} errorFallback = {(error)=><div>{error.message}</div>} />
+        </div>
+    )
+}
+
+```
+
+### Context/Global State
+
+Refract doesn’t come with a built-in way to create context or global state—but who needs that when you can just toss your signals into a separate file and import them wherever you want? It works exactly as expected. It’s just JavaScript, so why overcomplicate things? 🤷‍♂️
+
 ## API Reference
 
 ### `createElement(type, props, ...children)`
 
-Creates a virtual DOM element.
+Creates a virtual DOM element. This function is used internally by JSX to convert JSX syntax into virtual DOM representations.
 
 ### `render(element, container)`
 
-Renders a JSX component to the DOM.
+Renders a JSX component to the DOM. It takes a JSX element and a container DOM node as parameters.
+
+### `createSignal(initialValue)`
+
+Creates a signal for state management.
+
+-   **Properties:**
+    -   `value`: A read-only reactive value.
+-   **Methods:**
+    -   `update(newValue | updater)`: Updates the signal's value.
+
+### `computed(computation)`
+
+Creates a computed value that automatically updates when its dependent signals change.
+
+-   **Parameter:**
+    -   `computation`: A function that returns a computed value based on one or more signals.
+
+### `createEffect(effect)`
+
+Creates an effect that runs after the component has mounted and whenever its dependent signals update.
+
+-   **Parameter:**
+    -   `effect`: A function that can optionally return a cleanup function.
+
+### `cleanUp(cleanupFn)`
+
+Registers a cleanup function to be executed when the component unmounts.
+
+-   **Parameter:**
+    -   `cleanupFn`: A function that performs cleanup operations.
+
+### `createRef()`
+
+Creates a reference object for DOM elements.
+
+-   **Property:**
+    -   `current`: Initially `null`, then set to the DOM element once rendered.
+
+### `createPromise(asyncFunction)`
+
+Wraps an asynchronous function into a promise handler that tracks its state.
+
+-   **Returns:**
+    -   A read-only signal with properties:
+        -   `data`: The resolved data or `null`.
+        -   `error`: The error object or `null`.
+        -   `status`: `"pending"`, `"resolved"`, or `"rejected"`.
+
+### `lazy(loader)`
 
-### `useState(initialValue)`
+Lazily loads a functional component.
 
-A simple state management hook.
+-   **Parameter:**
+    -   `loader`: A function that returns a promise resolving to a module with a default export (the component).
+-   **Additional Props on the Lazy Component:**
+    -   `fallback`: JSX to render while loading.
+    -   `errorFallback`: A fallback UI or function to render if an error occurs.
 
 ## Contributing
 

build/signals/batch.d.ts

@@ -1,6 +1,7 @@
 import { createSignal } from "../../src/index.ts";
 import ListsTest from "./ListsTest.tsx";
 import PerformanceTest from "./Performance.tsx";
+import Users from "./Promises.tsx";
 import StylesTest from "./StylesTest.tsx";
 import Test from "./Test.tsx";
 import TimerComponent from "./Timer.tsx";
@@ -16,7 +17,7 @@ const App = (props: any) => {
             <button onClick={() => visible.update((prev) => !prev)}>
                 Show/Hide
             </button>
-            {() => (visible.value ? <Test /> : "Hidden")}
+            {() => (visible.value ? <Users /> : "Hidden")}
         </>
     );
     // return <StylesTest />;