@domql/utils 2.5.187 → 3.0.0

package/props.js

@@ -0,0 +1,249 @@
+'use strict'
+
+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'
+
+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)) {
+    ref.__propsStack.push(props)
+    return {}
+  }
+  return { ...props }
+}
+
+export function pickupPropsFromElement (element, opts = {}) {
+  const cachedKeys = opts.cachedKeys || []
+
+  for (const key in element) {
+    const value = element[key]
+
+    const hasDefine = isObject(element.define?.[key])
+    const hasGlobalDefine = isObject(element.context?.define?.[key])
+    const isElement = /^[A-Z]/.test(key) || /^\d+$/.test(key)
+    const isBuiltin = DOMQ_PROPERTIES.includes(key)
+
+    // If it's not a special case, move to props
+    if (!isElement && !isBuiltin && !hasDefine && !hasGlobalDefine) {
+      element.props[key] = value
+      delete element[key]
+      cachedKeys.push(key)
+    }
+  }
+
+  return element
+}
+
+export function pickupElementFromProps (element, opts) {
+  const cachedKeys = opts.cachedKeys || []
+
+  for (const key in element.props) {
+    const value = element.props[key]
+
+    // Handle event handlers
+    const isEvent = key.startsWith('on') && key.length > 2
+    const isFn = isFunction(value)
+
+    if (isEvent && isFn) {
+      addEventFromProps(key, element)
+      delete element.props[key]
+      continue
+    }
+
+    // Skip if key was originally from element
+    if (cachedKeys.includes(key)) continue
+
+    const hasDefine = isObject(element.define?.[key])
+    const hasGlobalDefine = isObject(element.context?.define?.[key])
+    const isElement = /^[A-Z]/.test(key) || /^\d+$/.test(key)
+    const isBuiltin = DOMQ_PROPERTIES.includes(key)
+
+    // Move qualifying properties back to element root
+    if (isElement || isBuiltin || hasDefine || hasGlobalDefine) {
+      element[key] = value
+      delete element.props[key]
+    }
+  }
+
+  return element
+}
+
+// Helper function to maintain compatibility with original propertizeElement
+export function propertizeElement (element, opts = {}) {
+  const cachedKeys = []
+  pickupPropsFromElement(element, { cachedKeys })
+  pickupElementFromProps(element, { cachedKeys })
+  return element
+}
+
+export const objectizeStringProperty = propValue => {
+  if (is(propValue)('string', 'number')) {
+    return { inheritedString: propValue }
+  }
+  return 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
+  })
+}
+
+export const inheritParentProps = (element, parent) => {
+  const { __ref: ref } = element
+  const propsStack = ref.__propsStack || []
+  const parentProps = parent.props
+
+  if (!parentProps) return propsStack
+
+  const matchParentKeyProps = parentProps[element.key]
+  const matchParentChildProps = parentProps.childProps
+
+  // Order matters: key-specific props should be added after childProps
+  const ignoreChildProps = element.props?.ignoreChildProps
+  if (matchParentChildProps && !ignoreChildProps) {
+    const childProps = objectizeStringProperty(matchParentChildProps)
+    propsStack.unshift(childProps)
+  }
+
+  if (matchParentKeyProps) {
+    const keyProps = objectizeStringProperty(matchParentKeyProps)
+    propsStack.unshift(keyProps)
+  }
+
+  return propsStack
+}
+
+export async function update (props, options) {
+  const element = this.__element
+  await element.update({ props }, options)
+}
+
+// TODO: check bind with promise
+export function setPropsPrototype (element) {
+  const methods = { update: update.bind(element.props), __element: element }
+  Object.setPrototypeOf(element.props, methods)
+}
+
+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)
+    return true
+  })
+}
+
+export const syncProps = (propsStack, element, opts) => {
+  element.props = propsStack.reduce((mergedProps, v) => {
+    if (PROPS_METHODS.includes(v)) return mergedProps
+    while (isFunction(v)) v = exec(v, element)
+    return deepMerge(mergedProps, deepClone(v, { exclude: PROPS_METHODS }))
+  }, {})
+  setPropsPrototype(element)
+  return element.props
+}
+
+export const createPropsStack = (element, parent) => {
+  const { props, __ref: ref } = element
+
+  // Start with parent props
+  let propsStack = ref.__propsStack || []
+
+  // Get parent props
+  if (parent && parent.props) {
+    const parentStack = inheritParentProps(element, parent)
+    propsStack = [...parentStack]
+  }
+
+  // Add current props
+  if (isObject(props)) propsStack.push(props)
+  else if (props === 'inherit' && parent?.props) propsStack.push(parent.props)
+  else if (props) propsStack.push(props)
+
+  // Add extends props
+  if (isArray(ref.__extendsStack)) {
+    ref.__extendsStack.forEach(_extends => {
+      if (_extends.props && _extends.props !== props) {
+        propsStack.push(_extends.props)
+      }
+    })
+  }
+
+  // Remove duplicates and update reference
+  ref.__propsStack = removeDuplicateProps(propsStack)
+  return ref.__propsStack
+}
+
+export const applyProps = (element, parent) => {
+  const { __ref: ref } = element
+
+  // Create a fresh props stack
+  const propsStack = createPropsStack(element, parent)
+
+  // Update the element
+  if (propsStack.length) {
+    syncProps(propsStack, element)
+  } else {
+    ref.__propsStack = []
+    element.props = {}
+  }
+}
+
+export const initProps = function (element, parent, options) {
+  const { __ref: ref } = element
+
+  if (ref.__if) applyProps(element, parent)
+  else {
+    try {
+      applyProps(element, parent)
+    } catch {
+      element.props = {}
+      ref.__propsStack = []
+    }
+  }
+
+  setPropsPrototype(element)
+
+  return element
+}
+
+export const updateProps = (newProps, element, parent) => {
+  const { __ref: ref } = element
+  const propsStack = ref.__propsStack || []
+
+  // Create a new array to avoid mutating the original
+  let newStack = [...propsStack]
+
+  // Add parent props first if they exist
+  const parentProps = inheritParentProps(element, parent)
+  if (parentProps.length) {
+    newStack = [...parentProps, ...newStack]
+  }
+
+  // Add new props if they exist
+  if (newProps) {
+    newStack = [newProps, ...newStack]
+  }
+
+  // Clean up duplicates
+  ref.__propsStack = removeDuplicateProps(newStack)
+
+  if (ref.__propsStack.length) {
+    syncProps(ref.__propsStack, element)
+  }
+
+  return element
+}

