nativeweb

シンプルなWebコンポーネント用の小さなライブラリ。
_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 >

ネイティブWebコンポーネント

カプセル化されたスタイルとスクリプト

デコレータで簡素化されました

小さなフットプリント

開始する1つのコマンド

npm init nativeweb

または、既存のプロジェクトに追加します

npm install nativeweb

デコレーター

@component

@property

@event

@customEvent

@query

@queryAll

@component

カスタム要素を定義し、スタイルを追加します。外部ファイルまたは同じファイルから。 styles arrayのスタイルにすることができます。

 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

指定されたタイプに変換された属性を取得するか、オプションのデフォルト値を持つプロパティを定義します。
String 、 Boolean 、 Number 、 Arrayまたは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

イベントリスナーをコンポーネント、 @nameという名前の子要素、または外部コンポーネントイベントに追加します。

 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

コンポーネント名で名前が付いたカスタムグローバルイベントを作成します。派遣する準備ができました。リスナーは上記のコンポーネントにあります。

 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

クエリセレクター@name Child Element。

 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

クエリセレクターすべての@name Child Elements。

 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 >

ライフサイクル

render() →コンポーネントをレンダリングします。

connected() →コンポーネントがDOMに挿入されたときに呼び出されます。

disconnected() →コンポーネントがDOMから削除されたときに呼び出されます。

adopted() →コンポーネントが新しいドキュメントに移動されたときに呼び出されます。

attributeChanged() →観測された属性が変更されたときに呼び出されます。

方法

this.update() →コンポーネントを解決します。

プロパティ

this.properties →すべての属性を取得します。

ヒント

共有スタイル

構成

条件付き

ループ

可変要素

共有スタイル

コンポーネントにグローバルスタイルを含めます。

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

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

構成

デフォルトのスロットと名前付きスロットを備えたコンポーネント構成。

 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 >

条件付き

バニラJSでの条件付きレンダリング。

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

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

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

ループ

バニラ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 ( '' ) }
        ` ;
    }
}

可変要素

プロパティから要素をレンダリングします。

 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 >