next
Version:
The React Framework
59 lines (58 loc) • 1.92 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { Component, createRef } from 'react';
function getDomNodeAttributes(node) {
const result = {};
for(let i = 0; i < node.attributes.length; i++){
const attr = node.attributes[i];
result[attr.name] = attr.value;
}
return result;
}
export class GracefulDegradeBoundary extends Component {
static getDerivedStateFromError(_) {
return {
hasError: true
};
}
componentDidMount() {
const htmlNode = this.htmlRef.current;
if (this.state.hasError && htmlNode) {
// Reapply the cached HTML attributes to the root element
Object.entries(this.htmlAttributes).forEach((param)=>{
let [key, value] = param;
htmlNode.setAttribute(key, value);
});
}
}
render() {
const { hasError } = this.state;
// Cache the root HTML content on the first render
if (typeof window !== 'undefined' && !this.rootHtml) {
this.rootHtml = document.documentElement.innerHTML;
this.htmlAttributes = getDomNodeAttributes(document.documentElement);
}
if (hasError) {
// Render the current HTML content without hydration
return /*#__PURE__*/ _jsx("html", {
ref: this.htmlRef,
suppressHydrationWarning: true,
dangerouslySetInnerHTML: {
__html: this.rootHtml
}
});
}
return this.props.children;
}
constructor(props){
super(props);
this.state = {
hasError: false
};
this.rootHtml = '';
this.htmlAttributes = {};
this.htmlRef = /*#__PURE__*/ createRef();
}
}
export default GracefulDegradeBoundary;
//# sourceMappingURL=graceful-degrade-boundary.js.map