sbrichardson / million

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

Home Page:https://million.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Million Logo

English | 中文

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

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 that focus on precompilation and static analysis.

CI Code Size NPM Version Code Coverage

→ Check out the Million documentation

Why Million?

  • 🦁 Built for libraries that compile
  • 📦 Lightweight bundle size (<1kb brotli+min)
  • Fast runtime operations
  • 🛠️ Composable using drivers, sensible by default

Installing Million

Million doesn't require build tools by default, but it is highly recommended you use NPM to install.

npm install million

Quick Start

Below is an extremely simple implementation of a Counter page using Million.

import { m, createElement, patch } from 'million';

const view = (seconds) => m('p', undefined, [`Time elapsed: ${seconds}`]);

const el = createElement(view(0));

let seconds = 0;

setInterval(() => {
  patch(el, view(seconds));
  seconds++;
}, 1000);

document.body.appendChild(el);

patch() function has a standard interface that is used in many Virtual DOM libraries. First argument is a DOM node that will be used as the live DOM reference, and the second one is a Virtual DOM to render.

createElement() function converts a "Virtual DOM" node into a real DOM node.

m() function will instantiate a "Virtual DOM" node for an element.

→ See live example

Sponsors

Vercel

Want your logo here? → Sponsor Million

Resources & Contributing Back

Looking for the docs? Check the documentation out.

Have a question about Million? Post it on the GitHub Discussions and ask the community for help.

Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!

We expect all Million contributors to abide by the terms of our Code of Conduct.

→ Start contributing on GitHub (pnpm welcome)

Acknowledgments

Million takes heavy inspiration from snabbdom, ivi, mikado, and more. Feel free to check them out if you interested in an alternative library to use.

Why is it called "Million"? The name originated with the goal of being able to handle 1M+ ops/sec for benchmarks.

License

Million is MIT-licensed open-source software and research by Aiden Bai.

View count

About

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

https://million.js.org

License:MIT License


Languages

Language:TypeScript 89.0%Language:JavaScript 5.9%Language:HTML 3.2%Language:CSS 1.0%Language:Shell 0.9%