https://github.com/ms-jpq/noact

Minimalist React (< 70 lines)
https://github.com/ms-jpq/noact

react typescript virtual-dom

Last synced: about 2 months ago
JSON representation

Minimalist React (< 70 lines)

• Host: GitHub
• URL: https://github.com/ms-jpq/noact
• Owner: ms-jpq
• Created: 2019-05-13T20:58:04.000Z (over 5 years ago)
• Default Branch: noact
• Last Pushed: 2023-08-22T05:28:14.000Z (about 1 year ago)
• Last Synced: 2024-04-20T19:44:38.531Z (5 months ago)
• Topics: react, typescript, virtual-dom
• Language: TypeScript
• Homepage:
• Size: 2.94 MB
• Stars: 315
• Watchers: 9
• Forks: 12
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - noact - jpq | 289 | (TypeScript)

README

        
# [~~Re~~Noact](https://ms-jpq.github.io/noact/)

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][auto complete gif] for free!

- **Simple:** [Only 60 lines][60 lines] of type declarations & rendering code. (and 10ish lines of code-gen code)

## [Example App](https://ms-jpq.github.io/noact-page/)

## 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][elm html]

```Typescript

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

```HTML



  +

  
♥

  -



```


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

```Typescript

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][mit]

[demo.gif]: https://raw.githubusercontent.com/ms-jpq/Noact/noact/_assets/demo.gif

[typedemo.png]: https://raw.githubusercontent.com/ms-jpq/Noact/noact/_assets/type_demo.png

[auto complete gif]: https://github.com/ms-jpq/Noact/blob/noact/_assets/auto_complete.gif

[elm html]: https://package.elm-lang.org/packages/elm/html/latest/

[mit]: https://github.com/ms-jpq/Noact/blob/noact/LICENSE

[60 lines]: https://github.com/ms-jpq/Noact/blob/noact/src/noact.ts