@shopify/react-async/dist/hooks.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var react_effect_1 = require("@shopify/react-effect");
var react_hooks_1 = require("@shopify/react-hooks");
var assets_1 = require("./context/assets");
function usePreload() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    var _a = tslib_1.__read(args, 2), asyncComponent = _a[0], _b = _a[1], options = _b === void 0 ? {} : _b;
    return asyncComponent.usePreload(options);
}
exports.usePreload = usePreload;
function usePrefetch() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    var _a = tslib_1.__read(args, 2), asyncComponent = _a[0], _b = _a[1], options = _b === void 0 ? {} : _b;
    return asyncComponent.usePrefetch(options);
}
exports.usePrefetch = usePrefetch;
function useKeepFresh() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    var _a = tslib_1.__read(args, 2), asyncComponent = _a[0], _b = _a[1], options = _b === void 0 ? {} : _b;
    return asyncComponent.useKeepFresh(options);
}
exports.useKeepFresh = useKeepFresh;
function useAsync(resolver, _a) {
    var _this = this;
    var _b = _a === void 0 ? {} : _a, assets = _b.assets, _c = _b.scripts, scripts = _c === void 0 ? assets : _c, _d = _b.styles, styles = _d === void 0 ? assets : _d, _e = _b.immediate, immediate = _e === void 0 ? true : _e;
    var _f = tslib_1.__read(react_1.useState(function () {
        return immediate || typeof window !== 'undefined' ? resolver.resolved : null;
    }), 2), value = _f[0], setValue = _f[1];
    var mounted = react_hooks_1.useMountedRef();
    var load = react_1.useCallback(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
        var resolved_1, error_1;
        return tslib_1.__generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    if (value != null) {
                        return [2 /*return*/, value];
                    }
                    _a.label = 1;
                case 1:
                    _a.trys.push([1, 3, , 4]);
                    return [4 /*yield*/, resolver.resolve()];
                case 2:
                    resolved_1 = _a.sent();
                    if (mounted.current) {
                        // It's important to use the function form of setValue here.
                        // Resolved is going to be a function in most cases, since it's
                        // a React component. If you do not set it using the function form,
                        // React treats the component as the function that returns state,
                        // so it sets state with the result of manually calling the component
                        // (so, usually JSX).
                        setValue(function () { return resolved_1; });
                    }
                    return [2 /*return*/, resolved_1];
                case 3:
                    error_1 = _a.sent();
                    if (mounted.current) {
                        setValue(error_1);
                    }
                    return [2 /*return*/, error_1];
                case 4: return [2 /*return*/];
            }
        });
    }); }, [mounted, resolver, value]);
    var id = resolver.id;
    useAsyncAsset(id, { scripts: scripts, styles: styles });
    return value instanceof Error
        ? { id: id, resolved: null, error: value, loading: false, load: load }
        : {
            id: id,
            resolved: value,
            error: null,
            loading: value == null,
            load: load,
        };
}
exports.useAsync = useAsync;
function useAsyncAsset(id, _a) {
    var _b = _a === void 0 ? {} : _a, scripts = _b.scripts, styles = _b.styles;
    var async = react_1.useContext(assets_1.AsyncAssetContext);
    react_effect_1.useServerEffect(function () {
        if (async && id) {
            async.markAsUsed(id, { scripts: scripts, styles: styles });
        }
    }, async ? async.effect : undefined);
}
exports.useAsyncAsset = useAsyncAsset;