domql 1.5.16 → 1.5.18

package/package.json

@@ -3,7 +3,7 @@
   "description": "DOM rendering Javascript framework at early stage.",
   "private": false,
   "author": "rackai",
-  "version": "1.5.16",
+  "version": "1.5.18",
   "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 } from '../../src/utils'
+import { isObjectLike, exec, isObject, isEqualDeep } from '../../src/utils'
 import { classList } from '../../src/element/mixins'
 import createEmotion from '@emotion/css/create-instance'
 const ENV = process.env.NODE_ENV
@@ -30,11 +30,13 @@ export const initEmotion = (container, options) => {
   }
 
   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) continue
+        if (!prop && prop === __class[key]) continue
+        __class[key] = prop
         if ((ENV === 'test' || ENV === 'development') && isObject(prop)) prop.label = key || element.key
         const CSSed = css(prop)
         classObjHelper[key] = CSSed

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'
@@ -83,21 +83,30 @@ 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 = {}
+
+  // 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 +114,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 +121,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,24 +129,23 @@ const create = (element, parent, key, options = {}) => {
     element.log = log
   }
 
-  // enable TRANSFORM in data
-  if (!element.transform) element.transform = {}
-
-  // enable CACHING
-  if (!element.__cached) element.__cached = {}
-
-  // enable EXEC
-  if (!element.__exec) element.__exec = {}
-
-  // 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)
@@ -173,6 +177,7 @@ const create = (element, parent, key, options = {}) => {
   }
 
   if (parent.__children) parent.__children.push(element.key)
+  // console.groupEnd(element.key)
 
   return element
 }

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/classList.js

@@ -26,12 +26,13 @@ export const classify = (obj, element) => {
 
 export default (params, element, node) => {
   if (!params) return
-  const { key } = element
+  const { key, __className } = 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()
-  node.classList = className
+  if (className && className !== __className) node.classList = className
+  element.__className = className
   return className
 }

package/src/element/mixins/content.js

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

package/src/element/mixins/html.js

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

package/src/element/mixins/registry.js

@@ -42,6 +42,9 @@ export default {
   __ifFalsy: {},
   __text: {},
   __element: {},
+  __class: {},
+  __html: {},
+  __className: {},
   key: {},
   tag: {},
   parent: {},
@@ -52,6 +55,7 @@ export default {
   remove: {},
   removeContent: {},
   lookup: {},
+  spot: {},
   keys: {},
   log: {},
   parse: {},

package/src/element/mixins/state.js

@@ -1,13 +1,15 @@
 '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
+      IGNORE_STATE_PARAMS
+      if (IGNORE_STATE_PARAMS.includes(param)) continue
       element.state[param] = exec(state[param], element)
     }
   }

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

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

package/src/element/state.js

@@ -1,19 +1,31 @@
 'use strict'
 
 import { on } from '../event'
-import { deepClone, exec, isFunction, overwriteDeep } from '../utils'
+import { 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 +35,18 @@ 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 (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)) {
     on.stateUpdated(element.on.stateUpdated, element, state)
@@ -34,15 +55,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

@@ -1,6 +1,6 @@
 'use strict'
 
-import { overwrite, isFunction, isObject, isString, isNumber } from '../utils'
+import { overwrite, isFunction, isObject, isString, isNumber, isEqualDeep } from '../utils'
 import { registry } from './mixins'
 import * as on from '../event/on'
 import { isMethod } from './methods'
@@ -44,6 +44,8 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const overwriteChanges = overwrite(element, params, UPDATE_DEFAULT_OPTIONS)
   const execChanges = throughUpdatedExec(element, UPDATE_DEFAULT_OPTIONS)
   const definedChanges = throughUpdatedDefine(element)
+  // console.log(execChanges)
+  // console.log(definedChanges)
 
   if (options.stackChanges && element.__stackChanges) {
     const stackChanges = merge(definedChanges, merge(execChanges, overwriteChanges))
@@ -60,6 +62,7 @@ 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]
 
@@ -70,13 +73,16 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     const hasDefined = define && define[param]
     const ourParam = registry[param]
 
-
     if (options.preventContentUpdate && param === 'content') console.log(param)
 
     if (ourParam) {
-      if (isFunction(ourParam)) ourParam(prop, element, node)
+      // measure([element.key, param], () => {
+        if (isFunction(ourParam)) ourParam(prop, element, node)
+      // }, { logLevel: 5 })
     } else if (prop && isObject(prop) && !hasDefined) {
-      if (!options.preventRecursive) update.call(prop, params[prop], UPDATE_DEFAULT_OPTIONS)
+      if (!options.preventRecursive) {
+        update.call(prop, params[prop], UPDATE_DEFAULT_OPTIONS)
+      }
     }
   }
 

package/src/utils/object.js

@@ -2,6 +2,20 @@
 
 import nodes from '../element/nodes'
 
+export const memoize = (fn) => {
+  const cache = {}
+  return (...args) => {
+    const n = args[0]
+    if (n in cache) {
+      return cache[n]
+    } else {
+      const result = fn(n)
+      cache[n] = result
+      return result
+    }
+  }
+}
+
 export const isTagRegistered = arg => nodes.body.indexOf(arg)
 
 export const isObject = arg => {