GrapeJs and HTMX

[99bits]

Has anyone tried this open source project as a custom component in Grapejs?
https://htmx.org/

[c-nv-s]

@99bits did you test this further?

[andrescevp]

I am testing this, working wonky...

[andrescevp]

So I am dumping a component as usual with the "hx-" attrs. That behaves normal redering the html saved from grapesjs.

In the editor implmentation, in my models I have:

editor.DomComponents.addType("myComponent", {
        // Define the Model
        model: {
            ...
        },
        // Define the View
        view: {
            postRender() {
                const rootDocument = editor.getWrapper().frame.view.getEl();
                const myHtmx: typeof htmx = rootDocument.contentWindow.htmx;
                this.el.addEventListener('reload-chart-data', (event) => {
                    useAjaxHTMXElement(event.target, rootDocument, myHtmx);
                });
                // wait 1 second and trigger click
                setTimeout(() => {
                    this.el.dispatchEvent(new CustomEvent('reload-chart-data', {
                        detail: {
                            target: this.el,
                        }
                    }));
                }, 1000);
            },
        },
    });

useAjaxHTMXElement

import htmx, {HttpVerb} from "htmx.org";
export const useAjaxHTMXElement = (element: string|Element, root: null|HTMLElement|HTMLIFrameElement = null, customHtmx: typeof htmx = null) => {
    const rootDocument = root || document;
    const myHtmx = customHtmx || htmx;
    const el = typeof element === 'string' ? myHtmx.find(element) : element;
    console.log('useAjaxHTMXElement', el, element, rootDocument)
    const attributes = el.attributes;

    const config = {
        target: el,
        swap: 'innerHTML',
    };
    let url: string = null;
    let method: string = null;
    console.log(attributes)
    for (let i = 0; i < attributes.length; i++) {
        const attribute = attributes[i];
        if (attribute.name.startsWith('hx-')) {
            const key = attribute.name.replace('hx-', '');
            if (['get', 'post', 'put', 'delete'].includes(key)) {
                url = attribute.value;
                method = key;
            }

            if ([
                'source',
                'event',
                'handler',
                'target',
                'swap',
                'values',
                'headers',
                'select',
            ].includes(key)) {
                config[key] = attribute.value;
            }
        }
    }
    console.log(config, url, method);
    if (url && method) {
        myHtmx.ajax(method as HttpVerb, url, config)
            .then(() => {
                console.log("useAjaxHTMXElement Response");
            })
            .catch((error) => {
                console.error("useAjaxHTMXElement Response",error);
            });
    }
}

[andrescevp]

The idea is basically to create components with htmx attrs, with those attrs load the content.

I am forcing that with some helpers, but even with that... I guess this should not be forced.

[andrescevp]

well well thi is the final implmentation. Notice I must randomize a timeout to trigger events so they are not overlap by the GrapesJS internals (not sure why this happens, but happens). So I am creating a plugin to manage all this

DynamicComponentPlugin

editor.DomComponents.addType("dynamic", {
        // Define the Model
        model: {
            defaults: {
                // Default props
                tagName: "div",
                ...
                attributes: {
                    'hx-swap': 'innerHTML',
                    'hx-ext': 'dynamicLinks',
                    'hx-get': 'http://...',
                    'data-element-type': 'analysis',
                    'hx-trigger': 'load, reload-analysis-data',
                },
                ...
                script: function () {
                    // create rand number from 1000 to 3000 and reload the chart data
                    const rand = Math.floor(Math.random() * 1000) + 200;
                    setTimeout(() => {
                        window.htmx.trigger(
                            window.htmx.find(
                                `#${this.id}`),
                            'reload-analysis-data'
                        );
                    }, rand);
                },
                init() {
                    this.set('attributes', {id: this.getId()});
                    this.on('change:attributes', this.updateId.bind(this));
                },
                updateId() {
                    this.set('attributes', {id: this.getId()});
                },
            },
        },
        // Define the View
        view: {
            postRender() {
                this.el.addEventListener('reload-analysis-data', (event) => {
                    window.htmx.helpers.useAjaxHTMXElement(event.target);
                });
                // fallback to force reload in the editor
                this.el.addEventListener('click', (event) => {
                    window.htmx.helpers.useAjaxHTMXElement(event.target);
                });
            },
        },
    });

