npmpackage.info

million

Optimize React performance and make your React 70% faster in minutes, not months.

3.1.11

16,673

MIT

TypeScript

840.03 kB

1,913,136 3.7

Installations

npm install million

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

22.0.0

NPM Version

10.5.1 Score

62.9

Supply Chain

97.9

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

8

Total

570

Closed

136

Merged

426

Issues

Open

106

Total

562

Closed

456

Releases

216

v3.1.0

Published on 21 May 2024

v3.0.6

Published on 09 Mar 2024

v3.0.5

Published on 06 Mar 2024

v3.0.4

Published on 03 Mar 2024

v3.0.3

Published on 09 Feb 2024

v3.0.2

Published on 02 Feb 2024

View all 216 releases

Contributors

128

Unable to fetch Contributors

View all 128 contributors

Languages

TypeScript

MDX

JavaScript

CSS

HTML

TypeScript (71.93%)

MDX (17.93%)

JavaScript (8.88%)

CSS (1.23%)

HTML (0.02%)

Developer

aidenybai

Download Statistics

Total Downloads

1,913,136

Last Day

2,005

Last Week

19,835

Last Month

105,009

Last Year

1,463,224

GitHub Statistics

16,673 Stars

2,363 Commits

584 Forks

62 Watching

71 Branches

128 Contributors

Sponsor this package

https://github.com/sponsors/aidenybai

Maintainers

Package Meta Information

Latest Version

3.1.11

Package Id

million@3.1.11

Unpacked Size

840.03 kB

Size

205.66 kB

File Count

NPM Version

10.5.1

Node Version

22.0.0

Publised On

04 Jun 2024

Total Downloads

Cumulative downloads

Total Downloads

1,913,136

Last day

-56.5%

2,005

Compared to previous day

Last week

-23.7%

19,835

Compared to previous week

Last month

-9.7%

105,009

Compared to previous month

Last year

327.9%

1,463,224

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Want to automatically find and fix performance issues? Check out Million Lint.

📚 Read the docs

🎦 Watch video

💬 Join our Discord

🌐 Follow on Twitter

What is Million.js?

Million.js is an extremely fast and lightweight optimizing compiler that make 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.js works with React and makes reconciliation faster. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of diffing (try it out here)

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

👉 Setup Million.js in seconds! →

Installation

The Million.js CLI will automatically install the package and configure your project for you.

1npx million@latest

Once your down, just run your project and information should show up in your command line!

Having issues installing? → View the installation guide

Why Million.js?

To understand why to use Million.js, we need to understand how React updates interfaces. When an application's state or props change, React undergoes an update in two parts: rendering and reconciliation.

To show this, let's say this is our App:

1function App() {
2  const [count, setCount] = useState(0);
3  const increment = () => setCount(count + 1);
4  return (
5    <div>
6      <p>Count: {count}</p>
7      <button onClick={increment}>Increment</button>
8    </div>
9  );
10}

In this App, when I click on the button, the count state will update and the <p> tag will update to reflect the new value. Let's break this down.

Rendering

The first step is rendering. Rendering is the process of generating a snapshot of the current component. You can imagine it as simply "calling" the App function and storing the output in a variable. This is what the App snapshot would look like:

1const snapshot = App();
2
3// snapshot =
4<div>
5  <p>Count: 1</p>
6  <button onClick={increment}>Increment</button>
7</div>;

Reconciliation

In order to update the interface to reflect the new state, React needs to compare the previous snapshot to the new snapshot (called "diffing"). React's reconciler will go to each element in the previous snapshot and compare it to the new snapshot. If the element is the same, it will skip it. If the element is different, it will update it.

The <div> tag is the same, so it doesn't need to be updated. ✅
- The <p> tag is the same, so it doesn't needs to be updated. ✅
  - The text inside the <p> tag is different, so it needs to be updated. ⚠ ️
- The <button> tag is the same, so it doesn't need to be updated. ✅
  - The onClick prop is the same, so it doesn't need to be updated. ✅
  - The text inside the <button> tag is the same, so it doesn't need to be updated. ✅

(total: 6 diff checks)

1<div>
2-  <p>Count: 0</p>
3+  <p>Count: 1</p>
4  <button onClick={increment}>Increment</button>
5</div>

From here, we can see that the <p> tag needs to be updated. React will then update the <p> DOM node to reflect the new value.

1<p>.innerHTML = `Count: ${count}`;

How Million.js makes this faster

React is slow.

The issue with React's reconciliation it becomes exponentially slower the more JSX elements you have. With this simple App, it only needs to diff a few elements. In a real world React app, you can easily have hundreds of elements, slowing down interface updates.

Million.js solves this by skipping the diffing step entirely and directly updating the DOM node.

Here is a conceptual example of how Million.js reconciler works:

1function App() {
2  const [count, setCount] = useState(0);
3  const increment = () => setCount(count + 1);
4
5  // generated by compiler
6  if (count !== prevCount) {
7    <p>.innerHTML = `Count: ${count}`;
8  }
9
10  <button>.onclick = increment;
11
12  // ...
13}

Notice how when the count is updated, Million.js will directly update the DOM node. Million.js turns React reconciliation from O(n) (linear time) to O(1) (constant time).

How fast is it? → View the benchmarks

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.js's internals.

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

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.js contributors to abide by the terms of our Code of Conduct.

→ Start contributing on GitHub

Alt

Codebase

This repo is a "mono-repo" with modules. Million.js 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.js's core.
`react` / `react-server`	React compatibility for Million.js.
`compiler`	The compiler for Million.js in React.
`jsx-runtime`	A simple JSX runtime for Million.js core.
`types`	Shared types between packages

Acknowledgments

Million.js 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.
Hack the Wave (Melinda Chang) 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

License

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

8

Maintained

Determines if the project is "actively maintained".

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/auto-response.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/auto-response.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/auto-response.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/auto-response.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/issue-needs-repro.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/issue-needs-repro.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/publish.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/aidenybai/million/publish.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/publish.yml:27
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 5 third-party GitHubAction dependencies pinned
Info: 0 out of 1 npmCommand dependencies pinned

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.7

/10

Last Scanned on 2024-12-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to million

to-regex-range

5.0.1

Pass two numbers, get a regex-compatible source string for matching ranges. Validated against more than 2.78 million test assertions.

@million/lint

1.0.14

Make your React app fast

@million/install

1.0.14

An easy way to install @million/lint

piral-million

1.7.3

Plugin for integrating Million components in Piral.

million

Installations

Developer Guide

Yes

CommonJS, ESM

22.0.0

10.5.1

Score

Pull Requests

8

570

136

426

Issues

106

562

456

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

1,913,136

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

What is Million.js?

👉 Setup Million.js in seconds! →

Installation

Why Million.js?

Rendering

Reconciliation

How Million.js makes this faster

Resources & Contributing Back

Codebase

Sponsors

Acknowledgments

License

10

10

10

10

8

1

0

0

0

0

0

0

0

0

3.7

/10

Other packages similar to million