Getting Started

WebX CLI ออกแบบให้เรียกผ่าน bunx webx-5m ได้โดยตรง มีคำสั่งหลักสำหรับสร้างโปรเจกต์ใหม่ และ sync component list เข้า webx.json

Create Project

bunx webx-5m create my-app

คำสั่งนี้จะ:

• clone WebX template จาก GitHub
• ลบ .git ของ template ออกเพื่อให้เริ่ม repo ใหม่ได้สะอาด
• หา package.json ในโปรเจกต์และโฟลเดอร์ย่อย
• รัน dependency install ให้อัตโนมัติด้วย bun ถ้ามี หรือ fallback เป็น npm

ถ้าต้องการสร้างไฟล์อย่างเดียวและยังไม่ติดตั้ง dependency:

bunx webx-5m create my-app --no-install

Generate Component Manifest

หลังเพิ่มหรือลบ component ใน web/components ให้รัน:

bunx webx-5m generate

คำสั่งนี้จะ scan folder ใน web/components ที่มีทั้ง app.js และ template.html แล้วแก้ web/webx.json อัตโนมัติ

ตัวอย่างผลลัพธ์:

Components
  counter (component)
  home (main)

และจะเขียน config:

{
    "main": "home",
    "components": [
        "counter"
    ]
}

Choose Main Component

ถ้าต้องการกำหนด main เอง:

bunx webx-5m generate --main home

ถ้าไม่กำหนด CLI จะใช้ค่าเดิมใน webx.json ก่อน ถ้าไม่มีจะเลือก home ถ้าพบ component ชื่อนี้ ไม่อย่างนั้นจะเลือก component แรกตามลำดับชื่อ

Minimal HTML

หน้า HTML ต้องมี root element สำหรับ render และ import runtime หลักของ WebX ผ่าน ES module

<div id="app"></div>

<script type="module" src="./wbx/app.js"></script>

ในโปรเจกต์ตัวอย่างใช้ import map เพื่อให้ runtime import path แบบ alias ได้

<script type="importmap">
{
  "imports": {
    "@components/": "./components/",
    "@directives/": "./directives/",
    "@stores/": "./stores/",
    "@wbx/": "./wbx/",
    "zod": "./wbx/lib/zod.min.js"
  }
}
</script>

Configure webx.json

webx.json บอก runtime ว่า component ไหนเป็นหน้าหลัก และ component ใดต้อง register เพื่อเรียกใช้ใน template

{
  "main": "home",
  "components": ["counter"]
}

• main คือชื่อ folder component หลักใน web/components
• components คือรายชื่อ component ลูกที่ต้องการ register
• runtime จะเพิ่ม main เข้าไปตอน validate เพื่อโหลด component หลักด้วย

First Component

สร้าง folder component โดยใช้ชื่อ lower-case เช่น web/components/home

web/components/home/
  app.js
  template.html
  style.css

app.js

export default {
  template: 'Home',
  data: {
    title: 'Hello WebX'
  },
  method: {
    rename() {
      this.data.title = 'Updated title'
    }
  }
}

template.html

<template>
  <main class="home">
    <h1>{{ title }}</h1>
    <button @click="rename">Rename</button>
  </main>
</template>

style.css

.home {
  max-width: 720px;
  margin: 32px auto;
}