@domql/element 2.5.198 → 3.0.0

package/iterate.js

@@ -6,28 +6,25 @@ import {
   isFunction,
   isNumber,
   isString,
-  checkIfKeyIsComponent,
-  extendizeByKey,
-  isVariant
+  matchesComponentNaming,
+  isContextComponent,
+  isMethod,
+  overwrite
 } from '@domql/utils'
 
-import { METHODS_EXL, overwrite } from './utils/index.js'
-import { isMethod } from './methods/index.js'
-
 export const throughInitialExec = (element, exclude = {}) => {
   const { __ref: ref } = element
   for (const param in element) {
     if (exclude[param]) continue
     const prop = element[param]
-    if (isFunction(prop) && !isMethod(param, element) && !isVariant(param)) {
+    if (isFunction(prop) && !isMethod(param, element)) {
       ref.__exec[param] = prop
       element[param] = prop(element, element.state, element.context)
-      // if (isComponent)
     }
   }
 }
 
-export const throughUpdatedExec = (element, options = { excludes: METHODS_EXL }) => {
+export const throughUpdatedExec = (element, options = {}) => {
   const { __ref: ref } = element
   const changes = {}
 
@@ -41,15 +38,17 @@ export const throughUpdatedExec = (element, options = { excludes: METHODS_EXL })
     const execReturnsString = isString(newExec) || isNumber(newExec)
     // if (prop && prop.node && execReturnsString) {
     if (prop && prop.node && execReturnsString) {
-      overwrite(prop, { text: newExec }, options)
+      overwrite(prop, { text: newExec })
     } else if (newExec !== prop) {
-      if (checkIfKeyIsComponent(param)) {
-        const { extend, ...newElem } = extendizeByKey(newExec, element, param)
-        overwrite(prop, newElem, options)
-        // } else {
-        //   overwrite(prop, newExec, options)
+      if (matchesComponentNaming(param)) {
+        const { extends: extend, ...newElem } = isContextComponent(
+          newExec,
+          element,
+          param
+        )
+        overwrite(prop, newElem)
       } else {
-        ref.__cached[param] = changes[param] = prop
+        changes[param] = prop
         element[param] = newExec
       }
     }
@@ -58,11 +57,12 @@ export const throughUpdatedExec = (element, options = { excludes: METHODS_EXL })
   return changes
 }
 
-export const throughExecProps = (element) => {
+export const throughExecProps = element => {
   const { __ref: ref } = element
   const { props } = element
   for (const k in props) {
-    const isDefine = k.startsWith('is') || k.startsWith('has') || k.startsWith('use')
+    const isDefine =
+      k.startsWith('is') || k.startsWith('has') || k.startsWith('use')
     const cachedExecProp = ref.__execProps[k]
     if (isFunction(cachedExecProp)) {
       props[k] = exec(cachedExecProp, element)
@@ -73,7 +73,9 @@ export const throughExecProps = (element) => {
   }
 }
 
-export const throughInitialDefine = (element) => {
+export const isPropertyInDefines = (key, element) => {}
+
+export const throughInitialDefine = element => {
   const { define, context, __ref: ref } = element
 
   let defineObj = {}
@@ -84,23 +86,30 @@ export const throughInitialDefine = (element) => {
   for (const param in defineObj) {
     let elementProp = element[param]
 
-    if (isFunction(elementProp) && !isMethod(param, element) && !isVariant(param)) {
+    if (isFunction(elementProp) && !isMethod(param, element)) {
       ref.__exec[param] = elementProp
-      const execParam = elementProp = exec(elementProp, element)
+      const execParam = (elementProp = exec(elementProp, element))
 
       if (execParam) {
-        elementProp = element[param] = execParam.parse ? execParam.parse() : execParam
+        elementProp = element[param] = execParam.parse
+          ? execParam.parse()
+          : execParam
         ref.__defineCache[param] = elementProp
       }
     }
 
-    const execParam = defineObj[param](elementProp, element, element.state, element.context)
+    const execParam = defineObj[param](
+      elementProp,
+      element,
+      element.state,
+      element.context
+    )
     if (execParam) element[param] = execParam
   }
   return element
 }
 
-export const throughUpdatedDefine = (element) => {
+export const throughUpdatedDefine = element => {
   const { context, define, __ref: ref } = element
   const changes = {}
 
@@ -110,9 +119,18 @@ export const throughUpdatedDefine = (element) => {
 
   for (const param in obj) {
     const execParam = ref.__exec[param]
-    if (execParam) ref.__defineCache[param] = execParam(element, element.state, element.context)
+    if (execParam) {
+      ref.__defineCache[param] = execParam(
+        element,
+        element.state,
+        element.context
+      )
+    }
     const cached = exec(ref.__defineCache[param], element)
-    const newExecParam = obj[param](cached, element, element.state, element.context)
+    const newExecParam =
+      typeof obj[param] === 'function'
+        ? obj[param](cached, element, element.state, element.context)
+        : undefined
     if (newExecParam) element[param] = newExecParam
   }
   return changes

package/methods/set.js

@@ -2,10 +2,9 @@
 
 import { merge, overwrite } from '@domql/utils'
 
-import { set, reset } from '../set.js'
+import { set, reset, updateContent, removeContent } from '../set.js'
 import { update } from '../update.js'
 
-import { removeContent, updateContent } from '../mixins/content.js'
 import {
   call,
   error,
@@ -27,7 +26,7 @@ import {
   variables,
   verbose,
   warn
-} from './index.js'
+} from '@domql/utils/methods'
 
 export const addMethods = (element, parent, options = {}) => {
   const proto = {
@@ -57,6 +56,8 @@ export const addMethods = (element, parent, options = {}) => {
     error,
     call
   }
-  if (element.context.methods) (options.strict ? merge : overwrite)(proto, element.context.methods)
+  if (element.context.methods) {
+    ;(options.strict ? merge : overwrite)(proto, element.context.methods)
+  }
   Object.setPrototypeOf(element, proto)
 }

package/methods/v2.js

@@ -1,7 +1,6 @@
 'use strict'
 
 import { isDefined, isFunction, isObjectLike } from '@domql/utils'
-import { parseFilters, REGISTRY } from '../mixins/index.js'
 
 export const defineSetter = (element, key, get, set) =>
   Object.defineProperty(element, key, { get, set })
@@ -10,7 +9,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
@@ -39,7 +38,9 @@ export const parseDeep = function (excl = []) {
   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) }
+    if (isObjectLike(obj[v])) {
+      obj[v] = parseDeep.call(obj[v], excl)
+    }
   }
   return obj
 }
@@ -51,7 +52,7 @@ export const log = function (...args) {
   if (args.length) {
     args.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
   } else {
-    console.log(__ref.path)
+    console.log(__ref?.path)
     const keys = element.keys()
     keys.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
   }

package/mixins/attr.js

@@ -1,8 +1,7 @@
 'use strict'
 
-import { exec, isNot, isNull, isUndefined } from '@domql/utils'
+import { deepMerge, exec, isNot, isNull, isUndefined } from '@domql/utils'
 import { report } from '@domql/report'
-import { deepMerge } from '../utils/index.js'
 
 /**
  * Recursively add attributes to a DOM node
@@ -12,12 +11,19 @@ export function attr (params, element, node) {
   const { __attr } = ref
   if (isNot('object')) report('HTMLInvalidAttr', params)
   if (params) {
-    if (props.attr) deepMerge(params, props.attr)
-    for (const attr in params) {
-      const val = exec(params[attr], element)
+    const attrs = exec(params, element)
+    if (props.attr) deepMerge(attrs, props.attr)
+    for (const attr in attrs) {
+      const val = exec(attrs[attr], element)
       // if (__attr[attr] === val) return
-      if (val !== false && !isUndefined(val) && !isNull(val) && node.setAttribute) node.setAttribute(attr, val)
-      else if (node.removeAttribute) node.removeAttribute(attr)
+      if (
+        val !== false &&
+        !isUndefined(val) &&
+        !isNull(val) &&
+        node.setAttribute
+      ) {
+        node.setAttribute(attr, val)
+      } else if (node.removeAttribute) node.removeAttribute(attr)
       __attr[attr] = val
     }
   }

package/mixins/classList.js

@@ -2,10 +2,15 @@
 
 import { exec, isObject, isString } from '@domql/utils'
 
-export const assignKeyAsClassname = (element) => {
+export const assignKeyAsClassname = element => {
   const { key } = element
   if (element.class === true) element.class = key
-  else if (!element.class && typeof key === 'string' && key.charAt(0) === '_' && key.charAt(1) !== '_') {
+  else if (
+    !element.class &&
+    typeof key === 'string' &&
+    key.charAt(0) === '_' &&
+    key.charAt(1) !== '_'
+  ) {
     element.class = key.slice(1)
   }
 }

package/mixins/data.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { exec, isObject, deepMerge } from '@domql/utils'
+import { isObject, deepMerge, exec } from '@domql/utils'
 import { report } from '@domql/report'
 
 /**

package/mixins/index.js

@@ -2,20 +2,15 @@
 
 import { attr } from './attr.js'
 import { applyClasslist } from './classList.js'
-import { setContent } from './content.js'
 import { data } from './data.js'
 import { html } from './html.js'
 import { style } from './style.js'
 import { text } from './text.js'
 import { state } from './state.js'
 import { scope } from './scope.js'
-import { REGISTRY } from './registry.js'
-
-export { REGISTRY as registry }
-export { applyClasslist as classList }
-export { setContent as content }
 
 export {
+  applyClasslist as classList,
   attr,
   data,
   style,

package/mixins/registry.js

@@ -2,7 +2,6 @@
 
 import attr from './attr.js'
 import { classList } from './classList.js'
-import content from './content.js'
 import data from './data.js'
 import html from './html.js'
 import scope from './scope.js'
@@ -15,79 +14,33 @@ export const REGISTRY = {
   style,
   text,
   html,
-  content,
   data,
   class: classList,
   state,
   scope,
-
   deps: (param, el) => param || el.parent.deps,
 
-  extend: {},
-  childExtend: {},
-  childExtendRecursive: {},
+  extends: {},
+  children: {},
+  content: {},
+  childExtends: {},
+  childExtendsRecursive: {},
   props: {},
-  path: {},
   if: {},
   define: {},
-  transform: {},
   __name: {},
   __ref: {},
   __hash: {},
   __text: {},
-  nextElement: {},
-  previousElement: {},
   key: {},
   tag: {},
   query: {},
   parent: {},
   node: {},
-  set: {},
-  reset: {},
-  update: {},
-  error: {},
-  warn: {},
-  call: {},
-  setProps: {},
-  remove: {},
-  updateContent: {},
-  removeContent: {},
   variables: {},
-  lookup: {},
-  lookdown: {},
-  getRef: {},
-  getPath: {},
-  lookdownAll: {},
-  setNodeStyles: {},
-  spotByPath: {},
-  keys: {},
-  log: {},
-  parse: {},
-  parseDeep: {},
   on: {},
   component: {},
-  context: {},
-  $collection: {},
-  $stateCollection: {},
-  $propsCollection: {},
-  $setCollection: {},
-  $setStateCollection: {},
-  $setPropsCollection: {}
+  context: {}
 }
 
 export default REGISTRY
-
-// List of keys for .parse() and .parseDeep() to include in the result.
-// Keys not in the array are excluded.
-export const parseFilters = {
-  elementKeys: [
-    'tag', 'text', 'style', 'attr', 'class', 'state', 'props',
-    'data', 'content', 'html', 'on', 'key', 'extend', 'childExtend',
-    'childExtendRecursive', 'scope', 'query',
-    '$collection', '$stateCollection', '$propsCollection'
-  ],
-  propsKeys: ['__element', 'update'],
-  stateKeys: []
-}
-
-export const collectionFilters = ['$collection', '$stateCollection', '$propsCollection']

package/mixins/scope.js

@@ -6,7 +6,7 @@ import { isFunction, isObject } from '@domql/utils'
  * Apply data parameters on the DOM nodes
  * this should only work if `showOnNode: true` is passed
  */
-export function scope (params, element, node) {
+export async function scope (params, element, node) {
   if (!isObject(params)) return
 
   // Apply data params on node

package/mixins/state.js

@@ -1,14 +1,13 @@
 'use strict'
 
-import { IGNORE_STATE_PARAMS } from '@domql/state'
-import { exec, isObject } from '@domql/utils'
+import { execPromise, isObject, STATE_METHODS } from '@domql/utils'
 
-export function state (params, element, node) {
-  const state = exec(params, element)
+export async function state (params, element, node) {
+  const state = await execPromise(params, element)
 
   if (isObject(state)) {
     for (const param in state) {
-      if (IGNORE_STATE_PARAMS.includes(param)) continue
+      if (STATE_METHODS.includes(param)) continue
       if (!Object.hasOwnProperty.call(state, param)) continue
       // element.state[param] = exec(state[param], element)
     }

package/mixins/text.js

@@ -1,17 +1,14 @@
 'use strict'
 
 import { create } from '../create.js'
-import {
-  exec,
-  isString
-} from '@domql/utils'
+import { exec, isString } from '@domql/utils'
 
 /**
  * Creates a text node and appends into
  * an original one as a child
  */
-export function text (param, element, node) {
-  let prop = exec(param, element)
+export async function text (param, element, node) {
+  let prop = exec(param || element.props.text, element)
   if (isString(prop) && prop.includes('{{')) {
     prop = element.call('replaceLiteralsWithObjectFields', prop)
   }
@@ -22,7 +19,7 @@ export function text (param, element, node) {
       if (element.__text.text === prop) return
       element.__text.text = prop
       if (element.__text.node) element.__text.node.nodeValue = prop
-    } else create({ tag: 'string', text: prop }, element, '__text')
+    } else await create({ tag: 'string', text: prop }, element, '__text')
   }
 }
 

package/node.js

@@ -1,9 +1,8 @@
 'use strict'
 
-import { exec, isFunction, isObject, isUndefined, isVariant } from '@domql/utils'
+import { isFunction, isMethod, isObject, isUndefined } from '@domql/utils'
 import { applyEventsOnNode, triggerEventOn } from '@domql/event'
 import { cacheNode } from '@domql/render'
-import { isMethod } from './methods/index.js'
 import { create } from './create.js'
 
 import {
@@ -13,79 +12,75 @@ import {
 } from './iterate.js'
 import { REGISTRY } from './mixins/index.js'
 import { applyParam } from './utils/applyParam.js'
-import { propagateEventsFromProps } from './utils/propEvents.js'
+import setChildren from './children.js'
+import { setContent } from './set.js'
 // import { defineSetter } from './methods'
 
 const ENV = process.env.NODE_ENV
 
-export const createNode = async (element, options) => {
+export const createNode = async (element, opts) => {
   // create and assign a node
   let { node, tag, __ref: ref } = element
 
+  if (!ref.__if) return element
+
   let isNewNode
 
   if (!node) {
     isNewNode = true
 
-    if (!ref.__if) return element
-
     if (tag === 'shadow') {
       node = element.node = element.parent.node.attachShadow({ mode: 'open' })
     } else node = element.node = cacheNode(element)
 
     // trigger `on.attachNode`
-    triggerEventOn('attachNode', element, options)
+    await triggerEventOn('attachNode', element, opts)
   }
   // node.dataset // .key = element.key
 
-  if (ENV === 'test' || ENV === 'development' || options.alowRefReference) {
+  if (ENV === 'test' || ENV === 'development' || opts.alowRefReference) {
     node.ref = element
     if (isFunction(node.setAttribute)) node.setAttribute('key', element.key)
   }
 
   // iterate through exec props
-  throughExecProps(element)
+  await throughExecProps(element)
 
   // iterate through define
-  throughInitialDefine(element)
+  await throughInitialDefine(element)
 
   // iterate through exec
-  throughInitialExec(element)
-
-  if (element.tag !== 'string' && element.tag !== 'fragment') {
-    propagateEventsFromProps(element)
+  await throughInitialExec(element)
 
-    if (isNewNode && isObject(element.on)) {
-      applyEventsOnNode(element, options)
-    }
-  }
+  await applyEventsOnNode(element, { isNewNode, ...opts })
 
   for (const param in element) {
     const value = element[param]
 
-    if (!Object.hasOwnProperty.call(element, param)) continue
-
     if (
+      !Object.hasOwnProperty.call(element, param) ||
       isUndefined(value) ||
       isMethod(param, element) ||
-      isVariant(param) ||
       isObject(REGISTRY[param])
-    ) continue
+    ) {
+      continue
+    }
 
-    const isElement = applyParam(param, element, options)
+    const isElement = await applyParam(param, element, opts)
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement
       if (element[param] && !hasDefine && !hasContextDefine) {
         const createAsync = async () => {
-          await create(exec(value, element), element, param, options)
+          await create(value, element, param, opts)
         }
 
-        if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
+        // TODO: test this with promise
+        // handle lazy load
+        if ((element.props && element.props.lazyLoad) || opts.lazyLoad) {
           window.requestAnimationFrame(async () => {
             await createAsync()
-            // handle lazy load
-            if (!options.preventUpdateListener) {
-              triggerEventOn('lazyLoad', element, options)
+            if (!opts.preventUpdateListener) {
+              await triggerEventOn('lazyLoad', element, opts)
             }
           })
         } else await createAsync()
@@ -93,6 +88,14 @@ export const createNode = async (element, options) => {
     }
   }
 
+  const content = element.children
+    ? await setChildren(element.children, element, opts)
+    : element.content || element.content
+
+  if (content) {
+    await setContent(content, element, opts)
+  }
+
   // node.dataset.key = key
   return element
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.198",
+  "version": "3.0.0",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -27,12 +27,13 @@
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/event": "^2.5.190",
-    "@domql/render": "^2.5.190",
-    "@domql/state": "^2.5.198",
-    "@domql/utils": "^2.5.187"
+    "@domql/event": "^3.0.0",
+    "@domql/render": "^3.0.0",
+    "@domql/report": "^3.0.0",
+    "@domql/state": "^3.0.0",
+    "@domql/utils": "^3.0.0"
   },
-  "gitHead": "045032f5c80a92a1a05b0dfff68c93c9b32e6bd9",
+  "gitHead": "bcbdc271a602b958de6a60ab387ea7715a935dc1",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }