domql 1.5.136 → 1.6.0

package/src/element/state.js

@@ -1,35 +1,64 @@
 'use strict'
 
-import { on } from '../event'
 import { triggerEventOn } from '@domql/event'
-import { is, isObject, exec, isFunction, isUndefined } from '@domql/utils'
+import { is, isObject, exec, isFunction, isUndefined, arrayContainsOtherArray, isObjectLike, isArray, removeFromArray, removeFromObject } from '@domql/utils'
 import { deepClone, overwriteShallow, overwriteDeep } from '../utils'
+import { create } from '.'
 
 export const IGNORE_STATE_PARAMS = [
-  'update', 'parse', 'clean', 'create', 'parent', '__element', '__depends', '__ref', '__root', 'rootUpdate'
+  'update', 'parse', 'clean', 'create', 'destroy', 'remove', 'apply', 'rootUpdate',
+  'parent', '__element', '__depends', '__ref', '__children', '__root'
 ]
 
-export const parseState = function () {
+export const parse = function () {
   const state = this
-  const parseState = {}
-  for (const param in state) {
-    if (!IGNORE_STATE_PARAMS.includes(param)) {
-      parseState[param] = state[param]
+  if (isObject(state)) {
+    const obj = {}
+    for (const param in state) {
+      if (!IGNORE_STATE_PARAMS.includes(param)) {
+        obj[param] = state[param]
+      }
     }
+    return obj
+  } else if (isArray(state)) {
+    return state.filter(item => !IGNORE_STATE_PARAMS.includes(item))
   }
-  return parseState
 }
 
-export const cleanState = function () {
+export const clean = function (options = {}) {
   const state = this
   for (const param in state) {
     if (!IGNORE_STATE_PARAMS.includes(param)) {
       delete state[param]
     }
   }
+  state.update(state, { skipOverwrite: true, options })
   return state
 }
 
+export const destroy = function () {
+  const state = this
+  const element = state.__element
+  delete element.state
+  element.state = state.parent
+
+  if (state.parent) {
+    delete state.parent.__children[element.key]
+  }
+
+  if (state.__children) {
+    for (const key in state.__children) {
+      const child = state.__children[key]
+      if (child.state) {
+        child.parent = state.parent
+      }
+    }
+  }
+
+  element.state.update()
+  return element.state
+}
+
 export const rootUpdate = function (obj, options = {}) {
   const state = this
   if (!state) return
@@ -41,40 +70,45 @@ export const updateState = function (obj, options = {}) {
   const state = this
   const element = state.__element
   const __elementRef = element.__ref
-  state.parent = element.parent.state
-
-  for (const param in state) if (isUndefined(state[param])) delete state[param]
+  const parentState = element.parent.state
+  state.parent = parentState
 
-  if (!state.__element) createState(element, element.parent)
+  for (const param in state) {
+    if (isUndefined(state[param])) {
+      delete state[param]
+    }
+  }
 
-  // run `on.stateUpdated`
-  if (element.on && isFunction(element.on.initStateUpdated)) {
-    const initReturns = on.initStateUpdated(element.on.initStateUpdated, element, state, obj)
-    if (initReturns === false) return
+  if (!state.__element) {
+    create(element, element.parent)
   }
 
-  const stateKey = __elementRef.__state
-  if (stateKey) {
-    // TODO: check for double parent
-    if (state.parent && state.parent[stateKey]) {
-      const keyInParentState = state.parent[stateKey]
-      if (keyInParentState && !options.stopStatePropogation) {
-        if (__elementRef.__stateType === 'string') {
-          return state.parent.update({ [stateKey]: obj.value }, options)
-        }
-        return state.parent.update({ [stateKey]: obj }, options)
-      }
-    }
-  } else {
-    if (options && options.shallow) {
+  const initStateUpdateReturns = triggerEventOn('initStateUpdated', element, obj)
+  if (initStateUpdateReturns === false) return element
+
+  if (!options.skipOverwrite) {
+    if (options.shallow) {
       overwriteShallow(state, obj, IGNORE_STATE_PARAMS)
     } else {
       overwriteDeep(state, obj, IGNORE_STATE_PARAMS)
     }
   }
 
-  // TODO: try debounce
-  if (!options.preventUpdate) { element.update({}, options) } else if (options.preventUpdate === 'recursive') { element.update({}, { ...options, preventUpdate: true }) }
+  const stateKey = __elementRef.__state
+  const shouldPropagateState = stateKey && parentState && parentState[stateKey] && !options.stopStatePropagation
+  if (shouldPropagateState) {
+    const isStringState = (__elementRef.__stateType === 'string')
+    const value = isStringState ? state.value : state.parse()
+    parentState[stateKey] = value
+    parentState.update(value, { skipOverwrite: true, ...options })
+    return state
+  }
+
+  if (!options.preventUpdate) {
+    element.update({}, options)
+  } else if (options.preventUpdate === 'recursive') {
+    element.update({}, { ...options, preventUpdate: true })
+  }
 
   if (state.__depends) {
     for (const el in state.__depends) {
@@ -83,29 +117,99 @@ export const updateState = function (obj, options = {}) {
     }
   }
 
-  if (!options.preventUpdateListener && element.on && isFunction(element.on.stateUpdated)) {
-    on.stateUpdated(element.on.stateUpdated, element, state, obj)
+  if (!options.preventUpdateListener) {
+    triggerEventOn('stateUpdated', element, obj)
   }
 
   return state
 }
 
+export const remove = function (key, options) {
+  const state = this
+  if (isArray(state)) removeFromArray(state, key)
+  if (isObject(state)) removeFromObject(state, key)
+  return state.update(state, { skipOverwrite: true, options })
+}
+
+export const apply = function (func, options) {
+  const state = this
+  if (isFunction(func)) {
+    func(state)
+    return state.update(state, { skipOverwrite: true, options })
+  }
+}
+
+const getParentStateInKey = (stateKey, parentState) => {
+  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
+}
+
+const getChildStateInKey = (stateKey, parentState) => {
+  const arr = stateKey.split('/')
+  const arrLength = arr.length - 1
+  for (let i = 0; i < arrLength; i++) {
+    const childKey = arr[i]
+    const grandChildKey = arr[i + 1]
+    const childInParent = parentState[childKey]
+    if (childInParent && childInParent[grandChildKey]) {
+      stateKey = grandChildKey
+      parentState = childInParent
+    } else return
+  }
+  return parentState[stateKey]
+}
+
+const createInheritedState = function (element, parent) {
+  const __elementRef = element.__ref
+  let stateKey = __elementRef.__state
+  if (!stateKey) return element.state
+
+  let parentState = parent.state
+  if (stateKey.includes('../')) {
+    parentState = getParentStateInKey(stateKey, parent.state)
+    stateKey = stateKey.replaceAll('../', '')
+  }
+  if (!parentState) return {}
+
+  const keyInParentState = getChildStateInKey(stateKey, parentState)
+  if (!keyInParentState) return {}
+
+  if (is(keyInParentState)('object', 'array')) {
+    return deepClone(keyInParentState)
+  } else if (is(keyInParentState)('string', 'number')) {
+    __elementRef.__stateType = 'string'
+    return { value: keyInParentState }
+  }
+
+  console.warn(stateKey, 'is not present. Replacing with', {})
+  return {}
+}
+
 export const createState = function (element, parent, opts) {
   const skip = (opts && opts.skip) ? opts.skip : false
-
   let { state, __ref: __elementRef } = element
 
-  if (isFunction(state)) state = exec(state, element)
+  if (isFunction(state)) element.state = exec(state, element)
 
   if (is(state)('string', 'number')) {
     __elementRef.__state = state
-    state = {}
+    element.state = {}
   }
   if (state === true) {
     __elementRef.__state = element.key
-    state = {}
+    element.state = {}
   }
 
+  // trigger `on.stateInit`
+  triggerEventOn('stateInit', element)
+
+  state = element.state = createInheritedState(element, parent)
+
   if (!state) {
     if (parent && parent.state) return parent.state
     return {}
@@ -113,41 +217,6 @@ export const createState = function (element, parent, opts) {
     __elementRef.__hasRootState = true
   }
 
-  // trigger `on.stateInit`
-  triggerEventOn('stateInit', element)
-
-  let stateKey = __elementRef.__state
-  if (stateKey) {
-    let parentState = parent.state
-    const parentKeysArr = stateKey.split('../')
-    for (let i = 1; i < parentKeysArr.length; i++) {
-      stateKey = parentKeysArr[i]
-      parentState = parentState.parent
-    }
-    const childrenKeysArr = stateKey.split('.')
-    for (let i = 0; i < childrenKeysArr.length; i++) {
-      const childKey = childrenKeysArr[i]
-      const grandChildKey = childrenKeysArr[i + 1]
-      const childInParent = parentState[childKey]
-      if (childInParent && childInParent[grandChildKey]) {
-        stateKey = grandChildKey
-        parentState = childInParent
-      }
-    }
-    if (parentState && parentState[stateKey]) {
-      const keyInParentState = parentState[stateKey]
-      if (is(keyInParentState)('object', 'array')) {
-        state = deepClone(keyInParentState)
-      } else if (is(keyInParentState)('string', 'number')) {
-        state = { value: keyInParentState }
-        __elementRef.__stateType = 'string'
-      } else if (isUndefined(keyInParentState)) {
-        console.warn(stateKey, 'is not in present', 'replacing with ', {})
-        state = {}
-      }
-    }
-  }
-
   // reference other state
   // TODO: check why __ref is assigned with element
   // /docs/intro
@@ -166,19 +235,37 @@ export const createState = function (element, parent, opts) {
   // NOTE: Only true when 'onlyResolveExtends' option is set to true
   if (skip) return state
 
-  state.clean = cleanState
-  state.parse = parseState
+  applyMethods(element, state)
+
+  // trigger `on.stateCreated`
+  triggerEventOn('stateCreated', element)
+
+  return state
+}
+
+export const isState = function (state) {
+  if (!isObjectLike(state)) return false
+  const keys = Object.keys(state)
+  return arrayContainsOtherArray(keys, ['update', 'parse', 'clean', 'create', 'parent', 'rootUpdate'])
+}
+
+const applyMethods = (element, state) => {
+  const __elementRef = element.__ref
+
+  state.clean = clean
+  state.parse = parse
+  state.destroy = destroy
   state.update = updateState
   state.rootUpdate = rootUpdate
   state.create = createState
+  state.remove = remove
+  state.apply = apply
   state.parent = element.parent.state
   state.__element = element
+  state.__children = {}
   state.__root = __elementRef.__root ? __elementRef.__root.state : state
 
-  // trigger `on.stateCreated`
-  triggerEventOn('stateCreated', element)
-
-  return state
+  if (state.parent) state.parent.__children[element.key] = state
 }
 
 export default createState

package/src/element/update.js

@@ -1,14 +1,14 @@
 'use strict'
 
 import { window } from '@domql/globals'
-import { diff, isFunction, isNumber, isObject, isString, createSnapshotId } from '@domql/utils'
+import { isFunction, isNumber, isObject, isString } from '@domql/utils'
 import { applyEvent, triggerEventOn } from '@domql/event'
-import { merge, overwrite } from '../utils'
+import { isMethod } from '@domql/methods'
+import { createSnapshotId } from '@domql/key'
 
-import { on } from '../event'
+import { merge, overwriteDeep } from '../utils'
 import create from './create'
 import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
-import { isMethod } from './methods'
 import { registry } from './mixins'
 import { updateProps } from './props'
 import createState from './state'
@@ -33,79 +33,32 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   let __ref = element.__ref
   if (!__ref) __ref = element.__ref = {}
 
-  const { currentSnapshot, calleeElement } = options
-  if (!calleeElement) {
-    __ref.__currentSnapshot = snapshot.snapshotId()
-  }
-
-  const snapshotOnCallee = __ref.__currentSnapshot ||
-    (calleeElement && calleeElement.__ref && calleeElement.__currentSnapshot)
-  if (snapshotOnCallee && currentSnapshot < snapshotOnCallee) {
-    // TODO: stop previous update
-  }
+  const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options)
+  if (snapshotHasUpdated) return
 
   if (isString(params) || isNumber(params)) {
     params = { text: params }
   }
 
-  if (isFunction(element.if)) {
-    // TODO: move as fragment
-    const ifPassed = element.if(element, element.state)
-    const itWasFalse = __ref.__if !== true
+  const ifFails = checkIfOnUpdate(element, options)
+  if (ifFails) return
 
-    if (ifPassed) __ref.__if = true
-    if (itWasFalse && ifPassed) {
-      delete element.__hash
-      delete element.extend
-      if (!__ref.__hasRootState) delete element.state
-      if (__ref.__state) element.state = __ref.__state
-      const created = create(element, element.parent, element.key)
-      if (!options.preventUpdate) {
-        if (element.on && isFunction(element.on.update)) {
-          applyEvent(element.on.update, created, created.state)
-        }
-      }
-      return created
-    } else if (element.node && !ifPassed) {
-      element.node.remove()
-      delete __ref.__if
-    }
-  }
-
-  if (__ref.__state) {
-    const keyInParentState = parent.state[__ref.__state]
-    if (keyInParentState) {
-      const newState = __ref.__stateType === 'string'
-        ? createState(element, parent)
-        : createState(element, parent)
-      const changes = diff(newState.parse(), element.state.parse())
-
-      // run `on.stateUpdated`
-      if (element.on && isFunction(element.on.initStateUpdated)) {
-        const initReturns = on.initStateUpdated(element.on.initStateUpdated, element, element.state, changes)
-        if (initReturns === false) return
-      }
-
-      element.state = newState
-
-      if (!options.preventUpdateListener && element.on && isFunction(element.on.stateUpdated)) {
-        on.stateUpdated(element.on.stateUpdated, element, element.state, changes)
-      }
-    }
-  } else if (!__ref.__hasRootState) element.state = (parent && parent.state) || {}
+  const inheritState = inheritStateUpdates(element, options)
+  if (inheritState === false) return
 
   if (__ref.__if && !options.preventPropsUpdate) {
     const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps)
-    // if (hasParentProps) console.log(hasParentProps.value)
-    updateProps(params.props || (hasParentProps && {}), element, parent)
+    const hasFunctionInProps = element.__ref.__props.filter(v => isFunction(v))
+    const props = params.props || hasParentProps || hasFunctionInProps.length
+    if (props) updateProps(props, element, parent)
   }
 
-  if (element.on && isFunction(element.on.initUpdate) && !options.ignoreInitUpdate) {
-    const whatinitreturns = on.initUpdate(element.on.initUpdate, element, element.state)
-    if (whatinitreturns === false) return
+  if (!options.preventInitUpdateListener) {
+    const initUpdateReturns = triggerEventOn('initUpdate', element, params)
+    if (initUpdateReturns === false) return element
   }
 
-  const overwriteChanges = overwrite(element, params, UPDATE_DEFAULT_OPTIONS)
+  const overwriteChanges = overwriteDeep(params, element)
   const execChanges = throughUpdatedExec(element, UPDATE_DEFAULT_OPTIONS)
   const definedChanges = throughUpdatedDefine(element)
 
@@ -135,25 +88,95 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     const isElement = applyParam(param, element, options)
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement
+      const canUpdate = isObject(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive
+      if (!canUpdate) continue
+
+      const childUpdateCall = () => update.call(prop, params[prop], {
+        ...options,
+        currentSnapshot: snapshotOnCallee,
+        calleeElement: calleeElement
+      })
+
+      if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
+        window.requestAnimationFrame(() => childUpdateCall())
+      } else childUpdateCall()
+    }
+  }
+
+  if (!options.preventUpdateListener) triggerEventOn('update', element)
+}
 
-      if (prop && isObject(prop) && !hasDefine && !hasContextDefine) {
-        if (!options.preventRecursive) {
-          const childUpdateCall = () => update.call(prop, params[prop], {
-            ...options,
-            currentSnapshot: snapshotOnCallee,
-            calleeElement: element
-          })
-          if (element.props.lazyLoad || options.lazyLoad) {
-            window.requestAnimationFrame(() => childUpdateCall())
-          } else childUpdateCall()
-        }
+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]
+}
+
+const checkIfOnUpdate = (element, options) => {
+  if (!isFunction(element.if)) return
+
+  const __ref = element.__ref
+  const ifPassed = element.if(element, element.state)
+  const itWasFalse = __ref.__if !== true
+
+  if (ifPassed) {
+    __ref.__if = true
+    if (itWasFalse) {
+      delete element.__hash
+      delete element.extend
+      if (!__ref.__hasRootState) {
+        delete element.state
+      }
+      if (__ref.__state) {
+        element.state = __ref.__state
       }
+      const created = create(element, element.parent, element.key)
+      if (!options.preventUpdate && element.on && isFunction(element.on.update)) {
+        applyEvent(element.on.update, created, created.state)
+      }
+      return created
     }
+  } else if (element.node && !ifPassed) {
+    element.node.remove()
+    delete __ref.__if
   }
+}
+
+const inheritStateUpdates = (element, options) => {
+  const { __ref } = element
+  const stateKey = __ref.__state
+  const { parent } = element
 
-  if (!options.preventUpdate) {
-    triggerEventOn('update', element)
+  if (!stateKey && !__ref.__hasRootState) {
+    element.state = parent?.state || {}
+    return
   }
+
+  const parentState = parent?.state || {}
+  const keyInParentState = parentState[stateKey]
+
+  if (!keyInParentState) return
+
+  const initStateReturns = triggerEventOn('initStateUpdated', element, keyInParentState)
+  if (initStateReturns === false) return element
+
+  const newState = createState(element, parent)
+  element.state = newState
+
+  triggerEventOn('stateUpdated', element, newState.parse())
 }
 
 export default update

package/src/index.js

@@ -1,15 +1,16 @@
 'use strict'
 
 import { window } from '@domql/globals'
-import { create, parse, set, define, tree } from './element'
+import { TREE } from '@domql/tree'
+import { create, parse, set, define } from './element'
+import { isDevelopment, isTest } from '@domql/env'
 
-const ENV = process.env.NODE_ENV
-if (ENV === 'test' || ENV === 'development') window.tree = tree
+if (isTest() || isDevelopment()) window.tree = TREE
 
 export default {
+  TREE,
   create,
   parse,
   set,
-  define,
-  tree
+  define
 }

package/src/utils/component.js

@@ -26,7 +26,6 @@ export const extendizeByKey = (element, parent, key) => {
       extend: componentKey || key
     }
   } else if (isFunction(element)) {
-    console.log(element)
     return {
       extend: componentKey || key,
       props: { ...element }