mini-react-dom/README.md

A lightweight React-like DOM renderer with JSX, hooks, context, SSR and lazy support

# mini-react-dom

A lightweight React-like DOM renderer with JSX, hooks, context, SSR, lazy loading, and minimal VDOM reconciliation.

## ✨ Features

- ⚛️ Virtual DOM and JSX support
- 🧠 `useState`, `useEffect`, `useMemo`, `useCallback`
- 🧩 `createContext` and `useContext`
- 🔄 Diffing & Reconciliation
- 🧵 Hydration for SSR
- 📦 `lazy()` and `<Suspense>` support
- 🎯 Minimal and easy to understand

---

## 📦 Installation

```bash
npm install mini-react-dom
```

---

## 🚀 Usage

```jsx
/** @jsx createElement */
import {
  createElement,
  render,
  useState,
  useEffect,
  useMemo,
  useCallback,
  createContext,
  useContext,
  lazy,
  Suspense,
} from "mini-react-dom";

const ThemeContext = createContext("light");
const LazyComponent = lazy(() => import("./HeavyComponent.js"));

function App() {
  const [count, setCount] = useState(0);
  const theme = useContext(ThemeContext);
  const doubled = useMemo(() => count * 2, [count]);

  const handleClick = useCallback(() => console.log(count), [count]);

  useEffect(() => {
    console.log("Rendered or updated");
  }, [count]);

  return (
    <ThemeContext.Provider value="dark">
      <h1>Hello</h1>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={handleClick}>Log</button>

      <Suspense fallback={<p>Loading...</p>}>
        <LazyComponent />
      </Suspense>
    </ThemeContext.Provider>
  );
}

render(<App />, document.getElementById("root"));
```

---

## 🧪 Server-Side Rendering (SSR)

```js
import { createElement } from "mini-react-dom";
import { renderToString } from "mini-react-dom";
import { App } from "./App.jsx";

const html = renderToString(<App />);
```

On the client:

```js
import { hydrate } from "mini-react-dom";
hydrate(<App />, document.getElementById("root"));
```

---

## 📁 File Structure

```
src/
├── core/
│   ├── createElement.js
│   ├── render.js
│   ├── hooks.js
│   ├── context.js
│   ├── redux.js
│   ├── renderToString.js
│   ├── lazy.js
│   └── suspense.js
├── index.js
```

---

## 🛠 Dev

```bash
npm run dev      # Start Vite
npm run build    # Bundle for publishing
```

---

## 📜 License

MIT © Abuzcoder