val

ヴァル

より良いVDOM / DOM統合

このラッパーの目標は、ハイパースクリプトスタイルの仮想DOM関数を提供するすべての仮想DOMソリューションに一貫したインターフェイスを提供し、実際のDOMを作成するためのデフォルトのインターフェイスを提供することです。これには含まれますが、以下に限定されません。

• 反応します
• プアクト
• 仮想dom
• HyperScript（任意の実装）
• 本物のdom
• ...

npm install @skatejs/val

根拠

これらの異なるインプレメーションが直面する問題は、唯一の一般的なことは、あなたが呼び出す関数と、それが受け入れる議論が最高レベルでであるということです。しかし、それらはすべて、あなたが彼らに与えた議論で異なった行動を起こします。

たとえば、Reactは、ホワイトリストにあるDOM要素に小道具のみを設定します。プアクトはin elementある場合、DOM要素に小道具を設定します。これらのそれぞれに問題があります。

Reactの問題は、複雑なデータ構造をホワイトリストに属さないプロパティを持つDOM要素に渡すことができないことです。

プアクトで、それはほとんど良いです。ただし、仮想要素定義は、仮想DOM実装でDOM要素を作成する前にカスタム要素定義が定義されることです。これは、カスタム要素の定義が非同期にロードされている場合に失敗します。これは、非批判的なリソースの負荷を延期したい場合は珍しくありません。

反応がカスタムイベントでまったく動作しないなど、他の問題もあります。

解決

私がこれまでに出会った最良の解決策は、これらのいずれかに有効なラッパーを作成することです。ラッパーはいくつかのことを可能にします：

• ノード名としてカスタム要素コンストラクターを渡す機能（最初の引数）。
• セットするdom属性を明示的に制御する（ attrs: {} 2番目の引数で。）。
• どのDOMイベントがバインドされているかについての明示的な制御（ events: {} 2番目の引数で）。
• 2番目の引数で（ props: {}介して）設定されるDOMプロップを明示的に制御します。
• 他のすべてが通り抜けられ、使用しているライブラリの標準的な動作の対象となります。
• あなたが合格するrefは、 valそのことをすることができるように包まれます。

要件

これは、あなたが包んでいるライブラリは、フードの下で使用する必要がある生のDOM要素にアクセスするための一般的な方法として、 refコールバックをサポートしていることを前提としています。

使用法

使用法は簡単です。ラッパーをインポートし、唯一の引数でそれを呼び出します。

反応：

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

DOMプロパティ

プロパティは、 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 = { ( ) => { } } /> ;

カスタム要素コンストラクター

また、 customElements.define()に渡された名前の代わりに、Webコンポーネントコンストラクターを使用することもできます。

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