@antv/s2-react
Version:
use S2 with react
80 lines • 2.82 kB
JavaScript
/**
* 参考 react-component/util 同时兼容 React 16/17/18 的挂载和卸载
* @link https://github.com/react-component/util/blob/677d3ac177d147572b65af63e67a7796a5104f4c/src/React/render.ts
*/
import { version } from 'react';
import * as ReactDOM from 'react-dom';
export const S2_REACT_ROOT_SYMBOL_ID = `__s2_react_root__`;
const ReactDOMClone = Object.assign({}, ReactDOM);
const { render: reactOriginalRender, unmountComponentAtNode } = ReactDOMClone;
let createRoot;
try {
const mainVersion = Number((version || '').split('.')[0]);
if (mainVersion >= 18) {
createRoot = ReactDOMClone.createRoot;
}
}
catch (e) {
// < React 18
}
export const isLegacyReactVersion = () => {
return !createRoot;
};
/**
* 由于兼容的关系, 没有从 "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[S2_REACT_ROOT_SYMBOL_ID] || createRoot(container);
toggleWarning(false);
root.render(node);
container[S2_REACT_ROOT_SYMBOL_ID] = root;
return root;
}
function legacyRender(node, container) {
reactOriginalRender(node, container);
}
export function reactRender(node, container) {
if (!isLegacyReactVersion()) {
modernRender(node, container);
return;
}
legacyRender(node, container);
}
// ========================= 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[S2_REACT_ROOT_SYMBOL_ID]) === null || _a === void 0 ? void 0 : _a.unmount();
container === null || container === void 0 ? true : delete container[S2_REACT_ROOT_SYMBOL_ID];
});
}
function legacyUnmount(container) {
if (container) {
unmountComponentAtNode(container);
}
}
export function reactUnmount(container) {
if (!isLegacyReactVersion()) {
return modernUnmount(container);
}
return legacyUnmount(container);
}
export function forceClearContent(container) {
if (isLegacyReactVersion()) {
return legacyUnmount(container);
}
return modernRender(null, container);
}
//# sourceMappingURL=reactRender.js.map