@remotion/studio
Version:
APIs for interacting with the Remotion Studio
122 lines (121 loc) • 4.36 kB
JavaScript
;
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
Object.defineProperty(exports, "__esModule", { value: true });
exports.enableHotMiddleware = void 0;
const studio_shared_1 = require("@remotion/studio-shared");
const process_update_1 = require("./process-update");
function createReporter() {
const styles = {
errors: 'color: #ff0000;',
warnings: 'color: #999933;',
};
let previousProblems = null;
function log(type, obj) {
if (obj.action === 'building') {
console.log('[Fast Refresh] Building');
return;
}
const newProblems = obj[type]
.map((msg) => {
return (0, studio_shared_1.stripAnsi)(msg);
})
.join('\n');
if (previousProblems === newProblems) {
return;
}
previousProblems = newProblems;
const style = styles[type];
const name = obj.name ? "'" + obj.name + "' " : '';
const title = '[Fast Refresh] bundle ' + name + 'has ' + obj[type].length + ' ' + type;
// NOTE: console.warn or console.error will print the stack trace
// which isn't helpful here, so using console.log to escape it.
if (console.group && console.groupEnd) {
console.group('%c' + title, style);
console.log('%c' + newProblems, style);
console.groupEnd();
}
else {
console.log('%c' + title + '\n\t%c' + newProblems.replace(/\n/g, '\n\t'), style + 'font-weight: bold;', style + 'font-weight: normal;');
}
}
return {
cleanProblemsCache() {
previousProblems = null;
},
problems(type, obj) {
if (studio_shared_1.hotMiddlewareOptions.warn) {
log(type, obj);
}
return true;
},
success: () => undefined,
};
}
function processMessage(obj) {
var _a, _b;
switch (obj.action) {
case 'building':
(_a = window.remotion_isBuilding) === null || _a === void 0 ? void 0 : _a.call(window);
break;
case 'sync':
case 'built': {
let applyUpdate = true;
if (obj.errors.length > 0) {
if (reporter)
reporter.problems('errors', obj);
applyUpdate = false;
}
else if (obj.warnings.length > 0) {
if (reporter) {
const overlayShown = reporter.problems('warnings', obj);
applyUpdate = overlayShown;
}
}
else if (reporter) {
reporter.cleanProblemsCache();
reporter.success();
}
if (applyUpdate) {
(_b = window.remotion_finishedBuilding) === null || _b === void 0 ? void 0 : _b.call(window);
(0, process_update_1.processUpdate)(obj.hash, obj.modules, studio_shared_1.hotMiddlewareOptions);
}
break;
}
default:
break;
}
}
let reporter;
const singletonKey = '__webpack_hot_middleware_reporter__';
const enableHotMiddleware = () => {
if (typeof window !== 'undefined') {
if (!window[singletonKey]) {
window[singletonKey] = createReporter();
}
reporter = window[singletonKey];
}
window.__remotion_processHmrEvent = (hmrEvent) => {
processMessage(hmrEvent);
};
// Create a standalone SSE listener for HMR events immediately.
// This is needed because lazy-compiled modules require HMR updates
// to deliver compiled code, but the React-managed /events SSE
// (in PreviewServerConnection) only connects after React mounts —
// which itself depends on lazy modules loading first.
if (typeof window !== 'undefined' && typeof EventSource !== 'undefined') {
const source = new EventSource('/events');
source.addEventListener('message', (event) => {
try {
const parsed = JSON.parse(event.data);
if (parsed.type === 'hmr') {
processMessage(parsed.hmrEvent);
}
}
catch (_a) {
// Ignore parse errors
}
});
}
};
exports.enableHotMiddleware = enableHotMiddleware;