🍼 650B Virtual DOM - Use reactive JSX with minimal overhead

wesley luyten

Last update: Nov 12, 2022

Related tags

UI Framework jsx vdom

Overview

🍼 little-vdom

Forked from developit's little-vdom gist.

npm: npm i @luwes/little-vdom
cdn: unpkg.com/@luwes/little-vdom

650B Virtual DOM
Components
State
Diffing
Keys
Fragments
Refs
Style maps

Use reactive JSX with minimal overhead.

Usage (Codepen)

/** @jsx h */

// Components get passed (props, state, setState)
function Counter(props, { count = 0 }, update) {
  const increment = () => update({ count: ++count });
  return <button onclick={increment}>{count}</button>
}

function Since({ time }, state, update) {
  setTimeout(update, 1000); // update every second
  const ago = (Date.now() - time) / 1000 | 0;
  return <time>{ago}s ago</time>
}

render(
  <div id="app">
    <h1>Hello</h1>
    <Since time={Date.now()} />
    <Counter />
  </div>,
  document.body
);

Stop re-writing thirdweb snippets. Use thirdsnips to make it all snap!

🌈 thirdsnips Stop re-writing thirdweb snippets. Use thirdsnips to make it all snap! Thirdsnips is a tool which enhances the developer experience whil

May 11, 2022

The epic event-driven, front-end only, reactive JavaScript framework with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?

Active CSS Power-up your CSS with actions! Is the CSS of the future a full-on programming language? Active CSS is a JavaScript plugin that adds event-

Dec 30, 2022

Minimalist Virtual DOM library with JSX and factory pattern for stateful components.

Reflex Reflex JS is a tiny virtual-dom library with factory based functional components. See this example running See more complex demos Table of cont

Sep 2, 2022

Frontend framework for creating reactive UIs using direct DOM manipulation. (WIP)

Cosmos Framework A frontend framework for creating reactive UIs using direct DOM manipulation. (Heavily WIP) How to get started with Cosmos Framework

Nov 6, 2022

Create a schema object to encode/decode your JSON in to a compact byte buffer with no overhead.

schemapack The fastest and smallest JavaScript object serialization library. Efficiently encode your objects in to compact byte buffers and then decod

Nov 26, 2022

Fast and low overhead web framework, for Node.js

An efficient server implies a lower cost of the infrastructure, a better responsiveness under load and happy users. How can you efficiently handle the

Jan 2, 2023

Drop-in replacements for @apollo/client's useQuery, useMutation and useSubscription hooks with reduced overhead and additional functionality.

apollo-augmented-hooks Drop-in replacements for @apollo/client's useQuery, useMutation and useSubscription hooks with reduced overhead and additional

Nov 18, 2022

Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture, inspired by Hapi and Express.

Oct 11, 2022

A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.

svelte-webcomponents If you’re using web-components or if you like the project, please ★ this repository to show your support! 🤩 The world's most eas

Nov 9, 2022

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Fast 3kB alternative to React with the same modern API. All the power of Virtual DOM components, without the overhead: Familiar React API & patterns:

Jan 8, 2023

A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM

Vidact Vidact compiles your React source codes to VanillaJS code with No Virtual DOM ™️ . It is similar to Svelte, but unlike Svelte, Vidact does not

Dec 22, 2022

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Fast 3kB alternative to React with the same modern API. All the power of Virtual DOM components, without the overhead: Familiar React API & patterns:

Dec 31, 2022

A library to add a virtual Trackball to your DOM

Trackball.js - 3D Trackballs for your Website Trackball.js is a small JavaScript library on top of Quaternion.js to enable free 3D rotation of element

Nov 27, 2022

Library to build UI based on virtual DOM

vidom Vidom is just a library to build UI. It's highly inspired from React and based on the same ideas. Its main goal is to provide as fast as possibl

Nov 20, 2022

minimalist virtual dom library

petit-dom A minimalist virtual DOM library. Supports HTML & SVG elements. Supports Render functions and Fragments. Custom components allows to build y

Dec 12, 2022

🦁 1kb compiler-augmented virtual DOM. It's fast!

English | 中文 1kb compiler-augmented virtual DOM. It's fast! Current Virtual DOM implementations are inadequate—Ranging from overcomplicated to abando

Jan 5, 2023

Pure and simple virtual DOM library

Maquette Maquette is a Javascript utility which makes it easy to synchronize the DOM tree in the browser with your data. It uses a technique called 'V

Jan 4, 2023

A Fast & Light Virtual DOM Alternative

hyper(HTML) 📣 Community Announcement Please ask questions in the dedicated discussions repository, to help the community around this project grow ♥ A

Dec 30, 2022

Builds components using a simple and explicit API around virtual-dom

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to

Dec 15, 2022

Comments

Fix reordering components that return Fragments

This should ideally work, I couldn't find a solution right away. This PR fixed the same bug in Preact: https://github.com/preactjs/preact/pull/1515

https://github.com/luwes/little-vdom/blob/3b1b1497d8b69420d8daa30980115fee74881404/test.jsx#L376-L407
help wanted

opened by luwes 0

Owner

wesley luyten

Coder, mnmalist, perf junkie, UI/video @muxinc

GitHub

A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.

svelte-webcomponents If you’re using web-components or if you like the project, please ★ this repository to show your support! ?? The world's most eas

28 Nov 9, 2022

🍼 650B Virtual DOM - Use reactive JSX with minimal overhead

Related tags

Overview

🍼 little-vdom

Usage (Codepen)

You might also like...

Stop re-writing thirdweb snippets. Use thirdsnips to make it all snap!

The epic event-driven, front-end only, reactive JavaScript framework with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?

Minimalist Virtual DOM library with JSX and factory pattern for stateful components.

Frontend framework for creating reactive UIs using direct DOM manipulation. (WIP)

Create a schema object to encode/decode your JSON in to a compact byte buffer with no overhead.

Fast and low overhead web framework, for Node.js

Drop-in replacements for @apollo/client's useQuery, useMutation and useSubscription hooks with reduced overhead and additional functionality.

Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture, inspired by Hapi and Express.

A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

A library to add a virtual Trackball to your DOM

Library to build UI based on virtual DOM

minimalist virtual dom library

🦁 1kb compiler-augmented virtual DOM. It's fast!

Pure and simple virtual DOM library

A Fast & Light Virtual DOM Alternative

Builds components using a simple and explicit API around virtual-dom

Comments

Fix reordering components that return Fragments

Owner

wesley luyten

A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM

A functional and reactive JavaScript framework for predictable code

Write JSX-driven components with functions, promises and generators.

Yet Another JSX using tagged template

KioskBoard - A pure JavaScript library for using virtual keyboards.

Next-generation DOM manipulation

A rugged, minimal framework for composing JavaScript behavior in your markup.

🌙 The minimal & fast library for functional user interfaces