nativeweb

Perpustakaan kecil untuk komponen web sederhana.
_1kB

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'hey-internet' )
class Component extends Element {
    @ property ( ) emoji ;

    render ( ) {
        return `
            <h1>Hey Internet ${ this . emoji } </h1>
        ` ;
    }
} 

 < hey-internet emoji ="" > </ hey-internet >

Komponen web asli

Gaya dan skrip yang dienkapsulasi

Disederhanakan dengan dekorator

Jejak kecil

Satu perintah untuk memulai

npm init nativeweb

Atau tambahkan ke proyek Anda yang ada

npm install nativeweb

Dekorator

@component

@property

@event

@customEvent

@query

@queryAll

@component

Tentukan elemen khusus dan tambahkan gaya. Dari file eksternal atau file yang sama. styles bisa berupa array gaya.

 import { component , Element } from 'nativeweb' ;
import styles from './hey-styles.css.js' ;

@ component ( 'some-styles' , styles )
class Component extends Element {
    render ( ) {
        return `
            <h1>Some Styles</h1>
        ` ;
    }
} 

 import { css } from 'nativeweb' ;

export default css `
    h1 {
        color: orange;
    }
` ; 

 < hey-styles > </ hey-styles >

@property

Dapatkan atribut yang dikonversi ke jenis yang ditentukan atau tentukan properti dengan nilai default opsional.
String , Boolean , Number , Array atau Object .

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'cool-property' )
class Component extends Element {
    @ property ( ) cool = 'Cool Prop' ;
    @ property ( String ) title = 'Default Title' ;
    @ property ( Number ) multiplier ;

    render ( ) {
        return `
            <h1> ${ this . title } </h1>
            <h2> ${ this . cool } ➡️ ${ 2 * this . multiplier } </h2>
        ` ;
    }
} 

 < cool-property title =" Cool Title ? " multiplier =" 3 " > </ cool-property >

@event

Tambahkan pendengar acara ke komponen, elemen anak bernama @name atau acara komponen eksternal.

 import { component , event , Element } from 'nativeweb' ;

@ component ( 'easy-event' )
class Component extends Element {
    @ event ( ) mouseenter = this . onHover ( ) ;
    @ event ( ) click = {
        '@title' : this . onClick ( ) ,
        '@button' : this . onClick ( )
    } ;
    @ event ( ) ready = {
        'other-component' : this . onReady ( )
    } ;

    onHover ( ) {
        console . log ( 'Hover Component' ) ;
    }
    onClick ( e ) {
        console . log ( e . currentTarget ) ;
    }
    onReady ( { detail } ) {
        console . log ( detail ) ;
    }

    render ( ) {
        return `
            <h1 @title>Easy Event</h1>
            <button @button>Click Me</button>
        ` ;
    }
} 

 < easy-event > </ easy-event >

@customEvent

Buat acara global khusus, bernama dengan nama komponen. Siap dikirim. Pendengar ada di komponen di atas.

 import { component , customEvent , Element } from 'nativeweb' ;

@ component ( 'other-component' )
class Component extends Element {
    @ customEvent ( ) ready = 'Ready ' ;

    connected ( ) {
        dispatchEvent ( this . ready ) ;
    }

    render ( ) {
        return `
            <h1>Other Component</h1>
        ` ;
    }
} 

 < other-component > </ other-component >

@query

Pemilih permintaan elemen anak @name .

 import { component , query , Element } from 'nativeweb' ;

@ component ( 'simple-query' )
class Component extends Element {
    @ query ( ) title ;

    connected ( ) {
        this . title . innerText = 'Better Title ?' ;
    }

    render ( ) {
        return `
            <h1 @title>Good Title</h1>
        ` ;
    }
} 

 < simple-query > </ simple-query >

@queryAll

Pemilih permintaan semua elemen anak @name .

 import { component , queryAll , Element } from 'nativeweb' ;

@ component ( 'all-query' )
class Component extends Element {
    @ queryAll ( ) title ;

    connected ( ) {
        this . title . forEach ( el => ( el . style . color = 'lightgreen' ) ) ;
    }

    render ( ) {
        return `
            <h1 @title>One Title</h1>
            <h2 @title>Other Title</h2>
        ` ;
    }
} 

 < all-query > </ all-query >

Siklus hidup

render() → membuat komponen.

connected() → Dipanggil saat komponen dimasukkan ke dalam DOM.

disconnected() → dipanggil saat komponen dihapus dari DOM.

adopted() → Dipanggil saat komponen dipindahkan ke dokumen baru.

attributeChanged() → dipanggil ketika atribut yang diamati berubah.

Metode

this.update() → rerenders komponen.

Properti

this.properties → Dapatkan semua atribut.

Tips

Gaya bersama

Komposisi

Bersyarat

Lingkaran

Elemen variabel

Gaya bersama

Sertakan gaya global dalam suatu komponen.

 import { css } from 'nativeweb' ;
import global from '../global-style.css.js' ;

export default [
    global ,
    css `
        h1 {
            color: orange;
        }
    `
] ;

Komposisi

Komposisi komponen dengan slot default dan slot bernama.

 import { component , Element } from 'nativeweb' ;

@ component ( 'slot-example' )
class Component extends Element {
    render ( ) {
        return `
            <header>
                <h1><slot name="title"></slot></h1>
                <slot></slot>
            </header>
        ` ;
    }
} 

 < slot-example >
    < span slot =" title " > Named slot </ span >
    < p > Default slot </ p >
</ slot-example >

Bersyarat

Render bersyarat di Vanilla JS.

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'condition-example' )
class Component extends Element {
    @ property ( ) isGood = false ;

    render ( ) {
        return `
            ${ this . isGood ? `<h1>Good</h1>` : `` }
        ` ;
    }
}

Lingkaran

Render Loop di Vanilla JS.

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'loop-example' )
class Component extends Element {
    @ property ( ) emojis = [ '?' , '?' , '?' ] ;

    render ( ) {
        return `
            ${ this . emojis . map ( item => `<span> ${ item } </span>` ) . join ( '' ) }
        ` ;
    }
}

Elemen variabel

Membuat elemen dari properti.

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'element-example' )
class Component extends Element {
    @ property ( ) as = 'p' ;

    render ( ) {
        return `
            < ${ this . as } >Heading 1</ ${ this . as } >
        ` ;
    }
} 

 < element-example as =" h1 " > </ element-example >