<div 
  x-data="page()" class="flex flex-col w-full"
>
  <div class="flex flex-row w-full align-start">
    <button 
      @click="run()" class="flex bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
      Start Benchmark
    </button>
    <div class="flex py-2 px-4">
      Status:&nbsp;
      <template 
        x-if="isRunning"
      >
        <label>Running</label>
      </template>
      <template 
        x-if="!isRunning &amp;&amp; !message"
      >
        <label>Ready</label>
      </template>
      
        <label>Ready</label>
      <template 
        x-if="!isRunning &amp;&amp; message"
      >
        <label>Completed</label>
      </template>
    </div>
  </div>
  <ul>
    <template 
      x-for="entry in output" :key="entry"
    >
      <li 
        x-text="entry"
      ></li>
    </template>
  </ul>
  <template 
    x-if="message"
  >
    <div class="block mt-20 p-4 border border-solid border-gray-500 rounded">
      <h3 class="font-semibold">Summary</h3>
      <div 
        x-text="message"
      ></div>
    </div>
  </template>
  <script type="text/javascript">
    function page() {
      const array = [
        "allowfullscreen",
        "allowpaymentrequest",
        "async",
        "autofocus",
        "autoplay",
        "checked",
        "controls",
        "default",
        "defer",
        "disabled",
        "formnovalidate",
        "hidden",
        "ismap",
        "itemscope",
        "loop",
        "multiple",
        "muted",
        "nomodule",
        "novalidate",
        "open",
        "readonly",
        "required",
        "reversed",
        "selected",
        "typemustmatch",
      ];
      const regex = new RegExp(array.join("|"));
      const literalRegex = /allowfullscreen|allowpaymentrequest|async|autofocus|autoplay|checked|controls|default|defer|disabled|formnovalidate|hidden|ismap|itemscope|loop|multiple|muted|nomodule|novalidate|open|readonly|required|reversed|selected|typemustmatch/;
      // add tests
      const match = "hidden";
      const noMatch = "class";

      const suite = new Benchmark.Suite();
      suite
        .add("RegExpInstance#test - match", function () {
          regex.test(match);
        })
        .add("Array#includes - match", function () {
          array.includes(match);
        })
        .add("RegExpLiteral#test - match", function () {
          literalRegex.test(match);
        })
        .add("RegExpInstance#test - no match", function () {
          regex.test(noMatch);
        })
        .add("Array#includes - no match", function () {
          array.includes(noMatch);
        })
        .add("RegExpInstance#test - no match", function () {
          literalRegex.test(noMatch);
        });

      return {
        isRunning: false,
        message: "",
        output: [],
        suite,
        tests: suite.map((t) => t.name),
        run() {
          // cache Alpine instance under $vm (Vue.js instance).
          const $vm = this;
          // reset
          this.message = "";
          this.output = [];
          // set to "running"
          this.isRunning = true;
          this.suite
            .on("cycle", function (event) {
              $vm.output = [...$vm.output, String(event.target)];
            })
            .on("complete", function () {
              $vm.message = `Fastest is ${this.filter("fastest").map(
                "name"
              )}\nSlowest is ${this.filter("slowest").map("name")}`;
              $vm.isRunning = false;
            })
            .run({ async: true });
        },
      };
    }
  </script>
</div>