@domql/element 2.4.0 → 2.4.1

package/cache/index.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const cache = {}

package/cache/options.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export default {}

package/methods/index.js

@@ -0,0 +1,165 @@
+'use strict'
+
+import { isDefined, isFunction, isObjectLike, isProduction } from '@domql/utils'
+import { TREE } from '../tree'
+import { parseFilters, registry } from '../mixins'
+
+// TODO: update these files
+export const spotByPath = function (path) {
+  const element = this
+  const arr = [].concat(path)
+  let active = TREE[arr[0]]
+
+  if (!arr || !arr.length) return console.log(arr, 'on', element.key, 'is undefined')
+
+  while (active.key === arr[0]) {
+    arr.shift()
+    if (!arr.length) break
+    active = active[arr[0]]
+    if (!active) return
+  }
+
+  return active
+}
+
+// TODO: update these files
+export const lookup = function (key) {
+  const element = this
+  let { parent } = element
+
+  while (parent.key !== key) {
+    if (parent[key]) return parent[key]
+    parent = parent.parent
+    if (!parent) return
+  }
+
+  return parent
+}
+
+export const remove = function (params) {
+  const element = this
+  if (isFunction(element.node.remove)) element.node.remove()
+  else if (!isProduction()) {
+    console.warn('This item cant be removed')
+    element.log()
+  }
+  delete element.parent[element.key]
+}
+
+export const get = function (param) {
+  const element = this
+  return element[param]
+}
+
+export const setProps = function (param, options) {
+  const element = this
+  if (!param || !element.props) return
+  element.update({ props: param }, options)
+  return element
+}
+
+// export const set = function () {
+// }
+
+// export const update = function () {
+// }
+
+export const defineSetter = (element, key, get, set) =>
+  Object.defineProperty(element, key, { get, set })
+
+export const keys = function () {
+  const element = this
+  const keys = []
+  for (const param in element) {
+    if (registry[param] && !parseFilters.elementKeys.includes(param)) { continue }
+    keys.push(param)
+  }
+  return keys
+}
+
+export const parse = function (excl = []) {
+  const element = this
+  const obj = {}
+  const keyList = keys.call(element)
+  keyList.forEach(v => {
+    if (excl.includes(v)) return
+    let val = element[v]
+    if (v === 'state') {
+      if (element.__ref && element.__ref.__hasRootState) return
+      if (isFunction(val && val.parse)) val = val.parse()
+    } else if (v === 'props') {
+      const { __element, update, ...props } = element[v]
+      obj[v] = props
+    } else if (isDefined(val)) obj[v] = val
+  })
+  return obj
+}
+
+export const parseDeep = function (excl = []) {
+  const element = this
+  const obj = parse.call(element, excl)
+  for (const v in obj) {
+    if (excl.includes(v)) return
+    if (isObjectLike(obj[v])) { obj[v] = parseDeep.call(obj[v], excl) }
+  }
+  return obj
+}
+
+export const log = function (...args) {
+  const element = this
+  const { __ref } = element
+  console.group(element.key)
+  if (args.length) {
+    args.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  } else {
+    console.log(__ref.path)
+    const keys = element.keys()
+    keys.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  }
+  console.groupEnd(element.key)
+  return element
+}
+
+export const nextElement = function () {
+  const element = this
+  const { key, parent } = element
+  const { __children } = parent.__ref
+
+  const currentIndex = __children.indexOf(key)
+  const nextChild = __children[currentIndex + 1]
+
+  return parent[nextChild]
+}
+
+export const previousElement = function (el) {
+  const element = el || this
+  const { key, parent } = element
+  const { __children } = parent.__ref
+
+  if (!__children) return
+
+  const currentIndex = __children.indexOf(key)
+  return parent[__children[currentIndex - 1]]
+}
+
+export const METHODS = [
+  'set',
+  'update',
+  'remove',
+  'updateContent',
+  'removeContent',
+  'lookup',
+  'spotByPath',
+  'keys',
+  'parse',
+  'setProps',
+  'parseDeep',
+  'if',
+  'log',
+  'nextElement',
+  'previousElement'
+]
+
+export const isMethod = function (param) {
+  return METHODS.includes(param)
+}

package/methods/set.js

