### Install Million.js via CLI (bun)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Use the bunx command for installation.

```bash
bunx million@latest
```

--------------------------------

### Install Million.js Manually (bun)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Install the Million.js package using bun.

```bash
bun add million
```

--------------------------------

### Install Million.js CLI

Source: https://github.com/aidenybai/million/blob/main/README.md

Use the Million.js CLI to automatically install the package and configure your project. After installation, running your project will display information in the command line.

```bash
npx million@latest
```

--------------------------------

### Install Million.js via CLI (yarn)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Use the yarn add command for installation.

```bash
yarn add million@latest
```

--------------------------------

### Install Million.js via CLI (pnpm)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Use the pnpx command for installation with pnpm.

```bash
pnpx million@latest
```

--------------------------------

### Install Million.js Manually (yarn)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Install the Million.js package using yarn.

```bash
yarn add million
```

--------------------------------

### Install project dependencies

Source: https://github.com/aidenybai/million/blob/main/packages/kitchen-sink/README.md

Install required packages using pnpm.

```bash
pnpm install
```

--------------------------------

### Run the development server

Source: https://github.com/aidenybai/million/blob/main/packages/kitchen-sink/README.md

Start the local development server for the Kitchen Sink application.

```bash
pnpm dev
```

--------------------------------

### Install TanStack Virtual

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/virtualization.zh-CN.mdx

Install the beta version of TanStack React Virtual using your preferred package manager.

```bash
npm install @tanstack/react-virtual@beta
```

```bash
pnpm install @tanstack/react-virtual@beta
```

```bash
yarn add @tanstack/react-virtual@beta
```

```bash
bun add @tanstack/react-virtual@beta
```

--------------------------------

### Install Million.js Manually (pnpm)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Install the Million.js package using pnpm.

```bash
pnpm install million
```

--------------------------------

### Install Million Lint Package

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/lint.en-US.mdx

Manual installation commands for various package managers.

```bash
npm install @million/lint@latest
```

```bash
pnpm install @million/lint@latest
```

```bash
yarn add @million/lint@latest
```

```bash
bun add @million/lint@latest
```

--------------------------------

### Install Million.js via CLI

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/index.zh-CN.mdx

Commands to initialize Million.js in a project using various package managers.

```bash
npx million@latest
```

```bash
pnpx million@latest
```

```bash
yarn add million@latest
```

```bash
bunx million@latest
```

--------------------------------

### Million.js Combined Block Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.en-US.mdx

Demonstrates how Million.js blocks can be used for efficient rendering, especially with dynamic data. This example shows a combined approach.

```jsx
import { block } from "million/react";

const CombinedBlockExample = block(() => (
  <div class="text-center">
    <h1 class="text-4xl font-bold">Hello world</h1>
    <p>This is a paragraph.</p>
  </div>
));
```

--------------------------------

### Install Million.js

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.en-US.mdx

Use a package manager to add the Million.js dependency to your project.

```bash
npm install million
```

```bash
pnpm install million
```

```bash
yarn add million
```

```bash
bun add million
```

--------------------------------

### React Virtual DOM Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.zh-CN.mdx

This example demonstrates the standard virtual DOM rendering approach in React. It is provided for comparison with Million.js block rendering.

```jsx
function VDomExample() {
  return (
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  );
}
```

--------------------------------

### React Virtual DOM Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.en-US.mdx

Illustrates the traditional React virtual DOM rendering process. This is shown for comparison with Million.js.

```jsx
function VDomExample() {
  return (
    <div class="text-center">
      <h1 class="text-4xl font-bold">Hello world</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}
```

--------------------------------

### Full Optimized Million.js Implementation

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.zh-CN.mdx

A complete example integrating block and For to achieve high-performance rendering.

```jsx
  import { useState } from 'react';
  import { Table, Input, lotsOfElements } from './ui';
  import { buildData } from './data';
  import { block, For } from 'million/react';

const RowBlock = block(
function Row({ adjective, color, noun }) {
return (
<tr>
<td>{adjective}</td>
<td>{color}</td>
<td>{noun}</td>
{...lotsOfElements}
</tr>
);
}
);

function App() {
const [rows, setRows] = useState(1);
const data = buildData(rows);

    return (
      <div>
        <Input value={rows} setValue={setRows} />
        <Table showRadar>
          <For each={data}>
            {({ adjective, color, noun }) => (
              <RowBlock adjective={adjective} color={color} noun={noun} />
            )}
          </For>
        </Table>
      </div>
    );

}

export default App;
```

--------------------------------

### Million.js Combined Block Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.zh-CN.mdx

This example showcases how to use Million.js blocks for efficient rendering, particularly for lists and nested data. It highlights performance gains by optimizing tree traversal.

```jsx
import { block } from 'million/react';

const MyComponent = block(() => {
  return (
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  );
});
```

--------------------------------

### Block Virtual DOM: Data vs. DOM Nodes Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/virtual-dom.en-US.mdx

An example highlighting a situation where the Block Virtual DOM might be less effective because the number of data values to diff exceeds the number of virtual DOM nodes.

```jsx
// 5 data values to diff
function Component({ a, b, c, d, e }) {
  // 1 virtual DOM node to diff
  return <div>{a + b + c + d + e}</div>;
}
```

--------------------------------

### Install Million.js via package manager

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/million-v2.5.1.en-US.mdx

Commands to upgrade to the latest version of Million.js using common package managers.

```bash
npm install million@latest
```

```bash
pnpm install million@latest
```

```bash
yarn add million@latest
```

--------------------------------

### Configure Create React App with Craco and Million.js

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Set up Million.js for Create React App by configuring Craco and adding the webpack plugin. Requires Craco installation.

```javascript
const million = require("million/compiler");

module.exports = {
  webpack: {
    plugins: { add: [million.webpack({ auto: true })] },
  },
};
```

--------------------------------

### Complete Data Grid Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.zh-CN.mdx

A full implementation of a data grid component in React, demonstrating efficient rendering of dynamic data. It includes state management for rows, data generation, and table rendering using `Array.map`.

```jsx
import { useState } from 'react';
import { Table, Input } from './ui';
import { buildData } from './data';

function App() {
const [rows, setRows] = useState(1);
const data = buildData(rows);

    return (
      <div>
        <Input value={rows} setValue={setRows} />
        <Table>
          {data.map(({ adjective, color, noun }) => (
            <tr>
              <td>{adjective}</td>
              <td>{color}</td>
              <td>{noun}</td>
            </tr>
          ))}
        </Table>
      </div>
    );

}

export default App;
```

--------------------------------

### Example Telemetry Event

Source: https://github.com/aidenybai/million/blob/main/website/pages/telemetry.en-US.mdx

This is an example of an anonymous telemetry event that might be collected. It includes the event type and a payload with framework information.

```json
{
  "event": "compile",
  "payload": {
    "framework": "vite"
  }
}
```

--------------------------------

### React Dynamic Component Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/million-beyond-speed.en-US.mdx

This component fetches stock trade data every second and dynamically renders BuyComponent or SellComponent based on the trade type. It's an example of a highly dynamic component not suited for Million.js.

```jsx
import { useState, useEffect } from "react";
import { BuyComponent, SellComponent } from "@/components/recent-trades"

export function RecentTrades() {
    const [trades, setTrades] = useState([]);
    useEffect(() => {
        // set a timer to make this event run every second
        const tradeTimer = setInterval(() => {
            let tradeRes = fetch("example.com/stocks/trades");
            // errors? never heard of them
            tradeRes = JSON.parse(tradeRes);
            setTrades(previousList => {
                // remove the amount of elements returned from
                // our fetch call to stay at 1,000 elements
                previousList.slice(0, tradeRes.length);
                // add the most recent elements
                for (i, i < tradeRes.length, i++) {
                    previousList.push(tradeRes[i]);
                };
                return previousList;
            });
        }, 1000);

        return () => clearInterval(tradeTimer);
    }, [])

    return (
        <ul>
            {trades.map((trade, index) => (
                <li key={index}>
                    {trade.includes("+") ?
                        <BuyComponent>BUY: {trade}</BuyComponent>
                        : <SellComponent>SELL: {trade}</SellComponent>
                    }
                </li>
            ))}
        </ul>
    )
}
```

--------------------------------

### Example React Component

Source: https://github.com/aidenybai/million/blob/main/README.md

A simple React component demonstrating state management with `useState` and an event handler for a button click. This component is used to illustrate React's rendering and reconciliation process.

```jsx
function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
```

--------------------------------

### Block Virtual DOM: Static Content Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/virtual-dom.en-US.mdx

Illustrates a scenario where the Block Virtual DOM is beneficial due to a large amount of static content surrounding dynamic elements.

```jsx
<div>
  <div>{dynamic}</div>
  Lots and lots of static content...
</div>
```

--------------------------------

### Pure React Rendering of Many Elements

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.en-US.mdx

This example shows a typical React implementation for rendering a large number of elements within a table. It demonstrates how React can struggle with performance when dealing with a high volume of DOM nodes. Use this to observe the performance bottleneck before applying optimizations.

```jsx
import { useState } from 'react';
import { Table, Input, lotsOfElements } from './ui';
import { buildData } from './data';

function App() {
const [rows, setRows] = useState(1);
const data = buildData(rows);

    return (
      <div>
        <Input value={rows} setValue={setRows} />
        <Table showRadar>
          {data.map(({ adjective, color, noun }) => (
            <tr>
              <td>{adjective}</td>
              <td>{color}</td>
              <td>{noun}</td>
              <td>{...lotsOfElements}</td>
            </tr>
          ))}
        </Table>
      </div>
    );

}

export default App;
```

--------------------------------

### Next.js Server-Side Props Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/wrapped/[id].mdx

Demonstrates how to use getServerSideProps in Next.js to fetch data on the server. This function is called on each request to the page.

```javascript
import Wrapped from '../../components/wrapped';
import { useData } from 'nextra/data';

export const getServerSideProps = (params) => {
  return { props: { ssg: { id: params.query.id } } };
};

export const Parent = () => {
  const data = useData();
  return <Wrapped {...data} />;
};

<Parent />
```

--------------------------------

### Define a React component structure

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/virtual-dom.en-US.mdx

A basic React component example used to illustrate the tree structure processed during virtual DOM diffing.

```jsx
function Numbers() {
  return (
    <foo>
      <bar>
        <baz />
      </bar>
      <boo />
    </foo>
  );
}
```

--------------------------------

### Optimized React Table Rendering with Million.js

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.en-US.mdx

This example integrates Million.js's `block` and `For` components into a React application to render a large list of table rows efficiently. It demonstrates the performance improvement compared to a pure React approach, especially noticeable when interacting with the input to change the number of rows.

```jsx
import { useState } from 'react';
import { Table, Input, lotsOfElements } from './ui';
import { buildData } from './data';
import { block, For } from 'million/react';

const RowBlock = block(
function Row({ adjective, color, noun }) {
return (
<tr>
<td>{adjective}</td>
<td>{color}</td>
<td>{noun}</td>
{...lotsOfElements}
</tr>
);
}
);

function App() {
const [rows, setRows] = useState(1);
const data = buildData(rows);

    return (
      <div>
        <Input value={rows} setValue={setRows} />
        <Table showRadar>
          <For each={data}>
            {({ adjective, color, noun }) => (
              <RowBlock adjective={adjective} color={color} noun={noun} />
            )}
          </For>
        </Table>
      </div>
    );

}

export default App;
```

--------------------------------

### Block Virtual DOM: Dynamic Content Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/virtual-dom.en-US.mdx

Shows a case where the Block Virtual DOM might not offer significant advantages over a regular Virtual DOM due to a high proportion of dynamic content.

```jsx
<div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
</div>
```

--------------------------------

### Million.js Counter Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/virtual-dom.en-US.mdx

A simple counter component implemented with Million.js' block function. This demonstrates how dynamic parts of the UI are handled.

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

