using / explicit resource management — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 using / explicit resource management</h1>
    <p class="pg-sub">
      Three resources — a <code>Lock</code>, a <code>DB Connection</code>, and a <code>File Handle</code> —
      need to be released in reverse order, even when the work between them throws. Pick a cleanup
      style, then run the happy path or the throwing path and watch what actually gets disposed.
    </p>

<div class="banner info show">
      <strong>Simulated, not native.</strong> <code>using</code> is TC39 Stage 3 — it shipped in
      TypeScript 5.2 and runs natively in recent Chrome, Firefox, Safari and Node, but it is not yet
      Baseline across all browsers. This demo scripts the disposal order the spec defines, so it
      behaves correctly no matter what's rendering this page.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>

<div class="field" style="margin-bottom: 14px;">
        <span class="label">Cleanup style</span>
        <div class="seg" id="modeSeg" role="group" aria-label="Cleanup style">
          <button type="button" data-mode="using" aria-pressed="true">using declaration</button>
          <button type="button" data-mode="manual" aria-pressed="false">manual try/finally</button>
        </div>
      </div>

<div class="btn-row">
        <button class="btn primary" id="runHappy">▶️ Run happy path</button>
        <button class="btn bad" id="runThrow">💥 Run throwing path</button>
        <button class="btn ghost" id="resetBtn">↺ Reset</button>
      </div>

<div class="presets" style="margin-top: 14px">
        <button class="btn sm" data-preset="using-happy">using · happy</button>
        <button class="btn sm" data-preset="using-throw">using · throw (still safe)</button>
        <button class="btn sm" data-preset="manual-happy">manual · happy (partial leak)</button>
        <button class="btn sm" data-preset="manual-throw">manual · throw (leaks!)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The code being simulated</div>
      <div class="code-wrap">
        <pre class="code code-mode active" id="codeUsing">function process() {
  <span class="tok-kw">using</span> lock = acquireLock();
  <span class="tok-kw">using</span> db   = openConnection();
  <span class="tok-kw">using</span> file = openFile();

doWork(); <span class="tok-cmt">// may throw</span>
}
<span class="tok-cmt">// scope exits — normally OR via throw — and</span>
<span class="tok-cmt">// file, then db, then lock dispose automatically, in reverse order.</span></pre>
        <pre class="code code-mode" id="codeManual"><span class="tok-kw">function</span> process() {
  <span class="tok-kw">const</span> lock = acquireLock();
  <span class="tok-kw">const</span> db   = openConnection();
  <span class="tok-kw">const</span> file = openFile();

<span class="tok-kw">try</span> {
    doWork();        <span class="tok-cmt">// may throw</span>
    file.dispose();  <span class="tok-cmt">// only reached if doWork() succeeds</span>
    db.dispose();    <span class="tok-cmt">// only reached if doWork() succeeds</span>
  } <span class="tok-kw">finally</span> {
    <span class="tok-cmt">// lock.dispose();  &lt;- forgotten entirely</span>
  }
}</pre>
      </div>
      <p class="hint">
        Acquisition order:
        <span class="order-line mono"><strong>Lock</strong> <span class="arrow">→</span> <strong>DB Connection</strong> <span class="arrow">→</span> <strong>File Handle</strong></span>.
        Correct disposal always reverses that:
        <span class="order-line mono"><strong>File Handle</strong> <span class="arrow">→</span> <strong>DB Connection</strong> <span class="arrow">→</span> <strong>Lock</strong></span>.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Resources &amp; log</div>

<div class="resources" id="resources">
        <div class="resource" data-res="lock">
          <span class="icon">🔒</span><span class="name">Lock</span>
          <span class="pill" id="pill-lock">idle</span>
        </div>
        <div class="resource" data-res="db">
          <span class="icon">🗄️</span><span class="name">DB Connection</span>
          <span class="pill" id="pill-db">idle</span>
        </div>
        <div class="resource" data-res="file">
          <span class="icon">📄</span><span class="name">File Handle</span>
          <span class="pill" id="pill-file">idle</span>
        </div>
      </div>

<div class="log" id="log" role="log" aria-label="Execution log">Click a run button to start…</div>

<div class="status" id="status" style="margin-top: 12px">
        <span class="dot info" id="dot"></span>
        <span id="statusText" aria-live="polite">Ready — pick a cleanup style, then run a path.</span>
      </div>
      <p class="hint" id="hint">
        Every resource opens in the same order either way. Watch which ones a thrown error skips,
        and which one manual code simply never remembers to close.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.