Gooey

import Gooey, {
  VERSION,
  Component,
  Collection,
  Model,
  mount,
  model,
  collection,
  calc,
  flush,
} from '@srhazi/gooey';

const allMeasurements = [
  { name: '1:add', count: 10000 },
  { name: '2:update-all', count: 10000 },
  { name: '3:update-some', count: 10 },
  { name: '4:insert-some', count: 10 },
  { name: '5:delete-some', count: 10 },
  { name: '6:clear', count: 10000 },
];

function getMedian(count: number, times: number[]) {
  if (times.length === 0) {
    return 'N/A';
  }
  const sorted = [...times].sort((a, b) => a - b);
  const left = sorted[Math.floor((sorted.length - 1) / 2)];
  const right = sorted[Math.ceil((sorted.length - 1) / 2)];
  const median = (left + right) / 2;
  const itemsPerMs = count / median;
  return `${median.toFixed(2)}ms (${itemsPerMs.toFixed(2)} items/ms)`;
}

const measurements: Record<string, Collection<number>> = {
  '1:add': collection<number>([]),
  '2:update-all': collection<number>([]),
  '3:update-some': collection<number>([]),
  '4:insert-some': collection<number>([]),
  '5:delete-some': collection<number>([]),
  '6:clear': collection<number>([]),
};

const measure = (name: string, fn: () => void) => {
  return () => {
    const start = performance.now();
    fn();
    flush();
    const time = performance.now() - start;
    console.log(`gooey ${name} duration`, time);
    measurements[name].push(time);
  };
};

const Benchmark: Component = () => {
  const items = collection<Model<{ val: number }>>([]);
  let itemId = 0;

  const addItems = measure('1:add', () => {
    for (let i = 0; i < 10000; ++i) {
      items.push(model({ val: itemId++ }));
    }
  });

  const updateAllItems = measure('2:update-all', () => {
    items.forEach((item) => (item.val *= 2));
  });

  const updateSomeItems = measure('3:update-some', () => {
    if (items.length === 0) return;
    for (let i = 0; i < 10; ++i) {
      items[Math.floor(Math.random() * items.length)].val *= 2;
    }
  });

  const insertSomeItems = measure('4:insert-some', () => {
    for (let i = 0; i < 10; ++i) {
      items.splice(Math.floor(Math.random() * items.length), 0, {
        val: itemId++,
      });
    }
  });

  const deleteSomeItems = measure('5:delete-some', () => {
    if (items.length === 0) return;
    for (let i = 0; i < 10; ++i) {
      items.splice(Math.floor(Math.random() * items.length), 1);
    }
  });

  const clearItems = measure('6:clear', () => {
    items.splice(0, items.length);
  });

  return (
    <div>
      <p>Gooey version {VERSION}</p>
      <p>
        <button data-gooey-add on:click={addItems}>
          Add items
        </button>
        <button data-gooey-update-all on:click={updateAllItems}>
          Update all items
        </button>
        <button data-gooey-update-some on:click={updateSomeItems}>
          Update 10 items
        </button>
        <button data-gooey-insert-some on:click={insertSomeItems}>
          Insert 10 items
        </button>
        <button data-gooey-delete-some on:click={deleteSomeItems}>
          Delete 10 items
        </button>
        <button data-gooey-clear on:click={clearItems}>
          Clear items
        </button>
      </p>
      <ul class="bx by" style="height: 100px; overflow: auto; contain: strict">
        {items.mapView((item) => (
          <li>{calc(() => item.val)}</li>
        ))}
      </ul>
      <ul>
        {allMeasurements.map(({ name, count }) => (
          <li>
            {name}:{' '}
            {calc(() => (
              <>
                {measurements[name].length} runs; median time:{' '}
                {getMedian(count, measurements[name])}
              </>
            ))}
          </li>
        ))}
      </ul>
    </div>
  );
};

mount(document.body, <Benchmark />);

import React, { useRef, useMemo, useCallback, useState } from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';

const allMeasurements = [
  { name: '1:add', count: 10000 },
  { name: '2:update-all', count: 10000 },
  { name: '3:update-some', count: 10 },
  { name: '4:insert-some', count: 10 },
  { name: '5:delete-some', count: 10 },
  { name: '6:clear', count: 10000 },
];