function Count() {
  const [count, setCount] = useState(0);

  const node1 = count + 1;
  const node2 = count + 2;

  return (
    <div>
      <ul>
        <li>{node1}</li>
        <li>{node2}</li>
      </ul>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Increment Count
      </button>
    </div>
  );
}
const CountBlock = block(Count);
```

--------------------------------

### React Reconciliation Diff Example

Source: https://github.com/aidenybai/million/blob/main/README.md

Shows the difference between two snapshots of a React component during the reconciliation process. This highlights the specific DOM nodes that need updating.

```diff
<div>
-  <p>Count: 0</p>
+  <p>Count: 1</p>
  <button onClick={increment}>Increment</button>
</div>
```

--------------------------------

### Initialize Million Lint via CLI

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/lint.en-US.mdx

Run this command in any existing React project to automatically set up Million Lint.

```bash
npx @million/lint@latest
```

--------------------------------

### Navigate to the Kitchen Sink directory

Source: https://github.com/aidenybai/million/blob/main/packages/kitchen-sink/README.md

Change the working directory to the kitchen-sink package folder.

```bash
cd packages/kitchen-sink
```

--------------------------------

### Conceptual Million.js Reconciler Example

Source: https://github.com/aidenybai/million/blob/main/README.md

Illustrates how Million.js directly updates DOM nodes when state changes, bypassing traditional diffing. This example shows a simplified view of the compiler's output for state updates.

```jsx
function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  // generated by compiler
  if (count !== prevCount) {
    <p>.innerHTML = `Count: ${count}`;
  }

  <button>.onclick = increment;

  // ...
}
```

--------------------------------

### Clone the Million.js repository

Source: https://github.com/aidenybai/million/blob/main/packages/kitchen-sink/README.md

Initial step to download the project source code from GitHub.

```bash
git clone https://github.com/aidenybai/million.git
cd million
```

--------------------------------

### Configure Million Lint for Frameworks

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/lint.en-US.mdx

Framework-specific configuration snippets for integrating the Million Lint compiler.

```js
import MillionCompiler from '@million/lint';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default MillionCompiler.next({ 
  rsc: true // if used in the app router mode
})(nextConfig);
```

```js
import { defineConfig } from "astro/config";
import MillionCompiler from "@million/lint";

export default defineConfig({
   vite: {
     plugins: [MillionCompiler.vite()],
   },
});
```

```js
const MillionCompiler = require("@million/lint");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [MillionCompiler.webpack()],
  });
};
```

```js
import MillionCompiler from "@million/lint";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [MillionCompiler.vite(), react()],
});
```

```js
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import MillionCompiler from "@million/lint";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [MillionCompiler.vite(), remix()],
});
```

```js
const MillionCompiler = require('@million/lint');

module.exports = {
  plugins: [MillionCompiler.craco({ legacyHmr: true })],
};
```

```js
const MillionCompiler = require("@million/lint");

module.exports = {
  plugins: [MillionCompiler.webpack()],
};
```

```js
import MillionCompiler from "@million/lint";

export default {
  plugins: [MillionCompiler.rollup()],
};
```

--------------------------------

### Identify block usage errors

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/block.en-US.mdx

Example of a warning triggered when a block is used incorrectly within JSX.

```jsx
<div>
  <YourBlock>Uh oh...</YourBlock>
            ^
</div>
```

--------------------------------

### Apply block interpolation rules

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/internals/block.en-US.mdx

Examples of restricted operations when using props inside a block component.

```jsx
block((props) => {
  const { favorite } = props.favorite; // ❌
  <div className={props.className /* ✅ */}>
    {props.hello /* ✅ */}
    {Date.now() /* ✅ */}
    <button
      onClick={() => {
        console.log(props.world); /* ❌ (no holes inside listeners) */
      }}
    >
      {props.count + 1 /* ❌ */}
      {props.foo.toString() /* ❌ */}
    </button>
  </div>;
});
```

--------------------------------

### Render Blog Header and Index Components

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog.zh-CN.mdx

Components for displaying the blog header and a list of blog articles filtered by locale.

```javascript
import { getPagesUnderRoute } from 'nextra/context';
import Link from 'next/link';
import { useRouter } from 'next/router';
import filterRouteLocale from 'nextra/filter-route-locale';

