203 lines
6.2 KiB
JavaScript
203 lines
6.2 KiB
JavaScript
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.default = void 0;
|
||
|
|
var _extends = require("@swc/helpers/lib/_extends.js").default;
|
||
|
|
var _interop_require_default = require("@swc/helpers/lib/_interop_require_default.js").default;
|
||
|
|
var _react = _interop_require_default(require("react"));
|
||
|
|
var _loadableContext = require("./loadable-context");
|
||
|
|
const ALL_INITIALIZERS = [];
|
||
|
|
const READY_INITIALIZERS = [];
|
||
|
|
let initialized = false;
|
||
|
|
function load(loader) {
|
||
|
|
let promise = loader();
|
||
|
|
let state = {
|
||
|
|
loading: true,
|
||
|
|
loaded: null,
|
||
|
|
error: null
|
||
|
|
};
|
||
|
|
state.promise = promise.then((loaded)=>{
|
||
|
|
state.loading = false;
|
||
|
|
state.loaded = loaded;
|
||
|
|
return loaded;
|
||
|
|
}).catch((err)=>{
|
||
|
|
state.loading = false;
|
||
|
|
state.error = err;
|
||
|
|
throw err;
|
||
|
|
});
|
||
|
|
return state;
|
||
|
|
}
|
||
|
|
function createLoadableComponent(loadFn, options) {
|
||
|
|
let opts = Object.assign({
|
||
|
|
loader: null,
|
||
|
|
loading: null,
|
||
|
|
delay: 200,
|
||
|
|
timeout: null,
|
||
|
|
webpack: null,
|
||
|
|
modules: null
|
||
|
|
}, options);
|
||
|
|
opts.lazy = _react.default.lazy(opts.loader);
|
||
|
|
/** @type LoadableSubscription */ let subscription = null;
|
||
|
|
function init() {
|
||
|
|
if (!subscription) {
|
||
|
|
const sub = new LoadableSubscription(loadFn, opts);
|
||
|
|
subscription = {
|
||
|
|
getCurrentValue: sub.getCurrentValue.bind(sub),
|
||
|
|
subscribe: sub.subscribe.bind(sub),
|
||
|
|
retry: sub.retry.bind(sub),
|
||
|
|
promise: sub.promise.bind(sub)
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return subscription.promise();
|
||
|
|
}
|
||
|
|
// Server only
|
||
|
|
if (typeof window === 'undefined') {
|
||
|
|
ALL_INITIALIZERS.push(init);
|
||
|
|
}
|
||
|
|
// Client only
|
||
|
|
if (!initialized && typeof window !== 'undefined') {
|
||
|
|
// require.resolveWeak check is needed for environments that don't have it available like Jest
|
||
|
|
const moduleIds = opts.webpack && typeof require.resolveWeak === 'function' ? opts.webpack() : opts.modules;
|
||
|
|
if (moduleIds) {
|
||
|
|
READY_INITIALIZERS.push((ids)=>{
|
||
|
|
for (const moduleId of moduleIds){
|
||
|
|
if (ids.indexOf(moduleId) !== -1) {
|
||
|
|
return init();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function useLoadableModule() {
|
||
|
|
init();
|
||
|
|
const context = _react.default.useContext(_loadableContext.LoadableContext);
|
||
|
|
if (context && Array.isArray(opts.modules)) {
|
||
|
|
opts.modules.forEach((moduleName)=>{
|
||
|
|
context(moduleName);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function LoadableComponent(props) {
|
||
|
|
useLoadableModule();
|
||
|
|
const fallbackElement = _react.default.createElement(opts.loading, {
|
||
|
|
isLoading: true,
|
||
|
|
pastDelay: true,
|
||
|
|
error: null
|
||
|
|
});
|
||
|
|
return _react.default.createElement(_react.default.Suspense, {
|
||
|
|
fallback: fallbackElement
|
||
|
|
}, _react.default.createElement(opts.lazy, props));
|
||
|
|
}
|
||
|
|
LoadableComponent.preload = ()=>init();
|
||
|
|
LoadableComponent.displayName = 'LoadableComponent';
|
||
|
|
return LoadableComponent;
|
||
|
|
}
|
||
|
|
class LoadableSubscription {
|
||
|
|
promise() {
|
||
|
|
return this._res.promise;
|
||
|
|
}
|
||
|
|
retry() {
|
||
|
|
this._clearTimeouts();
|
||
|
|
this._res = this._loadFn(this._opts.loader);
|
||
|
|
this._state = {
|
||
|
|
pastDelay: false,
|
||
|
|
timedOut: false
|
||
|
|
};
|
||
|
|
const { _res: res , _opts: opts } = this;
|
||
|
|
if (res.loading) {
|
||
|
|
if (typeof opts.delay === 'number') {
|
||
|
|
if (opts.delay === 0) {
|
||
|
|
this._state.pastDelay = true;
|
||
|
|
} else {
|
||
|
|
this._delay = setTimeout(()=>{
|
||
|
|
this._update({
|
||
|
|
pastDelay: true
|
||
|
|
});
|
||
|
|
}, opts.delay);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (typeof opts.timeout === 'number') {
|
||
|
|
this._timeout = setTimeout(()=>{
|
||
|
|
this._update({
|
||
|
|
timedOut: true
|
||
|
|
});
|
||
|
|
}, opts.timeout);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._res.promise.then(()=>{
|
||
|
|
this._update({});
|
||
|
|
this._clearTimeouts();
|
||
|
|
}).catch((_err)=>{
|
||
|
|
this._update({});
|
||
|
|
this._clearTimeouts();
|
||
|
|
});
|
||
|
|
this._update({});
|
||
|
|
}
|
||
|
|
_update(partial) {
|
||
|
|
this._state = _extends({}, this._state, {
|
||
|
|
error: this._res.error,
|
||
|
|
loaded: this._res.loaded,
|
||
|
|
loading: this._res.loading
|
||
|
|
}, partial);
|
||
|
|
this._callbacks.forEach((callback)=>callback());
|
||
|
|
}
|
||
|
|
_clearTimeouts() {
|
||
|
|
clearTimeout(this._delay);
|
||
|
|
clearTimeout(this._timeout);
|
||
|
|
}
|
||
|
|
getCurrentValue() {
|
||
|
|
return this._state;
|
||
|
|
}
|
||
|
|
subscribe(callback) {
|
||
|
|
this._callbacks.add(callback);
|
||
|
|
return ()=>{
|
||
|
|
this._callbacks.delete(callback);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
constructor(loadFn, opts){
|
||
|
|
this._loadFn = loadFn;
|
||
|
|
this._opts = opts;
|
||
|
|
this._callbacks = new Set();
|
||
|
|
this._delay = null;
|
||
|
|
this._timeout = null;
|
||
|
|
this.retry();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function Loadable(opts) {
|
||
|
|
return createLoadableComponent(load, opts);
|
||
|
|
}
|
||
|
|
function flushInitializers(initializers, ids) {
|
||
|
|
let promises = [];
|
||
|
|
while(initializers.length){
|
||
|
|
let init = initializers.pop();
|
||
|
|
promises.push(init(ids));
|
||
|
|
}
|
||
|
|
return Promise.all(promises).then(()=>{
|
||
|
|
if (initializers.length) {
|
||
|
|
return flushInitializers(initializers, ids);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
Loadable.preloadAll = ()=>{
|
||
|
|
return new Promise((resolveInitializers, reject)=>{
|
||
|
|
flushInitializers(ALL_INITIALIZERS).then(resolveInitializers, reject);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Loadable.preloadReady = (ids = [])=>{
|
||
|
|
return new Promise((resolvePreload)=>{
|
||
|
|
const res = ()=>{
|
||
|
|
initialized = true;
|
||
|
|
return resolvePreload();
|
||
|
|
};
|
||
|
|
// We always will resolve, errors should be handled within loading UIs.
|
||
|
|
flushInitializers(READY_INITIALIZERS, ids).then(res, res);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
if (typeof window !== 'undefined') {
|
||
|
|
window.__NEXT_PRELOADREADY = Loadable.preloadReady;
|
||
|
|
}
|
||
|
|
var _default = Loadable;
|
||
|
|
exports.default = _default;
|
||
|
|
|
||
|
|
//# sourceMappingURL=loadable.js.map
|