function getMedian(count: number, times: number[]) {
  if (times.length === 0) {
    return 'N/A';
  }
  const sorted = [...times].sort((a, b) => a - b);
  const left = sorted[Math.floor((sorted.length - 1) / 2)];
  const right = sorted[Math.ceil((sorted.length - 1) / 2)];
  const median = (left + right) / 2;
  const itemsPerMs = count / median;
  return `${median.toFixed(2)}ms (${itemsPerMs.toFixed(2)} items/ms)`;
}

const Benchmark = () => {
  const [items, setItems] = useState<{ key: number; val: number }[]>([]);
  const [measurements, setMeasurements] = useState<Record<string, number[]>>({
    '1:add': [],
    '2:update-all': [],
    '3:update-some': [],
    '4:insert-some': [],
    '5:delete-some': [],
    '6:clear': [],
  });
  let itemId = useRef(0);

  const measure = useCallback(
    (name: string, fn: () => void) => {
      return () => {
        const start = performance.now();
        ReactDOM.flushSync(() => {
          fn();
        });
        const time = performance.now() - start;
        console.log(`react ${name} duration`, time);
        setMeasurements((measurements) => ({
          ...measurements,
          [name]: [...measurements[name], time],
        }));
      };
    },
    [setMeasurements]
  );

  const addItems = useMemo(
    () =>
      measure('1:add', () => {
        const newItems = items.slice();
        for (let i = 0; i < 10000; ++i) {
          newItems.push({
            key: itemId.current,
            val: itemId.current++,
          });
        }
        setItems(newItems);
      }),
    [items, setItems, measure]
  );

  const updateAllItems = useMemo(
    () =>
      measure('2:update-all', () => {
        setItems(items.map((item) => ({ key: item.key, val: item.val * 2 })));
      }),
    [items, setItems]
  );

  const updateSomeItems = useMemo(
    () =>
      measure('3:update-some', () => {
        const newItems = items.slice();
        for (let i = 0; i < 10; ++i) {
          newItems[Math.floor(Math.random() * newItems.length)].val *= 2;
        }
        setItems(newItems);
      }),
    [items, setItems, measure]
  );

  const insertSomeItems = useMemo(
    () =>
      measure('4:insert-some', () => {
        const newItems = items.slice();
        // Randomly add insert 10 new items to the 10k array
        for (let i = 0; i < 10; ++i) {
          const id = itemId.current++;
          newItems.splice(Math.floor(Math.random() * newItems.length), 0, {
            key: id,
            val: id,
          });
        }
        setItems(newItems);
      }),
    [items, setItems, measure]
  );

  const deleteSomeItems = useMemo(
    () =>
      measure('5:delete-some', () => {
        const newItems = items.slice();
        // Randomly delete 10 new items from the 10k array
        for (let i = 0; i < 10; ++i) {
          newItems.splice(Math.floor(Math.random() * newItems.length), 1);
        }
        setItems(newItems);
      }),
    [items, setItems, measure]
  );

  const clearItems = useMemo(
    () =>
      measure('6:clear', () => {
        setItems([]);
      }),
    [setItems, measure]
  );

  return (
    <div>
      <p>
        React version {React.version}; ReactDOM version {ReactDOM.version}
      </p>
      <p>
        <button data-react-add onClick={addItems}>
          Add items
        </button>
        <button data-react-update-all onClick={updateAllItems}>
          Update all items
        </button>
        <button data-react-update-some onClick={updateSomeItems}>
          Update 10 items
        </button>
        <button data-react-insert-some onClick={insertSomeItems}>
          Insert 10 items
        </button>
        <button data-react-delete-some onClick={deleteSomeItems}>
          Delete 10 items
        </button>
        <button data-react-clear onClick={clearItems}>
          Clear items
        </button>
      </p>
      <ul
        className="bx by"
        style={{ height: '100px', overflow: 'auto', contain: 'strict' }}
      >
        {items.map((item) => (
          <li key={item.key}>{item.val}</li>
        ))}
      </ul>
      <ul>
        {allMeasurements.map(({ name, count }) => (
          <li key={name}>
            {name}: {measurements[name].length} runs; median time:{' '}
            {getMedian(count, measurements[name])}
          </li>
        ))}
      </ul>
    </div>
  );
};

const root = ReactDOMClient.createRoot(
  document.body
);
root.render(<Benchmark />);