ReverUI

Effortless UI, Powerful Simplicity

• 🔥 Similar to React
• 🔑 TS Native 🔐 (But can be used with JS)
• ❌ No Virtual DOM 📦
• ❌ No compiler ⚙
• 📦 Rever Router (Router for ReverUI)

Try out now

Current functionality:

• [x] React-like JSX
• [x] Good intellisense
• [x] useSignal ♻
• [x] useEffect (state changes & mounted)
• [x] Fragments (<> </>)
• [x] Custom Hooks (must start with "$use")
• [x] Conditional Rendering (<$Show when={condition}/>) ❓
• [x] Loop Rendering (<$For each={arr} element={() => {...}}>) 📜
• [x] Event Handling (all events in lowercase) Click Key ...
• [x] Compatible with Vite Plugins (TailwindCSS, ...) ✨
• [x] Reusable Components (<$Component/>) 📦
• [x] Smart Re-rendering 🧠

The project is built on top of Vite

This are the features that Vite provides:

• JSX Parser (Configurable)
• Typescript config
• Bundler
• HMR (Hot Module Replacement)
• Support for CSS Preprocessors
• Transpiler

Try it yourself:

There is a prepared Vite template ready to use that includes examples & TailwindCSS configured by default

Steps:

• Clone the repository: git clone https://github.com/PiterWeb/ViteReverUITemplate.git
• Open the folder & install the dependencies: npm install
• Run the development enviroment: npm run dev

More Examples:

• $useSignal:

  import { $useSignal } from "reverui";
  
  export default function StateFullApp() {
  	const mySignal = $useSignal("initValue");
  
  	return <div>...</div>;
  }

• $useEffect:

  import { $useEffect, $useSignal } from "reverui";
  
  export default function StateFullApp() {
  	$useEffect(() => {
  		console.log("Mounted");
  	});
  
  	const counter = $useSignal(0);
  
  	$useEffect(() => {
  		console.log("Counter value changed to " + counter.value);
  	}, [counter]);
  
  	return <div>...</div>;
  }

• Example Counter Component:

  import { $useSignal, $useEffect } from "reverui";
  
  export default function StateFullApp() {
  	// UseEffect with no dependencies before $useSignal will be called only on mount
  	$useEffect(() => {
  		console.log("Mounted");
  	});
  
  	const counter = $useSignal(0);
  	// const signal = $useSignal(initialValue);
  
  	// $useEffect with dependencies will be called only when the dependencies change
  	$useEffect(() => {
  		console.log("Counter value changed to " + counter.value);
  	}, [counter]);
  
  	return (
  		<div>
  			<h1>Stateful Component</h1>
  			<p>
                  Counter: 
                  <Show when={counter.value === 0} element={() => <span>"You didn't click"</span>} />
                  <Show when={counter.value !== 0} element{() => <span>counter.value</span>} />
  			</p>
  			<button onclick={() => counter.value++}>Increment</button>
  		</div>
  	);
  }