package/scope.js

@@ -0,0 +1,8 @@
+'use strict'
+
+// Create scope - shared object across the elements to the own or the nearest parent
+export const createScope = (element, parent) => {
+  const { __ref: ref } = element
+  // If the element doesn't have a scope, initialize it using the parent's scope or the root's scope.
+  if (!element.scope) element.scope = parent.scope || ref.root?.scope || {}
+}

package/state.js

@@ -0,0 +1,208 @@
+'use strict'
+
+import { addProtoToArray } from './array.js'
+import { STATE_METHODS } from './keys.js'
+import {
+  deepClone,
+  deepMerge,
+  execPromise,
+  overwriteDeep,
+  overwriteShallow
+} from './object.js'
+import {
+  is,
+  isFunction,
+  isObject,
+  isObjectLike,
+  isString,
+  isUndefined
+} from './types.js'
+
+export const checkForStateTypes = async element => {
+  const { state: orig, props, __ref: ref } = element
+  const state = props?.state || orig
+  if (isFunction(state)) {
+    ref.__state = state
+    return await execPromise(state, element)
+  } else if (is(state)('string', 'number')) {
+    ref.__state = state
+    return { value: state }
+  } else if (state === true) {
+    ref.__state = element.key
+    return {}
+  } else if (state) {
+    ref.__hasRootState = true
+    return state
+  } else {
+    return false
+  }
+}
+
+export const getRootStateInKey = (stateKey, parentState) => {
+  if (!stateKey.includes('~/')) return
+  const arr = stateKey.split('~/')
+  if (arr.length > 1) return parentState.root
+}
+
+export const getParentStateInKey = (stateKey, parentState) => {
+  if (!stateKey.includes('../')) return
+  const arr = stateKey.split('../')
+  const arrLength = arr.length - 1
+  for (let i = 0; i < arrLength; i++) {
+    if (!parentState.parent) return null
+    parentState = parentState.parent
+  }
+  return parentState
+}
+
+export const getChildStateInKey = (stateKey, parentState, options = {}) => {
+  const arr = isString(stateKey) ? stateKey.split('/') : [stateKey]
+  const arrLength = arr.length - 1
+  for (let i = 0; i < arrLength; i++) {
+    const childKey = arr[i]
+    const grandChildKey = arr[i + 1]
+
+    if (childKey === '__proto__' || grandChildKey === '__proto__') return
+
+    let childInParent = parentState[childKey]
+    if (!childInParent) childInParent = parentState[childKey] = {} // check for array
+    if (!childInParent[grandChildKey]) childInParent[grandChildKey] = {} // check for array
+
+    stateKey = grandChildKey
+    parentState = childInParent
+  }
+  if (options.returnParent) return parentState
+  return parentState[stateKey]
+}
+
+export const findInheritedState = (element, parent, options = {}) => {
+  const ref = element.__ref
+  let stateKey = ref.__state
+  if (!checkIfInherits(element)) return
+
+  const rootState = getRootStateInKey(stateKey, parent.state)
+  let parentState = parent.state
+
+  if (rootState) {
+    parentState = rootState
+    stateKey = stateKey.replaceAll('~/', '')
+  } else {
+    const findGrandParentState = getParentStateInKey(stateKey, parent.state)
+    if (findGrandParentState) {
+      parentState = findGrandParentState
+      stateKey = stateKey.replaceAll('../', '')
+    }
+  }
+
+  if (!parentState) return
+  return getChildStateInKey(stateKey, parentState, options)
+}
+
+export const createInheritedState = (element, parent) => {
+  const ref = element.__ref
+  const inheritedState = findInheritedState(element, parent)
+  if (isUndefined(inheritedState)) return element.state
+
+  if (is(inheritedState)('object', 'array')) {
+    return deepClone(inheritedState)
+  } else if (is(inheritedState)('string', 'number', 'boolean')) {
+    ref.__stateType = typeof inheritedState
+    return { value: inheritedState }
+  }
+
+  console.warn(ref.__state, 'is not present. Replacing with', {})
+}
+
+export const checkIfInherits = element => {
+  const { __ref: ref } = element
+  const stateKey = ref?.__state
+  if (stateKey && is(stateKey)('number', 'string', 'boolean')) return true
+  return false
+}
+
+export const isState = function (state) {
+  if (!isObjectLike(state)) return false
+  return Boolean(
+    state.update &&
+      state.parse &&
+      state.clean &&
+      state.create &&
+      state.parent &&
+      state.destroy &&
+      state.rootUpdate &&
+      state.parentUpdate &&
+      state.keys &&
+      state.values &&
+      state.toggle &&
+      state.replace &&
+      state.quietUpdate &&
+      state.quietReplace &&
+      state.add &&
+      state.apply &&
+      state.applyReplace &&
+      state.setByPath &&
+      state.setPathCollection &&
+      state.removeByPath &&
+      state.removePathCollection &&
+      state.getByPath &&
+      state.applyFunction &&
+      state.__element &&
+      state.__children
+  )
+}
+
+export const createNestedObjectByKeyPath = (path, value) => {
+  if (!path) {
+    return value || {}
+  }
+  const keys = path.split('/')
+  const obj = {}
+  let ref = obj
+  keys.forEach((key, index) => {
+    ref[key] = index === keys.length - 1 ? value || {} : {}
+    ref = ref[key]
+  })
+  return obj
+}
+
+export const applyDependentState = async (element, state) => {
+  const { __element } = state //
+  const origState = await execPromise(__element?.state, element)
+  if (!origState) return
+  const dependentState = deepClone(origState, STATE_METHODS)
+  const newDepends = { [element.key]: dependentState }
+
+  const __depends = isObject(origState.__depends)
+    ? { ...origState.__depends, ...newDepends }
+    : newDepends
+
+  if (Array.isArray(origState)) {
+    addProtoToArray(origState, {
+      ...Object.getPrototypeOf(origState),
+      __depends
+    })
+  } else {
+    Object.setPrototypeOf(origState, {
+      ...Object.getPrototypeOf(origState),
+      __depends
+    })
+  }
+
+  return dependentState
+}
+
+export const overwriteState = (state, obj, options = {}) => {
+  const { overwrite } = options
+  if (!overwrite) return
+
+  const shallow = overwrite === 'shallow'
+  const merge = overwrite === 'merge'
+
+  if (merge) {
+    deepMerge(state, obj, STATE_METHODS)
+    return
+  }
+
+  const overwriteFunc = shallow ? overwriteShallow : overwriteDeep
+  overwriteFunc(state, obj, STATE_METHODS)
+}

