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 시리얼 라이저

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 가져옵니다.

 // ./tests/customSnapshotSerializer.ts

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

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

jest.config.js에 customSnapshotSerializer.ts 추가하십시오.

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

클래스 domserializer는 스냅 샷을 사용자 정의하기 위해 다음 RenderOptions 제공합니다.

• diffable : 더 나은 비교 가능성을 위해 추가 라인 브레이크를 추가하는 부울; 기본값은 참으로.
• filterAttrs : 스냅 샷에서 필터링 된 소문자 속성 이름; 기본값으로 [].
• filterComments : 스냅 샷에서 HTML 주석을 필터링하는 플래그; 기본값은 참으로.
• filterTags : 스냅 샷에서 필터링 된 소문자 태그 이름 배열; 기본값은 [ "스타일", "스크립트"로 나타납니다.
• indent : 결과 구조를위한 초기 들여 쓰기 문자열; 기본값은 빈 문자열입니다. 아동 수준은 4 개의 공간에 의해 들여 쓰기됩니다.
• shadow : 부울 섀도우 돔 내용의 렌더링을 활성화/비활성화합니다. 기본값은 참으로.
• 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" ,
    } ) ;

여기서 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 >
    ) ;
} ;