dom serializer

@quatico/dom-serializer

Shadow DOMを含む完全なDOM構造を文字列にレンダリングするマークアップシリアナー。ライブラリは次のように使用できます。

1. Jest用のSnapshot Serializer、
2. インポートされたrenderToString()関数、
3. 要素のDOM構造を表示するHTML要素。

インストール

@quatico/dom-serializerプロジェクトに（dev-）依存関係として追加します

pnpm add -D @quatico/dom-serializer

Jest Serializer

Jest Snapshotテストのために、ライブラリをSerializerとして使用できます。 jest.config.jsのsnapshotSerializersに追加します：

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

JestテストでtoMatchSnapshot()またはtoMatchInlineSnapshot()に電話して、スナップショットを作成/比較します。

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

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

スナップショットをカスタマイズします

パッケージをライブラリとして使用できます。次の構造のスクリプトファイルを作成し、 module.exportsでDomSerializerインポートします。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 ：より良い比較可能性のために追加のラインブレークを追加するためのブール値。デフォルトはtrueです。
• filterAttrs ：スナップショットから除外された小文字の属性名の配列。デフォルトは[]になります。
• filterComments ：スナップショットからHTMLコメントを除外するフラグ。デフォルトはtrueです。
• filterTags ：スナップショットからフィルタリングされた小文字のタグ名の配列。デフォルトは["style"、 "script"]になります。
• indent ：結果の構造の初期インデント文字列。デフォルトは空の文字列になります。子供のレベルは4つのスペースによってインデントされます。
• shadow ：Shadow Dom Contentsのレンダリングを有効/無効にするためのブール値。デフォルトはtrueです。
• shadowDepth ：レンダリングされるショールートの数。デフォルトはInfinityになります。
• 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" ,
    } ) ;

ここでは、 DomSerializerと同じRenderOptions使用して、結果の文字列をカスタマイズできます。

DOM構造をReactコンポーネントにレンダリングします

ライブラリを使用すると、提供された要素のDOM構造を示すReactコンポーネントを簡単に作成できます。

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