Refactor core

packages/angular/directive.ts

@@ -34,7 +34,7 @@ export type iframeResizerOptions = {
   bodyMargin?: string | number | null
   bodyPadding?: string | number | null
   checkOrigin?: boolean | string[]
-  direction?: 'vertical' | 'horizontal' | 'none'
+  direction?: 'vertical' | 'horizontal' | 'both' | 'none'
   inPageLinks?: boolean
   license: string
   offsetSize?: number

packages/child/check-blocking-css.js

@@ -1,4 +1,4 @@
-import { AUTO } from '../common/consts'
+import { AUTO, NONE } from '../common/consts'
 import { advise, log } from './console'
 
 const nodes = () => [document.documentElement, document.body]
@@ -7,7 +7,7 @@ const properties = ['min-height', 'min-width', 'max-height', 'max-width']
 const blockedStyleSheets = new Set()
 
 const hasCssValue = (value) =>
-  value && value !== '0px' && value !== AUTO && value !== 'none'
+  value && value !== '0px' && value !== AUTO && value !== NONE
 
 const getElementName = (node) =>
   node.tagName ? node.tagName.toLowerCase() : 'unknown'

packages/child/observers/overflow.js

@@ -1,6 +1,6 @@
 import { HIGHLIGHT } from 'auto-console-group'
 
-import { HEIGHT_EDGE, OVERFLOW_ATTR } from '../../common/consts'
+import { HEIGHT_EDGE, NONE, OVERFLOW_ATTR } from '../../common/consts'
 import { id } from '../../common/utils'
 import { info } from '../console'
 import {
@@ -17,7 +17,7 @@ const logNewlyObserved = createLogNewlyObserved(OVERFLOW)
 const warnAlreadyObserved = createWarnAlreadyObserved(OVERFLOW)
 
 const isHidden = (node) =>
-  node.hidden || node.offsetParent === null || node.style.display === 'none'
+  node.hidden || node.offsetParent === null || node.style.display === NONE
 
 const createOverflowObserver = (callback, options) => {
   const side = options.side || HEIGHT_EDGE

packages/child/observers/perf.js

@@ -14,9 +14,6 @@ export const PREF_END = '--ifr-end'
 const PREF_MEASURE = '--ifr-measure'
 
 const timings = []
-// const usedTags = new WeakSet()
-
-// const addUsedTag = (el) => typeof el === OBJECT && usedTags.add(el)
 
 let detail = {}
 let oldAverage = 0
@@ -98,9 +95,6 @@ export default function createPerformanceObserver() {
   const observer = new PerformanceObserver(perfObserver)
   observer.observe({ entryTypes: ['mark'] })
 
-  // addUsedTag(document.documentElement)
-  // addUsedTag(document.body)
-
   startTimingCheck()
 
   return {

packages/core/checks/id.js

@@ -0,0 +1,32 @@
+import { isString } from '../../common/utils'
+import { event as consoleEvent, log } from '../console'
+import defaults from '../values/defaults'
+
+let count = 0
+
+function newId(options) {
+  let id = options?.id || defaults.id + count++
+
+  if (document.getElementById(id) !== null) {
+    id += count++
+  }
+
+  return id
+}
+
+export default function ensureHasId(iframe, options) {
+  let { id } = iframe
+
+  if (id && !isString(id)) {
+    throw new TypeError('Invalid id for iFrame. Expected String')
+  }
+
+  if (!id || id === '') {
+    id = newId(options)
+    iframe.id = id
+    consoleEvent(id, 'assignId')
+    log(id, `Added missing iframe ID: ${id} (${iframe.src})`)
+  }
+
+  return id
+}

packages/core/checks/manual-logging.js

@@ -0,0 +1,10 @@
+import { COLLAPSE } from '../../common/consts'
+
+export default function (options) {
+  const { search } = window.location
+
+  if (search.includes('ifrlog')) {
+    options.log = COLLAPSE
+    options.logExpand = search.includes('ifrlog=expanded')
+  }
+}

packages/core/checks/mode.js

@@ -0,0 +1,38 @@
+import { VERSION } from '../../common/consts'
+import { getModeData, getModeLabel } from '../../common/mode'
+import { advise, purge as consoleClear, vInfo } from '../console'
+import settings from '../values/settings'
+
+let vAdvised = false
+let vInfoDisable = false
+
+export default function checkMode(id, childMode = -3) {
+  if (vAdvised) return
+  const mode = Math.max(settings[id].mode, childMode)
+  if (mode > settings[id].mode) settings[id].mode = mode
+  if (mode < 0) {
+    consoleClear(id)
+    if (!settings[id].vAdvised)
+      advise(id || 'Parent', `${getModeData(mode + 2)}${getModeData(2)}`)
+    settings[id].vAdvised = true
+    throw getModeData(mode + 2).replace(/<\/?[a-z][^>]*>|<\/>/gi, '')
+  }
+  if (!(mode > 0 && vInfoDisable)) {
+    vInfo(`v${VERSION} (${getModeLabel(mode)})`, mode)
+  }
+  if (mode < 1) advise('Parent', getModeData(3))
+  vAdvised = true
+}
+
+export function preModeCheck(id) {
+  if (vAdvised) return
+  const { mode } = settings[id]
+  if (mode !== -1) checkMode(id, mode)
+}
+
+export function enableVInfo(options) {
+  if (options?.log === -1) {
+    options.log = false
+    vInfoDisable = true
+  }
+}

packages/core/checks/options.js

@@ -0,0 +1,28 @@
+import {
+  AUTO_RESIZE,
+  BOTH,
+  HORIZONTAL,
+  NONE,
+  VERTICAL,
+} from '../../common/consts'
+import { advise } from '../console'
+
+export default function checkOptions(id, options) {
+  if (!options) return {}
+
+  if (
+    'sizeWidth' in options ||
+    'sizeHeight' in options ||
+    AUTO_RESIZE in options
+  ) {
+    advise(
+      id,
+      `<rb>Deprecated Option</>
+
+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}</>.
+`,
+    )
+  }
+
+  return options
+}

packages/core/checks/origin.js

@@ -0,0 +1,15 @@
+import { HIGHLIGHT } from 'auto-console-group'
+
+import { log } from '../console'
+import settings from '../values/settings'
+
+export default function checkSameDomain(id) {
+  try {
+    settings[id].sameOrigin =
+      !!settings[id]?.iframe?.contentWindow?.iframeChildListener
+  } catch (error) {
+    settings[id].sameOrigin = false
+  }
+
+  log(id, `sameOrigin: %c${settings[id].sameOrigin}`, HIGHLIGHT)
+}

packages/core/checks/version.js

@@ -0,0 +1,27 @@
+import { FOREGROUND, HIGHLIGHT } from 'auto-console-group'
+
+import { VERSION } from '../../common/consts'
+import { advise, log } from '../console'
+
+export default function checkVersion(id, version) {
+  if (version === VERSION) return
+  if (version === undefined) {
+    advise(
+      id,
+      `<rb>Legacy version detected in iframe</>
+
+Detected legacy version of child page script. It is recommended to update the page in the iframe to use <b>@iframe-resizer/child</>.
+
+See <u>https://iframe-resizer.com/setup/#child-page-setup</> for more details.
+`,
+    )
+    return
+  }
+  log(
+    id,
+    `Version mismatch (Child: %c${version}%c !== Parent: %c${VERSION})`,
+    HIGHLIGHT,
+    FOREGROUND,
+    HIGHLIGHT,
+  )
+}

packages/core/checks/warning-timeout.js

@@ -0,0 +1,10 @@
+import { HIGHLIGHT } from 'auto-console-group'
+
+import { info } from '../console'
+import settings from '../values/settings'
+
+export default function checkWarningTimeout(id) {
+  if (!settings[id].warningTimeout) {
+    info(id, 'warningTimeout:%c disabled', HIGHLIGHT)
+  }
+}

packages/core/events/mouse.js

@@ -0,0 +1,28 @@
+import { SEPARATOR } from '../../common/consts'
+import { getMessageBody } from '../received/message'
+import on from './wrapper'
+
+export default function onMouse(event, messageData) {
+  const { id, iframe, height, type, width } = messageData
+  let mousePos = {}
+
+  if (width === 0 && height === 0) {
+    const coords = getMessageBody(id, 9).split(SEPARATOR)
+    mousePos = {
+      x: coords[1],
+      y: coords[0],
+    }
+  } else {
+    mousePos = {
+      x: width,
+      y: height,
+    }
+  }
+
+  on(id, event, {
+    iframe,
+    screenX: Number(mousePos.x),
+    screenY: Number(mousePos.y),
+    type,
+  })
+}

packages/core/events/size.js

@@ -0,0 +1,28 @@
+import { HIGHLIGHT } from 'auto-console-group'
+
+import { HEIGHT, WIDTH } from '../../common/consts'
+import { info } from '../console'
+import { setPagePosition } from '../page/position'
+import settings from '../values/settings'
+import checkEvent from './wrapper'
+
+export function setSize(messageData) {
+  function setDimension(dimension) {
+    const size = `${messageData[dimension]}px`
+    messageData.iframe.style[dimension] = size
+    info(id, `Set ${dimension}: %c${size}`, HIGHLIGHT)
+  }
+
+  const { id } = messageData
+  const { sizeHeight, sizeWidth } = settings[id]
+
+  if (sizeHeight) setDimension(HEIGHT)
+  if (sizeWidth) setDimension(WIDTH)
+}
+
+export function resizeIframe(messageData) {
+  const { id } = messageData
+  setSize(messageData)
+  setPagePosition(id)
+  checkEvent(id, 'onResized', messageData)
+}

packages/core/events/wrapper.js

@@ -0,0 +1,27 @@
+import { FUNCTION } from '../../common/consts'
+import { isolateUserCode } from '../../common/utils'
+import { warn } from '../console'
+import settings from '../values/settings'
+
+function on(iframeId, funcName, val) {
+  if (!settings[iframeId]) return null
+
+  const func = settings[iframeId][funcName]
+
+  if (typeof func !== FUNCTION)
+    throw new TypeError(`${funcName} on iframe[${iframeId}] is not a function`)
+
+  if (funcName !== 'onBeforeClose' && funcName !== 'onScroll')
+    return isolateUserCode(func, val)
+
+  try {
+    return func(val)
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    warn(iframeId, `Error in ${funcName} callback`)
+    return null
+  }
+}
+
+export default on