domql 1.5.96 → 1.5.98

package/package.json

@@ -2,7 +2,7 @@
   "name": "domql",
   "description": "DOM rendering Javascript framework at early stage.",
   "author": "symbo.ls",
-  "version": "1.5.96",
+  "version": "1.5.98",
   "repository": "https://github.com/domql/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/packages/emotion/index.js

@@ -20,7 +20,9 @@ export const transformEmotionStyle = (emotion, live) => {
 export const transformEmotionClass = (emotion, live) => {
   return (params, element, state, flag) => {
     if (element.style && !flag) return
-    const { __class, __classNames } = element
+    const { __ref } = element
+    const { __class, __classNames } = __ref
+
     if (!isObjectLike(params)) return
 
     for (const key in params) {

package/src/element/create.js

@@ -11,12 +11,13 @@ import createProps from './props'
 import update from './update'
 import { on } from '../event'
 import { assignClass } from './mixins/classList'
-import { isObject, isFunction, isNumber, isString, createID, isNode, exec } from '../utils'
+import { isObject, isFunction, isString, createID, isNode, exec } from '../utils'
 import { remove, lookup, setProps, log, keys, parse, parseDeep, spotByPath, nextElement, previousElement, isMethod } from './methods'
 import cacheNode, { detectTag } from './cache'
 import { registry } from './mixins'
 import { throughInitialExec } from './iterate'
 import OPTIONS from './options'
+import { is } from '@domql/utils'
 // import { overwrite, clone, fillTheRest } from '../utils'
 
 const ENV = process.env.NODE_ENV
@@ -45,165 +46,110 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
   if (isNode(parent)) parent = root[`${key}_parent`] = { key: ':root', node: parent }
 
   // if element is STRING
-  if (isString(element) || isNumber(element)) {
-    const extendTag = element.extend && element.extend.tag
-    const childExtendTag = parent.childExtend && parent.childExtend.tag
-    const isKeyValidHTMLTag = ((nodes.body.indexOf(key) > -1) && key)
-    element = {
-      text: element,
-      tag: extendTag || childExtendTag || isKeyValidHTMLTag || 'string'
-    }
+  if (checkIfPrimitive(element)) {
+    element = applyValueAsText(element, parent, key)
   }
 
   // define KEY
   const assignedKey = (element.key || key || createID()).toString()
 
-  const { extend, props, state, childExtend, childProps } = element
-
-  if (isKeyComponent(assignedKey)) {
-    const hasComponentAttrs = extend || childExtend || props || state || element.on
-    const componentKey = assignedKey.split('_')[0]
-    if (!hasComponentAttrs || childProps) {
-      parent[assignedKey] = element = {
-        extend: componentKey || assignedKey,
-        props: { ...element }
-      }
-    } else if (!extend || extend === true) {
-      parent[assignedKey] = element = {
-        ...element,
-        extend: componentKey || assignedKey
-      }
-    }
+  if (checkIfKeyIsComponent(assignedKey)) {
+    element = applyKeyComponentAsExtend(element, parent, assignedKey)
   }
 
   // Responsive rendering
   // TODO: move as define plugin
-  if (assignedKey.slice(0, 1) === '@') {
-    if (props) {
-      props.display = 'none'
-      if (props[assignedKey]) props[assignedKey].display = props.display
-      else props[assignedKey] = { display: props.display || 'block' }
-    } else {
-      parent[assignedKey] = element = {
-        ...element,
-        props: {
-          display: 'none',
-          [assignedKey]: { display: 'block' }
-        }
-      }
-    }
+  if (checkIfMedia(assignedKey)) {
+    element = applyMediaProps(element, parent, assignedKey)
   }
 
+  const __ref = element.__ref = { origin: element } // eslint-disable-line 
+
   // assign context
-  if (options.context && !root.context && !element.context) root.context = options.context
-  if (!element.context) element.context = parent.context || options.context || root.context
+  applyContext(element, parent, options)
   const { context } = element
 
-  if (context && context.components) {
-    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 = {}
-      }
-    }
-  }
+  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) {
-    applyExtend(element, parent, options)
-    element.key = assignedKey
-    element.tag = detectTag(element)
-
-    if (!element.__exec) element.__exec = {}
-    if (!element.__attr) element.__attr = {}
-    if (!element.__ifFalsy) createProps(element, parent)
-    element.state = createState(element, parent, { skip: true })
-
-    throughInitialExec(element)
-
-    for (const param in element) {
-      const prop = element[param]
-      if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
-
-      const hasDefined = element.define && element.define[param]
-      const ourParam = registry[param]
-      const hasOptionsDefine = options.define && options.define[param]
-      if (ourParam && !hasOptionsDefine) {
-        continue // if (isFunction(ourParam)) ourParam(prop, element, element.node, options)
-      } else if (element[param] && !hasDefined && !hasOptionsDefine) {
-        create(exec(prop, element), element, param, options)
-      }
-    }
+  if (options.onlyResolveExtends) return resolveExtends(element, parent, options)
 
-    // createNode(element, options)
+  if (Object.keys(options).length) {
+    registry.defaultOptions = options
+    if (options.ignoreChildExtend) delete options.ignoreChildExtend
+  }
 
-    delete element.parent
-    delete element.update
-    delete element.__element
+  addCaching(element, parent)
 
-    // added by createProps
-    delete element.__props
-    delete element.props.__element
-    delete element.props.update
+  addMethods(element, parent)
 
-    // added by createState
-    delete element.state.__element
-    delete element.state.__element
-    delete element.__hasRootState
+  // enable STATE
+  element.state = createState(element, parent)
 
-    return element
+  // 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)
   }
 
-  // create EXTEND inheritance
-  applyExtend(element, parent, options)
+  // apply props settings
+  if (__ref.__if) createProps(element, parent)
 
-  if (Object.keys(options).length) {
-    registry.defaultOptions = options
-    if (options.ignoreChildExtend) delete options.ignoreChildExtend
+  // run `on.init`
+  if (element.on && isFunction(element.on.init)) {
+    on.init(element.on.init, element, element.state)
   }
 
-  // create and assign a KEY
-  element.key = assignedKey
+  // run `on.beforeClassAssign`
+  if (element.on && isFunction(element.on.beforeClassAssign)) {
+    on.beforeClassAssign(element.on.beforeClassAssign, element, element.state)
+  }
 
-  // enable TRANSFORM in data
-  if (!element.transform) element.transform = {}
+  // generate a CLASS name
+  assignClass(element)
 
-  // enable CACHING
-  if (!element.__cached) element.__cached = {}
+  // CREATE a real NODE
+  createNode(element, options)
 
-  // enable EXEC
-  if (!element.__exec) element.__exec = {}
+  if (!__ref.__if) return element
 
-  // enable CLASS CACHING
-  if (!element.__class) element.__class = {}
-  if (!element.__classNames) element.__classNames = {}
+  // assign NODE
+  assignNode(element, parent, key)
 
-  // enable CLASS CACHING
-  if (!element.__attr) element.__attr = {}
+  // run `on.render`
+  if (element.on && isFunction(element.on.render)) {
+    on.render(element.on.render, element, element.state)
+  }
 
-  // enable CHANGES storing
-  if (!element.__changes) element.__changes = []
+  if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key)
+  // console.groupEnd(element.key)
 
-  // enable CHANGES storing
-  if (!element.__children) element.__children = []
+  return element
+}
 
-  // Add _root element property
-  const hasRoot = parent && parent.key === ':root'
-  if (!element.__root) element.__root = hasRoot ? element : parent.__root
+const checkIfPrimitive = (element) => {
+  return is(element)('string', 'number')
+}
 
-  // set the PATH array
-  if (ENV === 'test' || ENV === 'development') {
-    if (!parent.path) parent.path = []
-    element.path = parent.path.concat(assignedKey)
+const applyValueAsText = (element, parent, key) => {
+  const extendTag = element.extend && element.extend.tag
+  const childExtendTag = parent.childExtend && parent.childExtend.tag
+  const isKeyValidHTMLTag = ((nodes.body.indexOf(key) > -1) && key)
+  return {
+    text: element,
+    tag: extendTag || childExtendTag || isKeyValidHTMLTag || 'string'
   }
+}
 
+const addMethods = (element, parent) => {
   // assign METHODS
   element.set = set
   element.update = update
@@ -220,61 +166,109 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
   if (ENV === 'test' || ENV === 'development') {
     element.log = log
   }
+}
 
-  // enable STATE
-  element.state = createState(element, parent)
+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 } = element
 
-  // don't render IF in condition
   if (isFunction(element.if)) {
     // TODO: move as fragment
-    if (!element.if(element, element.state)) {
+    const ifPassed = element.if(element, element.state)
+    if (!ifPassed) {
       const ifFragment = cacheNode({ tag: 'fragment' })
-      element.__ifFragment = appendNode(ifFragment, parent.node)
-      element.__ifFalsy = true
-    }
-  }
+      __ref.__ifFragment = appendNode(ifFragment, parent.node)
+      delete __ref.__if
+    } else __ref.__if = true
+  } else __ref.__if = true
+}
 
-  // if it already HAS a NODE
-  if (element.node && !element.__ifFalsy) { // TODO: check on if
-    return assignNode(element, parent, assignedKey)
-  }
+const addCaching = (element, parent) => {
+  const { __ref } = element
 
-  // apply props settings
-  if (!element.__ifFalsy) createProps(element, parent)
+  // enable TRANSFORM in data
+  if (!element.transform) element.transform = {}
 
-  // run `on.init`
-  if (element.on && isFunction(element.on.init)) {
-    on.init(element.on.init, element, element.state)
-  }
+  // enable CACHING
+  if (!__ref.__cached) __ref.__cached = {}
 
-  // run `on.beforeClassAssign`
-  if (element.on && isFunction(element.on.beforeClassAssign)) {
-    on.beforeClassAssign(element.on.beforeClassAssign, element, element.state)
+  // 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 (!element.__root) element.__root = hasRoot ? element : parent.__root
+
+  // set the PATH array
+  if (ENV === 'test' || ENV === 'development') {
+    if (!parent.path) parent.path = []
+    element.path = parent.path.concat(element.key)
   }
+}
 
-  // generate a CLASS name
-  assignClass(element)
+const resolveExtends = (element, parent, options) => {
+  const { __ref } = element
+  element.tag = detectTag(element)
 
-  // CREATE a real NODE
-  createNode(element, options)
+  if (!__ref.__exec) __ref.__exec = {}
+  if (!__ref.__attr) __ref.__attr = {}
+  if (__ref.__if) createProps(element, parent)
+  element.state = createState(element, parent, { skip: true })
 
-  if (element.__ifFalsy) return element
+  throughInitialExec(element)
 
-  // assign NODE
-  assignNode(element, parent, key)
+  for (const param in element) {
+    const prop = element[param]
+    if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
 
-  // run `on.render`
-  if (element.on && isFunction(element.on.render)) {
-    on.render(element.on.render, element, element.state)
+    const hasDefined = element.define && element.define[param]
+    const ourParam = registry[param]
+    const hasOptionsDefine = options.define && options.define[param]
+    if (ourParam && !hasOptionsDefine) {
+      continue // if (isFunction(ourParam)) ourParam(prop, element, element.node, options)
+    } else if (element[param] && !hasDefined && !hasOptionsDefine) {
+      create(exec(prop, element), element, param, options)
+    }
   }
 
-  if (parent.__children) parent.__children.push(element.key)
-  // console.groupEnd(element.key)
+  // createNode(element, options)
+
+  delete element.parent
+  delete element.update
+  delete element.__element
+
+  // added by createProps
+  delete element.__props // TODO: check with NikaOto and remove
+  delete element.props.__element
+  delete element.props.update
+
+  // added by createState
+  delete element.state.__element
+  delete element.state.__element
+  delete element.__hasRootState // TODO: check with NikaOto and remove
+  delete element.__ref
 
   return element
 }
 
-export const isKeyComponent = (key) => {
+const checkIfKeyIsComponent = (key) => {
   const isFirstKeyString = isString(key)
   if (!isFirstKeyString) return
 
@@ -283,4 +277,62 @@ export const isKeyComponent = (key) => {
   return /^[A-Z]*$/.test(firstCharKey)
 }
 
+const extendizeByKey = (element, parent, key) => {
+  const { extend, props, state, childExtend, childProps } = element
+  const hasComponentAttrs = extend || childExtend || props || state || element.on
+  const componentKey = key.split('_')[0]
+  if (!hasComponentAttrs || childProps) {
+    return {
+      extend: componentKey || key,
+      props: { ...element }
+    }
+  } else if (!extend || extend === true) {
+    return {
+      ...element,
+      extend: componentKey || key
+    }
+  }
+}
+
+const applyKeyComponentAsExtend = (element, parent, key) => {
+  return extendizeByKey(element, parent, key) || element
+}
+
+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 = {}
+    }
+  }
+}
+
+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/src/element/extend.js

@@ -11,7 +11,7 @@ const ENV = process.env.NODE_ENV
 export const applyExtend = (element, parent, options = {}) => {
   if (isFunction(element)) element = exec(element, parent)
 
-  let { extend, props, context } = element
+  let { extend, props, context, __ref } = element
   const COMPONENTS = (context && context.components) || options.components
 
   if (isString(extend)) extend = COMPONENTS[extend]
@@ -53,7 +53,7 @@ export const applyExtend = (element, parent, options = {}) => {
     stack = [].concat(stack, defaultOptionsExtend)
   }
 
-  element.__extend = stack
+  __ref.__extend = stack
   let mergedExtend = cloneAndMergeArrayExtend(stack)
 
   const component = exec(element.component || mergedExtend.component, element)

package/src/element/iterate.js

@@ -22,17 +22,20 @@ export const applyEvents = element => {
 }
 
 export const throughInitialExec = element => {
+  const { __ref } = element
+  const { __exec } = __ref
   for (const param in element) {
     const prop = element[param]
     if (isFunction(prop) && !isMethod(param)) {
-      element.__exec[param] = prop
+      __exec[param] = prop
       element[param] = prop(element, element.state)
     }
   }
 }
 
 export const throughUpdatedExec = (element, options) => {
-  const { __exec } = element
+  const { __ref } = element
+  const { __exec, __cached } = __ref
   const changes = {}
 
   for (const param in __exec) {
@@ -43,7 +46,7 @@ export const throughUpdatedExec = (element, options) => {
     if (prop && prop.node && (isString(newExec) || isNumber(newExec))) {
       overwrite(prop, { text: newExec }, options)
     } else if (newExec !== prop) {
-      element.__cached[param] = changes[param] = prop
+      __cached[param] = changes[param] = prop
       element[param] = newExec
     }
   }
@@ -52,7 +55,8 @@ export const throughUpdatedExec = (element, options) => {
 }
 
 export const throughInitialDefine = (element) => {
-  const { define, context } = element
+  const { define, context, __ref } = element
+  const { __exec, __cached } = __ref
 
   let obj = {}
   if (isObject(define)) obj = { ...define }
@@ -62,18 +66,19 @@ export const throughInitialDefine = (element) => {
     let prop = element[param]
 
     if (isFunction(prop) && !isMethod(param)) {
-      element.__exec[param] = prop
+      __exec[param] = prop
       element[param] = prop = exec(prop, element)
     }
 
-    element.__cached[param] = prop
+    __cached[param] = prop
     element[param] = obj[param](prop, element, element.state)
   }
   return element
 }
 
 export const throughUpdatedDefine = (element) => {
-  const { context, define, __exec } = element
+  const { context, define, __ref } = element
+  const { __exec, __cached } = __ref
   const changes = {}
 
   let obj = {}
@@ -82,8 +87,8 @@ export const throughUpdatedDefine = (element) => {
 
   for (const param in obj) {
     const execParam = __exec[param]
-    if (execParam) element.__cached[param] = execParam(element, element.state)
-    const cached = exec(element.__cached[param], element)
+    if (execParam) __cached[param] = execParam(element, element.state)
+    const cached = exec(__cached[param], element)
     element[param] = obj[param](cached, element, element.state)
   }
   return changes

package/src/element/methods.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { isFunction, isObjectLike } from '../utils'
-import { registry, parseFilters } from './mixins'
+import { parseFilters, registry } from './mixins'
 import root from './root'
 
 const ENV = process.env.NODE_ENV
@@ -130,7 +130,7 @@ export const isMethod = function (param) {
 export const nextElement = function () {
   const element = this
   const { key, parent } = element
-  const { __children } = parent
+  const { __children } = parent.__ref
 
   const currentIndex = __children.indexOf(key)
   const nextChild = __children[currentIndex + 1]
@@ -142,7 +142,7 @@ export const nextElement = function () {
 export const previousElement = function (el) {
   const element = el || this
   const { key, parent } = element
-  const { __children } = parent
+  const { __children } = parent.__ref
 
   if (!__children) return
 

package/src/element/mixins/attr.js

@@ -7,7 +7,8 @@ import { exec, report } from '../../utils'
  * Recursively add attributes to a DOM node
  */
 export default (params, element, node) => {
-  const { __attr } = element
+  const { __ref } = element
+  const { __attr } = __ref
   if (isNot('object')) report('HTMLInvalidAttr', params)
   if (params) {
     for (const attr in params) {

package/src/element/mixins/content.js

@@ -9,6 +9,7 @@ import set from '../set'
 export default (param, element, node, options) => {
   if (param && element) {
     if (param.__hash === element.content.__hash && element.content.update) {
+      if (!element.content.__ref) element.content.__ref = {}
       element.content.update(param)
     } else {
       set.call(element, param, options)

package/src/element/mixins/html.js

@@ -8,12 +8,13 @@ import { exec } from '../../utils'
  */
 export default (param, element, node) => {
   const prop = exec(param, element)
-  if (prop !== element.__html) {
+  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
 
-    element.__html = prop
+    __ref.__html = prop
   }
 }

package/src/element/mixins/registry.js

@@ -1,14 +1,9 @@
 'use strict'
 
 import {
-  attr,
-  style,
-  text,
-  html,
-  content,
-  data,
-  classList,
-  state
+  attr, classList, content,
+  data, html, state, style,
+  text
 } from '.'
 
 export default {
@@ -29,30 +24,10 @@ export default {
   if: {},
   define: {},
   transform: {},
+  __ref: {},
   __hash: {},
-  __componentKey: {},
-  __cached: {},
-  __defined: {},
-  __exec: {},
-  __changes: {},
-  __trash: {},
   __root: {},
-  __props: {},
-  __extend: {},
-  __ifFragment: {},
-  __children: {},
-  __ifFalsy: {},
   __text: {},
-  __element: {},
-  __html: {},
-  __class: {},
-  __className: {},
-  __classNames: {},
-  __attr: {},
-  __state: {},
-  __stateType: {},
-  __currentSnapshot: {},
-  __hasRootState: {},
   nextElement: {},
   previousElement: {},
   key: {},
@@ -81,7 +56,7 @@ export default {
 export const parseFilters = {
   elementKeys: [
     'tag', 'text', 'style', 'attr', 'class', 'state', 'class',
-    'data', 'content', 'html'
+    'data', 'content', 'html', 'on'
     // TODO: 'props' ?
   ],
   propsKeys: ['__element'],

package/src/element/node.js

@@ -30,14 +30,14 @@ const ENV = process.env.NODE_ENV
 
 export const createNode = (element, options) => {
   // create and assign a node
-  let { node, tag, context } = element
+  let { node, tag, context, __ref } = element
 
   let isNewNode
 
   if (!node) {
     isNewNode = true
 
-    if (element.__ifFalsy) return element
+    if (!__ref.__if) return element
 
     if (tag === 'shadow') {
       node = element.node = element.parent.node.attachShadow({ mode: 'open' })
@@ -56,7 +56,7 @@ export const createNode = (element, options) => {
     if (isFunction(node.setAttribute)) node.setAttribute('key', element.key)
   }
 
-  if (element.__ifFalsy) return element
+  if (!__ref.__if) return element
 
   // iterate through all given params
   if (element.tag !== 'string' || element.tag !== 'fragment') {

package/src/element/props.js

@@ -2,9 +2,9 @@
 
 import { deepClone, deepMerge, exec, isArray, isObject, isString } from '../utils'
 
-const initProps = (element, parent) => {
-  const { props } = element
-  const propsStack = []
+const createPropsStack = (element, parent) => {
+  const { props, __ref } = element
+  const propsStack = __ref.propsStack = []
 
   const isMatch = isString(props) && props.indexOf('match') > -1
   const matchParent = parent.props && parent.props[element.key]
@@ -41,8 +41,8 @@ const initProps = (element, parent) => {
     propsStack.push(matchParentValue)
   } else if (props) propsStack.push(props)
 
-  if (isArray(element.__extend)) {
-    element.__extend.map(extend => {
+  if (isArray(__ref.__extend)) {
+    __ref.__extend.map(extend => {
       if (extend.props) propsStack.push(extend.props)
       return extend.props
     })
@@ -69,10 +69,11 @@ export const syncProps = (props, element) => {
 }
 
 const createProps = function (element, parent, cached) {
-  const propsStack = cached || initProps(element, parent)
+  const propsStack = cached || createPropsStack(element, parent)
+  const { __ref } = element
 
   if (propsStack.length) {
-    element.__props = propsStack
+    __ref.__props = propsStack
     syncProps(propsStack, element)
     element.props.update = update
   } else inheritProps(element, parent)
@@ -81,9 +82,10 @@ const createProps = function (element, parent, cached) {
 }
 
 export const updateProps = (newProps, element, parent) => {
-  let propsStack = element.__props
+  const { __ref } = element
+  let propsStack = __ref.__props
 
-  if (newProps) propsStack = element.__props = [].concat(newProps, propsStack)
+  if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack)
 
   if (propsStack) syncProps(propsStack, element)
   else inheritProps(element, parent)

package/src/element/set.js

@@ -7,13 +7,15 @@ import OPTIONS from './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 } = element
+    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()
@@ -25,10 +27,11 @@ export const removeContentElement = function (el) {
 
 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 && element.content.__cached) return element
+  if (isEqual && __contentRef && __contentRef.__cached) return element
   removeContentElement(element)
 
   if (params) {

package/src/element/state.js

@@ -5,15 +5,9 @@ import { deepClone, exec, overwriteShallow, overwriteDeep } from '../utils'
 import { is, isObject, isFunction, isUndefined } from '@domql/utils'
 
 export const IGNORE_STATE_PARAMS = [
-<<<<<<< HEAD
-  'update', 'parse', 'clean', 'create', 'parent', '__element', '__depends',
-  '__ref', '__root', '__components', '__extend', '__cached', '__projectSystem',
-  '__projectState', '__projectComponents', '__projectPages', '__projectFiddles',
-=======
   'update', 'parse', 'clean', 'create', 'parent', '__element', '__depends', '__ref', '__root',
-  '__components', '__extend', '__cached',
+  '__components',
   '__projectSystem', '__projectState', '__projectComponents', '__projectPages', '__projectSnippets',
->>>>>>> 5e4dd98 (fiddle > snippets)
   'projectStateUpdate', 'projectSystemUpdate'
 ]
 
@@ -57,6 +51,7 @@ export const projectStateUpdate = function (obj, options = {}) {
 export const updateState = function (obj, options = {}) {
   const state = this
   const element = state.__element
+  const __elementRef = element.__ref
   state.parent = element.parent.state
 
   if (!state.__element) createState(element, element.parent)
@@ -67,13 +62,13 @@ export const updateState = function (obj, options = {}) {
     if (initReturns === false) return
   }
 
-  const stateKey = element.__state
+  const stateKey = __elementRef.__state
   if (stateKey) {
     // TODO: check for double parent
     if (state.parent && state.parent[stateKey]) {
       const keyInParentState = state.parent[stateKey]
       if (keyInParentState && !options.stopStatePropogation) {
-        if (element.__stateType === 'string') {
+        if (__elementRef.__stateType === 'string') {
           return state.parent.update({ [stateKey]: obj.value }, options)
         }
         return state.parent.update({ [stateKey]: obj }, options)
@@ -105,16 +100,16 @@ export const updateState = function (obj, options = {}) {
 export const createState = function (element, parent, opts) {
   const skip = (opts && opts.skip) ? opts.skip : false
 
-  let { state, __root } = element
+  let { state, __root, __ref: __elementRef } = element
 
   if (isFunction(state)) state = exec(state, element)
 
   if (is(state)('string', 'number')) {
-    element.__state = state
+    __elementRef.__state = state
     state = {}
   }
   if (state === true) {
-    element.__state = element.key
+    __elementRef.__state = element.key
     state = {}
   }
 
@@ -122,7 +117,7 @@ export const createState = function (element, parent, opts) {
     if (parent && parent.state) return parent.state
     return {}
   } else {
-    element.__hasRootState = true
+    __elementRef.__hasRootState = true
   }
 
   // run `on.init`
@@ -130,7 +125,7 @@ export const createState = function (element, parent, opts) {
     on.stateInit(element.on.stateInit, element, element.state)
   }
 
-  let stateKey = element.__state
+  let stateKey = __elementRef.__state
   if (stateKey) {
     let parentState = parent.state
     const parentKeysArr = stateKey.split('../')
@@ -154,7 +149,7 @@ export const createState = function (element, parent, opts) {
         state = deepClone(keyInParentState)
       } else if (is(keyInParentState)('string', 'number')) {
         state = { value: keyInParentState }
-        element.__stateType = 'string'
+        __elementRef.__stateType = 'string'
       } else if (isUndefined(keyInParentState)) {
         console.warn(stateKey, 'is not in present', 'replacing with ', {})
         state = {}

package/src/element/update.js

@@ -1,16 +1,15 @@
 'use strict'
 
-import { overwrite, isFunction, isObject, isString, isNumber, createSnapshotId, merge } from '../utils'
-import { registry } from './mixins'
+import { window } from '@domql/globals'
+import { diff } from '@domql/utils'
 import { on } from '../event'
-import { isMethod } from './methods'
+import { createSnapshotId, isFunction, isNumber, isObject, isString, merge, overwrite } from '../utils'
+import create from './create'
 import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
-import { appendNode } from './assign'
-import { createNode } from './node'
+import { isMethod } from './methods'
+import { registry } from './mixins'
 import { updateProps } from './props'
 import createState from './state'
-import { diff } from '@domql/utils'
-import { window } from '@domql/globals'
 
 const snapshot = {
   snapshotId: createSnapshotId
@@ -28,15 +27,18 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const element = this
   const { parent, node, context } = element
 
+  let __ref = element.__ref
+  if (!__ref) __ref = element.__ref = {}
+
   const { currentSnapshot, calleeElement } = options
   if (!calleeElement) {
-    element.__currentSnapshot = snapshot.snapshotId()
+    __ref.__currentSnapshot = snapshot.snapshotId()
   }
-  const snapshotOnCallee = element.__currentSnapshot || (calleeElement && calleeElement.__currentSnapshot)
+
+  const snapshotOnCallee = __ref.__currentSnapshot ||
+    (calleeElement && calleeElement.__ref && calleeElement.__currentSnapshot)
   if (snapshotOnCallee && currentSnapshot < snapshotOnCallee) {
-    // console.log(calleeElement)
-    // console.log(currentSnapshot, snapshotOnCallee, 'cancelling')
-    // return
+    // TODO: stop previous update
   }
 
   if (isString(params) || isNumber(params)) {
@@ -46,21 +48,27 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   if (isFunction(element.if)) {
     // TODO: move as fragment
     const ifPassed = element.if(element, element.state)
-
-    if (ifPassed) delete element.__ifFalsy
-    if (element.__ifFalsy && ifPassed) {
-      createNode(element)
-      appendNode(element.node, element.__ifFragment)
+    const itWasFalse = !__ref.__if
+
+    if (ifPassed) __ref.__if = true
+    if (itWasFalse && ifPassed) {
+      delete element.__hash
+      if (!__ref.__hasRootState || __ref.__state) delete element.state
+      const created = create(element, element.parent, element.key)
+      if (!options.preventUpdate && element.on && isFunction(element.on.update)) {
+        on.update(element.on.update, created, created.state)
+      }
+      return created
     } else if (element.node && !ifPassed) {
       element.node.remove()
-      element.__ifFalsy = true
+      delete __ref.__if
     }
   }
 
-  if (element.__state) {
-    const keyInParentState = parent.state[element.__state]
+  if (__ref.__state) {
+    const keyInParentState = parent.state[__ref.__state]
     if (keyInParentState) {
-      const newState = element.__stateType === 'string'
+      const newState = __ref.__stateType === 'string'
         ? createState(element, parent)
         : createState(element, parent)
       const changes = diff(newState.parse(), element.state.parse())
@@ -77,9 +85,9 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
         on.stateUpdated(element.on.stateUpdated, element, element.state, changes)
       }
     }
-  } else if (!element.__hasRootState) element.state = (parent && parent.state) || {}
+  } else if (!__ref.__hasRootState) element.state = (parent && parent.state) || {}
 
-  if (!element.__ifFalsy && !options.preventPropsUpdate) updateProps(params.props, element, parent)
+  if (__ref.__if && !options.preventPropsUpdate) updateProps(params.props, element, parent)
 
   if (element.on && isFunction(element.on.initUpdate) && !options.ignoreInitUpdate) {
     const whatinitreturns = on.initUpdate(element.on.initUpdate, element, element.state)
@@ -95,7 +103,7 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     element.__stackChanges.push(stackChanges)
   }
 
-  if (element.__ifFalsy) return false
+  if (!__ref.__if) return false
   if (!node) {
     // return createNode(element, options)
     return

package/src/utils/object.js

@@ -121,7 +121,7 @@ export const clone = obj => {
 /**
  * Deep cloning of object
  */
-export const deepClone = (obj, excluding = ['parent', 'node', '__element', 'state', '__root', '__cached', 'context']) => {
+export const deepClone = (obj, excluding = ['parent', 'node', '__element', 'state', '__root', '__cached', 'context', 'extend', '__ref']) => {
   const o = isArray(obj) ? [] : {}
   for (const prop in obj) {
     if (excluding.indexOf(prop) > -1) continue
@@ -161,25 +161,27 @@ export const isEqualDeep = (param, element) => {
  */
 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') continue
+    if (e === 'props' || e === 'state' || e === '__ref') continue
 
     const elementProp = element[e]
     const paramsProp = params[e]
 
     if (paramsProp !== undefined) {
-      element.__cached[e] = changes[e] = elementProp
+      __cached[e] = changes[e] = elementProp
       element[e] = paramsProp
     }
 
-    if (options.cleanExec) delete element.__exec[e]
+    if (options.cleanExec) delete __exec[e]
   }
 
   return changes
 }
 
-export const overwriteShallow = (obj, params, excluding = ['node', '__root']) => {
+export const overwriteShallow = (obj, params, excluding = ['node', '__root', '__ref']) => {
   for (const e in params) {
     if (excluding.indexOf(e) > -1) continue
     obj[e] = params[e]
@@ -190,7 +192,7 @@ export const overwriteShallow = (obj, params, excluding = ['node', '__root']) =>
 /**
  * Overwrites DEEPly object properties with another
  */
-export const overwriteDeep = (obj, params, excluding = ['node', '__root']) => {
+export const overwriteDeep = (obj, params, excluding = ['node', '__root', '__ref']) => {
   for (const e in params) {
     if (excluding.indexOf(e) > -1) continue
     const objProp = obj[e]
@@ -215,7 +217,7 @@ export const mergeIfExisted = (a, b) => {
 /**
  * Merges array extends
  */
-export const mergeArray = (arr, excluding = ['parent', 'node', '__element', 'state', '__root', '__cached', 'context']) => {
+export const mergeArray = (arr, excluding = ['parent', 'node', '__element', 'state', '__root', '__cached', 'context', '__ref']) => {
   return arr.reduce((a, c) => deepMerge(a, deepClone(c, excluding)), {})
 }