Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/piterweb/reverui
< 3kb React Alternative that works on top lf Vite
https://github.com/piterweb/reverui
javascript jsx jsx-elements jsx-renderer jsx-syntax preact react reverui signals typescript ui-library
Last synced: 3 months ago
JSON representation
< 3kb React Alternative that works on top lf Vite
- Host: GitHub
- URL: https://github.com/piterweb/reverui
- Owner: PiterWeb
- License: mit
- Created: 2024-09-16T18:20:08.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-05T12:37:48.000Z (3 months ago)
- Last Synced: 2024-10-10T07:42:50.880Z (3 months ago)
- Topics: javascript, jsx, jsx-elements, jsx-renderer, jsx-syntax, preact, react, reverui, signals, typescript, ui-library
- Language: TypeScript
- Homepage: https://reverui.vercel.app/
- Size: 455 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReverUI
Effortless UI, Powerful Simplicity
- 🔥 Similar to React
- 🔑 TS Native 🔐 (But can be used with JS)
- ❌ No Virtual DOM 📦
- ❌ No compiler ⚙
- 📦 [Rever Router](https://github.com/PiterWeb/ReverRouter) (Router for ReverUI)
### Try out [now](https://stackblitz.com/github/PiterWeb/ViteReverUITemplate)
### 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 (ternary operator or <$Show when={condition}/>) ❓
- [x] Loop Rendering (array.map) 📜
- [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](https://github.com/PiterWeb/ViteReverUITemplate) 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:
```tsx
import { $useSignal } from "reverui";
export default function StateFullApp() {
const mySignal = $useSignal("initValue");
return
...;
}
```
- $useEffect:
```tsx
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
...;
}
```
- Example Counter Component:
```tsx
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 (
Stateful Component
{" "}
Counter: {counter.value === 0
? "You didn't click"
: counter.value}{" "}
counter.value++}>Increment
);
}
```