@domql/element 3.4.4 → 3.4.6

package/mixins/content.js

@@ -0,0 +1,65 @@
+'use strict'
+
+import { isFunction, setContentKey } from '@domql/utils'
+import { set } from '../set.js'
+
+export const updateContent = function (params, options) {
+  const element = this
+  const ref = element.__ref
+
+  const contentKey = ref.contentElementKey
+
+  if (!element[contentKey]) return
+  if (element[contentKey].update) element[contentKey].update(params, options)
+}
+
+export const removeContent = function (el, opts = {}) {
+  const element = el || this
+  const { __ref: ref } = element
+  const contentElementKey = setContentKey(element, opts)
+
+  if (opts.contentElementKey !== 'content') opts.contentElementKey = 'content'
+  if (element[contentElementKey]) {
+    if (element[contentElementKey].node && element.node) {
+      if (element[contentElementKey].tag === 'fragment')
+        element.node.innerHTML = ''
+      else {
+        const contentNode = element[contentElementKey].node
+        if (contentNode.parentNode === element.node)
+          element.node.removeChild(element[contentElementKey].node)
+      }
+    }
+
+    const { __cached } = ref
+    if (__cached && __cached[contentElementKey]) {
+      if (__cached[contentElementKey].tag === 'fragment')
+        __cached[contentElementKey].parent.node.innerHTML = ''
+      else if (
+        __cached[contentElementKey] &&
+        isFunction(__cached[contentElementKey].remove)
+      )
+        __cached[contentElementKey].remove()
+    }
+
+    ref.__children.splice(ref.__children.indexOf(element[contentElementKey]), 1)
+
+    delete element[contentElementKey]
+  }
+}
+
+/**
+ * Appends anything as content
+ * an original one as a child
+ */
+export function setContent (param, element, node, opts) {
+  const contentElementKey = setContentKey(element, opts)
+  if (param && element) {
+    if (element[contentElementKey]?.update) {
+      element[contentElementKey].update({}, opts)
+    } else {
+      set.call(element, param, opts)
+    }
+  }
+}
+
+export default setContent

package/mixins/data.js

@@ -0,0 +1,26 @@
+'use strict'
+
+import { isObject, deepMerge, exec } from '@domql/utils'
+import { report } from '@domql/report'
+
+/**
+ * Apply data parameters on the DOM nodes
+ * this should only work if `showOnNode: true` is passed
+ */
+export function data (params, element, node) {
+  if (params) {
+    if (element.props.data) deepMerge(params, element.props.data)
+    if (params.showOnNode) {
+      if (!isObject(params)) report('HTMLInvalidData', params)
+
+      // Apply data params on node
+      for (const dataset in params) {
+        if (dataset !== 'showOnNode') {
+          node.dataset[dataset] = exec(params[dataset], element)
+        }
+      }
+    }
+  }
+}
+
+export default data

package/mixins/html.js

@@ -0,0 +1,19 @@
+'use strict'
+
+import { exec } from '@domql/utils'
+
+/**
+ * Appends raw HTML as content
+ * an original one as a child
+ */
+export function html (param, element, node) {
+  const prop = exec(element?.props?.html || param, element)
+  const { __ref } = element
+  if (prop !== __ref.__html) {
+    if (node.nodeName === 'SVG') node.textContent = prop
+    else node.innerHTML = prop
+    __ref.__html = prop
+  }
+}
+
+export default html

package/mixins/index.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { attr } from './attr.js'
+import { applyClasslist } from './classList.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'
+
+export {
+  applyClasslist as classList,
+  attr,
+  data,
+  style,
+  text,
+  html,
+  state,
+  scope
+}
+
+export * from './registry.js'

package/mixins/registry.js

@@ -0,0 +1,46 @@
+'use strict'
+
+import { attr } from './attr.js'
+import { classList } from './classList.js'
+import data from './data.js'
+import html from './html.js'
+import scope from './scope.js'
+import state from './state.js'
+import style from './style.js'
+import text from './text.js'
+
+export const REGISTRY = {
+  attr,
+  style,
+  text,
+  html,
+  data,
+  classlist: classList,
+  state,
+  scope,
+  deps: (param, el) => param || el.parent.deps,
+
+  extends: {},
+  children: {},
+  content: {},
+  childExtends: {},
+  childExtendsRecursive: {},
+  props: {},
+  if: {},
+  define: {},
+  __name: {},
+  __ref: {},
+  __hash: {},
+  __text: {},
+  key: {},
+  tag: {},
+  query: {},
+  parent: {},
+  node: {},
+  variables: {},
+  on: {},
+  component: {},
+  context: {}
+}
+
+export default REGISTRY

