react-imported-component
Version:
I will import your component, and help to handle it
69 lines (68 loc) • 3.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.lazy = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var react_1 = require("react");
var loadable_1 = require("../loadable/loadable");
var detectBackend_1 = require("../utils/detectBackend");
var utils_1 = require("../utils/utils");
var Component_1 = require("./Component");
var useImported_1 = require("./useImported");
/**
* creates a "lazy" component, like `React.lazy`
* @see {@link useImported} or {@link useLazy}
* @param {Function} loaderFunction - () => import('a'), or () => require('b')
* @param {Object} [options]
* @param {React.Component} [options.LoadingComponent]
* @param {React.Component} [options.ErrorComponent]
* @param {Function} [options.onError] - error handler. Will consume the real error.
* @param {Function} [options.async = false] - enable React 16+ suspense.
*
* @example
* const PageA = imported('./pageA', { async: true });
*/
function loader(loaderFunction, baseOptions) {
if (baseOptions === void 0) { baseOptions = {}; }
var loadable = (0, loadable_1.getLoadable)(loaderFunction);
var Imported = React.forwardRef(function ImportedComponentHOC(_a, ref) {
var _b = _a.importedProps, importedProps = _b === void 0 ? {} : _b, props = (0, tslib_1.__rest)(_a, ["importedProps"]);
var options = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseOptions), importedProps);
// re-get loadable in order to have fresh reference
loadable = (0, loadable_1.getLoadable)(loaderFunction);
return (React.createElement(Component_1.ImportedComponent, { loadable: loadable, LoadingComponent: options.LoadingComponent, ErrorComponent: options.ErrorComponent, onError: options.onError, render: options.render, async: options.async, forwardProps: props || {}, forwardRef: ref }));
});
Imported.preload = function () {
loadable.load().catch(function () { return ({}); });
return loadable.resolution;
};
Object.defineProperty(Imported, 'done', {
get: function () {
return loadable.resolution;
},
});
return Imported;
}
var ReactLazy = React.lazy;
/**
* React.lazy "as-is" replacement
*/
function lazy(importer) {
if (detectBackend_1.isBackend) {
return loader(importer);
}
if (process.env.NODE_ENV !== 'production') {
// lazy is not hot-reloadable
if (module.hot) {
return loader(importer, { async: true });
}
}
var topLoadable = (0, loadable_1.getLoadable)(importer);
return function ImportedLazy(props) {
var loadable = (0, useImported_1.useLoadable)(topLoadable).loadable;
var Lazy = (0, react_1.useMemo)(function () { return ReactLazy(function () { return loadable.tryResolveSync(utils_1.asDefault); }); }, [loadable]);
return React.createElement(Lazy, (0, tslib_1.__assign)({}, props));
};
}
exports.lazy = lazy;
exports.default = loader;