val

瓦爾

更好的vdom / dom積分

該包裝器的目的是在所有虛擬DOM解決方案中提供一個一致的接口，該界面提供了超級標題式虛擬DOM函數，還提供了用於創建真實DOM的默認接口。這包括但不限於：

• 反應
• 預先反應
• 虛擬DOM
• 超級刻錄（任何實施）
• 真正的dom
• ...

npm install @skatejs/val

理由

這些不同的植入面所面臨的問題是，唯一常見的事情是您調用的函數以及它在最高級別所接受的論點。但是，它們的行為與您給出的論點不同。

例如，React只能對其白名單中的DOM元素設置道具。如果元素in element ，則會將其設置為DOM元素。每一個都有問題。

React的問題在於，您無法將復雜的數據結構傳遞給具有白名單中不存在的屬性的DOM元素，每個Web組件都會受到。

有了預先反應，這主要是好的。但是，假設是您的自定義元素定義是在其虛擬DOM實現中創建DOM元素之前定義的。如果您的自定義元素定義異步加載，這將失敗，在想推遲非臨界資源的加載時，這並不少見。

還有其他問題，例如React根本無法與自定義活動一起使用。

解決方案

到目前為止，我遇到的最好的解決方案是創建一個適用於任何這些的包裝器。包裝器可以實現幾件事：

• 能夠將自定義元素構造函數作為節點名稱（第一個參數）傳遞。
• 明確控制要設置的DOM屬性（通過第二個參數中的attrs: {} ）。
• 明確控制DOM事件的綁定（通過events: {}在第二個參數中）。
• 在第二個參數中，對設置了哪些DOM Prop的明確控制（通過props: {} ）。
• 其他一切都剛剛通過，並受到您使用的任何庫的標準行為。
• 您通過的ref將被包裝，以便val可以做事。

要求

這假設您包裝的任何庫都支持ref回調，這是我們可以訪問引擎蓋下方使用的原始DOM元素的常見方法。

用法

用法很簡單。您將包裝器導入並用唯一的參數調用它是您想要包裝的虛擬DOM函數。

反應：

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

export default val ( createElement ) ;

預言：

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

export default val ( h ) ;

在組件中，您將導入包裝功能，而不是從庫中導入功能。

 /** @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

Val帶有生成真實DOM節點的默認適配器。為此，只需導入h函數：

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

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

一切都按照廣告宣傳的方式工作，因此您仍然可以像平常一樣地傳遞自定義元素，屬性和事件，而事物正常工作。

能夠做到這一點對於測試實際DOM和Web組件非常有用。自由申請！

DOM屬性

使用attrs對象指定屬性。

 import h from "your-wrapper" ;

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

DOM事件和自定義事件

事件使用events對象綁定。這適用於任何事件，包括自定義活動。

 import h from "your-wrapper" ;

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

域屬性

屬性被歸類為不是attrs或events任何事物。

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

標準框架道具

其他任何東西都剛剛傳遞到您的框架。

 // @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 = { ( ) => { } } /> ;

自定義元素構造函數

您還可以使用Web組件構造函數，而不是傳遞給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 ) ;