domql 1.5.17 → 1.5.19

package/package.json

@@ -3,7 +3,7 @@
   "description": "DOM rendering Javascript framework at early stage.",
   "private": false,
   "author": "rackai",
-  "version": "1.5.17",
+  "version": "1.5.19",
   "repository": "https://github.com/rackai/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/packages/emotion/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import DOM from '../../src'
-import { isObjectLike, exec, isObject, isEqualDeep } from '../../src/utils'
+import { isObjectLike, exec, isObject, isEqualDeep, memoize } from '../../src/utils'
 import { classList } from '../../src/element/mixins'
 import createEmotion from '@emotion/css/create-instance'
 const ENV = process.env.NODE_ENV
@@ -26,23 +26,32 @@ export const initEmotion = (container, options) => {
       if (isObjectLike(element.class)) element.class.elementStyle = execPareams
       else element.class = { elementStyle: execPareams }
     }
-    classf(element.class, element, node)
+    classf(element.class, element, node, true)
   }
 
-  const classf = (params, element, node) => {
-    const { __class } = element
-    if (isObjectLike(params)) {
-      const classObjHelper = {}
-      for (const key in params) {
-        const prop = exec(params[key], element)
-        if (!prop && prop === __class[key]) continue
-        __class[key] = prop
+  const classf = (params, element, node, flag) => {
+    if (element.style && !flag) return
+    const { __class, __classNames } = element
+    if (!isObjectLike(params)) return
+
+    for (const key in params) {
+      const prop = exec(params[key], element)
+
+      if (!prop) {
+        delete __class[key]
+        delete __classNames[key] = CSSed
+        continue
+      }
+
+      const isEqual = isEqualDeep(__class[key], prop)
+      if (!isEqual) {
         if ((ENV === 'test' || ENV === 'development') && isObject(prop)) prop.label = key || element.key
         const CSSed = css(prop)
-        classObjHelper[key] = CSSed
+        __class[key] = prop
+        __classNames[key] = CSSed
       }
-      classList(classObjHelper, element, node)
     }
+    classList(__classNames, element, node)
   }
 
   DOM.define({

package/src/element/create.js

@@ -12,7 +12,7 @@ import update from './update'
 import * as on from '../event/on'
 import { assignClass } from './mixins/classList'
 import { isFunction, isNumber, isString, createID, isNode, exec } from '../utils'
-import { remove, lookup, setProps, log, keys, parse, parseDeep } from './methods'
+import { remove, lookup, setProps, log, keys, parse, parseDeep, spotByPath } from './methods'
 import cacheNode from './cache'
 import { registry } from './mixins'
 // import { overwrite, clone, fillTheRest } from '../utils'
@@ -24,7 +24,11 @@ const ENV = process.env.NODE_ENV
  */
 const create = (element, parent, key, options = {}) => {
   // if ELEMENT is not given
-  if (element === undefined) element = {}
+  if (element === undefined) {
+    if (ENV === 'test' || ENV === 'development')
+      console.warn(key, 'element is undefined in', parent && parent.path)
+    element = {}
+  }
   if (element === null) return
 
   // if element is extend
@@ -83,21 +87,34 @@ const create = (element, parent, key, options = {}) => {
     if (options.ignoreChildExtend) delete options.ignoreChildExtend
   }
 
-  // enable STATE
-  element.state = createState(element, parent)
-
   // create and assign a KEY
   element.key = assignedKey
 
-  // don't render IF in condition
-  if (isFunction(element.if)) {
-    // TODO: move as fragment
-    if (!element.if(element, element.state)) {
-      const ifFragment = cacheNode({ tag: 'fragment' })
-      element.__ifFragment = appendNode(ifFragment, parent.node)
-      element.__ifFalsy = true
-    }
-  }
+  // enable TRANSFORM in data
+  if (!element.transform) element.transform = {}
+
+  // enable CACHING
+  if (!element.__cached) element.__cached = {}
+
+  // enable EXEC
+  if (!element.__exec) element.__exec = {}
+
+  // enable CLASS CACHING
+  if (!element.__class) element.__class = {}
+  if (!element.__classNames) element.__classNames = {}
+
+  // enable CLASS CACHING
+  if (!element.__attr) element.__attr = {}
+
+  // enable CHANGES storing
+  if (!element.__changes) element.__changes = []
+
+  // enable CHANGES storing
+  if (!element.__children) element.__children = []
+
+  // Add _root element property
+  const hasRoot = parent.parent && parent.parent.key === ':root'
+  if (!element.__root) element.__root = hasRoot ? parent : parent.__root
 
   // set the PATH array
   if (ENV === 'test' || ENV === 'development') {
@@ -105,11 +122,6 @@ const create = (element, parent, key, options = {}) => {
     element.path = parent.path.concat(assignedKey)
   }
 
-  // if it already HAS a NODE
-  if (element.node && !element.__ifFalsy) { // TODO: check on if
-    return assignNode(element, parent, assignedKey)
-  }
-
   // assign METHODS
   element.set = set
   element.update = update
@@ -117,6 +129,7 @@ const create = (element, parent, key, options = {}) => {
   element.removeContent = removeContentElement
   element.setProps = setProps
   element.lookup = lookup
+  element.spotByPath = spotByPath
   element.parse = parse
   element.parseDeep = parseDeep
   element.keys = keys
@@ -124,29 +137,24 @@ const create = (element, parent, key, options = {}) => {
     element.log = log
   }
 
-  // console.group(element.key)
-
-  // enable TRANSFORM in data
-  if (!element.transform) element.transform = {}
-
-  // enable CACHING
-  if (!element.__cached) element.__cached = {}
 
-  // enable EXEC
-  if (!element.__exec) element.__exec = {}
-
-  // enable CLASS CACHING
-  if (!element.__class) element.__class = {}
-
-  // enable CHANGES storing
-  if (!element.__changes) element.__changes = []
+  // enable STATE
+  element.state = createState(element, parent)
 
-  // enable CHANGES storing
-  if (!element.__children) element.__children = []
+  // don't render IF in condition
+  if (isFunction(element.if)) {
+    // TODO: move as fragment
+    if (!element.if(element, element.state)) {
+      const ifFragment = cacheNode({ tag: 'fragment' })
+      element.__ifFragment = appendNode(ifFragment, parent.node)
+      element.__ifFalsy = true
+    }
+  }
 
-  // Add _root element property
-  const hasRoot = parent.parent && parent.parent.key === ':root'
-  if (!element.__root) element.__root = hasRoot ? parent : parent.__root
+  // if it already HAS a NODE
+  if (element.node && !element.__ifFalsy) { // TODO: check on if
+    return assignNode(element, parent, assignedKey)
+  }
 
   // apply props settings
   if (!element.__ifFalsy) createProps(element, parent)

package/src/element/methods.js

@@ -2,6 +2,7 @@
 
 import { isFunction, isObject, isObjectLike } from '../utils'
 import { registry } from './mixins'
+import root from './root'
 import { removeContentElement } from './set'
 
 const ENV = process.env.NODE_ENV
@@ -20,6 +21,24 @@ export const lookup = function (key) {
   return parent
 }
 
+// TODO: update these files
+export const spotByPath = function (path) {
+  const element = this
+  const arr = [].concat(path)
+  let active = root[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
+}
+
 export const remove = function (params) {
   const element = this
   if (isFunction(element.node.remove)) element.node.remove()
@@ -104,6 +123,7 @@ export const isMethod = function (param) {
     param === 'remove' ||
     param === 'removeContent' ||
     param === 'lookup' ||
+    param === 'spotByPath' ||
     param === 'keys' ||
     param === 'parse' ||
     param === 'setProps' ||

package/src/element/mixins/attr.js

@@ -6,13 +6,16 @@ import { exec, report } from '../../utils'
  * Recursively add attributes to a DOM node
  */
 export default (params, element, node) => {
+  const { __attr } = element
   if (params) {
     if (!(typeof params === 'object')) report('HTMLInvalidAttr', params)
     for (const attr in params) {
       // if (!node) node = element.node
       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
     }
   }
 }

package/src/element/mixins/content.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import set from '../set'
+import { isEqualDeep } from '../../utils'
 
 /**
  * Appends anything as content
@@ -8,9 +9,11 @@ import set from '../set'
  */
 export default (param, element, node, options) => {
   if (param && element) {
+    const {$setStateCollection} = element
+    // console.log($setStateCollection)
     if (param.__hash === element.content.__hash && element.content.update) {
+      // if ($setStateCollection) return
       const { define } = element
-      // if (define && !define.$setStateCollection)
       element.content.update(param)
     } else {
       set.call(element, param, options)

package/src/element/mixins/html.js

@@ -8,7 +8,7 @@ import { exec } from '../../utils'
  */
 export default (param, element, node) => {
   const prop = exec(param, element)
-  if (prop || prop !== element.__html) {
+  if (prop !== element.__html) {
     // const parser = new window.DOMParser()
     // param = parser.parseFromString(param, 'text/html')
     if (node.nodeName === 'SVG') node.textContent = prop

package/src/element/mixins/registry.js

@@ -42,9 +42,11 @@ export default {
   __ifFalsy: {},
   __text: {},
   __element: {},
-  __class: {},
   __html: {},
+  __class: {},
   __className: {},
+  __classNames: {},
+  __attr: {},
   key: {},
   tag: {},
   parent: {},
@@ -55,11 +57,12 @@ export default {
   remove: {},
   removeContent: {},
   lookup: {},
+  spot: {},
   keys: {},
   log: {},
   parse: {},
   parseDeep: {},
   on: {},
   component: {},
-  context: {}
+  context: {},
 }

package/src/element/mixins/state.js

@@ -1,13 +1,14 @@
 'use strict'
 
 import { exec, isObject } from '../../utils'
+import { IGNORE_STATE_PARAMS } from '../state'
 
 export default (params, element, node) => {
   const state = exec(params, element)
 
   if (isObject(state)) {
     for (const param in state) {
-      if (param === 'update' || param === '__element' || param === 'parse') continue
+      if (IGNORE_STATE_PARAMS.includes(param)) continue
       element.state[param] = exec(state[param], element)
     }
   }

package/src/element/mixins/text.js

@@ -7,11 +7,28 @@ import { exec } from '../../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) => {
   const prop = exec(param, element)
-  if (element.tag === 'string') node.nodeValue = prop
+  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/src/element/props.js

@@ -15,12 +15,14 @@ const initProps = (element, parent) => {
     return propValue
   }
 
+  if (isObject(props)) {
+    propsStack.push(props)
+  }
+
   if (matchParent && props !== 'match') propsStack.push(matchParent)
   if (matchParentChild) propsStack.push(matchParentChild)
 
-  if (isObject(props)) {
-    propsStack.push(props)
-  } else if (props === 'inherit') {
+  if (props === 'inherit') {
     if (parent.props) propsStack.push(parent.props)
   } else if (isMatch) {
     const hasArg = props.split(' ')

package/src/element/set.js

@@ -26,10 +26,10 @@ const set = function (params, options, el) {
   const element = el || this
 
   const isEqual = isEqualDeep(params, element.content)
+  console.error(isEqual)
+  console.log(element.path)
+  // console.error(params)
   if (isEqual && element.content.__cached) return element
-
-  // console.group(element.key)
-  // console.log(isEqual, params, element.content)
   removeContentElement(element)
 
   if (params) {
@@ -40,7 +40,6 @@ const set = function (params, options, el) {
       ...registry.defaultOptions
     })
   }
-  // console.groupEnd(element.key)
 
   return element
 }

package/src/element/state.js

@@ -1,19 +1,32 @@
 'use strict'
 
+import { update } from '.'
 import { on } from '../event'
-import { deepClone, exec, isFunction, overwriteDeep } from '../utils'
+import { debounce, deepClone, exec, isFunction, isObject, overwriteDeep } from '../utils'
+
+export const IGNORE_STATE_PARAMS = ['update', 'parse', 'clean', 'parent', '__element', '__depends', '__ref']
 
 export const parseState = function () {
   const state = this
   const parseState = {}
   for (const param in state) {
-    if (param !== '__element' && param !== 'update' && param !== 'parse') {
+    if (!IGNORE_STATE_PARAMS.includes(param)) {
       parseState[param] = state[param]
     }
   }
   return parseState
 }
 
+export const cleanState = function () {
+  const state = this
+  for (const param in state) {
+    if (!IGNORE_STATE_PARAMS.includes(param)) {
+      delete state[param]
+    }
+  }
+  return state
+}
+
 export const updateState = function (obj, options = {}) {
   const state = this
   const element = state.__element
@@ -23,9 +36,20 @@ export const updateState = function (obj, options = {}) {
     on.initStateUpdated(element.on.initStateUpdated, element, state)
   }
 
-  overwriteDeep(state, obj, ['update', 'parse', '__element'])
+  overwriteDeep(state, obj, IGNORE_STATE_PARAMS)
 
-  if (!options.preventUpdate) element.update({}, options)
+  if (!options.preventUpdate) debounce(element, update, 150)({}, {
+    preventStateUpdate: 'once',
+    ...options
+  })
+
+  if (state.__depends) {
+    for (const el in state.__depends) {
+      // const findElement = element.spotByPath(state.__depends[el])
+      const findElement = state.__depends[el]
+      findElement.clean().update(state.parse(), options)
+    }
+  }
 
   // run `on.stateUpdated`
   if (element.on && isFunction(element.on.stateUpdated)) {
@@ -35,15 +59,27 @@ export const updateState = function (obj, options = {}) {
 
 export default function (element, parent) {
   let { state } = element
-  // if (!state) return (parent && parent.state) || {}
+
   if (!state) {
     if (parent && parent.state) return parent.state
     return {}
   }
+
   if (isFunction(state)) state = exec(state, element)
 
-  element.state = state = deepClone(state, ['update', 'parse', '__element'])
+  const { __ref } = state
+  if (__ref) {
+    state = deepClone(__ref, IGNORE_STATE_PARAMS)
+    if (isObject(__ref.__depends)) {
+      __ref.__depends[element.key] = state
+    } else __ref.__depends = { [element.key] : state }
+  } else {
+    state = deepClone(state, IGNORE_STATE_PARAMS)
+  }
+
+  element.state = state
   state.__element = element
+  state.clean = cleanState
   state.parse = parseState
   state.update = updateState
   state.parent = element.parent.state

package/src/element/update.js

@@ -11,6 +11,8 @@ import { createNode } from '.'
 import { updateProps } from './props'
 import createState from './state'
 
+import { measure } from '@domql/performance'
+
 const UPDATE_DEFAULT_OPTIONS = {
   stackChanges: false,
   cleanExec: true,
@@ -62,26 +64,31 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     on.initUpdate(element.on.initUpdate, element, element.state)
   }
 
-
   for (const param in element) {
     const prop = element[param]
 
-    if (options.preventDefineUpdate === true || options.preventDefineUpdate === param) continue
-    if (options.preventContentUpdate && param === 'content') continue
-    if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
+    if (
+      options.preventDefineUpdate === true || options.preventDefineUpdate === param ||
+      options.preventContentUpdate && param === 'content' ||
+      options.preventStateUpdate && param === 'state' ||
+      isMethod(param) || isObject(registry[param]) || prop === undefined
+    ) continue
+    if (options.preventStateUpdate === 'once') options.preventStateUpdate = false
 
     const hasDefined = define && define[param]
     const ourParam = registry[param]
 
-    if (options.preventContentUpdate && param === 'content') console.log(param)
-
     if (ourParam) {
-      // measure([element.key, param], () => {
-        if (isFunction(ourParam)) ourParam(prop, element, node)
-      // }, { logLevel: 5 })
+      if (isFunction(ourParam)) {
+        // console.log(param)
+        ourParam(prop, element, node)
+      }
     } else if (prop && isObject(prop) && !hasDefined) {
       if (!options.preventRecursive) {
-        update.call(prop, params[prop], UPDATE_DEFAULT_OPTIONS)
+        const callChildUpdate = () => update.call(prop, params[prop], options)
+        if (element.props.lazyLoad || options.lazyLoad) {
+          window.requestAnimationFrame(() => callChildUpdate())
+        } else callChildUpdate()
       }
     }
   }

package/src/utils/object.js

@@ -16,6 +16,14 @@ export const memoize = (fn) => {
   }
 }
 
+export const debounce = (element, func, timeout = 300) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => { func.apply(element, args) }, timeout);
+  };
+}
+
 export const isTagRegistered = arg => nodes.body.indexOf(arg)
 
 export const isObject = arg => {