@domql/element 3.4.4 → 3.4.6

package/event/__tests__/triggerEventOnUpdate.test.js

@@ -0,0 +1,207 @@
+import { jest } from '@jest/globals'
+import { triggerEventOnUpdate } from '../on'
+
+describe('triggerEventOnUpdate', () => {
+  let mockElement
+  let mockEventHandler
+  let mockUpdatedObj
+  let mockOptions
+
+  beforeEach(() => {
+    mockEventHandler = jest.fn(() => 'eventResult')
+    mockUpdatedObj = { updated: 'value' }
+    mockOptions = { option1: 'value1' }
+
+    mockElement = {
+      state: { elementState: 'test' },
+      context: { elementContext: 'test' },
+      on: {},
+      props: {}
+    }
+  })
+
+  describe('event resolution and execution', () => {
+    test('should trigger event from on property', () => {
+      // Arrange
+      mockElement.on.click = mockEventHandler
+
+      // Act
+      const result = triggerEventOnUpdate(
+        'click',
+        mockUpdatedObj,
+        mockElement,
+        mockOptions
+      )
+
+      // Assert
+      expect(result).toBe('eventResult')
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockUpdatedObj,
+        mockElement,
+        mockElement.state,
+        mockElement.context,
+        mockOptions
+      )
+    })
+
+    test('should trigger event from props using camelCase', () => {
+      // Arrange
+      mockElement.props.onClick = mockEventHandler
+
+      // Act
+      const result = triggerEventOnUpdate(
+        'click',
+        mockUpdatedObj,
+        mockElement,
+        mockOptions
+      )
+
+      // Assert
+      expect(result).toBe('eventResult')
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockUpdatedObj,
+        mockElement,
+        mockElement.state,
+        mockElement.context,
+        mockOptions
+      )
+    })
+
+    test('should prioritize on property over props', () => {
+      // Arrange
+      const onEventHandler = jest.fn(() => 'onResult')
+      const propsEventHandler = jest.fn(() => 'propsResult')
+
+      mockElement.on.click = onEventHandler
+      mockElement.props.onClick = propsEventHandler
+
+      // Act
+      const result = triggerEventOnUpdate(
+        'click',
+        mockUpdatedObj,
+        mockElement,
+        mockOptions
+      )
+
+      // Assert
+      expect(result).toBe('onResult')
+      expect(onEventHandler).toHaveBeenCalled()
+      expect(propsEventHandler).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('parameter handling', () => {
+    test('should handle undefined state and context', () => {
+      // Arrange
+      mockElement = {
+        on: { click: mockEventHandler }
+      }
+
+      // Act
+      triggerEventOnUpdate('click', mockUpdatedObj, mockElement, mockOptions)
+
+      // Assert
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockUpdatedObj,
+        mockElement,
+        undefined,
+        undefined,
+        mockOptions
+      )
+    })
+
+    test('should handle missing options', () => {
+      // Arrange
+      mockElement.on.click = mockEventHandler
+
+      // Act
+      triggerEventOnUpdate('click', mockUpdatedObj, mockElement)
+
+      // Assert
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockUpdatedObj,
+        mockElement,
+        mockElement.state,
+        mockElement.context,
+        undefined
+      )
+    })
+
+    test('should handle empty updatedObj', () => {
+      // Arrange
+      mockElement.on.click = mockEventHandler
+
+      // Act
+      triggerEventOnUpdate('click', {}, mockElement, mockOptions)
+
+      // Assert
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        {},
+        mockElement,
+        mockElement.state,
+        mockElement.context,
+        mockOptions
+      )
+    })
+  })
+
+  describe('event naming', () => {
+    test('should handle various event names correctly', () => {
+      const eventTests = [
+        { input: 'mouseenter', prop: 'onMouseenter' },
+        { input: 'mouseleave', prop: 'onMouseleave' },
+        { input: 'submit', prop: 'onSubmit' },
+        { input: 'change', prop: 'onChange' }
+      ]
+
+      for (const { input, prop } of eventTests) {
+        // Arrange
+        mockElement.props[prop] = mockEventHandler
+
+        // Act
+        triggerEventOnUpdate(input, mockUpdatedObj, mockElement, mockOptions)
+
+        // Assert
+        expect(mockEventHandler).toHaveBeenCalledWith(
+          mockUpdatedObj,
+          mockElement,
+          mockElement.state,
+          mockElement.context,
+          mockOptions
+        )
+
+        // Reset for next test
+        mockElement.props[prop] = undefined
+        mockEventHandler.mockClear()
+      }
+    })
+  })
+
+  describe('error handling', () => {
+    test('should return undefined when no event handler exists', () => {
+      // Act
+      const result = triggerEventOnUpdate(
+        'click',
+        mockUpdatedObj,
+        mockElement,
+        mockOptions
+      )
+
+      // Assert
+      expect(result).toBeUndefined()
+    })
+
+    test('should handle thrown error in event handler', () => {
+      // Arrange
+      const error = new Error('Event handler error')
+      mockElement.on.click = jest.fn(() => {
+        throw error
+      })
+
+      // Act & Assert
+      expect(() =>
+        triggerEventOnUpdate('click', mockUpdatedObj, mockElement, mockOptions)
+      ).toThrow('Event handler error')
+    })
+  })
+})

