react-scan Documentation

1. Project Overview & Quickstart (aidenybai/react-scan) Copy Chapter

File: docs/installation/cdn.md Copy Chapter

CDN

You can choose one of the following URLs to initialize React Scan via CDN.

Usage Copy Chapter

<script src="https://cdn.jsdelivr.net/npm/react-scan/dist/auto.global.js"></script>

Available URLs Copy Chapter

JSDelivr Copy Section

https://cdn.jsdelivr.net/npm/react-scan/dist/auto.global.js

UNPKG Copy Section

https://unpkg.com/react-scan/dist/auto.global.js

File: docs/installation/next-js-page-router.md Copy Chapter

NextJS Page Router Guide

As a script tag Copy Chapter

Add the script tag to your pages/_document

Refer to the CDN Guide for the available URLs.

// pages/_document
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script src="https://unpkg.com/react-scan/dist/auto.global.js" />

        {/* rest of your scripts go under */}
      </Head>
      
        <Main />
        <NextScript />
      
    </Html>
  );
}

As a module import Copy Chapter

Add the following code to your App component in pages/_app:

// pages/_app

// react-scan must be the top-most import
import { scan } from "react-scan";
import { useEffect } from "react";

export default function App({ Component, pageProps }) {
  useEffect(() => {
    // Make sure to run React Scan after hydration
    scan({
      enabled: true,
    });
  }, []);
  return <Component {...pageProps} />;
}

If you want react-scan to also run in production, use the react-scan/all-environments import path

- import { scan } from "react-scan";
+ import { scan } from "react-scan/all-environments";

2. Official Technical Reference & Guides (aidenybai/docs) Copy Chapter

File: README.md Copy Chapter

Moved to Million repo

Million Documentation

→ Go to Million repo

File: pages/docs/api/extra/html.mdx Copy Chapter

title: HTML Helpers Copy Chapter

HTML Helpers

`html` tagged templates Copy Chapter

The html function creates a VNode from an HTML string, and makes it easier to write views without hyperscript or JSX. It accepts a tagged HTML string, meaning you can do interoplation like JSX with the ${expression} syntax.

import { render } from 'million';
import { html } from 'million/html';

render(document.body, html`Hello World`);

Tag factories Copy Chapter

You can import tag functions to write shorthands for elements. It is a great middle ground if you want that hyperscript style of development but also want to write less code.

import { render } from 'million';
import { div } from 'million/html';

render(document.body, div(['Hello World']));

You can also construct your own reusable custom element factories if you want:

import { render } from 'million';
import { factory } from 'million/html';

const CUSTOM = factory('CUSTOM');

render(document.body, CUSTOM(['Hello World']));

File: pages/docs/api/extra/morph.mdx Copy Chapter

title: morph() Copy Chapter

`morph()`

Syntax: morph(newDOMNode, prevDOMNode, hook = (el?, newVNode?, oldVNode?) => boolean)
Example: morph('Hello World', document.createElement('div'))

The morph function updates the DOM content by determing pinpoint changes through diffing a new DOM node with an old DOM node. It accepts two HTMLElement or Text. It also returns the resulting HTMLElement or Text.

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

const node1 = document.createElement('div');
const node2 = document.createElement('div');
node2.textContent = 'Hello World';

morph(node2, node1); //  -> Hello World

morph('Goodbye World', node2); // Hello World -> Goodbye World

File: pages/docs/api/extra/router.mdx Copy Chapter

title: router() Copy Chapter

`router()`

Syntax: router(rootSelector, routes)
Example: router()

There are two uses for the router() function:

1. Turning a Multi Page Application (MPA) into a Single Page Application (SPA) Copy Section

The router() function initiates SPA like routing functionality for an MPA. This removes the necessity for page navigations and makes the application more responsive, while keeping multiple HTML files. Imagine Turbo Drive, but powered by Million, and significantly more simpler.

import { router } from 'million/router';

router();

// to only swap the body:
router('body');

2. Creating client side routes for a SPA Copy Section

router also accepts a routes parameter, which skips fetching if you have predefined virtual nodes. For example:

import { _, m } from 'million';
import { router, createRoute } from 'million/router';

router()
  .setRoute(
    '/',
    createRoute(
      m('div', _, ['You are at /', m('a', { href: '/foo' }, ['Go to /foo'])]),
    ),
  )
  .setRoute(
    '/foo',
    createRoute(
      m('div', _, ['You are at /foo', m('a', { href: '/' }, ['Go to /'])]),
    ),
  );

`apply()` and `million:navigate` event Copy Chapter

You can use a global event handler to listen on the million:navigate event.

window.addEventListener('million:navigate', (event) => {
  console.log(`Navigating to ${event.detail.url}`);
});

If you have client side scripts that run DOM modifications upon load, you can use the apply() function.

import { apply } from 'million/router';

apply((doc) => {
  doc.title += ' - reloaded';
});

File: pages/docs/api/extra/utils.mdx Copy Chapter

title: Shared Utilities Copy Chapter

Shared Utilities

`fromDomNodeToVNode()` Copy Chapter

Syntax: fromDomNodeToVNode(node)
Example: fromDomNodeToVNode(document.createElement('div'))

