@domql/element 2.3.154 → 2.4.1

package/props/inherit.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { exec, is, isString } from '@domql/utils'
+
+const objectizeStringProperty = propValue => {
+  if (is(propValue)('string', 'number')) {
+    return { inheritedString: propValue }
+  }
+  return propValue
+}
+
+export const inheritParentProps = (element, parent) => {
+  let propsStack = []
+  const parentProps = exec(parent, parent.state).props
+
+  const matchParent = parent.props && parentProps[element.key]
+  const matchParentIsString = isString(matchParent)
+  const matchParentChildProps = parentProps && parentProps.childProps
+
+  if (matchParent) {
+    if (matchParentIsString) {
+      const inheritedStringExists = propsStack.filter(v => v.inheritedString)[0]
+      if (inheritedStringExists) inheritedStringExists.inheritedString = matchParent
+      else {
+        propsStack = [].concat(objectizeStringProperty(matchParent), propsStack)
+      }
+    } else {
+      propsStack.push(objectizeStringProperty(matchParent))
+    }
+  }
+  if (matchParentChildProps) propsStack.push(matchParentChildProps)
+
+  return propsStack
+}

package/props/update.js

@@ -0,0 +1,17 @@
+'use strict'
+
+import { syncProps } from './create'
+import { inheritParentProps } from './inherit'
+
+export const updateProps = (newProps, element, parent) => {
+  const { __ref } = element
+  let propsStack = __ref.__props
+
+  const parentProps = inheritParentProps(element, parent)
+  if (parentProps) propsStack = __ref.__props = [].concat(parentProps, propsStack)
+  if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack)
+
+  if (propsStack) syncProps(propsStack, element)
+
+  return element
+}

package/set.js

@@ -1,20 +1,18 @@
 'use strict'
 
 import { isEqualDeep } from '@domql/utils'
-import { removeContentElement } from './remove'
 
 import create from './create'
+import OPTIONS from './cache/options'
 import { registry } from './mixins'
