domql 1.5.87 → 1.5.89

package/package.json

@@ -2,7 +2,7 @@
   "name": "domql",
   "description": "DOM rendering Javascript framework at early stage.",
   "author": "symbo.ls",
-  "version": "1.5.87",
+  "version": "1.5.89",
   "repository": "https://github.com/domql/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/packages/emotion/index.js

@@ -1,19 +1,19 @@
 'use strict'
 
-import DOM from '../../src'
+// import DOM from '../../src'
 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
 
 export const transformEmotionStyle = (emotion, live) => {
-  return  (params, element, node) => {
+  return (params, element, state) => {
     const execParams = exec(params, element)
     if (params) {
       if (isObjectLike(element.class)) element.class.elementStyle = execParams
       else element.class = { elementStyle: execParams }
     }
-    transformEmotionClass(emotion, live)(element.class, element, node, true)
+    transformEmotionClass(emotion, live)(element.class, element, state, true)
   }
 }
 
@@ -35,22 +35,22 @@ export const transformEmotionClass = (emotion, live) => {
       const isEqual = isEqualDeep(__class[key], prop)
       if (!isEqual) {
         if ((ENV === 'test' || ENV === 'development') && isObject(prop)) prop.label = key || element.key
+
         const CSSed = emotion.css(prop)
         __class[key] = prop
         __classNames[key] = CSSed
       }
     }
     classList(__classNames, element, element.node, live)
+    // return element.class
   }
 }
 
-export const initDOMQLEmotion = (emotion, options) => {
+export const transformDOMQLEmotion = (emotion, options) => {
   if (!emotion) emotion = createEmotion(options || { key: 'smbls' })
 
-  DOM.define({
+  return {
     style: transformEmotionStyle(emotion),
     class: transformEmotionClass(emotion)
-  }, {
-    overwrite: true
-  })
+  }
 }

package/src/element/create.js

@@ -95,8 +95,8 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
   }
 
   // assign context
