nativeweb

Tiny Biblioteca para componentes da Web simples.
_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 >

Componentes da Web nativos

Estilos e scripts encapsulados

Simplificado com decoradores

Pequena pegada

Um comando para começar

npm init nativeweb

Ou adicione ao seu projeto existente

npm install nativeweb

Decoradores

@component

@property

@event

@customEvent

@query

@queryAll

@component

Defina um elemento personalizado e adicione estilos. De um arquivo externo ou do mesmo arquivo. styles podem ser uma array de estilos.

 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

Obtenha um atributo convertido ao tipo especificado ou defina uma propriedade com um valor padrão opcional.
String , Boolean , Number , Array ou 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

Adicione um ouvinte de evento a um componente, um elemento filho chamado @name ou um evento de componente externo.

 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

Crie um evento global personalizado, com o nome de nome com o nome do componente. Pronto para ser despachado. O ouvinte está no componente acima.

 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

Seletor de consulta Um elemento filho @name Child.

 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

Seletor de consulta Todos os elementos filho @name Child.

 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 >

Vida útil

render() → renderiza o componente.

connected() → chamado quando o componente é inserido no DOM.

disconnected() → chamado quando o componente é removido do DOM.

adopted() → chamado quando o componente é movido para um novo documento.

attributeChanged() → chamado quando um atributo observado muda.

Métodos

this.update() → Rereva o componente.

Propriedades

this.properties → Obtenha todos os atributos.

Pontas

Estilo compartilhado

Composição

Condicional

Laço

Elemento variável

Estilo compartilhado

Inclua estilos globais em um componente.

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

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

Composição

Composição do componente com slot padrão e slot nomeado.

 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 >

Condicional

Renderização condicional em baunilha JS.

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

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

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

Laço

Renderizar loop em baunilha 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 ( '' ) }
        ` ;
    }
}

Elemento variável

Renderizar um elemento de uma propriedade.

 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 >