npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mercury

v14.2.0

Published

A truly modular frontend framework

Downloads

1,463

Readme

mercury

Deprecated: Not actively being worked on.

Instead tonic and https://tonic.technology/ are actively being worked on.

mercury has some interesting ideas but they are not very practical at scale. tonic is a lightweigth component system on top of web components that leverages the browsers HTML parser for the heavy lifting instead of virtual-dom.

It comes with a set of components which help with building apps more quickly by having some re-usable components out of the box.

Description

A truly modular frontend framework

To understand what I mean by truly modular just read the source

Examples

Hello world

'use strict';

var document = require('global/document');
var hg = require('mercury');
var h = require('mercury').h;

function App() {
    return hg.state({
        value: hg.value(0),
        channels: {
            clicks: incrementCounter
        }
    });
}

function incrementCounter(state) {
    state.value.set(state.value() + 1);
}

App.render = function render(state) {
    return h('div.counter', [
        'The state ', h('code', 'clickCount'),
        ' has value: ' + state.value + '.', h('input.button', {
            type: 'button',
            value: 'Click me!',
            'ev-click': hg.send(state.channels.clicks)
        })
    ]);
};

hg.app(document.body, App(), App.render);

Basic Examples

Intermediate Examples

Unidirectional examples

The following examples demonstrate how you can mix & match mercury with other frameworks. This is possible because mercury is fundamentally modular.

Disclaimer: The following are neither "good" nor "bad" ideas. Your milage may vary on using these ideas

Motivation

Mercury vs React

mercury is similar to react, however it's larger in scope, it is better compared against om or quiescent

  • mercury leverages virtual-dom which uses an immutable vdom structure
  • mercury comes with observ-struct which uses immutable data for your state atom
  • mercury is truly modular, you can trivially swap out subsets of it for other modules
  • mercury source code itself is maintainable, the modules it uses are all small, well tested and well documented. You should not be afraid to use mercury in production as it's easy to maintain & fix.
  • mercury encourages zero dom manipulation in your application code. As far as your application is concerned elements do not exist. This means you don't need to reference DOM elements when rendering or when handling events
  • mercury is compact, it's 11kb min.gzip.js, that's smaller than backbone.
  • mercury strongly encourages FRP techniques and discourages local mutable state.
  • mercury is highly performant, it's faster than React / Om / ember+htmlbars in multiple benchmarks TodoMVC benchmark
    animation benchmark TodoMVC benchmark source
  • mercury comes with FP features like time-travel / easy undo out of the box.
  • mercury is lean, it's an weekend's read at 2.5kloc. (virtual-dom is 1.1kloc, an evening's read.) compared to react which is almost 20kloc (a month's read)

Modules

mercury is a small glue layer that composes a set of modules that solves a subset of the frontend problem.

If mercury is not ideal for your needs, you should check out the individual modules and see if you can re-use something.

Alternatively if the default set of modules in mercury doesn't work for you, you can just require other modules. It's possible to for example, swap out vtree with react or swap out observ-struct with backbone

See the modules README for more information.

Documentation

See the documentation folder

FAQ

See the FAQ document

API

WIP. In lieu of documentation please see examples :(

Installation

npm install mercury

Development

If you want to develop on mercury you can clone the code

git clone [email protected]:Raynos/mercury
cd mercury
npm install
npm test

npm run tasks

  • npm test runs the tests
  • npm run jshint will run jshint on the code
  • npm run disc will open discify (if globally installed)
  • npm run build will build the html assets for gh-pages
  • npm run examples will start a HTTP server that shows examples
  • npm run dist will create a distributed version of mercury
  • npm run modules-docs will (re)generate docs of mercury modules

Inspirations

A lot of the philosophy and design of mercury is inspired by the following:

  • react for documenting and explaining the concept of a virtual DOM and its diffing algorithm
  • om for explaining the concept and benefits of immutable state and time travel.
  • elm for explaining the concept of FRP and having a reference implementation of FRP in JavaScript. I wrote a pre-cursor to mercury that was literally a re-implementation of elm in javascript (graphics)
  • reflex for demonstrating the techniques used to implement dynamic inputs.

Contributors

  • Raynos
  • Matt-Esch
  • neonstalwart
  • parshap
  • nrw
  • kumavis

MIT Licenced