domql 1.5.17 → 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.17",
+  "version": "1.5.18",
   "repository": "https://github.com/rackai/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

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,29 +129,23 @@ 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/registry.js

@@ -55,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/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,10 +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)
@@ -35,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