yash-react ⚛️

A lightweight, production-ready frontend framework built from scratch utilizing a concurrent Fiber architecture, virtual DOM reconciliation, and native state management hooks.

Built to demonstrate the core mechanics of modern UI libraries (like React) without the weight of massive dependencies. Perfect for integrating into custom Vite build pipelines.

🚀 Features

• Fiber Architecture: Cooperative scheduling using concurrent loops to keep UI rendering smooth and non-blocking.
• Virtual DOM Diffing: Intelligent reconciliation layers that minimize direct physical DOM manipulations.
• State & Lifecycle Hooks: Clean implementation of custom useState and useEffect hooks with cleanups.
• Dynamic Styling: Natively parses both string-based CSS and JavaScript object styles (style={{ ... }}).
• Zero Dependencies: Pure, vanilla JavaScript optimized to hook seamlessly into modern esbuild and Vite workflows.

📦 Installation

Install yash-react directly into your Vite or modern JavaScript project:

npm install yash-react

⚙️ Quick Start (Vite Configuration)

To compile JSX syntax using this custom framework, configure your vite.config.js to route compilation through the yash-react factory.

Make sure to disable the automatic React runtime by setting jsx: 'transform'.

JavaScript // vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    jsx: 'transform',
    jsxFactory: 'createElement',
    jsxFragment: 'Fragment',
  },
});

💻 Usage Example

Import your hooks and layout engines straight from the package layout. Here is an example of a self-contained component managing state, side-effects, and dynamic styles.

src/App.jsx JavaScript

import { createElement, useState } from 'yash-react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="app-container">
      <h1>🚀 Welcome to yash-react!</h1>
      <p style="margin-top: 10px; color: #888;">
        Edit <code>src/App.jsx</code> and save to test HMR.
      </p>
      
      <button 
        className="count-button"
        onClick={() => setCount(c => c + 1)}
      >
        Count is: {count}
      </button>
    </div>
  );
}

export default App;

src/main.jsx Initialize the concurrent rendering pipeline and mount it to your HTML file.

JavaScript

import { render, createElement } from 'yash-react';
import App  from './app.jsx';
import './index.css';

const container = document.getElementById("root");
render(<App />, container);

src/index.css Initialise the CSS boilerplate

:root {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --accent-color: #007aff; /* A crisp, system-blue accent */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.app-container {
  text-align: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.count-button {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  margin-top: 24px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.count-button:hover {
  background-color: #005bb5;
  transform: scale(1.05);
}

.count-button:active {
  transform: scale(0.95);
}

📖 API Reference

createElement(type, props, ...children) Generates virtual DOM blueprints. Handles dynamic style configuration objects mapping natively to browser targets, and natively manages Text Nodes.

render(element, container) Initializes the concurrent rendering pipeline and roots the fiber layout tree directly into physical target containers.

useState(initial) Provides component-level state preservation through reconciliation render phases. Supports functional state updates.

useEffect(callback, deps) Invokes execution hooks post-paint phase. Manages structural cleanup functions seamlessly when dependency states alter.

📄 License

MIT License © Yash Raj Gupta