🚑 Resize iframe with ResizeObserver

packages/@shared/util.ts

@@ -97,12 +97,21 @@ export function addDefaultStyles() {
   document.head.prepend(style)
 }
 
-export function createErrorMessageListener(resetSession: () => void) {
+export function createErrorMessageListener(
+  resetSession: () => void,
+  iframe: HTMLIFrameElement | null = null
+) {
   return function (event: MessageEvent) {
     if (event.origin !== GISCUS_ORIGIN) return
 
     const { data } = event
-    if (!(typeof data === 'object' && data?.giscus?.error)) return
+    if (!(typeof data === 'object' && data.giscus)) return
+
+    if (iframe && data.giscus.resizeHeight) {
+      iframe.style.height = `${data.giscus.resizeHeight}px`
+    }
+
+    if (!data.giscus.error) return
 
     const message: string = data.giscus.error
 

packages/react/lib/Giscus.tsx

@@ -5,10 +5,8 @@ import {
   createErrorMessageListener,
   formatError,
   getIframeSrc,
-  GISCUS_ORIGIN,
   GISCUS_SESSION_KEY
 } from '@shared/util'
-import iFrameResizer from 'iframe-resizer'
 
 function GiscusClient(props: GiscusProps) {
   const [session, setSession] = useState('')
@@ -43,21 +41,14 @@ function GiscusClient(props: GiscusProps) {
   useEffect(addDefaultStyles, [])
 
   useEffect(() => {
-    const listener = createErrorMessageListener(() => setSession(''))
+    const listener = createErrorMessageListener(
+      () => setSession(''),
+      iframe.current
+    )
     window.addEventListener('message', listener)
     return () => window.removeEventListener('message', listener)
   }, [])
 
-  useEffect(() => {
-    if (!iframe.current) return
-    iframe.current.addEventListener('load', () =>
-      iFrameResizer.iframeResizer(
-        { checkOrigin: [GISCUS_ORIGIN] },
-        iframe.current as HTMLIFrameElement
-      )
-    )
-  }, [src])
-
   return (
     <div className="giscus">
       <iframe

packages/react/package.json

@@ -61,9 +61,7 @@
   ],
   "homepage": "https://github.com/giscus/giscus-component#readme",
   "bugs": "https://github.com/giscus/giscus-component/issues",
-  "dependencies": {
-    "iframe-resizer": "^4.3.2"
-  },
+  "dependencies": {},
   "publishConfig": {
     "access": "public"
   }

packages/svelte/lib/Giscus.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte'
+  import { onMount } from 'svelte'
 
   import {
     addDefaultStyles,
     createErrorMessageListener,
     formatError,
     getIframeSrc,
-    GISCUS_ORIGIN,
     GISCUS_SESSION_KEY
   } from '../../@shared/util'
   import type { GiscusProps } from '../../@shared/types'
-  import iFrameResizer from 'iframe-resizer'
 
   export let repo: GiscusProps['repo']
   export let repoId: GiscusProps['repoId']
@@ -37,7 +35,7 @@
     reactionsEnabled,
     emitMetadata,
     inputPosition,
-    session,
+    session
   })
 
   onMount(() => {
@@ -63,32 +61,15 @@
 
   onMount(addDefaultStyles)
 
-  const listener = createErrorMessageListener(() => (session = ''))
-  onMount(() => window.addEventListener('message', listener))
-  onDestroy(() => window.removeEventListener('message', listener))
-
-  let iframe:
-    | HTMLIFrameElement
-    | undefined
-    | { iFrameResizer: { removeListeners: () => void } }
+  let iframe: HTMLIFrameElement
 
   onMount(() => {
-    if (!iframe) return
-    iframe = iframe as HTMLIFrameElement
-    iframe.addEventListener('load', () =>
-      iFrameResizer.iframeResizer(
-        { checkOrigin: [GISCUS_ORIGIN] },
-        iframe as HTMLIFrameElement
-      )
-    )
-  })
-
-  onDestroy(() => {
-    if (iframe && 'iFrameResizer' in iframe)
-      iframe?.iFrameResizer?.removeListeners()
+    const listener = createErrorMessageListener(() => (session = ''), iframe)
+    window.addEventListener('message', listener)
+    return () => window.removeEventListener('message', listener)
   })
 </script>
 
 <div class="giscus">
-  <iframe title="Comments" class="giscus-frame" src={src} bind:this={iframe} />
+  <iframe title="Comments" class="giscus-frame" {src} bind:this={iframe} />
 </div>

packages/svelte/package.json

@@ -27,8 +27,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11",
     "@tsconfig/svelte": "^2.0.1",
-    "@types/iframe-resizer": "^3.5.9",
-    "iframe-resizer": "^4.3.2",
     "svelte": "^3.37.0",
     "svelte-check": "^2.1.0",
     "svelte-preprocess": "^4.7.2",

packages/vue/lib/Giscus.tsx

@@ -20,10 +20,8 @@ import {
   createErrorMessageListener,
   formatError,
   getIframeSrc,
-  GISCUS_ORIGIN,
   GISCUS_SESSION_KEY
 } from '@shared/util'
-import iFrameResizer from 'iframe-resizer'
 
 const Giscus = defineComponent({
   props: {
@@ -93,28 +91,15 @@ const Giscus = defineComponent({
 
     onMounted(addDefaultStyles)
 
-    const listener = createErrorMessageListener(() => (session.value = ''))
-    onMounted(() => window.addEventListener('message', listener))
-    onUnmounted(() => window.removeEventListener('message', listener))
-
-    const iframe = ref<
-      HTMLIFrameElement | { iFrameResizer: { removeListeners: () => void } }
-    >()
+    const iframe = ref<HTMLIFrameElement>()
 
     onMounted(() => {
-      if (!iframe.value) return
-      iframe.value = iframe.value as HTMLIFrameElement
-      iframe.value.addEventListener('load', () =>
-        iFrameResizer.iframeResizer(
-          { checkOrigin: [GISCUS_ORIGIN] },
-          iframe.value as HTMLIFrameElement
-        )
+      const listener = createErrorMessageListener(
+        () => (session.value = ''),
+        iframe.value
       )
-    })
-
-    onUnmounted(() => {
-      if (iframe.value && 'iFrameResizer' in iframe.value)
-        iframe.value?.iFrameResizer?.removeListeners()
+      window.addEventListener('message', listener)
+      onUnmounted(() => window.removeEventListener('message', listener))
     })
 
     return () => (

packages/vue/package.json

@@ -29,11 +29,9 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/iframe-resizer": "^3.5.9",
     "@vitejs/plugin-vue": "^1.2.4",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.1.4",
-    "iframe-resizer": "^4.3.2",
     "vue": "^3.1.4",
     "vue-tsc": "^0.2.0"
   },

yarn.lock

@@ -1184,11 +1184,6 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74"
   integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==
 
-"@types/iframe-resizer@^3.5.9":
-  version "3.5.9"
-  resolved "https://registry.yarnpkg.com/@types/iframe-resizer/-/iframe-resizer-3.5.9.tgz#75c4cda33cee5f4da4c7693a0d9ad1ccb0c5ee98"
-  integrity sha512-RQUBI75F+uXruB95BFpC/8V8lPgJg4MQ6HxOCtAZYBB/h0FNCfrFfb4I+u2pZJIV7sKeszZbFqy1UnGeBMrvsA==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -3652,11 +3647,6 @@ icss-utils@^5.0.0:
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
-iframe-resizer@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.2.tgz#42dd88345d18b9e377b6044dddb98c664ab0ce6b"
-  integrity sha512-gOWo2hmdPjMQsQ+zTKbses08mDfDEMh4NneGQNP4qwePYujY1lguqP6gnbeJkf154gojWlBhIltlgnMfYjGHWA==
-
 ignore-walk@^3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.4.tgz#c9a09f69b7c7b479a5d74ac1a3c0d4236d2a6335"