Feature/vscode-theming#833
Conversation
| @@ -0,0 +1,33 @@ | |||
| import { isVSCodeEnv } from '#common/utils/env.utils.ts'; | |||
There was a problem hiding this comment.
import { isVSCodeEnv, onMessage } from '#common/utils';
| if (type && IFRAME_READY_TYPES.has(type)) sendTheme(); | ||
| }; | ||
| window.addEventListener('message', onIframeReady); | ||
|
|
There was a problem hiding this comment.
MutationObserver dispara sendTheme() en cada mutación de atributo, sin debounce. Un cambio de tema en VS Code puede generar varias mutaciones seguidas enviando el payload al iframe repetidamente. Sugerencia: agrupar con requestAnimationFrame:
let rafId = 0;
const sendThemeDebounced = () => {
cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(sendTheme);
};
const observer = new MutationObserver(sendThemeDebounced);| import { useEffect } from 'react'; | ||
|
|
||
| const CSS_VAR_MAP: Record<keyof ThemePayload, readonly string[]> = { | ||
| background: ['--primary-100', '--primary-500', '--primary-200'], |
There was a problem hiding this comment.
background se mapea al mismo valor en tres CSS vars distintas: --primary-100, --primary-500, --primary-200. Normalmente representan shades distintos del color primario; igualarlos puede producir una UI sin contraste en modo VS Code. Si es un placeholder intencional, añadir un comentario que lo indique.
| document.body.appendChild(iframe); | ||
|
|
||
| setupBridge(iframe, appOrigin); | ||
| setupThemeSync(iframe, appOrigin); |
There was a problem hiding this comment.
El retorno de setupThemeSync (función de cleanup que elimina el listener y desconecta el MutationObserver) se descarta. Para un webview cuyo ciclo de vida es el de la página es tolerable, pero es preferible guardar la referencia para hacer explícita la intención:
const _cleanupTheme = setupThemeSync(iframe, appOrigin);| root.style.setProperty(cssVar, value); | ||
| } | ||
| } | ||
| if (theme.background) document.body.style.backgroundColor = theme.background; |
There was a problem hiding this comment.
document.body.style.backgroundColor y document.body.style.color se establecen como estilos inline. Mezclarlo con el sistema de CSS vars puede causar conflictos de especificidad. Preferir document.documentElement.style.setProperty para mantener todo en el mismo mecanismo, igual que se hace con el resto de CSS vars en el bucle de arriba.
| import classes from './main.module.css'; | ||
|
|
||
| import { isHeadlessEnv } from '#common/utils/env.utils.ts'; | ||
| import { isHeadlessEnv, isVSCodeEnv } from '#common/utils/env.utils.ts'; |
There was a problem hiding this comment.
| import { isHeadlessEnv, isVSCodeEnv } from '#common/utils/env.utils.ts'; | |
| import { isHeadlessEnv, isVSCodeEnv } from '#common/utils'; |
nasdan
merged commit 2a44175
into
feature/#812-implement-vscode-ext-and-mcp
2 participants
No description provided.