`@build` and `@draw` decorator

Although this seems unnecessary, it solve portability problem. It makes the binding class being framework agnostic. No need to import specific render function from certain framework.

import { App, Game } from "./main.ts"

export default class {
  @build(App) host: HTMLElement // <render-scope :ref="host">
  @draw("webgpu", Game) canvas: HTMLCanvasElement // <canvas :ref="canvas">
}

export const
  App: [() => JSX.Element] = [],
  Game: [(ctx: AnyRenderingContext) => void] = []

export const
  setApp = (app: typeof App) => App[0] = app,
  setGame = (game: typeof Game) => Game[0] = game

<title>Preact + THREE</title>
<render-scope :ref="host">
  <link rel="modulepreload" href="preact-three.js">
  <canvas :ref="canvas"/>
</render-scope>

import "wiles/integration/preact"
import "wiles/integration/three"

import App from "./demo/preact.jsx"
import Game from "./demo/three.js"
import { setApp, setGame } from "./main.ts"

setApp(App)
setGame(Game)

export * from "./bind.ts"

<title>basic WebGPU demo</title>
<render-scope :ref="host">
  <link rel="modulepreload" href="vanilla.js">
  <canvas :ref="canvas"/>
</render-scope>

import App from "./demo/dom.js"
import Game from "./demo/webgpu.js"
import { setApp, setGame } from "./main.ts"

setApp(App)
setGame(Game)

export * from "./bind.ts"

DrSensor / nusa

`@build` and `@draw` decorator #19