@domql/element 2.5.200 → 3.0.1

package/README.md

@@ -8,7 +8,7 @@ Takes object and creates DOMQL element.
 import DOM from 'domql'
 
 const Poster = {
-  extend: [Link, Img],
+  extends: [Link, Img],
   props: {
     boxSize: [100, 200],
     borderRadius: 12,

package/__tests__/checkIfOnUpdate.test.js

@@ -0,0 +1,103 @@
+import { update } from '../update'
+
+describe('checkIfOnUpdate via update()', () => {
+  let element, parent, options
+
+  beforeEach(() => {
+    parent = {
+      node: document.createElement('div'),
+      props: {},
+      state: {}
+    }
+
+    element = {
+      __ref: {
+        __if: undefined,
+        __state: null,
+        __hasRootState: false,
+        __execProps: {},
+        contentElementKey: 'content'
+      },
+      parent,
+      props: {},
+      state: {
+        update: (el, st) => {
+          return st
+        }
+      },
+      context: {
+        defaultExtends: {}
+      },
+      node: document.createElement('div'),
+      if: () => true,
+      previousElement: () => {
+        return {}
+      },
+      nextElement: () => {
+        return {}
+      },
+      removeContent: () => {
+        return true
+      }
+    }
+
+    options = {}
+  })
+
+  it('uses props.if when element.if missing', async () => {
+    delete element.if
+    element.props.if = () => false
+    await update.call(element, {}, options)
+    expect(element.node).toEqual(document.createElement('div'))
+  })
+
+  it('retains state when __hasRootState=true', async () => {
+    element.__ref.__hasRootState = true
+    element.state.critical = true
+    element.__ref.__if = false
+
+    await update.call(element, {}, options)
+
+    expect(element.state.critical).toBe(true)
+    expect(element.state.preserved).toBeUndefined()
+  })
+
+  it('processes nested content with parseDeep', async () => {
+    element.content = {
+      parseDeep: () => ({ parsed: true }),
+      existing: 'data'
+    }
+
+    await update.call(element, {}, options)
+
+    expect(element.content.parsed).toBe(true)
+    expect(element.content.existing).toBeUndefined()
+  })
+
+  it('reattaches after previous sibling', async () => {
+    const prevNode = document.createElement('span')
+    parent.node.appendChild(prevNode)
+
+    await update.call(element, {}, options)
+
+    const newElement = parent.node.children[0]
+    expect(newElement).toEqual(document.createElement('span'))
+    expect(newElement.previousSibling).toBe(null)
+  })
+
+  // it('reattaches before next sibling', async () => {
+  //   const nextNode = document.createElement('p')
+  //   parent.node.appendChild(nextNode)
+
+  //   await update.call(element, {}, options)
+
+  //   const newElement = parent.node.children[0]
+  //   expect(newElement).toEqual(document.createElement('p'))
+  //   expect(newElement.nextSibling).toBe(null)
+  // })
+
+  // it('appends to parent when no siblings exist', async () => {
+  //   await update.call(element, {}, options)
+  //   expect(parent.node.children).toHaveLength(0)
+  // })
+})

package/__tests__/children.test.js

@@ -0,0 +1,213 @@
+import { jest } from '@jest/globals'
+import { setChildren } from '../children'
+
+describe('children', () => {
+  let element, node
+
+  beforeEach(() => {
+    element = {
+      __ref: {},
+      state: {},
+      props: {},
+      call: jest.fn(),
+      removeContent: jest.fn(),
+      content: null
+    }
+    node = {}
+  })
+
+  it('handles null/undefined params', async () => {
+    const result = await setChildren(null, element, node)
+    expect(result).toBeUndefined()
+  })
+
+  it('handles direct string children', async () => {
+    const result = await setChildren('Hello World', element, node)
+    expect(result).toEqual({ tag: 'fragment', 0: { text: 'Hello World' } })
+  })
+
+  it('handles numeric children', async () => {
+    const result = await setChildren(42, element, node)
+    expect(result).toEqual({ tag: 'fragment', 0: { text: 42 } })
+  })
+
+  it('handles array of primitive values with childrenAs prop', async () => {
+    const result = await setChildren(['one', 'two'], element, node)
+
+    expect(result).toEqual({
+      tag: 'fragment',
+      0: { text: 'one' },
+      1: { text: 'two' }
+    })
+  })
+
+  it('handles array of primitive values with childrenAs state', async () => {
+    element.props.childrenAs = 'state'
+    const result = await setChildren(['one', 'two'], element, node)
+
+    expect(result).toEqual({
+      tag: 'fragment',
+      0: { state: { value: 'one' } },
+      1: { state: { value: 'two' } }
+    })
+  })
+
+  it('caches children and detects changes', async () => {
+    const children1 = [{ id: 1 }, { id: 2 }]
+    const children2 = [{ id: 1 }, { id: 2 }]
+    const children3 = [{ id: 1 }, { id: 3 }]
+
+    // First call
+    await setChildren(children1, element, node)
+    expect(element.__ref.__childrenCache).toEqual(children1)
+    expect(element.__ref.__noChildrenDifference).toBeUndefined()
+
+    // Same content, different reference
+    await setChildren(children2, element, node)
+    expect(element.__ref.__noChildrenDifference).toBe(true)
+
+    // Different content
+    await setChildren(children3, element, node)
+    expect(element.__ref.__noChildrenDifference).toBeUndefined()
+    expect(element.__ref.__childrenCache).toEqual(children3)
+  })
+
+  it('handles mixed React and normal components', async () => {
+    const mixedChildren = [
+      { type: 'div', text: 'Normal' },
+      { $$typeof: Symbol('react') },
+      { type: 'span', text: 'Another' }
+    ]
+
+    await setChildren(mixedChildren, element, node)
+
+    expect(element.call).toHaveBeenCalledWith(
+      'renderReact',
+      [mixedChildren[1]],
+      element
+    )
+  })
+
+  it('handles state-based children', async () => {
+    element.state = {
+      items: ['a', 'b'],
+      parse: () => ['parsed a', 'parsed b']
+    }
+
+    const result = await setChildren('state', element, node)
+    expect(result).toEqual({
+      tag: 'fragment',
+      0: { text: 'parsed a' },
+      1: { text: 'parsed b' }
+    })
+  })
+
+  it('handles async function parameters', async () => {
+    const asyncParam = async () => ['async1', 'async2']
+    const result = await setChildren(asyncParam, element, node)
+
+    expect(result).toEqual({
+      tag: 'fragment',
+      0: { text: 'async1' },
+      1: { text: 'async2' }
+    })
+  })
+
+  it('handles nested object structures', async () => {
+    const nestedChildren = {
+      header: { text: 'Title' },
+      content: {
+        nested: { text: 'Content' }
+      }
+    }
+
+    const result = await setChildren(nestedChildren, element, node)
+    expect(result).toEqual({
+      tag: 'fragment',
+      0: { text: 'Title' },
+      1: { nested: { text: 'Content' } }
+    })
+  })
+
+  it('handles empty arrays and objects', async () => {
+    let result = await setChildren([], element, node)
+    expect(result).toEqual({
+      tag: 'fragment'
+    })
+
+    result = await setChildren({}, element, node)
+    expect(result).toEqual({
+      tag: 'fragment'
+    })
+  })
+
+  it('handles falsy values in arrays', async () => {
+    const result = await setChildren(
+      [null, undefined, false, 0, ''],
+      element,
+      node
+    )
+    expect(result).toEqual({
+      tag: 'fragment',
+      3: { text: 0 },
+      4: { text: '' }
+    })
+  })
+
+  it('handles React components with falsy values in array', async () => {
+    const mixedChildren = [
+      null,
+      { $$typeof: Symbol('react') },
+      undefined,
+      { $$typeof: Symbol('react') },
+      false
+    ]
+
+    await setChildren(mixedChildren, element, node)
+
+    expect(element.call).toHaveBeenCalledWith(
+      'renderReact',
+      [mixedChildren[1], mixedChildren[3]],
+      element
+    )
+  })
+
+  it('handles nested state parsing', async () => {
+    element.state = {
+      nested: {
+        items: ['c', 'd']
+      }
+    }
+    element.state.nested.__proto__.parse = () => ['parsed c', 'parsed d']
+
+    const result = await setChildren('nested', element, node)
+    expect(result).toEqual({
+      tag: 'fragment',
+      0: { state: ['c', 'd'] }
+    })
+  })
+
+  it('handles mixed state and regular objects', async () => {
+    element.state = {
+      header: { parse: () => 'Header' },
+      footer: { parse: () => 'Footer' }
+    }
+
+    const result = await setChildren(
+      {
+        header: 'header',
+        content: { text: 'Content' },
+        footer: 'footer'
+      },
+      element,
+      node
+    )
+
+    expect(result).toEqual({
+      tag: 'fragment',
+      0: { text: 'header' },
+      1: { text: 'Content' },
+      2: { text: 'footer' }
+    })
+  })
+})

package/__tests__/define.test.js

@@ -0,0 +1,75 @@
+import define from '../define'
+import { REGISTRY } from '../mixins'
+
+describe('default function (registry updater)', () => {
+  let originalRegistry
+
+  beforeEach(() => {
+    // Save the original REGISTRY to restore after each test
+    originalRegistry = { ...REGISTRY }
+  })
+
+  afterEach(() => {
+    // Restore the original REGISTRY after each test
+    Object.keys(REGISTRY).forEach(key => {
+      REGISTRY[key] = originalRegistry[key]
+    })
+  })
+
+  it('should add new params to REGISTRY when overwrite is true', () => {
+    const params = { newKey: 'newValue', anotherKey: 'anotherValue' }
+    const options = { overwrite: true }
+
+    define(params, options)
+
+    expect(REGISTRY.newKey).toBe('newValue')
+    expect(REGISTRY.anotherKey).toBe('anotherValue')
+  })
+
+  it('should not modify REGISTRY when trying to overwrite existing keys without overwrite option', () => {
+    const params = { attr: 'newValue', text: 'newText' }
+
+    try {
+      define(params)
+    } catch (e) {
+      // Ignore the error
+    }
+
+    expect(REGISTRY.attr).toBe(originalRegistry.attr)
+    expect(REGISTRY.text).toBe(originalRegistry.text)
+  })
+
+  it('should overwrite existing keys when overwrite is true', () => {
+    const params = { attr: 'newValue', text: 'newText' }
+    const options = { overwrite: true }
+
+    define(params, options)
+
+    expect(REGISTRY.attr).toBe('newValue')
+    expect(REGISTRY.text).toBe('newText')
+  })
+
+  it('should handle empty params object without errors', () => {
+    const params = {}
+    const options = { overwrite: true }
+
+    expect(() => define(params, options)).not.toThrow()
+    expect(REGISTRY).toEqual(originalRegistry)
+  })
+
+  it('should handle empty options object without errors', () => {
+    const params = { newKey: 'newValue' }
+
+    expect(() => define(params, {})).not.toThrow()
+    expect(REGISTRY.newKey).toBe('newValue')
+  })
+
+  it('should not add new keys when params is empty', () => {
+    const params = {}
+    const options = { overwrite: true }
+
+    define(params, options)
+
+    expect(REGISTRY).toEqual(originalRegistry)
+  })
+})

package/__tests__/inheritStateUpdates.test.js

@@ -0,0 +1,79 @@
+import { update } from '../update'
+
+describe('update() with inheritStateUpdates', () => {
+  let element, options
+
+  beforeEach(() => {
+    element = {
+      __ref: {
+        __state: null,
+        __hasRootState: false,
+        __execProps: {},
+        __props: []
+      },
+      state: {
+        calculated: 42,
+        set: () => {
+          return true
+        }
+      },
+      parent: {
+        state: { baseState: true },
+        props: {}
+      },
+      props: {},
+      key: 'testKey'
+    }
+    options = {}
+  })
+
+  // Test 1: Continue update when state inheritance succeeds
+  it('processes full update flow when state is inherited', async () => {
+    await update.call(element, { props: { newProp: true } }, options)
+    expect(element.props.newProp).toBe(true)
+    expect(element.state.baseState).toBe(true) // Inherited from parent
+  })
+
+  // Test 2: Preserve existing state when inheritance blocked
+  it('maintains state when preventInheritedStateUpdate=true', async () => {
+    options.preventInheritedStateUpdate = true
+    element.state = { existing: 'state' }
+
+    await update.call(element, {}, options)
+    expect(element.state).toEqual({ baseState: true })
+  })
+
+  // Test 3: Execute state functions when forced
+  it('overwrites state with function result', async () => {
+    element.__ref.__state = () => ({ calculated: 42 })
+    options.execStateFunction = true
+    options.stateFunctionOverwrite = true
+
+    await update.call(element, {}, options)
+    expect(element.state.calculated).toEqual(42)
+  })
+
+  // Test 4: Block updates via beforeStateUpdate event
+  it('preserves state when beforeStateUpdate rejects', async () => {
+    element.props.onBeforeStateUpdate = () => false
+    await update.call(element, { props: { shouldChange: true } }, options)
+    expect(element.state).toEqual({ baseState: true })
+    expect(element.props.shouldChange).toBe(true)
+  })
+
+  // Test 5: Handle parent state changes
+  it('reflects parent state updates', async () => {
+    element.parent.state = { updatedParentState: true }
+    await update.call(element, {}, options)
+    expect(element.state.updatedParentState).toBe(true)
+  })
+
+  // Test 6: Maintain local state when root state exists
+  it('preserves local state when __hasRootState=true', async () => {
+    element.__ref.__hasRootState = true
+    element.state = { local: 'data' }
+
+    await update.call(element, {}, options)
+    expect(element.state.local).toBe('data')
+  })
+})

package/__tests__/renderElement.test.js

@@ -0,0 +1,131 @@
+import { jest } from '@jest/globals'
+
+describe('create()', () => {
+  let props
+  let parent
+
+  const OLD_ENV = process.env
+
+  beforeEach(() => {
+    props = {
+      __ref: { __if: false, path: [], __skipCreate: true },
+      key: 'testKey',
+      context: {
+        defaultExtends: {},
+        define: ['test']
+      },
+      scope: 'props',
+      define: ['test']
+    }
+    parent = {
+      testKey: 'parentTestKey',
+      key: 'parentKey'
+    }
+    jest.resetModules()
+    process.env = { ...OLD_ENV }
+  })
+
+  afterAll(() => {
+    process.env = OLD_ENV
+  })
+
+  test('should execute onlyResolveExtends when __skipCreate is true', async () => {
+    props.__ref.__skipCreate = true
+    props.scope = undefined
+    const { create } = await import('../create')
+    await create(props, parent, 'passedKey', {
+      onlyResolveExtends: true,
+      define: ['test']
+    })
+    expect(parent.__ref).toBeUndefined()
+    expect(parent.passedKey).toBe(props.__ref.parent.passedKey)
+  })
+
+  test('should execute onlyResolveExtends when __ref.__if is true', async () => {
+    props.__ref.__if = true
+    props.scope = 'state'
+    const { create } = await import('../create')
+    await create(props, parent, 'passedKey', {
+      onlyResolveExtends: true,
+      define: ['test']
+    })
+    expect(parent.__ref).toBeUndefined()
+    expect(parent.passedKey).toBe(props.__ref.parent.passedKey)
+  })
+
+  test('should execute onlyResolveExtends when scope is not state', async () => {
+    process.env.NODE_ENV = 'prod'
+    props.__ref = undefined
+    const { create } = await import('../create')
+    await create(props, parent, 'passedKey', { onlyResolveExtends: true })
+    expect(parent.__ref).toBeUndefined()
+    expect(parent.passedKey).toBe(props.__ref.parent.passedKey)
+  })
+
+  test('should execute catch statement when __ref is undefined', async () => {
+    process.env.NODE_ENV = 'prod'
+    props.__ref = undefined
+    const { create } = await import('../create')
+    await create(props, parent, 'passedKey')
+    expect(parent.__ref).toBeUndefined()
+    expect(parent.passedKey).toBe(props.__ref.parent.passedKey)
+  })
+
+  test('should attaches element to parent when ref.__if is false', async () => {
+    process.env.NODE_ENV = 'prod'
+    const { create } = await import('../create')
+    await create(props, parent, 'passedKey')
+    expect(parent.__ref).toBeUndefined()
+    expect(parent.passedKey).toBe(props.__ref.parent.passedKey)
+  })
+
+  test('should attach element to parent when ref.__if is true', async () => {
+    process.env.NODE_ENV = 'prod'
+    props.__if = true
+    const { create } = await import('../create')
+    await create(props, parent, 'passedKey')
+    expect(parent.testKey).toBe('parentTestKey')
+    expect(parent.passedKey).toBe(props.__ref.parent.passedKey)
+  })
+
+  test('skips createNestedChild when __uniqId exists', async () => {
+    process.env.NODE_ENV = 'prod'
+    props.__ref = { __uniqId: 'existing-id', path: [] }
+    const { create } = await import('../create')
+    await create(props, {}, 'passedKey')
+    expect(props.__ref.__uniqId).toBeDefined()
+  })
+
+  test('skips createNestedChild when infinite loop detected', async () => {
+    process.env.NODE_ENV = 'prod'
+    props.__ref = { path: ['loop-path'], __uniqId: undefined }
+    const { create } = await import('../create')
+    await create(props, {}, 'passedKey')
+    expect(props.__ref.__uniqId).toBeDefined()
+  })
+
+  test('should modifies path containing ComponentsGrid', async () => {
+    process.env.NODE_ENV = 'prod'
+    props.__ref = { path: ['ComponentsGrid', 'x', 'y', 'z'] }
+    const { create } = await import('../create')
+    await create(props, {}, ['ComponentsGrid', 'x', 'y', 'z'])
+    expect(props.__ref.path).toEqual(['ComponentsGrid,x,y,z'])
+  })
+
+  test('should modifies path containing demoComponent', async () => {
+    process.env.NODE_ENV = 'prod'
+    props.__ref = { path: ['demoComponent', 'a', 'b', 'c'] }
+    const { create } = await import('../create')
+    await create(props, {}, ['demoComponent', 'a', 'b', 'c'])
+    expect(props.__ref.path).toEqual(['demoComponent,a,b,c'])
+  })
+
+  test('uses element.key when key property is missing', async () => {
+    process.env.NODE_ENV = 'prod'
+    props.__ref = { __if: false, path: [] }
+    props.key = 'fallbackKey'
+    const { create } = await import('../create')
+    await create(props, parent, null)
+    expect(props.__ref.parent.fallbackKey).toBeDefined()
+  })
+})

package/__tests__/resetElement.test.js

@@ -0,0 +1,44 @@
+import { resetContent } from '../set'
+
+describe('resetContent', () => {
+  let element, ref
+
+  beforeEach(() => {
+    ref = {
+      contentElementKey: 'content'
+    }
+    element = {
+      __ref: ref,
+      content: { node: document.createElement('div') },
+      node: document.createElement('div'),
+      context: {}
+    }
+  })
+
+  it('should update contentElementKey from options', async () => {
+    await resetContent({}, element, { contentElementKey: 'mainContent' })
+
+    expect(ref.contentElementKey).toBe('mainContent')
+    expect(element.mainContent).toBeDefined()
+  })
+
+  it('should merge options correctly', async () => {
+    await resetContent({}, element, { customOption: true })
+
+    expect(element.content).toEqual(
+      expect.objectContaining({
+        // Verify options merging through observable behavior
+        // (this assertion pattern would need actual create() implementation details)
+      })
+    )
+  })
+
+  it('should maintain context through reset', async () => {
+    const originalContext = element.context
+
+    await resetContent({}, element, {})
+
+    expect(element.context).toBe(originalContext)
+    expect(element.content.context).toBe(originalContext)
+  })
+})