Check for duplicate iframe IDs

packages/child/console.js

@@ -2,7 +2,7 @@ import acg, { NORMAL } from 'auto-console-group'
 
 import { BOLD, LABEL } from '../common/consts'
 import deprecate from '../common/deprecate'
-import formatAdvise from '../common/format-advise'
+import createFormatAdvise from '../common/format-advise'
 import { esModuleInterop, id as identity } from '../common/utils'
 
 let enabled = true
@@ -51,7 +51,8 @@ export const {
   warn,
 } = childConsole
 
-export const advise = (msg) => childConsole.warn(formatAdvise(identity)(msg))
+const formatAdvise = createFormatAdvise(identity)
+export const advise = (...args) => childConsole.warn(...args.map(formatAdvise))
 
 const deprecateAdvise = deprecate((id, msg) => advise(msg))
 export const deprecateMethod = deprecateAdvise('Method')

packages/child/observers/utils.js

@@ -1,5 +1,6 @@
 import { HIGHLIGHT, NORMAL } from 'auto-console-group'
 
+import { NEW_LINE } from '../../common/consts'
 import { debug, error, info } from '../console'
 
 export const metaCreateDebugObserved =
@@ -9,7 +10,7 @@ export const metaCreateDebugObserved =
     if (observed.size > 0) {
       debug(
         `${type}Observer ${text}:`,
-        ...Array.from(observed).flatMap((node) => ['\n', node]),
+        ...Array.from(observed).flatMap((node) => [NEW_LINE, node]),
       )
     }
   }
@@ -21,7 +22,7 @@ export const metaCreateErrorObserved =
     if (observed.size > 0) {
       error(
         `${type}Observer ${text}:`,
-        ...Array.from(observed).flatMap((node) => ['\n', node]),
+        ...Array.from(observed).flatMap((node) => [NEW_LINE, node]),
       )
     }
   }

packages/common/consts.js

@@ -43,6 +43,7 @@ export const OFFSET = 'offset'
 export const OFFSET_HEIGHT = 'offsetHeight'
 export const OFFSET_SIZE = 'offsetSize'
 export const SCROLL = 'scroll'
+export const NEW_LINE = '\n'
 
 export const HIDDEN = 'hidden'
 export const VISIBLE = 'visible'
@@ -142,3 +143,6 @@ export const IGNORE_TAGS = new Set([
   'wbr',
   'nobr',
 ])
+
+export const REMOVED_NEXT_VERSION =
+  'Use of the old name will be removed in a future version of <i>iframe-resizer</>.'

packages/common/format-advise.js

@@ -1,13 +1,21 @@
+import { NEW_LINE, STRING } from './consts'
+
 const encode = (s) =>
-  s
-    .replaceAll('<br>', '\n')
-    .replaceAll('<rb>', '\u001B[31;1m')
-    .replaceAll('</>', '\u001B[m')
-    .replaceAll('<b>', '\u001B[1m')
-    .replaceAll('<i>', '\u001B[3m')
-    .replaceAll('<u>', '\u001B[4m')
+  typeof s === STRING
+    ? s
+        .replaceAll('<br>', NEW_LINE)
+        .replaceAll('<rb>', '\u001B[31;1m')
+        .replaceAll('<bb>', '\u001B[34;1m')
+        .replaceAll('</>', '\u001B[m')
+        .replaceAll('<b>', '\u001B[1m')
+        .replaceAll('<i>', '\u001B[3m')
+        .replaceAll('<u>', '\u001B[4m')
+    : s
 
-const remove = (s) => s.replaceAll('<br>', '\n').replaceAll(/<[/a-z]+>/gi, '')
+const remove = (s) =>
+  typeof s === STRING
+    ? s.replaceAll('<br>', NEW_LINE).replaceAll(/<[/a-z]+>/gi, '')
+    : s
 
 export default (formatLogMsg) => (msg) =>
   window.chrome // Only show formatting in Chrome as not supported in other browsers

packages/common/format-advise.test.js

@@ -1,6 +1,6 @@
-import formatAdvise from './format-advise'
+import createFormatAdvise from './format-advise'
 
-describe('formatAdvise', () => {
+describe('createFormatAdvise', () => {
   let mockFormatLogMsg
 
   beforeEach(() => {
@@ -15,8 +15,8 @@ describe('formatAdvise', () => {
     })
 
     const msg = '<rb>Error:</> <b>Something went wrong</><br><i>Details</>'
-    const formattedAdvise = formatAdvise(mockFormatLogMsg)
-    formattedAdvise(msg)
+    const formatAdvise = createFormatAdvise(mockFormatLogMsg)
+    formatAdvise(msg)
 
     const expectedOutput =
       '\u001B[31;1mError:\u001B[m \u001B[1mSomething went wrong\u001B[m\n\u001B[3mDetails\u001B[m'
@@ -32,8 +32,8 @@ describe('formatAdvise', () => {
     })
 
     const msg = '<rb>Error:</> <b>Something went wrong</><br><i>Details</></>'
-    const formattedAdvise = formatAdvise(mockFormatLogMsg)
-    formattedAdvise(msg)
+    const formatAdvise = createFormatAdvise(mockFormatLogMsg)
+    formatAdvise(msg)
 
     const expectedOutput = 'Error: Something went wrong\nDetails'
 
@@ -42,8 +42,8 @@ describe('formatAdvise', () => {
 
   test('should handle empty messages gracefully', () => {
     const msg = ''
-    const formattedAdvise = formatAdvise(mockFormatLogMsg)
-    formattedAdvise(msg)
+    const formatAdvise = createFormatAdvise(mockFormatLogMsg)
+    formatAdvise(msg)
 
     expect(mockFormatLogMsg).toHaveBeenCalledWith('')
   })

packages/core/console.js

@@ -2,7 +2,7 @@ import acg, { NORMAL } from 'auto-console-group'
 
 import { BOLD, LABEL, PARENT } from '../common/consts'
 import deprecate from '../common/deprecate'
-import formatAdvise from '../common/format-advise'
+import createFormatAdvise from '../common/format-advise'
 import { esModuleInterop, id as identity } from '../common/utils'
 import settings from './values/settings'
 
@@ -76,13 +76,15 @@ const formatLogMsg =
   (...args) =>
     [`${LABEL}(${iframeId})`, ...args].join(' ')
 
+const formatAdvise = createFormatAdvise(identity)
 export const advise = (iframeId, ...args) =>
   settings[iframeId]
-    ? settings[iframeId].console.warn(formatAdvise(identity)(...args))
-    : queueMicrotask(
+    ? settings[iframeId].console.warn(...args.map(formatAdvise))
+    : queueMicrotask(() => {
+        const localFormatAdvise = createFormatAdvise(formatLogMsg(iframeId))
         // eslint-disable-next-line no-console
-        () => console?.warn(formatAdvise(formatLogMsg(iframeId))(...args)),
-      )
+        return console?.warn(...args.map(localFormatAdvise))
+      })
 
 const deprecateAdvise = deprecate(advise)
 export const deprecateFunction = deprecateAdvise('Function')

packages/core/index.js

@@ -42,6 +42,7 @@ import {
   PARENT,
   PARENT_INFO,
   PARENT_INFO_STOP,
+  REMOVED_NEXT_VERSION,
   RESET,
   RESET_REQUIRED_METHODS,
   RESIZE,
@@ -62,6 +63,7 @@ import { hasOwn, isolateUserCode, once, typeAssert } from '../common/utils'
 import {
   advise,
   debug,
+  endAutoGroup,
   error,
   errorBoundary,
   event as consoleEvent,
@@ -73,6 +75,7 @@ import {
   warn,
 } from './console'
 import warnOnNoResponse from './timeout'
+import checkUniqueId from './unique'
 import defaults from './values/defaults'
 import page from './values/page'
 import settings from './values/settings'
@@ -1064,7 +1067,7 @@ export default (options) => (iframe) => {
             iframeId,
             `<rb>Deprecated Method Name</>
 
-The \u001B[removeListeners()</> method has been renamed to \u001B[disconnect()</>.
+The <b>removeListeners()</> method has been renamed to <b>disconnect()</>. ${REMOVED_NEXT_VERSION}
 `,
           )
           this.disconnect()
@@ -1074,7 +1077,7 @@ The \u001B[removeListeners()</> method has been renamed to \u001B[disconnect()</
           advise(
             iframeId,
             `<rb>Deprecated Method</>
-        
+
 Use of the <b>resize()</> method from the parent page is deprecated and will be removed in a future version of <i>iframe-resizer</>. As their are no longer any edge cases that require triggering a resize from the parent page, it is recommended to remove this method from your code.`,
           )
           trigger.bind(null, 'Window resize', RESIZE, iframeId)
@@ -1159,7 +1162,7 @@ Use of the <b>resize()</> method from the parent page is deprecated and will be
         iframeId,
         `<rb>Deprecated Option</>
 
-The <b>sizeWidth</>, <b>sizeHeight</> and <b>autoResize</> options have been replaced with new <b>direction</> option which expects values of <i>"${VERTICAL}"</>, <i>"${HORIZONTAL}"</> or <i>"${NONE}"</>.
+The <b>sizeWidth</>, <b>sizeHeight</> and <b>autoResize</> options have been replaced with new <b>direction</> option which expects values of <bb>${VERTICAL}</>, <bb>${HORIZONTAL}</>, <bb>${BOTH}</> or <bb>${NONE}</>.
 `,
       )
     }
@@ -1235,7 +1238,7 @@ The <b>sizeWidth</>, <b>sizeHeight</> and <b>autoResize</> options have been rep
     if (hasOwn(settings[iframeId], oldName)) {
       advise(
         iframeId,
-        `<rb>Deprecated option</>\n\nThe <b>${oldName}</> option has been renamed to <b>${newName}</>. Use of the old name will be removed in a future version of <i>iframe-resizer</>.`,
+        `<rb>Deprecated option</>\n\nThe <b>${oldName}</> option has been renamed to <b>${newName}</>. ${REMOVED_NEXT_VERSION}`,
       )
       settings[iframeId][newName] = settings[iframeId][oldName]
       delete settings[iframeId][oldName]
@@ -1262,7 +1265,7 @@ The <b>sizeWidth</>, <b>sizeHeight</> and <b>autoResize</> options have been rep
     if (options?.offset) {
       advise(
         iframeId,
-        `<rb>Deprecated option</>\n\n The <b>offset</> option has been renamed to <b>offsetSize</>. Use of the old name will be removed in a future version of <i>iframe-resizer</>.`,
+        `<rb>Deprecated option</>\n\n The <b>offset</> option has been renamed to <b>offsetSize</>. ${REMOVED_NEXT_VERSION}`,
       )
     }
   }
@@ -1299,6 +1302,7 @@ The <b>sizeWidth</>, <b>sizeHeight</> and <b>autoResize</> options have been rep
     }
 
     processOptions(options)
+    checkUniqueId(iframeId)
     log(iframeId, `src: %c${iframe.srcdoc || iframe.src}`, HIGHLIGHT)
     preModeCheck()
     setupEventListenersOnce()
@@ -1307,6 +1311,7 @@ The <b>sizeWidth</>, <b>sizeHeight</> and <b>autoResize</> options have been rep
     init(iframeId, createOutgoingMsg(iframeId))
     setupIframeObject()
     log(iframeId, 'Setup complete')
+    endAutoGroup(iframeId)
   }
 
   function enableVInfo(options) {

packages/core/unique.js

@@ -0,0 +1,30 @@
+import { NEW_LINE } from '../common/consts'
+import { advise } from './console'
+
+const shownDuplicateIdWarning = {}
+
+export default function checkUniqueId(id) {
+  if (shownDuplicateIdWarning[id] === true) return false
+
+  const elements = document.querySelectorAll(`iframe#${CSS.escape(id)}`)
+  if (elements.length === 1) return true
+
+  shownDuplicateIdWarning[id] = true
+
+  const elementList = Array.from(elements).flatMap((element) => [
+    NEW_LINE,
+    element,
+    NEW_LINE,
+  ])
+
+  advise(
+    id,
+    `<rb>Duplicate ID attributes detected</>\n\nThe <b>${id}</> ID is not unique. Having multiple iframes on the same page with the same ID causes problems with communication between the iframe and parent page. Please ensure that the ID of each iframe has a unique value.
+
+Found <bb>${elements.length}</> iframes with the <b>${id}</> ID:`,
+    ...elementList,
+    NEW_LINE,
+  )
+
+  return false
+}