Skip to content

aidenybai/million

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
May 25, 2023 13:43
May 29, 2023 15:49
March 21, 2023 22:09
November 15, 2021 13:42
May 22, 2023 17:08
May 29, 2023 21:24
March 9, 2023 20:54
Million Banner

What is Million?

Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% faster.

Oh man... Another /virtual dom|javascript/gi framework? I'm fine with React already, why do I need this?

Million works with React. Million makes creating web apps just as easy (It's just wrapping a React component!), but with faster rendering and loading speeds. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of React (try it out here)

TL;DR: Imagine React components running at the speed of raw JavaScript.

📚 Learn Million in <5 minutes! →

Installing Million

Inside your project directory, run the following command:

npm install million

Example Usage

Million.js is a library that enables you to create blocks. A block is a special Higher Order Components (HOCs) that can be used as a React component but are hyper-optimized for rendering speed.

Blocks are essentially components wrapped by block(). Below is an example of a React "counter" component that's been wrapped with Million.js.

import { useState } from 'react';
import { block } from 'million/react';

export function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  const handleClick = () => {
    setCount(count + 1);
  };

  return <button onClick={handleClick}>{count}</button>;
}

// Just wrap Counter in a block() function!
const CounterBlock = block(Counter);

export default CounterBlock;

→ Try the quickstart

Codebase

This repo is a "mono-repo" with modules. Million ships as one NPM package, but has first class modules for more complex, but important extensions. Each module has its own folder in the /packages directory.

You can also track our progress through our Roadmap.

Module Description
million The main Virtual DOM with all of Million's core.
react A module that gives React compatibility for Million.
compiler The compiler for Million in React.
jsx-runtime A simple JSX runtime for Million core.

Resources & Contributing Back

Looking for the docs? Check the documentation or the Contributing Guide out. We also recommend reading Virtual DOM: Back in Block to learn more about Million's internals.

Want to talk to the community? Hop in our Discord and share your ideas and what you've build with Million.

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

Sponsors

Acknowledgments

Million takes heavy inspiration from the following projects:

  • blockdom (Géry Debongnie) Thank you to Géry pioneering the concept of "blocks" in the virtual DOM. Many parts of the Million.js codebase either directly or indirectly derive from his work.
  • voby (Fabio Spampinato) The Million.js "template" concept is derived from Voby's template() API.
  • bun for their homepage.
  • react and turbo for their documentation. Many parts of the current Million.js documentation are grokked and modified from theirs.
  • ivi, Preact, and more

Million is being used at companies like Wyze and Dimension, as well as open source work like Quartz, TinyPages, and more.

License

Million is MIT-licensed open-source software by Aiden Bai and contributors: