Where is the Vanilla JS doc? Or Svelte doc?

[Skit5]

Hi guys,

I really like what you're doing and I'd love to try it out within SvelteKit as it's considered Vanilla Js friendly.
But I am unsure on how to make a Svelte wrapper around it and there are no resource online on using it in this context.
The documentation only provides solutions for React and Vue so what should I go with if I want the Vanilla Js approach? Should I try to adapt the Vue documentation to my needs? Did anyone already try to make it work with SvelteKit?

Regards,
Jonas

[mathuo]

Although the vanilla js version of dockview does exist under the package dockview-core (which is used by all of the framework versions) the documentation is missing since it's not offically supported - this is changing though and will be tracked here

#651

[melMass]

I came to ask the same.
It works fine in svelte as follows but I can't drag/dock the panels, any clue?

<script lang="ts">
    import { createDockview } from "dockview-core";
    import type {
        GroupPanelPartInitParameters,
        IContentRenderer,
    } from "dockview-core";

    import { onMount } from "svelte";
    import "dockview-core/dist/styles/dockview.css";

    let root;
    let api;

    class Panel implements IContentRenderer {
        private readonly _element: HTMLElement;

        get element(): HTMLElement {
            return this._element;
        }

        constructor() {
            this._element = document.createElement("div");
            this._element.style.color = "white";
        }

        init(parameters: GroupPanelPartInitParameters): void {
            this._element.textContent = "Hello World";
        }
    }

    onMount(() => {
        console.log("Creating docks", root);
        const api = createDockview(root, {
            className: "dockview-theme-abyss",
            //disableDnd: false,
            //locked: false,
            debug: true,
            createComponent: (options) => {
                console.log("Options", options);
                switch (options.name) {
                    case "default":
                        return new Panel();
                }
            },
        });
        api.addPanel({
            id: "panel_1",
            component: "default",
            title: "Panel 1",
        });
        api.addPanel({
            id: "panel_2",
            component: "default",
            position: { referencePanel: "panel_1", direction: "right" },
            title: "Panel 2",
        });
    });
</script>

<div bind:this={root} class="container"></div>

<style>
    .container {
        height: 100vh;
        width: 100vw;
    }
    @global (body) {
        margin: 0px;
        color: white;
        font-family: sans-serif;
        text-align: center;
    }
</style>

[melMass]

Hmmm well, I'm going to dive further as while making a REPL version of this it works fine there (minus the CSS loading that requires a plugin not in the REPL but you can still drag/reorder them so it clearly works...).

I'm guessing it has something to do with CSS / bound miscalculation, I'll report here if I find out

REPL | Dockview - Reproduction (non draggable issue)