@symbo.ls/utils 3.1.2 → 3.14.0

package/triggerEvent.js

@@ -0,0 +1,102 @@
+'use strict'
+
+import { isFunction } from './types.js'
+import { resolveHandler, runPluginHook } from './function.js'
+
+const getOnOrPropsEvent = (param, element) => {
+  const propKey = 'on' + param.charAt(0).toUpperCase() + param.slice(1)
+  return element[propKey]
+}
+
+export const applyEvent = (param, element, state, context, options) => {
+  param = resolveHandler(param, element)
+  if (!isFunction(param)) return
+  try {
+    const result = param.call(
+      element,
+      element,
+      state || element.state,
+      context || element.context,
+      options
+    )
+    if (result && typeof result.then === 'function') {
+      result.catch((err) => {
+        element.error = err
+        if (err instanceof ReferenceError) console.warn('[DOMQL] Async event warning:', err.message)
+        else console.error('[DOMQL] Async event error:', err)
+      })
+    }
+    return result
+  } catch (err) {
+    element.error = err
+    // In SSR/brender mode, ReferenceErrors for missing client-only helpers
+    // are expected (e.g. DOM animation functions). Log concisely.
+    if (err instanceof ReferenceError) {
+      console.warn('[DOMQL] Event handler warning:', err.message)
+    } else {
+      console.error('[DOMQL] Event handler error:', err)
+    }
+    if (element.context?.strictMode) throw err
+  }
+}
+
+export const triggerEventOn = (param, element, options) => {
+  if (!element) {
+    throw new Error('Element is required')
+  }
+  runPluginHook(param, element, options)
+  const appliedFunction = getOnOrPropsEvent(param, element)
+  if (appliedFunction) {
+    const { state, context } = element
+    return applyEvent(appliedFunction, element, state, context, options)
+  }
+}
+
+export const applyEventUpdate = (
+  param,
+  updatedObj,
+  element,
+  state,
+  context,
+  options
+) => {
+  param = resolveHandler(param, element)
+  if (!isFunction(param)) return
+  try {
+    const result = param.call(
+      element,
+      updatedObj,
+      element,
+      state || element.state,
+      context || element.context,
+      options
+    )
+    if (result && typeof result.then === 'function') {
+      result.catch((err) => {
+        element.error = err
+        console.error('[DOMQL] Async event update error:', err)
+      })
+    }
+    return result
+  } catch (err) {
+    element.error = err
+    console.error('[DOMQL] Event update error:', err)
+    if (element.context?.strictMode) throw err
+  }
+}
+
+export const triggerEventOnUpdate = (param, updatedObj, element, options) => {
+  runPluginHook(param, element, updatedObj, options)
+  const appliedFunction = getOnOrPropsEvent(param, element)
+  if (appliedFunction) {
+    const { state, context } = element
+    return applyEventUpdate(
+      appliedFunction,
+      updatedObj,
+      element,
+      state,
+      context,
+      options
+    )
+  }
+}

package/types.js

@@ -0,0 +1,55 @@
+'use strict'
+
+import { isHtmlElement, isNode } from './node.js'
+
+export const isObject = arg => {
+  if (arg === null) return false
+  return typeof arg === 'object' && arg.constructor === Object
+}
+
+export const isString = arg => typeof arg === 'string'
+
+export const isNumber = arg => typeof arg === 'number'
+
+export const isFunction = arg => typeof arg === 'function'
+
+export const isBoolean = arg => arg === true || arg === false
+
+export const isNull = arg => arg === null
+
+export const isArray = arg => Array.isArray(arg)
+
+export const isDate = d => d instanceof Date
+
+export const isObjectLike = arg => {
+  if (arg === null) return false
+  // if (isArray(arg)) return false
+  return typeof arg === 'object'
+}
+
+export const isDefined = arg => arg !== undefined
+
+export const isUndefined = arg => arg === undefined
+
+export const TYPES = {
+  boolean: isBoolean,
+  array: isArray,
+  object: isObject,
+  string: isString,
+  date: isDate,
+  number: isNumber,
+  null: isNull,
+  function: isFunction,
+  objectLike: isObjectLike,
+  node: isNode,
+  htmlElement: isHtmlElement,
+  defined: isDefined
+}
+
+export const is = arg => {
+  return (...args) => args.some(val => TYPES[val](arg))
+}
+
+export const isNot = arg => {
+  return (...args) => !args.some(val => TYPES[val](arg))
+}

package/update.js

