add benchmark example

README.md

@@ -45,7 +45,11 @@ Hello World!
 
 # Run Programmatically
 
-You can also run `bx` programmatically, e.g. to hydrate components within the browser. For example, to hydrate a [Lit](https://lit.dev/) component through a [Koa](https://koajs.com/) server, you can run this script:
+You can also run `bx` programmatically, e.g. to hydrate components within the browser.
+
+## Hydrate Web Components
+
+For example, to hydrate a [Lit](https://lit.dev/) component through a [Koa](https://koajs.com/) server, you can run this script:
 
 ```ts
 import path from "node:path";
@@ -81,6 +85,57 @@ app.listen(3000);
 console.log("Server running at http://localhost:3000/");
 ```
 
+## Run Benchmark Tests in Browser
+
+Another interesting use case is running benchmarks within different browsers using tools like Tinybench. For example:
+
+```ts
+import assert from 'node:assert'
+import { test } from 'node:test'
+import { run } from 'bx'
+
+async function benchmarkTest() {
+    const { Bench } = await import('tinybench');
+    const bench = new Bench({ time: 100 });
+
+    bench
+        .add('faster task', () => {
+            // console.log('I am faster')
+        })
+        .add('slower task', async () => {
+            await new Promise(r => setTimeout(r, 1)) // we wait 1ms :)
+            // console.log('I am slower')
+        })
+
+    await bench.warmup(); // make results more reliable, ref: https://github.com/tinylibs/tinybench/pull/50
+    await bench.run();
+
+    return bench.results;
+}
+
+test('benchmark test in Chrome', async () => {
+    const results = await run(benchmarkTest, {
+        browserName: 'chrome'
+    })
+    assert.equal(results.length, 2)
+    assert.ok(results[0].mean < results[1].mean)
+    assert.ok(results[0].mean < 1)
+    // mean is around 4.45
+    assert.ok(results[1].mean > 4)
+    assert.ok(results[1].mean < 5)
+})
+
+test('benchmark test in Firefox', async () => {
+    const results = await run(benchmarkTest, {
+        browserName: 'firefox'
+    })
+    assert.ok(results[0].mean < 1)
+    // mean is around 5
+    assert.ok(results[1].mean > 4.5)
+    assert.ok(results[1].mean < 5.55)
+})
+```
+
 # Session Management
 
 If you like to speed up your execution, you can create browser sessions on your system and run scripts through them immediately without having to spin up the browser. You can create a session via:

examples/benchmark.test.ts

@@ -0,0 +1,44 @@
+import assert from 'node:assert'
+import { test } from 'node:test'
+import { run } from '../dist/index.js'
+
+async function benchmarkTest() {
+    const { Bench } = await import('tinybench');
+    const bench = new Bench({ time: 100 });
+
+    bench
+        .add('faster task', () => {
+            // console.log('I am faster')
+        })
+        .add('slower task', async () => {
+            await new Promise(r => setTimeout(r, 1)) // we wait 1ms :)
+            // console.log('I am slower')
+        })
+
+    await bench.warmup(); // make results more reliable, ref: https://github.com/tinylibs/tinybench/pull/50
+    await bench.run();
+
+    return bench.results;
+}
+
+test('benchmark test in Chrome', async () => {
+    const results = await run(benchmarkTest, {
+        browserName: 'chrome'
+    })
+    assert.equal(results.length, 2)
+    assert.ok(results[0].mean < results[1].mean)
+    assert.ok(results[0].mean < 1)
+    // mean is around 4.45
+    assert.ok(results[1].mean > 4)
+    assert.ok(results[1].mean < 5)
+})
+
+test('benchmark test in Firefox', async () => {
+    const results = await run(benchmarkTest, {
+        browserName: 'firefox'
+    })
+    assert.ok(results[0].mean < 1)
+    // mean is around 5
+    assert.ok(results[1].mean > 4.5)
+    assert.ok(results[1].mean < 5.55)
+})

examples/lit-hydrate/example.ts

@@ -19,7 +19,7 @@ app.use(async (ctx) => {
         const dom = await render(html`<simple-greeting></simple-greeting>`);
         return Array.from(dom).join('\n')
     }, {
-        sessionName: 'haha',
+        browserName: 'chrome',
         rootDir: __dirname
     })
 })

package.json

@@ -14,6 +14,7 @@
     "example:lit": "cd examples/lit-hydrate && npm install && tsx example.ts",
     "example:script": "./bin/bx examples/consoleLog.js --browserName chrome",
     "example:html": "./bin/bx examples/consoleLog.html --browserName chrome",
+    "example:benchmark": "tsx examples/benchmark.test.ts",
     "test": "vitest --run",
     "watch": "tsc -w"
   },