@webiny/website-builder-vue 6.4.0-beta.5 → 6.4.0-beta.6

package/src/components/FragmentsProvider.ts

@@ -1,87 +0,0 @@
-import {
-    defineComponent,
-    provide,
-    inject,
-    watch,
-    type InjectionKey,
-    type PropType,
-    type Slot
-} from "vue";
-import { contentSdk } from "@webiny/website-builder-sdk";
-
-/**
- * A fragment that renders a pre-defined Vue subtree (fixed).
- * `element` is a Vue slot function returned by useSlots() — e.g. the result
- * of `<template #fragment:header>…</template>` in the consumer.
- */
-type FixedFragment = {
-    type: "fixed";
-    name: string;
-    element: Slot;
-};
-
-/**
- * A fragment that inserts a named editor component with given inputs.
- */
-type ComponentFragment = {
-    type: "component";
-    component: string;
-    inputs: Record<string, unknown>;
-};
-
-export type DocumentFragmentConfig = FixedFragment | ComponentFragment;
-export type DocumentFragments = DocumentFragmentConfig[];
-
-const FRAGMENTS_KEY: InjectionKey<() => DocumentFragments> = Symbol("WebinyDocumentFragments");
-
-/**
- * Provides the fragments array to all descendants and notifies the editing
- * SDK whenever the fragment list changes.
- */
-export const FragmentsProvider = defineComponent({
-    name: "WebinyFragmentsProvider",
-
-    props: {
-        fragments: {
-            type: Array as PropType<DocumentFragments>,
-            default: () => []
-        }
-    },
-
-    setup(props, { slots }) {
-        // Notify the editing SDK when fragments change.
-        watch(
-            () => props.fragments.length,
-            () => {
-                if (!contentSdk.isEditing()) {
-                    return;
-                }
-
-                const data = props.fragments.map(f => {
-                    if (f.type === "fixed") {
-                        return { type: "fixed", name: f.name };
-                    }
-                    return { type: "component", component: f.component, inputs: f.inputs };
-                });
-
-                contentSdk.getEditingSdk()?.messenger.send("document.fragments", {
-                    fragments: data
-                });
-            }
-        );
-
-        // Provide as a getter so consumers always receive the latest array.
-        provide(FRAGMENTS_KEY, () => props.fragments);
-
-        return () => slots.default?.();
-    }
-});
-
-/**
- * Composable – returns the current DocumentFragments array.
- * Returns an empty array when called outside a FragmentsProvider.
- */
-export const useDocumentFragments = (): DocumentFragments => {
-    const get = inject(FRAGMENTS_KEY, () => [] as DocumentFragments);
-    return get();
-};

package/src/components/LiveElementRenderer.ts

