🧩 rh.js

🧩 lightweight & powerful framework

FEATURES:

• Packed main.js only <~ 13kb (gzip)
• Not extras syntax, all in js.
• Less virtual dom, always real dom.
• Hooks without any restrictions.
• Extremely high performance, most renders do not require diff.
• Develop applications in any style, react vue solid rxjs even elm style.
• Ubiquitous responsiveness, even across clients and across endpoints (WIP)

Packages

Package	Version	Size	Description
@rhjs/core			core code.
@rhjs/hooks			hooks, such as createEffect createState ...
@rhjs/builtin			builtin function, such like For / lazy / Portal.
@rhjs/tag			Some convenient-to-use template string tools, such like html / raw / text.
@rhjs/hyper			Building components functionally.
@rhjs/observable			Minimalist rxjs-like.
@rhjs/atomic-css			tailwindcss runtime.
@rhjs/query	🚧	🚧	Porting react-query.

Table of Contents

• 🧩 rh.js
• Packages
• Table of Contents
• Quick Start
  • smallest hello world
  • More reactivity
• TRY IT
• Maintainers
• Contributing
• LICENSE

Quick Start

smallest hello world

<script type="importmap">
{
  "imports": {
    "@rhjs/core": "https://unpkg.com/@rhjs/core@latest/dist/main.module.mjs",
    "@rhjs/hooks": "https://unpkg.com/@rhjs/hooks@latest/dist/main.module.mjs",
    "@rhjs/tag": "https://unpkg.com/@rhjs/tag@latest/dist/main.module.mjs"
  }
}
</script>
<div id="app"></div>
<script type="module">
import { html } from "@rhjs/tag";

document.body.append(
  html`
    <h1>Hello world, @rhjs 🎉</h1>
  `
)
</script>

More reactivity

<script type="importmap">
{
  "imports": {
    "@rhjs/core": "https://unpkg.com/@rhjs/core@latest/dist/main.module.mjs",
    "@rhjs/hooks": "https://unpkg.com/@rhjs/hooks@latest/dist/main.module.mjs",
    "@rhjs/tag": "https://unpkg.com/@rhjs/tag@latest/dist/main.module.mjs"
  }
}
</script>
<div id="app"></div>
<script type="module">
  import { mount } from "@rhjs/core";
  import { createState } from "@rhjs/hooks";
  import { html } from "@rhjs/tag";

  const [count, setCount] = createState(0);

  mount(
    "#app",
    html`
      <h1>Hello world, @rhjs 🎉</h1>
      <button onclick=${() => setCount((c) => c + 1)}>
        count: ${count}
      </button>
    `
  );
</script>

online in codesandbox

TRY IT

• playground: https://zhzluke96.github.io/rhjs-playground/
• template hub: 🚧
• component hub: 🚧

Maintainers

@zhzluke96

Contributing

Feel free to dive in! Open an issue or submit PRs.

LICENSE

Code is licensed under the Apache License 2.0.