domql 1.4.21 → 1.5.1

package/README.md

@@ -40,7 +40,7 @@ var Link = {
 }
 
 var ListItem = {
-  proto: Link,
+  extend: Link,
   class: 'ui link',
   attr: {
     href: '#'
@@ -48,7 +48,7 @@ var ListItem = {
 }
 
 var menu = {
-  childProto: ListItem,
+  childExtend: ListItem,
   home: 'Home',
   text: 'About'
 }
@@ -62,7 +62,7 @@ var header = {
 var navItems = ['Home', 'About', 'FAQ', 'Contact']
 
 var menu = {
-  proto: ListItem,
+  extend: ListItem,
   ...navItems
 }
 ```
@@ -89,8 +89,8 @@ var Increment = {
 | Property | Type | Description | Default |
 | --- | --- | --- | --- |
 | `key` | `Number` `String` | Defines the key of the Element | The key of the object, or randomly generated name |
-| `proto` | `Object` `Array` | Clones the other element | `undefined` |
-| `childProto` | `Object` `Array` | Specifies the `proto` for all child elements | `undefined` |
+| `extend` | `Object` `Array` | Clones the other element | `undefined` |
+| `childExtend` | `Object` `Array` | Specifies the `extend` for all child elements | `undefined` |
 | `tag` | `String` | Specifis the HTML tag  | `div` or related HTML tag if the key matches |
 | `class` | `Any` | Specifies the HTML class | `undefined` |
 | `attr` | `Object` | Specifies the set of HTML attributes | `{}` |
@@ -108,7 +108,7 @@ var User = {
 }
 
 var Contact = {
-  proto: User,
+  extend: User,
   username: 'nikoloza'
 }
 ```
@@ -131,7 +131,7 @@ All native DOM events are supported and can be specified inside `on` parameter.
 key
 tag
 node
-proto
+extend
 on
 class
 text
@@ -143,14 +143,14 @@ set
 define
 ```
 
-Anything except these keywords will create a new nested child element. The easier method to specify HTML tag is to use related nodeName as a key, for example: 
+Anything except these keywords will create a new nested child element. The easier method to specify HTML tag is to use related nodeName as a key, for example:
 
 ```javascript
 var layout = { // this will be <div>
   header: {}, // will create <header>
   aside: {}, // will create <aside>
   main: { // will create <main>
-    childProto: {
+    childExtend: {
       article: { // will create <article>
         title: {}, // will create <div>
         description: {}, // will create <div>

package/package.json

@@ -3,7 +3,7 @@
   "description": "DOM rendering Javascript framework at early stage.",
   "private": false,
   "author": "rackai",
-  "version": "1.4.21",
+  "version": "1.5.1",
   "repository": "https://github.com/rackai/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -31,14 +31,14 @@
     "@babel/preset-env": "^7.16.4",
     "@emotion/css": "^11.10.0",
     "@parcel/babel-preset-env": "^2.0.1",
-    "babel-jest": "^28.1.3",
-    "esbuild": "^0.14.47",
+    "babel-jest": "^29.0.0",
+    "esbuild": "^0.15.5",
     "eslint": "^8.4.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jest": "^26.8.2",
     "eslint-plugin-node": "^11.1.0",
-    "jest": "^27.4.4",
+    "jest": "^29.0.0",
     "jsdom": "^19.0.0",
     "nodemon": "^2.0.6",
     "np": "^7.2.0",

package/packages/router/index.js

@@ -10,7 +10,7 @@ export default (rootElement, path, state = {}, level = 0, pushState = true) => {
 
   if (content) {
     if (pushState) window.history.pushState(state, null, route)
-    rootElement.set({ proto: content })
+    rootElement.set({ extend: content })
       .node.scrollIntoView({ behavior: 'smooth' })
   }
 

package/src/element/create.js

@@ -3,7 +3,7 @@
 import root from './root'
 import createNode from './node'
 import { appendNode, assignNode } from './assign'
-import { applyPrototype } from './proto'
+import { applyExtend } from './extend'
 import nodes from './nodes'
 import set from './set'
 import createState from './state'
@@ -27,17 +27,17 @@ const create = (element, parent, key, options = {}) => {
   if (element === undefined) element = {}
   if (element === null) return
 
-  // if element is proto
+  // if element is extend
   if (element.__hash) {
-    element = { proto: element }
+    element = { extend: element }
   }
 
   if (options.components) {
     const { components } = options
-    const { proto, component } = element
-    if (isString(proto))
-      if (components[proto]) element.proto = components[proto]
-      else console.warn(proto, 'is not in library', components, element)
+    const { extend, component } = element
+    if (isString(extend))
+      if (components[extend]) element.extend = components[extend]
+      else console.warn(extend, 'is not in library', components, element)
   }
 
   // define KEY
@@ -45,24 +45,24 @@ const create = (element, parent, key, options = {}) => {
 
   // if PARENT is not given
   if (!parent) parent = root
-  if (isNode(parent)) parent = root[`${key}_parent`] = { node: parent }
+  if (isNode(parent)) parent = root[`${key}_parent`] = { key: ':root', node: parent }
 
   // if element is STRING
   if (isString(element) || isNumber(element)) {
     element = {
       text: element,
-      tag: (!element.proto && parent.childProto && parent.childProto.tag) ||
+      tag: (!element.extend && parent.childExtend && parent.childExtend.tag) ||
       ((nodes.body.indexOf(key) > -1) && key) || 'string'
     }
   }
 
-  // create PROTOtypal inheritance
+  // create EXTENDal inheritance
 
-  applyPrototype(element, parent, options)
+  applyExtend(element, parent, options)
 
   if (Object.keys(options).length) {
     registry.defaultOptions = options
-    if (options.ignoreChildProto) delete options.ignoreChildProto
+    if (options.ignoreChildExtend) delete options.ignoreChildExtend
   }
 
   // enable STATE
@@ -137,12 +137,6 @@ const create = (element, parent, key, options = {}) => {
   // generate a CLASS name
   assignClass(element)
 
-  // console.group('create')
-  // console.log(element.path)
-  // console.log(element)
-  // console.groupEnd('create')
-  // if (parent.key === 'footer' && key === '0') debugger
-
   // CREATE a real NODE
   createNode(element, options)
 
@@ -151,6 +145,9 @@ const create = (element, parent, key, options = {}) => {
   // assign NODE
   assignNode(element, parent, key)
 
+  console.log(key, element)
+  console.log(element.path)
+
   // run `on.render`
   if (element.on && isFunction(element.on.render)) {
     on.render(element.on.render, element, element.state)

package/src/element/extend.js

@@ -0,0 +1,55 @@
+'use strict'
+
+import { isFunction, exec, getExtendStack, jointStacks, cloneAndMergeArrayExtend, deepMergeExtend } from '../utils'
+
+const ENV = process.env.NODE_ENV
+
+/**
+ * Checks whether element has `extend` or is a part
+ * of parent's `childExtend` extend
+ */
+export const applyExtend = (element, parent, options = {}) => {
+  if (isFunction(element)) element = exec(element, parent)
+
+  const { extend } = element
+  const extendStack = getExtendStack(extend)
+
+  if (ENV !== 'test' || ENV !== 'development') delete element.extend
+
+  let childExtendStack = []
+  if (parent) {
+    // Assign parent attr to the element
+    element.parent = parent
+    if (!options.ignoreChildExtend) {
+      childExtendStack = getExtendStack(parent.childExtend)
+    }
+  }
+
+  const extendLength = extendStack.length
+  const childExtendLength = childExtendStack.length
+
+  let stack = []
+  if (extendLength && childExtendLength) {
+    stack = jointStacks(extendStack, childExtendStack)
+  } else if (extendLength) {
+    stack = extendStack
+  } else if (childExtendLength) {
+    stack = childExtendStack
+  } else if (!options.extend) return element
+
+  if (options.extend) {
+    const defaultOptionsExtend = getExtendStack(options.extend)
+    stack = [].concat(stack, defaultOptionsExtend)
+  }
+
+  element.__extend = stack
+  let mergedExtend = cloneAndMergeArrayExtend(stack)
+
+  const component = exec(element.component || mergedExtend.component, element)
+  if (component && options.components && options.components[component]) {
+    const componentExtend = cloneAndMergeArrayExtend(getExtendStack(options.components[component]))
+    mergedExtend = deepMergeExtend(componentExtend, mergedExtend)
+  }
+
+  return deepMergeExtend(element, mergedExtend)
+}

package/src/element/mixins/registry.js

@@ -21,10 +21,10 @@ export default {
   class: classList,
   state,
 
-  proto: {},
+  extend: {},
+  childExtend: {},
   props: {},
   path: {},
-  childProto: {},
   if: {},
   define: {},
   transform: {},
@@ -36,9 +36,10 @@ export default {
   __trash: {},
   __root: {},
   __props: {},
-  __proto: {},
+  __extend: {},
   __ifFragment: {},
   __ifFalsy: {},
+  __text: {},
   key: {},
   tag: {},
   parent: {},

package/src/element/props.js

@@ -37,10 +37,10 @@ const initProps = (element, parent) => {
     propsStack.push(matchParentValue)
   } else if (props) propsStack.push(props)
 
-  if (isArray(element.__proto)) {
-    element.__proto.map(proto => {
-      if (proto.props) propsStack.push(proto.props)
-      return proto.props
+  if (isArray(element.__extend)) {
+    element.__extend.map(extend => {
+      if (extend.props) propsStack.push(extend.props)
+      return extend.props
     })
   }
 

package/src/element/set.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import create from './create'
+import { isEqualDeep } from '../utils'
 import { registry } from './mixins'
 
 const removeContentElement = (params, element) => {
@@ -22,13 +23,16 @@ const removeContentElement = (params, element) => {
 const set = function (params, options) {
   const element = this
 
+  const isEqual = isEqualDeep(params, element.content)
+  if (isEqual && element.content.__cached) return element
+
   removeContentElement(params, element)
 
   if (params) {
-    const { childProto } = params
-    if (!childProto && element.childProto) params.childProto = element.childProto
+    const { childExtend } = params
+    if (!childExtend && element.childExtend) params.childExtend = element.childExtend
     create(params, element, 'content', {
-      ignoreChildProto: true,
+      ignoreChildExtend: true,
       ...registry.defaultOptions
     })
   }
@@ -38,11 +42,3 @@ const set = function (params, options) {
 
 export default set
 
-// if (element.content && (isFunction(element.content) || element.content.node)) {
-//   // leave(element, () => {
-//   // console.log('remove', element.content)
-//   // element.content.remove()
-//   // element.content.update(params)
-//   // element.node.removeChild(element.content.node)
-//   // delete element.content
-// }

package/src/utils/extendUtils.js

@@ -0,0 +1,116 @@
+'use strict'
+
+import { exec, isArray, isFunction, isObject } from './object'
+
+export const generateHash = () => Math.random().toString(36).substring(2)
+
+// hashing
+export const extendStackRegistry = {}
+export const extendCachedRegistry = {}
+
+window.extendStackRegistry = extendStackRegistry
+window.extendCachedRegistry = extendCachedRegistry
+
+export const getHashedExtend = extend => {
+  return extendStackRegistry[extend.__hash]
+}
+
+export const setHashedExtend = (extend, stack) => {
+  const hash = generateHash()
+  extend.__hash = hash
+  extendStackRegistry[hash] = stack
+  return stack
+}
+
+export const getExtendStackRegistry = (extend, stack) => {
+  if (extend.__hash)
+    return stack.concat(getHashedExtend(extend))
+  return setHashedExtend(extend, stack) // stack .concat(hashedExtend)
+}
+
+// stacking
+export const extractArrayExtend = (extend, stack) => {
+  extend.forEach(each => flattenExtend(each, stack))
+  return stack
+}
+
+export const deepExtend = (extend, stack) => {
+  const extendOflattenExtend = extend.extend
+  if (extendOflattenExtend) {
+    flattenExtend(extendOflattenExtend, stack)
+  }
+  return stack
+}
+
+export const flattenExtend = (extend, stack) => {
+  if (!extend) return stack
+  if (isArray(extend)) return extractArrayExtend(extend, stack)
+  stack.push(extend)
+  if (extend.extend) deepExtend(extend, stack)
+  return stack
+}
+
+// merging
+export const deepCloneExtend = obj => {
+  const o = {}
+  for (const prop in obj) {
+    if (['parent', 'node', '__element', '__root', '__key'].indexOf(prop) > -1) continue
+    const objProp = obj[prop]
+    if (isObject(objProp)) {
+      o[prop] = deepCloneExtend(objProp)
+    } else if (isArray(objProp)) {
+      o[prop] = objProp.map(x => x)
+    } else o[prop] = objProp
+  }
+  return o
+}
+
+export const deepMergeExtend = (element, extend) => {
+  for (const e in extend) {
+    if (['parent', 'node', '__element', '__root'].indexOf(e) > -1) continue
+    const elementProp = element[e]
+    const extendProp = extend[e]
+    if (elementProp === undefined) {
+      element[e] = extendProp
+    } else if (isObject(elementProp) && isObject(extendProp)) {
+      deepMergeExtend(elementProp, extendProp)
+    } else if (isArray(elementProp) && isArray(extendProp)) {
+      element[e] = elementProp.concat(extendProp)
+    } else if (isArray(elementProp) && isObject(extendProp)) {
+      const obj = deepMergeExtend({}, elementProp)
+      element[e] = deepMergeExtend(obj, extendProp)
+    } else if (elementProp === undefined && isFunction(extendProp)) {
+      element[e] = extendProp
+    }
+  }
+  return element
+}
+
+export const cloneAndMergeArrayExtend = stack => {
+  return stack.reduce((a, c) => {
+    return deepMergeExtend(a, deepCloneExtend(c))
+  }, {})
+}
+
+// joint stacks
+export const jointStacks = (extendStack, childExtendStack) => {
+  return []
+    .concat(extendStack.slice(0, 1))
+    .concat(childExtendStack.slice(0, 1))
+    .concat(extendStack.slice(1))
+    .concat(childExtendStack.slice(1))
+}
+
+// init
+export const getExtendStack = extend => {
+  if (!extend) return []
+  if (extend.__hash) return getHashedExtend(extend)
+  const stack = flattenExtend(extend, [])
+  // console.log(stack)
+  return getExtendStackRegistry(extend, stack)
+}
+
+export const getExtendMerged = extend => {
+  const stack = getExtendStack(extend)
+  return cloneAndMergeArrayExtend(stack)
+}

package/src/utils/index.js

@@ -3,4 +3,4 @@
 export * from './report'
 export * from './object'
 export * from './node'
-export * from './protoUtils'
+export * from './extendUtils'

package/src/utils/node.js

@@ -1,6 +1,6 @@
 'use strict'
 
-export const cleanWithNode = proto => delete proto.node && proto
+export const cleanWithNode = extend => delete extend.node && extend
 
 export const createID = (function * () {
   let index = 1

package/src/utils/object.js

@@ -71,17 +71,17 @@ export const merge = (element, obj) => {
   return element
 }
 
-export const deepMerge = (element, proto) => {
+export const deepMerge = (element, extend) => {
   // console.groupCollapsed('deepMerge:')
-  for (const e in proto) {
+  for (const e in extend) {
     const elementProp = element[e]
-    const protoProp = proto[e]
+    const extendProp = extend[e]
     // const cachedProps = cache.props
     if (e === 'parent' || e === 'props' || e === 'state') continue
     if (elementProp === undefined) {
-      element[e] = protoProp
-    } else if (isObjectLike(elementProp) && isObject(protoProp)) {
-      deepMerge(elementProp, protoProp)
+      element[e] = extendProp
+    } else if (isObjectLike(elementProp) && isObject(extendProp)) {
+      deepMerge(elementProp, extendProp)
     }
   }
   // console.groupEnd('deepMerge:')
@@ -105,7 +105,7 @@ export const deepClone = (obj, excluding = ['parent', 'node', '__element', '__ro
   for (const prop in obj) {
     if (excluding.indexOf(prop) > -1) continue
     let objProp = obj[prop]
-    if (prop === 'proto' && isArray(objProp)) {
+    if (prop === 'extend' && isArray(objProp)) {
       objProp = mergeArray(objProp)
     }
     if (isObjectLike(objProp)) {
@@ -115,6 +115,26 @@ export const deepClone = (obj, excluding = ['parent', 'node', '__element', '__ro
   return o
 }
 
+/**
+ * Overwrites object properties with another
+ */
+export const isEqualDeep = (param, element) => {
+  if (param === element) return true
+  if (!param || !element) return false
+  for (const prop in param) {
+    const paramProp = param[prop]
+    const elementProp = element[prop]
+    if (isObjectLike(paramProp)) {
+      const isEqual = isEqualDeep(paramProp, elementProp)
+      if (!isEqual) return false
+    } else {
+      const isEqual = paramProp === elementProp
+      if (!isEqual) return false
+    }
+  }
+  return true
+}
+
 /**
  * Overwrites object properties with another
  */
@@ -164,14 +184,14 @@ export const mergeIfExisted = (a, b) => {
 }
 
 /**
- * Merges array prototypes
+ * Merges array extends
  */
 export const mergeArray = (arr) => {
   return arr.reduce((a, c) => deepMerge(a, deepClone(c)), {})
 }
 
 /**
- * Merges array prototypes
+ * Merges array extends
  */
 export const mergeAndCloneIfArray = obj => {
   return isArray(obj) ? mergeArray(obj) : deepClone(obj)
@@ -184,8 +204,8 @@ export const flattenRecursive = (param, prop, stack = []) => {
   const objectized = mergeAndCloneIfArray(param)
   stack.push(objectized)
 
-  const protoOfProto = objectized[prop]
-  if (protoOfProto) flattenRecursive(protoOfProto, prop, stack)
+  const extendOfExtend = objectized[prop]
+  if (extendOfExtend) flattenRecursive(extendOfExtend, prop, stack)
 
   delete objectized[prop]
 

package/src/element/proto.js

@@ -1,55 +0,0 @@
-'use strict'
-
-import { isFunction, exec, getProtoStack, jointStacks, cloneAndMergeArrayProto, deepMergeProto } from '../utils'
-
-const ENV = process.env.NODE_ENV
-
-/**
- * Checks whether element has `proto` or is a part
- * of parent's `childProto` prototype
- */
-export const applyPrototype = (element, parent, options = {}) => {
-  if (isFunction(element)) element = exec(element, parent)
-
-  const { proto } = element
-  const protoStack = getProtoStack(proto)
-
-  if (ENV !== 'test' || ENV !== 'development') delete element.proto
-
-  let childProtoStack = []
-  if (parent) {
-    // Assign parent attr to the element
-    element.parent = parent
-    if (!options.ignoreChildProto) {
-      childProtoStack = getProtoStack(parent.childProto)
-    }
-  }
-
-  const protoLength = protoStack.length
-  const childProtoLength = childProtoStack.length
-
-  let stack = []
-  if (protoLength && childProtoLength) {
-    stack = jointStacks(protoStack, childProtoStack)
-  } else if (protoLength) {
-    stack = protoStack
-  } else if (childProtoLength) {
-    stack = childProtoStack
-  } else if (!options.proto) return element
-
-  if (options.proto) {
-    const defaultOptionsProto = getProtoStack(options.proto)
-    stack = [].concat(stack, defaultOptionsProto)
-  }
-
-  element.__proto = stack
-  let mergedProto = cloneAndMergeArrayProto(stack)
-
-  const component = exec(element.component || mergedProto.component, element)
-  if (component && options.components && options.components[component]) {
-    const componentProto = cloneAndMergeArrayProto(getProtoStack(options.components[component]))
-    mergedProto = deepMergeProto(componentProto, mergedProto)
-  }
-
-  return deepMergeProto(element, mergedProto)
-}

package/src/utils/protoUtils.js

@@ -1,116 +0,0 @@
-'use strict'
-
-import { exec, isArray, isFunction, isObject } from './object'
-
-export const generateHash = () => Math.random().toString(36).substring(2)
-
-// hashing
-export const protoStackRegistry = {}
-export const protoCachedRegistry = {}
-
-window.protoStackRegistry = protoStackRegistry
-window.protoCachedRegistry = protoCachedRegistry
-
-export const getHashedProto = proto => {
-  return protoStackRegistry[proto.__hash]
-}
-
-export const setHashedProto = (proto, stack) => {
-  const hash = generateHash()
-  proto.__hash = hash
-  protoStackRegistry[hash] = stack
-  return stack
-}
-
-export const getProtoStackRegistry = (proto, stack) => {
-  if (proto.__hash)
-    return stack.concat(getHashedProto(proto))
-  return setHashedProto(proto, stack) // stack .concat(hashedProto)
-}
-
-// stacking
-export const extractArrayProto = (proto, stack) => {
-  proto.forEach(each => flattenProto(each, stack))
-  return stack
-}
-
-export const deepProto = (proto, stack) => {
-  const protoOflattenProto = proto.proto
-  if (protoOflattenProto) {
-    flattenProto(protoOflattenProto, stack)
-  }
-  return stack
-}
-
-export const flattenProto = (proto, stack) => {
-  if (!proto) return stack
-  if (isArray(proto)) return extractArrayProto(proto, stack)
-  stack.push(proto)
-  if (proto.proto) deepProto(proto, stack)
-  return stack
-}
-
-// merging
-export const deepCloneProto = obj => {
-  const o = {}
-  for (const prop in obj) {
-    if (['parent', 'node', '__element', '__root', '__key'].indexOf(prop) > -1) continue
-    const objProp = obj[prop]
-    if (isObject(objProp)) {
-      o[prop] = deepCloneProto(objProp)
-    } else if (isArray(objProp)) {
-      o[prop] = objProp.map(x => x)
-    } else o[prop] = objProp
-  }
-  return o
-}
-
-export const deepMergeProto = (element, proto) => {
-  for (const e in proto) {
-    if (['parent', 'node', '__element', '__root'].indexOf(e) > -1) continue
-    const elementProp = element[e]
-    const protoProp = proto[e]
-    if (elementProp === undefined) {
-      element[e] = protoProp
-    } else if (isObject(elementProp) && isObject(protoProp)) {
-      deepMergeProto(elementProp, protoProp)
-    } else if (isArray(elementProp) && isArray(protoProp)) {
-      element[e] = elementProp.concat(protoProp)
-    } else if (isArray(elementProp) && isObject(protoProp)) {
-      const obj = deepMergeProto({}, elementProp)
-      element[e] = deepMergeProto(obj, protoProp)
-    } else if (elementProp === undefined && isFunction(protoProp)) {
-      element[e] = protoProp
-    }
-  }
-  return element
-}
-
-export const cloneAndMergeArrayProto = stack => {
-  return stack.reduce((a, c) => {
-    return deepMergeProto(a, deepCloneProto(c))
-  }, {})
-}
-
-// joint stacks
-export const jointStacks = (protoStack, childProtoStack) => {
-  return []
-    .concat(protoStack.slice(0, 1))
-    .concat(childProtoStack.slice(0, 1))
-    .concat(protoStack.slice(1))
-    .concat(childProtoStack.slice(1))
-}
-
-// init
-export const getProtoStack = proto => {
-  if (!proto) return []
-  if (proto.__hash) return getHashedProto(proto)
-  const stack = flattenProto(proto, [])
-  // console.log(stack)
-  return getProtoStackRegistry(proto, stack)
-}
-
-export const getProtoMerged = proto => {
-  const stack = getProtoStack(proto)
-  return cloneAndMergeArrayProto(stack)
-}