domql 1.5.136 → 1.6.0

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "domql",
   "description": "DOM rendering Javascript framework at early stage.",
-  "author": "symbo.ls",
-  "version": "1.5.136",
+  "version": "1.6.0",
   "repository": "https://github.com/domql/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -16,7 +15,7 @@
   ],
   "scripts": {
     "copy:package:cjs": "cp ./.build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx esbuild src/index.js src/**/*.js --target=es2020 --format=esm --outdir=dist/esm",
+    "build:esm": "npx esbuild src/index.js src/**/*.js --target=es2020 --format=esm --outdir=dist/esm --bundle",
     "build:cjs": "npx esbuild src/index.js src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs",
     "build:iife": "npx esbuild src/index.js --target=node16 --format=iife --outdir=dist/iife --bundle",
     "build": "yarn build:esm && yarn build:cjs && yarn build:iife",
@@ -24,11 +23,17 @@
     "start": "parcel examples/index.html --no-cache",
     "test:lint": "npx standard \"src/**/*.js\"",
     "test": "yarn test:lint; jest --coverage --coverageReporters=text-lcov | coveralls",
-    "test-watch": "jest --watch"
+    "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@domql/key": "latest",
+    "@domql/env": "latest",
+    "@domql/node": "latest",
+    "@domql/render": "latest",
+    "@domql/tree": "latest",
     "@domql/globals": "latest",
     "@domql/registry": "latest",
+    "@domql/methods": "latest",
     "@domql/event": "latest",
     "@domql/report": "latest",
     "@domql/emotion": "latest",

package/src/element/create.js

@@ -1,20 +1,22 @@
 'use strict'
 
-import { isObject, isFunction, isString, createID, isNode, exec, is } from '@domql/utils'
+import { isObject, isFunction, isString, exec, is, isNode } from '@domql/utils'
+import { ROOT } from '@domql/tree'
+import { createKey } from '@domql/key'
 import { TAGS } from '@domql/registry'
 import { triggerEventOn } from '@domql/event'
+import { appendNode, assignNode } from '@domql/render'
+import { isMethod, lookup, setProps, remove, spotByPath } from '@domql/methods'
+import { assignClass } from '@domql/classlist'
+import { cacheNode, detectTag } from '@domql/node'
 
-import root from './root'
 import createNode from './node'
-import { appendNode, assignNode } from './assign'
 import { applyExtend } from './extend'
 import set from './set'
 import createState from './state'
 import createProps from './props'
 import update from './update'
-import { assignClass } from './mixins/classList'
-import { remove, lookup, setProps, log, keys, parse, parseDeep, spotByPath, nextElement, previousElement, isMethod } from './methods'
-import cacheNode, { detectTag } from './cache'
+import { log, keys, parse, parseDeep, nextElement, previousElement } from './methods'
 import { registry } from './mixins'
 import { throughInitialExec } from './iterate'
 import OPTIONS from './options'
@@ -25,7 +27,6 @@ import {
   checkIfKeyIsComponent
 } from '../utils/component'
 import { removeContentElement } from './remove'
-// import { overwrite, clone, fillTheRest } from '../utils'
 
 const ENV = process.env.NODE_ENV
 
@@ -56,8 +57,10 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
   }
 
   // if PARENT is not given
-  if (!parent) parent = root
-  if (isNode(parent)) parent = root[`${key}_parent`] = { key: ':root', node: parent }
+  if (!parent) parent = ROOT
+  if (isNode(parent)) {
+    parent = ROOT[`${key}_parent`] = { key: ':root', node: parent }
+  }
 
   // if element is STRING
   if (checkIfPrimitive(element)) {
@@ -65,7 +68,7 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
   }
 
   // define KEY
