@webiny/website-builder-vue 6.4.0-beta.4

package/src/components/LiveElementRenderer.ts

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,43 @@
+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/components/index.ts

@@ -0,0 +1,17 @@
+export { DocumentRenderer } from "./DocumentRenderer.js";
+export { DocumentFragment, type DocumentFragmentProps } from "./DocumentFragment.js";
+export { ElementSlot } from "./ElementSlot.js";
+export {
+    DocumentStoreProvider,
+    useDocumentStore,
+    DOCUMENT_STORE_KEY
+} from "./DocumentStoreProvider.js";
+export {
+    FragmentsProvider,
+    useDocumentFragments,
+    type DocumentFragmentConfig,
+    type DocumentFragments
+} from "./FragmentsProvider.js";
+export { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider.js";
+export { ElementIndexProvider, useElementIndex } from "./ElementIndexProvider.js";
+export { EditingElementRenderer } from "./EditingElementRenderer/index.js";

package/src/composables/useBindingsForElement.ts

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,30 @@
+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/useSelectFromState.ts

@@ -0,0 +1,18 @@
+import { computed, type Ref } from "vue";
+import { useObservable } from "./useObservable.js";
+
+/**
+ * Selects a slice of MobX state and exposes it as a Vue computed ref.
+ *
+ * - `getState` is tracked by MobX: any observable accessed inside it causes
+ *   re-evaluation when it changes.
+ * - `selector` is then applied to the latest state value in a Vue computed,
+ *   so it also re-runs when any Vue reactive value accessed inside it changes.
+ */
+export function useSelectFromState<TState, T>(
+    getState: () => TState,
+    selector: (state: TState) => T
+): Ref<T> {
+    const stateRef = useObservable(getState);
+    return computed(() => selector(stateRef.value)) as unknown as Ref<T>;
+}

package/src/composables/useViewport.ts

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,55 @@
+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.manifest.ts

@@ -0,0 +1,19 @@
+"use client";
+import { createComponent } from "~/createComponent.js";
+import { BoxComponent } from "./Box.js";
+
+export const Box = createComponent(BoxComponent, {
+    name: "Webiny/Box",
+    label: "Box",
+    group: "basic",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>`,
+    acceptsChildren: true,
+    defaults: {
+        styles: {
+            paddingTop: "5px",
+            paddingRight: "5px",
+            paddingBottom: "5px",
+            paddingLeft: "5px"
+        }
+    }
+});

package/src/editorComponents/Box.ts

@@ -0,0 +1,8 @@
+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.manifest.ts

@@ -0,0 +1,19 @@
+"use client";
+import { createTextInput } from "@webiny/website-builder-sdk";
+import { createComponent } from "~/createComponent.js";
+import { FragmentComponent } from "./Fragment.js";
+
+export const Fragment = createComponent(FragmentComponent, {
+    name: "Webiny/Fragment",
+    label: "Fragment",
+    group: "basic",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>`,
+    inputs: [
+        createTextInput({
+            name: "name",
+            label: "Fragment",
+            description: "Select fragment to display.",
+            renderer: "Webiny/FragmentSelector"
+        })
+    ]
+});

package/src/editorComponents/Fragment.ts

@@ -0,0 +1,57 @@
+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.manifest.ts

@@ -0,0 +1,166 @@
+"use client";
+import {
+    createBooleanInput,
+    createElement,
+    createNumberInput,
+    createObjectInput,
+    createSelectInput,
+    createSlotInput,
+    createTextInput
+} from "@webiny/website-builder-sdk";
+import { createComponent } from "~/createComponent.js";
+import { GridComponent } from "./Grid.js";
+
+export const Grid = createComponent(GridComponent, {
+    name: "Webiny/Grid",
+    label: "Grid",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/></svg>`,
+    group: "basic",
+    autoApplyStyles: false,
+    inputs: [
+        createTextInput({
+            name: "gridLayout",
+            label: "Grid Layout",
+            renderer: "Webiny/GridLayout",
+            onChange: ({ inputs, createElement: ce }) => {
+                const rowColumnCount = inputs.gridLayout.split("-").length;
+                const columns = inputs.columns.length;
+                const remainder = columns % rowColumnCount;
+
+                if (remainder !== 0) {
+                    const fullColumnCount = rowColumnCount * inputs.rowCount;
+                    const toCreate =
+                        columns > fullColumnCount ? remainder : rowColumnCount - remainder;
+
+                    Array.from({ length: toCreate }).forEach(() => {
+                        inputs.columns.push({
+                            children: ce({ component: "Webiny/GridColumn" })
+                        });
+                    });
+                }
+
+                inputs.rowCount = inputs.columns.length / rowColumnCount;
+            }
+        }),
+        createNumberInput({
+            name: "rowCount",
+            label: "Row Count",
+            defaultValue: 1,
+            minValue: 1,
+            onChange: ({ inputs, createElement: ce }) => {
+                const columnCount = inputs.gridLayout.split("-").length;
+                const rowCount = Math.max(1, inputs.rowCount);
+                const columns = inputs.columns;
+                const rows: unknown[][] = [];
+
+                for (let i = 0; i < columns.length; i += columnCount) {
+                    rows.push(columns.slice(i, i + columnCount));
+                }
+
+                if (rows.length > rowCount) {
+                    inputs.columns = columns.slice(0, columnCount * rowCount);
+                    return;
+                }
+
+                const createRows = Math.max(0, rowCount - rows.length);
+                if (createRows <= 0) {
+                    return;
+                }
+
+                const newRows = Array.from({ length: createRows * columnCount }).map(() => ({
+                    children: ce({ component: "Webiny/GridColumn" })
+                }));
+
+                inputs.columns.push(...newRows);
+            }
+        }),
+        createNumberInput({
+            name: "rowGap",
+            label: "Row Gap",
+            defaultValue: 0,
+            responsive: true,
+            onChange: ({ inputs, styles }) => {
+                const v = parseInt(inputs.rowGap);
+                if (isNaN(v)) {
+                    delete styles.rowGap;
+                } else {
+                    styles.rowGap = `${inputs.rowGap}px`;
+                }
+            }
+        }),
+        createNumberInput({
+            name: "columnGap",
+            label: "Column Gap",
+            defaultValue: 0,
+            responsive: true,
+            onChange: ({ inputs, styles }) => {
+                const v = parseInt(inputs.columnGap);
+                if (isNaN(v)) {
+                    delete styles.columnGap;
+                } else {
+                    styles.columnGap = `${inputs.columnGap}px`;
+                }
+            }
+        }),
+        createSelectInput({
+            name: "stackAtBreakpoint",
+            label: "Stack at breakpoint",
+            options: [
+                { label: "Tablet", value: "tablet" },
+                { label: "Mobile", value: "mobile" }
+            ]
+        }),
+        createBooleanInput({
+            name: "reverseWhenStacked",
+            label: "Reverse columns when stacked"
+        }),
+        createObjectInput({
+            name: "columns",
+            list: true,
+            hideFromUi: true,
+            fields: [
+                createSlotInput({
+                    name: "children",
+                    list: false,
+                    components: ["Webiny/GridColumn"]
+                })
+            ]
+        })
+    ],
+    defaults: {
+        inputs: {
+            gridLayout: "6-6",
+            columns: [
+                {
+                    children: createElement({
+                        component: "Webiny/GridColumn",
+                        inputs: { children: [createElement({ component: "Webiny/Lexical" })] }
+                    })
+                },
+                {
+                    children: createElement({
+                        component: "Webiny/GridColumn",
+                        inputs: { children: [createElement({ component: "Webiny/Lexical" })] }
+                    })
+                }
+            ]
+        },
+        styles: {
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            justifyContent: "flex-start",
+            alignItems: "stretch",
+            width: "100%",
+            marginTop: "0px",
+            marginBottom: "0px",
+            marginLeft: "0px",
+            marginRight: "0px",
+            paddingTop: "5px",
+            paddingRight: "5px",
+            paddingBottom: "5px",
+            paddingLeft: "5px"
+        }
+    }
+});