ms-jpq / Noact
Minimalist React (< 70 lines)
Stars: ✭ 278
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Noact
respo.cljs
A virtual DOM library built with ClojureScript, inspired by React and Reagent.
Stars: ✭ 232 (-16.55%)
Mutual labels: virtual-dom
tvos-soap4.me
tvOS app for soap4.me video service https://soap4.me/
Stars: ✭ 22 (-92.09%)
Mutual labels: virtual-dom
virtual-jade
Compile Jade templates to Hyperscript for Virtual DOM libraries
Stars: ✭ 31 (-88.85%)
Mutual labels: virtual-dom
blockml-component
A component-based virtual DOM system (similar to React) for blockml.
Stars: ✭ 23 (-91.73%)
Mutual labels: virtual-dom
virtual-dom
a simple virtual-dom implementation for understanding how it works
Stars: ✭ 22 (-92.09%)
Mutual labels: virtual-dom
markyp-bootstrap4
Create Bootstrap 4 web pages using purely Python.
Stars: ✭ 19 (-93.17%)
Mutual labels: virtual-dom
prezzy-vdom-example
👓 From my Youtube Video, "Let's Build a Virtual DOM from Scratch"
Stars: ✭ 58 (-79.14%)
Mutual labels: virtual-dom
concur-replica
Server-side VDOM UI framework for Concur
Stars: ✭ 136 (-51.08%)
Mutual labels: virtual-dom
blop-language
Blop is a Web oriented programming language that compiles to JavaScript
Stars: ✭ 41 (-85.25%)
Mutual labels: virtual-dom
purescript-freedom
A practical type-safe UI library for PureScript.
Stars: ✭ 31 (-88.85%)
Mutual labels: virtual-dom
Sharpen
(Demo) A v-dom "diff" engine based on WebAssembly, aim to build efficient and fluent web apps.
Stars: ✭ 20 (-92.81%)
Mutual labels: virtual-dom
CalDOM
An agnostic, reactive & minimalist (3kb) JavaScript UI library with direct access to native DOM.
Stars: ✭ 176 (-36.69%)
Mutual labels: virtual-dom
Switzerland
🇨🇭Switzerland takes a functional approach to Web Components by applying middleware to your components. Supports Redux, attribute mutations, CSS variables, React-esque setState/state, etc… out-of-the-box, along with Shadow DOM for style encapsulation and Custom Elements for interoperability.
Stars: ✭ 261 (-6.12%)
Mutual labels: virtual-dom
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
- Explosions -
Even has support for style auto complete
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].