val

Val

Integrasi VDOM / DOM yang lebih baik

Tujuan dari pembungkus ini adalah untuk menyediakan antarmuka yang konsisten di semua solusi DOM virtual yang menyediakan fungsi DOM virtual gaya Hyperscript, dan juga menyediakan antarmuka default untuk membuat DOM nyata. Ini termasuk, tetapi tidak terbatas pada:

• Bereaksi
• Preact
• DOM virtual
• Hyperscript (implementasi apa pun)
• Dom nyata
• ...

npm install @skatejs/val

Alasan

Masalah yang dihadapi oleh implemenasi yang berbeda ini adalah bahwa satu -satunya hal yang umum adalah fungsi yang Anda ajukan dan argumen yang diterimanya, di tingkat atas. Namun, mereka semua berperilaku berbeda dengan argumen yang Anda berikan kepada mereka.

Misalnya, React hanya akan menetapkan alat peraga pada elemen DOM yang ada di daftar putihnya. Preact akan menetapkan alat peraga pada elemen DOM jika mereka berada in element . Ada masalah dengan masing -masing.

Masalah dengan React adalah bahwa Anda tidak dapat meneruskan struktur data yang kompleks ke elemen DOM yang memiliki properti yang tidak ada dalam daftar putihnya, yang akan dikenakan setiap komponen web.

Dengan Preact, sebagian besar bagus. Namun, asumsinya adalah bahwa definisi elemen kustom Anda didefinisikan sebelum pra -preact membuat elemen DOM dalam implementasi DOM virtualnya. Ini akan gagal jika definisi elemen khusus Anda dimuat secara tidak sinkron, yang tidak jarang ketika ingin menunda pemuatan sumber daya non-kritis.

Ada masalah lain seperti bereaksi tidak berfungsi sama sekali dengan acara khusus.

Larutan

Solusi terbaik yang saya temui sejauh ini adalah membuat pembungkus yang berfungsi untuk semua ini. Pembungkusnya memungkinkan beberapa hal:

• Kemampuan untuk melewati konstruktor elemen khusus sebagai nama simpul (argumen pertama).
• Kontrol eksplisit atas atribut DOM mana yang akan ditetapkan (via attrs: {} dalam argumen kedua.)
• Kontrol eksplisit atas peristiwa DOM mana yang terikat (melalui events: {} dalam argumen kedua).
• Kontrol eksplisit atas props dom mana yang ditetapkan (melalui props: {} ) dalam argumen kedua).
• Segala sesuatu yang lain baru saja dilewati dan tunduk pada perilaku standar dari perpustakaan apa pun yang Anda gunakan.
• ref You Pass akan dibungkus sehingga val dapat melakukan hal itu.

Persyaratan

Ini mengasumsikan bahwa perpustakaan apa pun yang Anda bungkus memiliki dukungan untuk callback ref sebagai cara umum bagi kami untuk mendapatkan akses ke elemen DOM mentah yang perlu kami gunakan di bawah kap mesin.

Penggunaan

Penggunaannya sederhana. Anda mengimpor pembungkus dan memohonnya dengan satu -satunya argumen adalah fungsi DOM virtual yang Anda inginkan untuk membungkus.

Bereaksi:

 import { createElement } from "react" ;
import val from "@skatejs/val" ;

export default val ( createElement ) ;

Preact:

 import { h } from "preact" ;
import val from "@skatejs/val" ;

export default val ( h ) ;

Di komponen Anda, Anda kemudian akan mengimpor fungsi yang dibungkus alih -alih yang dari perpustakaan.

 /** @jsx h */

import h from "your-wrapper" ;
import { PureComponent } from "react" ;
import { render } from "react-dom" ;

class WebComponent extends HTMLElement { }
class ReactComponent extends PureComponent {
  render ( ) {
    return < WebComponent /> ;
  }
}

render ( < ReactComponent /> , document . getElementById ( "root" ) ) ;

Dom nyata

Val dikirimkan dengan adaptor default yang menghasilkan node dom nyata. Untuk melakukan ini, cukup impor fungsi h :

 /** @jsx h*/
import { h } from "@skatejs/val" ;

// <div>test</div>
console . log ( < div > test </ div > . outerHTML ) ;

Semuanya berfungsi seperti yang diiklankan, sehingga Anda masih dapat melewati elemen kustom, atribut, dan acara seperti biasanya dan hal -hal hanya berfungsi.

Mampu melakukan ini sangat berguna untuk menguji komponen DOM dan Web nyata. Terapkan secara bebas!

Atribut DOM

Atribut ditentukan menggunakan objek attrs .

 import h from "your-wrapper" ;

h ( "my-element" , {
  attrs : {
    "my-attribute" : "some value"
  }
} ) ;

Acara Dom dan Acara Kustom

Acara terikat menggunakan objek events . Ini berfungsi untuk acara apa pun, termasuk acara khusus.

 import h from "your-wrapper" ;

h ( "my-element" , {
  events : {
    click ( ) { } ,
    customevent ( ) { }
  }
} ) ;

Properti Dom

Properti dikategorikan sebagai apa pun yang bukan attrs atau events .

 h ( "my-element" , {
  props : {
    someProp : true
  }
} ) ;

Alat peraga kerangka kerja standar

Hal lain baru saja diteruskan ke kerangka kerja Anda.

 // @jsx h

import val from "@skatejs/val" ;
import { createElement } from "react" ;

const h = val ( createElement ) ;

// The onClick prop gets passed through to React.
< button onClick = { ( ) => { } } /> ;

Konstruktor Elemen Kustom

Anda juga dapat menggunakan konstruktor komponen web Anda alih -alih nama yang diteruskan ke customElements.define() .

 // So we have the reference to pass to h().
class CustomElement extends HTMLElement { }

// It must be defined first.
customElements . define ( "custom-element" , CustomElement ) ;

// Now we can use it.
h ( CustomElement ) ;