@@ -1,102 +0,0 @@
-import { defineComponent, ref, computed, watch, onMounted, h, Fragment, type PropType } from "vue";
-import { contentSdk, type DocumentElement, type ComponentInput } from "@webiny/website-builder-sdk";
-import { ElementSlot } from "./ElementSlot.js";
-import { useViewport } from "~/composables/useViewport.js";
-import { useBindingsForElement } from "~/composables/useBindingsForElement.js";
-import { useDocumentState } from "~/composables/useDocumentState.js";
-
-/**
- * Resolves a single document element into its rendered Vue subtree.
- *
- * Steps:
- *  1. Determines the current breakpoint (starts at "desktop" for SSR safety).
- *  2. Fetches merged bindings for the element at that breakpoint.
- *  3. Calls contentSdk.resolveElement() to get the list of component instances.
- *  4. Renders each instance, optionally wrapping it in a style div.
- */
-export const LiveElementRenderer = defineComponent({
-    name: "WebinyLiveElementRenderer",
-
-    props: {
-        element: { type: Object as PropType<DocumentElement>, required: true }
-    },
-
-    setup(props) {
-        const viewport = useViewport();
-
-        // Start with "desktop" on both server and initial client render (SSR-safe).
-        const breakpoint = ref<string>("desktop");
-
-        onMounted(() => {
-            if (viewport.value?.breakpoint) {
-                breakpoint.value = viewport.value.breakpoint;
-            }
-        });
-
-        watch(
-            () => viewport.value?.breakpoint,
-            newBp => {
-                if (newBp && newBp !== breakpoint.value) {
-                    breakpoint.value = newBp;
-                }
-            }
-        );
-
-        const elementId = computed(() => props.element?.id ?? "");
-        const elementBindings = useBindingsForElement(elementId.value, breakpoint);
-        const state = useDocumentState();
-
-        return () => {
-            const { element } = props;
-            if (!element?.component) {
-                return null;
-            }
-
-            const onResolved = (value: unknown, input: ComponentInput) => {
-                if (input.type === "slot") {
-                    const elements = (input as { list?: boolean }).list
-                        ? (value as string[])
-                        : [value as string];
-                    return h(ElementSlot, {
-                        parentId: element.id,
-                        slot: input.name,
-                        elements
-                    });
-                }
-                return value;
-            };
-
-            const instances = contentSdk.resolveElement({
-                element,
-                state: state.value,
-                elementBindings: elementBindings.value,
-                onResolved
-            });
-
-            if (!instances) {
-                return null;
-            }
-
-            const vnodes = instances.map((resolved, index) => {
-                const { component: Component, inputs, styles, manifest } = resolved;
-                const autoApplyStyles = manifest.autoApplyStyles !== false;
-
-                const userVNode = h(Component, {
-                    key: `${element.id}-${index}`,
-                    inputs,
-                    styles,
-                    element,
-                    breakpoint: breakpoint.value
-                });
-
-                if (!autoApplyStyles) {
-                    return userVNode;
-                }
-
-                return h("div", { key: `wrapper-${index}`, style: styles }, [userVNode]);
-            });
-
-            return h(Fragment, null, vnodes);
-        };
-    }
-});

package/src/components/LiveElementSlot.ts

