piral-vue-3/lib/converter.js

Plugin for integrating Vue@3 components in Piral.

import { reactive } from 'vue';
import { createExtension } from './extension';
import { mountVue } from './mount';
export function createConverter(config = {}) {
    const { rootName = 'piral-slot', selector = 'extension-component' } = config;
    const Extension = createExtension(rootName);
    const middlewares = [];
    const convert = (root, captured = {}) => ({
        mount(parent, data, ctx, locals) {
            const el = parent.appendChild(document.createElement(rootName));
            const props = reactive({
                ...captured,
                ...data,
            });
            const app = mountVue(root, props, ctx);
            middlewares.forEach((middleware) => middleware(app));
            app.component(selector, createExtension(rootName));
            app.mount(el);
            locals.instance = app;
            locals.props = props;
        },
        update(parent, data, ctx, locals) {
            for (const prop in data) {
                locals.props[prop] = data[prop];
            }
        },
        unmount(parent, locals) {
            locals.instance.unmount();
            parent.innerHTML = '';
            locals.instance = undefined;
            locals.props = undefined;
        },
    });
    convert.Extension = Extension;
    convert.defineMiddleware = (middleware) => {
        if (!middlewares.includes(middleware)) {
            middlewares.push(middleware);
        }
    };
    return convert;
}
//# sourceMappingURL=converter.js.map