dom serializer

@Quatico/Dom-Serializer

المسلسل التسلسلي الذي يجعل بنية DOM كاملة ، بما في ذلك Shadow DOM ، في سلسلة. يمكن استخدام المكتبة على النحو التالي:

1. لقطة مسلسل للاشتعال ،
2. وظيفة renderToString() مستوردة ،
3. عنصر HTML لإظهار بنية DOM لعنصر ما.

ثَبَّتَ

أضف @quatico/dom-serializer كاعتماد على مشروعك (dev-)

pnpm add -D @quatico/dom-serializer

مزاح Serializer

يمكنك استخدام المكتبة كمسلسل لاختبارات اللقطة الخاصة بك. أضفه إلى snapshotSerializers في jest.config.js :

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

استدعاء toMatchSnapshot() أو toMatchInlineSnapshot() في اختبارات Jest الخاصة بك لإنشاء/مقارنة اللقطة:

 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" ] ,
}

يوفر Class DomSerializer RenderOptions التالية لتخصيص اللقطة:

• diffable : منطقية لإضافة فترات زمنية إضافية لتحسين المقارنة ؛ الافتراضات إلى صواب.
• filterAttrs : مجموعة من سمات السمات الصغيرة التي يتم ترشيحها من اللقطة ؛ الافتراضات إلى [].
• filterComments : علامة لتصفية تعليقات HTML من اللقطة ؛ الافتراضات إلى صواب.
• filterTags : مجموعة من أسماء العلامات الصغيرة التي يتم ترشيحها من اللقطة ؛ الإعدادات الافتراضية إلى ["النمط" ، "السيناريو"].
• indent : سلسلة المسافة البادئة الأولية للهيكل الناتج ؛ الافتراضيات لسلسلة فارغة. يتم وضع مسافة بادئة لمستويات الطفل بواسطة 4 مسافات.
• shadow : منطقية لتمكين/تعطيل عرض محتويات الظل DOM ؛ الافتراضات إلى صواب.
• shadowDepth : عدد الجذر الذي سيتم تقديمه ؛ الافتراضات إلى اللانهاية.
• shadowRoots : يتحكم في كيفية تقديم جذور الظل. الإعدادات الافتراضية إلى "التصريح".
• slottedContent : يتحكم في كيفية تقديم المحتوى المرتقب. أظهرها كطفل مشار إليه أو نسخ إلى عنصر الفتحة. الإعدادات الافتراضية إلى "تجاهل".

تقديم بنية 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 >
    ) ;
} ;