package/mixins/scope.js

@@ -0,0 +1,23 @@
+'use strict'
+
+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) {
+  if (!isObject(params)) return
+
+  // Apply data params on node
+  for (const scopeItem in params) {
+    const value = params[scopeItem]
+    if (isFunction(value)) {
+      element.scope[scopeItem] = value.bind(element)
+    } else {
+      element.scope[scopeItem] = value
+    }
+  }
+}
+
+export default scope

package/mixins/state.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { exec, isObject, STATE_METHODS } from '@domql/utils'
+
+export function state (params, element, node) {
+  const state = exec(params, element)
+
+  if (isObject(state)) {
+    for (const param in state) {
+      if (STATE_METHODS.has(param)) continue
+      if (!Object.prototype.hasOwnProperty.call(state, param)) continue
+    }
+  }
+
+  return element
+}
+
+export default state

package/mixins/style.js

@@ -0,0 +1,25 @@
+'use strict'
+
+import { exec, isObject } from '@domql/utils'
+import { report } from '@domql/report'
+
+/**
+ * Recursively add styles to a DOM node
+ */
+export function style (params, element, node) {
+  if (params) {
+    if (isObject(params)) {
+      const { __ref } = element
+      if (!__ref.__style) __ref.__style = {}
+      const cache = __ref.__style
+      for (const prop in params) {
+        const val = exec(params[prop], element)
+        if (val === cache[prop]) continue
+        cache[prop] = val
+        node.style[prop] = val
+      }
+    } else report('HTMLInvalidStyles', params)
+  }
+}
+
+export default style

package/mixins/text.js

@@ -0,0 +1,31 @@
+'use strict'
+
+import { create } from '../create.js'
+import { exec, isString, SVG_TAGS } 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(element.props.text || param, element)
+  if (isString(prop) && prop.includes('{{')) {
+    prop = element.call('replaceLiteralsWithObjectFields', prop, element.state)
+  }
+  if (element.tag === 'string') {
+    node.nodeValue = prop
+  } else if (param !== undefined && param !== null) {
+    // SVG elements don't support appending text nodes as children
+    if (SVG_TAGS.has(element.tag)) {
+      if (node) node.textContent = prop
+      return
+    }
+    if (element.__text) {
+      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')
+  }
+}
+
+export default text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "3.4.4",
+  "version": "3.4.6",
   "license": "MIT",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -9,7 +9,7 @@
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js",
-      "browser": "./dist/iife/index.js",
+      "browser": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
     },
     "./event": {
@@ -36,7 +36,12 @@
   "source": "index.js",
   "files": [
     "dist",
-    "*.js"
+    "*.js",
+    "event",
+    "methods",
+    "mixins",
+    "utils",
+    "render"
   ],
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
@@ -47,16 +52,16 @@
     "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=DomqlElement --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV"
   },
   "dependencies": {
-    "@domql/report": "^3.4.4",
-    "@domql/state": "^3.4.4",
-    "@domql/utils": "^3.4.4",
-    "attrs-in-props": "^3.4.4"
+    "@domql/report": "^3.4.6",
+    "@domql/state": "^3.4.6",
+    "@domql/utils": "^3.4.6",
+    "attrs-in-props": "^3.4.6"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {
     "@babel/core": "^7.26.0"
   },
-  "browser": "./dist/iife/index.js",
+  "browser": "./dist/esm/index.js",
   "unpkg": "./dist/iife/index.js",
   "jsdelivr": "./dist/iife/index.js",
   "sideEffects": false

package/render/__tests__/appendNode.test.js

@@ -0,0 +1,53 @@
+import { jest } from '@jest/globals'
+import { appendNode } from '../append'
+
+describe('appendNode', () => {
+  let parentNode
+  let childNode
+
+  beforeEach(() => {
+    // Setup fresh DOM elements before each test
+    parentNode = document.createElement('div')
+    childNode = document.createElement('span')
+  })
+
+  test('should append child to parent node successfully', () => {
+    const result = appendNode(childNode, parentNode)
+
+    expect(parentNode.children).toHaveLength(1)
+    expect(parentNode.firstChild).toBe(childNode)
+    expect(result).toBe(childNode)
+  })
+
+  test('should handle invalid parent node', () => {
+    const consoleSpy = jest.spyOn(console, 'error')
+    const invalidParent = null
+
+    const result = appendNode(childNode, invalidParent)
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Does not support to append',
+      invalidParent,
+      childNode
+    )
+    expect(result).toBeUndefined()
+
+    consoleSpy.mockRestore()
+  })
+
+  test('should handle invalid child node', () => {
+    const consoleSpy = jest.spyOn(console, 'error')
+    const invalidChild = null
+
+    const result = appendNode(invalidChild, parentNode)
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Does not support to append',
+      parentNode,
+      invalidChild
+    )
+    expect(result).toBeUndefined()
+
+    consoleSpy.mockRestore()
+  })
+})

