dom serializer

@quatico/dom-serializer

serializer มาร์กอัปที่แสดงโครงสร้าง DOM ที่สมบูรณ์รวมถึง Shadow DOM ลงในสตริง ห้องสมุดสามารถใช้เป็น:

1. Snapshot Serializer สำหรับ Jest
2. ฟังก์ชั่น renderToString() นำเข้า ()
3. องค์ประกอบ HTML เพื่อแสดงโครงสร้าง DOM ขององค์ประกอบ

ติดตั้ง

เพิ่ม @quatico/dom-serializer เป็น (dev-) การพึ่งพาโครงการของคุณ

pnpm add -D @quatico/dom-serializer

Jest Serializer

คุณสามารถใช้ไลบรารีเป็น serializer สำหรับการทดสอบ snapshot jest ของคุณ เพิ่มลงใน snapshotSerializers ใน jest.config.js ของคุณ:

 // jest.config.js
module . exports = {
    /* ... */
    snapshotSerializers : [ "@quatico/dom-serializer/bin/serializer" ] ,
}

โทร toMatchSnapshot() หรือ toMatchInlineSnapshot() ในการทดสอบ jest ของคุณเพื่อสร้าง/เปรียบเทียบ snapshot:

 describe ( "my-element" , ( ) => {
    it ( `shows markup with default properties` , async ( ) => {
        const el : HTMLElement = ... ;

        expect ( el ) . toMatchSnapshot ( ) ;
    } ) ;
    ...

ปรับแต่งภาพรวม

คุณสามารถใช้แพ็คเกจเป็นไลบรารี สร้างไฟล์สคริปต์ของโครงสร้างต่อไปนี้และนำเข้า DomSerializer ด้วยคำสั่ง module.exports :

 // ./tests/customSnapshotSerializer.ts

import { DomSerializer } from "@quatico/dom-serializer" ;

module . exports = new DomSerializer ( { filterTags : [ "script" ] } ) ;

เพิ่ม customSnapshotSerializer.ts ของคุณใน jest.config.js ของคุณ:

 // jest.config.js
module . exports = {
    /* ... */
    snapshotSerializers : [ "./tests/customSnapshotSerializer.ts" ] ,
}

คลาส Domserializer ให้ RenderOptions ต่อไปนี้เพื่อปรับแต่งสแนปชอต:

• diffable : บูลีนเพื่อเพิ่มการแบ่งสายพิเศษเพื่อการเปรียบเทียบที่ดีขึ้น; ค่าเริ่มต้นเป็นจริง
• filterAttrs : อาร์เรย์ของชื่อแอตทริบิวต์ตัวพิมพ์เล็กที่ถูกกรองออกจากสแน็ปช็อต; ค่าเริ่มต้นเป็น []
• filterComments : Flag เพื่อกรองความคิดเห็น HTML จากสแน็ปช็อต; ค่าเริ่มต้นเป็นจริง
• filterTags : อาร์เรย์ของชื่อแท็กตัวพิมพ์เล็กที่ถูกกรองออกจากสแน็ปช็อต; ค่าเริ่มต้นเป็น ["สไตล์", "สคริปต์"]
• indent : สตริงเยื้องเริ่มต้นสำหรับโครงสร้างผลลัพธ์; ค่าเริ่มต้นเป็นสตริงเปล่า ระดับเด็กจะเยื้อง 4 ช่องว่าง
• shadow : บูลีนเพื่อเปิด/ปิดใช้งานการเรนเดอร์ของ Shadow DOM เนื้อหา; ค่าเริ่มต้นเป็นจริง
• shadowDepth : จำนวน showroots ที่จะแสดงผล; ค่าเริ่มต้นเป็นอินฟินิตี้
• shadowRoots : ควบคุมวิธีการแสดงผลของ Shadow Roots ค่าเริ่มต้นเป็น "ประกาศ"
• slottedContent : ควบคุมว่าเนื้อหา slotted มีการแสดงผลอย่างไร แสดงให้เห็นว่าเป็นเด็กที่อ้างอิงหรือคัดลอกไปยังองค์ประกอบสล็อต ค่าเริ่มต้นเป็น "ละเว้น"

แสดงโครงสร้าง DOM เป็นสตริง

นอกจากนี้คุณยังสามารถใช้ไลบรารีเพื่อแสดงโครงสร้าง DOM เป็นสตริง:

 import { renderToString } from "@quatico/dom-serializer" ;

const htmlElement = ... ;

const string = renderToString ( htmlElement , { 
        diffable : true ,
        filterAttrs : [ "id" ] ,
        filterComments : true ,
        filterTags : [ "style" , "script" ] ,
        shadow : true ,
        shadowDepth : 1 ,
        shadowRoots : "declarative" ,
    } ) ;

นี่คือ RenderOptions เดียวกันกับ DomSerializer สามารถใช้ในการปรับแต่งสตริงผลลัพธ์

ทำให้โครงสร้าง DOM เป็นองค์ประกอบปฏิกิริยา

การใช้ไลบรารีสามารถสร้างส่วนประกอบปฏิกิริยาที่แสดงโครงสร้าง DOM ขององค์ประกอบที่ให้มาเช่นในนิทาน:

 import { renderToString } from "@quatico/dom-serializer" ;
import { Source } from "@storybook/components" ;
import * as React from "react" ;
import { useEffect , useRef , useState } from "react" ;


export const DomMarkup = ( { children , shadow , shadowDepth = 1 , diffable = false } : any ) => {
    const domRef = useRef < HTMLDivElement > ( null ) ;
    const [ markup , setMarkup ] = useState ( "" ) ;
    useEffect ( ( ) => {
        const host = domRef . current ;
        setMarkup (
            host ?. firstElementChild ? renderToString ( host . firstElementChild , { diffable , shadow , shadowDepth } ) : ""
        ) ;
    } ) ;
    return (
        < div >
            < div ref = { domRef } style = { { display : "none" } } className = { "dom-markup__dom-container" } >
                { children }
            < / div >
            < div className = { "dom-markup__markup-container" } >
                < Source language = { "html" } format = { false } code = { markup } / >
            < / div >
        < / div >
    ) ;
} ;