Support named export (top-level binding)

> **Warning**: this pattern is highly experimental

```html

0
0

```
```jsx
function increment() { this.value++ }

export function counter(element) {
element ??= this ??
element.addEventListener("click", increment)
return element
}
```

> 👣 **Footgun**: how do you bind variable (i.e `total`)?
```js
export let total
// total += 1
// require compiler
// (maybe compile to class
// with @bind accessor
// for the sake of performance
// 😂)

export const total = {}
// total.value += 1
// works without compiler but weird
```

---
The reason I'm interested in named export is because of [`handleEvent()`](https://dom.spec.whatwg.org/#dom-eventlistener-handleevent) pattern in `class`[^1]

```html

0

```
```jsx
export class Counter {
value = 0
constructor(element = ) {
element.addEventListener("click", this)
return Object.setPrototypeOf(element, new.target.prototype)
}
handleEvent(event) {
switch (event.type) {
case "click":
this.increment()
break
default:
this.value = +event.currentTarget.value
}
}
increment() { this.value++ }
}
```
use module in other area or projects
```js
import { Counter } from "./module.js"
for (const input of document.querySelectorAll("input.counter")) {
const counter = new Counter()
input.after(counter)
input.addEventListener("change", counter)
}
```

[^1]: [DOM handleEvent: a cross-platform standard since year 2000](https://webreflection.medium.com/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38)