export function BlogHeader() {
  return (
    <div className="max-w-screen-lg mx-auto pt-4 pb-8 mb-16 border-b border-gray-400 border-opacity-20 text-center">
      <h1>
        <span className="font-bold leading-tight lg:text-5xl">Blog</span>
      </h1>
      <p className="text-center text-gray-500 dark:text-gray-400 font-space-grotesk">
        The latest updates and releases from the Million.js team.
      </p>
    </div>
  );
}
export function BlogIndex() {
  const { locale, defaultLocale } = useRouter();

  const blogArticles = filterRouteLocale(
    getPagesUnderRoute("/blog"),
    locale,
    defaultLocale,
  )
  .map((page) => {
      return (
        <div key={page.route} className="mb-10">
          <Link
            href={page.route}
            style={{ color: "inherit", textDecoration: "none" }}
            className="block font-semibold mt-8 text-2xl"
            tabIndex="0"
          >
            {page.meta?.title || page.frontMatter?.title || page.name}
          </Link>
          <p className="opacity-80" style={{ marginTop: ".5rem" }}>
            {page.frontMatter?.description}{" "}
            <span className="inline-block nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font] font-bold">
              <Link href={page.route} tabIndex="-1">
                {"Read more →"}
              </Link>
            </span>
          </p>
          {page.frontMatter?.date ? (
            <p className="opacity-50 text-sm mt-2">{page.frontMatter.date}</p>
          ) : null}
        </div>
      );
    });
  return blogArticles;
}
```

```javascript
<BlogHeader />
<BlogIndex />
```

--------------------------------

### Example of collected runtime data

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/lint.en-US.mdx

This structure represents the metadata captured by the injected handlers during component execution.

```jsx
// psuedo code of collected data:
[
  {
    kind: 'state',
    count: 7,
    time: 0.1,
    changes: [{ prev: 0, next: 8 }, ...],
  },
  // and so on...
];
```

--------------------------------

### Basic App Structure with LionBlock

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.zh-CN.mdx

Demonstrates a basic React component structure that includes a Million.js block component. Ensure the `LionBlock` is correctly defined using `block(Lion)`.

```jsx
export default function App() {
  return (
    <div>
      <h1>mil + LION = million</h1>
      <LionBlock />
    </div>
  );
}
```

--------------------------------

### Compare Block Virtual DOM Performance Scenarios

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/virtual-dom.zh-CN.mdx

Illustrates scenarios where the block virtual DOM is effective versus where it may provide little benefit.

```jsx
// ✅ Good
<div>
  <div>{dynamic}</div>
  Lots and lots of static content...
</div>
```

```jsx
// ❌ Bad
<div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
</div>
```

```jsx
// 5 data values to diff
function Component({ a, b, c, d, e }) {
  // 1 virtual DOM node to diff
  return <div>{a + b + c + d + e}</div>;
}
```

--------------------------------

### Define Nested Components for Million Blocks

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/behind-the-block.en-US.mdx

Example of a component containing other React components, which requires special handling by the compiler.

```jsx
function SadEmoji() {
  return '😢';
}

function HappyEmoji() {
  return '😂';
}

function Emotion() {
  const [isSad, setIsSad] = useState(true);
  return <div>{isSad ? <SadEmoji /> : <HappyEmoji />}</div>;
}

