@domql/element 2.3.117 → 2.4.0

package/extend.js

@@ -0,0 +1,87 @@
+'use strict'
+
+import { isFunction, exec, isString } from '@domql/utils'
+import {
+  getExtendStack,
+  jointStacks,
+  cloneAndMergeArrayExtend,
+  deepMergeExtend,
+  replaceStringsWithComponents
+} from './utils'
+
+const ENV = process.env.NODE_ENV
+
+/**
+ * Checks whether element has `extend` or is a part
+ * of parent's `childExtend` extend
+ */
+export const applyExtend = (element, parent, options = {}) => {
+  if (isFunction(element)) element = exec(element, parent)
+
+  let { extend, props, context, __ref } = element
+
+  const COMPONENTS = (context && context.components) || options.components
+  if (isString(extend)) {
+    if (COMPONENTS && COMPONENTS[extend]) extend = COMPONENTS[extend]
+    else {
+      if (ENV !== 'test' || ENV !== 'development') {
+        console.warn('Extend is string but component was not found:', extend)
+      } extend = {}
+    }
+  }
+
+  const extendStack = getExtendStack(extend)
+
+  if (ENV !== 'test' || ENV !== 'development') delete element.extend
+
+  let childExtendStack = []
+  if (parent) {
+    element.parent = parent
+    // Assign parent attr to the element
+    if (!options.ignoreChildExtend) {
+      if (props && props.ignoreChildExtend) return
+
+      childExtendStack = getExtendStack(parent.childExtend)
+
+      // if (parent.childExtendRecursive && (props && !props.ignoreChildExtendRecursive)) {
+      if (parent.childExtendRecursive) {
+        const canExtendRecursive = !props?.ignoreChildExtendRecursive && element.key !== '__text'
+        if (canExtendRecursive) {
+          const childExtendRecursiveStack = getExtendStack(parent.childExtendRecursive)
+          // add error if childExtendRecursive contains element which goes to infinite loop
+          childExtendStack = childExtendStack.concat(childExtendRecursiveStack)
+          element.childExtendRecursive = parent.childExtendRecursive
+        }
+      }
+    }
+  }
+
+  const extendLength = extendStack.length
+  const childExtendLength = childExtendStack.length
+
+  let stack = []
+  if (extendLength && childExtendLength) {
+    stack = jointStacks(extendStack, childExtendStack)
+  } else if (extendLength) {
+    stack = extendStack
+  } else if (childExtendLength) {
+    stack = childExtendStack
+  } else if (!options.extend) return element
+
+  if (options.extend) {
+    const defaultOptionsExtend = getExtendStack(options.extend)
+    stack = [].concat(stack, defaultOptionsExtend)
+  }
+
+  if (__ref) __ref.__extend = stack
+  const findAndReplaceStrings = replaceStringsWithComponents(stack, COMPONENTS)
+  let mergedExtend = cloneAndMergeArrayExtend(findAndReplaceStrings)
+
+  const component = exec(element.component || mergedExtend.component, element)
+  if (component && COMPONENTS && COMPONENTS[component]) {
+    const componentExtend = cloneAndMergeArrayExtend(getExtendStack(COMPONENTS[component]))
+    mergedExtend = deepMergeExtend(componentExtend, mergedExtend)
+  }
+
+  return deepMergeExtend(element, mergedExtend)
+}

package/index.js

@@ -1,7 +1,17 @@
 'use strict'
 
-export * from '@domql/methods'
-export * from '@domql/iterate'
-export * from '@domql/update'
-export * from '@domql/create'
-export * from '@domql/set'
+import { TREE } from './tree'
+import create from './create'
+import createNode from './node'
+import define from './define'
+import update from './update'
+import set from './set'
+
+export {
+  TREE,
+  create,
+  createNode,
+  define,
+  update,
+  set
+}

package/iterate.js

