Создать окно с прикрепленным компонентом svelte и в том же контексте Javascript - PullRequest
Новая
       64

Создать окно с прикрепленным компонентом svelte и в том же контексте Javascript

1 голос
/ 01 октября 2019

Я использую среду Sapper и хочу открыть свое собственное окно инструментов разработчика, которое должно иметь полный доступ к объектам Javascript главного окна.

Я пытаюсь создать новое окно с компонентом svelteи с тем же контекстом Javascript: 

var win = window.open('abour:blank')
var container = win.document.createElement('div')
var win.document.body.appendChild(container)
var component = new ComponentClass({
    target: container,
})

Работает, но без стилей CSS.

Вы можете использовать этот REPL для тестов.

Как можноЯ применяю стили CSS компонента для нового окна?

Или как лучше всего создавать такие окна?

1 Ответ

0 голосов
/ 02 октября 2019

Я решил эту проблему, просто перенеся все стили из родительского окна (см. Функцию appendCss)

Если вы используете sapper, вы можете передавать только эти стили: link[rel="stylesheet"][href^="client/"]

Ниже приведено полное решение, и вы также можете увидеть этот REPL

ComponentWindow.ts 

export class ComponentWindow {
    constructor({
        windowName = '',
        windowFeatures = 'width=600,height=400,resizable,scrollbars=yes,status=1',
        replace = false,
    }: {
        windowName?: string,
        windowFeatures?: string,
        replace?: boolean,
    } = {}) {
        this._windowOptions = [ 'about:blank', windowName, windowFeatures, replace ]
    }

    // region create window

    private readonly _windowOptions: any[]
    private _window
    public get window() {
        if (!this.isOpened) {
            this._window = window.open(...this._windowOptions)
            this.appendCss()
            this.appendContainer()
        }
        return this._window
    }

    private appendCss() {
        const {window: _window} = this

        const parentStyleElements = Array.from(window.document.querySelectorAll(
            'link[rel="stylesheet"][href^="client/"], style',
        ))

        for (let i = 0; i < parentStyleElements.length; i++) {
            const parentStyleElement = parentStyleElements[i]
            let styleElement
            switch (parentStyleElement.tagName) {
                case 'LINK':
                    styleElement = _window.document.createElement('link')
                    styleElement.rel = 'stylesheet'
                    styleElement.href = (parentStyleElement as any).href
                    break
                case 'STYLE':
                    styleElement = _window.document.createElement('style')
                    styleElement.id = parentStyleElement.id
                    styleElement.innerHTML = parentStyleElement.innerHTML
                    break
                default:
                    throw new Error('Unexpected style element: ' + styleElement.tagName)
            }
            _window.document.head.appendChild(styleElement)
        }
    }

    private appendContainer() {
        const {window} = this
        window.container = window.document.createElement('div')
        window.document.body.appendChild(window.container)
    }

    // endregion

    // region attachComponent

    private _component
    public attachComponent(componentClass?, options?) {
        let {_component} = this
        if (_component) {
            _component.$destroy()
            this._component = _component = null
        }

        if (!componentClass) {
            return
        }

        const {window} = this
        _component = new componentClass({
            ...options,
            target: window.container,
        })
        this._component = _component

        window.addEventListener('beforeunload', () => {
            this.attachComponent()
        })

        return _component
    }

    // endregion

    public get isOpened() {
        return this._window && !this._window.closed
    }

    public focus() {
        if (this.isOpened) {
            this._window.focus()
        }
    }

    public destroy() {
        this.attachComponent()
        if (this.isOpened) {
            this._window.close()
            this._window = null
        }
    }
}

Использование: 

<script>
    import {ComponentWindow} from './ComponentWindow.js'
    import ComponentClass from './ComponentClass.svelte'
    import {onMount, onDestroy} from 'svelte'

    let componentWindow = new ComponentWindow()
    let component
    let value = 10

    onDestroy(() => componentWindow.destroy())

    $: if (component) component.$set({ value })

    async function openComponentWindow() {
        if (componentWindow.isOpened) {
            componentWindow.focus()
            return
        }

        component = await componentWindow.attachComponent(ComponentClass, {
            props: {
                value               
            }
        })

        componentWindow.focus()
    }
</script>

<button on:click="{openComponentWindow}">Open component Window</button><br>
<button on:click="{() => value++}">Change value</button>
...