@domql/element 2.3.117 → 2.3.154

package/applyParam.js

@@ -0,0 +1,25 @@
+'use strict'
+
+import { isFunction } from '@domql/utils'
+import { registry } from './mixins'
+
+export const applyParam = (param, element, options) => {
+  const { node, context } = element
+  const prop = element[param]
+
+  const DOMQLProperty = registry[param]
+  const DOMQLPropertyFromContext = context && context.registry && context.registry[param]
+  const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty
+
+  const hasDefine = element.define && element.define[param]
+  const hasContextDefine = context && context.define && context.define[param]
+
+  if (isGlobalTransformer && !hasContextDefine) {
+    if (isFunction(isGlobalTransformer)) {
+      isGlobalTransformer(prop, element, node, options)
+      return
+    }
+  }
+
+  return { hasDefine, hasContextDefine }
+}

package/create.js

@@ -0,0 +1,328 @@
+'use strict'
+
+import { isObject, isFunction, isString, exec, is, isNode, isUndefined } from '@domql/utils'
+import { ROOT } from '@domql/tree'
+import { createKey } from '@domql/key'
+import { TAGS } from '@domql/registry'
+import { triggerEventOn } from '@domql/event'
+import { appendNode, assignNode } from '@domql/render'
+import { isMethod, lookup, setProps, remove, spotByPath } from '@domql/methods'
+import { assignClass } from '@domql/classlist'
+import { cacheNode, detectTag } from '@domql/node'
+import { createState } from '@domql/state'
+import { createProps } from '@domql/props'
+
+import createNode from './node'
+import { applyExtend } from './extend'
+import set from './set'
+import update from './update'
+import { log, keys, parse, parseDeep, nextElement, previousElement } from './methods'
+import { registry } from './mixins'
+import { throughInitialExec } from './iterate'
+import OPTIONS from './options'
+
+import {
+  applyComponentFromContext,
+  applyKeyComponentAsExtend,
+  applyVariant,
+  checkIfKeyIsComponent,
+  isVariant
+} from './utils/component'
+import { removeContentElement, updateContentElement } from './remove'
+
+const ENV = process.env.NODE_ENV
+
+/**
+ * Creating a domQL element using passed parameters
+ */
+const create = (element, parent, key, options = OPTIONS.create || {}) => {
+  if (options && !OPTIONS.create) {
+    OPTIONS.create = options
+    OPTIONS.create.context = element.context || options.context
+  }
+
+  // if ELEMENT is not given
+  if (element === undefined) {
+    if (ENV === 'test' || ENV === 'development') {
+      console.warn(key, 'element is undefined in', parent && parent.__ref && parent.__ref.path)
+    }
+    element = {}
+  }
+  if (isString(key) && key.slice(0, 2 === '__')) {
+    if (ENV === 'test' || ENV === 'development') {
+      console.warn(key, 'seems like to be in __ref')
+    }
+  }
+  if (element === null) return
+  if (element === true) element = { text: true }
+
+  // if element is extend
+  if (element.__hash) {
+    element = { extend: element }
+  }
+
+  // if PARENT is not given
+  if (!parent) parent = ROOT
+  if (isNode(parent)) {
+    parent = ROOT[`${key}_parent`] = { key: ':root', node: parent }
+  }
+
+  // if element is STRING
+  if (checkIfPrimitive(element)) {
+    element = applyValueAsText(element, parent, key)
+  }
+
+  // define KEY
+  const assignedKey = (element.key || key || createKey()).toString()
+
+  if (checkIfKeyIsComponent(assignedKey)) {
+    element = applyKeyComponentAsExtend(element, parent, assignedKey)
+  }
+
+  // TODO: move as define plugins
+  // Responsive rendering
+  if (checkIfMedia(assignedKey)) {
+    element = applyMediaProps(element, parent, assignedKey)
+  }
+
+  if (element.__ref) element.__ref.origin = element
+  else element.__ref = { origin: element } // eslint-disable-line 
+  const __ref = element.__ref
+
+  // assign context
+  applyContext(element, parent, options)
+  const { context } = element
+
+  if (context && context.components) {
+    applyComponentFromContext(element, parent, options)
+  }
+
+  // create EXTEND inheritance
+  applyExtend(element, parent, options)
+
+  // create and assign a KEY
+  element.key = assignedKey
+
+  // Only resolve extends, skip everything else
+  if (options.onlyResolveExtends) {
+    return resolveExtends(element, parent, options)
+  }
+
+  if (Object.keys(options).length) {
+    registry.defaultOptions = options
+    if (options.ignoreChildExtend) delete options.ignoreChildExtend
+  }
+
+  addCaching(element, parent)
+
+  addMethods(element, parent)
+
+  // enable STATE
+  element.state = createState(element, parent)
+
+  // don't render IF in condition
+  checkIf(element, parent)
+
+  // if it already HAS a NODE
+  if (element.node && __ref.__if) { // TODO: check on if
+    return assignNode(element, parent, assignedKey)
+  }
+
+  // apply props settings
+  if (__ref.__if) createProps(element, parent)
+
+  // apply variants
+  applyVariant(element, parent)
+
+  // run `on.init`
+  const initReturns = triggerEventOn('init', element, options)
+  if (initReturns === false) return element
+
+  // run `on.beforeClassAssign`
+  triggerEventOn('beforeClassAssign', element, options)
+
+  // generate a CLASS name
+  assignClass(element)
+
+  // CREATE a real NODE
+  createNode(element, options)
+
+  if (!__ref.__if) return element
+
+  // assign NODE
+  assignNode(element, parent, key)
+
+  // run `on.renderRouter`
+  triggerEventOn('renderRouter', element, options)
+
+  // run `on.render`
+  triggerEventOn('render', element, options)
+
+  if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key)
+
+  return element
+}
+
+const checkIfPrimitive = (element) => {
+  return is(element)('string', 'number')
+}
+
+const applyValueAsText = (element, parent, key) => {
+  const extendTag = element.extend && element.extend.tag
+  const childExtendTag = parent.childExtend && parent.childExtend.tag
+  const isKeyValidHTMLTag = ((TAGS.body.indexOf(key) > -1) && key)
+  return {
+    text: element,
+    tag: extendTag || childExtendTag || isKeyValidHTMLTag || 'string'
+  }
+}
+
+const addMethods = (element, parent) => {
+  const proto = {
+    set: set.bind(element),
+    update: update.bind(element),
+    remove: remove.bind(element),
+    updateContent: updateContentElement.bind(element),
+    removeContent: removeContentElement.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 (ENV === 'test' || ENV === 'development') proto.log = log.bind(element)
+  Object.setPrototypeOf(element, proto)
+}
+
+const applyContext = (element, parent, options) => {
+  if (options.context && !ROOT.context && !element.context) ROOT.context = options.context
+  if (!element.context) element.context = parent.context || options.context || ROOT.context
+}
+
+const checkIf = (element, parent) => {
+  const { __ref: ref } = element
+
+  if (isFunction(element.if)) {
+    // TODO: move as fragment
+    const ifPassed = element.if(element, element.state)
+    if (!ifPassed) {
+      const ifFragment = cacheNode({ tag: 'fragment' })
+      ref.__ifFragment = appendNode(ifFragment, parent.node)
+      delete ref.__if
+    } else ref.__if = true
+  } else ref.__if = true
+}
+
+const addCaching = (element, parent) => {
+  const { __ref: ref } = element
+  let { __ref: parentRef } = parent
+
+  // enable TRANSFORM in data
+  if (!element.transform) element.transform = {}
+
+  // enable CACHING
+  if (!ref.__cached) ref.__cached = {}
+  if (!ref.__defineCache) ref.__defineCache = {}
+
+  // enable EXEC
+  if (!ref.__exec) ref.__exec = {}
+
+  // enable CLASS CACHING
+  if (!ref.__class) ref.__class = {}
+  if (!ref.__classNames) ref.__classNames = {}
+
+  // enable CLASS CACHING
+  if (!ref.__attr) ref.__attr = {}
+
+  // enable CHANGES storing
+  if (!ref.__changes) ref.__changes = []
+
+  // enable CHANGES storing
+  if (!ref.__children) ref.__children = []
+
+  // Add _root element property
+  const hasRoot = parent && parent.key === ':root'
+  if (!ref.__root) ref.__root = hasRoot ? element : parentRef.__root
+
+  // set the PATH array
+  if (ENV === 'test' || ENV === 'development') {
+    if (!parentRef) parentRef = parent.ref = {}
+    if (!parentRef.__path) parentRef.__path = []
+    ref.__path = parentRef.__path.concat(element.key)
+  }
+}
+
+const resolveExtends = (element, parent, options) => {
+  const { __ref } = element
+  element.tag = detectTag(element)
+
+  if (!__ref.__exec) __ref.__exec = {}
+  if (!__ref.__attr) __ref.__attr = {}
+
+  if (!element.props) element.props = {}
+  if (!element.state) element.state = {}
+
+  createState(element, parent, { skipApplyMethods: true })
+  createProps(element, parent)
+  applyVariant(element, parent)
+
+  throughInitialExec(element, options.propsExcludedFromExec)
+
+  for (const param in element) {
+    const prop = element[param]
+    if (
+      isUndefined(prop) ||
+      isMethod(param) ||
+      isObject(registry[param]) ||
+      isVariant(param)
+    ) continue
+
+    const hasDefined = element.define && element.define[param]
+    const ourParam = registry[param]
+    const hasOptionsDefine = options.define && options.define[param]
+    if (ourParam && !hasOptionsDefine) continue
+    else if (element[param] && !hasDefined && !hasOptionsDefine) {
+      create(exec(prop, element), element, param, options)
+    }
+  }
+
+  delete element.parent
+  delete element.update
+  delete element.__element
+
+  // added by createProps
+  delete element.props.update
+  delete element.props.__element
+
+  // added by createState
+  delete element.state.__element
+  delete element.state.__element
+  if (!options.keepRef) delete element.__ref
+
+  return element
+}
+
+const checkIfMedia = (key) => key.slice(0, 1) === '@'
+
+const applyMediaProps = (element, parent, key) => {
+  const { props } = element
+  if (props) {
+    props.display = 'none'
+    if (props[key]) props[key].display = props.display
+    else props[key] = { display: props.display || 'block' }
+    return element
+  } else {
+    return {
+      ...element,
+      props: {
+        display: 'none',
+        [key]: { display: 'block' }
+      }
+    }
+  }
+}
+
+export default create

package/define.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import { report } from '@domql/report'
+import { registry } from './mixins'
+
+export default (params, options = {}) => {
+  const { overwrite } = options
+  for (const param in params) {
+    if (registry[param] && !overwrite) {
+      report('OverwriteToBuiltin', param)
+    } else registry[param] = params[param]
+  }
+}

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,27 @@
 '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 '@domql/tree'
+import create from './create'
+import createNode from './node'
+import define from './define'
+import update from './update'
+import parse from './parse'
+import set from './set'
+
+import { log, keys } from './methods'
+import { get, remove, lookup } from '@domql/methods'
+
+export {
+  TREE,
+  create,
+  createNode,
+  define,
+  remove,
+  update,
+  parse,
+  lookup,
+  set,
+  get,
+  log,
+  keys
+}

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 '@domql/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/methods.js

@@ -0,0 +1,88 @@
+'use strict'
+
+import { isDefined, isFunction, isObjectLike } from '@domql/utils'
+import { parseFilters, registry } from './mixins'
+
+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]]
+}

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 '@domql/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/options.js

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

