val

วาล์ว

การรวม VDOM / DOM ที่ดีกว่า

เป้าหมายของ wrapper นี้คือการให้อินเทอร์เฟซที่สอดคล้องกันในโซลูชัน DOM เสมือนทั้งหมดที่ให้ฟังก์ชัน DOM เสมือนจริงสไตล์ Hyperscript และยังให้อินเทอร์เฟซเริ่มต้นสำหรับการสร้าง DOM จริง ซึ่งรวมถึง แต่ไม่ จำกัด เพียง:

• ตอบโต้
• ทำขึ้นก่อน
• Dom เสมือนจริง
• Hyperscript (การใช้งานใด ๆ )
• DOM จริง
• -

npm install @skatejs/val

เหตุผล

ปัญหาที่เกิดจากการเกิดขึ้นที่แตกต่างกันคือสิ่งเดียวที่พบได้ทั่วไปคือฟังก์ชั่นที่คุณเรียกและข้อโต้แย้งที่ยอมรับในระดับสูงสุด อย่างไรก็ตามพวกเขาทั้งหมดทำงานแตกต่างจากข้อโต้แย้งที่คุณให้พวกเขา

ตัวอย่างเช่น React จะตั้งค่าอุปกรณ์ประกอบฉากบนองค์ประกอบ DOM ที่อยู่ใน Whitelist ของมัน Preact จะตั้งค่าอุปกรณ์ประกอบฉากในองค์ประกอบ DOM หากอยู่ in element มีปัญหากับแต่ละสิ่งเหล่านี้

ปัญหาเกี่ยวกับ React คือคุณไม่สามารถส่งผ่านโครงสร้างข้อมูลที่ซับซ้อนไปยังองค์ประกอบ DOM ที่มีคุณสมบัติที่ไม่ได้อยู่ใน Whitelist ของพวกเขาซึ่งองค์ประกอบเว็บทุกชิ้นจะอยู่ภายใต้

ด้วย preact มันส่วนใหญ่ดี อย่างไรก็ตามสมมติฐานคือคำจำกัดความองค์ประกอบที่กำหนดเองของคุณถูกกำหนดไว้ก่อนที่จะสร้างองค์ประกอบ DOM ในการใช้งาน DOM เสมือนจริง สิ่งนี้จะล้มเหลวหากคำจำกัดความองค์ประกอบที่กำหนดเองของคุณถูกโหลดแบบอะซิงโครนัสซึ่งไม่ใช่เรื่องแปลกเมื่อต้องการเลื่อนการโหลดทรัพยากรที่ไม่สำคัญ

มีปัญหาอื่น ๆ เช่น React ไม่ทำงานเลยกับเหตุการณ์ที่กำหนดเอง

สารละลาย

ทางออกที่ดีที่สุดที่ฉันเคยเจอมาคือการสร้างเสื้อคลุมที่เหมาะกับสิ่งเหล่านี้ เสื้อคลุมเปิดใช้งานหลายสิ่ง:

• ความสามารถในการผ่านตัวสร้างองค์ประกอบที่กำหนดเองเป็นชื่อโหนด (อาร์กิวเมนต์แรก)
• การควบคุมที่ชัดเจนว่าแอตทริบิวต์ DOM ที่จะตั้งค่า (ผ่าน attrs: {} ในอาร์กิวเมนต์ที่สอง)
• การควบคุมที่ชัดเจนว่าเหตุการณ์ DOM ถูกผูกไว้ (ผ่าน events: {} ในอาร์กิวเมนต์ที่สอง)
• การควบคุมที่ชัดเจนว่าอุปกรณ์ประกอบฉากใด (ผ่าน props: {} ) ในอาร์กิวเมนต์ที่สอง)
• ทุกสิ่งทุกอย่างเพิ่งผ่านมาและอยู่ภายใต้พฤติกรรมมาตรฐานของห้องสมุดที่คุณใช้
• ref คุณผ่านจะถูกห่อเพื่อให้ val สามารถทำสิ่งนั้นได้

ความต้องการ

นี่ถือว่าเป็นสิ่งที่ห้องสมุดที่คุณห่อมีการสนับสนุนการโทร ref เป็นวิธีทั่วไปสำหรับเราในการเข้าถึงองค์ประกอบ DOM ดิบที่เราต้องใช้ภายใต้ฝากระโปรง

การใช้งาน

การใช้งานง่าย คุณนำเข้าเสื้อคลุมและเรียกใช้มันด้วยอาร์กิวเมนต์เดียวที่เป็นฟังก์ชัน 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" ) ) ;

DOM จริง

Val Ships ที่มีอะแดปเตอร์เริ่มต้นที่สร้างโหนด DOM จริง ในการทำเช่นนี้เพียงแค่นำเข้าฟังก์ชั่น h :

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

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

ทุกอย่างทำงานตามที่โฆษณาไว้ดังนั้นคุณยังสามารถผ่านองค์ประกอบที่กำหนดเองคุณลักษณะและกิจกรรมตามปกติและสิ่งต่าง ๆ ก็ใช้ได้

ความสามารถในการทำสิ่งนี้มีประโยชน์อย่างมากสำหรับการทดสอบส่วนประกอบ DOM และเว็บจริง ใช้อย่างอิสระ!

คุณลักษณะของ 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()

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