const EmotionBlock = block(Emotion);
```

--------------------------------

### Configure Remix with Vite and Million.js

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Integrate Million.js into your Remix project using Vite by adding the Million.js Vite plugin.

```javascript
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite({ auto: true }), remix()],
});
```

--------------------------------

### Stable UI Tree Component Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/virtual-dom.en-US.mdx

This component is a good candidate for block virtual DOM because its return value is deterministic and stable on every render.

```jsx
function Component() {
  // ✅ Good, because deterministic / stable return
  return <div>{dynamic}</div>;
}
```

--------------------------------

### Configure Million.js for Vite

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Integrate Million.js compiler with Vite for React projects.

```javascript
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite(), react()],
});
```

--------------------------------

### Updating DOM Node Example

Source: https://github.com/aidenybai/million/blob/main/README.md

Demonstrates how React updates a specific DOM node, in this case, the inner HTML of a paragraph tag, to reflect a new value after a state change.

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

--------------------------------

### Root App Component with Analytics

Source: https://github.com/aidenybai/million/blob/main/website/pages/_app.mdx

This is the main App component for a Next.js application. It imports global styles and integrates Vercel Analytics and Speed Insights. Ensure these packages are installed in your project.

```javascript
import '../styles/global.css';
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function App({ Component, pageProps }) {
  return (
    <main>
      <Component {...pageProps} />
      <Analytics />
      <SpeedInsights />
    </main>
  );
}
```

--------------------------------

### renderToTemplate() Usage

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/internals/render-to-template.zh-CN.mdx

Demonstrates the basic usage of renderToTemplate() to convert a virtual DOM node into an HTML string.

```APIDOC
## renderToTemplate()

### Description
The `renderToTemplate()` function renders a virtual DOM node to a string, creating the template for a block. It works in conjunction with `stringToDOM()`.

### Method
N/A (This is a function, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```jsx
import { renderToTemplate } from 'million';

const edits = [];
const template = renderToTemplate(<div>Hello World</div>, edits);

console.log(template); // '<div>Hello World</div>'
console.log(edits); // []
```

### Response
#### Success Response (200)
N/A (This is a function returning a string and an array)

#### Response Example
```json
{
  "template": "<div>Hello World</div>",
  "edits": []
}
```
```

--------------------------------

### Configure Million.js for Create React App (CRA)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Set up Million.js compiler for Create React App projects using Craco. Requires Craco configuration.

```javascript
const million = require("million/compiler");
module.exports = {
  webpack: {
    plugins: { add: [million.webpack()] },
  },
};
```

--------------------------------

### Unstable UI Tree Component Example

Source: https://github.com/aidenybai/million/blob/main/website/pages/blog/virtual-dom.en-US.mdx

This component might be slower with block virtual DOM due to its non-deterministic and unstable return value, making it a better candidate for regular virtual DOM.

```jsx
function Component() {
  // ❌ Bad, because non-deterministic / unstable return
  return Math.random() > 0.5 ? <div>{dynamic}</div> : <p>sad</p>;
}
```

--------------------------------

### Basic List Rendering with '<For />'

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/for.en-US.mdx

Use '<For />' to render lists from an array. It efficiently updates the DOM as the array changes. Ensure 'million/react' is imported.

```jsx
import { For } from 'million/react';

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  return (
    <>
      <button onClick={() => setItems([...items, items.length + 1])}>
        Add item
      </button>
      <ul>
        <For each={items}>{(item) => <li>{item}</li>}</For>
      </ul>
    </>
  );
}

export default App;
```

--------------------------------

### Integrate Million.js with Bundlers

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/automatic.en-US.mdx

Configure Million.js within various build tools and frameworks.

```js
import million from 'million/compiler';

/** @type {import('next').NextConfig} */
const nextConfig = {
   reactStrictMode: true,
};

const millionConfig = {
  auto: {
    threshold: 0.05, // default: 0.1,
    skip: ['useBadHook', /badVariable/g], // default []
    // if you're using RSC: auto: { rsc: true },
  }
}

export default million.next(nextConfig, millionConfig);
```

```js
import { defineConfig } from "astro/config";
import million from "million/compiler";

export default defineConfig({
  vite: {
    plugins: [
      million.vite({
        mode: "react",
        server: true,
        auto: {
          threshold: 0.05,
          skip: ["useBadHook", /badVariable/g],
        },
      }),
    ],
  },
});
```

```js
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      million.webpack({
        mode: "react",
        server: true,
        auto: {
          threshold: 0.05,
          skip: ["useBadHook", /badVariable/g],
        },
      }),
    ],
  });
};
```

```js
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    million.vite({
      auto: {
        threshold: 0.05,
        skip: ["useBadHook", /badVariable/g],
      },
    }),
    react(),
  ],
});
```

```js
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    million.vite({
      auto: {
        threshold: 0.05,
        skip: ["useBadHook", /badVariable/g],
      },
    }),
    remix(),
  ],
});
```

```js
const million = require("million/compiler");

