Skip to content

Commit

Permalink
Repairs hot reload for monaco editor playground.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hediet
hediet committed Jul 1, 2024
1 parent 01a7740 commit 3652f9c
Showing 1 changed file with 169 additions and 43 deletions.
212 changes: 169 additions & 43 deletions scripts/playground-server.ts
View file
<
Original file line number Diff line number Diff line change
Expand Up @@ -223,10 +223,10 @@ class DirWatcher {
function handleGetFileChangesRequest(watcher: DirWatcher, fileServer: FileServer, moduleIdMapper: SimpleModuleIdPathMapper): ChainableRequestHandler {
return async (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
const d = watcher.onDidChange(fsPath => {
const d = watcher.onDidChange((fsPath, newContent) => {
const path = fileServer.filePathToUrlPath(fsPath);
if (path) {
res.write(JSON.stringify({ changedPath: path, moduleId: moduleIdMapper.getModuleId(fsPath) }) + '\n');
res.write(JSON.stringify({ changedPath: path, moduleId: moduleIdMapper.getModuleId(fsPath), newContent }) + '\n');
}
});
res.on('close', () => d.dispose());
Expand Down Expand Up @@ -262,56 +262,182 @@ function makeLoaderJsHotReloadable(loaderJsCode: string, fileChangesUrl: URL): s
buffer += new TextDecoder().decode(value);
const lines = buffer.split('\n');
buffer = lines.pop()!;

const changes: { relativePath: string; config: HotReloadConfig | undefined; path: string; newContent: string }[] = [];

for (const line of lines) {
const data = JSON.parse(line);
let handled = false;
if (data.changedPath.endsWith('.css')) {
if (typeof document !== 'undefined') {
console.log('css changed', data.changedPath);
const styleSheet = [...document.querySelectorAll(`link[rel='stylesheet']`)].find((l: any) => new URL(l.href, document.location.href).pathname.endsWith(data.changedPath)) as any;
if (styleSheet) {
styleSheet.href = styleSheet.href.replace(/\?.*/, '') + '?' + Date.now();
}
}
handled = true;
} else if (data.changedPath.endsWith('.js') && data.moduleId) {
console.log('js changed', data.changedPath);
const moduleId = ___globalModuleManager._moduleIdProvider.getModuleId(data.moduleId);
if (___globalModuleManager._modules2[moduleId]) {
const srcUrl = ___globalModuleManager._config.moduleIdToPaths(data.moduleId);
const newSrc = await (await fetch(srcUrl)).text();
(new Function('define', newSrc))(function (deps, callback) { // CodeQL [SM01632] This code is only executed during development (as part of the dev-only playground-server). It is required for the hot-reload functionality.
const oldModule = ___globalModuleManager._modules2[moduleId];
delete ___globalModuleManager._modules2[moduleId];

___globalModuleManager.defineModule(data.moduleId, deps, callback);
const newModule = ___globalModuleManager._modules2[moduleId];
const oldExports = { ...oldModule.exports };

Object.assign(oldModule.exports, newModule.exports);
newModule.exports = oldModule.exports;

handled = true;

for (const cb of [...globalThis.$hotReload_deprecateExports]) {
cb(oldExports, newModule.exports);
}

if (handled) {
console.log('hot reloaded', data.moduleId);
}
});
}
}

if (!handled) { reloadFn(); }
const relativePath = data.changedPath.replace(/\\/g, '/').split('/out/')[1];
changes.push({ config: {}, path: data.changedPath, relativePath, newContent: data.newContent });
}

const result = handleChanges(changes, 'playground-server');
if (result.reloadFailedJsFiles.length > 0) {
reloadFn();
}
}
}).catch(err => {
console.error(err);
setTimeout(() => $watchChanges(fileChangesUrl), 1000);
});


function handleChanges(changes: {
relativePath: string;
config: HotReloadConfig | undefined;
path: string;
newContent: string;
}[], debugSessionName: string) {
// This function is stringified and injected into the debuggee.

const hotReloadData: { count: number; originalWindowTitle: any; timeout: any; shouldReload: boolean } = globalThis.$hotReloadData || (globalThis.$hotReloadData = { count: 0, messageHideTimeout: undefined, shouldReload: false });

const reloadFailedJsFiles: { relativePath: string; path: string }[] = [];

for (const change of changes) {
handleChange(change.relativePath, change.path, change.newContent, change.config);
}

return { reloadFailedJsFiles };

function handleChange(relativePath: string, path: string, newSrc: string, config: any) {
if (relativePath.endsWith('.css')) {
handleCssChange(relativePath);
} else if (relativePath.endsWith('.js')) {
handleJsChange(relativePath, path, newSrc, config);
}
}

function handleCssChange(relativePath: string) {
if (typeof document === 'undefined') {
return;
}

const styleSheet = (([...document.querySelectorAll(`link[rel='stylesheet']`)] as HTMLLinkElement[]))
.find(l => new URL(l.href, document.location.href).pathname.endsWith(relativePath));
if (styleSheet) {
setMessage(`reload ${formatPath(relativePath)} - ${new Date().toLocaleTimeString()}`);
console.log(debugSessionName, 'css reloaded', relativePath);
styleSheet.href = styleSheet.href.replace(/\?.*/, '') + '?' + Date.now();
} else {
setMessage(`could not reload ${formatPath(relativePath)} - ${new Date().toLocaleTimeString()}`);
console.log(debugSessionName, 'ignoring css change, as stylesheet is not loaded', relativePath);
}
}


function handleJsChange(relativePath: string, path: string, newSrc: string, config: any) {
const moduleIdStr = trimEnd(relativePath, '.js');

const requireFn: any = globalThis.require;
const moduleManager = (requireFn as any).moduleManager;
if (!moduleManager) {
console.log(debugSessionName, 'ignoring js change, as moduleManager is not available', relativePath);
return;
}

const moduleId = moduleManager._moduleIdProvider.getModuleId(moduleIdStr);
const oldModule = moduleManager._modules2[moduleId];

if (!oldModule) {
console.log(debugSessionName, 'ignoring js change, as module is not loaded', relativePath);
return;
}

// Check if we can reload
const g: GlobalThisAddition = globalThis as any;

// A frozen copy of the previous exports
const oldExports = Object.freeze({ ...oldModule.exports });
const reloadFn = g.$hotReload_applyNewExports?.({ oldExports, newSrc, config });

if (!reloadFn) {
console.log(debugSessionName, 'ignoring js change, as module does not support hot-reload', relativePath);
hotReloadData.shouldReload = true;

reloadFailedJsFiles.push({ relativePath, path });

setMessage(`hot reload not supported for ${formatPath(relativePath)} - ${new Date().toLocaleTimeString()}`);
return;
}

// Eval maintains source maps
function newScript(/* this parameter is used by newSrc */ define) {
// eslint-disable-next-line no-eval
eval(newSrc); // CodeQL [SM01632] This code is only executed during development. It is required for the hot-reload functionality.
}

newScript(/* define */ function (deps, callback) {
// Evaluating the new code was successful.

// Redefine the module
delete moduleManager._modules2[moduleId];
moduleManager.defineModule(moduleIdStr, deps, callback);
const newModule = moduleManager._modules2[moduleId];


// Patch the exports of the old module, so that modules using the old module get the new exports
Object.assign(oldModule.exports, newModule.exports);
// We override the exports so that future reloads still patch the initial exports.
newModule.exports = oldModule.exports;

const successful = reloadFn(newModule.exports);
if (!successful) {
hotReloadData.shouldReload = true;
setMessage(`hot reload failed ${formatPath(relativePath)} - ${new Date().toLocaleTimeString()}`);
console.log(debugSessionName, 'hot reload was not successful', relativePath);
return;
}

console.log(debugSessionName, 'hot reloaded', moduleIdStr);
setMessage(`successfully reloaded ${formatPath(relativePath)} - ${new Date().toLocaleTimeString()}`);
});
}

function setMessage(message: string) {
const domElem = (document.querySelector('.titlebar-center .window-title')) as HTMLDivElement | undefined;
if (!domElem) { return; }
if (!hotReloadData.timeout) {
hotReloadData.originalWindowTitle = domElem.innerText;
} else {
clearTimeout(hotReloadData.timeout);
}
if (hotReloadData.shouldReload) {
message += ' (manual reload required)';
}

domElem.innerText = message;
hotReloadData.timeout = setTimeout(() => {
hotReloadData.timeout = undefined;
// If wanted, we can restore the previous title message
// domElem.replaceChildren(hotReloadData.originalWindowTitle);
}, 5000);
}

function formatPath(path: string): string {
const parts = path.split('/');
parts.reverse();
let result = parts[0];
parts.shift();
for (const p of parts) {
if (result.length + p.length > 40) {
break;
}