private TempFile MakeTempFile()
{
var tempFile = TempFile.WithExtension("htm");
tempFile.Detach(); // the browser control will clean it up
var props = Props == null ? "{}" : JsonConvert.SerializeObject(Props);
if (_javascriptBundleName == null)
{
throw new ArgumentNullException("React Control needs a _javascriptBundleName");
}
var bundleNameWithExtension = _javascriptBundleName;
if (!bundleNameWithExtension.EndsWith(".js"))
{
bundleNameWithExtension += ".js";
}
// We insert this as the initial background color of the HTML element
// to prevent a flash of white while the React is rendering.
var backColor = MiscUtils.ColorToHtmlCode(BackColor);
// The 'body' height: auto rule keeps a winforms tab that only contains a ReactControl
// from unnecessary scrolling.
RobustFile.WriteAllText(tempFile.Path, $@"<!DOCTYPE html>
<html style='height:100%'>
<head>
<meta charset = 'UTF-8' />
<script src = '/commonBundle.js' ></script>
<script src = '/{bundleNameWithExtension}'></script>
<script>
window.onload = () => {{
const rootDiv = document.getElementById('reactRoot');
window.wireUpRootComponentFromWinforms(rootDiv, {props});
}};
</script>
</head>
<body style='margin:0; height:100%; display: flex; flex: 1; flex-direction: column; background-color:{backColor};'>
<div id='reactRoot' style='height:100%'>Javascript should have replaced this. Make sure that the javascript bundle '{bundleNameWithExtension}' includes a single call to WireUpForWinforms()</div>
</body>
</html>" );
return(tempFile);
}