val
1.0.0
이 래퍼의 목표는 초자방 스타일 가상 DOM 기능을 제공하는 모든 가상 DOM 솔루션에서 일관된 인터페이스를 제공하고 실제 DOM을 생성하기위한 기본 인터페이스를 제공하는 것입니다. 여기에는 다음이 포함되지만 이에 국한되지는 않습니다.
npm install @skatejs/val이러한 서로 다른 구현이 직면 한 문제는 유일한 일반적인 것이 당신이 호출하는 기능과 그것이 최상위 수준에서 받아들이는 주장이라는 것입니다. 그러나 그들은 모두 당신이 그들에게주는 주장과 다르게 행동합니다.
예를 들어, REACT는 화이트리스트에있는 DOM 요소에서만 소품을 설정합니다. PreAct는 in element 있는 경우 DOM 요소에 소품을 설정합니다. 이들 각각에는 문제가 있습니다.
React의 문제점은 복잡한 데이터 구조를 화이트리스트에없는 속성을 갖는 DOM 요소에 복잡한 데이터 구조를 전달할 수 없다는 것입니다.
preact를 사용하면 대부분 좋습니다. 그러나 가상 DOM 구현에서 DOM 요소를 생성하기 전에 사용자 정의 요소 정의가 정의된다고 가정합니다. 사용자 정의 요소 정의가 비동기 적으로로드되면 실패합니다. 이는 비정규 자원의 로딩을 연기하려는 경우 드문 일이 아닙니다.
React와 같은 다른 문제가 커스텀 이벤트와 전혀 작동하지 않습니다.
내가 지금까지 만난 가장 좋은 솔루션은 이들 중 하나에 맞는 래퍼를 만드는 것입니다. 래퍼는 몇 가지를 가능하게합니다.
attrs: {} 을 통해).)events: {} ).props: {} 되어 있는지에 대한 명시 적 제어.ref 은 val 그 일을 할 수 있도록 포장됩니다. 이것은 당신이 랩핑하는 모든 라이브러리가 우리가 후드 아래에서 사용해야하는 원시 dom 요소에 액세스 할 수있는 일반적인 방법으로 ref 콜백을 지원한다고 가정합니다.
사용법은 간단합니다. 래퍼를 가져 와서 포장하려는 가상 DOM 함수 인 유일한 인수로 호출합니다.
반응 :
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 ) ;구성 요소에서는 라이브러리에서 랩핑 된 기능 대신 랩핑 된 기능을 가져옵니다.
/** @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" ) ) ; Val은 실제 DOM 노드를 생성하는 기본 어댑터를 제공합니다. 이렇게하려면 h 기능을 가져 오기 만하면됩니다.
/** @jsx h*/
import { h } from "@skatejs/val" ;
// <div>test</div>
console . log ( < div > test </ div > . outerHTML ) ;모든 것이 광고 된대로 작동하므로 일반적으로 원하는대로 사용자 정의 요소, 속성 및 이벤트를 전달할 수 있으며 일이 작동합니다.
이를 수행 할 수 있다는 것은 실제 DOM 및 웹 구성 요소를 테스트하는 데 엄청나게 유용합니다. 자유롭게 적용하십시오!
속성은 attrs 객체를 사용하여 지정됩니다.
import h from "your-wrapper" ;
h ( "my-element" , {
attrs : {
"my-attribute" : "some value"
}
} ) ; 이벤트는 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 = { ( ) => { } } /> ; 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 ) ;