@@ -0,0 +1,27 @@
+'use strict'
+
+import { createSnapshotId } from './key.js'
+
+const snapshot = {
+  snapshotId: createSnapshotId
+}
+
+export const captureSnapshot = (element, options) => {
+  const ref = element.__ref
+
+  const { currentSnapshot, calleeElement } = options
+  const isCallee = calleeElement === element
+  if (!calleeElement || isCallee) {
+    const createdStanpshot = snapshot.snapshotId()
+    ref.__currentSnapshot = createdStanpshot
+    return [createdStanpshot, element]
+  }
+
+  const snapshotOnCallee = calleeElement.__ref.__currentSnapshot
+
+  if (currentSnapshot < snapshotOnCallee) {
+    return [snapshotOnCallee, calleeElement, true]
+  }
+
+  return [snapshotOnCallee, calleeElement]
+}

package/dist/cjs/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "commonjs",
-  "main": "index.js"
-}

package/src/detectHeight.js

@@ -1,31 +0,0 @@
-'use strict'
-
-export const detectHeightOnInit = (element, state) => {
-  const heightTimeout = setTimeout(() => {
-    const { props } = element
-    if (!state.clientHeight) {
-      const { node: { clientHeight } } = element
-      if (clientHeight) {
-        state.clientHeight = clientHeight
-      }
-    }
-
-    if (state.active) {
-      if (props.height === 'auto') return
-      element.update({
-        props: { height: state.clientHeight }
-      }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true })
-      const setAutoTimeout = setTimeout(() => {
-        element.update({
-          props: { height: 'auto' }
-        }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true })
-        clearTimeout(setAutoTimeout)
-      }, 450)
-    } else {
-      element.update({
-        props: { height: '0' }
-      }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true })
-    }
-    clearTimeout(heightTimeout)
-  })
-}

package/src/load.js

@@ -1,105 +0,0 @@
-'use strict'
-
-export const loadJavascriptFile = (FILE_URL, async = false, doc = document, type = 'text/javascript') => {
-  return new Promise((resolve, reject) => {
-    try {
-      const scriptEle = doc.createElement('script')
-      scriptEle.type = type
-      scriptEle.async = async
-      scriptEle.src = FILE_URL
-
-      scriptEle.addEventListener('load', (ev) => {
-        resolve({
-          status: true
-        })
-      })
-
-      scriptEle.addEventListener('error', (ev) => {
-        reject(new Error({
-          status: false,
-          message: `Failed to load the script ${FILE_URL}`
-        }))
-      })
-
-      doc.body.appendChild(scriptEle)
-    } catch (error) {
-      reject(error)
-    }
-  })
-}
-
-export const loadJavascriptFileSync = (fileUrl, doc = document, type = 'text/javascript') => {
-  return new Promise((resolve, reject) => {
-    const scriptEle = doc.createElement('script')
-    scriptEle.type = type
-    scriptEle.src = fileUrl
-
-    // Create a blocking overlay
-    const blocker = doc.createElement('div')
-    blocker.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.8);z-index:9999;'
-    doc.body.appendChild(blocker)
-
-    scriptEle.onload = () => {
-      console.log(`Successfully loaded: ${fileUrl}`)
-      doc.body.removeChild(blocker)
-      resolve()
-    }
-
-    scriptEle.onerror = () => {
-      doc.body.removeChild(blocker)
-      reject(new Error(`Failed to load: ${fileUrl}`))
-    }
-
-    doc.body.appendChild(scriptEle)
-  })
-}
-
-export const loadJavascriptFileEmbedSync = (FILE_URL, doc = document, fallback, type = 'text/javascript') => {
-  const xhr = new window.XMLHttpRequest()
-  xhr.open('GET', FILE_URL, false) // false makes the request synchronous
-  xhr.send()
-
-  if (xhr.status === 200) {
-    const scriptEle = doc.createElement('script')
-    scriptEle.type = type
-    scriptEle.text = xhr.responseText
-    doc.body.appendChild(scriptEle)
-    if (typeof fallback === 'function') fallback()
-  } else {
-    throw new Error(`Failed to load the script ${FILE_URL}`)
-  }
-}
-
-export const loadCssFile = (FILE_URL, async = false, doc = document, type = 'text/javascript') => {
-  return new Promise((resolve, reject) => {
-    try {
-      const linkElem = doc.createElement('link')
-      linkElem.rel = 'stylesheet'
-      linkElem.href = FILE_URL
-
-      linkElem.addEventListener('load', (ev) => {
-        resolve({
-          status: true
-        })
-      })
-
-      doc.head.appendChild(linkElem)
-    } catch (error) {
-      reject(error)
-    }
-  })
-}
-
-export const loadJavascript = (body, async = false, doc = document, type = 'text/javascript', id = 'smbls-script') => {
-  try {
-    const scriptEle = doc.createElement('script')
-    scriptEle.type = type
-    scriptEle.async = async
-    scriptEle.id = id
-    scriptEle.innerHTML = body
-
-    doc.body.appendChild(scriptEle)
-  } catch (error) {
-    console.warn(error)
-  }
-}