`@build` and `@draw` decorator
- Dominant language
- JavaScript
- Stars
- 4
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
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.
---
```ts
import { App, Game } from "./main.ts"
export default class {
@build(App) host: HTMLElement //
@draw("webgpu", Game) canvas: HTMLCanvasElement //
}
```
```ts
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
```
---
```html
Preact + THREE
```
```ts
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"
```
---
```html
basic WebGPU demo
```
```ts
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"
```
---
Contributor guide
No contributing guide indexed for this repository
Research direction
Read the proposed bind.ts and main.ts entry points first, then review the @build and @draw examples and the integration imports for Preact, THREE, and vanilla rendering. Done would mean the framework-agnostic decorators and setApp/setGame bindings support the illustrated App and Game usage across those integrations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, three.js, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100