@domql/utils 3.1.2 → 3.2.7

package/package.json

@@ -1,31 +1,52 @@
 {
   "name": "@domql/utils",
-  "version": "3.1.2",
+  "version": "3.2.7",
   "license": "MIT",
   "type": "module",
-  "module": "index.js",
-  "main": "index.js",
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
   "exports": {
     ".": {
-      "default": "./index.js",
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "require": "./dist/cjs/index.js",
+      "browser": "./dist/iife/index.js",
+      "default": "./dist/esm/index.js"
+    },
+    "./methods": {
+      "import": "./dist/esm/methods.js",
+      "require": "./dist/cjs/methods.js",
+      "default": "./dist/esm/methods.js"
+    },
+    "./*.js": {
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "default": "./dist/esm/*.js"
+    },
+    "./*": {
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "default": "./dist/esm/*.js"
     }
   },
   "source": "index.js",
   "files": [
-    "*.js",
-    "dist"
+    "dist",
+    "*.js"
   ],
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx esbuild *.js --target=es2017 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx esbuild *.js --target=node16 --format=cjs --outdir=dist/cjs",
-    "build": "npx rimraf -I dist; npm run build:cjs; npm run build:esm",
-    "prepublish": "npm run build; npm run copy:package:cjs"
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build": "node ../../build/build.js",
+    "prepublish": "npm run build && npm run copy:package:cjs",
+    "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=DomqlUtils --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:@domql/element"
   },
-  "gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {
     "@babel/core": "^7.26.0"
-  }
+  },
+  "browser": "./dist/iife/index.js",
+  "unpkg": "./dist/iife/index.js",
+  "jsdelivr": "./dist/iife/index.js",
+  "sideEffects": false
 }

package/props.js

@@ -4,11 +4,14 @@ import { DOMQ_PROPERTIES, PROPS_METHODS } from './keys.js'
 import { addEventFromProps } from './events.js'
 import { deepClone, deepMerge, exec } from './object.js'
 import { is, isArray, isFunction, isObject, isObjectLike } from './types.js'
