react-imported-component
Version:
I will import your component, and help to handle it
88 lines (87 loc) • 3.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.printDrainHydrateMarks = exports.waitForMarks = exports.rehydrateMarks = exports.drainHydrateMarks = exports.getUsedMarks = exports.assignLoadableMark = exports.consumeMark = void 0;
var stream_1 = require("./stream");
var utils_1 = require("./utils");
var LOADABLE_MARKS = new Map();
var consumeMark = function (stream, marks) {
if (stream === void 0) { stream = stream_1.defaultStream; }
(0, stream_1.checkStream)(stream);
if (marks && marks.length) {
marks.forEach(function (a) { return (stream.marks[a] = true); });
}
};
exports.consumeMark = consumeMark;
var assignLoadableMark = function (mark, loadable) {
LOADABLE_MARKS.set(JSON.stringify(mark), { mark: mark, loadable: loadable });
};
exports.assignLoadableMark = assignLoadableMark;
/**
* returns marks used in the stream
* @param stream
*/
var getUsedMarks = function (stream) {
if (stream === void 0) { stream = stream_1.defaultStream; }
return (stream ? Object.keys(stream.marks) : []);
};
exports.getUsedMarks = getUsedMarks;
/**
* SSR
* @returns list or marks used
*/
var drainHydrateMarks = function (stream) {
if (stream === void 0) { stream = stream_1.defaultStream; }
(0, stream_1.checkStream)(stream);
var marks = (0, exports.getUsedMarks)(stream);
(0, stream_1.clearStream)(stream);
return marks;
};
exports.drainHydrateMarks = drainHydrateMarks;
/**
* Loads a given marks/chunks
* @see returns a promise for a given marks only. In order to await all requests currently in flight use {@link waitForMarks}
* @param marks
* @returns a resolution promise
*/
var rehydrateMarks = function (marks) {
var rehydratedMarks = marks || global.___REACT_DEFERRED_COMPONENT_MARKS || [];
var tasks = [];
var usedMarks = new Set();
LOADABLE_MARKS.forEach(function (_a) {
var mark = _a.mark, loadable = _a.loadable;
if ((0, utils_1.markerOverlap)(mark, rehydratedMarks)) {
mark.forEach(function (m) { return usedMarks.add(m); });
tasks.push(loadable.load());
}
});
rehydratedMarks.forEach(function (m) {
if (!usedMarks.has(m)) {
throw new Error("react-imported-component: unknown mark(" + m + ") has been used. Client and Server should have the same babel configuration.");
}
});
return Promise.all(tasks);
};
exports.rehydrateMarks = rehydrateMarks;
/**
* waits for the given marks to load
* @param marks
*/
var waitForMarks = function (marks) {
var tasks = [];
LOADABLE_MARKS.forEach(function (_a) {
var mark = _a.mark, loadable = _a.loadable;
if ((0, utils_1.markerOverlap)(mark, marks)) {
tasks.push(loadable.resolution);
}
});
return Promise.all(tasks);
};
exports.waitForMarks = waitForMarks;
/**
* @returns a <script> tag with all used marks
*/
var printDrainHydrateMarks = function (stream) {
(0, stream_1.checkStream)(stream);
return "<script>window.___REACT_DEFERRED_COMPONENT_MARKS=" + JSON.stringify((0, exports.drainHydrateMarks)(stream)) + ";</script>";
};
exports.printDrainHydrateMarks = printDrainHydrateMarks;