Procedural UI (Island/Widget/SPA)

# Ergonomic Island
- [ ] `accessor(value)` factory
- [ ] `iterate(local_accessor, values => {})`
- [ ] `custom = accessor.of(_: Array | TypedArray | { set(?), get() })`
- [ ] standard JSX factory ++
- [ ] async function as deferred Element
- [ ] async generator as Suspense replacement
- [ ] generator function as either [dynamic](https://www.solidjs.com/tutorial/flow_dynamic?solved) [\](https://crank.js.org/guides/components) or `List()` component
- [ ] `this instanceof Class` where instance is from `@build(Component)` reside
- [ ] ``` bind`accessor` ``` (see SSR/SSG issue)

## single `accessor(value)`
Behind the scene, `accessor(value)` is just a syntactic sugar for `new Accessor(value)` where
```js
const defineAccessor = () => @allocate(Infinity) class {
accessor value
constructor(value) { this.value = value }
valueOf() { return this.value }
}
```
which the `Accessor` class is unique per scopes of Component
```js
let prevC1_a, currentC2_a
function C1() {
const a = accessor()
const b = accessor()

// each variables are differ from others
assert(a.prototype !== b.prototype)

// but each same variables is constructed by the same class
if (prevC1_a) assert(
prevC1_a.prototype === a.prototype
)
prevC1_a = a

// however, it will be different if it came from different scopes although it's in the same order
if (currentC2_a) assert(
currentC2_a.prototype !== a.prototype
)
}

function C2() {
const a = accessor()
const b = accessor()
currentC2_a = a
}
```
> **Warning**: so yeah. The accessor must always be on top and in the same order. Not dynamically created in `if`, in `for`, in ternary operator, created after `await`, created inside callback, etc. Think of it like `super()` constructor.

example
```jsx
const total = accessor(0) // non-iterate()able, behave like signal()

function Button({ value } = {}) {
const count = accessor(value ?? 0) // iterate()able

// increment all every seconds
runOnce(() => setInterval(() =>
iterate(count, (at, i, len) => {
if (+total < 200) {
at[i]++
total++
}
})
), 1e3))

total.value += count
const increment = () =>
total.value += count.value += 1

return
count: {count}

}

function Island() {
return <>
total: {total}
{Array.from(
{ length: 100 },
(i) => ,
)}

}

export default class {
@build(Island)
host //
}
```

## async function and generator
> Inspired from [Crank](https://crank.js.org/guides/async-components) and [Tonic](https://tonicframework.dev)

In async generator, each `yield` and `return` will replace previous `yield`. However, normal generator function will behave the same way as Array of \.

```js
async function IPAddress() {
const res = await fetch("https://api.ipify.org")
const address = await res.text()
return {address}
}

async function *Island() {
yield Loading...

const addr = await fetch("https://api.ipify.org").then(as => as.text())
yield Your IP {addr}

yield
{await fetch("https://api.ipify.org")
.then(as => as.text())} is

// render/print same 100 IP address 😂
return await Promise.all(Array.from(
{ length: 100 },
() => ,
))
}

export default class {
@build(IPAdress)
ip // Loading...

@build(Island)
stressIP //

$.style = getComputedStyle(msg())
$.style.border = "5px"

on.click = stopAt10
}),//
msg = div(text`count ${c_.count}`),
])//
}
```
> **Note**: something not allowed in micro/macro-task inside `el(?, $ => {/*here/*})`
> * add event listener via `on.event = () => {}`
> * append children via `html.el()` or `text()`
>
> but it still ok if doing thats inside `on.event` and `el(?, $ => {/*here/*})`