-  if (options.context && !root.context) root.context = options.context
-  element.context = root.context
+  if (options.context && !root.context && !element.context) root.context = options.context
+  if (!element.context) element.context = parent.context || options.context || root.context
   const { context } = element
 
   if (context && context.components) {
@@ -106,7 +106,7 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
     if (isString(execExtend)) {
       if (components[execExtend]) element.extend = components[execExtend]
       else {
-        if (ENV === 'test' || ENV === 'development') {
+        if ((ENV === 'test' || ENV === 'development') && options.verbose) {
           console.warn(execExtend, 'is not in library', components, element)
           console.warn('replacing with ', {})
         }

package/src/element/iterate.js

@@ -51,18 +51,12 @@ export const throughUpdatedExec = (element, options) => {
   return changes
 }
 
-export const throughInitialDefine = (element, options) => {
-  const { define } = element
-  let obj = {}
+export const throughInitialDefine = (element) => {
+  const { define, context } = element
 
-  if (isObject(define)) {
-    obj = { ...define }
-  }
-  if (isObject(options.define)) {
-    // console.log('==============')
-    // console.log(options.define)
-    obj = { ...obj, ...options.define }
-  }
+  let obj = {}
+  if (isObject(define)) obj = { ...define }
+  if (isObject(context.define)) obj = { ...obj, ...context.define }
 
   for (const param in obj) {
     let prop = element[param]
@@ -78,17 +72,13 @@ export const throughInitialDefine = (element, options) => {
   return element
 }
 
-export const throughUpdatedDefine = (element, options) => {
-  const { define, __exec } = element
+export const throughUpdatedDefine = (element) => {
+  const { context, define, __exec } = element
   const changes = {}
-  let obj = {}
 
-  if (isObject(define)) {
-    obj = { ...define }
-  }
-  if (isObject(options.define)) {
-    obj = { ...obj, ...options.define }
-  }
+  let obj = {}
+  if (isObject(define)) obj = { ...define }
+  if (isObject(context && context.define)) obj = { ...obj, ...context.define }
 
   for (const param in obj) {
     const execParam = __exec[param]

package/src/element/methods.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isFunction, isObject, isObjectLike } from '../utils'
+import { isFunction, isObjectLike } from '../utils'
 import { registry, parseFilters } from './mixins'
 import root from './root'
 
@@ -63,7 +63,7 @@ export const setProps = function (param, options) {
   const element = this
   if (!param || !element.props) return
   element.update({ props: param }, options)
-  return element.props
+  return element
 }
 
 export const defineSetter = (element, key, get, set) =>
@@ -73,8 +73,7 @@ export const keys = function () {
   const element = this
   const keys = []
   for (const param in element) {
-    if (registry[param] && !parseFilters.elementKeys.includes(param))
-      continue
+    if (registry[param] && !parseFilters.elementKeys.includes(param)) { continue }
     keys.push(param)
   }
   return keys

package/src/element/mixins/classList.js

@@ -26,14 +26,12 @@ export const classify = (obj, element) => {
 
 export default (params, element, node, live) => {
   if (!params) return
-  const { key, __className } = element // eslint-disable-line
+  const { key } = element // eslint-disable-line
   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/node.js

@@ -30,7 +30,7 @@ const ENV = process.env.NODE_ENV
 
 export const createNode = (element, options) => {
   // create and assign a node
-  let { node, tag } = element
+  let { node, tag, context } = element
 
   let isNewNode
 
@@ -61,7 +61,7 @@ export const createNode = (element, options) => {
   // iterate through all given params
   if (element.tag !== 'string' || element.tag !== 'fragment') {
     // iterate through define
-    throughInitialDefine(element, options)
+    throughInitialDefine(element)
 
     // iterate through exec
     throughInitialExec(element)
@@ -74,14 +74,19 @@ export const createNode = (element, options) => {
 
       if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
 
-      const hasDefined = element.define && element.define[param]
       const DOMQLProperty = registry[param]
-      const hasOptionsDefine = options.define && options.define[param]
-
-      if (DOMQLProperty && !hasOptionsDefine) { // Check if param is in our method registry
-        if (isFunction(DOMQLProperty)) DOMQLProperty(prop, element, node, options)
-      } else if (element[param] && !hasDefined && !hasOptionsDefine) {
-        create(exec(prop, element), element, param, options) // Create element
+      const DOMQLPropertyFromContext = context.registry && context.registry[param]
+      const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty
+
+      const hasDefine = element.define && element.define[param]
+      const hasContextDefine = context.define && context.define[param]
+
+      // Check if param is in our method registry
+      if (isGlobalTransformer && !hasContextDefine) {
+        if (isFunction(isGlobalTransformer)) isGlobalTransformer(prop, element, node, options)
+      } else if (element[param] && !hasDefine && !hasContextDefine) {
+        // Create element
+        create(exec(prop, element), element, param, options)
       }
     }
   }

package/src/element/set.js

@@ -23,7 +23,7 @@ export const removeContentElement = function (el) {
   }
 }
 
-const set = function (params, options, el) {
+const set = function (params, options = {}, el) {
   const element = el || this
 
   const isEqual = isEqualDeep(params, element.content)
@@ -37,7 +37,8 @@ const set = function (params, options, el) {
     create(params, element, 'content', {
       ignoreChildExtend: true,
       ...registry.defaultOptions,
-      ...OPTIONS.create
+      ...OPTIONS.create,
+      ...options
     })
   }
 

package/src/element/state.js

@@ -178,11 +178,11 @@ export const createState = function (element, parent, opts) {
   // editor stuff
   state.projectSystemUpdate = projectSystemUpdate
   state.projectStateUpdate = projectStateUpdate
-  state.__components = (state.__root || state).COMPONENTS
-  state.__projectSystem = (state.__root || state).PROJECT_SYSTEM
-  state.__projectState = (state.__root || state).PROJECT_STATE
-  state.__projectComponents = (state.__root || state).PROJECT_COMPONENTS
-  state.__projectPages = (state.__root || state).PROJECT_PAGES
+  state.__components = state.__root.COMPONENTS
+  state.__projectSystem = state.__root.PROJECT_SYSTEM
+  state.__projectState = state.__root.PROJECT_STATE
+  state.__projectComponents = state.__root.PROJECT_COMPONENTS
+  state.__projectPages = state.__root.PROJECT_PAGES
 
   // run `on.stateCreated`
   if (element.on && isFunction(element.on.stateCreated)) {

package/src/element/update.js

@@ -26,7 +26,7 @@ const UPDATE_DEFAULT_OPTIONS = {
 
 const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const element = this
-  const { define, parent, node } = element
+  const { parent, node, context } = element
 
   const { currentSnapshot, calleeElement } = options
   if (!calleeElement) {
@@ -88,7 +88,7 @@ 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, options)
+  const definedChanges = throughUpdatedDefine(element)
 
   if (options.stackChanges && element.__stackChanges) {
     const stackChanges = merge(definedChanges, merge(execChanges, overwriteChanges))
@@ -113,16 +113,16 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     ) continue
     if (options.preventStateUpdate === 'once') options.preventStateUpdate = false
 
-    const hasDefined = define && define[param]
-    const ourParam = registry[param]
+    const DOMQLProperty = registry[param]
+    const DOMQLPropertyFromContext = context.registry && context.registry[param]
+    const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty
 
-    const hasOptionsDefine = options.define && options.define[param]
+    const hasDefine = element.define && element.define[param]
+    const hasContextDefine = context.define && context.define[param]
 
-    if (ourParam && !hasOptionsDefine) {
-      if (isFunction(ourParam)) {
-        ourParam(prop, element, node)
-      }
-    } else if (prop && isObject(prop) && !hasDefined && !hasOptionsDefine) {
+    if (isGlobalTransformer && !hasContextDefine) {
+      if (isFunction(isGlobalTransformer)) isGlobalTransformer(prop, element, node, options)
+    } else if (prop && isObject(prop) && !hasDefine && !hasContextDefine) {
       if (!options.preventRecursive) {
         const childUpdateCall = () => update.call(prop, params[prop], {
           ...options,