+import { lowercaseFirstLetter } from './string.js'
+
+const RE_UPPER = /^[A-Z]/
+const RE_DIGITS = /^\d+$/
 
 export const createProps = (element, parent, key) => {
   const { props, __ref: ref } = element
   ref.__propsStack = []
-  // if (props !== undefined) ref.__initialProps = props
   if (props) ref.__initialProps = props
   else return {}
   if (!isObjectLike(props)) {
@@ -24,10 +27,19 @@ export function pickupPropsFromElement (obj, opts = {}) {
   for (const key in obj) {
     const value = obj[key]
 
+    // Move top-level onXxx handlers directly into on.xxx (v3 style)
+    const isEventHandler = key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key[2] === key[2].toUpperCase() && isFunction(value)
+    if (isEventHandler) {
+      const eventName = lowercaseFirstLetter(key.slice(2))
+      if (obj.on) obj.on[eventName] = value
+      delete obj[key]
+      continue
+    }
+
     const hasDefine = isObject(this.define?.[key])
     const hasGlobalDefine = isObject(this.context?.define?.[key])
-    const isElement = /^[A-Z]/.test(key) || /^\d+$/.test(key)
-    const isBuiltin = DOMQ_PROPERTIES.includes(key)
+    const isElement = RE_UPPER.test(key) || RE_DIGITS.test(key)
+    const isBuiltin = DOMQ_PROPERTIES.has(key)
 
     // If it's not a special case, move to props
     if (!isElement && !isBuiltin && !hasDefine && !hasGlobalDefine) {
@@ -47,7 +59,7 @@ export function pickupElementFromProps (obj = this, opts) {
     const value = obj.props[key]
 
     // Handle event handlers
-    const isEvent = key.startsWith('on') && key.length > 2
+    const isEvent = key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110
     const isFn = isFunction(value)
 
     if (isEvent && isFn) {
@@ -61,14 +73,19 @@ export function pickupElementFromProps (obj = this, opts) {
 
     const hasDefine = isObject(this.define?.[key])
     const hasGlobalDefine = isObject(this.context?.define?.[key])
-    const isElement = /^[A-Z]/.test(key) || /^\d+$/.test(key)
-    const isBuiltin = DOMQ_PROPERTIES.includes(key)
+    const isElement = RE_UPPER.test(key) || RE_DIGITS.test(key)
+    const isBuiltin = DOMQ_PROPERTIES.has(key)
 
     // Move qualifying properties back to obj root
     if (isElement || isBuiltin || hasDefine || hasGlobalDefine) {
-      obj[key] = value
-
-      if (obj.props) delete obj.props[key]
+      // Don't overwrite if root already has this property explicitly set
+      // Exception: null values should override to allow nullifying children from props
+      if (obj[key] === undefined || value === null) {
+        obj[key] = value
+        if (obj.props) delete obj.props[key]
+      }
+      // If root already has the property (e.g. from extends), keep it in props
+      // so functions like `text: ({ props }) => props.text` can still access it
     }
   }
 
@@ -84,8 +101,9 @@ export function propertizeElement (element = this) {
 }
 
 export function propertizeUpdate (params = {}) {
-  const obj = deepMerge({ on: {}, props: {} }, params)
-  return propertizeElement.call(this, obj)
+  if (!params.on) params.on = {}
+  if (!params.props) params.props = {}
+  return propertizeElement.call(this, params)
 }
 
 export const objectizeStringProperty = propValue => {
@@ -97,11 +115,7 @@ export const objectizeStringProperty = propValue => {
 
 export const propExists = (prop, stack) => {
   if (!prop || !stack.length) return false
-  const key = isObject(prop) ? JSON.stringify(prop) : prop
-  return stack.some(existing => {
-    const existingKey = isObject(existing) ? JSON.stringify(existing) : existing
-    return existingKey === key
-  })
+  return stack.includes(prop)
 }
 
 export const inheritParentProps = (element, parent) => {
@@ -129,9 +143,9 @@ export const inheritParentProps = (element, parent) => {
   return propsStack
 }
 
-export async function update (props, options) {
+export function update (props, options) {
   const element = this.__element
-  await element.update({ props }, options)
+  element.update({ props }, options)
 }
 
 // TODO: check bind with promise
@@ -144,17 +158,16 @@ export const removeDuplicateProps = propsStack => {
   const seen = new Set()
 
   return propsStack.filter(prop => {
-    if (!prop || PROPS_METHODS.includes(prop)) return false
-    const key = isObject(prop) ? JSON.stringify(prop) : prop
-    if (seen.has(key)) return false
-    seen.add(key)
+    if (!prop || PROPS_METHODS.has(prop)) return false
+    if (seen.has(prop)) return false
+    seen.add(prop)
     return true
   })
 }
 
 export const syncProps = (propsStack, element, opts) => {
   element.props = propsStack.reduce((mergedProps, v) => {
-    if (PROPS_METHODS.includes(v)) return mergedProps
+    if (PROPS_METHODS.has(v)) return mergedProps
     while (isFunction(v)) v = exec(v, element)
     return deepMerge(mergedProps, deepClone(v, { exclude: PROPS_METHODS }))
   }, {})
@@ -169,7 +182,7 @@ export const createPropsStack = (element, parent) => {
   let propsStack = ref.__propsStack || []
 
   // Get parent props
-  if (parent && parent.props) {
+  if (parent?.props) {
     const parentStack = inheritParentProps(element, parent)
     propsStack = [...parentStack]
   }
@@ -181,11 +194,12 @@ export const createPropsStack = (element, parent) => {
 
   // Add extends props
   if (isArray(ref.__extendsStack)) {
-    ref.__extendsStack.forEach(_extends => {
+    for (let i = 0; i < ref.__extendsStack.length; i++) {
+      const _extends = ref.__extendsStack[i]
       if (_extends.props && _extends.props !== props) {
         propsStack.push(_extends.props)
       }
-    })
+    }
   }
 
   // Remove duplicates and update reference
@@ -215,7 +229,10 @@ export const initProps = function (element, parent, options) {
   else {
     try {
       applyProps(element, parent)
-    } catch {
+    } catch (e) {
+      if (element.context?.designSystem?.verbose) {
+        console.warn('initProps error at', ref.path?.join('.'), e)
+      }
       element.props = {}
       ref.__propsStack = []
     }

package/state.js

@@ -5,7 +5,7 @@ import { STATE_METHODS } from './keys.js'
 import {
   deepClone,
   deepMerge,
-  execPromise,
+  exec,
   overwriteDeep,
   overwriteShallow
 } from './object.js'
@@ -14,16 +14,15 @@ import {
   isFunction,
   isObject,
   isObjectLike,
-  isString,
-  isUndefined
+  isString
 } from './types.js'
 
-export const checkForStateTypes = async element => {
+export const checkForStateTypes = element => {
   const { state: orig, props, __ref: ref } = element
   const state = props?.state || orig
   if (isFunction(state)) {
     ref.__state = state
-    return await execPromise(state, element)
+    return exec(state, element)
   } else if (is(state)('string', 'number')) {
     ref.__state = state
     return { value: state }
@@ -101,7 +100,7 @@ export const findInheritedState = (element, parent, options = {}) => {
 export const createInheritedState = (element, parent) => {
   const ref = element.__ref
   const inheritedState = findInheritedState(element, parent)
-  if (isUndefined(inheritedState)) return element.state
+  if (inheritedState === undefined) return element.state
 
   if (is(inheritedState)('object', 'array')) {
     return deepClone(inheritedState)
@@ -158,16 +157,17 @@ export const createNestedObjectByKeyPath = (path, value) => {
   const keys = path.split('/')
   const obj = {}
   let ref = obj
-  keys.forEach((key, index) => {
-    ref[key] = index === keys.length - 1 ? value || {} : {}
-    ref = ref[key]
-  })
+  const lastIdx = keys.length - 1
+  for (let i = 0; i <= lastIdx; i++) {
+    ref[keys[i]] = i === lastIdx ? value || {} : {}
+    ref = ref[keys[i]]
+  }
   return obj
 }
 
-export const applyDependentState = async (element, state) => {
+export const applyDependentState = (element, state) => {
   const { __element } = state //
-  const origState = await execPromise(__element?.state, element)
+  const origState = exec(__element?.state, element)
   if (!origState) return
   const dependentState = deepClone(origState, STATE_METHODS)
   const newDepends = { [element.key]: dependentState }

package/string.js

@@ -31,17 +31,17 @@ const brackRegex = {
 
 const getNestedValue = (obj, path) => {
   return path.split('.').reduce((acc, part) => {
-    return acc && acc[part] !== undefined ? acc[part] : undefined
+    return acc?.[part]
   }, obj)
 }
 
-export function replaceLiteralsWithObjectFields (str, state = {}, options = {}) {
+export function replaceLiteralsWithObjectFields (str, state, options = {}) {
   const { bracketsLength = 2 } = options
   const bracketPattern = bracketsLength === 3 ? '{{{' : '{{'
   if (!str.includes(bracketPattern)) return str
 
   const reg = brackRegex[bracketsLength]
-  const obj = state || {}
+  const obj = state || this.state || {}
 
   return str.replace(reg, (_, parentPath, variable) => {
     if (parentPath) {
@@ -56,14 +56,14 @@ export function replaceLiteralsWithObjectFields (str, state = {}, options = {})
       // If the variable is 'parent', return the value property
       const key = variable.trim()
       if (key === 'parent') {
-        return parentState.value !== undefined ? String(parentState.value) : ''
+        return String(parentState.value ?? '')
       }
 
       const value = getNestedValue(parentState, key)
-      return value !== undefined ? String(value) : ''
+      return String(value ?? '')
     } else {
       const value = getNestedValue(obj, variable.trim())
-      return value !== undefined ? String(value) : ''
+      return String(value ?? '')
     }
   })
 }
@@ -131,50 +131,32 @@ export const findKeyPosition = (str, key) => {
   }
 }
 
+const RE_OCTAL = /\\([0-7]{1,3})/g
+
 export const replaceOctalEscapeSequences = str => {
-  // Regex to match octal escape sequences
-  const octalRegex = /\\([0-7]{1,3})/g
-
-  // Replace each match with the corresponding character
-  return str.replace(octalRegex, (match, p1) => {
-    // Convert the octal value to a decimal integer
-    const octalValue = parseInt(p1, 8)
-    // Convert the decimal value to the corresponding character
-    const char = String.fromCharCode(octalValue)
-    return char
-  })
+  return str.replace(RE_OCTAL, (_, p1) => String.fromCharCode(parseInt(p1, 8)))
 }
 
 export const encodeNewlines = str => {
   return str
-    .split('\n')
-    .join('/////n')
-    .split('`')
-    .join('/////tilde')
-    .split('$')
-    .join('/////dlrsgn')
+    .replace(/\n/g, '/////n')
+    .replace(/`/g, '/////tilde')
+    .replace(/\$/g, '/////dlrsgn')
 }
 
 export const decodeNewlines = encodedStr => {
   return encodedStr
-    .split('/////n')
-    .join('\n')
-    .split('/////tilde')
-    .join('`')
-    .split('/////dlrsgn')
-    .join('$')
+    .replace(/\/\/\/\/\/n/g, '\n')
+    .replace(/\/\/\/\/\/tilde/g, '`')
+    .replace(/\/\/\/\/\/dlrsgn/g, '$')
 }
 
+const RE_NON_ALNUM = /[^a-zA-Z0-9\s]/g
+
 export const customEncodeURIComponent = str => {
-  return str
-    .split('')
-    .map(char => {
-      if (/[^a-zA-Z0-9\s]/.test(char)) {
-        return '%' + char.charCodeAt(0).toString(16).toUpperCase()
-      }
-      return char
-    })
-    .join('')
+  return str.replace(RE_NON_ALNUM, char =>
+    '%' + char.charCodeAt(0).toString(16).toUpperCase()
+  )
 }
 
 export const customDecodeURIComponent = encodedStr => {

package/tags.js

@@ -1,21 +1,11 @@
 'use strict'
 
 export const HTML_TAGS = {
-  root: [
-    'body',
-    'html'
-  ],
+  root: ['body', 'html'],
 
-  head: [
-    'title',
-    'base',
-    'meta',
-    'style',
-    'noscript',
-    'script'
-  ],
+  head: ['title', 'base', 'meta', 'style', 'noscript', 'script'],
 
-  body: [
+  body: new Set([
     'string',
     'style',
     'fragment',
@@ -140,8 +130,47 @@ export const HTML_TAGS = {
 
     // SVG
     'svg',
-    'path'
-  ]
+    'path',
+    'circle',
+    'ellipse',
+    'line',
+    'polygon',
+    'polyline',
+    'rect',
+    'g',
+    'defs',
+    'symbol',
+    'use',
+    'text',
+    'tspan',
+    'image',
+    'clipPath',
+    'mask',
+    'pattern',
+    'marker',
+    'linearGradient',
+    'radialGradient',
+    'stop',
+    'filter',
+    'feGaussianBlur',
+    'feOffset',
+    'feMerge',
+    'feMergeNode',
+    'feBlend',
+    'feColorMatrix',
+    'feFlood',
+    'feComposite',
+    'foreignObject'
+  ])
 }
 
-export const isValidHtmlTag = arg => HTML_TAGS.body.includes(arg)
+export const SVG_TAGS = new Set([
+  'svg', 'path', 'circle', 'ellipse', 'line', 'polygon', 'polyline',
+  'rect', 'g', 'defs', 'symbol', 'use', 'text', 'tspan', 'image',
+  'clipPath', 'mask', 'pattern', 'marker', 'linearGradient',
+  'radialGradient', 'stop', 'filter', 'feGaussianBlur', 'feOffset',
+  'feMerge', 'feMergeNode', 'feBlend', 'feColorMatrix', 'feFlood',
+  'feComposite', 'foreignObject'
+])
+
+export const isValidHtmlTag = arg => HTML_TAGS.body.has(arg)

package/triggerEvent.js

@@ -0,0 +1,76 @@
+'use strict'
+
+import { isFunction } from './types.js'
+
+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]
+}
+
+export const applyEvent = (param, element, state, context, options) => {
+  if (!isFunction(param)) return
+  const result = param.call(
+    element,
+    element,
+    state || element.state,
+    context || element.context,
+    options
+  )
+  if (result && typeof result.then === 'function') {
+    result.catch(() => {})
+  }
+  return result
+}
+
+export const triggerEventOn = (param, element, options) => {
+  if (!element) {
+    throw new Error('Element is required')
+  }
+  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
+) => {
+  if (!isFunction(param)) return
+  const result = param.call(
+    element,
+    updatedObj,
+    element,
+    state || element.state,
+    context || element.context,
+    options
+  )
+  if (result && typeof result.then === 'function') {
+    result.catch(() => {})
+  }
+  return result
+}
+
+export const triggerEventOnUpdate = (param, updatedObj, element, options) => {
+  const appliedFunction = getOnOrPropsEvent(param, element)
+  if (appliedFunction) {
+    const { state, context } = element
+    return applyEventUpdate(
+      appliedFunction,
+      updatedObj,
+      element,
+      state,
+      context,
+      options
+    )
+  }
+}

package/types.js

@@ -4,7 +4,7 @@ import { isHtmlElement, isNode } from './node.js'
 
 export const isObject = arg => {
   if (arg === null) return false
-  return (typeof arg === 'object') && (arg.constructor === Object)
+  return typeof arg === 'object' && arg.constructor === Object
 }
 
 export const isString = arg => typeof arg === 'string'
@@ -24,25 +24,12 @@ 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')
+  return typeof arg === 'object'
 }
 
-export const isDefined = arg => {
-  return isObject(arg) ||
-    isObjectLike(arg) ||
-    isString(arg) ||
-    isNumber(arg) ||
-    isFunction(arg) ||
-    isArray(arg) ||
-    isObjectLike(arg) ||
-    isBoolean(arg) ||
-    isDate(arg) ||
-    isNull(arg)
-}
+export const isDefined = arg => arg !== undefined
 
-export const isUndefined = arg => {
-  return arg === undefined
-}
+export const isUndefined = arg => arg === undefined
 
 export const TYPES = {
   boolean: isBoolean,
@@ -59,14 +46,10 @@ export const TYPES = {
   defined: isDefined
 }
 
-export const is = (arg) => {
-  return (...args) => {
-    return args.map(val => TYPES[val](arg)).filter(v => v).length > 0
-  }
+export const is = arg => {
+  return (...args) => args.some(val => TYPES[val](arg))
 }
 
-export const isNot = (arg) => {
-  return (...args) => {
-    return args.map(val => TYPES[val](arg)).filter(v => v).length === 0
-  }
+export const isNot = arg => {
+  return (...args) => !args.some(val => TYPES[val](arg))
 }

package/dist/cjs/package.json

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