@@ -0,0 +1,41 @@
+'use strict'
+
+import { isDevelopment } from '@domql/utils'
+
+import set from '../set'
+import update from '../update'
+
+import {
+  lookup,
+  setProps,
+  remove,
+  spotByPath,
+  log,
+  keys,
+  parse,
+  parseDeep,
+  nextElement,
+  previousElement
+} from './'
+
+import { removeContent, updateContent } from '../mixins/content'
+
+export const addMethods = (element, parent) => {
+  const proto = {
+    set: set.bind(element),
+    update: update.bind(element),
+    remove: remove.bind(element),
+    updateContent: updateContent.bind(element),
+    removeContent: removeContent.bind(element),
+    setProps: setProps.bind(element),
+    lookup: lookup.bind(element),
+    spotByPath: spotByPath.bind(element),
+    parse: parse.bind(element),
+    parseDeep: parseDeep.bind(element),
+    keys: keys.bind(element),
+    nextElement: nextElement.bind(element),
+    previousElement: previousElement.bind(element)
+  }
+  if (isDevelopment()) proto.log = log.bind(element)
+  Object.setPrototypeOf(element, proto)
+}

package/methods/v2.js

@@ -0,0 +1,82 @@
+'use strict'
+
+import { isDefined, isFunction, isObjectLike } from '@domql/utils'
+import { parseFilters, registry } from '../mixins'
+
+export const defineSetter = (element, key, get, set) =>
+  Object.defineProperty(element, key, { get, set })
+
+export const keys = function () {
+  const element = this
+  const keys = []
+  for (const param in element) {
+    if (registry[param] && !parseFilters.elementKeys.includes(param)) { continue }
+    keys.push(param)
+  }
+  return keys
+}
+
+export const parse = function (excl = []) {
+  const element = this
+  const obj = {}
+  const keyList = keys.call(element)
+  keyList.forEach(v => {
+    if (excl.includes(v)) return
+    let val = element[v]
+    if (v === 'state') {
+      if (element.__ref && element.__ref.__hasRootState) return
+      if (isFunction(val && val.parse)) val = val.parse()
+    } else if (v === 'props') {
+      const { __element, update, ...props } = element[v]
+      obj[v] = props
+    } else if (isDefined(val)) obj[v] = val
+  })
+  return obj
+}
+
+export const parseDeep = function (excl = []) {
+  const element = this
+  const obj = parse.call(element, excl)
+  for (const v in obj) {
+    if (excl.includes(v)) return
+    if (isObjectLike(obj[v])) { obj[v] = parseDeep.call(obj[v], excl) }
+  }
+  return obj
+}
+
+export const log = function (...args) {
+  const element = this
+  const { __ref } = element
+  console.group(element.key)
+  if (args.length) {
+    args.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  } else {
+    console.log(__ref.path)
+    const keys = element.keys()
+    keys.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  }
+  console.groupEnd(element.key)
+  return element
+}
+
+export const nextElement = function () {
+  const element = this
+  const { key, parent } = element
+  const { __children } = parent.__ref
+
+  const currentIndex = __children.indexOf(key)
+  const nextChild = __children[currentIndex + 1]
+
+  return parent[nextChild]
+}
+
+export const previousElement = function (el) {
+  const element = el || this
+  const { key, parent } = element
+  const { __children } = parent.__ref
+
+  if (!__children) return
+
+  const currentIndex = __children.indexOf(key)
+  return parent[__children[currentIndex - 1]]
+}

package/mixins/attr.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { exec, isNot } from '@domql/utils'
+import { report } from '@domql/report'
+
+/**
+ * Recursively add attributes to a DOM node
+ */
+export default (params, element, node) => {
+  const { __ref } = element
+  const { __attr } = __ref
+  if (isNot('object')) report('HTMLInvalidAttr', params)
+  if (params) {
+    for (const attr in params) {
+      const val = exec(params[attr], element)
+      // if (__attr[attr] === val) return
+      if (val && node.setAttribute) node.setAttribute(attr, val)
+      else if (node.removeAttribute) node.removeAttribute(attr)
+      __attr[attr] = val
+    }
+  }
+  console.groupEnd(params, __attr)
+}

package/mixins/classList.js

@@ -0,0 +1,48 @@
+'use strict'
+
+import { exec, isObject, isString } from '@domql/utils'
+
+export const assignClass = (element) => {
+  const { key } = element
+  if (element.class === true) element.class = key
+  else if (!element.class && typeof key === 'string' && key.charAt(0) === '_' && key.charAt(1) !== '_') {
+    element.class = key.slice(1)
+  }
+}
+
+// stringifies class object
+export const classify = (obj, element) => {
+  let className = ''
+  for (const item in obj) {
+    const param = obj[item]
+    if (typeof param === 'boolean' && param) className += ` ${item}`
+    else if (typeof param === 'string') className += ` ${param}`
+    else if (typeof param === 'function') {
+      className += ` ${exec(param, element)}`
+    }
+  }
+  return className
+}
+
+export const classList = (params, element) => {
+  if (!params) return
+  const { key } = element
+  if (params === true) params = element.class = { key }
+  if (isString(params)) params = element.class = { default: params }
+  if (isObject(params)) params = classify(params, element)
+  // TODO: fails on string
+  const className = params.replace(/\s+/g, ' ').trim()
+  if (element.ref) element.ref.class = className // TODO: this check is NOT needed in new DOMQL
+  return className
+}
+
+// LEGACY (still needed in old domql)
+export const applyClassListOnNode = (params, element, node) => {
+  const className = classList(params, element)
+  node.classList = className
+  return className
+}
+
+export default (params, element, node) => {
+  applyClassListOnNode(params, element, node)
+}

