Log overflow/tagged node every time it is used to calculate size

packages/child/log.js

@@ -32,15 +32,8 @@ export function getElementName(el) {
   }
 }
 
-// function elementSnippet(el, maxChars = 30) {
-//   const outer = el?.outerHTML?.toString()
-
-//   if (!outer) return el
-
-//   return outer.length < maxChars
-//     ? outer
-//     : `${outer.slice(0, maxChars).replaceAll('\n', ' ')}...`
-// }
+const BOLD = 'font-weight: bold;'
+const NORMAL = 'font-weight: normal;'
 
 // TODO: remove .join(' '), requires major test updates
 const formatLogMsg = (...msg) =>
@@ -53,7 +46,7 @@ export const log = (...msg) =>
 // eslint-disable-next-line no-unused-vars
 export const info = (...msg) =>
   // eslint-disable-next-line no-console
-  logging && console?.info(`[iframe-resizer][${id}]`, ...msg)
+  logging && console?.info(`%c[iframe-resizer][${id}]%c`, BOLD, NORMAL, ...msg)
 
 export const warn = (...msg) =>
   // eslint-disable-next-line no-console

packages/child/perf.js

@@ -14,7 +14,7 @@ const usedTags = new WeakSet()
 
 const addUsedTag = (el) => typeof el === 'object' && usedTags.add(el)
 
-let lastPerfEl = null
+// let lastPerfEl = null
 let perfEl = null
 let details = {}
 
@@ -28,18 +28,20 @@ function usedEl(detail, duration) {
 
   details = detail
 
-  if (usedTags.has(perfEl) || lastPerfEl === perfEl || (hasTags && len <= 1)) {
+  if (
+    usedTags.has(perfEl) /* || lastPerfEl === perfEl */ ||
+    (hasTags && len <= 1)
+  )
     return
-  }
 
   if (!logging) addUsedTag(perfEl)
 
-  lastPerfEl = perfEl
+  // lastPerfEl = perfEl
 
   info(
-    `\n${Side} position calculated from:`,
+    `\n  ${Side} position calculated from:`,
     perfEl,
-    `\nParsed ${len} ${hasTags ? 'tagged' : 'potentially overflowing'} elements in ${round(duration)}ms`,
+    `\n  Parsed ${len} ${hasTags ? 'tagged' : 'potentially overflowing'} elements in ${round(duration)}ms`,
   )
 }
 

packages/core/index.js

@@ -8,12 +8,12 @@ import {
 import { addEventListener, removeEventListener } from '../common/listeners'
 import {
   advise,
-  info,
   log,
   setLogEnabled,
   setLogSettings,
+  vInfo,
   warn,
-} from '../common/log'
+} from './log'
 // import modal from '../common/modal'
 import setMode, { getModeData, getModeLabel } from '../common/mode'
 import { once } from '../common/utils'
@@ -1035,7 +1035,7 @@ The <b>sizeWidth</>, <b>sizeHeight</> and <b>autoResize</> options have been rep
     if (vAdvised || mode < 0) return
 
     vAdvised = true
-    info(`v${VERSION} (${getModeLabel(mode)})`)
+    vInfo(`v${VERSION} (${getModeLabel(mode)})`)
 
     if (mode < 1) advise('Parent', getModeData(3))
   }

packages/common/log.js → packages/core/log.js

@@ -1,7 +1,10 @@
-import formatAdvise from './format-advise'
+import formatAdvise from '../common/format-advise'
 
 const msgId = '[iframe-resizer]'
 
+const BOLD = 'font-weight: bold;'
+// const NORMAL = 'font-weight: normal;'
+
 let settings = {}
 let logEnabled = false
 
@@ -42,6 +45,10 @@
 
 export const info = (iframeId, ...msg) => output('info', iframeId, ...msg)
 
+export const vInfo = (msg) =>
+  // eslint-disable-next-line no-console
+  console.info(`%c[iframe-resizer] ${msg}`, BOLD)
+
 export const warn = (iframeId, ...msg) => output('warn', iframeId, ...msg)
 
 export const advise = (iframeId, msg) =>

packages/core/values/defaults.js

@@ -1,4 +1,4 @@
-import { advise } from '../../common/log'
+import { advise } from '../log'
 import settings from './settings'
 
 const onReadyDeprecated = (messageData) => {