domql 1.4.7 → 1.4.10

package/package.json

@@ -3,7 +3,7 @@
   "description": "DOM rendering Javascript framework at early stage.",
   "private": false,
   "author": "rackai",
-  "version": "1.4.7",
+  "version": "1.4.10",
   "repository": "https://github.com/rackai/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -26,19 +26,23 @@
     "regenerator-runtime": "^0.13.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^28.1.0",
-    "babel-preset-env": "^1.7.0",
-    "coveralls": "^3.0.5",
-    "eslint": "^8.10.0",
-    "eslint-plugin-jest": "^26.1.0",
-    "jest": "^28.1.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/preset-env": "^7.16.4",
+    "@parcel/babel-preset-env": "^2.0.1",
+    "babel-jest": "^27.4.4",
+    "esbuild": "^0.14.47",
+    "eslint": "^8.4.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-node": "^11.1.0",
+    "jest": "^27.4.4",
+    "jsdom": "^19.0.0",
     "nodemon": "^2.0.6",
     "np": "^7.2.0",
-    "parcel-bundler": "^1.12.4",
-    "standard": "^17.0.0"
+    "parcel": "^2.0.1",
+    "standard": "^16.0.1"
   },
   "jest": {
     "collectCoverageFrom": [

package/packages/emotion/index.js

@@ -4,6 +4,7 @@ import DOM from '../../src'
 import { isObjectLike, exec } from '../../src/utils'
 import { classList } from '../../src/element/mixins'
 import createEmotion from '@emotion/css/create-instance'
+const ENV = process.env.NODE_ENV
 
 const {
   flush,
@@ -33,7 +34,7 @@ const classf = (params, element, node) => {
     for (const key in params) {
       const prop = exec(params[key], element)
       if (!prop) continue
-      prop.label = key || element.key
+      if (ENV === 'test' || ENV === 'development') prop.label = key || element.key
       const CSSed = css(prop)
       classObjHelper[key] = CSSed
     }

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 } from '../utils'
-import { remove, lookup, log, keys, parse, parseDeep } from './methods'
+import { remove, lookup, setProps, log, keys, parse, parseDeep } from './methods'
 import cacheNode from './cache'
 import { registry } from './mixins'
 // import { overwrite, clone, fillTheRest } from '../utils'
@@ -44,13 +44,9 @@ const create = (element, parent, key, options = {}) => {
   const assignedKey = element.key || key || createID.next().value
 
   // if PARENT is not given
-  // if (parent === null) parent = root
-  // if (parent === undefined) parent = root
   if (!parent) parent = root
   if (isNode(parent)) parent = root[`${key}_parent`] = { node: parent }
 
-  // if (assignedKey === 'all') debugger
-
   // if element is STRING
   if (isString(element) || isNumber(element)) {
     element = {
@@ -61,6 +57,7 @@ const create = (element, parent, key, options = {}) => {
   }
 
   // create PROTOtypal inheritance
+
   applyPrototype(element, parent, options)
 
   if (Object.keys(options).length) {
@@ -71,31 +68,27 @@ const create = (element, parent, key, options = {}) => {
   // enable STATE
   element.state = createState(element, parent)
 
-  // console.groupCollapsed('Create:', assignedKey)
-  // console.log(element)
-
   // create and assign a KEY
   element.key = assignedKey
 
-  // set the PATH
+  // 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
+    }
+  }
+
+  // set the PATH array
   if (ENV === 'test' || ENV === 'development') {
     if (!parent.path) parent.path = []
     element.path = parent.path.concat(assignedKey)
   }
 
-  // don't render IF in condition
-  if (isFunction(element.if) && !element.if(element, element.state)) {
-    // TODO: move as fragment
-    const ifFragment = cacheNode({ tag: 'fragment' })
-    element.__ifFragment = appendNode(ifFragment, parent.node)
-    element.__ifFalsy = true
-    return
-  }
-
-  // if it already HAS A NODE
-  if (element.node) {
-    // console.log('hasNode!')
-    // console.groupEnd('Create:')
+  // if it already HAS a NODE
+  if (element.node && !element.__ifFalsy) { // TODO: check on if
     return assignNode(element, parent, assignedKey)
   }
 
@@ -103,6 +96,7 @@ const create = (element, parent, key, options = {}) => {
   element.set = set
   element.update = update
   element.remove = remove
+  element.setProps = setProps
   element.lookup = lookup
   element.parse = parse
   element.parseDeep = parseDeep
@@ -128,7 +122,7 @@ const create = (element, parent, key, options = {}) => {
   if (!element.__root) element.__root = hasRoot ? parent : parent.__root
 
   // apply props settings
-  createProps(element, parent)
+  if (!element.__ifFalsy) createProps(element, parent)
 
   // run `on.init`
   if (element.on && isFunction(element.on.init)) {
@@ -138,17 +132,17 @@ const create = (element, parent, key, options = {}) => {
   // generate a CLASS name
   assignClass(element)
 
-  // console.log('cache.props:')
-  // console.log(cache.props)
-  // console.log('applied props:')
-  // console.log(element.props)
-  // console.log('element:')
+  // console.group('create')
+  // console.log(element.path)
   // console.log(element)
-  // console.groupEnd('Create:')
+  // console.groupEnd('create')
+  // if (parent.key === 'footer' && key === '0') debugger
 
   // CREATE a real NODE
   createNode(element, options)
 
+  if (element.__ifFalsy) return element
+
   // assign NODE
   assignNode(element, parent, key)
 

package/src/element/createNode.js

@@ -38,9 +38,13 @@ const createNode = (element, options) => {
   // console.log(element)
   // console.groupEnd('CREATE:')
 
+  // if (element.__ifFalsy) return element
+
   if (!node) {
     isNewNode = true
 
+    if (element.__ifFalsy) return element
+
     if (tag === 'shadow') {
       node = element.node = element.parent.node.attachShadow({ mode: 'open' })
     } else node = element.node = cacheNode(element)
@@ -58,6 +62,8 @@ const createNode = (element, options) => {
     if (isFunction(node.setAttribute)) node.setAttribute('key', element.key)
   }
 
+  if (element.__ifFalsy) return element
+
   // iterate through all given params
   if (element.tag !== 'string' || element.tag !== 'fragment') {
     // iterate through define
@@ -72,6 +78,11 @@ const createNode = (element, options) => {
     for (const param in element) {
       const prop = element[param]
 
+      // console.group('createNode')
+      // console.log(param)
+      // console.log(prop)
+      // console.groupEnd('createNode')
+
       if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
 
       const hasDefined = element.define && element.define[param]

package/src/element/createProps.js

@@ -9,14 +9,29 @@ const initProps = (element, parent) => {
   const hasMatch = isString(props) && props.indexOf('match') > -1
   const matchParent = parent.props && parent.props[element.key]
 
+  const objectizeStringProperty = propValue => {
+    if (isString(propValue)) return { inheritedString: propValue }
+    return propValue
+  }
+
   if (isObject(props)) {
     propsStack.push(props)
   } else if (props === 'inherit') {
     if (parent.props) propsStack.push(parent.props)
   } else if (hasMatch) {
     const hasArg = props.split(' ')
-    if (hasArg[1] && parent.props[hasArg[1]]) propsStack.push(parent.props[hasArg[1]])
-    else if (matchParent) propsStack.push(matchParent)
+    let matchParentValue
+    if (hasArg[1] && parent.props[hasArg[1]]) {
+      const secondArgasParentMatchProp = parent.props[hasArg[1]]
+      propsStack.push(
+        objectizeStringProperty(secondArgasParentMatchProp)
+      )
+    } else if (matchParent) {
+      propsStack.push(
+        objectizeStringProperty(matchParent)
+      )
+    }
+    propsStack.push(matchParentValue)
   } else if (props) propsStack.push(props)
 
   if (matchParent && props !== 'match') propsStack.push(matchParent)

package/src/element/index.js

@@ -12,7 +12,7 @@ import update from './update'
 import parse from './parse'
 import set from './set'
 
-import { lookup, remove, get, log, keys } from './methods'
+import { lookup, remove, get, setProps, log, keys } from './methods'
 
 export {
   nodes,
@@ -27,6 +27,7 @@ export {
   update,
   parse,
   lookup,
+  setProps,
   set,
   get,
   log,

package/src/element/methods.js

@@ -33,6 +33,13 @@ export const set = function () {
 export const update = function () {
 }
 
+export const setProps = function (param) {
+  const element = this
+  if (!param || !element.props) return
+  element.update({ props: param })
+  return element.props
+}
+
 export const defineSetter = (element, key, get, set) =>
   Object.defineProperty(element, key, { get, set })
 
@@ -90,6 +97,7 @@ export const isMethod = function (param) {
     param === 'lookup' ||
     param === 'keys' ||
     param === 'parse' ||
+    param === 'setProps' ||
     param === 'parseDeep' ||
     param === 'if' ||
     param === 'log'

package/src/element/mixins/registry.js

@@ -45,6 +45,7 @@ export default {
   node: {},
   set: {},
   update: {},
+  setProps: {},
   remove: {},
   lookup: {},
   keys: {},

package/src/element/proto.js

@@ -12,26 +12,10 @@ export const applyPrototype = (element, parent, options = {}) => {
   if (isFunction(element)) element = exec(element, parent)
 
   const { proto } = element
-
-  // merge if proto is array
-  // const proto = mergeAndCloneIfArray(element.proto, v => {
-  //   if (v.props) cache.props.push(v.props)
-  // console.log('v.propsIN_PROTO:')
-  // console.log(v.props)
-  // })
-
-  // console.log(proto)
   const protoStack = getProtoStack(proto)
 
   if (ENV !== 'test' || ENV !== 'development') delete element.proto
 
-  // console.log(parent.childProto)
-
-  // console.log(element)
-  // console.log(proto)
-  // console.log(protoStack)
-  // debugger
-
   let childProtoStack = []
   if (parent) {
     // Assign parent attr to the element
@@ -41,9 +25,6 @@ export const applyPrototype = (element, parent, options = {}) => {
     }
   }
 
-  // console.log(proto, parent && parent.childProto)
-  // console.log(protoStack, childProtoStack)
-
   const protoLength = protoStack.length
   const childProtoLength = childProtoStack.length
 
@@ -67,11 +48,8 @@ export const applyPrototype = (element, parent, options = {}) => {
   const component = exec(element.component || mergedProto.component, element)
   if (component && options.components && options.components[component]) {
     const componentProto = cloneAndMergeArrayProto(getProtoStack(options.components[component]))
-    mergedProto = deepMergeProto(mergedProto, componentProto)
+    mergedProto = deepMergeProto(componentProto, mergedProto)
   }
 
-  // console.log(mergedProto)
   return deepMergeProto(element, mergedProto)
-
-  // final merging with prototype
 }

package/src/element/update.js

@@ -25,15 +25,41 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     params = { text: params }
   }
 
+  if (isFunction(element.if)) {
+    // 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)
+    } else if (element.node && !ifPassed) {
+      element.node.remove()
+      element.__ifFalsy = true
+    }
+  }
+
   if (element.on && isFunction(element.on.initUpdate) && !options.ignoreInitUpdate) {
     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)
+    // console.log('INSIDE:')
+    // console.log(params.props)
   // }
-  updateProps(params.props, element, parent)
+  if (!element.__ifFalsy) updateProps(params.props, element, parent)
+
 
   // const state = params.state || element.state
   // element.state = createState({ state }, parent)
@@ -50,24 +76,25 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   // if (Object.keys(stackChanges).length === 0) return
   // else console.log(element.path, '\n\n', stackChanges)
 
-  if (isFunction(element.if)) {
-    // TODO: move as fragment
-    const ifPassed = element.if(element, element.state)
-    if (element.__ifFalsy && ifPassed) {
-      createNode(element)
-      appendNode(element.node, element.__ifFragment)
-      delete element.__ifFalsy
-    } else if (element.node && !ifPassed) {
-      element.node.remove()
-      element.__ifFalsy = true
-    }
+  // console.log(element.key, element.__ifFalsy)
+  if (element.__ifFalsy || options.preventRecursive) return element
+  if (!node) {
+    return
+    // return createNode(element, options)
   }
 
-  if (!node || options.preventRecursive) 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