module.exports = {
  webpack: {
    plugins: {
      add: [
        million.webpack({
          auto: {
            threshold: 0.05,
            skip: ["useBadHook", /badVariable/g],
          },
        }),
      ],
    },
  },
};
```

```js
const million = require("million/compiler");
module.exports = {
  plugins: [
    million.webpack({
      auto: {
        threshold: 0.05,
        skip: ["useBadHook", /badVariable/g],
      },
    }),
  ],
};
```

```js
import million from "million/compiler";

export default {
  plugins: [
    million.rollup({
      auto: {
        threshold: 0.05,
        skip: ["useBadHook", /badVariable/g],
      },
    }),
  ],
};
```

--------------------------------

### Create React App (CRA) Automatic Mode Configuration

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/automatic.zh-CN.mdx

Configure Million.js Automatic Mode for Create React App projects using Craco. This requires prior Craco setup and allows customization of `threshold` and `skip` options.

```javascript
const million = require("million/compiler");

module.exports = {
  webpack: {
    plugins: {
      add: [
        million.webpack({
          auto: {
            threshold: 0.05,
            skip: ["useBadHook", /badVariable/g],
          },
        }),
      ],
    },
  },
};
```

--------------------------------

### Configure Astro with Million.js

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Add the Million.js Vite plugin to your Astro project for automatic optimization.

```javascript
import { defineConfig } from "astro/config";
import million from "million/compiler";

export default defineConfig({
   vite: {
     plugins: [million.vite({ mode: "react", server: true, auto: true })],
   },
});
```

--------------------------------

### Configure Million.js for Astro

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Add Million.js compiler plugin to your Astro project's Vite configuration.

```javascript
import { defineConfig } from "astro/config";
import million from "million/compiler";

export default defineConfig({
  vite: {
    plugins: [million.vite({ mode: "react", server: true })],
  },
});
```

--------------------------------

### Configure Million.js for Remix with Vite

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Add Million.js compiler plugin to your Remix project's Vite configuration.

```javascript
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite(), remix()],
});
```

--------------------------------

### Data Grid with Dynamic Rows

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.en-US.mdx

Builds a data grid in React that allows users to dynamically set the number of rows displayed. It uses `useState` for managing the row count and renders data within a `Table` component. This example highlights the potential performance bottlenecks in standard React when rendering large lists.

```jsx
import { useState } from 'react';
import { Table, Input } from './ui';
import { buildData } from './data';

function App() {
  const [rows, setRows] = useState(1);
  const data = buildData(rows);

  return (
    <div>
      <Input value={rows} setValue={setRows} />
      <Table>
        {data.map(({ adjective, color, noun }) => (
          <tr>
            <td>{adjective}</td>
            <td>{color}</td>
            <td>{noun}</td>
          </tr>
        ))}
      </Table>
    </div>
  );

}

export default App;
```

--------------------------------

### mount(Block, el)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/internals/mount.en-US.mdx

Mounts a Million.js block to a target DOM element.

```APIDOC
## mount(Block, el)

### Description
The `mount` function is used to mount a block to a DOM element. It is an internal API intended for framework developers.

### Parameters
- **Block** (Object) - Required - The Million.js block to be mounted.
- **el** (HTMLElement) - Required - The DOM element where the block will be mounted.

### Request Example
```jsx
import { block, mount } from 'million';

const display = block(({ text }) => {
  return <p>{text}</p>;
});

const element = mount(display, document.getElementById('root'));
```
```

--------------------------------

### renderToTemplate() - With Holes

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/internals/render-to-template.en-US.mdx

Demonstrates how to use 'holes' with renderToTemplate to create templates with dynamic content placeholders.

```APIDOC
## POST /renderToTemplate (with Holes)

