Replace iFrameResizer with MutationObserver

client.ts

@@ -6,20 +6,6 @@ function formatError(message: string) {
   return `[giscus] An error occurred. Error message: "${message}".`;
 }
 
-// Set up iframeResizer
-declare let iFrameResize: (options: Record<string, unknown>) => void;
-
-function loadScript(url: string, callback: VoidFunction) {
-  const target = document.createElement('script');
-  target.setAttribute('src', url);
-  target.onload = callback;
-  script.insertAdjacentElement('beforeend', target);
-}
-
-loadScript('https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.min.js', () =>
-  iFrameResize({ checkOrigin: [giscusOrigin], resizeFrom: 'child' }),
-);
-
 // Set up iframe src URL and params
 const url = new URL(location.href);
 let session = url.searchParams.get('giscus');
@@ -124,15 +110,7 @@ if (!existingContainer) {
 }
 const suggestion = `Please consider reporting this error at https://github.com/laymonage/giscus/issues/new.`;
 
-// Listen to error messages
-window.addEventListener('message', (event) => {
-  if (event.origin !== giscusOrigin) return;
-
-  const { data } = event;
-  if (!(typeof data === 'object' && data?.giscus?.error)) return;
-
-  const message: string = data.giscus.error;
-
+function handleError(message: string) {
   if (message.includes('Bad credentials') || message.includes('Invalid state value')) {
     // Might be because token is expired or other causes
     if (localStorage.getItem(GISCUS_SESSION_KEY) !== null) {
@@ -152,4 +130,19 @@ window.addEventListener('message', (event) => {
   } else {
     console.error(`${formatError(message)} ${suggestion}`);
   }
+}
+
+// Listen to messages
+window.addEventListener('message', (event) => {
+  if (event.origin !== giscusOrigin) return;
+
+  const { data } = event;
+  if (!(typeof data === 'object' && data.giscus)) return;
+
+  if ('error' in data.giscus) {
+    handleError(data.giscus.error);
+  }
+  if ('resize' in data.giscus) {
+    iframeElement.style.height = `${data.giscus.resize}px`;
+  }
 });

components/Widget.tsx

@@ -54,6 +54,24 @@ export default function Widget({
     }
   }, [handleError, session, token]);
 
+  useEffect(() => {
+    if (!origin) return;
+
+    const observer = new MutationObserver(() =>
+      window.parent.postMessage(
+        { giscus: { resize: document.documentElement.offsetHeight } },
+        origin,
+      ),
+    );
+
+    observer.observe(document.querySelector('#__next'), {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+  }, [origin]);
+
   const ready = (!session || token) && repo && (term || number);
 
   return ready ? (

pages/widget.tsx

@@ -56,12 +56,6 @@ export default function WidgetPage() {
           reactionsEnabled={reactionsEnabled}
         />
       </main>
-
-      <script
-        src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"
-        integrity="sha512-qw2bX9KUhi7HLuUloyRsvxRlWJvj0u0JWVegc5tf7qsw47T0pwXZIk1Kyc0utTH3NlrpHtLa4HYTVUyHBr9Ufg=="
-        crossOrigin="anonymous"
-      ></script>
     </>
   );
 }