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 ) ;