-  const assignedKey = (element.key || key || createID()).toString()
+  const assignedKey = (element.key || key || createKey()).toString()
 
   if (checkIfKeyIsComponent(assignedKey)) {
     element = applyKeyComponentAsExtend(element, parent, assignedKey)
@@ -182,8 +185,8 @@ const addMethods = (element, parent) => {
 }
 
 const applyContext = (element, parent, options) => {
-  if (options.context && !root.context && !element.context) root.context = options.context
-  if (!element.context) element.context = parent.context || options.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 checkIf = (element, parent) => {
@@ -228,7 +231,7 @@ const addCaching = (element, parent) => {
 
   // Add _root element property
   const hasRoot = parent && parent.key === ':root'
-  if (!__ref.__root) __ref.__root = hasRoot ? element : parent.__ref.__root
+  if (!__ref.__root) __ref.__root = hasRoot ? element : __parentRef.__root
 
   // set the PATH array
   if (ENV === 'test' || ENV === 'development') {

package/src/element/index.js

@@ -1,31 +1,25 @@
 'use strict'
 
-import root from './root'
-import tree from './tree'
-import cache from './cache'
+import { TREE } from '@domql/tree'
 import create from './create'
 import createNode from './node'
-import * as assign from './assign'
 import define from './define'
 import update from './update'
 import parse from './parse'
 import set from './set'
 
-import { lookup, remove, get, setProps, log, keys } from './methods'
+import { log, keys } from './methods'
+import { get, remove, lookup } from '@domql/methods'
 
 export {
-  root,
-  tree,
-  cache,
+  TREE,
   create,
   createNode,
-  assign,
   define,
   remove,
   update,
   parse,
   lookup,
-  setProps,
   set,
   get,
   log,

package/src/element/iterate.js

@@ -2,31 +2,7 @@
 
 import { isObject, exec, isFunction, isNumber, isString } from '@domql/utils'
 import { overwrite } from '../utils'
-import { isMethod } from './methods'
-
-export const applyEvents = element => {
-  const { node, on } = element
-  for (const param in on) {
-    if (
-      param === 'init' ||
-      param === 'beforeClassAssign' ||
-      param === 'render' ||
-      param === 'renderRouter' ||
-      param === 'attachNode' ||
-      param === 'stateInit' ||
-      param === 'stateCreated' ||
-      param === 'initStateUpdated' ||
-      param === 'stateUpdated' ||
-      param === 'initUpdate' ||
-      param === 'update'
-    ) continue
-
-    const appliedFunction = element.on[param]
-    if (isFunction(appliedFunction)) {
-      node.addEventListener(param, event => appliedFunction(event, element, element.state, element.context))
-    }
-  }
-}
+import { isMethod } from '@domql/methods'
 
 export const throughInitialExec = element => {
   const { __ref } = element
@@ -74,11 +50,13 @@ export const throughInitialDefine = (element) => {
 
     if (isFunction(prop) && !isMethod(param)) {
       __exec[param] = prop
-      element[param] = prop = exec(prop, element)
+      const execParam = prop = exec(prop, element)
+      if (execParam) element[param] = execParam
     }
 
     __cached[param] = prop
-    element[param] = obj[param](prop, element, element.state)
+    const execParam = obj[param](prop, element, element.state)
+    if (execParam) element[param] = execParam
   }
   return element
 }
@@ -96,7 +74,8 @@ export const throughUpdatedDefine = (element) => {
     const execParam = __exec[param]
     if (execParam) __cached[param] = execParam(element, element.state)
     const cached = exec(__cached[param], element)
-    element[param] = obj[param](cached, element, element.state)
+    const newExecParam = obj[param](cached, element, element.state)
+    if (newExecParam) element[param] = newExecParam
   }
   return changes
 }

package/src/element/methods.js

@@ -1,57 +1,7 @@
 'use strict'
 
-import { isFunction, isObjectLike } from '@domql/utils'
+import { isDefined, isFunction, isObjectLike } from '@domql/utils'
 import { parseFilters, registry } from './mixins'
-import root from './root'
-
-const ENV = process.env.NODE_ENV
-
-// TODO: update these files
-export const lookup = function (key) {
-  const element = this
-  let { parent } = element
-
-  while (parent.key !== key) {
-    if (parent[key]) return parent[key]
-    parent = parent.parent
-    if (!parent) return
-  }
-
-  return parent
-}
-
-// TODO: update these files
-export const spotByPath = function (path) {
-  const element = this
-  const arr = [].concat(path)
-  let active = root[arr[0]]
-
-  if (!arr || !arr.length) return console.log(arr, 'on', element.key, 'is undefined')
-
-  while (active.key === arr[0]) {
-    arr.shift()
-    if (!arr.length) break
-    active = active[arr[0]]
-    if (!active) return
-  }
-
-  return active
-}
-
-export const remove = function (params) {
-  const element = this
-  if (isFunction(element.node.remove)) element.node.remove()
-  else if (ENV === 'test' || ENV === 'development') {
-    console.warn('This item cant be removed')
-    element.log()
-  }
-  delete element.parent[element.key]
-}
-
-export const get = function (param) {
-  const element = this
-  return element[param]
-}
 
 export const set = function () {
 }
@@ -59,13 +9,6 @@ export const set = function () {
 export const update = function () {
 }
 
-export const setProps = function (param, options) {
-  const element = this
-  if (!param || !element.props) return
-  element.update({ props: param }, options)
-  return element
-}
-
 export const defineSetter = (element, key, get, set) =>
   Object.defineProperty(element, key, { get, set })
 
@@ -79,19 +22,30 @@ export const keys = function () {
   return keys
 }
 
-export const parse = function () {
+export const parse = function (excl = []) {
   const element = this
   const obj = {}
   const keyList = keys.call(element)
-  keyList.forEach(v => (obj[v] = element[v]))
+  keyList.forEach(v => {
+    if (excl.includes(v)) return
+    let val = element[v]
+    if (v === 'state') {
+      if (element.__ref && element.__ref.__hasRootState) return
+      if (isFunction(val?.parse)) val = val.parse()
+    } else if (v === 'props') {
+      const { __element, update, ...props } = element[v]
+      obj[v] = props
+    } else if (isDefined(val)) obj[v] = val
+  })
   return obj
 }
 
-export const parseDeep = function () {
+export const parseDeep = function (excl = []) {
   const element = this
-  const obj = parse.call(element)
-  for (const k in obj) {
-    if (isObjectLike(obj[k])) { obj[k] = parseDeep.call(obj[k]) }
+  const obj = parse.call(element, excl)
+  for (const v in obj) {
+    if (excl.includes(v)) return
+    if (isObjectLike(obj[v])) { obj[v] = parseDeep.call(obj[v], excl) }
   }
   return obj
 }
@@ -111,23 +65,6 @@ export const log = function (...args) {
   return element
 }
 
-export const isMethod = function (param) {
-  return param === 'set' ||
-    param === 'update' ||
-    param === 'remove' ||
-    param === 'removeContent' ||
-    param === 'lookup' ||
-    param === 'spotByPath' ||
-    param === 'keys' ||
-    param === 'parse' ||
-    param === 'setProps' ||
-    param === 'parseDeep' ||
-    param === 'if' ||
-    param === 'log' ||
-    param === 'nextElement' ||
-    param === 'previousElement'
-}
-
 export const nextElement = function () {
   const element = this
   const { key, parent } = element

package/src/element/mixins/content.js

@@ -8,11 +8,13 @@ import set from '../set'
  */
 export default (param, element, node, options) => {
   if (param && element) {
-    if (element.$setCollection || element.$setStateCollection || element.$setPropsCollection) return
-    if (param.__hash === element.content.__hash && element.content.update) {
-      if (!element.content.__ref) element.content.__ref = {}
-      element.content.update(param)
+    if (element.content.update) {
+      // const parsedContent = element.content.parseDeep(['class', 'on', 'tag'])
+      // console.log(parsedContent)
+      // if (!element.content.__ref) element.content.__ref = {}
+      element.content.update()
     } else {
+      // if (element.$setCollection || element.$setStateCollection || element.$setPropsCollection) return
       set.call(element, param, options)
     }
   }

package/src/element/mixins/registry.js

@@ -54,10 +54,9 @@ export default {
 // Keys not in the array are excluded.
 export const parseFilters = {
   elementKeys: [
-    'tag', 'text', 'style', 'attr', 'class', 'state', 'class',
-    'data', 'content', 'html', 'on'
-    // TODO: 'props' ?
+    'tag', 'text', 'style', 'attr', 'class', 'state', 'props',
+    'data', 'content', 'html', 'on', 'key'
   ],
-  propsKeys: ['__element'],
+  propsKeys: ['__element', 'update'],
   stateKeys: []
 }

package/src/element/node.js

@@ -1,18 +1,17 @@
 'use strict'
 
 import { exec, isFunction, isObject } from '@domql/utils'
-import { triggerEventOn } from '@domql/event'
+import { applyEventsOnNode, triggerEventOn } from '@domql/event'
+import { isMethod } from '@domql/methods'
+import { cacheNode } from '@domql/node'
 
 import create from './create'
-import cacheNode from './cache'
 
 import {
   throughInitialDefine,
-  throughInitialExec,
-  applyEvents
+  throughInitialExec
 } from './iterate'
 import { registry } from './mixins'
-import { isMethod } from './methods'
 import { applyParam } from './applyParam'
 // import { defineSetter } from './methods'
 
@@ -55,7 +54,7 @@ export const createNode = (element, options) => {
     throughInitialExec(element)
 
     // apply events
-    if (isNewNode && isObject(element.on)) applyEvents(element)
+    if (isNewNode && isObject(element.on)) applyEventsOnNode(element)
 
     for (const param in element) {
       const prop = element[param]

package/src/element/parse.js

@@ -1,7 +1,7 @@
 'use strict'
 
+import { assignNode } from '@domql/render'
 import create from './create'
-import { assignNode } from './assign'
 
 const parse = (element) => {
   const virtualTree = {

package/src/element/props.js

@@ -3,6 +3,8 @@
 import { exec, is, isArray, isObject, isString } from '@domql/utils'
 import { deepClone, deepMerge } from '../utils'
 
+export const IGNORE_PROPS_PARAMS = ['update', '__element']
+
 const objectizeStringProperty = propValue => {
   if (is(propValue)('string', 'number')) return { inheritedString: propValue }
   return propValue
@@ -56,7 +58,7 @@ export const syncProps = (props, element) => {
   element.props = {}
   const mergedProps = { update, __element: element }
   props.forEach(v => {
-    if (v === 'update' || v === '__element') return
+    if (IGNORE_PROPS_PARAMS.includes(v)) return
     const execProps = exec(v, element)
     if (isObject(execProps) && execProps.__element) return
     element.props = deepMerge(mergedProps, deepClone(execProps))