create-winnetoujs-constructos

name: create-winnetoujs-constructos description: Use this skill when you need to create or modify UI components in this project.

RULES:

• constructo file: *.wcto.html
• compiled output: *.wcto.js (generated by WBR)
• never edit compiled output
• exactly ONE <winnetou>...</winnetou> per constructo
• IDs use [[id]]
• first ID becomes exported class name: $id
• props use {{prop}} (optional: {{prop?}}, typed: {{prop:type}})
• winnetoujs compiler is running in background, do not ask user to run it manually
• AVOID use constructos create function directly to string ids, always use returned ids vars. - - Avoid .create("#id") in favor of .create(constructo.ids.id), create method does not need # prefix when using returned ids.

RENDER:

• new $id(props).create("#selector")
• create() returns { ids } where ids.<name> is the runtime DOM id

CUSTOM IDENTIFIERS:

• constructor accepts options as second arg: new $id(props, { identifier: "X" })
• generated DOM id becomes predictable: <id>-win-<identifier>

EXAMPLE (identifier):

import { $helloTitle } from "./hello/hello.wcto";

const c = new $helloTitle({ text: "Hello" }, { identifier: "header" }).create(
  "#app",
);

// c.ids.helloTitle === "helloTitle-win-header"

MULTIPLE IDS (one constructo):

• a constructo can contain many [[id]]
• first [[id]] => class name $firstId
• all ids available via create().ids

EXAMPLE (multiple ids):

<winnetou description="Card">
  <div id="[[card]]">
    <h2 id="[[cardTitle]]">{{title:string}}</h2>
    <button id="[[cardBtn]]">{{btnText:string}}</button>
  </div>
</winnetou>

import { $card } from "./cards/cards.wcto";

const c = new $card({ title: "Hi", btnText: "OK" }).create("#app");
// c.ids.card, c.ids.cardTitle, c.ids.cardBtn

CONSTRUCTOS CHAINING:

• create parent first
• use returned ids as targets for children
• prefer chaining for complex layouts (avoid deep constructoString() nesting)

EXAMPLE (chaining):

<!-- layout.wcto.html -->
<winnetou description="Page layout">
  <div id="[[page]]">
    <header id="[[headerArea]]"></header>
    <main id="[[contentArea]]"></main>
  </div>
</winnetou>

<winnetou description="Header">
  <div id="[[header]]">{{title:string}}</div>
</winnetou>

<winnetou description="Content">
  <div id="[[content]]">{{text:string}}</div>
</winnetou>

import { $page, $header, $content } from "./layout/layout.wcto";

const page = new $page().create("#app");
new $header({ title: "My App" }).create(page.ids.headerArea);
new $content({ text: "Hello" }).create(page.ids.contentArea);

EXAMPLE (minimal):

FILE: src/hello/hello.wcto.html

<winnetou description="Simple hello title">
  <h1 id="[[helloTitle]]">{{text:string}}</h1>
</winnetou>

USAGE: src/app.ts

import { $helloTitle } from "./hello/hello.wcto";

new $helloTitle({ text: "Hello Winnetou" }).create("#app");

PERF:

• When creating events listeners inside constructos, prefer using WinnetouFx (W.fx) instead of directly using addEventListener. Refer to the "use-functions-inside-constructos" skill for more details.