@@ -0,0 +1,94 @@
+'use strict'
+
+import { isObject, exec, isFunction, isNumber, isString } from '@domql/utils'
+import { METHODS_EXL, checkIfKeyIsComponent, extendizeByKey, isVariant, overwrite } from './utils'
+import { isMethod } from './methods'
+
+export const throughInitialExec = (element, exclude = {}) => {
+  const { __ref: ref } = element
+  for (const param in element) {
+    if (exclude[param]) continue
+    const prop = element[param]
+    if (isFunction(prop) && !isMethod(param) && !isVariant(param)) {
+      ref.__exec[param] = prop
+      element[param] = prop(element, element.state)
+      // if (isComponent)
+    }
+  }
+}
+
+export const throughUpdatedExec = (element, options = { excludes: METHODS_EXL }) => {
+  const { __ref: ref } = element
+  const changes = {}
+
+  for (const param in ref.__exec) {
+    const prop = element[param]
+
+    const isDefinedParam = ref.__defineCache[param]
+    if (isDefinedParam) continue
+
+    const newExec = ref.__exec[param](element, element.state, element.context)
+    const execReturnsString = isString(newExec) || isNumber(newExec)
+    // if (prop && prop.node && execReturnsString) {
+    if (prop && prop.node && execReturnsString) {
+      overwrite(prop, { text: newExec }, options)
+    } else if (newExec !== prop) {
+      if (checkIfKeyIsComponent(param)) {
+        const { extend, ...newElem } = extendizeByKey(newExec, element, param)
+        overwrite(prop, newElem, options)
+        // } else {
+        //   overwrite(prop, newExec, options)
+      } else {
+        ref.__cached[param] = changes[param] = prop
+        element[param] = newExec
+      }
+    }
+  }
+
+  return changes
+}
+
+export const throughInitialDefine = (element) => {
+  const { define, context, __ref: ref } = element
+
+  let defineObj = {}
+  const hasGlobalDefine = context && isObject(context.define)
+  if (isObject(define)) defineObj = { ...define }
+  if (hasGlobalDefine) defineObj = { ...defineObj, ...context.define }
+
+  for (const param in defineObj) {
+    let elementProp = element[param]
+
+    if (isFunction(elementProp) && !isMethod(param) && !isVariant(param)) {
+      ref.__exec[param] = elementProp
+      const execParam = elementProp = exec(elementProp, element)
+
+      if (execParam) {
+        elementProp = element[param] = execParam.parse ? execParam.parse() : execParam
+        ref.__defineCache[param] = elementProp
+      }
+    }
+
+    const execParam = defineObj[param](elementProp, element, element.state, element.context)
+    if (execParam) element[param] = execParam
+  }
+  return element
+}
+
+export const throughUpdatedDefine = (element) => {
+  const { context, define, __ref: ref } = element
+  const changes = {}
+
+  let obj = {}
+  if (isObject(define)) obj = { ...define }
+  if (isObject(context && context.define)) obj = { ...obj, ...context.define }
+
+  for (const param in obj) {
+    const execParam = ref.__exec[param]
+    if (execParam) ref.__defineCache[param] = execParam(element, element.state, element.context)
+    const cached = exec(ref.__defineCache[param], element)
+    const newExecParam = obj[param](cached, element, element.state, element.context)
+    if (newExecParam) element[param] = newExecParam
+  }
+  return changes
+}

package/node.js

@@ -0,0 +1,84 @@
+'use strict'
+
+import { exec, isFunction, isObject, isUndefined } from '@domql/utils'
+import { applyEventsOnNode, triggerEventOn } from '@domql/event'
+import { isMethod } from './methods'
+import { cacheNode } from '@domql/node'
+
+import create from './create'
+
+import {
+  throughInitialDefine,
+  throughInitialExec
+} from './iterate'
+import { registry } from './mixins'
+import { applyParam } from './applyParam'
+import { isVariant } from './utils'
+// import { defineSetter } from './methods'
+
+const ENV = process.env.NODE_ENV
+
+export const createNode = (element, options) => {
+  // create and assign a node
+  let { node, tag, __ref: ref } = element
+
+  let isNewNode
+
+  if (!node) {
+    isNewNode = true
+
+    if (!ref.__if) return element
+
+    if (tag === 'shadow') {
+      node = element.node = element.parent.node.attachShadow({ mode: 'open' })
+    } else node = element.node = cacheNode(element)
+
+    // trigger `on.attachNode`
+    triggerEventOn('attachNode', element, options)
+  }
+
+  // node.dataset // .key = element.key
+
+  if (ENV === 'test' || ENV === 'development' || options.alowRefReference) {
+    node.ref = element
+    if (isFunction(node.setAttribute)) node.setAttribute('key', element.key)
+  }
+
+  if (!ref.__if) return element
+
+  // iterate through all given params
+  if (element.tag !== 'string' || element.tag !== 'fragment') {
+    // iterate through define
+    throughInitialDefine(element)
+
+    // iterate through exec
+    throughInitialExec(element)
+
+    // apply events
+    if (isNewNode && isObject(element.on)) applyEventsOnNode(element)
+
+    for (const param in element) {
+      const prop = element[param]
+
+      if (
+        isUndefined(prop) ||
+        isMethod(param) ||
+        isVariant(param) ||
+        isObject(registry[param])
+      ) continue
+      
+      const isElement = applyParam(param, element, options)
+      if (isElement) {
+        const { hasDefine, hasContextDefine } = isElement
+        if (element[param] && !hasDefine && !hasContextDefine) {
+          create(exec(prop, element), element, param, options)
+        }
+      }
+    }
+  }
+
+  // node.dataset.key = key
+  return element
+}
+
+export default createNode

package/package.json

@@ -1,15 +1,37 @@
 {
   "name": "@domql/element",
-  "version": "2.3.117",
-  "main": "index.js",
+  "version": "2.4.0",
   "license": "MIT",
+  "type": "module",
+  "module": "index.js",
+  "main": "index.js",
+  "exports": {
+    ".": {
+      "kalduna": "./index.js",
+      "default": "./dist/cjs/index.js"
+    }
+  },
+  "source": "index.js",
+  "files": [
+    "*.js",
+    "dist"
+  ],
+  "scripts": {
+    "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
+    "build:esm": "npx esbuild *.js --target=es2019 --format=esm --outdir=dist/esm",
+    "build:cjs": "npx esbuild *.js --target=node16 --format=cjs --outdir=dist/cjs",
+    "build": "yarn build:cjs",
+    "prepublish": "rimraf -I dist && yarn build && yarn copy:package:cjs"
+  },
   "dependencies": {
-    "@domql/create": "latest",
-    "@domql/iterate": "latest",
-    "@domql/methods": "latest",
-    "@domql/set": "latest",
-    "@domql/update": "latest"
+    "@domql/event": "latest",
+    "@domql/node": "^2.3.125",
+    "@domql/render": "^2.4.0",
+    "@domql/state": "latest",
+    "@domql/utils": "latest"
   },
-  "gitHead": "a6da9bf1846e4a1e26017978cf52112b9d61d484",
-  "source": "index.js"
+  "gitHead": "d01a7237a0065a5a439a03062064076c5fdc91b7",
+  "devDependencies": {
+    "@babel/core": "^7.12.0"
+  }
 }

package/set.js

@@ -0,0 +1,31 @@
+'use strict'
+
+import { isEqualDeep } from '@domql/utils'
+
+import create from './create'
+import OPTIONS from './cache/options'
+import { registry } from './mixins'
+import { removeContent } from './mixins/content'
+
+const set = function (params, options = {}, el) {
+  const element = el || this
+  const __contentRef = element.content && element.content.__ref
+
+  if (__contentRef && __contentRef.__cached && isEqualDeep(params, element.content)) return element
+  removeContent(element)
+
+  if (params) {
+    const { childExtend } = params
+    if (!childExtend && element.childExtend) params.childExtend = element.childExtend
+    create(params, element, 'content', {
+      ignoreChildExtend: true,
+      ...registry.defaultOptions,
+      ...OPTIONS.create,
+      ...options
+    })
+  }
+
+  return element
+}
+
+export default set

package/tree.js

@@ -0,0 +1,11 @@
+'use strict'
+
+import { document } from '@domql/utils'
+import { report } from '@domql/report'
+
+export const ROOT = {
+  key: ':root',
+  node: document ? document.body : report('DocumentNotDefined', document)
+}
+
+export const TREE = ROOT

package/update.js

