Skip to content

ms-jpq/noact

noact
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
ci
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

ReNoact

Noact is a minimal self-rendering Virtual DOM library.

  • Declarative: Pretty much like React, without the JSX compilation of course, hence the name.
  • Type safe: Noact is completely typesafe, which means you get static type checking for free!
  • Simple: Only 60 lines of type declarations & rendering code. (and 10ish lines of code-gen code)

Example App

How it feels to write Noact

demo.gif

- Explosions -

Even has support for style auto complete

typedemo.png

Usage

Noact is inspired by the syntax of the elm HTML engine

import { button, div } from "./NoactElements"
const component1 = div({},
    button({ onclick: () => alert(":D"), txt: "+" }),
    div({ txt: "♥" }),
    button({ onclick: () => alert("D:"), txt: "-" })
)

component1 is a memoized () => HTMLElement function, component1() will give you back

<div>
  <button>+</button>
  <div></div>
  <button>-</button>
</div>

You can use component1 as it is, or compose it in a Virtual DOM configuration

import { createMountPoint } from "./Noact"
const mount = createMountPoint(document.querySelector(`#root`))
const remount = () => mount(
    component1,
    span({ txt: new Date().toString() })
)
setInterval(remount, 1000)

Here the root element will be populated with both component1 and span. Every 1000ms, #root > span and only #root > span will be updated.

In essence, component1 is both the rendering function, and the virtual DOM.

License

MIT License

About

Minimalist React (< 70 lines)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published