package/string.js

@@ -25,34 +25,50 @@ export const trimStringFromSymbols = (str, characters) => {
  * @returns {string} The modified string with placeholders replaced by values from the object.
  */
 const brackRegex = {
-  2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
-  3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
+  2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*}}/g,
+  3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*}}}/g
 }
 
-export function replaceLiteralsWithObjectFields (str, options = {}, forcedState) {
-  if (!str.includes(options.bracketsLength === 3 ? '{{{' : '{{')) return str
-  const reg = brackRegex[options.bracketsLength || 2]
-  const obj = forcedState || this?.state || {}
+const getNestedValue = (obj, path) => {
+  return path.split('.').reduce((acc, part) => {
+    return acc && acc[part] !== undefined ? acc[part] : undefined
+  }, obj)
+}
+
+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 || {}
+
   return str.replace(reg, (_, parentPath, variable) => {
     if (parentPath) {
-      const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length
+      const parentLevels = (parentPath.match(/\.\.\//g) || []).length
       let parentState = obj
+
       for (let i = 0; i < parentLevels; i++) {
+        if (!parentState || !parentState.parent) return ''
         parentState = parentState.parent
-        if (!parentState) {
-          return '' // Return an empty string if the parent level doesn't exist
-        }
       }
-      const value = parentState[variable.trim()]
-      return value !== undefined ? `${value}` : ''
+
+      // If the variable is 'parent', return the value property
+      const key = variable.trim()
+      if (key === 'parent') {
+        return parentState.value !== undefined ? String(parentState.value) : ''
+      }
+
+      const value = getNestedValue(parentState, key)
+      return value !== undefined ? String(value) : ''
     } else {
-      const value = obj[variable.trim()]
-      return value !== undefined ? `${value}` : ''
+      const value = getNestedValue(obj, variable.trim())
+      return value !== undefined ? String(value) : ''
     }
   })
 }
 
-export const lowercaseFirstLetter = (inputString) => {
+export const lowercaseFirstLetter = inputString => {
   return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`
 }
 
@@ -98,7 +114,10 @@ export const findKeyPosition = (str, key) => {
       // If braceCount is 0 and we find the end of the object/array
       if (braceCount === 0) {
         endLineNumber = i + 1
-        endColumn = lines[i].lastIndexOf('}') !== -1 ? lines[i].lastIndexOf('}') + 2 : lines[i].length + 1
+        endColumn =
+          lines[i].lastIndexOf('}') !== -1
+            ? lines[i].lastIndexOf('}') + 2
+            : lines[i].length + 1
         break
       }
     }
@@ -112,7 +131,7 @@ export const findKeyPosition = (str, key) => {
   }
 }
 
-export const replaceOctalEscapeSequences = (str) => {
+export const replaceOctalEscapeSequences = str => {
   // Regex to match octal escape sequences
   const octalRegex = /\\([0-7]{1,3})/g
 
@@ -126,23 +145,40 @@ export const replaceOctalEscapeSequences = (str) => {
   })
 }
 
-export const encodeNewlines = (str) => {
-  return str.split('\n').join('/////n').split('`').join('/////tilde').split('$').join('/////dlrsgn')
+export const encodeNewlines = str => {
+  return str
+    .split('\n')
+    .join('/////n')
+    .split('`')
+    .join('/////tilde')
+    .split('$')
+    .join('/////dlrsgn')
 }
 
-export const decodeNewlines = (encodedStr) => {
-  return encodedStr.split('/////n').join('\n').split('/////tilde').join('`').split('/////dlrsgn').join('$')
+export const decodeNewlines = encodedStr => {
+  return encodedStr
+    .split('/////n')
+    .join('\n')
+    .split('/////tilde')
+    .join('`')
+    .split('/////dlrsgn')
+    .join('$')
 }
 
-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('')
+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('')
 }
 
-export const customDecodeURIComponent = (encodedStr) => {
-  return encodedStr.replace(/%[0-9A-Fa-f]{2}/g, match => String.fromCharCode(parseInt(match.slice(1), 16)))
+export const customDecodeURIComponent = encodedStr => {
+  return encodedStr.replace(/%[0-9A-Fa-f]{2}/g, match =>
+    String.fromCharCode(parseInt(match.slice(1), 16))
+  )
 }

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]
+}