Remove event listeners when no longer needed to prevent memory leaks
window.addEventListener('message', function (event) {
1/**2 * Supports render.html, a piece of the hydration fixture. See /hydration3 */45'use strict';67(function () {8 var Fixture = null;9 var output = document.getElementById('output');10 var status = document.getElementById('status');11 var hydrate = document.getElementById('hydrate');12 var reload = document.getElementById('reload');13 var renders = 0;14 var failed = false;1516 var needsReactDOM = getBooleanQueryParam('needsReactDOM');17 var needsCreateElement = getBooleanQueryParam('needsCreateElement');1819 function unmountComponent(node) {20 // ReactDOM was moved into a separate package in 0.1421 if (needsReactDOM) {22 ReactDOM.unmountComponentAtNode(node);23 } else if (React.unmountComponentAtNode) {24 React.unmountComponentAtNode(node);25 } else {26 // Unmounting for React 0.4 and lower27 React.unmountAndReleaseReactRootNode(node);28 }29 }3031 function createElement(value) {32 // React.createElement replaced function invocation in 0.1233 if (needsCreateElement) {34 return React.createElement(value);35 } else {36 return value();37 }38 }3940 function getQueryParam(key) {41 var pattern = new RegExp(key + '=([^&]+)(&|$)');42 var matches = window.location.search.match(pattern);4344 if (matches) {45 return decodeURIComponent(matches[1]);46 }4748 handleError(new Error('No key found for' + key));49 }5051 function getBooleanQueryParam(key) {52 return getQueryParam(key) === 'true';53 }5455 function setStatus(label) {56 status.innerHTML = label;57 }5859 function prerender() {60 setStatus('Generating markup');6162 return Promise.resolve()63 .then(function () {64 const element = createElement(Fixture);6566 // Server rendering moved to a separate package along with ReactDOM67 // in 0.14.068 if (needsReactDOM) {69 return ReactDOMServer.renderToString(element);70 }7172 // React.renderComponentToString was renamed in 0.1273 if (React.renderToString) {74 return React.renderToString(element);75 }7677 // React.renderComponentToString became synchronous in React 0.9.078 if (React.renderComponentToString.length === 1) {79 return React.renderComponentToString(element);80 }8182 // Finally, React 0.4 and lower emits markup in a callback83 return new Promise(function (resolve) {84 React.renderComponentToString(element, resolve);85 });86 })87 .then(function (string) {88 output.innerHTML = string;89 setStatus('Markup only (No React)');90 })91 .catch(handleError);92 }9394 function render() {95 setStatus('Hydrating');9697 var element = createElement(Fixture);9899 // ReactDOM was split out into another package in 0.14100 if (needsReactDOM) {101 // Hydration changed to a separate method in React 16102 if (ReactDOM.hydrate) {103 ReactDOM.hydrate(element, output);104 } else {105 ReactDOM.render(element, output);106 }107 } else if (React.render) {108 // React.renderComponent was renamed in 0.12109 React.render(element, output);110 } else {111 React.renderComponent(element, output);112 }113114 setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');115 renders += 1;116 hydrate.innerHTML = 'Re-render';117 }118119 function handleError(error) {120 console.log(error);121 failed = true;122 setStatus('Javascript Error');123 output.innerHTML = error;124 }125126 function loadScript(src) {127 return new Promise(function (resolve, reject) {128 var script = document.createElement('script');129 script.async = true;130 script.src = src;131132 script.onload = resolve;133 script.onerror = function (error) {134 reject(new Error('Unable to load ' + src));135 };136137 document.body.appendChild(script);138 });139 }140141 function injectFixture(src) {142 Fixture = new Function(src + '\nreturn Fixture;')();143144 if (typeof Fixture === 'undefined') {145 setStatus('Failed');146 output.innerHTML = 'Please name your root component "Fixture"';147 } else {148 prerender().then(function () {149 if (getBooleanQueryParam('hydrate')) {150 render();151 }152 });153 }154 }155156 function reloadFixture(code) {157 renders = 0;158 unmountComponent(output);159 injectFixture(code);160 }161162 window.onerror = handleError;163164 reload.onclick = function () {165 window.location.reload();166 };167168 hydrate.onclick = render;169170 loadScript(getQueryParam('reactPath'))171 .then(function () {172 if (needsReactDOM) {173 return Promise.all([174 loadScript(getQueryParam('reactDOMPath')),175 loadScript(getQueryParam('reactDOMServerPath')),176 ]);177 }178 })179 .then(function () {180 if (failed) {181 return;182 }183184 window.addEventListener('message', function (event) {185 var data = JSON.parse(event.data);186187 switch (data.type) {188 case 'code':189 reloadFixture(data.payload);190 break;191 default:192 throw new Error(193 'Renderer Error: Unrecognized message "' + data.type + '"'194 );195 }196 });197198 window.parent.postMessage(JSON.stringify({type: 'ready'}), '*');199 })200 .catch(handleError);201})();
Code quality findings 27
Use let or const to avoid scope issues and hoisting
var Fixture = null;
Use let or const to avoid scope issues and hoisting
var output = document.getElementById('output');
Ensure the element exists to avoid null errors
var output = document.getElementById('output');
Use let or const to avoid scope issues and hoisting
var status = document.getElementById('status');
Ensure the element exists to avoid null errors
var status = document.getElementById('status');
Use let or const to avoid scope issues and hoisting
var hydrate = document.getElementById('hydrate');
Use let or const to avoid scope issues and hoisting
var reload = document.getElementById('reload');
Use let or const to avoid scope issues and hoisting
var renders = 0;
Use let or const to avoid scope issues and hoisting
var failed = false;
Use let or const to avoid scope issues and hoisting
var needsReactDOM = getBooleanQueryParam('needsReactDOM');
Use let or const to avoid scope issues and hoisting
var needsCreateElement = getBooleanQueryParam('needsCreateElement');
Use let or const to avoid scope issues and hoisting
var pattern = new RegExp(key + '=([^&]+)(&|$)');
Use let or const to avoid scope issues and hoisting
var matches = window.location.search.match(pattern);
Use strict equality (===) to prevent type coercion bugs
return getQueryParam(key) === 'true';
Chain Promises properly to avoid callback hell
.then(function () {
Use strict equality (===) to prevent type coercion bugs
if (React.renderComponentToString.length === 1) {
Chain Promises properly to avoid callback hell
.then(function (string) {
Use let or const to avoid scope issues and hoisting
var element = createElement(Fixture);
Remove debugging statements or use a logging library
console.log(error);
Use let or const to avoid scope issues and hoisting
var script = document.createElement('script');
Use strict equality (===) to prevent type coercion bugs
if (typeof Fixture === 'undefined') {
Be cautious with typeof; it has limitations (e.g., typeof null === 'object')
if (typeof Fixture === 'undefined') {
Chain Promises properly to avoid callback hell
prerender().then(function () {
Chain Promises properly to avoid callback hell
.then(function () {
Chain Promises properly to avoid callback hell
.then(function () {
Use let or const to avoid scope issues and hoisting
var data = JSON.parse(event.data);
Security findings 3
Use textContent or DOM methods to prevent XSS vulnerabilities
hydrate.innerHTML = 'Re-render';
Similar to eval(); avoid due to security risks
Fixture = new Function(src + '\nreturn Fixture;')();
Use textContent or DOM methods to prevent XSS vulnerabilities
output.innerHTML = 'Please name your root component "Fixture"';