package/event/animationFrame.js

@@ -0,0 +1,92 @@
+'use strict'
+
+export const registerFrameListener = el => {
+  if (!el || !el.__ref) {
+    throw new Error('Element reference is invalid')
+  }
+
+  const { __ref: ref } = el
+
+  if (!ref.root) {
+    throw new Error('Root reference is invalid')
+  }
+
+  if (!ref.root.data) {
+    throw new Error('Data are undefined')
+  }
+
+  const { frameListeners } = ref.root.data
+
+  // Check if frameListeners exists and the element is not already in the Set
+  if (frameListeners && !frameListeners.has(el)) {
+    frameListeners.add(el) // Add the element to the Set
+  }
+}
+
+const processFrameListeners = (frameListeners) => {
+  for (const element of frameListeners) {
+    // Cache the handler on first use to avoid repeated property lookups per frame
+    if (!element.__ref.__frameHandler) {
+      const handler = element.on?.frame || element.onFrame || element.props?.onFrame
+      if (handler) element.__ref.__frameHandler = handler
+      else {
+        frameListeners.delete(element)
+        continue
+      }
+    }
+
+    if (!element.node?.parentNode) {
+      frameListeners.delete(element)
+      delete element.__ref.__frameHandler
+    } else {
+      try {
+        element.__ref.__frameHandler(element, element.state, element.context)
+      } catch (e) {
+        console.warn(e)
+        frameListeners.delete(element)
+        delete element.__ref.__frameHandler
+      }
+    }
+  }
+}
+
+const startFrameLoop = (frameListeners) => {
+  if (_frameRunning) return
+  _frameRunning = true
+
+  function requestFrame () {
+    if (frameListeners.size === 0) {
+      _frameRunning = false
+      return
+    }
+    processFrameListeners(frameListeners)
+    window.requestAnimationFrame(requestFrame)
+  }
+
+  window.requestAnimationFrame(requestFrame)
+}
+
+export const applyAnimationFrame = element => {
+  if (!element) {
+    throw new Error('Element is invalid')
+  }
+  const { on, props, __ref: ref } = element
+  if (!ref.root || !ref.root.data) return
+  const { frameListeners } = ref.root.data
+
+  // Register if any of the frame handlers exists
+  if (frameListeners && (on?.frame || element.onFrame || props?.onFrame)) {
+    registerFrameListener(element)
+    startFrameLoop(frameListeners)
+  }
+}
+
+let _frameRunning = false
+
+export const initAnimationFrame = () => {
+  const frameListeners = new Set()
+
+  startFrameLoop(frameListeners)
+
+  return frameListeners
+}

package/event/can.js

@@ -0,0 +1,8 @@
+'use strict'
+
+import { report } from '@domql/report'
+import { isValidHtmlTag } from '@domql/utils'
+
+export const canRenderTag = (tag) => {
+  return isValidHtmlTag(tag || 'div') || report('HTMLInvalidTag')
+}

package/event/index.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export * from './on.js'
+export * from './can.js'
+export * from './animationFrame.js'

package/event/on.js

