<script lang="ts">
  import ClientRenderedChild from './ClientRenderedChild.svelte';

  const user = { name: 'Ada', id: 42 };
  const visitedAt = new Date();
  const tags = new Set(['svelte', 'bun', 'islands']);
  const scores = new Map<string, number>([
    ['speed', 95],
    ['dx', 88],
    ['size', 72],
  ]);
</script>

<section class="parent">
    <header>
      <h2>ServerRenderedParent.svelte</h2>
      <p>
        Runs only on the server. No <code>mochi:hydrate</code> directive, so this component's own code ships zero JavaScript — its output is inert HTML. It builds a props bag with mixed
        types and hands it off to the child below.
      </p>
    </header>
    <pre><code
        >{`const user = { name: 'Ada', id: 42 };
const visitedAt = new Date();
const tags = new Set(['svelte', 'bun', 'islands']);
const scores = new Map([['speed', 95], ['dx', 88], ['size', 72]]);`}</code
      ></pre>
  </section>

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

  <ClientRenderedChild {user} {visitedAt} {tags} {scores} mochi:hydrate />

  <section class="explainer">
    <h3>How the props get there</h3>
    <ol>
      <li>
        At SSR time, Mochi calls <a href="https://github.com/Rich-Harris/devalue" target="_blank" rel="noreferrer"><code>devalue.stringify</code></a>
        on the props you pass to the island. Unlike <code>JSON.stringify</code>, it preserves
        <code>Date</code>, <code>Map</code>, <code>Set</code>, <code>BigInt</code>,
        <code>RegExp</code>, <code>URL</code>, typed arrays, <code>undefined</code>,
        <code>NaN</code>, and even cyclic references.
      </li>
      <li>
        The serialized string is placed on the <code>&lt;mochi-hydratable-island&gt;</code> custom element as a <code>props</code> attribute. (When two islands share the exact same
        payload, it gets hoisted into a shared <code>&lt;script type="application/json"&gt;</code> block and the attribute becomes a <code>props-ref</code> pointer instead.)
      </li>
      <li>
        In the browser, the custom element's <code>connectedCallback</code> reads that string and runs
        <code>devalue.parse</code> on it, reconstructing the rich types.
      </li>
      <li>
        The result is handed to Svelte's <code>hydrate(...)</code> as the component's props — and the child takes over.
      </li>
    </ol>
    <p class="hint">
      <strong>Try it:</strong> view source on this page (or inspect the
      <code>mochi-hydratable-island</code>
      element) and you'll see the serialized props on the
      <code>props</code> attribute. Functions, class instances, and Symbols can't be serialized — pass a plain-data representation, or compute them after hydration.
    </p>
  </section>