<h1>explicit resource management support</h1>
<main>
<table>
  <thead>
    <tr>
      <th>機能</th>
      <th>有効/無効</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><a href="https://tc39.es/proposal-explicit-resource-management/#sec-ecmascript-language-types-symbol-type" target="_blank">@@dispose</a></th>
      <td id="symbol_dispose"></td>
    </tr>
    <tr>
      <th><a href="https://tc39.es/proposal-explicit-resource-management/#sec-ecmascript-language-types-symbol-type" target="_blank">@@asyncDispose</a></th>
      <td id="symbol_asyncdispose"></td>
    </tr>
    <tr>
      <th><a href="https://tc39.es/proposal-explicit-resource-management/#sec-disposablestack-objects" target="_blank">DisposableStack</a></th>
      <td id="disposablestack"></td>
    </tr>
    <tr>
      <th><a href="https://tc39.es/proposal-explicit-resource-management/#sec-asyncdisposablestack-objects">AsyncDisposableStack</a></th>
      <td id="asyncdisposablestack"></td>
    </tr>
    <tr>
      <th><a href="https://tc39.es/proposal-explicit-resource-management/#sec-declarations-and-the-variable-statement" target="_blank">using statement</a></th>
      <td id="using_statement"></td>
    </tr>
    <tr>
      <th><a href="https://tc39.es/proposal-explicit-resource-management/#sec-declarations-and-the-variable-statement" target="_blank">await using statement</a></th>
      <td id="await_using_statement"></td>
    </tr>
  </tbody>
</table>
</main>
<footer>
  <li><a href="https://tc39.es/proposal-explicit-resource-management/" target="_blank">ECMAScript Explicit Resource Management</a></li>
  <li><a href="https://github.com/tc39/proposal-explicit-resource-management" target="_blank">tc39/proposal-explicit-resource-management: ECMAScript Explicit Resource Management</a></li>
</footer>

:root {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  body {
    display: contents;
  }
  h1 {
    margin: 0;
    background: black;
    color: white;
    font-size: 1.3rem;
  }
  main {
    flex: 1 1 auto;
    overflow: auto;
    table,
    td,
    th {
      border: 1px solid white;
    }
    table {
      border-collapse: collapse;
      th {
        text-align: left;
      }
      tr:has(.enable) :where(td, th) {
        background-color: green;
        color: white;
      }
      tr:has(.disable) :where(td, th) {
        background-color: white;
        color: red;
      }
      thead {
        position: sticky;
        top: 0;
        th {
          background: white;
          color: black;
        }
      }
    }
  }
  footer {
    background: silver;
    color: black;
    li {
      list-style: none;
    }
  }
}

for (const [element, func] of [
  // #region symbol_dispose
  [symbol_dispose, () => typeof Symbol.dispose === "symbol"],
  // #endregion
  // #region symbol_asyncdispose
  [symbol_asyncdispose, () => typeof Symbol.asyncDispose === "symbol"],
  // #endregion
  // #region disposablestack
  [disposablestack, () => typeof globalThis.DisposableStack === "function"],
  // #endregion
  // #region asyncdisposablestack
  [
    asyncdisposablestack,
    () => typeof globalThis.AsyncDisposableStack === "function",
  ],
  // #endregion
  // #region using_statement
  [
    using_statement,
    () => {
      try {
        const func = new Function(`
            let value = false;
            {
              using v = {[Symbol.dispose]: () => value = true,};
            }
            return value;
          `);
        return func();
      } catch (e) {
        return false;
      }
    },
  ],
  // #endregion
  // #region await_using_statement
  [
    await_using_statement,
    async () => {
      const AsyncFunction = async function () {}.constructor;
      try {
        const func = new AsyncFunction(`
            let value = false;
            {
              await using v = {[Symbol.asyncDispose]: async () => value = true,};
            }
            return value;
          `);
        return func();
      } catch (e) {
        console.error(e);
        return false;
      }
    },
  ],
  // #endregion
]) {
  const enable = await func();
  element.classList.add(enable ? "enable" : "disable");
  element.innerText = `${enable ? "有効" : "無効"}`;
}

export {};