@shopify/react-async
Version:
Tools for creating powerful, asynchronously-loaded React components.
99 lines (98 loc) • 4.24 kB
JavaScript
;
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;