npm - porffor - Versions diffs - 0.1.0 - Mend

porffor 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (655) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,1264 @@
+<head>
+  <title>porffor</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta itemprop="name" content="porffor">
+  <meta property="og:title" content="porffor">
+  <meta itemprop="description" content="a basic experimental wip AOT optimizing JS -> Wasm compiler in JS">
+  <meta property="og:description" content="a basic experimental wip AOT optimizing JS -> Wasm compiler in JS">
+  <meta property="og:type" content="website">
+  <style>
+    @font-face {
+      font-family: Whitney;
+      font-style: normal;
+      font-weight: 400;
+      src: url(https://capybara.openasar.dev/whitney.woff2) format("woff2")
+    }
+    @font-face {
+      font-family: Ginto;
+      font-style: normal;
+      font-weight: 500;
+      src: url(https://capybara.openasar.dev/ginto.woff2) format("woff2")
+    }
+    :root {
+      --font-normal: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
+      --font-header: Ginto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+      --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+      --header-primary: #ffffff;
+      --header-secondary: #b9bbbe;
+      /* --text-normal: #dcddde;
+      --text-muted: #a3a6aa; */
+      --text-normal: #ffffff;
+      --text-muted: #c1c1c2;
+      --accent: #8545cf;
+      --accent-light: #9c60e0;
+      --accent-dark: #6b2faf;
+      --background-primary: #101418;
+      --background-secondary: #202428;
+      --background-header: 0, 4, 8;
+    }
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      background: var(--background-primary);
+    }
+    * {
+      box-sizing: border-box;
+    }
+    h1 {
+      font-weight: 500;
+      font-family: var(--font-header);
+      font-size: 32px;
+      color: var(--header-primary);
+      margin: 0;
+    }
+    h2 {
+      font-weight: 500;
+      font-family: var(--font-header);
+      font-size: 28px;
+      color: var(--header-primary);
+      margin-top: 60px;
+      margin-bottom: 8px;
+    }
+    header {
+      width: 100%;
+      height: fit-content;
+      padding: 4px 24px;
+      background: rgba(var(--background-header), 0.6);
+      box-shadow: 0 8px 16px rgb(0 0 0 / 24%);
+      backdrop-filter: blur(2px) saturate(0.5);
+      display: flex;
+      align-items: baseline;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+    header > h1 {
+      color: var(--accent-light);
+    }
+    header code {
+      font-family: var(--font-mono);
+      font-size: 20px;
+      color: var(--text-muted);
+    }
+    header > div {
+      flex-grow: 1;
+      margin-left: 4vw;
+      display: flex;
+      gap: 50px;
+      /* justify-content: flex-end; */
+    }
+    header a {
+      color: var(--text-normal);
+      text-decoration: none;
+      font-weight: 500;
+      font-family: var(--font-header);
+      font-size: 24px;
+      transition: .5s color;
+    }
+    a:after {
+      content: '';
+      display: block;
+      margin: auto;
+      margin-top: 2px;
+      height: 2px;
+      width: 0px;
+      background: transparent;
+      transition: width .5s ease, background-color .5s ease;
+    }
+    header a:hover {
+      color: var(--header-primary);
+    }
+    a:hover:after {
+      width: 100%;
+      background: var(--accent-light);
+    }
+    a:active:after {
+      width: 100%;
+      background: var(--accent);
+    }
+    article {
+      padding: 6px 50px;
+      width: 100%;
+      max-width: 2000px;
+      margin: auto;
+    }
+    .tagline {
+    }
+    p {
+      font-size: 18px;
+      font-family: var(--font-normal);
+      color: var(--text-muted);
+      margin-bottom: 20px;
+      margin-top: 0px;
+    }
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 80px;
+      margin-top: 12px;
+      margin-bottom: 60px;
+    }
+    .columns {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .cards > div {
+      background: var(--background-secondary);
+      box-shadow: 0 8px 16px rgb(0 0 0 / 24%);
+      padding: 16px;
+      display: flex;
+      border-radius: 8px;
+      flex-direction: column;
+    }
+    .cards > div svg {
+      width: 32px;
+      height: 32px;
+    }
+    .cards > div svg.stroke path {
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 6px;
+    }
+    .cards > div > h1 {
+      font-family: var(--font-header);
+      color: var(--header-primary);
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+    .cards > div > p {
+      font-family: var(--font-normal);
+      color: var(--text-normal);
+      font-size: 22px;
+      margin-top: 12px;
+      margin-bottom: 10px;
+    }
+    .cards > span {
+      color: var(--text-muted);
+      font-family: var(--font-header);
+      font-size: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .stats {
+      display: flex;
+      flex-direction: column;
+      align-self: center;
+    }
+    .stats > h2 {
+      margin: 0;
+      color: var(--text-normal);
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+    }
+    .stats > h2:not(:last-child) {
+      margin-bottom: 40px;
+    }
+    .stats span {
+      font-weight: 600;
+      color: var(--accent-light);
+    }
+    .stats svg {
+      width: 32px;
+      height: 32px;
+      margin-right: 12px;
+    }
+    header .stats svg {
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+    }
+    .stats [id^="stat_"] {
+      margin: 0 8px;
+    }
+    /* .stats::before {
+      content: '';
+      width: 80%;
+      height: 2px;
+      background: var(--background-secondary);
+      margin: auto;
+      position: relative;
+      top: -4vw;
+    }
+    article > :nth-last-child(2) {
+      margin-bottom: 4vw;
+    } */
+    a {
+      color: var(--accent-light);
+      text-decoration: none;
+      font-weight: 600;
+      display: inline-block;
+    }
+    ::-webkit-scrollbar {
+      width: 12px;
+    }
+    ::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: #303438;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: #000408;
+    }
+    ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
+      border: 4px solid transparent;
+      background-clip: padding-box;
+      border-radius: 12px;
+    }
+    table {
+      background: #202428;
+      color: var(--header-primary);
+      font-family: var(--font-header);
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .compat tr:first-child {
+      background: #101418;
+      font-size: 20px;
+    }
+    .compat tr:first-child > td:nth-child(2), .compat tr:first-child > td:nth-child(3) {
+      width: 160px;
+    }
+    .compat tr {
+      border: 2px solid var(--header-secondary);
+      font-size: 18px;
+    }
+    .compat td {
+      padding: 4px;
+      border: 2px solid black;
+    }
+    .compat td:not(:first-child) {
+      text-align: center;
+    }
+    td.most {
+      background: #97ca00;
+    }
+    td.some {
+      background: #dfb317;
+    }
+    td.initial {
+      background: #fe7d37;
+    }
+    td.unsupported {
+      background: #e05d44;
+    }
+    .index {
+      margin-bottom: 20px;
+    }
+    .index td {
+      padding: 4px;
+    }
+    .index td:first-child {
+      border-left: 3px solid transparent;
+      padding-left: 10px;
+    }
+    .index td:nth-child(2) {
+      width: 70%;
+      color: var(--text-normal);
+    }
+    .sandbox-table {
+      margin-top: 12px;
+      margin-bottom: 12px;
+    }
+    .sandbox-table td {
+      padding: 6px;
+    }
+    .sandbox-table td:last-child {
+      text-align: center;
+    }
+    .detailed.cards {
+      gap: 60px;
+    }
+    .detailed.cards p {
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+    .detailed.cards h2 {
+      font-size: 24px;
+      color: var(--text-normal);
+      margin-top: 10px;
+      margin-bottom: -4px;
+    }
+    .detailed.cards p + p {
+      margin-top: 0;
+    }
+    ul, ol {
+      margin-top: 0px;
+      margin-bottom: 16px;
+      color: var(--text-muted);
+      font-family: var(--font-normal);
+      font-size: 20px;
+    }
+    code {
+      font-family: var(--font-mono);
+      font-size: 80%;
+      color: var(--text-muted);
+    }
+    .usage-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .usage-header code {
+      font-size: 16px;
+    }
+    .check {
+      border-radius: 50%;
+      background: var(--accent);
+      width: 20px;
+      height: 20px;
+    }
+    .check.no {
+      background: none;
+    }
+    .tagline {
+      font-size: 32px;
+    }
+    .subtag {
+      color: #dcddde;
+      font-size: 18px;
+      margin: 0;
+      margin-top: 4px;
+      margin-bottom: 26px;
+    }
+    #split {
+      border-top: 1px solid #606468;
+      display: grid;
+      grid-template-columns: 60% 1fr;
+      width: 100%;
+      height: 70vh;
+    }
+    #split > :last-child {
+      background: #0c0c0c;
+      color: #d0d0d0;
+      padding: 6px;
+      font-family: var(--font-mono);
+      font-size: 14px;
+      border-left: 1px solid #606468;
+      white-space: pre;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    #output, #status {
+      border-top: 1px solid #606468;
+      color: var(--text-muted);
+      background: var(--background-secondary);
+      font-family: var(--font-mono);
+      width: 100%;
+      height: 8vh;
+      font-size: 14px;
+      padding: 6px;
+      white-space: pre;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    #status {
+      padding: 4px;
+      font-size: 14px;
+      height: 26px;
+    }
+    .ansi-31 {
+      color: rgb(197, 15, 31);
+    }
+    .ansi-34 {
+      color: rgb(0, 55, 218);
+    }
+    .ansi-36 {
+      color: rgb(58, 150, 221);
+    }
+    .ansi-35 {
+      color: rgb(136, 23, 152);
+    }
+    .ansi-95 {
+      color: rgb(180, 0, 158);
+    }
+    .ansi-33 {
+      color: rgb(193, 156, 0);
+    }
+    .ansi-90 {
+      color: rgb(118, 118, 118);
+    }
+    #wasm-size {
+      position: absolute;
+      right: 6px;
+      top: 6px;
+      pointer-events: none;
+    }
+    #split > * {
+      position: relative;
+    }
+    #js-size {
+      position: absolute;
+      right: 24px;
+      top: 6px;
+      pointer-events: none;
+      z-index: 9;
+      font-family: var(--font-mono);
+      font-size: 14px;
+      color: #d0d0d0;
+      display: none;
+    }
+    #args {
+      background: var(--background-secondary);
+      font-family: var(--font-mono);
+      width: calc(100% - 180px - 240px);
+      margin: 0;
+      color: var(--text-normal);
+      border: 0;
+      padding: 6px;
+      float: right;
+      font-size: 14px;
+    }
+    #examples_dropdown {
+      width: 180px;
+      padding: 4px;
+      height: 29px;
+      display: inline-block;
+      color: var(--text-normal);
+      font-family: var(--font-normal);
+      font-size: 16px;
+      background: var(--background-secondary);
+      border: none;
+      margin-right: 20px;
+    }
+    article {
+      color: var(--text-muted);
+      font-family: var(--font-normal);
+    }
+    #valtype_dropdown, #opt_dropdown {
+      width: fit-content;
+      padding: 4px;
+      height: 29px;
+      display: inline-block;
+      color: var(--text-normal);
+      font-family: var(--font-normal);
+      font-size: 14px;
+      background: var(--background-secondary);
+      border: none;
+      margin-left: 4px;
+      margin-right: 12px;
+    }
+    #test262 {
+      display: grid;
+      grid-template-columns: 400px 1fr;
+      gap: 24px;
+      margin: 48px 0;
+      width: 100%;
+      /* height: 80vh; */
+      height: 600px;
+    }
+    #commit_log {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 24px;
+      overflow-x: auto;
+    }
+    #commit_log > div {
+      display: flex;
+      flex-direction: column;
+      background: var(--background-secondary);
+      padding: 8px;
+      border-radius: 8px;
+    }
+    #commit_log > div > :first-child {
+      font-size: 18px;
+      font-weight: 500;
+      color: var(--text-normal);
+    }
+    #commit_log > div > :last-child {
+      font-size: 18px;
+      font-weight: 500;
+      color: #57F287;
+      margin-top: 6px;
+    }
+    #commit_log > div > :last-child > span {
+      color: var(--text-muted);
+      font-size: 16px;
+      margin-left: 6px;
+    }
+    #commit_log > div > :last-child > div {
+      font-size: 16px;
+      font-weight: 400;
+      color: var(--text-muted);
+      display: inline;
+      float: right;
+    }
+    header img {
+      vertical-align: middle;
+      border-radius: 4px;
+      margin-right: 8px;
+    }
+    #graph {
+      /* background: var(--background-secondary);
+      border-radius: 8px;
+      padding: 8px; */
+    }
+    #graph > div {
+      display: inline-flex;
+      flex-direction: column;
+      height: 100%;
+      vertical-align: top;
+    }
+    #graph > div > :first-child {
+      height: calc(100% - 20px);
+      display: flex;
+      flex-direction: column;
+    }
+    #graph > div > :last-child {
+      height: 20px;
+      font-size: 12px;
+      font-family: var(--font-header);
+      padding: 2px;
+      border-top: 1px solid #606468;
+      background: #000408;
+    }
+    .graph-0 {
+      background: #13a10e;
+    }
+    .graph-1 {
+      background: #c19c00;
+    }
+    .graph-2 {
+      background: #e74856;
+    }
+    .graph-3 {
+      background: #792027;
+    }
+    .graph-4 {
+      background: #c50f1f;
+    }
+    .graph-5 {
+      background: #cccccc;
+    }
+    .graph-6 {
+      background: #dd5719;
+    }
+    #benches {
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px 64px;
+      margin-bottom: 64px;
+    }
+    #benches h2 {
+      font-size: 22px;
+      margin-top: 0;
+      margin-bottom: 12px;
+    }
+    #benches code {
+      font-size: 1em;
+    }
+    #benches > div > div {
+      display: flex;
+      margin-bottom: 6px;
+    }
+    #benches > div > div > :first-child {
+      font-size: 18px;
+      color: var(--text-normal);
+      flex-basis: 140px;
+      flex-shrink: 0;
+    }
+    #benches > div > div > :last-child {
+      padding: 0 4px;
+      background: var(--background-secondary);
+      color: var(--text-muted);
+      font-size: 16px;
+      height: 22px;
+      line-height: 22px;
+      border-radius: 6px;
+    }
+    #benches .porffor {
+      background: var(--accent-light) !important;
+      color: var(--text-normal) !important;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1><img width="32" src="logo.png">porffor</h1>
+    <div>
+      <a href="https://github.com/CanadaHonk/porffor">GitHub</a>
+    </div>
+  </header>
+  <article>
+    <h1 class="tagline">a basic experimental wip AOT optimizing JS -> Wasm compiler in JS</h1>
+    <!-- <h2 class="subtag">about as insane as it sounds</h2> -->
+    <p>porffor is a very unique js engine, due a very different approach. it is seriously limited, but what it can do, it does pretty well. made from scratch except parser. began ~3 weeks ago.</p>
+    <!-- <ul>
+      <li>100% aot compiled</li>
+      <li>everything is a number</li>
+      <li>no constant runtime/preluded code</li>
+    </ul> -->
+    <select id="examples_dropdown"></select>
+    valtype <select id="valtype_dropdown"></select>
+    opt <select id="opt_dropdown"></select>
+    <input type="text" placeholder="extra compiler args" id="args">
+    <div id="split"></div>
+    <div id="output"></div>
+    <div id="status"></div>
+    <div id="test262">
+      <div id="commit_log"></div>
+      <div id="graph"></div>
+    </div>
+    <div id="benches">
+      <div id="bench_0">
+        <h2>sum 1 million random numbers</h2>
+      </div>
+      <div id="bench_1">
+        <h2>count prime numbers 1-10000</h2>
+      </div>
+      <div id="bench_2">
+        <h2>factorial of 100</h2>
+      </div>
+    </div>
+  </article>
+  <script> (async () => {
+    if (window.crossOriginIsolated === false) {
+      console.log('not cross-origin isolated, registering service worker for later');
+      const worker = await navigator.serviceWorker.register('./sw.js');
+    }
+    const loadScript = async x => {
+      const el = document.createElement('script');
+      el.src = x;
+      document.head.append(el);
+      await new Promise(res => el.onload = res);
+    };
+    if (!window.monaco) {
+      await loadScript('https://cdn.openasar.dev/monaco-editor/min/vs/loader.js');
+      // await new Promise(res => setTimeout(res, 500));
+      require.config({ paths: { vs: 'https://cdn.openasar.dev/monaco-editor/min/vs' } });
+      await new Promise(res => require(['vs/editor/editor.main'], res));
+    }
+    const monacoContainer = document.createElement('div');
+    // monacoContainer.style.width = '100%';
+    // monacoContainer.style.height = '75vh';
+    split.appendChild(monacoContainer);
+    const jsSize = document.createElement('div');
+    jsSize.id = 'js-size';
+    monacoContainer.append(jsSize);
+    const wasmView = document.createElement('div');
+    split.appendChild(wasmView);
+    const status = document.getElementById('status');
+    const examples = {
+'Prime Numbers': `function isPrime(number) {
+  if (number < 2) return false;
+  for (let i = 2; i < number; i++) {
+    if (number % i == 0) return false;
+  }
+  return true;
+}
+let counter = 0;
+while (counter <= 10000) {
+  if (isPrime(counter)) console.log(counter);
+  counter++;
+}`,
+'Fibonacci': `let a = 0, b = 1;
+console.log(a); console.log(b);
+for (let i = 2; i <= 45; i++) {
+  let t = b + a;
+  a = b;
+  b = t;
+  console.log(t);
+}`,
+'Factorial': `const factorial = n => n === 0 ? 1 : (n * factorial(n - 1));
+console.log(factorial(10));`,
+'Sum of Digits': `let n = 654, sum = 0;
+while (n > 0) {
+  sum += n % 10;
+  n /= 10;
+}
+console.log(sum);`,
+'Exception': `throw new Error('Hello, world!')`,
+'Array Reading': `let arr = [ 2, 4, 8, 16 ];
+for (let i = 0; i < arr.length; i++) console.log(arr[i]);`,
+'Array Prototype': `let arr = [ 1, 2, 3 ];
+arr.push(4); // 4
+arr.shift(); // 1
+arr.pop(); // 4
+arr.at(0); // 2
+arr.at(-1); // 3`,
+'Math Proposals': `console.log(Math.signbit(1)) // false
+console.log(Math.signbit(-1)) // true
+console.log(Math.radians(180)) // 3.141592...
+console.log(Math.RAD_PER_DEG) // 0.017453...
+console.log(Math.clamp(12, 0, 10)) // 10
+console.log(Math.scale(4, 0, 10, 0, 1)) // 0.4`,
+    };
+    const defaultExample = 'Prime Numbers';
+    let code = examples[defaultExample];
+    const addOptions = (container, options, def) => {
+      for (const x of options) {
+        const el = document.createElement('option');
+        el.textContent = x;
+        el.selected = x === def;
+        container.appendChild(el);
+      }
+    };
+    addOptions(examples_dropdown, Object.keys(examples), defaultExample);
+    addOptions(valtype_dropdown, [ 'i32', 'i64', 'f64' ], 'f64');
+    addOptions(opt_dropdown, [ 0, 1, 2, 3 ], 1);
+    examples_dropdown.oninput = () => {
+      code = examples[examples_dropdown.value];
+      editor.setValue(code);
+      comp();
+    };
+    valtype_dropdown.oninput = opt_dropdown.oninput = () => comp();
+    window.editor = monaco.editor.create(monacoContainer, {
+      value: code,
+      codeLens: false,
+      language: 'javascript',
+      theme: 'vs-dark',
+      minimap: {
+        enabled: false
+      }
+    });
+    const debounce = (handler, timeout) => {
+      let timer;
+      return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => handler(...args), timeout);
+      };
+    };
+    const compile = (await import('../compiler/wrap.js')).default;
+    const comp = async () => {
+      globalThis.process = {
+        argv: ['', '', ...args.value.split(' '), `-valtype=${valtype_dropdown.value}`, `-O${opt_dropdown.value}`]
+      };
+      jsSize.textContent = `${new Blob([code]).size} bytes`;
+      let cache = '';
+      const print = str => {
+        cache += str;
+        if (str === '\n') {
+          // output.textContent += cache;
+          // cache = '';
+        }
+      };
+      output.textContent = '';
+      wasmView.innerHTML = '';
+      status.textContent = 'compiling...';
+      let wasm, exports, times, decomps;
+      try {
+        0, { wasm, exports, times, decomps } = await compile(code, [ 'module', 'decomp' ], {}, print);
+      } catch (e) {
+        console.error(e);
+        status.textContent = `${e.constructor.name}: ${e.message}`;
+        return;
+      }
+      wasmView.innerHTML = `<div id="wasm-size">${wasm.byteLength} bytes</div>` + decomps.join('\n').replaceAll('\x1B[0m', '</span>').replace(/\x1B\[([0-9]{2})m/g, (_, esc) => `<span class="ansi-${esc}">`);
+      status.textContent = `compiled in ${times[0].toFixed(2)}ms`;
+      await new Promise(res => setTimeout(res, 10));
+      const t2 = performance.now();
+      try {
+        exports.main();
+      } catch (e) {
+        console.error(e);
+        status.textContent = `${e.constructor.name}: ${e.message}`;
+        return;
+      }
+      print('\n');
+      const execTime = performance.now() - t2;
+      status.textContent += `. executed in ${execTime.toFixed(2)}ms`;
+      const t3 = performance.now();
+      try {
+        eval(code);
+      } catch {}
+      const evalTime = performance.now() - t3;
+      status.textContent += `. eval took ${evalTime.toFixed(2)}ms (${(evalTime / execTime).toFixed(1)}x)`;
+      output.textContent = cache;
+    };
+    const compDebounce = debounce(comp, 500);
+    editor.getModel().onDidChangeContent(e => {
+      code = editor.getValue();
+      compDebounce();
+    });
+    args.oninput = () => compDebounce();
+    comp();
+    const niceDate = x => {
+      let hours = x.getHours();
+      let ind = 'am';
+      if (hours >= 12) {
+        hours = hours % 12;
+        if (hours === 0) hours = 12;
+        ind = 'pm';
+      }
+      return `${x.toLocaleString('default', { month: 'long' })} ${x.getDate()}, ${x.getFullYear()}`;
+      // return `${hours}:${x.getMinutes().toString().padStart(2, '0')} ${ind} · ${x.toLocaleString('default', { month: 'long' })} ${x.getDate()}, ${x.getFullYear()}`;
+    };
+    const getCommits = async pages => {
+      let out = [];
+      for (let i = 1; i <= pages; i++) {
+        out.push(...(await (await fetch('https://api.github.com/repos/canadahonk/porffor/commits?per_page=100&page=' + i)).json()));
+      }
+      return out;
+    };
+    let commits = await getCommits(3);
+    const getCommitPercent = x => parseFloat(x.commit.message.trim().split('\n').pop().match(/([0-9]+(\.[0-9]+)?)%/)?.[1]);
+    const getCommitDetails = x => x.commit.message.trim().split('\n').pop().split(' | ').slice(1).map(x => x.split(' ')[1]);
+    const graphData = {};
+    for (let i = 0; i < commits.length; i++) {
+      const x = commits[i];
+      const msg = x.commit.message.trim().split('\n');
+      const el = document.createElement('div');
+      const textEl = document.createElement('div');
+      textEl.textContent = msg[0].slice(0, 42) + (msg[0].length > 42 ? '...' : '');
+      const when = new Date(x.commit.committer.date);
+      const whenEl = document.createElement('div');
+      whenEl.textContent = niceDate(when);
+      const percent = getCommitPercent(x);
+      if (isNaN(percent)) continue;
+      let prevPercent = NaN;
+      for (let j = i + 1; j < commits.length; j++) {
+        prevPercent = getCommitPercent(commits[j]);
+        if (!isNaN(prevPercent)) break;
+      }
+      let change = 0;
+      if (!isNaN(prevPercent)) change = percent - prevPercent;
+      if (change === 0) continue;
+      const percentEl = document.createElement('div');
+      percentEl.innerHTML = `${percent.toFixed(2)}%${change !== 0 ? `<span>(${change > 0 ? '+' : ''}${change.toFixed(2)})</span>` : ''}`;
+      // textEl.append(percentEl);
+      percentEl.append(whenEl);
+      el.append(textEl, percentEl);
+      commit_log.append(el);
+      let details = getCommitDetails(x);
+      if (!details || details.length === 0) continue;
+      // add 0 timeouts if not included
+      if (details.length === 7) details = [ ...details.slice(0, 6), 0, details[6] ];
+      const key = `${when.getDate().toString().padStart(2, '0')}/${(when.getMonth() + 1).toString().padStart(2, '0')}`;
+      if (graphData[key]) continue;
+      graphData[key] = details;
+    }
+    let last = [];
+    for (let i = 8; i <= (new Date()).getDate(); i++) {
+      const key = `${i.toString().padStart(2, '0')}/07`;
+      if (!graphData[key]) graphData[key] = last;
+        else last = graphData[key];
+    }
+    for (const x of Object.keys(graphData).sort((a, b) => parseInt(a.slice(0, 2)) - parseInt(b.slice(0, 2)))) {
+      const details = graphData[x];
+      const [ total, passes, fails, runtimeErrors, wasmErrors, compileErrors, timeouts, todos ] = details;
+      const containerEl = document.createElement('div');
+      const barEl = document.createElement('div');
+      let i = 0;
+      for (const y of details.slice(1)) {
+        const el = document.createElement('div');
+        el.style.height = `${(y / total) * 100}%`;
+        el.className = `graph-${i}`;
+        el.title = (['Pass', 'Fail', 'Runtime error', 'Wasm error', 'Compile error', 'Timeout', 'Todo'])[i] + `: ${y} (${((y / total) * 100).toFixed(2)}%)`;
+        barEl.appendChild(el);
+        i++;
+      }
+      const keyEl = document.createElement('div');
+      keyEl.textContent = x;
+      containerEl.append(barEl, keyEl);
+      graph.appendChild(containerEl);
+    }
+    const benches = async () => {
+      const SAMPLES = 10;
+      const results = {};
+      const avg = arr => arr.reduce((acc, x) => acc + x, 0) / arr.length;
+      const bench = (which, what, run) => {
+        let times = [];
+        for (let i = 0; i < SAMPLES; i++) {
+          const t = performance.now();
+          run();
+          times.push(performance.now() - t);
+        }
+        if (!results[which]) results[which] = {};
+        results[which][what] = avg(times);
+      };
+      function randoms(max) {
+        let sum = 0;
+        for (let i = 0; i < max; i++) {
+          sum += Math.random();
+        }
+        return sum;
+      }
+      function countPrimes(max) {
+        function isPrime(number) {
+          if (number < 2) return false;
+          for (let i = 2; i < number; i++) {
+            if (number % i == 0) return false;
+          }
+          return true;
+        }
+        let counter = 0, primes = 0;
+        while (counter <= max) {
+          if (isPrime(counter)) primes++;
+          counter++;
+        }
+        return primes;
+      }
+      function factorial(n) {
+        if (n === 0) return 1;
+        return n * factorial(n - 1);
+      }
+      const maxes = [ 1000000, 10000, 100 ];
+      const funcs = [ randoms, countPrimes, factorial ];
+      for (let i = 0; i < funcs.length; i++) {
+        const func = funcs[i];
+        const max = maxes[i];
+        bench(i, 'your browser', () => {
+          func(max);
+        });
+        globalThis.process = { argv: [] };
+        const compiled = (await compile('export ' + func.toString())).exports[func.name];
+        bench(i, 'porffor', () => {
+          compiled(max);
+        });
+        /* try {
+          process.argv.push('-valtype=i32');
+          if (['factorial'].includes(func.name)) throw 'overflow';
+          const compiledI32 = (await compile('export ' + func.toString())).exports[func.name];
+          bench(i, 'porffor (i32)', () => {
+            compiledI32(max);
+          });
+        } catch {
+          // ignore as some things are unsupported in i32 mode
+        } finally {
+          process.argv.pop();
+        } */
+      }
+      for (let i = 0; i < funcs.length; i++) {
+        const maxTime = Math.max(...Object.values(results[i])) * 1.1;
+        const parentEl = document.getElementById(`bench_${i}`);
+        const keys = Object.keys(results[i]).sort((a, b) => results[i][a] - results[i][b]);
+        for (const x of keys) {
+          const result = results[i][x];
+          const el = document.createElement('div');
+          const labelEl = document.createElement('div');
+          labelEl.textContent = x;
+          const barEl = document.createElement('div');
+          barEl.textContent = result.toFixed(2) + 'ms';
+          barEl.style.width = `calc((100% - 140px) * ${(result / maxTime)})`;
+          barEl.className = x;
+          el.append(labelEl, barEl);
+          parentEl.append(el);
+        }
+      }
+    };
+    setTimeout(benches, 3000);
+  })();</script>
+</body>