-import OPTIONS from './options'
+import { removeContent } from './mixins/content'
 
 const set = function (params, options = {}, el) {
   const element = el || this
   const __contentRef = element.content && element.content.__ref
 
-  const isEqual = isEqualDeep(params, element.content)
-  // console.error(params)
-  if (isEqual && __contentRef && __contentRef.__cached) return element
-  removeContentElement(element)
+  if (__contentRef && __contentRef.__cached && isEqualDeep(params, element.content)) return element
+  removeContent(element)
 
   if (params) {
     const { childExtend } = params

package/test/create.test.js

@@ -0,0 +1,61 @@
+'use strict'
+
+import { create } from '../../src/element'
+
+const dom = create({})
+
+test('should create EMPTY element', () => {
+  expect(dom).toHaveProperty('key')
+  expect(dom).toHaveProperty('state')
+  expect(dom).toHaveProperty('parent')
+  expect(dom).toHaveProperty('node')
+  expect(dom).toHaveProperty('set')
+  expect(dom).toHaveProperty('update')
+  expect(dom).toHaveProperty('__ref')
+})
+
+test('should create valid DOM node', () => {
+  expect(dom.node).toBeInstanceOf(window.HTMLDivElement)
+})
+
+test('must be able to create valid PATH', () => {
+  expect(dom.__ref.__path).toStrictEqual([dom.key])
+})
+
+test('if it HAS a NODE, don\'t recreate', () => {
+  const node = document.createElement('div')
+  const dom2 = create({ node })
+  expect(dom2.node.parentElement).toBe(document.body)
+})
+
+test('create with number', () => {
+  const numb = create(0)
+  expect(numb.text).toBe(0)
+  expect(numb.tag).toBe('string')
+  expect(numb.node.nodeType).toBe(3) // #text
+})
+
+test('create with string', () => {
+  const str = create('hello')
+  expect(str.text).toBe('hello')
+  expect(str.tag).toBe('string')
+  expect(str.node.nodeType).toBe(3) // #text
+})
+
+test('creating conditions', () => {
+  const element = create({
+    data: { visible: true },
+    if: element => element.data.visible
+  })
+  expect(element.tag).toBe('div')
+})
+
+test('creating nesting', () => {
+  const element = create({
+    header: {
+      h1: {}
+    }
+  })
+  expect(element.header.tag).toBe('header')
+  expect(element.header.h1.tag).toBe('h1')
+})

package/test/set.test.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import { create } from '../../src/element'
+
+const element = create({})
+
+test('should SET element', () => {
+  element.set({ text: 'test' })
+  expect(element.content.text).toBe('test')
+
+  element.set({ text: 'test2' })
+  expect(element.content.text).toBe('test2')
+})

package/test/update.test.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import { create } from '../../src/element'
+
+const element = create({})
+
+test('should UPDATE element', () => {
+  expect(element.text).toBeUndefined()
+
+  element.update('test')
+
+  expect(element.text).toBe('test')
+})

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

@@ -1,11 +1,9 @@
 'use strict'
 
-import { window } from '@domql/globals'
-import { exec, isArray, isFunction, isNumber, isObject, isString, isUndefined, merge, overwriteDeep } from '@domql/utils'
+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 '@domql/methods'
-import { createSnapshotId } from '@domql/key'
-import { updateProps } from '@domql/props'
+import { isMethod } from './methods'
+import { updateProps } from './props'
 import { createState } from '@domql/state'
 
 import { METHODS_EXL, isVariant } from './utils'
@@ -13,7 +11,7 @@ import create from './create'
 import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
 import { registry } from './mixins'
 import { applyParam } from './applyParam'
-import OPTIONS from './options'
+import OPTIONS from './cache/options'
 
 const snapshot = {
   snapshotId: createSnapshotId
@@ -111,7 +109,7 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
       const childUpdateCall = () => update.call(prop, params[prop], {
         ...options,
         currentSnapshot: snapshotOnCallee,
-        calleeElement: calleeElement
+        calleeElement
       })
 
       if ((element.props && element.props.lazyLoad) || options.lazyLoad) {

package/utils/component.js

@@ -0,0 +1,112 @@
+'use strict'
+
+import { exec, isArray, isFunction, isObject, isString, overwriteDeep } from '@domql/utils'
+import { applyExtend } from '../extend'
+const ENV = process.env.NODE_ENV
+
+export const checkIfKeyIsComponent = (key) => {
+  const isFirstKeyString = isString(key)
+  if (!isFirstKeyString) return
+  const firstCharKey = key.slice(0, 1)
+  return /^[A-Z]*$/.test(firstCharKey)
+}
+
+export const addAdditionalExtend = (newExtend, element) => {
+  const { extend } = element
+  const preserveExtend = isArray(extend) ? extend : [extend]
+  return {
+    ...element,
+    extend: [newExtend].concat(preserveExtend)
+  }
+}
+
+export const extendizeByKey = (element, parent, key) => {
+  const { tag, extend, props, state, childExtend, childProps, on } = element
+  const hasComponentAttrs = tag || extend || childExtend || props || state || on
+  const componentKey = key.includes('_')
+    ? key.split('_')[0]
+    : key.includes('.') ? key.split('.')[0] : key
+  const extendKey = componentKey || key
+
+  if (!hasComponentAttrs || childProps) {
+    return {
+      extend: extendKey,
+      props: { ...element }
+    }
+  } else if (!extend || extend === true) {
+    return {
+      ...element,
+      extend: extendKey
+    }
+  } else if (extend) {
+    addAdditionalExtend(extendKey, element)
+  } else if (isFunction(element)) {
+    return {
+      extend: extendKey,
+      props: { ...exec(element, parent) }
+    }
+  }
+}
+
+export const applyKeyComponentAsExtend = (element, parent, key) => {
+  return extendizeByKey(element, parent, key) || element
+}
+
+export const applyComponentFromContext = (element, parent, options) => {
+  const { context } = element
+  const { components } = context
+  const { extend } = element
+  const execExtend = exec(extend, element)
+  if (isString(execExtend)) {
+    if (components[execExtend]) element.extend = components[execExtend]
+    else {
+      if ((ENV === 'test' || ENV === 'development') && options.verbose) {
+        console.warn(execExtend, 'is not in library', components, element)
+        console.warn('replacing with ', {})
+      }
+      element.extend = {}
+    }
+  }
+}
+
+export const isVariant = (param) => {
+  if (!isString(param)) return
+  const firstCharKey = param.slice(0, 1)
+  // return (firstCharKey === '.' || firstCharKey === '$')
+  return (firstCharKey === '.')
+}
+
+export const hasVariantProp = (element) => {
+  const { props } = element
+  if (isObject(props) && isString(props.variant)) return true
+}
+
+export const overwriteVariant = (element, variant, variantProps) => {
+  let variantElement = element[variant]
+  if (!variantElement) return
+  const props = isObject(variantProps) ? variantProps : {}
+  if (isString(variantElement)) {
+    variantElement = {
+      extend: [{ props }, variantElement]
+    }
+  } else if (variantElement.extend) {
+    variantElement = addAdditionalExtend({ props }, variantElement)
+  }
+  return overwriteDeep(element, applyExtend(variantElement)) // TODO: check why string is not working
+}
+
+export const applyVariant = (element) => {
+  const { props } = element
+  if (!hasVariantProp(element)) return element
+  const { variant } = props
+  overwriteVariant(element, `.${variant}`)
+
+  const elKeys = Object.keys(element).filter((key) => isVariant(key))
+  elKeys.forEach((variant) => {
+    const slicedVariantElementKey = variant.slice(1)
+    const variantElementProps = props[slicedVariantElementKey]
+    if (variantElementProps) overwriteVariant(element, variant, variantElementProps)
+  })
+
+  return element
+}

package/utils/extendUtils.js

@@ -0,0 +1,118 @@
+'use strict'
+
+import { isArray, isFunction, isObject, isString } from '@domql/utils'
+
+export const generateHash = () => Math.random().toString(36).substring(2)
+
+// hashing
+export const extendStackRegistry = {}
+export const extendCachedRegistry = {}
+
+export const getHashedExtend = extend => {
+  return extendStackRegistry[extend.__hash]
+}
+
+export const setHashedExtend = (extend, stack) => {
+  const hash = generateHash()
+  if (!isString(extend)) { extend.__hash = hash }
+  extendStackRegistry[hash] = stack
+  return stack
+}
+
+export const getExtendStackRegistry = (extend, stack) => {
+  if (extend.__hash) { return stack.concat(getHashedExtend(extend)) }
+  return setHashedExtend(extend, stack) // stack .concat(hashedExtend)
+}
+
+// stacking
+export const extractArrayExtend = (extend, stack) => {
+  extend.forEach(each => flattenExtend(each, stack))
+  return stack
+}
+
+export const deepExtend = (extend, stack) => {
+  const extendOflattenExtend = extend.extend
+  if (extendOflattenExtend) {
+    flattenExtend(extendOflattenExtend, stack)
+  }
+  return stack
+}
+
+export const flattenExtend = (extend, stack) => {
+  if (!extend) return stack
+  if (isArray(extend)) return extractArrayExtend(extend, stack)
+  stack.push(extend)
+  if (extend.extend) deepExtend(extend, stack)
+  return stack
+}
+
+// merging
+export const deepCloneExtend = obj => {
+  const o = {}
+  for (const prop in obj) {
+    if (['parent', 'node', '__element'].indexOf(prop) > -1) continue
+    const objProp = obj[prop]
+    if (isObject(objProp)) {
+      o[prop] = deepCloneExtend(objProp)
+    } else if (isArray(objProp)) {
+      o[prop] = objProp.map(x => x)
+    } else o[prop] = objProp
+  }
+  return o
+}
+
+export const deepMergeExtend = (element, extend) => {
+  for (const e in extend) {
+    if (['parent', 'node', '__element'].indexOf(e) > -1) continue
+    const elementProp = element[e]
+    const extendProp = extend[e]
+    if (elementProp === undefined) {
+      element[e] = extendProp
+    } else if (isObject(elementProp) && isObject(extendProp)) {
+      deepMergeExtend(elementProp, extendProp)
+    } else if (isArray(elementProp) && isArray(extendProp)) {
+      element[e] = elementProp.concat(extendProp)
+    } else if (isArray(elementProp) && isObject(extendProp)) {
+      const obj = deepMergeExtend({}, elementProp)
+      element[e] = deepMergeExtend(obj, extendProp)
+    } else if (elementProp === undefined && isFunction(extendProp)) {
+      element[e] = extendProp
+    }
+  }
+  return element
+}
+
+export const cloneAndMergeArrayExtend = stack => {
+  return stack.reduce((a, c) => {
+    return deepMergeExtend(a, deepCloneExtend(c))
+  }, {})
+}
+
+export const replaceStringsWithComponents = (stack, components) => {
+  return stack.map(v => {
+    if (isString(v)) return components[v]
+    else return v
+  })
+}
+
+// joint stacks
+export const jointStacks = (extendStack, childExtendStack) => {
+  return []
+    .concat(extendStack.slice(0, 1))
+    .concat(childExtendStack.slice(0, 1))
+    .concat(extendStack.slice(1))
+    .concat(childExtendStack.slice(1))
+}
+
+// init
+export const getExtendStack = extend => {
+  if (!extend) return []
+  if (extend.__hash) return getHashedExtend(extend) || []
+  const stack = flattenExtend(extend, [])
+  return getExtendStackRegistry(extend, stack)
+}
+
+export const getExtendMerged = extend => {
+  const stack = getExtendStack(extend)
+  return cloneAndMergeArrayExtend(stack)
+}

package/utils/index.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export * from './object'
+export * from './extendUtils'
+export * from './component'

package/utils/object.js

@@ -0,0 +1,141 @@
+'use strict'
+
+import { isArray, isObject, isObjectLike, joinArrays } from '@domql/utils'
+import { IGNORE_STATE_PARAMS } from '@domql/state'
+import { IGNORE_PROPS_PARAMS } from '../props'
+import { METHODS } from '../methods'
+
+export const METHODS_EXL = joinArrays(
+  ['node', 'state', 'context', 'extend'],
+  METHODS,
+  IGNORE_STATE_PARAMS,
+  IGNORE_PROPS_PARAMS
+)
+
+export const deepMerge = (element, extend, exclude = METHODS_EXL) => {
+  for (const e in extend) {
+    if (exclude.includes(e)) continue
+    const elementProp = element[e]
+    const extendProp = extend[e]
+    if (elementProp === undefined) {
+      element[e] = extendProp
+    } else if (isObjectLike(elementProp) && isObject(extendProp)) {
+      deepMerge(elementProp, extendProp)
+    }
+  }
+  return element
+}
+
+export const clone = (obj, exclude = METHODS_EXL) => {
+  const o = {}
+  for (const e in obj) {
+    if (exclude.includes(e)) continue
+    o[e] = obj[e]
+  }
+  return o
+}
+
+/**
+ * Deep cloning of object
+ */
+export const deepClone = (obj, exclude = METHODS_EXL) => {
+  const o = isArray(obj) ? [] : {}
+  for (const e in obj) {
+    if (exclude.includes(e)) continue
+    let objProp = obj[e]
+    if (e === 'extend' && isArray(objProp)) {
+      objProp = mergeArray(objProp, exclude)
+    }
+    if (isObjectLike(objProp)) {
+      o[e] = deepClone(objProp, exclude)
+    } else o[e] = objProp
+  }
+  return o
+}
+
+/**
+ * Overwrites object properties with another
+ */
+export const overwrite = (element, params, options) => {
+  const changes = {}
+  const { __ref } = element
+  const { __exec, __cached } = __ref
+
+  for (const e in params) {
+    if (e === 'props' || e === 'state' || e === '__ref') continue
+
+    const elementProp = element[e]
+    const paramsProp = params[e]
+
+    if (paramsProp !== undefined) {
+      __cached[e] = changes[e] = elementProp
+      element[e] = paramsProp
+    }
+
+    if (options.cleanExec) delete __exec[e]
+  }
+
+  return changes
+}
+
+export const overwriteShallow = (obj, params, exclude = METHODS_EXL) => {
+  for (const e in params) {
+    if (exclude.includes(e)) continue
+    obj[e] = params[e]
+  }
+  return obj
+}
+
+/**
+ * Overwrites DEEPly object properties with another
+ */
+export const overwriteDeep = (obj, params, exclude = METHODS_EXL) => {
+  for (const e in params) {
+    if (exclude.includes(e)) continue
+    const objProp = obj[e]
+    const paramsProp = params[e]
+    if (isObjectLike(objProp) && isObjectLike(paramsProp)) {
+      overwriteDeep(objProp, paramsProp)
+    } else if (paramsProp !== undefined) {
+      obj[e] = paramsProp
+    }
+  }
+  return obj
+}
+
+/**
+ * Overwrites object properties with another
+ */
+export const mergeIfExisted = (a, b) => {
+  if (isObjectLike(a) && isObjectLike(b)) return deepMerge(a, b)
+  return a || b
+}
+
+/**
+ * Merges array extends
+ */
+export const mergeArray = (arr, exclude = ['parent', 'node', '__element', 'state', 'context', '__ref']) => {
+  return arr.reduce((a, c) => deepMerge(a, deepClone(c, exclude)), {})
+}
+
+/**
+ * Merges array extends
+ */
+export const mergeAndCloneIfArray = obj => {
+  return isArray(obj) ? mergeArray(obj) : deepClone(obj)
+}
+
+/**
+ * Overwrites object properties with another
+ */
+export const flattenRecursive = (param, prop, stack = []) => {
+  const objectized = mergeAndCloneIfArray(param)
+  stack.push(objectized)
+
+  const extendOfExtend = objectized[prop]
+  if (extendOfExtend) flattenRecursive(extendOfExtend, prop, stack)
+
+  delete objectized[prop]
+
+  return stack
+}

package/parse.js

@@ -1,17 +0,0 @@
-'use strict'
-
-import { assignNode } from '@domql/render'
-import create from './create'
-
-const parse = (element) => {
-  const virtualTree = {
-    node: document.createElement('div')
-  }
-
-  if (element && element.node) assignNode(element, virtualTree)
-  else create(element, virtualTree)
-
-  return virtualTree.node.innerHTML
-}
-
-export default parse