# revaljs

> React-based front-end library code golf

Latest version **0.18.0** (published 2025-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install revaljs
pnpm add revaljs
yarn add revaljs
bun add revaljs
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.18.0 |
| Published | 2025-03-23 |
| First published | 2021-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | nguyenphuminh |
| Maintainers | xixdev |
| Keywords | dom, javascript, javascript-library, javascript-framework, frontend |

## Links

- npm: https://www.npmjs.com/package/revaljs
- Repository: https://github.com/nguyenphuminh/reval
- Homepage: https://github.com/nguyenphuminh/reval#readme
- Issues: https://github.com/nguyenphuminh/reval/issues
- npm.io page: https://npm.io/package/revaljs

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.18.0 (latest) — 2025-03-23
- 0.17.0 — 2025-02-07
- 0.16.2 — 2024-09-23
- 0.16.1 — 2024-09-22
- 0.16.0 — 2024-09-22
- 0.15.0 — 2024-02-19
- 0.14.0 — 2023-06-16
- 0.13.0 — 2023-02-12
- 0.12.0 — 2023-02-12
- 0.11.0 — 2023-02-11
- 0.10.0 — 2022-05-15
- 0.9.0 — 2021-12-24
- 0.8.0 — 2021-12-12
- 0.7.0 — 2021-12-09
- 0.6.0 — 2021-12-06
- … 6 more at https://npm.io/package/revaljs/versions

## README

## Get started

There are many ways to add Reval into your project.

### From browsers

The easiest option is to pull it from a CDN:
```html
<script src="https://unpkg.com/revaljs"></script>
```

Or for better load time, consider downloading the library from [our releases page](https://github.com/nguyenphuminh/reval/releases/).

And then get the necessary functions:
```js
const { el, mount, unmount, setState } = Reval;
```

### From npm

You can also just install it through `npm`:
```
npm i revaljs
```

And then get the required functions like this:
```js
const { el, mount, unmount, setState } = require("revaljs");
```

## Creating HTML elements in Reval

There is a handy dandy function called `el` to create HTML elements:

Syntax: `el(tagName, props, childNodes)`

Example:
```js
const hello = el("p", { id: "Hello" }, [
	"Hello, World!", // You can use normal text
	el("br")
]);
```

HTML equivalent:
```html
<p id="Hello">
	Hello, World!
	<br/>
</p>
```

Note that in `props`, you can also assign event handlers, for example:
```js
const hello = el("p", { id: "Hello": onclick: () => alert("You clicked me!") }, el("br"));
```


## Mount and unmount

You can mount an HTML element or a Reval component to another HTML element (container):
```js
mount(document.body, hello);
```

It will mount `hello` to `document.body`, so you will see `Hello, World!` rendered on the browser.

You can also unmount that element:
```js
unmount(document.body, hello);
```

You can mount the element before a specified element:
```js
mount(parent, child, before);
```

To re-render an element, pass in `true` as the fourth argument.
```js
mount(parent, child, before, true);
```


## Components

Reval components all have a basic form like this:
```js
class ComponentName {
	// this.render() returns an HTML element
	render() {
		return /* code goes here */;
	}
}

const componentName = new ComponentName();

// mount the component
mount(parent, componentName);
// unmount the component
unmount(parent, componentName);
```


## State

You can manage components' state using the `state` prop:
```js
this.state = {}
```

and change the state with `setState`:
```js
setState(component, { state: value });
```

The HTML element got re-rendered every time state is changed.

### Scope

Be careful when you pass in handlers for events, because if you use arrow functions, the scope will be inside the component's class, but if you use normal functions, the scope will be the HTML element itself with `this` pointed to the element.


## Component lifecycle

There are three lifecycle events in a Reval's component - `onmount` - when the component is mounted to a container, `onunmount` - when the component is unmounted from a container, and `onremount` - when a component is remounted to a different container.

You can pass in handlers for each events as methods of the component's class:

```js
	onmount() {
		// Gets triggered when component is mounted
	}

	onunmount() {
		// Gets triggered when component is unmounted
	}

	onremount() {
		// Gets triggered when component is remounted to another
		// parent or to the same parent with a different position
	}
```

## Creating a counter example!

Basically, we will create a `Counter` component, set the `counter` state to `1`. `render()` should return an HTML element with a list of child nodes consists of the current value of the counter, a button for incrementing the counter, a button for decrementing the counter. We will use `setState` to change the value of `counter` and re-render the element. Finally, we will create an instance of `Counter` called `counter` and mount it to `document.body`.

```js
class Counter {
	constructor() {
		this.state = {
			counter: 1
		};
	}

	render() {
		return el("h1", {}, [
			this.state.counter,
			
			el("br"),

			el("button", { 
				onclick: () => setState(this, { counter: this.state.counter + 1 })
			}, "Increment"),

			el("button", { 
				onclick: () => setState(this, { counter: this.state.counter - 1 })
			}, "Decrement")
		]);
	}
}
const counter = new Counter();

mount(document.body, counter);
```

## More on Reval

### Conditional rendering

You can just use the ternary operator to do conditional rendering:
```js
	render() {
		return 1 === 1 ? el("p", {}, "I'm fine") : el("p", {}, "I'm crazy");
	}
```

### Lists

Rendering a list of elements can be done easily with `map` and the spread operator.
```js
	render() {
		return el("ul", {}, [
			...[1, 2, 3].map(item => el("li", {}, item))
		]);
	}
```

This would generate:
```html
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
```

---
_Source: https://npm.io/package/revaljs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._