domql 1.5.18 → 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.18",
+  "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

@@ -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
@@ -97,6 +101,10 @@ const create = (element, parent, key, options = {}) => {
 
   // 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 = []
@@ -129,6 +137,7 @@ const create = (element, parent, key, options = {}) => {
     element.log = log
   }
 
+
   // enable STATE
   element.state = createState(element, parent)
 

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: {},
@@ -62,5 +64,5 @@ export default {
   parseDeep: {},
   on: {},
   component: {},
-  context: {}
+  context: {},
 }

package/src/element/mixins/state.js

@@ -8,7 +8,6 @@ export default (params, element, node) => {
 
   if (isObject(state)) {
     for (const param in state) {
-      IGNORE_STATE_PARAMS
       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/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,7 +1,8 @@
 'use strict'
 
+import { update } from '.'
 import { on } from '../event'
-import { deepClone, exec, isFunction, isObject, overwriteDeep } from '../utils'
+import { debounce, deepClone, exec, isFunction, isObject, overwriteDeep } from '../utils'
 
 export const IGNORE_STATE_PARAMS = ['update', 'parse', 'clean', 'parent', '__element', '__depends', '__ref']
 
@@ -37,7 +38,10 @@ export const updateState = function (obj, options = {}) {
 
   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) {

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 => {