@@ -1,46 +0,0 @@
-import { defineComponent, h, type PropType } from "vue";
-import { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider.js";
-import { ElementIndexProvider } from "./ElementIndexProvider.js";
-import { setLiveElementSlot } from "./PreviewElementSlot.js";
-
-// Forward-declared to resolve the circular ElementRenderer ↔ LiveElementSlot cycle.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let ElementRenderer: any;
-export const setElementRenderer = (c: unknown) => {
-    ElementRenderer = c;
-};
-
-/**
- * Renders a flat list of element IDs as sibling ElementRenderer instances,
- * each wrapped in an index-provider and nested inside an incremented depth.
- */
-export const LiveElementSlot = defineComponent({
-    name: "WebinyLiveElementSlot",
-
-    props: {
-        elements: { type: Array as PropType<string[]>, default: () => [] }
-    },
-
-    setup(props) {
-        const depth = useElementSlotDepth();
-
-        return () =>
-            h(
-                ElementSlotDepthProvider,
-                { depth: depth + 1 },
-                {
-                    default: () =>
-                        props.elements.map((id, index) =>
-                            h(
-                                ElementIndexProvider,
-                                { key: id, index },
-                                { default: () => h(ElementRenderer, { id }) }
-                            )
-                        )
-                }
-            );
-    }
-});
-
-// Break the circular dependency: PreviewElementSlot needs LiveElementSlot.
-setLiveElementSlot(LiveElementSlot);

package/src/components/PreviewElementSlot.ts

@@ -1,43 +0,0 @@
-import { defineComponent, h, type PropType } from "vue";
-import { useElementSlotDepth } from "./ElementSlotDepthProvider.js";
-
-// Forward-declare to avoid circular dep at module init time.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let LiveElementSlot: any;
-export const setLiveElementSlot = (c: unknown) => {
-    LiveElementSlot = c;
-};
-
-/**
- * In editing mode, renders an empty placeholder div when the slot has no
- * children (so the editor can show a drop zone).  Otherwise delegates to
- * LiveElementSlot.
- */
-export const PreviewElementSlot = defineComponent({
-    name: "WebinyPreviewElementSlot",
-
-    props: {
-        parentId: { type: String, required: true },
-        slot: { type: String, required: true },
-        elements: { type: Array as PropType<string[]>, default: () => [] }
-    },
-
-    setup(props) {
-        const depth = useElementSlotDepth();
-
-        return () => {
-            if (!props.elements.length) {
-                return h("div", {
-                    style: { height: "100px", width: "100% !important" },
-                    "data-role": "element-slot",
-                    "data-parent-id": props.parentId,
-                    "data-parent-slot": props.slot,
-                    "data-depth": depth,
-                    "data-empty": true
-                });
-            }
-
-            return h(LiveElementSlot, { elements: props.elements });
-        };
-    }
-});

package/src/composables/useBindingsForElement.ts

@@ -1,40 +0,0 @@
-import { computed, type Ref } from "vue";
-import { toJS } from "mobx";
-import { BindingsProcessor } from "@webiny/website-builder-sdk";
-import { useViewport } from "./useViewport.js";
-import { useObservable } from "./useObservable.js";
-import { useDocumentStore } from "~/components/DocumentStoreProvider.js";
-
-/**
- * Returns a Vue computed ref containing the merged bindings (inputs + styles)
- * for the given element ID at the current breakpoint.
- *
- * Re-evaluates automatically when:
- *  - the MobX document store changes (via useObservable)
- *  - the breakpoint ref changes
- *  - the viewport breakpoints change
- */
-export const useBindingsForElement = (elementId: string, breakpoint: Ref<string>) => {
-    const documentStore = useDocumentStore();
-    const viewport = useViewport();
-
-    // Observe this element's bindings directly inside the MobX autorun so that
-    // deep mutations from applyPatch (e.g. adding a child element) trigger a
-    // re-render without needing the top-level document reference to change.
-    // toJS() inside the autorun causes MobX to track all sub-properties.
-    const elementBindings = useObservable(() => {
-        const doc = documentStore.getDocument();
-        if (!doc) {
-            return undefined;
-        }
-        return toJS(doc.bindings[elementId]);
-    });
-
-    return computed(() => {
-        const bindings = elementBindings.value ?? {};
-        const breakpoints =
-            viewport.value?.breakpoints?.map((bp: { name: string }) => bp.name) ?? [];
-        const processor = new BindingsProcessor(breakpoints);
-        return processor.getBindings(bindings, breakpoint.value);
-    });
-};

package/src/composables/useDocumentState.ts

@@ -1,13 +0,0 @@
-import { computed } from "vue";
-import { useObservable } from "./useObservable.js";
-import { useDocumentStore } from "~/components/DocumentStoreProvider.js";
-
-/**
- * Returns a Vue computed ref containing the document's `state` object.
- * Re-evaluates whenever the MobX document store changes.
- */
-export const useDocumentState = () => {
-    const documentStore = useDocumentStore();
-    const document = useObservable(() => documentStore.getDocument());
-    return computed(() => document.value?.state ?? {});
-};

package/src/composables/useObservable.ts

@@ -1,30 +0,0 @@
-import { shallowRef, onUnmounted, triggerRef, getCurrentInstance, type Ref } from "vue";
-import { autorun } from "mobx";
-
-/**
- * Bridges a MobX observable into a Vue shallow ref.
- *
- * The supplied `fn` is run inside a MobX `autorun`. Every time a MobX
- * observable accessed by `fn` changes, the ref is updated and Vue is told
- * to treat it as "dirty" so that all computed values and templates that
- * depend on it re-evaluate.
- *
- * Must be called inside a component setup() (or equivalent) so that
- * `onUnmounted` can clean up the MobX reaction automatically.
- */
-export function useObservable<T>(fn: () => T): Ref<T> {
-    const value = shallowRef<T>(fn());
-
-    const disposer = autorun(() => {
-        value.value = fn();
-        // shallowRef won't trigger on the same object reference; triggerRef
-        // forces Vue to re-evaluate all dependents regardless.
-        triggerRef(value);
-    });
-
-    if (getCurrentInstance()) {
-        onUnmounted(() => disposer());
-    }
-
-    return value as Ref<T>;
-}

package/src/composables/useViewport.ts

@@ -1,27 +0,0 @@
-import { shallowRef, triggerRef, onMounted, onUnmounted } from "vue";
-import { viewportManager } from "@webiny/website-builder-sdk";
-
-/**
- * Returns a reactive ref that contains the current viewport info.
- *
- * Starts with the current value (or a sensible default on the server) and
- * updates whenever the viewport manager fires a change-end event.
- */
-export const useViewport = () => {
-    const viewport = shallowRef(viewportManager.getViewport());
-    let unsubscribe: (() => void) | undefined;
-
-    onMounted(() => {
-        // Sync the latest value after mount (in case a resize already happened).
-        viewport.value = viewportManager.getViewport();
-
-        unsubscribe = viewportManager.onViewportChangeEnd(newViewport => {
-            viewport.value = newViewport;
-            triggerRef(viewport);
-        });
-    });
-
-    onUnmounted(() => unsubscribe?.());
-
-    return viewport;
-};

package/src/createComponent.ts

@@ -1,55 +0,0 @@
-import type {
-    Component,
-    ComponentInput,
-    ComponentManifest,
-    ComponentManifestInput,
-    InputFactory
-} from "@webiny/website-builder-sdk";
-import { createSlotInput } from "@webiny/website-builder-sdk";
-import type { ExtractInputs } from "~/types.js";
-
-/**
- * Wraps a Vue component with a Webiny Website Builder manifest so it can be
- * registered with the SDK and rendered inside a DocumentRenderer.
- *
- * Usage:
- * ```ts
- * import { createComponent, createTextInput } from "@webiny/website-builder-vue";
- *
- * const MyBanner = (props: ComponentProps<{ headline: string }>) =>
- *     h("div", props.inputs.headline);
- *
- * export const Banner = createComponent(MyBanner, {
- *     name: "My/Banner",
- *     label: "Banner",
- *     inputs: { headline: createTextInput({ label: "Headline" }) }
- * });
- * ```
- */
-export function createComponent<
-    TComponent extends (props: any) => any,
-    TInputs extends ExtractInputs<Parameters<TComponent>[0]>
->(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component {
-    const inputs: ComponentInput[] = [];
-
-    if (Array.isArray(manifest.inputs)) {
-        inputs.push(...manifest.inputs);
-    } else {
-        const inputsObject: Record<string, InputFactory<any>> = manifest.inputs ?? {};
-        Object.keys(inputsObject).forEach((name: string) => {
-            inputs.push({ ...inputsObject[name], name });
-        });
-    }
-
-    if (manifest.acceptsChildren) {
-        const hasChildren = inputs.some(input => input.name === "children");
-        if (!hasChildren) {
-            inputs.push(createSlotInput({ name: "children" }));
-        }
-    }
-
-    return {
-        component,
-        manifest: { ...manifest, tags: manifest.tags ?? [], inputs } as ComponentManifest
-    };
-}

package/src/editorComponents/Box.ts

@@ -1,8 +0,0 @@
-import type { ComponentPropsWithChildren } from "~/types.js";
-
-/**
- * A generic container that renders only its children slot.
- */
-export const BoxComponent = (props: ComponentPropsWithChildren) => {
-    return props.inputs?.children ?? null;
-};

package/src/editorComponents/Fragment.ts

@@ -1,57 +0,0 @@
-import { h } from "vue";
-import { contentSdk } from "@webiny/website-builder-sdk";
-import { useDocumentFragments } from "~/components/FragmentsProvider.js";
-import type { ComponentProps } from "~/types.js";
-import type { DocumentFragments } from "~/components/FragmentsProvider.js";
-import type { DocumentFragmentConfig } from "~/components/FragmentsProvider.js";
-
-type FragmentProps = ComponentProps<{ name: string }>;
-
-const findFixed = (fragments: DocumentFragments, name: string) =>
-    fragments.find(f => f.type === "fixed" && f.name === name) as
-        | Extract<DocumentFragmentConfig, { type: "fixed" }>
-        | undefined;
-
-const FragmentPlaceholder = (props: { name: string }) => {
-    const label = props.name ? h("strong", null, [` ${props.name} `]) : " ";
-
-    return h(
-        "div",
-        {
-            style: {
-                display: "flex",
-                height: "100px",
-                backgroundColor: "#f4f4f4",
-                justifyContent: "center",
-                alignItems: "center",
-                fill: "#ffffff"
-            }
-        },
-        ["This is a placeholder for", label, "content coming from your frontend app."]
-    );
-};
-
-/**
- * Looks up a named fixed fragment provided by the consumer's DocumentRenderer
- * and renders it in place. Shows a placeholder in editing mode when no
- * matching fragment is found.
- */
-export const FragmentComponent = (props: FragmentProps) => {
-    const isEditing = contentSdk.isEditing();
-    const fragments = useDocumentFragments();
-    const fragment = findFixed(fragments, props.inputs?.name);
-
-    if (!fragment && isEditing) {
-        return h(FragmentPlaceholder, { name: props.inputs?.name });
-    }
-
-    if (fragment) {
-        // `element` is a Vue slot function (() => VNode[]) or a VNode.
-        if (typeof fragment.element === "function") {
-            return h("div", null, fragment.element());
-        }
-        return fragment.element;
-    }
-
-    return null;
-};

package/src/editorComponents/Grid.ts

@@ -1,72 +0,0 @@
-import { h } from "vue";
-import type { ComponentProps } from "~/types.js";
-import type { VNode } from "vue";
-
-interface Column {
-    children: VNode | null;
-}
-
-type GridProps = ComponentProps<{
-    gridLayout: string;
-    rowCount: number;
-    rowGap: number;
-    columnGap: number;
-    columns: Column[];
-    stackAtBreakpoint?: string;
-    reverseWhenStacked?: boolean;
-}>;
-
-/**
- * Renders a flexible CSS grid with rows/columns derived from `gridLayout`
- * (e.g. "6-6" = two equal columns, "4-8" = one-third + two-thirds, etc.).
- *
- * The children of each column are VNodes resolved by the SDK (ElementSlot).
- */
-export const GridComponent = (props: GridProps) => {
-    const { inputs, styles, breakpoint } = props;
-    const {
-        gridLayout = "12",
-        columns = [],
-        columnGap,
-        stackAtBreakpoint,
-        reverseWhenStacked
-    } = inputs;
-
-    const rowConfig = gridLayout.split("-").map(s => parseInt(s));
-    const rows: Column[][] = [];
-
-    for (let i = 0; i < columns.length; i += rowConfig.length) {
-        rows.push(columns.slice(i, i + rowConfig.length));
-    }
-
-    const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;
-    const stackColumns = breakpoint === stackAtBreakpoint;
-
-    const gridStyles = { ...styles };
-    if (stackColumns) {
-        gridStyles.flexDirection = reverseWhenStacked ? "column-reverse" : "column";
-    }
-
-    const cells = rows.flatMap(rowCols =>
-        rowCols.map((col, i) => {
-            const width = stackColumns
-                ? "100%"
-                : `calc(${(rowConfig[i] / 12) * 100}% - ${cellWidthReduction}px)`;
-
-            return h(
-                "div",
-                {
-                    key: i,
-                    style: {
-                        flex: `0 0 ${width}`,
-                        maxWidth: width,
-                        boxSizing: "border-box"
-                    }
-                },
-                [col.children]
-            );
-        })
-    );
-
-    return h("div", { style: gridStyles }, cells);
-};

package/src/editorComponents/GridColumn.ts

@@ -1,6 +0,0 @@
-import type { ComponentPropsWithChildren } from "~/types.js";
-
-/** Renders only its children slot (the column content). */
-export const GridColumnComponent = (props: ComponentPropsWithChildren) => {
-    return props.inputs?.children ?? null;
-};