Varlock env schemas

<script lang="ts">
  import CodeSnippet from '../../components/CodeSnippet.svelte';
  import Badge from '../../components/Badge.svelte';
  import { highlightCode } from '../../lib/highlight.server';
  import { files } from './files.ts';
  import type { VarlockConfig } from './env.ts';

  let { config }: { config: VarlockConfig } = $props();

  const sources = await loadSources(files);

  const codeInstall = await highlightCode('bun add varlock', 'bash');
  const codeUsage = await highlightCode(
    `import { load } from 'varlock';
import { ENV } from 'varlock/env';

await load(); // parse + validate .env.schema once at boot
const port = ENV.DEMO_API_PORT; // typed + coerced: a number, not a string`,
    'typescript',
  );
</script>

<div class="intro">
  <p>
    <a href="https://varlock.dev" target="_blank" rel="noopener noreferrer">Varlock</a> turns your
    <code>.env</code> into a validated, typed schema — a <code>.env.schema</code> annotated with JSDoc-style decorators (<code>@type</code>, <code>@required</code>,
    <code>@sensitive</code>). Mochi renders every page on the server on each request, so there's nothing to prerender or statically inline: you <code>load()</code> the schema
    once at boot, then read live values through the typed <code>ENV</code> proxy during SSR.
  </p>
  <CodeSnippet html={codeInstall} />
  <p>
    Point <code>package.json</code>'s <code>varlock.loadPath</code> at your schema, then do this once at the top of your server entry — <code>index.ts</code>, before
    <code>Mochi.serve()</code> — so config is validated before the server boots and every request can read it:
  </p>
  <CodeSnippet html={codeUsage} />
  <p>
    The <code>index.ts</code> tab below shows the full wiring, including <code>patchGlobalConsole()</code> to keep secrets out of your logs. See the decorator DSL at
    <a href="https://varlock.dev" target="_blank" rel="noopener noreferrer">varlock.dev</a>.
  </p>
</div>

<section class="card">
  <header>
    <h2>Resolved on this request</h2>
    <p>These values were parsed, coerced, and validated by <code>varlock</code> during this page's SSR render.</p>
  </header>
  <table class="config">
    <thead>
      <tr><th>Variable</th><th>Value</th><th>Reads as</th></tr>
    </thead>
    <tbody>
      {#each config.items as item (item.key)}
        <tr>
          <td class="var">
            <code>{item.key}</code>
            {#if item.isSensitive}<Badge kind="danger">@sensitive</Badge>{/if}
          </td>
          <td>
            {#if item.isSensitive}
              <span class="masked">••••••••</span>
            {:else}
              <code>{item.value}</code>
            {/if}
          </td>
          <td><code>{item.jsType}</code></td>
        </tr>
      {/each}
    </tbody>
  </table>
  <p class="note">
    <code>DEMO_API_PORT</code> arrives as a JavaScript <code>number</code> ({config.apiPort}), and
    <code>DEMO_API_URL</code> already has its <code>{'${DEMO_API_PORT}'}</code> reference expanded to
    <code>{config.apiUrl}</code>. The <code>@sensitive</code> key never leaves the server — it's masked before it reaches the props, and <code>patchGlobalConsole()</code> keeps it
    out of your logs.
  </p>
</section>