The fromDomNodeToVNode function creates a VNode from DOM node. It accepts a DOM node.

import { render } from 'million';
import { fromDomNodeToVNode } from 'million/utils';

fromDomNodeToVNode(document.createElement('div'));

{
  tag: 'div';
}

`fromStringToDomNode()` Copy Chapter

Syntax: fromStringToDomNode(html)
Example: fromStringToDomNode('Hello World')

The fromStringToDomNode function creates an DOM node from an HTML string using DOMParser. It accepts a HTML string.

import { render } from 'million';
import { fromStringToDomNode } from 'million/utils';

fromStringToDomNode('Hello World').innerHTML; // -> Hello World

`fromVNodeToString()` Copy Chapter

Syntax: fromVNodeToString(vnode)
Example: fromVNodeToString({ tag: 'div' })

The fromVNodeToString function creates an HTML string from an VNode. It accepts a VNode.

import { m, _, render } from 'million';
import { fromVNodeToString } from 'million/utils';

fromStringToDomNode(m('div', _, ['Hello World'])) // -> Hello World

File: pages/docs/api/basics/m.mdx Copy Chapter

title: m() Copy Chapter

import VNodeViz from '../../../../components/examples/VNodeViz';

`m()`

Syntax: m(tag, props?, children?, flag?, delta?, hook?)
Example: m('div', { id: 'app' }, ['Hello World'])

It is recommended that you use m to create a VNode. It accepts a tag as a string, an optional props object, an optional array of children, and an optional flag.

import { m } from 'million';

const vnode = m('div', { id: 'app' }, ['Hello World']);

{
  tag: 'div',
  props: {
    id: 'app'
  },
  children: ['Hello World'],
}

The tagName is stored under the tag, attributes and properties are stored under props, and the children are stored under children.

REPL Copy Chapter

You can enter HTML and it will automatically convert to a VNode if you are confused on how the raw data representation looks.

import { m } from 'million';

const vnode = m('div', { key: 'foo' }, ['Hello World']);

{
  tag: 'div',
  props: {},
  children: ['Hello World'],
  key: 'foo',
}

import { m, className, style } from 'million';

const vnode = m(
  'div',
  {
    className: className({ class1: true, class2: false, class3: 1 + 1 === 2 }),
    style: style({ color: 'black', 'font-weight': 'bold' }),
  },
  ['Hello World'],
);

{
  tag: 'div',
  props: {
    className: 'class1 class3',
    style: 'color:black;font-weight:bold'
  },
  children: ['Hello World'],
}

import { m, style, kebab } from 'million';

const vnode = style(kebab({ color: 'black', fontWeight: 'bold' }));

{
  tag: 'div',
  props: {
    style: 'color:black;font-weight:bold'
  },
  children: ['Hello World'],
}

import { m, svg } from 'million';

const vnode = svg(m('svg'));

{
  tag: 'svg',
  props: {
    ns: 'http://www.w3.org/2000/svg'
  },
}

import { _, m } from 'million';

const vnode = m(
  'div',
  _ /* props */,
  _ /* children */,
  _ /* flag */,
  _ /* delta */,
  {
    create: (el, newVNode, oldVNode) => {
      console.log('create was called!', el);
      return true;
    },
    update: (el, newVNode, oldVNode) => {
      console.log('update was called!', el);
      return true;
    },
    remove: (el, newVNode, oldVNode) => {
      console.log('remove was called!', el);
      return true;
    },
    diff: (el, newVNode, oldVNode) => {
      console.log('diff was called!', el);
      return true;
    },
  },
);

import { mergeHooks } from 'million';

const firstHook = {
  create: () => {
    console.log(1);
    return true;
  },
};

const secondHook = {
  create: () => {
    console.log(2);
    return true;
  },
  update: () => {
    console.log('Hello World!');
    return true;
  },
};

const finalBossHook = mergeHooks([firstHook, secondHook]);

const finalBossHook = {
  create: () => {
    console.log(1); // From firstHook
    console.log(2); // From secondHook
    return true;
  },
  update: () => {
    console.log('Hello World!'); // from secondHook
    return true;
  },
};

import { _, m, render } from 'million';

let seconds = 0;

setInterval(() => {
  render(document.body, m('p', _, [`Time elapsed: ${seconds}`]));
  seconds++;
}, 1000);

import { _, m, batch, render } from 'million';

const queueRender = batch();

queueRender(() => render(document.body, I'm not rendered));
queueRender(() => render(document.body, I'm not rendered));
queueRender(() => render(document.body, I'm rendered!));

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

const vnode = m(
  'div',
  { id: 'app' },
  ['Hello World'],
  Flags.ELEMENT_TEXT_CHILDREN,
);
const el = createElement(vnode);

document.body.appendChild(el);

Hello World

import { _, m, Deltas } from 'million';

const vnode = m('div', _, ['Hello World'], _, [
  Deltas.CREATE(0),
  Deltas.UPDATE(0),
]);

{
  tag: 'div',
  children: ['Hello World'],
  delta: [
    [0 /* DeltaTypes.INSERT */, 0],
    [1 /* DeltaTypes.UPDATE */, 0],
  ]
}