tivex
Version:
A Small, JSX library for creating Reactive-UIs.
73 lines (55 loc) • 2.56 kB
Markdown
## Tivex
A Small, JSX library for creating Reactive-UIs.
[](https://github.com/herudi/tivex)
[](https://npmjs.org/package/tivex)
[](http://badges.mit-license.org)
[](https://npmjs.org/package/tivex)
[](https://github.com/herudi/tivex)
## Core Concepts
`Tivex` uses Fine-Grained Reactivity as a strategy, instead of
DOM-Diffing/Virtual-DOM.
Tivex is reactive UI library that allows you to build user interfaces
using JSX syntax. It provides a simple and efficient way to create reactive
components without the overhead of a virtual DOM or complex state management
systems. Tivex is designed to be lightweight and easy to use, making it a great choice for building modern web applications.
## Features
- **Fine-Grained Reactivity**: Automatically tracks dependencies and updates
only the necessary parts of the UI.
- **JSX Syntax**: Write components using familiar JSX syntax, similar to React.
- **Simple State Management**: Use `$state` to create reactive state objects
that automatically update the UI when changed.
- **Automatic Dependency Tracking**: Use `$effect` to create reactive effects
that automatically re-run when their dependencies change.
- **Control Flow Components**: Use `<For>`, `<Show>`, `<Switch>`, and `<ErrorBoundary>` for conditional rendering and list rendering.
- **Lazy Loading**: Use `$lazy` to load components asynchronously, improving
performance and reducing initial load time.
- **DOM Interaction**: Use `$mount` and `$unmount` for managing DOM interactions
and cleanup.
- **Data Binding**: Use `bind:*` for two-way data binding in forms and inputs.
- **TypeScript Support**: Fully typed with TypeScript for better development
experience and type safety.
## Create a tivex project
```bash
npm create tivex
```
## Usage
```tsx
import { $effect, $state, render } from 'tivex';
function Counter() {
const state = $state({ count: 0 });
$effect(() => {
console.log(state.count);
});
console.log('Only one render');
return (
<div>
<button onClick={() => state.count++}>increment</button>
<h1>
{state.count} x 2 = {state.count * 2}
</h1>
</div>
);
}
render(<Counter />, document.body);
```
more docs => https://github.com/herudi/tivex