@antv/s2-react
Version:
use S2 with react
88 lines • 3.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.forceClearContent = exports.reactUnmount = exports.reactRender = exports.isLegacyReactVersion = exports.S2_REACT_ROOT_SYMBOL_ID = void 0;
const tslib_1 = require("tslib");
/**
* 参考 react-component/util 同时兼容 React 16/17/18 的挂载和卸载
* @link https://github.com/react-component/util/blob/677d3ac177d147572b65af63e67a7796a5104f4c/src/React/render.ts
*/
const react_1 = require("react");
const ReactDOM = tslib_1.__importStar(require("react-dom"));
exports.S2_REACT_ROOT_SYMBOL_ID = `__s2_react_root__`;
const ReactDOMClone = Object.assign({}, ReactDOM);
const { render: reactOriginalRender, unmountComponentAtNode } = ReactDOMClone;
let createRoot;
try {
const mainVersion = Number((react_1.version || '').split('.')[0]);
if (mainVersion >= 18) {
createRoot = ReactDOMClone.createRoot;
}
}
catch (e) {
// < React 18
}
const isLegacyReactVersion = () => {
return !createRoot;
};
exports.isLegacyReactVersion = isLegacyReactVersion;
/**
* 由于兼容的关系, 没有从 "react-dom/client" 引入 createRoot, 会报 warning
* https://github.com/facebook/react/issues/24372
*/
function toggleWarning(skip) {
const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = ReactDOMClone;
if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object') {
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint =
skip;
}
}
// ========================== Render ==========================
function modernRender(node, container) {
toggleWarning(true);
const root = container[exports.S2_REACT_ROOT_SYMBOL_ID] || createRoot(container);
toggleWarning(false);
root.render(node);
container[exports.S2_REACT_ROOT_SYMBOL_ID] = root;
return root;
}
function legacyRender(node, container) {
reactOriginalRender(node, container);
}
function reactRender(node, container) {
if (!(0, exports.isLegacyReactVersion)()) {
modernRender(node, container);
return;
}
legacyRender(node, container);
}
exports.reactRender = reactRender;
// ========================= Unmount ==========================
function modernUnmount(container) {
// https://github.com/facebook/react/issues/25675#issuecomment-1363957941
return Promise.resolve().then(() => {
var _a;
(_a = container === null || container === void 0 ? void 0 : container[exports.S2_REACT_ROOT_SYMBOL_ID]) === null || _a === void 0 ? void 0 : _a.unmount();
container === null || container === void 0 ? true : delete container[exports.S2_REACT_ROOT_SYMBOL_ID];
});
}
function legacyUnmount(container) {
if (container) {
unmountComponentAtNode(container);
}
}
function reactUnmount(container) {
if (!(0, exports.isLegacyReactVersion)()) {
return modernUnmount(container);
}
return legacyUnmount(container);
}
exports.reactUnmount = reactUnmount;
function forceClearContent(container) {
if ((0, exports.isLegacyReactVersion)()) {
return legacyUnmount(container);
}
return modernRender(null, container);
}
exports.forceClearContent = forceClearContent;
//# sourceMappingURL=reactRender.js.map