package/mixins/content.js

@@ -0,0 +1,47 @@
+'use strict'
+
+import { isFunction } from '@domql/utils'
+import set from '../set'
+
+export const updateContent = function (params, options) {
+  const element = this
+
+  if (!element.content) return
+  if (element.content.update) element.content.update(params, options)
+}
+
+export const removeContent = function (el) {
+  const element = el || this
+  const { __ref } = element
+
+  if (element.content) {
+    if (element.content.node) {
+      if (element.content.tag === 'fragment') element.node.innerHTML = ''
+      else element.node.removeChild(element.content.node)
+    }
+
+    const { __cached } = __ref
+    if (__cached && __cached.content) {
+      if (__cached.content.tag === 'fragment') __cached.content.parent.node.innerHTML = ''
+      else if (__cached.content && isFunction(__cached.content.remove)) __cached.content.remove()
+    }
+
+    delete element.content
+  }
+}
+
+/**
+ * Appends anything as content
+ * an original one as a child
+ */
+export const setContent = (param, element, node, options) => {
+  if (param && element) {
+    if (element.content.update) {
+      element.content.update({}, options)
+    } else {
+      set.call(element, param, options)
+    }
+  }
+}
+
+export default setContent

package/mixins/data.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { exec, isObject } from '@domql/utils'
+import { report } from '@domql/report'
+
+/**
+ * Apply data parameters on the DOM nodes
+ * this should only work if `showOnNode: true` is passed
+ */
+export default (params, element, node) => {
+  if (params && params.showOnNode) {
+    if (!isObject(params)) report('HTMLInvalidData', params)
+
+    // Apply data params on node
+    for (const dataset in params) {
+      if (dataset !== 'showOnNode') {
+        node.dataset[dataset] = exec(params[dataset], element)
+      }
+    }
+  }
+}

package/mixins/html.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { exec } from '@domql/utils'
+
+/**
+ * Appends raw HTML as content
+ * an original one as a child
+ */
+export default (param, element, node) => {
+  const prop = exec(param, element)
+  const { __ref } = element
+  if (prop !== __ref.__html) {
+    // const parser = new window.DOMParser()
+    // param = parser.parseFromString(param, 'text/html')
+    if (node.nodeName === 'SVG') node.textContent = prop
+    else node.innerHTML = prop
+
+    __ref.__html = prop
+  }
+}

package/mixins/index.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import attr from './attr'
+import classList from './classList'
+import content from './content'
+import data from './data'
+import html from './html'
+import style from './style'
+import text from './text'
+import state from './state'
+import registry from './registry'
+export {
+  attr,
+  classList,
+  content,
+  data,
+  style,
+  text,
+  html,
+  state,
+  registry
+}
+export * from './registry'

package/mixins/registry.js

@@ -0,0 +1,66 @@
+'use strict'
+
+import {
+  attr, classList, content,
+  data, html, state, style,
+  text
+} from '.'
+
+export default {
+  attr,
+  style,
+  text,
+  html,
+  content,
+  data,
+  class: classList,
+  state,
+
+  extend: {},
+  childExtend: {},
+  childExtendRecursive: {},
+  props: {},
+  path: {},
+  if: {},
+  define: {},
+  transform: {},
+  __ref: {},
+  __hash: {},
+  __text: {},
+  nextElement: {},
+  previousElement: {},
+  key: {},
+  tag: {},
+  query: {},
+  parent: {},
+  node: {},
+  set: {},
+  update: {},
+  setProps: {},
+  remove: {},
+  updateContent: {},
+  removeContent: {},
+  lookup: {},
+  spotByPath: {},
+  keys: {},
+  log: {},
+  parse: {},
+  parseDeep: {},
+  on: {},
+  component: {},
+  context: {},
+  $setStateCollection: {},
+  $setCollection: {},
+  $setPropsCollection: {}
+}
+
+// List of keys for .parse() and .parseDeep() to include in the result.
+// Keys not in the array are excluded.
+export const parseFilters = {
+  elementKeys: [
+    'tag', 'text', 'style', 'attr', 'class', 'state', 'props',
+    'data', 'content', 'html', 'on', 'key'
+  ],
+  propsKeys: ['__element', 'update'],
+  stateKeys: []
+}

