ดาวน์โหลด cwco - ดาวน์โหลดซอร์สโค้ด cwco

cwco

ส่วนประกอบของบุคคลที่สาม

Release 1.7.8

ดาวน์โหลด

CWCO

ไลบรารีคอมโพเนนต์ Web Component ที่สร้างขึ้นเพื่อปรับปรุงประสบการณ์การใช้งานของผู้ใช้ Web Component Web ด้วย::

✅ไม่จำเป็นต้องสร้าง (Plug and Play)!
✅ทำงานร่วมกับห้องสมุดและเฟรมเวิร์กอื่น ๆ เช่น React, Angular, Vue, Svelte, ฯลฯ
✅เทมเพลตปฏิกิริยาที่แท้จริง
✅คำสั่งในตัวที่ทรงพลัง (รวมถึงความสามารถในการสร้างของคุณเอง)
✅การจัดการข้อมูลบริบทในตัว
✅เหตุการณ์และการเชื่อมโยงข้อมูลใน HTML และ CSS
✅สร้างมุมมองโดยตรงในไฟล์ HTML
✅ API ง่ายๆ
✅การเรนเดอร์อย่างรวดเร็ว
✅แพ็คเกจน้ำหนักเบา

เอกสาร (cwco.beforesemicolon.com)

เริ่มต้น
ส่วนประกอบของเว็บ
ContextProviderComponent
การกำหนดค่า
เทมเพลต
การจัดแต่งทรงผม
เหตุการณ์
คุณลักษณะ
คุณสมบัติ
บริบท
คำสั่ง
คำสั่งที่กำหนดเอง
Livecycles
การจัดการข้อผิดพลาด

ติดตั้ง

โมดูลนี้สามารถใช้โดยตรงในเบราว์เซอร์เช่นกันในสภาพแวดล้อมโหนด คุณสามารถใช้มันพร้อมกับห้องสมุดเว็บและเฟรมเวิร์กอื่น ๆ เช่น React และ Angular

เบราว์เซอร์

 <!-- use the latest version -->
< script src =" https://unpkg.com/cwco/dist/cwco.min.js " > </ script >

<!-- use a specific version -->
< script src =" https://unpkg.com/[email protected]/dist/cwco.min.js " > </ script >

<!-- link your app script after -->
< script src =" app.js " > </ script >

nodejs

 npm install cwco

จากนั้นคุณสามารถนำเข้าคลาส Constructors ตามสิ่งที่คุณกำลังสร้าง

 const { WebComponent , ContextProviderComponent , Directive } = require ( 'cwco' ) ;

โปรแกรมแก้ไขรหัสและ ides

CWCO เป็นเพียง HTML และหากคุณต้องการการไฮไลต์ไวยากรณ์สำหรับ VSCODE คุณสามารถใช้ Inline-HTML

vscode

สำหรับการเน้นไวยากรณ์ของ HTML และ CSS ใน JavaScript ใช้ปลั๊กอิน Inline-HTML หรือ LIT-HTML

คุณสามารถนำเข้า html จาก cwco ซึ่งเป็นเพียงความช่วยเหลือสำหรับ VSCODE ซึ่งไม่ได้เป็นพิเศษกับสตริง HTML ที่คุณใช้ด้วย

 import { html , css , WebComponent } from "./cwco" ;

class MyButton extends WebComponent {
  get template ( ) {
    return html `<button><slot></slot></button>`
  }
  
  get stylesheet ( ) {
    return css `<style>button {color: #222}</style>`
    // or 
    // return css`button {color: #222}`
  }
}