domql 1.4.11 → 1.4.14

package/package.json

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

package/packages/emotion/index.js

@@ -6,45 +6,49 @@ import { classList } from '../../src/element/mixins'
 import createEmotion from '@emotion/css/create-instance'
 const ENV = process.env.NODE_ENV
 
-const {
-  flush,
-  hydrate,
-  cx,
-  merge,
-  getRegisteredStyles,
-  injectGlobal,
-  keyframes,
-  css,
-  sheet,
-  cache
-} = createEmotion({ key: 'smbls' })
+export const initEmotion = (container, options) => {
+  const {
+    flush,
+    hydrate,
+    cx,
+    merge,
+    getRegisteredStyles,
+    injectGlobal,
+    keyframes,
+    css,
+    sheet,
+    cache
+  } = createEmotion({ key: 'smbls', container })
 
-const style = (params, element, node) => {
-  const execPareams = exec(params, element)
-  if (params) {
-    if (isObjectLike(element.class)) element.class.style = execPareams
-    else element.class = { style: execPareams }
+  const style = (params, element, node) => {
+    const execPareams = exec(params, element)
+    if (params) {
+      if (isObjectLike(element.class)) element.class.style = execPareams
+      else element.class = { style: execPareams }
+    }
+    classf(element.class, element, node)
   }
-  classf(element.class, element, node)
-}
 
-const classf = (params, element, node) => {
-  if (isObjectLike(params)) {
-    const classObjHelper = {}
-    for (const key in params) {
-      const prop = exec(params[key], element)
-      if (!prop) continue
-      if ((ENV === 'test' || ENV === 'development') && isObject(prop)) prop.label = key || element.key
-      const CSSed = css(prop)
-      classObjHelper[key] = CSSed
+  const classf = (params, element, node) => {
+    if (isObjectLike(params)) {
+      const classObjHelper = {}
+      for (const key in params) {
+        const prop = exec(params[key], element)
+        if (!prop) continue
+        if ((ENV === 'test' || ENV === 'development') && isObject(prop)) prop.label = key || element.key
+        const CSSed = css(prop)
+        classObjHelper[key] = CSSed
+      }
+      classList(classObjHelper, element, node)
     }
-    classList(classObjHelper, element, node)
   }
+
+  DOM.define({
+    style,
+    class: classf
+  }, {
+    overwrite: true
+  })
 }
 
-DOM.define({
-  style,
-  class: classf
-}, {
-  overwrite: true
-})
+initEmotion()

package/src/element/create.js

@@ -117,7 +117,7 @@ const create = (element, parent, key, options = {}) => {
   // enable CHANGES storing
   if (!element.__changes) element.__changes = []
 
-  // enable CHANGES storing
+  // Add _root element property
   const hasRoot = parent.parent && parent.parent.key === ':root'
   if (!element.__root) element.__root = hasRoot ? parent : parent.__root
 
@@ -129,6 +129,11 @@ const create = (element, parent, key, options = {}) => {
     on.init(element.on.init, element, element.state)
   }
 
+  // run `on.init`
+  if (element.on && isFunction(element.on.beforeClassAssign)) {
+    on.beforeClassAssign(element.on.beforeClassAssign, element, element.state)
+  }
+
   // generate a CLASS name
   assignClass(element)
 

package/src/element/createProps.js

@@ -87,10 +87,10 @@ export const updateProps = (newProps, element, parent) => {
   return element
 }
 
-function update (props) {
+function update (props, options) {
   const element = this.__element
   // element.update({ props })
-  element.update()
+  element.update({ props }, options)
 }
 
 export default createProps

package/src/element/mixins/text.js

@@ -10,7 +10,7 @@ import { exec } from '../../utils'
 export default (param, element, node) => {
   const prop = exec(param, element)
   if (element.tag === 'string') node.nodeValue = prop
-  else if (param) {
+  else if (param !== undefined || param !== null) {
     if (element.__text) {
       element.__text.text = prop
       if (element.__text.node) element.__text.node.nodeValue = prop

package/src/element/update.js

@@ -29,15 +29,7 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     // TODO: move as fragment
     const ifPassed = element.if(element, element.state)
 
-    // console.group('updateLoop')
-    // console.log(element)
-    // console.log(element.__ifFalsy)
-    // console.log(ifPassed)
-    // console.groupEnd('updateLoop')
-
-    // if (element.__ifFalsy && ifPassed) {
     if (ifPassed) delete element.__ifFalsy
-
     if (element.__ifFalsy && ifPassed) {
       createNode(element)
       appendNode(element.node, element.__ifFragment)
@@ -51,19 +43,8 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     preventUpdate = on.initUpdate(element.on.initUpdate, element, element.state)
   }
 
-  // console.group('update')
-  // console.log(element.path)
-  // console.log(element)
-  // if (params.props) {
-    // console.log('INSIDE:')
-    // console.log(params.props)
-  // }
   if (!element.__ifFalsy) updateProps(params.props, element, parent)
 
-
-  // const state = params.state || element.state
-  // element.state = createState({ state }, parent)
-
   const overwriteChanges = overwrite(element, params, UPDATE_DEFAULT_OPTIONS)
   const execChanges = throughUpdatedExec(element, UPDATE_DEFAULT_OPTIONS)
   const definedChanges = throughUpdatedDefine(element)
@@ -72,29 +53,16 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     const stackChanges = merge(definedChanges, merge(execChanges, overwriteChanges))
     element.__stackChanges.push(stackChanges)
   }
-  // const stackChanges = merge(definedChanges, merge(execChanges, overwriteChanges))
-  // if (Object.keys(stackChanges).length === 0) return
-  // else console.log(element.path, '\n\n', stackChanges)
 
-  // console.log(element.key, element.__ifFalsy)
   if (element.__ifFalsy) return element
   if (!node) {
-    return
     // return createNode(element, options)
+    return
   }
 
-  // console.warn(element.key)
-  // console.groupEnd('update')
-
   for (const param in element) {
     const prop = element[param]
 
-    // console.group('updateLoop')
-    // console.log(param)
-    // console.log(prop)
-    // console.groupEnd('updateLoop')
-    // if (element.key === 'span' && param === 'node') debugger
-
     if (options.preventContentUpdate && param === 'content') continue
     if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
 

package/src/event/on.js

@@ -1,5 +1,9 @@
 'use strict'
 
+export const beforeClassAssign = (param, element, state) => {
+  param(element, state)
+}
+
 export const init = (param, element, state) => {
   param(element, state)
 }