@@ -0,0 +1,71 @@
+'use strict'
+
+import { DOMQL_EVENTS, isFunction } from '@domql/utils'
+
+// Re-export event trigger functions from @domql/utils (moved there to break circular dep)
+export { applyEvent, triggerEventOn, applyEventUpdate, triggerEventOnUpdate } from '@domql/utils'
+
+const getOnOrPropsEvent = (param, element) => {
+  const onEvent = element.on?.[param]
+  if (onEvent) return onEvent
+  const props = element.props
+  if (!props) return
+  const propKey = 'on' + param.charAt(0).toUpperCase() + param.slice(1)
+  return props[propKey]
+}
+
+const registerNodeEvent = (param, element, node, options) => {
+  const appliedFunction = getOnOrPropsEvent(param, element)
+  if (isFunction(appliedFunction)) {
+    const { __ref: ref } = element
+    if (!ref.__eventListeners) ref.__eventListeners = {}
+
+    // Remove previous listener for this event to avoid duplicates
+    if (ref.__eventListeners[param]) {
+      node.removeEventListener(param, ref.__eventListeners[param])
+    }
+
+    const handler = event => {
+      const { state, context } = element
+      const result = appliedFunction.call(
+        element,
+        event,
+        element,
+        state,
+        context,
+        options
+      )
+      if (result && typeof result.then === 'function') {
+        result.catch(() => {})
+      }
+    }
+
+    ref.__eventListeners[param] = handler
+    node.addEventListener(param, handler)
+  }
+}
+
+export const applyEventsOnNode = (element, options) => {
+  const { node, on, props } = element
+  const handled = new Set()
+
+  // Register events from on: { click: ..., input: ... }
+  for (const param in on) {
+    if (DOMQL_EVENTS.has(param)) continue
+    handled.add(param)
+    registerNodeEvent(param, element, node, options)
+  }
+
+  // Also pick up props.onClick, props.onInput, etc.
+  if (props) {
+    for (const key in props) {
+      if (key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && isFunction(props[key])) {
+        const thirdChar = key[2]
+        if (thirdChar !== thirdChar.toUpperCase()) continue
+        const eventName = thirdChar.toLowerCase() + key.slice(3)
+        if (handled.has(eventName) || DOMQL_EVENTS.has(eventName)) continue
+        registerNodeEvent(eventName, element, node, options)
+      }
+    }
+  }
+}

package/event/store.js

@@ -0,0 +1,6 @@
+'use strict'
+
+export default {
+  click: [],
+  render: []
+}

package/methods/set.js

@@ -0,0 +1,73 @@
+'use strict'
+
+import { merge, overwrite } from '@domql/utils'
+
+import { set, reset, updateContent, removeContent } from '../set.js'
+import { update } from '../update.js'
+
+import {
+  call,
+  error,
+  getContext,
+  getPath,
+  getRef,
+  getRoot,
+  getRootContext,
+  getRootData,
+  getRootState,
+  keys,
+  log,
+  lookdown,
+  lookdownAll,
+  lookup,
+  nextElement,
+  parse,
+  parseDeep,
+  previousElement,
+  remove,
+  setNodeStyles,
+  setProps,
+  spotByPath,
+  variables,
+  verbose,
+  warn
+} from '@domql/utils/methods'
+
+export const addMethods = (element, parent, options = {}) => {
+  const proto = {
+    set,
+    reset,
+    update,
+    variables,
+    remove,
+    updateContent,
+    removeContent,
+    setProps,
+    lookup,
+    lookdown,
+    lookdownAll,
+    getRef,
+    getPath,
+    getRootState,
+    getRoot,
+    getRootData,
+    getRootContext,
+    getContext,
+    setNodeStyles,
+    spotByPath,
+    parse,
+    parseDeep,
+    keys,
+    nextElement,
+    previousElement,
+    log,
+    verbose,
+    warn,
+    error,
+    call
+  }
+  if (element.context.methods) {
+    ;(options.strict ? merge : overwrite)(proto, element.context.methods)
+  }
+  Object.setPrototypeOf(element, proto)
+}

package/methods/v2.js