package/package.json

@@ -1,15 +1,30 @@
 {
   "name": "@domql/element",
-  "version": "2.3.117",
-  "main": "index.js",
+  "version": "2.3.154",
   "license": "MIT",
+  "type": "module",
+  "module": "index.js",
+  "main": "index.js",
+  "exports": "./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/globals": "latest",
+    "@domql/key": "latest",
+    "@domql/tags": "latest"
   },
-  "gitHead": "a6da9bf1846e4a1e26017978cf52112b9d61d484",
-  "source": "index.js"
+  "gitHead": "86251c1d94b9e87288cc9e84fd9badb6461b2973",
+  "devDependencies": {
+    "@babel/core": "^7.12.0"
+  }
 }

package/parse.js

@@ -0,0 +1,17 @@
+'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

package/remove.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { isFunction } from '@domql/utils'
+
+export const updateContentElement = function (params, options) {
+  const element = this
+
+  if (!element.content) return
+  if (element.content.update) element.content.update(params, options)
+}
+
+export const removeContentElement = 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
+  }
+}

package/set.js

@@ -0,0 +1,33 @@
+'use strict'
+
+import { isEqualDeep } from '@domql/utils'
+import { removeContentElement } from './remove'
+
+import create from './create'
+import { registry } from './mixins'
+import OPTIONS from './options'
+
+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 (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/update.js

@@ -0,0 +1,227 @@
+'use strict'
+
+import { window } from '@domql/globals'
+import { exec, isArray, isFunction, isNumber, isObject, isString, isUndefined, merge, overwriteDeep } 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 { 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 './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: 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

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2016 symbo.ls
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.