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:

• React-like JSX
• Good intellisense
• useSignal ♻
• useEffect (state changes & mounted)
• [] Fragments (<> </>)
• Custom Hooks (must start with "$use")
• Conditional Rendering (ternary operator or <$Show when={condition}/>) ❓
• Loop Rendering (array.map) 📜
• Event Handling (all events in lowercase) Click Key ...
• Compatible with Vite Plugins (TailwindCSS, ...) ✨
• Reusable Components (<$Component/>) 📦
• 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: {counter.value === 0
  					? "You didn't click"
  					: counter.value}{" "}
  			</p>
  			<button onclick={() => counter.value++}>Increment</button>
  		</div>
  	);
  }