### Description
Renders a virtual DOM node containing 'holes' into an HTML string and populates the edits array with information about these holes.

### Method
POST

### Endpoint
/renderToTemplate

### Parameters
#### Request Body
- **vnode** (object) - Required - The virtual DOM node, potentially containing holes.
- **edits** (array) - Required - An array to store edits for dynamic content.

### Request Example
```json
{
  "vnode": <div>Hello {hole}</div>,
  "edits": []
}
```

### Response
#### Success Response (200)
- **template** (string) - The rendered HTML string with placeholders for holes.
- **edits** (array) - An array containing objects describing the holes and their positions.

#### Response Example
```json
{
  "template": "<div>Hello </div>",
  "edits": [
    { "type": "child", "index": 0, "hole": "hole" }
  ]
}
```
```

--------------------------------

### Import `block` from `million/react`

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/block.zh-CN.mdx

Ensure you import the `block` function from the correct path (`million/react`). Importing from `million` directly can lead to unsupported import errors.

```javascript
import { block } from 'million'; // ❌ Wrong

import { block } from 'million/react'; // ✅ Correct
```

--------------------------------

### Basic block() Usage (JavaScript)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/block.zh-CN.mdx

Use block() to wrap a functional component for hyper-optimized rendering. Ensure 'million/react' is imported.

```jsx
import { block } from 'million/react';

const LionBlock = block(function Lion() {
  return <img src="https://million.dev/lion.svg" />;
});

export default LionBlock;
```

--------------------------------

### Optimizing Components with block

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/manual-mode.zh-CN.mdx

Wrap a component with the block function to enable Million.js optimizations.

```jsx
import { block } from 'million/react';

const RowBlock = block(function Row({ adjective, color, noun }) {
  return (
    <tr>
      <td>{adjective}</td>
      <td>{color}</td>
      <td>{noun}</td>
      {...lotsOfElements}
    </tr>
  );
});
```

--------------------------------

### Basic block() Usage (TypeScript)

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/block.zh-CN.mdx

When using TypeScript, define Props with 'type' for compatibility. Ensure 'million/react' is imported.

```jsx
type Props = {
  name: string,
};

const Lion: React.FC<Props> = ({ name }) => {
  return (
    <div>Hello {name}</div>
    <img src="https://million.dev/lion.svg" />;
  )
};
const LionBlock = block(Lion);

export default LionBlock;
```

--------------------------------

### Create a basic block

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/manual-mode/block.en-US.mdx

Wraps a standard React component with the block function to enable optimized rendering.

```jsx
import { block } from 'million/react';

const LionBlock = block(function Lion() {
  return <img src="https://million.dev/lion.svg" />;
});

export default LionBlock;
```

```jsx
type Props = {
  name: string,
};

const Lion: React.FC<Props> = ({ name }) => {
  return (
    <div>Hello {name}</div>
    <img src="https://million.dev/lion.svg" />;
  )
};
const LionBlock = block(Lion);

export default LionBlock;
```

--------------------------------

### Configure Vite with Million.js

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Add the Million.js Vite plugin to your Vite project for automatic optimization.

```javascript
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite({ auto: true }), react()],
});
```

--------------------------------

### Configure Million.js for Next.js

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Integrate Million.js compiler with Next.js applications. Supports '/app' ('use client' components only) and '/pages' directories.

```javascript
import million from "million/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default million.next(nextConfig);
```

--------------------------------

### Enable noSlot Mode Globally

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/experimental.en-US.mdx

Activate the `noSlot` experimental mode across your entire application by setting the flag in your entry file. This affects all Million.js blocks.

```javascript
import { experimental_options } from 'million/experimental';

experimental_options.noSlot = true
// now `noSlot` mode is activated across your application  

function Lion() {
  return <img src="https://million.dev/lion.svg" />;
}
```

--------------------------------

### Configure Million.js for Gatsby

Source: https://github.com/aidenybai/million/blob/main/website/pages/docs/install.fr-FR.mdx

Set up Million.js compiler using Gatsby's webpack configuration.

```javascript
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [million.webpack({ mode: "react", server: true })],
  });
};
```