@domql/element 2.5.200 → 3.0.0

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.200",
+  "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.200",
-    "@domql/render": "^2.5.200",
-    "@domql/state": "^2.5.200",
-    "@domql/utils": "^2.5.200"
+    "@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": "0afb63ec375f0526f47ff300885de393138b01e8",
+  "gitHead": "bcbdc271a602b958de6a60ab387ea7715a935dc1",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/set.js

@@ -1,79 +1,167 @@
 'use strict'
 
-import { deepContains, setContentKey } from '@domql/utils'
-
-import { OPTIONS } from './cache/options.js'
+import { deepContains, execPromise, isFunction, OPTIONS } from '@domql/utils'
 import { create } from './create.js'
-import { registry } from './mixins/index.js'
-import { removeContent } from './mixins/content.js'
 import { triggerEventOn, triggerEventOnUpdate } from '@domql/event'
 
-export const resetElement = async (params, element, options) => {
-  if (!options.preventRemove) removeContent(element, options)
+export const setContentKey = (element, opts = {}) => {
   const { __ref: ref } = element
-  await create(params, element, ref.contentElementKey || 'content', {
-    ignoreChildExtend: true,
-    ...registry.defaultOptions,
-    ...OPTIONS.create,
-    ...options
-  })
+  const contentElementKey = opts.contentElementKey
+  if (!ref.contentElementKey || contentElementKey !== ref.contentElementKey) {
+    ref.contentElementKey = contentElementKey || 'content'
+  }
+  return ref.contentElementKey
 }
 
-export const reset = (options) => {
+export const reset = async options => {
   const element = this
-  create(element, element.parent, undefined, {
-    ignoreChildExtend: true,
-    ...registry.defaultOptions,
+  await create(element, element.parent, undefined, {
+    ignoreChildExtends: true,
+    ...OPTIONS.defaultOptions,
     ...OPTIONS.create,
     ...options
   })
 }
 
+export const resetContent = async (params, element, opts) => {
+  const contentElementKey = setContentKey(element, opts)
+  if (element[contentElementKey]?.node) removeContent(element, opts)
+  const contentElem = await create(
+    params,
+    element,
+    contentElementKey || 'content',
+    {
+      ignoreChildExtends: true,
+      ...OPTIONS.defaultOptions,
+      ...OPTIONS.create,
+      ...opts
+    }
+  )
+  if (contentElementKey !== 'content') opts.contentElementKey = 'content' // reset to default
+  return contentElem
+}
+
+export const updateContent = async function (params, opts) {
+  const element = this
+  const contentElementKey = setContentKey(element, opts)
+  if (!element[contentElementKey]) return
+  if (element[contentElementKey].update) {
+    await element[contentElementKey].update(params, opts)
+  }
+}
+
+/**
+ * Appends anything as content
+ * an original one as a child
+ */
+export async function setContent (param, element, opts) {
+  const content = await execPromise(param, element)
+
+  if (content && element) {
+    set.call(element, content, opts)
+  }
+}
+
+export const removeContent = function (el, opts = {}) {
+  const element = el || this
+
+  const contentElementKey = setContentKey(element, opts)
+  if (opts.contentElementKey !== 'content') {
+    opts.contentElementKey = 'content'
+  }
+
+  const content = element[contentElementKey]
+  if (!content) return
+
+  // Handle fragment removal
+  if (content.tag === 'fragment' && content.__ref?.__children) {
+    // Remove all child nodes
+    content.__ref.__children.forEach(key => {
+      const child = content[key]
+      if (child.node && child.node.parentNode) {
+        child.node.parentNode.removeChild(child.node)
+      }
+      if (isFunction(child.remove)) {
+        child.remove()
+      }
+    })
+  } else {
+    // Handle regular element removal
+    if (content.node && content.node.parentNode) {
+      content.node.parentNode.removeChild(content.node)
+    }
+    if (isFunction(content.remove)) {
+      content.remove()
+    }
+  }
+
+  delete element[contentElementKey]
+}
+
 export const set = async function (params, options = {}, el) {
   const element = el || this
   const { __ref: ref } = element
 
-  const content = setContentKey(element, options)
+  const contentElementKey = setContentKey(element, options)
+  const content = element[contentElementKey]
   const __contentRef = content && content.__ref
   const lazyLoad = element.props && element.props.lazyLoad
 
-  const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection
-  if (options.preventContentUpdate === true && !hasCollection) return
+  const hasChildren = element.children
+  if (options.preventContentUpdate === true && !hasChildren) return
+
+  const childHasChanged = !ref.__noChildrenDifference
+  const childrenIsDifferentFromCache =
+    childHasChanged &&
+    __contentRef &&
+    Object.keys(params).length === Object.keys(content).length &&
+    deepContains(params, content)
 
-  if (ref.__noCollectionDifference || (__contentRef && __contentRef.__cached && deepContains(params, content))) {
+  if (content?.update && !childHasChanged && !childrenIsDifferentFromCache) {
     if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-      const beforeUpdateReturns = await triggerEventOnUpdate('beforeUpdate', params, element, options)
+      const beforeUpdateReturns = await triggerEventOnUpdate(
+        'beforeUpdate',
+        params,
+        element,
+        options
+      )
       if (beforeUpdateReturns === false) return element
     }
-    if (content?.update) content.update()
-    if (!options.preventUpdateListener) await triggerEventOn('update', element, options)
+    await content.update(params)
+    if (!options.preventUpdateListener && !options.preventListeners) {
+      await triggerEventOn('update', element, options)
+    }
     return
   }
 
-  if (params) {
-    let { childExtend, props } = params
-    if (!props) props = params.props = {}
-    if (!childExtend && element.childExtend) {
-      params.childExtend = element.childExtend
-      props.ignoreChildExtend = true
+  if (!params) return element
+
+  let { childExtends, props, tag } = params
+  if (!props) props = params.props = {}
+
+  if (tag === 'fragment') {
+    if (!childExtends && element.childExtends) {
+      params.childExtends = element.childExtends
+      props.ignoreChildExtends = true
     }
+
     if (!props?.childProps && element.props?.childProps) {
       props.childProps = element.props.childProps
       props.ignoreChildProps = true
     }
-
-    if (lazyLoad) {
-      window.requestAnimationFrame(async () => {
-        await resetElement(params, element, options)
-        // handle lazy load
-        if (!options.preventUpdateListener) {
-          triggerEventOn('lazyLoad', element, options)
-        }
-      })
-    } else await resetElement(params, element, options)
   }
 
-  return element
+  if (lazyLoad) {
+    window.requestAnimationFrame(async () => {
+      await resetContent(params, element, options)
+      // handle lazy load
+      if (!options.preventUpdateListener) {
+        await triggerEventOn('lazyLoad', element, options)
+      }
+    })
+  } else {
+    await resetContent(params, element, options)
+  }
 }
 
 export default set