dom serializer

@quatico/dom-serializer

Ein Markup -Serializer, der die vollständige Dom -Struktur, einschließlich Shadow DOM, in eine Zeichenfolge verwandelt. Die Bibliothek kann als:

1. Ein Snapshot -Serializer für Scherz,
2. eine importierte renderToString() -Funktion,
3. Ein HTML -Element, um die Dom -Struktur eines Elements anzuzeigen.

Installieren

Fügen Sie Ihr Projekt die @quatico/dom-serializer als (dev-) Abhängigkeit hinzu

pnpm add -D @quatico/dom-serializer

Scherz Serializer

Sie können die Bibliothek als Serializer für Ihre Scherz -Snapshot -Tests verwenden. Fügen Sie es zu snapshotSerializers in Ihrem jest.config.js :

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

Rufen Sie toMatchSnapshot() oder toMatchInlineSnapshot() in Ihren Scherztests auf, um den Snapshot zu erstellen/zu vergleichen:

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

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

Passen Sie den Schnappschuss an

Sie können das Paket als Bibliothek verwenden. Erstellen Sie eine Skriptdatei der folgenden Struktur und importieren Sie den DomSerializer mit einer module.exports

 // ./tests/customSnapshotSerializer.ts

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

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

Fügen Sie Ihren customSnapshotSerializer.ts zu Ihrem Scherz.config.js hinzu:

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

Der Klassendomserializer bietet die folgenden RenderOptions zum Anpassen des Snapshots:

• diffable : Boolean, um zusätzliche Linienbrüche für eine bessere Vergleichbarkeit hinzuzufügen; standardmäßig true.
• filterAttrs : Array von Kleinbuchstaben -Attributennamen, die aus dem Schnappschuss herausgefiltert werden; Standardeinstellungen zu [].
• filterComments : FALL, um HTML -Kommentare aus dem Snapshot herauszufiltern; standardmäßig true.
• filterTags : Array von Kleinbuchstaben -Tag -Namen, die aus dem Schnappschuss herausgefiltert werden; Standardeinstellungen zu ["Stil", "Skript"].
• indent : Anfangs -Einklebungszeichenfolge für die daraus resultierende Struktur; Standard für die leere Zeichenfolge. Die Kinderwerte werden durch 4 Leerzeichen eingerückt.
• shadow : boolean, um die Darstellung von Schatten -Dom -Inhalten zu aktivieren/zu deaktivieren; standardmäßig true.
• shadowDepth : Anzahl der Showroots zu rendern; standardmäßig unendlich.
• shadowRoots : Kontrolliert, wie Schattenwurzeln gerendert werden. Standardeinstellungen zu "deklarativ".
• slottedContent : Steuert, wie geschlitzter Inhalte gerendert werden. Zeigen Sie es als angegebenes Kind an oder kopieren Sie es in das Slot -Element. Standardmäßig "ignorieren".

Rendern Sie eine Dom -Struktur als Zeichenfolge

Sie können auch die Bibliothek verwenden, um eine DOM -Struktur in eine Zeichenfolge zu rendern:

 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" ,
    } ) ;

Hier können dieselben RenderOptions wie für den DomSerializer verwendet werden, um die resultierende Zeichenfolge anzupassen.

Rendern Sie die Dom -Struktur in eine React -Komponente

Die Verwendung der Bibliothek kann problemlos eine React -Komponente erstellen, die die DOM -Struktur eines bereitgestellten Elements, z. B. in Storybook, anzeigt:

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