@shopify/react-html/dist/components/HtmlUpdater.js

A component to render your react app with no static HTML.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var react_hydrate_1 = require("@shopify/react-hydrate");
var hooks_1 = require("../hooks");
var utilities_1 = require("../utilities");
function HtmlUpdater() {
    var queuedUpdate = react_1.default.useRef(null);
    hooks_1.useClientDomEffect(function (manager) {
        return manager.subscribe(function (state) {
            if (queuedUpdate.current) {
                cancelAnimationFrame(queuedUpdate.current);
            }
            queuedUpdate.current = requestAnimationFrame(function () {
                updateOnClient(state);
            });
        });
    });
    return react_1.default.createElement(react_hydrate_1.HydrationTracker, null);
}
exports.HtmlUpdater = HtmlUpdater;
function updateOnClient(state) {
    var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
    var title = state.title, metas = state.metas, links = state.links;
    var titleElement = document.querySelector('title');
    if (title == null) {
        if (titleElement) {
            titleElement.remove();
        }
    }
    else {
        if (titleElement == null) {
            titleElement = document.createElement('title');
            document.head.appendChild(titleElement);
        }
        titleElement.setAttribute(utilities_1.MANAGED_ATTRIBUTE, 'true');
        titleElement.textContent = title;
    }
    var fragment = document.createDocumentFragment();
    var oldMetas = Array.from(document.head.querySelectorAll("meta[" + utilities_1.MANAGED_ATTRIBUTE + "]"));
    var _loop_1 = function (meta) {
        var e_5, _a;
        var element = document.createElement('meta');
        element.setAttribute(utilities_1.MANAGED_ATTRIBUTE, 'true');
        try {
            for (var _b = tslib_1.__values(Object.entries(meta)), _c = _b.next(); !_c.done; _c = _b.next()) {
                var _d = tslib_1.__read(_c.value, 2), attribute = _d[0], value = _d[1];
                element.setAttribute(attribute, value);
            }
        }
        catch (e_5_1) { e_5 = { error: e_5_1 }; }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
            }
            finally { if (e_5) throw e_5.error; }
        }
        var matchingOldMetaIndex = oldMetas.findIndex(function (oldMeta) {
            return oldMeta.isEqualNode(element);
        });
        if (matchingOldMetaIndex >= 0) {
            oldMetas.splice(matchingOldMetaIndex, 1);
        }
        else {
            fragment.appendChild(element);
        }
    };
    try {
        for (var metas_1 = tslib_1.__values(metas), metas_1_1 = metas_1.next(); !metas_1_1.done; metas_1_1 = metas_1.next()) {
            var meta = metas_1_1.value;
            _loop_1(meta);
        }
    }
    catch (e_1_1) { e_1 = { error: e_1_1 }; }
    finally {
        try {
            if (metas_1_1 && !metas_1_1.done && (_a = metas_1.return)) _a.call(metas_1);
        }
        finally { if (e_1) throw e_1.error; }
    }
    var oldLinks = Array.from(document.head.querySelectorAll("link[" + utilities_1.MANAGED_ATTRIBUTE + "]"));
    var _loop_2 = function (link) {
        var e_6, _a;
        var element = document.createElement('link');
        element.setAttribute(utilities_1.MANAGED_ATTRIBUTE, 'true');
        try {
            for (var _b = tslib_1.__values(Object.entries(link)), _c = _b.next(); !_c.done; _c = _b.next()) {
                var _d = tslib_1.__read(_c.value, 2), attribute = _d[0], value = _d[1];
                element.setAttribute(attribute, value);
            }
        }
        catch (e_6_1) { e_6 = { error: e_6_1 }; }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
            }
            finally { if (e_6) throw e_6.error; }
        }
        var matchingOldLinkIndex = oldLinks.findIndex(function (oldLink) {
            return oldLink.isEqualNode(element);
        });
        if (matchingOldLinkIndex >= 0) {
            oldLinks.splice(matchingOldLinkIndex, 1);
        }
        else {
            fragment.appendChild(element);
        }
    };
    try {
        for (var links_1 = tslib_1.__values(links), links_1_1 = links_1.next(); !links_1_1.done; links_1_1 = links_1.next()) {
            var link = links_1_1.value;
            _loop_2(link);
        }
    }
    catch (e_2_1) { e_2 = { error: e_2_1 }; }
    finally {
        try {
            if (links_1_1 && !links_1_1.done && (_b = links_1.return)) _b.call(links_1);
        }
        finally { if (e_2) throw e_2.error; }
    }
    try {
        for (var oldLinks_1 = tslib_1.__values(oldLinks), oldLinks_1_1 = oldLinks_1.next(); !oldLinks_1_1.done; oldLinks_1_1 = oldLinks_1.next()) {
            var link = oldLinks_1_1.value;
            link.remove();
        }
    }
    catch (e_3_1) { e_3 = { error: e_3_1 }; }
    finally {
        try {
            if (oldLinks_1_1 && !oldLinks_1_1.done && (_c = oldLinks_1.return)) _c.call(oldLinks_1);
        }
        finally { if (e_3) throw e_3.error; }
    }
    try {
        for (var oldMetas_1 = tslib_1.__values(oldMetas), oldMetas_1_1 = oldMetas_1.next(); !oldMetas_1_1.done; oldMetas_1_1 = oldMetas_1.next()) {
            var meta = oldMetas_1_1.value;
            meta.remove();
        }
    }
    catch (e_4_1) { e_4 = { error: e_4_1 }; }
    finally {
        try {
            if (oldMetas_1_1 && !oldMetas_1_1.done && (_d = oldMetas_1.return)) _d.call(oldMetas_1);
        }
        finally { if (e_4) throw e_4.error; }
    }
    document.head.appendChild(fragment);
}