dom serializer

@quatico/dom-serializador

Um serializador de marcação que renderiza a estrutura completa do DOM, incluindo Shadow Dom, em uma string. A biblioteca pode ser usada como:

1. um serializador de instantâneos para brincadeira,
2. uma função renderToString() importada,
3. Um elemento HTML para mostrar a estrutura DOM de um elemento.

Instalar

Adicione a dependência @quatico/dom-serializer como (dev-) ao seu projeto

pnpm add -D @quatico/dom-serializer

Serializador de brincadeira

Você pode usar a biblioteca como serializador para os testes de instantâneos de brincadeira. Adicione -o aos snapshotSerializers em seu jest.config.js :

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

Ligue para toMatchSnapshot() ou toMatchInlineSnapshot() em seus testes de brincadeira para criar/comparar o instantâneo:

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

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

Personalize o instantâneo

Você pode usar o pacote como biblioteca. Crie um arquivo de script da seguinte estrutura e importe o DomSerializer com uma instrução module.exports :

 // ./tests/customSnapshotSerializer.ts

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

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

Adicione seu customSnapshotSerializer.ts ao seu jest.config.js:

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

O DomSerializer da classe fornece as seguintes RenderOptions para personalizar o instantâneo:

• diffable : Booleano para adicionar quebras de linha extras para uma melhor comparabilidade; Padrões para True.
• filterAttrs : Matriz de nomes de atributos minúsculos que são filtrados do instantâneo; Padrões para [].
• filterComments : sinalizador para filtrar comentários HTML do instantâneo; Padrões para True.
• filterTags : matriz de nomes de tags minúsculos que são filtrados do instantâneo; Padrões para ["estilo", "script"].
• indent : string inicial do recuo para a estrutura resultante; Padrões para esvaziar a string. Os níveis de criança são recuados por 4 espaços.
• shadow : booleano para ativar/desativar a renderização do conteúdo da sombra DOM; Padrões para True.
• shadowDepth : Número de showroots a serem renderizados; Padrões para o infinito.
• shadowRoots : controla como as raízes das sombras são renderizadas. Padrão para "declarativo".
• slottedContent : controla como o conteúdo com fenda é renderizado. Mostre -o como criança ou cópia referenciada para o elemento slot. Padrões de "ignorar".

Renderizar uma estrutura DOM como string

Você também pode usar a biblioteca para renderizar uma estrutura DOM em uma string:

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

Aqui, as mesmas RenderOptions que o DomSerializer podem ser usadas para personalizar a sequência resultante.

Renderizar a estrutura DOM em um componente de reação

O uso da biblioteca pode criar facilmente um componente React que mostra a estrutura DOM de um elemento fornecido, por exemplo, no livro de histórias:

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