nanomorph - 🚅 - Hyper fast diffing algorithm for real DOM nodes

•    Javascript

It's common to work with lists of elements on the DOM. Adding, removing or reordering elements in a list can be rather expensive. To optimize this you can add an id attribute to a DOM node. When reordering nodes it will compare nodes with the same ID against each other, resulting in far fewer re-renders. This is especially potent when coupled with DOM node caching. Sometimes we want to tell the algorithm to not evaluate certain nodes (and its children). This can be because we're sure they haven't changed, or perhaps because another piece of code is managing that part of the DOM tree. To achieve this nanomorph evaluates the .isSameNode() method on nodes to determine if they should be updated or not.

nanocomponent - 🚃 - create performant HTML components

•    Javascript

Native DOM components that pair nicely with DOM diffing algorithms. These are some common patterns you might encounter when writing components.

dom-notifications - Atom-inspired notifications component

•    CSS

Have a look at the example page. Install with npm install dom-notifications --save and use something like browserify to create a bundle for the browser.

yo-yoify - Transform choo, yo-yo or bel template strings into pure and fast document calls

•    Javascript

Transform choo, yo-yo, or bel template strings into pure and fast document calls. yo-yo and bel, without this transform, pass template literals to hyperx. hyperx then parses and extracts the tags. bel then turns those tags into calls to document.createElement().

fun-component - A functional approach to authoring performant HTML components using plugins

•    Javascript

A functional approach to authoring performant HTML components using plugins. Syntactic suggar on top of nanocomponent. Pass in a function and get another function back that handles rerendering as needed when called upon. The most straightforward use is to pass in a function and have the default shallow diff figure out whether to rerender the component on consecutive calls.

nanomap - Functionally map data into stateful nanocomponents

•    Javascript

Functionally map data into stateful nanocomponents. Import Nanomap component class.

twitter-component - A native DOM component for embedding tweets

•    Javascript

A native DOM component wrapper for embedded tweets. Import TwitterComponent component class.

awesome-yo-yo - Modules & resources related to yo-yo

Modules & resources related to the yo-yo module. A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals, powered by bel and morphdom and based on the "yo-yo" data binding pattern: data down, actions up.

beldown - create dom nodes from markdown inside tagged template strings using bel & marked

•    Javascript

Create dom nodes from markdown inside tagged template strings using bel & marked. Because maybe you're working with yo-yo or choo and want a way to easily turn markdown into dom nodes they can use.

choo-redirect - 🎬 - Redirect a view to another view

•    Javascript

Redirect a view to another view. Create a new view that redirects to a route. Can take an optional second argument for the root selector which is used as the entry point of the application. Defaults to document.body.

base-elements - A selection of configurable native DOM UI elements

•    Javascript

A selection of configurable native DOM UI elements. Inspired by rebass and tachyons.

cache-element - Cache an HTML element that's used in DOM diffing algorithms

•    Javascript

Cache an HTML element that's used in DOM diffing algorithms that respect element.isSameNode(). Create a new instance of cache-element. Takes a render function that is called when element.render() is called and a prior call doesn't have a node mounted on the DOM.

choo-pull - Wrap handlers to use pull-stream in a choo plugin

•    Javascript

Wrap handlers to use pull-stream in a choo plugin. This is intended to go beyond basic choo usage, and tread into the domain of managing asynchronous complexity using streams / FRP. While streams code takes longer to write up front, resulting code is generally stateless, pretty damn fast and surprisingly reusable. pull-streams are a minimal version of streams that weigh 200 bytes and handle backpressure phenomenally.