@@ -0,0 +1,83 @@
+'use strict'
+
+import { isDefined, isFunction, isObjectLike } from '@domql/utils'
+
+export const defineSetter = (element, key, get, set) =>
+  Object.defineProperty(element, key, { get, set })
+
+export const keys = function () {
+  const element = this
+  const keys = []
+  for (const param in element) {
+    // if (REGISTRY[param] && !parseFilters.elementKeys.includes(param)) { continue }
+    keys.push(param)
+  }
+  return keys
+}
+
+export const parse = function (excl = []) {
+  const element = this
+  const obj = {}
+  const keyList = keys.call(element)
+  keyList.forEach(v => {
+    if (excl.includes(v)) return
+    let val = element[v]
+    if (v === 'state') {
+      if (element.__ref && element.__ref.__hasRootState) return
+      if (isFunction(val && val.parse)) val = val.parse()
+    } else if (v === 'props') {
+      const { __element, update, ...props } = element[v]
+      obj[v] = props
+    } else if (isDefined(val)) obj[v] = val
+  })
+  return obj
+}
+
+export const parseDeep = function (excl = []) {
+  const element = this
+  const obj = parse.call(element, excl)
+  for (const v in obj) {
+    if (excl.includes(v)) return
+    if (isObjectLike(obj[v])) {
+      obj[v] = parseDeep.call(obj[v], excl)
+    }
+  }
+  return obj
+}
+
+export const log = function (...args) {
+  const element = this
+  const { __ref } = element
+  console.group(element.key)
+  if (args.length) {
+    args.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  } else {
+    console.log(__ref?.path)
+    const keys = element.keys()
+    keys.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  }
+  console.groupEnd(element.key)
+  return element
+}
+
+export const nextElement = function () {
+  const element = this
+  const { key, parent } = element
+  const { __children } = parent.__ref
+
+  const currentIndex = __children.indexOf(key)
+  const nextChild = __children[currentIndex + 1]
+
+  return parent[nextChild]
+}
+
+export const previousElement = function (el) {
+  const element = el || this
+  const { key, parent } = element
+  const { __children } = parent.__ref
+
+  if (!__children) return
+
+  const currentIndex = __children.indexOf(key)
+  return parent[__children[currentIndex - 1]]
+}

package/mixins/attr.js

@@ -0,0 +1,32 @@
+'use strict'
+
+import { deepMerge, exec, isNot } from '@domql/utils'
+import { report } from '@domql/report'
+
+/**
+ * Recursively add attributes to a DOM node
+ */
+export function attr (params, element, node) {
+  const { __ref: ref, props } = element
+  const { __attr } = ref
+  if (isNot(params)('object')) report('HTMLInvalidAttr', params)
+  if (params) {
+    const attrs = exec(params, element)
+    if (props.attr) deepMerge(attrs, props.attr)
+    for (const attr in attrs) {
+      const val = exec(attrs[attr], element)
+      if (val === __attr[attr]) continue
+      if (
+        val !== false &&
+        val !== undefined &&
+        val !== null &&
+        node.setAttribute
+      ) {
+        node.setAttribute(attr, val)
+      } else if (node.removeAttribute) node.removeAttribute(attr)
+      __attr[attr] = val
+    }
+  }
+}
+
+export default attr

package/mixins/classList.js

@@ -0,0 +1,62 @@
+'use strict'
+
+import { exec, isObject, isString } from '@domql/utils'
+
+export const assignKeyAsClassname = element => {
+  const { key } = element
+  if (element.classlist === true) element.classlist = key
+  else if (
+    !element.classlist &&
+    typeof key === 'string' &&
+    key.charAt(0) === '_' &&
+    key.charAt(1) !== '_'
+  ) {
+    element.classlist = key.slice(1)
+  }
+}
+
+// stringifies class object
+export const classify = (obj, element) => {
+  let className = ''
+  for (const item in obj) {
+    const param = obj[item]
+    if (typeof param === 'boolean' && param) className += ` ${item}`
+    else if (typeof param === 'string') className += ` ${param}`
+    else if (typeof param === 'function') {
+      className += ` ${exec(param, element)}`
+    }
+  }
+  return className
+}
+
+export const classList = (params, element) => {
+  if (!params) return
+  const { key } = element
+  if (params === true) params = element.classlist = { key }
+  if (isString(params)) params = element.classlist = { default: params }
+  if (isObject(params)) params = classify(params, element)
+  // TODO: fails on string
+  const className = params.replace(/\s+/g, ' ').trim()
+  return className
+}
+
+// LEGACY (still needed in old domql)
+export const applyClassListOnNode = (params, element, node) => {
+  const className = classList(params, element)
+  const { __ref } = element
+  if (className === __ref.__className) return className
+  __ref.__className = className
+  // Use setAttribute for universal SVG/HTML compatibility
+  if (node && typeof node.setAttribute === 'function') {
+    node.setAttribute('class', className)
+  } else if (node) {
+    try { node.className = className } catch (e) { /* SVG element */ }
+  }
+  return className
+}
+
+export function applyClasslist (params, element, node) {
+  applyClassListOnNode(params, element, node)
+}
+
+export default applyClasslist