🌞 SunnyReact

⚠️ Not production ready. Made for fun and understanding React internals.

A tiny React-like library built for learning React internals — Fiber, state, and lifecycle — but with a sunny twist ☀️.

👉 Perfect for developers who want to peek under the hood of React without drowning in complexity.

🚀 Install

npm install sunny-react

✨ Features

• ⚡ Virtual UI (like Virtual DOM)
• 🪢 Fiber-like rendering with our "SunnyFiber"
• 🔥 Simple state management via UIUpdaterState
• 🌱 Lifecycle hooks:
  • runOnlyOnce
  • runOnEachRender
  • runOnStateChange
• ⚙️ Works with JSX (via Vite + Babel pragma → drawPiece)

📦 Example Usage

Counter App

import {
  drawPiece,
  render,
  UIUpdaterState,
  runOnlyOnce,
  runOnEachRender,
  runOnStateChange
} from "sunny-react";

function SunnyCounter() {
  UIUpdaterState({
    count: 0,
    countUpdater: (val) => val
  });

  runOnlyOnce(() => console.log("Mounted 🌞"));
  runOnEachRender(() => console.log("Rendered 🔄"));
  runOnStateChange(([count]) => console.log("Count updated:", count));

  return (
    <div>
      <h1>Count = {count}</h1>
      <button onClick={() => countUpdater(count + 1)}>Increment</button>
      <button onClick={() => countUpdater(0)}>Reset</button>
    </div>
  );
}

const root = document.getElementById("root");
render(SunnyCounter, root);

⚡ Project Structure (when used with CSRA)

my-app/
├── package.json
├── vite.config.js
├── index.html
└── src/
    ├── App.jsx
    ├── main.jsx
    └── global.css

🛠️ How It Works

SunnyReact replaces React’s jargon with funny but descriptive names:

• drawPiece() → like React.createElement()
• Splitter → breaks down work into small chunks (Fiber-ish)
• Differentiator → compares old vs new Virtual UI (diffing)
• FinalToucher → applies changes to real DOM

🖼️ Demo

When scaffolded via create-sunny-react-app,
you’ll see a dark-themed intro page + working counter demo with lifecycle logs.

🛠️ Requirements

• Node.js ≥ 16
• npm ≥ 8

📜 License

MIT © 2025 Sunny Ghodeswar