package/mixins/state.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { IGNORE_STATE_PARAMS } from '@domql/state'
+import { exec, isObject } from '@domql/utils'
+
+export const state = (params, element, node) => {
+  const state = exec(params, element)
+
+  if (isObject(state)) {
+    for (const param in state) {
+      if (IGNORE_STATE_PARAMS.includes(param)) continue
+      if (!state.hasOwnProperty(param)) continue
+      element.state[param] = exec(state[param], element)
+    }
+  }
+
+  return element
+}
+
+export default state

package/mixins/style.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import { isObject, map } from '@domql/utils'
+import { report } from '@domql/report'
+
+/**
+ * Recursively add styles to a DOM node
+ */
+export default (params, element, node) => {
+  if (params) {
+    if (isObject(params)) map(node.style, params, element)
+    else report('HTMLInvalidStyles', params)
+  }
+}

package/mixins/text.js

@@ -0,0 +1,41 @@
+'use strict'
+
+import { create } from '..'
+import {
+  exec,
+  isString,
+  replaceLiteralsWithObjectFields
+} from '@domql/utils'
+
+/**
+ * Creates a text node and appends into
+ * an original one as a child
+ */
+export const asd = (param, element, node) => {
+  const prop = exec(param, element)
+  if (element.tag === 'string') {
+    node.nodeValue = prop
+  } else if (param !== undefined || param !== null) {
+    if (element.__text && element.__text.text !== prop) return
+    element.__text.text = prop
+    if (element.__text.node) element.__text.node.nodeValue = prop
+    else create({ tag: 'string', text: prop }, element, '__text')
+  }
+}
+
+export default (param, element, node) => {
+  let prop = exec(param, element)
+  if (isString(prop) && prop.includes('{{')) {
+    prop = replaceLiteralsWithObjectFields(prop, element.state)
+  }
+  if (element.tag === 'string') {
+    if (element.text === prop) return
+    node.nodeValue = prop
+  } else if (param !== undefined || param !== null) {
+    if (element.__text) {
+      if (element.__text.text === prop) return
+      element.__text.text = prop
+      if (element.__text.node) element.__text.node.nodeValue = prop
+    } else create({ tag: 'string', text: prop }, element, '__text')
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -13,6 +13,7 @@
   },
   "source": "index.js",
   "files": [
+    "*/**.js",
     "*.js",
     "dist"
   ],
@@ -30,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "d01a7237a0065a5a439a03062064076c5fdc91b7",
+  "gitHead": "aab9993c65cc91165a2a9bc00a8117a217dc7565",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/props/create.js

@@ -0,0 +1,60 @@
+'use strict'
+
+import { exec, isArray, isObject, deepClone, deepMerge } from '@domql/utils'
+import { IGNORE_PROPS_PARAMS } from './ignore'
+
+import { inheritParentProps } from './inherit'
+
+const createPropsStack = (element, parent) => {
+  const { props, __ref } = element
+  const propsStack = __ref.__props = inheritParentProps(element, parent)
+
+  if (isObject(props)) propsStack.push(props)
+  else if (props === 'inherit' && parent.props) propsStack.push(parent.props)
+  else if (props) propsStack.push(props)
+
+  if (isArray(__ref.__extend)) {
+    __ref.__extend.forEach(extend => {
+      if (extend.props) propsStack.push(extend.props)
+    })
+  }
+
+  __ref.__props = propsStack
+
+  return propsStack
+}
+
+export const syncProps = (props, element) => {
+  element.props = {}
+  const mergedProps = { update, __element: element }
+  props.forEach(v => {
+    if (IGNORE_PROPS_PARAMS.includes(v)) return
+    const execProps = exec(v, element)
+    if (isObject(execProps) && execProps.__element) return
+    element.props = deepMerge(
+      mergedProps,
+      deepClone(execProps, IGNORE_PROPS_PARAMS),
+      IGNORE_PROPS_PARAMS
+    )
+  })
+  element.props = mergedProps
+  return element.props
+}
+
+export const createProps = function (element, parent, cached) {
+  const propsStack = cached || createPropsStack(element, parent)
+  const { __ref } = element
+
+  if (propsStack.length) {
+    __ref.__props = propsStack
+    syncProps(propsStack, element)
+    element.props.update = update
+  }
+
+  return element
+}
+
+function update (props, options) {
+  const element = this.__element
+  element.update({ props }, options)
+}

package/props/ignore.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const IGNORE_PROPS_PARAMS = ['update', '__element']

package/props/index.js

@@ -0,0 +1,6 @@
+'use strict'
+
+export * from './ignore'
+export * from './create'
+export * from './inherit'
+export * from './update'

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