스벨트 컴포넌트를 HTML 엘레먼트에 주입시키는 방법 (How to inject svelte into the html element)

svelte_inject_to_html.ts

// @ts-ignore
import SummernoteTab from './SummernoteTab.svelte'

// * 예시용 더미 변수들
declare var toolbarElement: any
declare var editorElement: any
declare var optionsStore: any
declare var activatedOptionStore: any
declare var tabInstance: any

// * 섬머노트 툴바가 초기화 된 경우에만
if (toolbarElement) {

    // * 랜덤 ID를 만든 후 HTML을 주입합니다.
    let rid = Math.random()
        .toString(36)
        .substring(7)

    toolbarElement.insertAdjacentHTML(
        `beforeend`,
        `<div class="tab-${rid}" style="display: contents; float:left"/>`
    )

    // * 주입한 HTML로 인해 생겨난 엘레먼트를 얻어옵니다.
    let insertedElement = editorElement.querySelector(
        `.tab-${rid}`
    )

    // * 컴포넌트에게 전달할 프로퍼티를 만듭니다.
    let props = {
        optionsStore,
        activatedOptionStore,
    }
    if (tabInstance == undefined) {
        // * 스벨트탭 컴포넌트를 해당 HTML 엘레먼트로 주입합니다F.
        tabInstance = new SummernoteTab({
            target: insertedElement,
            props,
        })
    } else {
        // * 탭 프로퍼티를 갱신합니다.
        tabInstance.$set(props)
    }
}