modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix iframe resizing (#19)

Browse source 
* reshuffle build / start scripts

* fix resize logic

* prettier

* extract RESOURCE_URI_META_KEY constant

* Update message-transport.ts

* Update package.json
This commit is contained in:
Olivier Chafik 2025-11-25 02:39:33 +00:00 • committed by GitHub
commit 3df49c38dc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 38 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/app.ts
View file

@ -41,6 +41,8 @@ import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
export { PostMessageTransport } from "./message-transport.js";
export * from "./types";
export const RESOURCE_URI_META_KEY = "ui/resourceUri";
type AppOptions = ProtocolOptions & {
autoResize?: boolean;
};
@ -166,30 +168,20 @@ export class App extends Protocol<Request, Notification, Result> {
}
setupSizeChangeNotifications() {
let scheduled = false;
const sendBodySizeChange = () => {
let rafId: number | null = null;
// Debounce using requestAnimationFrame to avoid duplicate messages
// when both documentElement and body fire resize events
if (rafId !== null) {
cancelAnimationFrame(rafId);
if (scheduled) {
return;
}
rafId = requestAnimationFrame(() => {
const { body, documentElement: html } = document;
const bodyStyle = getComputedStyle(body);
const htmlStyle = getComputedStyle(html);
const width = body.scrollWidth;
const height =
body.scrollHeight +
(parseFloat(bodyStyle.borderTop) || 0) +
(parseFloat(bodyStyle.borderBottom) || 0) +
(parseFloat(htmlStyle.borderTop) || 0) +
(parseFloat(htmlStyle.borderBottom) || 0);
scheduled = true;
requestAnimationFrame(() => {
scheduled = false;
const rect = (
document.body.parentElement ?? document.body
).getBoundingClientRect();
const width = Math.ceil(rect.width);
const height = Math.ceil(rect.height);
this.sendSizeChange({ width, height });
rafId = null;
});
};