@@ -0,0 +1,225 @@
+'use strict'
+
+import { window, exec, isArray, isFunction, isNumber, isObject, isString, isUndefined, merge, overwriteDeep, createSnapshotId } from '@domql/utils'
+import { applyEvent, triggerEventOn, triggerEventOnUpdate } from '@domql/event'
+import { isMethod } from './methods'
+import { updateProps } from './props'
+import { createState } from '@domql/state'
+
+import { METHODS_EXL, isVariant } from './utils'
+import create from './create'
+import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
+import { registry } from './mixins'
+import { applyParam } from './applyParam'
+import OPTIONS from './cache/options'
+
+const snapshot = {
+  snapshotId: createSnapshotId
+}
+
+const UPDATE_DEFAULT_OPTIONS = {
+  stackChanges: false,
+  cleanExec: true,
+  preventRecursive: false,
+  currentSnapshot: false,
+  calleeElement: false,
+  excludes: METHODS_EXL
+}
+
+const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
+  const element = this
+  const { parent, node, key } = element
+  const { excludes, preventInheritAtCurrentState } = options
+
+  if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) return
+  if (!excludes) merge(options, UPDATE_DEFAULT_OPTIONS)
+
+  let ref = element.__ref
+  if (!ref) ref = element.__ref = {}
+
+  const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options)
+  if (snapshotHasUpdated) return
+
+  if (isString(params) || isNumber(params)) {
+    params = { text: params }
+  }
+
+  const ifFails = checkIfOnUpdate(element, parent, options)
+  if (ifFails) return
+
+  const inheritState = inheritStateUpdates(element, options)
+  if (inheritState === false) return
+
+  if (ref.__if && !options.preventPropsUpdate) {
+    const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps)
+    const hasFunctionInProps = ref.__props.filter(v => isFunction(v))
+    const props = params.props || hasParentProps || hasFunctionInProps.length
+    if (props) updateProps(props, element, parent)
+  }
+
+  if (!options.isForced) {
+    triggerEventOn('beforeClassAssign', element, options)
+  }
+
+  if (!options.preventInitUpdateListener) {
+    const initUpdateReturns = triggerEventOnUpdate('initUpdate', params, element, options)
+    if (initUpdateReturns === false) return element
+  }
+
+  const overwriteChanges = overwriteDeep(element, params, METHODS_EXL)
+  const execChanges = throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS })
+  const definedChanges = throughUpdatedDefine(element)
+
+  if (options.stackChanges && element.__stackChanges) {
+    const stackChanges = merge(definedChanges, merge(execChanges, overwriteChanges))
+    element.__stackChanges.push(stackChanges)
+  }
+
+  if (!ref.__if) return false
+  if (!node) {
+    // return createNode(element, options)
+    return
+  }
+
+  for (const param in element) {
+    const prop = element[param]
+    const hasOnlyUpdateFalsy = options.onlyUpdate && (options.onlyUpdate !== param || !element.lookup(options.onlyUpdate))
+    const isInPreventUpdate = isArray(options.preventUpdate) && options.preventUpdate.includes(param)
+    const isInPreventDefineUpdate = isArray(options.preventDefineUpdate) && options.preventDefineUpdate.includes(param)
+
+    if (
+      isUndefined(prop) ||
+      hasOnlyUpdateFalsy ||
+      isInPreventUpdate ||
+      isInPreventDefineUpdate ||
+      options.preventDefineUpdate === true ||
+      options.preventDefineUpdate === param ||
+      (options.preventContentUpdate && param === 'content') ||
+      (options.preventStateUpdate && param) === 'state' ||
+      isMethod(param) || isObject(registry[param]) || isVariant(param)
+    ) continue
+    if (options.preventStateUpdate === 'once') options.preventStateUpdate = false
+
+    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
+      })
+
+      if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
+        window.requestAnimationFrame(() => childUpdateCall())
+      } else childUpdateCall()
+    }
+  }
+
+  if (!options.preventUpdateListener) triggerEventOn('update', element, options)
+}
+
+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 = ref.__currentSnapshot
+  if (currentSnapshot < snapshotOnCallee) {
+    return [snapshotOnCallee, calleeElement, true]
+  }
+
+  return [snapshotOnCallee, calleeElement]
+}
+
+const checkIfOnUpdate = (element, parent, options) => {
+  if (!isFunction(element.if) || !element.state || !parent) return
+
+  const ref = element.__ref
+  const ifPassed = element.if(element, element.state, element.context, options)
+  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, parent, element.key, OPTIONS.create)
+      if (options.preventUpdate !== true && 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: ref } = element
+  const stateKey = ref.__state
+  const { parent, state } = element
+
+  if (options.preventpdateTriggerStateUpdate) return
+
+  if (!stateKey && !ref.__hasRootState) {
+    element.state = (parent && parent.state) || {}
+    return
+  }
+
+  const { isHoisted, execStateFunction, stateFunctionOverwrite } = options
+  const shouldForceStateUpdate = isFunction(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite)
+  if (shouldForceStateUpdate) {
+    const execState = exec(stateKey, element)
+    state.set(execState, {
+      ...options,
+      preventUpdate: true
+    })
+    return
+  }
+
+  const parentState = (parent && parent.state) || {}
+  const keyInParentState = parentState[stateKey]
+
+  if (!keyInParentState || options.preventInheritedStateUpdate) return
+
+  if (!options.preventInitStateUpdateListener) {
+    const initStateReturns = triggerEventOnUpdate('initStateUpdated', keyInParentState, element, options)
+    if (initStateReturns === false) return element
+  }
+
+  const newState = createStateUpdate(element, parent, options)
+
+  if (!options.preventStateUpdateListener) {
+    triggerEventOnUpdate('stateUpdated', newState.parse(), element, options)
+  }
+}
+
+const createStateUpdate = (element, parent, options) => {
+  const __stateChildren = element.state.__children
+  const newState = createState(element, parent)
+  element.state = newState
+  for (const child in __stateChildren) {
+    // check this for inherited states
+    if (newState[child]) newState.__children[child] = __stateChildren[child]
+    __stateChildren[child].parent = newState
+  }
+  return newState
+}
+
+export default update