domql 1.5.47 → 1.5.49

package/package.json

@@ -3,7 +3,7 @@
   "description": "DOM rendering Javascript framework at early stage.",
   "private": false,
   "author": "symbo.ls",
-  "version": "1.5.47",
+  "version": "1.5.49",
   "repository": "https://github.com/domql/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -23,7 +23,7 @@
   },
   "source": true,
   "dependencies": {
-    "@domql/utils": "^2.3.11",
+    "@domql/utils": "latest",
     "regenerator-runtime": "^0.13.5"
   },
   "peerDependencies": {

package/src/element/create.js

@@ -33,6 +33,7 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
     element = {}
   }
   if (element === null) return
+  if (element === true) element = { text: true }
 
   // if element is extend
   if (element.__hash) {
@@ -45,10 +46,12 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
 
   // if element is STRING
   if (isString(element) || isNumber(element)) {
+    const extendTag = element.extend && element.extend.tag
+    const childExtendTag = parent.childExtend && parent.childExtend.tag
+    const isKeyValidHTMLTag = ((nodes.body.indexOf(key) > -1) && key)
     element = {
       text: element,
-      tag: (!element.extend && parent.childExtend && parent.childExtend.tag) ||
-      ((nodes.body.indexOf(key) > -1) && key) || 'string'
+      tag: extendTag || childExtendTag || isKeyValidHTMLTag || 'string'
     }
   }
 
@@ -59,21 +62,33 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
 
   if (isKeyComponent(assignedKey)) {
     const hasComponentAttrs = extend || childExtend || props || state || element.on
-    const [ component, key ] = assignedKey.split('_')
+    const componentKey = assignedKey.split('_')[0]
     if (!hasComponentAttrs || childProps) {
       parent[assignedKey] = element = {
-        extend: component,
-        props: {
-          fromKey: key,
-          ...element
-        }
+        extend: componentKey || assignedKey,
+        props: { ...element }
       }
     } else if (!extend || extend === true) {
       parent[assignedKey] = element = {
         ...element,
-        extend: component,
+        extend: componentKey || assignedKey
+      }
+    }
+  }
+
+  // Responsive rendering
+  // TODO: move as define plugin
+  if (assignedKey.slice(0, 1) === '@') {
+    if (props) {
+      props.display = 'none'
+      if (props[assignedKey]) props[assignedKey].display = props.display
+      else props[assignedKey] = { display: props.display || 'block' }
+    } else {
+      parent[assignedKey] = element = {
+        ...element,
         props: {
-          fromKey: key
+          display: 'none',
+          [assignedKey]: { display: 'block' }
         }
       }
     }

package/src/element/mixins/content.js

@@ -9,10 +9,7 @@ import { isEqualDeep } from '../../utils'
  */
 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
       element.content.update(param)
     } else {

package/src/element/mixins/registry.js

@@ -49,7 +49,9 @@ export default {
   __className: {},
   __classNames: {},
   __attr: {},
+  __state: {},
   __currentSnapshot: {},
+  __hasRootState: {},
   nextElement: {},
   previousElement: {},
   key: {},

package/src/element/node.js

@@ -4,7 +4,7 @@ import create from './create'
 import cacheNode from './cache'
 import * as on from '../event/on'
 
-import { isFunction, isObject } from '../utils'
+import { exec, isFunction, isObject } from '../utils'
 import {
   throughInitialDefine,
   throughInitialExec,
@@ -88,7 +88,7 @@ export const createNode = (element, options) => {
       if (ourParam && !hasOptionsDefine) { // Check if param is in our method registry
         if (isFunction(ourParam)) ourParam(prop, element, node, options)
       } else if (element[param] && !hasDefined&& !hasOptionsDefine) {
-        create(prop, element, param, options) // Create element
+        create(exec(prop, element), element, param, options) // Create element
       }
     }
   }

package/src/element/state.js

@@ -1,11 +1,13 @@
 'use strict'
 
 import { on } from '../event'
-import { debounce, deepClone, exec, isFunction, isObject, overwriteDeep } from '../utils'
+import { debounce, deepClone, exec, isString, overwriteDeep } from '../utils'
+import { is, isObject, isFunction, isObjectLike, isNot } from '@domql/utils'
 
 export const IGNORE_STATE_PARAMS = [
-  'update', 'parse', 'clean', 'parent', 'systemUpdate', '__element', '__depends', '__ref', '__root',
-  '__components', '__projectSystem', '__projectState', '__projectLibrary'
+  'update', 'parse', 'clean', 'parent', '__element', '__depends', '__ref', '__root',
+  '__components', '__projectSystem', '__projectState', '__projectLibrary',
+  'projectStateUpdate', 'projectSystemUpdate'
 ]
 
 export const parseState = function () {
@@ -29,13 +31,22 @@ export const cleanState = function () {
   return state
 }
 
-export const systemUpdate = function (obj, options = {}) {
+export const projectSystemUpdate = function (obj, options = {}) {
   const state = this
+  if (!state) return
   const rootState = (state.__element.__root || state.__element).state
   rootState.update({ PROJECT_SYSTEM: obj }, options)
   return state
 }
 
+export const projectStateUpdate = function (obj, options = {}) {
+  const state = this
+  if (!state) return
+  const rootState = (state.__element.__root || state.__element).state
+  rootState.update({ PROJECT_STATE: obj }, options)
+  return state
+}
+
 export const updateState = function (obj, options = {}) {
   const state = this
   const element = state.__element
@@ -45,8 +56,17 @@ export const updateState = function (obj, options = {}) {
     const initReturns = on.initStateUpdated(element.on.initStateUpdated, element, state, obj)
     if (initReturns === false) return
   }
-
-  overwriteDeep(state, obj, IGNORE_STATE_PARAMS)
+  
+  if (element.__state) {
+    if (state.parent && state.parent[element.__state]) {
+      const keyInParentState = state.parent[element.__state]
+      if (keyInParentState) {
+        return state.parent.update({ [element.__state]: obj }, options)
+      }
+    }
+  } else {
+    overwriteDeep(state, obj, IGNORE_STATE_PARAMS)
+  }
 
   // TODO: try debounce
   if (!options.preventUpdate) element.update({}, options)
@@ -65,19 +85,42 @@ export const updateState = function (obj, options = {}) {
 
 export default function (element, parent) {
   let { state, __root } = element
+  
+  if (isFunction(state)) state = exec(state, element)
 
+  if (is(state)('string', 'number')) {
+    element.__state = state 
+    state = {}
+  }
+  if (state === true) {
+    element.__state = element.key 
+    state = {}
+  }
+  
   if (!state) {
     if (parent && parent.state) return parent.state
     return {}
+  } else {
+    element.__hasRootState = true
   }
-
+  
   // run `on.init`
   if (element.on && isFunction(element.on.stateInit)) {
     on.stateInit(element.on.stateInit, element, element.state)
   }
+  
+  if (element.__state) {
+    if (parent && parent.state && parent.state[element.__state]) {
+      const keyInParentState = parent.state[element.__state]
+      if (is(keyInParentState)('object', 'array')) {
+        state = deepClone(keyInParentState)
+      } else if (is(state)('string', 'number')) {
+        state = { value: state }
+      }
+    }
+  }
 
-  if (isFunction(state)) state = exec(state, element)
-
+  // reference other state
   const { __ref } = state
   if (__ref) {
     state = deepClone(__ref, IGNORE_STATE_PARAMS)
@@ -89,13 +132,16 @@ export default function (element, parent) {
   }
 
   element.state = state
-  state.__element = element
   state.clean = cleanState
   state.parse = parseState
   state.update = updateState
-  state.systemUpdate = systemUpdate
   state.parent = element.parent.state
+  state.__element = element
   state.__root = __root ? __root.state : state
+
+  // 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

package/src/element/update.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { overwrite, isFunction, isObject, isString, isNumber, createSnapshotId, merge } from '../utils'
+import { overwrite, isFunction, isObject, isString, isNumber, createSnapshotId, merge, deepClone } from '../utils'
 import { registry } from './mixins'
 import { on } from '../event'
 import { isMethod } from './methods'
@@ -8,6 +8,7 @@ import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
 import { appendNode } from './assign'
 import { createNode } from './node'
 import { updateProps } from './props'
+import createState from './state'
 
 const snapshot = {
   snapshotId: createSnapshotId()
@@ -23,7 +24,7 @@ const UPDATE_DEFAULT_OPTIONS = {
 
 const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const element = this
-  const { define, parent, node } = element
+  const { define, parent, node, state } = element
 
   const { currentSnapshot, calleeElement } = options
   if (!calleeElement) {
@@ -53,6 +54,13 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
       element.__ifFalsy = true
     }
   }
+  
+  if (element.__state) {
+    const keyInParentState = parent.state[element.__state]
+    if (keyInParentState) {
+      element.state = createState(element, parent)
+    }
+  } else if (!element.__hasRootState) element.state = parent && parent.state || {}
 
   if (!element.__ifFalsy && !options.preventPropsUpdate) updateProps(params.props, element, parent)
 

package/src/utils/object.js

@@ -122,7 +122,7 @@ export const clone = obj => {
 /**
  * Deep cloning of object
  */
-export const deepClone = (obj, excluding = ['parent', 'node', '__element', '__root', 'context']) => {
+export const deepClone = (obj, excluding = ['parent', 'node', '__element', 'state', '__root', 'context']) => {
   const o = {}
   for (const prop in obj) {
     if (excluding.indexOf(prop) > -1) continue