Crossing the server-client boundary with props

<script lang="ts">
  import ClientRenderedChild from './ClientRenderedChild.svelte';
  import { typeOf } from './devalueTypeOf.ts';
  import { files } from './files.ts';

  const sources = await loadSources(files);

  const shared = { x: 1 };
  const cyclic: { name: string; self?: unknown } = { name: 'cyclic' };
  cyclic.self = cyclic;

  const dateVal = new Date('2025-01-15T12:00:00Z');
  const regexpVal = /hello\s+world/gi;
  const mapVal = new Map<string, number>([
    ['a', 1],
    ['b', 2],
    ['c', 3],
  ]);
  const setVal = new Set([10, 20, 30]);
  const bigintVal = 9007199254740993n;
  const urlVal = new URL('https://mochi.dev/docs?version=5');
  const searchParamsVal = new URLSearchParams('theme=dark&lang=en');
  const typedArrayVal = new Uint8Array([72, 101, 108, 108, 111]);
  const undefinedVal = undefined;
  const infinityVal = Infinity;
  const nanVal = NaN;
  const negZeroVal = -0;
  const repeatedRef = [shared, shared];
  const cyclicRef = cyclic;

  const serverTypes: Record<string, string> = {
    Date: typeOf(dateVal),
    RegExp: typeOf(regexpVal),
    Map: typeOf(mapVal),
    Set: typeOf(setVal),
    BigInt: typeOf(bigintVal),
    URL: typeOf(urlVal),
    URLSearchParams: typeOf(searchParamsVal),
    Uint8Array: typeOf(typedArrayVal),
    undefined: typeOf(undefinedVal),
    Infinity: typeOf(infinityVal),
    NaN: typeOf(nanVal),
    '-0': typeOf(negZeroVal),
    'Repeated ref': typeOf(repeatedRef),
    'Cyclic ref': typeOf(cyclicRef),
  };
</script>

<section class="parent">
    <header>
      <h2>ServerRenderedParent.svelte</h2>
      <p>
        Runs only on the server. No <code>mochi:hydrate</code> directive, so this component ships zero JavaScript — its output is inert HTML. It builds a props bag covering every
        type devalue supports and hands it off to the child below. The <code>Server type</code> column in the child is captured here, before serialization; the
        <code>Client type</code> column is resolved after hydration. Matching values prove the round-trip preserved each type.
      </p>
    </header>
    <pre><code
        >{`const dateVal = new Date('2025-01-15T12:00:00Z');
const mapVal = new Map([['a', 1], ['b', 2], ['c', 3]]);
const setVal = new Set([10, 20, 30]);
const bigintVal = 9007199254740993n;
const urlVal = new URL('https://mochi.dev/docs?version=5');
// ...
const cyclic: { name: string; self?: unknown } = { name: 'cyclic' };
cyclic.self = cyclic;
const cyclicRef = cyclic;`}</code
      ></pre>
  </section>

  <div class="arrow" aria-hidden="true">
    <span>props</span>
    <span class="line"></span>
    <span class="head">▼</span>
  </div>

  <ClientRenderedChild
    {dateVal}
    {regexpVal}
    {mapVal}
    {setVal}
    {bigintVal}
    {urlVal}
    {searchParamsVal}
    {typedArrayVal}
    {undefinedVal}
    {infinityVal}
    {nanVal}
    {negZeroVal}
    {repeatedRef}
    {cyclicRef}
    {serverTypes}
    mochi:hydrate
  />