tigt/faucet.marko

## faucet.marko
import { randomString } from './randomstring.js'

$ {
  const { query } = input
  const chunks = Math.max(0, Math.min(query.chunks || 0, 999))
  const size = Math.max(0.001, Math.min(query.kB || 1, 1024))
  const delay = Math.max(0.001, Math.min(query.delay || 0.5, 60))
}

<!doctype html>
<meta charset="utf-8">
<title>🚰 ${chunks}×${size}kB/${delay}s · Streams Test</title>
<link rel="icon" href="about:blank">

<form>
  <h1>🚰 Programmable faucet</h1>

  <p><label>
    Number of chunks: <input type="number" min=1 max=999 name="chunks" value=chunks||1 />
  </label></p>

  <p><label>
    Chunk size: ~<input type="number" min=0.001 max=1024 step="any" name="kB" value=size.toFixed(3) aria-describedby:scoped="desc" /> kB
  </label> <small id:scoped="desc">Controls how many pre-compression UTF-8 bytes are written to HTML; does not include TCP/IP, TLS, or chunked transfer-encoding overhead.</small></p>

  <p><label>
    Delay each chunk by <input type="number" min=0.001 max=60 step=0.001 name="delay" value=delay /> second(s)
  </label></p>

  <p><button>Stream</button></p>
</form>

<if(chunks)>
<section role="log">
<i>Streaming…</i>

<ol>
  <for|i| from=1 to=chunks>
    $ const delayNext = new Promise(resolve =>
      setTimeout(resolve, i * delay * 1000)
    )
    <await(delayNext) timeout=chunks*delay*1000>
      <@then>
        <li>
          <html-comment>${randomString(size * 1000)}</html-comment>Wrote ${size*1000} chars @ <code>${process.hrtime().join('.')}</code>
        </li>
      </@then>
    </await>
  </for>
</ol>
<i>Done.</i>
</section>
</if>
	import { randomString } from './randomstring.js'

	$ {
	const { query } = input
	const chunks = Math.max(0, Math.min(query.chunks \|\| 0, 999))
	const size = Math.max(0.001, Math.min(query.kB \|\| 1, 1024))
	const delay = Math.max(0.001, Math.min(query.delay \|\| 0.5, 60))
	}

	<!doctype html>
	<meta charset="utf-8">
	<title>🚰 ${chunks}×${size}kB/${delay}s · Streams Test</title>
	<link rel="icon" href="about:blank">

	<form>
	<h1>🚰 Programmable faucet</h1>

	<p><label>
	Number of chunks: <input type="number" min=1 max=999 name="chunks" value=chunks\|\|1 />
	</label></p>

	<p><label>
	Chunk size: ~<input type="number" min=0.001 max=1024 step="any" name="kB" value=size.toFixed(3) aria-describedby:scoped="desc" /> kB
	</label> <small id:scoped="desc">Controls how many pre-compression UTF-8 bytes are written to HTML; does not include TCP/IP, TLS, or chunked transfer-encoding overhead.</small></p>

	<p><label>
	Delay each chunk by <input type="number" min=0.001 max=60 step=0.001 name="delay" value=delay /> second(s)
	</label></p>

	<p><button>Stream</button></p>
	</form>

	<if(chunks)>
	<section role="log">
	<i>Streaming…</i>

	<ol>
	<for\|i\| from=1 to=chunks>
	$ const delayNext = new Promise(resolve =>
	setTimeout(resolve, i * delay * 1000)
	)
	<await(delayNext) timeout=chunksdelay1000>
	<@then>
	<li>
	<html-comment>${randomString(size * 1000)}</html-comment>Wrote ${size*1000} chars @ <code>${process.hrtime().join('.')}</code>
	</li>
	</@then>
	</await>
	</for>
	</ol>
	<i>Done.</i>
	</section>
	</if>