hyperapp createPortal

[lifeiscontent]

Hi @infinnie I read your post here: https://medium.com/@joanxie/use-hyperapp-enjoy-javascript-again-ab9633f7066f

I was curious if you had a solution to dealing with displaced content within hyperapp.

[infinnie]

Yes.

• Create an ordinary element and insert it into the DOM using good old jQuery or vanilla JavaScript inside a non-component ordinary function.
• Then initialize a HyperApp application within it.
• When we need to receive information within the displaced element, we could have the element trigger a custom event or jQuery event, and pass the data into that event.

[infinnie]

See also https://github.com/hyperapp/hyperapp/issues/637

[infinnie]

An example:

var showDialog = (function () {
    var root = $("<div>").addClass("portal").appendTo("body"), dlg = app({
        text: "Default text"
    }, {
        changeText: function (text) {
            return { text: text };
        }
    }, function (state) {
        return (<div class="dialog portal__dialog">
            <p class="dialog__text">{state.text}</p>
            <div class="dialog__buttons">
                <button type="button" class="btn btn--primary" onclick={ function () {
                    root.trigger("ok"); } }>OK</button>
                <button type="button" class="btn btn--secondary" onclick={ function () {
                    root.trigger("cancel"); } }>Cancel</button>
            </div>
        </div>);
    }, root.get(0));
    return function (text) {
        dlg.changeText(text);
        root.addClass("portal--active");
        return new Promise(function (resolve, reject) {
            root.on("ok", function () {
                root.off("ok").off("cancel");
                resolve();
            }).on("cancel", function () {
                root.off("ok").off("cancel");
                reject();
            });
        });
    };
})();

[lifeiscontent]

Wow! Thank you so much! You rock @infinnie 👍