htmx-helpers.ts

import htmx, {HttpVerb} from "htmx.org";

/**
 * Get the DOM element based on the provided selector or element.
 * @param {string | Element} element - The selector or element to find.
 * @param {typeof htmx} myHtmx - The htmx instance to use.
 * @param {HTMLElement | Document} myDocument - The document or root element to search within.
 * @returns {Element | null} - The found element or null if not found.
 */
function getElement(element: string | Element, myHtmx: typeof htmx, myDocument: HTMLElement | Document) {
    let el = null;
    if (typeof element === 'string') {
        el = myHtmx.find(element);
        if (!el) {
            el = myDocument.querySelector(element);
        }
    } else {
        el = element;
    }
    // if el not instance of Element, return
    if (!(el instanceof Element)) {
        console.error("Element not found", element);
        console.trace();
        throw new Error("Element not found");
    }
    return el;
}

/**
 * Trigger an HTMX event on the specified element.
 * @param {string | Element} element - The selector or element to trigger the event on.
 * @param {string} [event='load'] - The event to trigger.
 * @param {HTMLElement | null} [root=null] - The root element to search within.
 * @param {typeof htmx} [customHtmx=null] - The custom htmx instance to use.
 */
export const useHTMXTrigger = (element: string|Element, event: string = 'load', root: null|HTMLElement = null, customHtmx: typeof htmx = null) => {
    const myDocument = root || window.document;
    const myHtmx = customHtmx || window.htmx
    const el = getElement(element, myHtmx, myDocument);
    myHtmx.trigger(el, event);
}

/**
 * Process an HTMX element.
 * @param {string | Element} element - The selector or element to process.
 * @param {HTMLElement | Document | null} [root=document] - The root element to search within.
 * @param {typeof htmx} [customHtmx=null] - The custom htmx instance to use.
 */
export const useHTMXProcess = (element: string|Element, root: null|HTMLElement|Document = document, customHtmx: typeof htmx = null) => {
    const myDocument = root || window.document;
    const myHtmx = customHtmx || window.htmx;
    const el = getElement(element, myHtmx, myDocument);
    myHtmx.process(el);
}

/**
 * Get all hx-* attributes from an element and use them as a configuration object for htmx.ajax.
 * @param {string | Element} element - The selector or element to process.
 * @param {HTMLElement | HTMLIFrameElement | null} [root=null] - The root element to search within.
 * @param {typeof htmx} [customHtmx=null] - The custom htmx instance to use.
 */
export const useAjaxHTMXElement = (element: string|Element, root: null|HTMLElement|HTMLIFrameElement = null, customHtmx: typeof htmx = null) => {
    const myDocument = root || window.document;
    const myHtmx = customHtmx || window.htmx;
    const el = getElement(element, myHtmx, myDocument);
    const attributes = el.attributes;

    const config = {
        target: el,
        swap: 'innerHTML',
    };
    let url: string = null;
    let method: string = null;

    for (let i = 0; i < attributes.length; i++) {
        const attribute = attributes[i];
        if (attribute.name.startsWith('hx-')) {
            const key = attribute.name.replace('hx-', '');
            if (['get', 'post', 'put', 'delete'].includes(key)) {
                url = attribute.value;
                method = key;
            }

            if ([
                'source',
                'event',
                'handler',
                'target',
                'swap',
                'values',
                'headers',
                'select',
            ].includes(key)) {
                config[key] = attribute.value;
            }
        }
    }

    if (url && method) {
        myHtmx.ajax(method as HttpVerb, url, config)
            .then(() => {
                console.log("useAjaxHTMXElement Success Response");
            })
            .catch((error) => {
                console.error("useAjaxHTMXElement Response Error", error);
            });
    }
}

In my app.js (the entrypoint of my app) i have

...
window.htmx = {...htmx, helpers: htmxHelpers};
...

TS Namespaces

declare namespace myhtmx {
    const helpers: typeof htmxHelpers;
}

// define window variables for ts
declare global {
    interface Window {
        htmx: typeof htmx & typeof myhtmx;
    }
}

[andrescevp]

Wondering if someone would like to start a collaborative Project to create a plugin that fully supports this