ijk - Transforms arrays into virtual dom trees; a terse alternative to JSX and h

  •        44

This is a tiny recursive factory function that allows you to write terse, declarative representations of virtual DOM trees. It does not try mimic HTML or JSON syntax but instead a series of nested arrays to represent user interfaces. The above call to h returns a virtual DOM tree with named attributes that respect the provided schema. Expected output here, would be of the shape { x: 'main', y: {}, z: [...] }. A tree like this can be passed as a node to patch, diff and render algorithms exposed by libraries like Hyperapp, Ultradom or Preact.




Related Projects

hyperx - 🏷 - tagged template string virtual dom builder

  •    Javascript

This module is similar to JSX, but provided as a standards-compliant ES6 tagged template string function. hyperx works with virtual-dom, react, hyperscript, or any DOM builder with a hyperscript-style API: h(tagName, attrs, children).

omi - Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.

  •    Javascript

Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript. Different to preact, you need not to import { h } from 'omi'.

htm - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support

  •    Javascript

htm is JSX-like syntax in plain JavaScript - no transpiler necessary. Develop with React/Preact directly in the browser, then compile htm away for production.

nerv - A blazing fast React alternative, compatible with IE8 and React 16.

  •    Javascript

Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinier package size and better browser compatibility. 💫 Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.

PREACT - Fast 3kB alternative to React, with the same ES2015 API

  •    Javascript

PREACT is a fast 3kB alternative to React, with the same ES2015 API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

react-hyperscript - Hyperscript syntax for React.js markup

  •    Javascript

Hyperscript syntax for React.js markup. If you're using React 0.11, use react-hyperscript 1.x.x. For later versions, use react-hyperscript 2.x.x.

marksy - A markdown to custom VDOM components library

  •    Javascript

A markdown to custom components library. Supports any virtual DOM library. This will be converted to the component above. You can pass in any kind of props, as if it was normal code. If you are not familiar with h, this is a convention for creating elements and components in virtual dom implementations.

hyperapp - 1 kB JavaScript micro-framework for building declarative web applications

  •    Javascript

Hyperapp is a JavaScript micro-framework for building web applications. 👋 Hyperapp 2.0 is coming out soon! Try it from the V2 branch right now and be sure to follow @HyperappJS for all the Hyperapp news & updates.

hyperscript-helpers - Terse syntax for hyperscript.

  •    Javascript

Terse syntax for hyperscript. Less than 50 lines of code, taking your hyperscripting to the next level.

virtual-dom - A Virtual DOM and diffing algorithm

  •    Javascript

Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus. virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.

asm-dom - A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)

  •    C++

asm-dom is a minimal WebAssembly virtual DOM to build C++ SPA (Single page applications). You can write an entire SPA in C++ and compile it to WebAssembly (or asmjs as fallback) using Emscripten, asm-dom will call DOM APIs for you. This will produce an app that aims to execute at native speed by taking advantage of common hardware capabilities, also, you can use your C/C++ code without any change, you haven't to create a binding layer to use it (as we have to do if we want to use a C++ lib from JS). Basically we are creating an app in C++ that call javascript if needed instead of the opposite. You can write only once in C++ and share as much code as possible with desktop/mobile apps and web site. If you want to learn more about performance, please see this. asm-dom is a low-level virtual DOM library. It is unopinionated with regards to how you should structure your application.

million - 🌈 <1kb virtual DOM - it's fast!

  •    TypeScript

Current Virtual DOM implementations are inadequate—Ranging from overcomplicated to abandoned, most are unusable without sacrificing raw performance and size. Million aims to fix this, providing a library-agnostic Virtual DOM to serve as the core for Javascript libraries. Million doesn't require build tools by default, but it is highly recommended you use NPM to install.

yolk - :egg: A library for building asynchronous user interfaces.

  •    Javascript

A library for building asynchronous user interfaces. Familiar: Yolk is a small library built on top of Virtual DOM and RxJS. It exposes a very limited API so that you don't have to spend weeks getting up to speed. Yolk components are just plain functions that return JSX or hyperscript.

reshadow - Markup and styles that feel right

  •    Javascript

Please check the reshadow.dev website to get more information and examples. reshadow provides the Shadow DOM developer experience, but for the Virtual DOM with the Component way.

We have large collection of open source products. Follow the tags from Tag Cloud >>

Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.