package/render/__tests__/assignNode.test.js

@@ -0,0 +1,151 @@
+import { assignNode } from '../append'
+
+describe('assignNode', () => {
+  let element
+  let parent
+  let mockNode
+  let mockParentNode
+
+  beforeEach(() => {
+    // Setup mock DOM nodes
+    mockNode = document.createElement('div')
+    mockParentNode = document.createElement('div')
+
+    // Setup mock element and parent objects
+    element = {
+      key: 'testKey',
+      node: mockNode,
+      tag: 'div'
+    }
+
+    parent = {
+      node: mockParentNode
+    }
+  })
+
+  test('should throw error when element is null', () => {
+    expect(() => {
+      assignNode(null, parent)
+    }).toThrow('Element is required')
+  })
+
+  test('should throw error when parent is null', () => {
+    expect(() => {
+      assignNode(element, null)
+    }).toThrow('Parent is required')
+  })
+
+  test('should assign element to parent using element key', () => {
+    const result = assignNode(element, parent)
+
+    // Check key assignment
+    expect(parent[element.key]).toBe(element)
+
+    // Check DOM structure
+    expect(parent.node.children).toHaveLength(1)
+    expect(parent.node.firstChild).toBe(element.node)
+    expect(element.node.parentNode).toBe(parent.node)
+
+    // Check return value
+    expect(result).toBe(element)
+  })
+
+  test('should assign element to parent using custom key', () => {
+    const customKey = 'customKey'
+    const result = assignNode(element, parent, customKey)
+
+    // Check custom key assignment
+    expect(parent[customKey]).toBe(element)
+    expect(parent[element.key]).toBeUndefined()
+
+    // Check DOM structure
+    expect(parent.node.children).toHaveLength(1)
+    expect(parent.node.firstChild).toBe(element.node)
+    expect(element.node.parentNode).toBe(parent.node)
+
+    // Check return value
+    expect(result).toBe(element)
+  })
+
+  test('should not modify DOM when element tag is shadow', () => {
+    element.tag = 'shadow'
+    const result = assignNode(element, parent)
+
+    // Check key assignment still happens
+    expect(parent[element.key]).toBe(element)
+
+    // Check DOM remains unchanged
+    expect(parent.node.children).toHaveLength(0)
+    expect(element.node.parentNode).toBeNull()
+
+    // Check return value
+    expect(result).toBe(element)
+  })
+
+  test('should insert node before reference node', () => {
+    const referenceNode = document.createElement('div')
+    parent.node.appendChild(referenceNode)
+
+    const attachOptions = {
+      position: 'before',
+      node: referenceNode
+    }
+
+    const result = assignNode(element, parent, null, attachOptions)
+
+    // Check key assignment
+    expect(parent[element.key]).toBe(element)
+
+    // Check DOM structure
+    expect(parent.node.children).toHaveLength(2)
+    expect(parent.node.firstChild).toBe(element.node)
+    expect(element.node.nextSibling).toBe(referenceNode)
+    expect(referenceNode.previousSibling).toBe(element.node)
+
+    // Check return value
+    expect(result).toBe(element)
+  })
+
+  test('should insert node after reference node', () => {
+    const referenceNode = document.createElement('div')
+    parent.node.appendChild(referenceNode)
+
+    const attachOptions = {
+      position: 'after',
+      node: referenceNode
+    }
+
+    const result = assignNode(element, parent, null, attachOptions)
+
+    // Check key assignment
+    expect(parent[element.key]).toBe(element)
+
+    // Check DOM structure
+    expect(parent.node.children).toHaveLength(2)
+    expect(parent.node.lastChild).toBe(element.node)
+    expect(element.node.previousSibling).toBe(referenceNode)
+    expect(referenceNode.nextSibling).toBe(element.node)
+
+    // Check return value
+    expect(result).toBe(element)
+  })
+
+  test('should use parent node when attachOptions node is not provided', () => {
+    const attachOptions = {
+      position: 'before'
+    }
+
+    const result = assignNode(element, parent, null, attachOptions)
+
+    // Check key assignment
+    expect(parent[element.key]).toBe(element)
+
+    // Check DOM structure
+    expect(parent.node.children).toHaveLength(0)
+    expect(parent.node.firstChild).toBe(null)
+    expect(element.node.parentNode).toBe(null)
+
+    // Check return value
+    expect(result).toBe(element)
+  })
+})