cwco

CWCO

Kontextful -Webkomponentenbibliothek erstellt zur Verbesserung der nativen Webkomponenten -API -Benutzererfahrung mit:

• ✅ Kein Build erforderlich (Plug and Play)!
• ✅ arbeitet mit anderen Bibliothek und Rahmenbedingungen wie React, Angular, Vue, Sufle usw. zusammen;
• ✅ Wirklich reaktive Vorlage
• ✅ leistungsstarke integrierte Richtlinien (einschließlich der Fähigkeit, eigene zu erstellen)
• ✅ Eingebaute Kontextdatenbearbeitung
• ✅ Ereignis- und Datenbindung in HTML und CSS
• ✅ Erstellen Sie die Ansicht direkt in der HTML -Datei
• ✅ Einfache API
• ✅ schnelles Rendering
• ✅ Leichtes Paket

Dokumentation (cwco.beforesemicolon.com)

• Erste Schritte
• Webcomponent
• ContextProviderComponent
• Konfigurationen
• Vorlage
• Styling
• Ereignisse
• Attribute
• Eigenschaften
• Kontext
• Richtlinien
• Benutzerdefinierte Richtlinien
• Livecycles
• Fehlerbehandlung

Installieren

Dieses Modul kann auch in der Knotenumgebung direkt im Browser verwendet werden. Sie können es sogar zusammen mit anderen Webbibliotheken und Frameworks wie React und Angular verwenden.

Browser

 <!-- 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

Sie können dann die Konstruktorenklasse nach dem importieren, was Sie bauen.

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

Code -Redakteure und IDEs

CWCO ist nur HTML und wenn Sie Syntax-Hervorhebung für VSCODE möchten, können Sie das Inline-HTML verwenden

VSCODE

Für die Syntax-Hervorhebung von HTML und CSS in JavaScript verwenden Sie Inline-HTML- oder LIT-HTML-Plugins.

Sie können html von cwco importieren, was nur eine Hilfe für VSCODE ist, die für die HTML -Zeichenfolge, mit der Sie sie verwenden, nichts Besonderes bewirkt.

 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}`
  }
} 

Jet Hirn -Ides

Diese IDEs haben ein integriertes HTML-in-JavaScript-Syntax, das bei der Entwicklung von CWCO-Webkomponenten nützlich sein kann.

Willst du helfen?

Lernen Sie wie