@domql/element 3.1.2 → 3.2.7

package/dist/esm/__tests__/throughUpdatedDefine.test.js

@@ -1,69 +0,0 @@
-import { throughUpdatedDefine } from "../iterate";
-describe("throughUpdatedDefine", () => {
-  let element, ref;
-  beforeEach(() => {
-    ref = {
-      __exec: {},
-      __defineCache: {}
-    };
-    element = {
-      __ref: ref,
-      define: {},
-      state: { testState: true },
-      context: { testContext: true }
-    };
-  });
-  it("should merge local and global define objects", async () => {
-    element.define = { localProp: () => "local" };
-    element.context.define = { globalProp: () => "global" };
-    await throughUpdatedDefine(element);
-    expect(element.localProp).toBe("local");
-    expect(element.globalProp).toBe("global");
-  });
-  it("should update element properties using cached exec functions", async () => {
-    ref.__exec.testProp = () => "cached value";
-    element.define.testProp = (cached) => `updated ${cached}`;
-    await throughUpdatedDefine(element);
-    expect(element.testProp).toBe("updated cached value");
-    expect(ref.__defineCache.testProp).toBe("cached value");
-  });
-  it("should handle non-function cached values", async () => {
-    ref.__defineCache.testProp = "static value";
-    element.define.testProp = (cached) => `updated ${cached}`;
-    await throughUpdatedDefine(element);
-    expect(element.testProp).toBe("updated static value");
-  });
-  it("should skip updates for undefined or null results", async () => {
-    ref.__exec.testProp = () => "cached value";
-    element.define.testProp = () => null;
-    element.testProp = "original value";
-    await throughUpdatedDefine(element);
-    expect(element.testProp).toBe("original value");
-  });
-  it("should handle empty define objects", async () => {
-    const originalElement = { ...element };
-    await throughUpdatedDefine(element);
-    expect(element).toEqual(originalElement);
-  });
-  it("should pass correct arguments to define functions", async () => {
-    element.define.testProp = (cached, el, state, context) => ({
-      cachedMatch: cached === "cached value",
-      elMatch: el === element,
-      stateMatch: state === element.state,
-      contextMatch: context === element.context
-    });
-    ref.__defineCache.testProp = "cached value";
-    await throughUpdatedDefine(element);
-    expect(element.testProp).toEqual({
-      cachedMatch: true,
-      elMatch: true,
-      stateMatch: true,
-      contextMatch: true
-    });
-  });
-  it("should return an empty changes object", async () => {
-    element.define.testProp = () => "updated value";
-    const changes = await throughUpdatedDefine(element);
-    expect(changes).toEqual({});
-  });
-});

package/dist/esm/__tests__/throughUpdatedExec.test.js

@@ -1,84 +0,0 @@
-import { throughUpdatedExec } from "../iterate";
-describe("throughUpdatedExec", () => {
-  let element, ref;
-  beforeEach(() => {
-    ref = {
-      __exec: {},
-      __defineCache: {}
-    };
-    element = {
-      __ref: ref,
-      state: { testState: true },
-      context: { testContext: true }
-    };
-  });
-  it("should skip execution for params in __defineCache", () => {
-    ref.__defineCache.cachedParam = true;
-    ref.__exec.cachedParam = () => "should not execute";
-    element.cachedParam = "original";
-    const changes = throughUpdatedExec(element);
-    expect(element.cachedParam).toBe("original");
-    expect(changes).toEqual({});
-  });
-  it("should update element properties when newExec differs from current value", () => {
-    ref.__exec.testParam = () => "new value";
-    element.testParam = "old value";
-    const changes = throughUpdatedExec(element);
-    expect(element.testParam).toBe("new value");
-    expect(changes).toEqual({ testParam: "old value" });
-  });
-  it("should overwrite text property for nodes when exec returns string or number", () => {
-    const node = { node: true, text: "old text" };
-    ref.__exec.testParam = () => "new text";
-    element.testParam = node;
-    const changes = throughUpdatedExec(element);
-    expect(element.testParam.text).toBe("new text");
-    expect(changes).toEqual({});
-  });
-  it("should handle component naming matches and overwrite with context component", () => {
-    const contextComponent = { extends: "Component", prop: "value" };
-    element.context.components = { TestComponent: contextComponent };
-    ref.__exec.TestComponent = () => contextComponent;
-    element.TestComponent = { oldProp: "oldValue" };
-    const changes = throughUpdatedExec(element);
-    expect(element.TestComponent).toEqual({
-      oldProp: "oldValue",
-      prop: "value"
-    });
-    expect(changes).toEqual({});
-  });
-  it("should not update element properties when newExec matches current value", () => {
-    ref.__exec.testParam = () => "same value";
-    element.testParam = "same value";
-    const changes = throughUpdatedExec(element);
-    expect(element.testParam).toBe("same value");
-    expect(changes).toEqual({});
-  });
-  it("should handle non-string/non-number exec returns for non-node properties", () => {
-    const newValue = { complex: "object" };
-    ref.__exec.testParam = () => newValue;
-    element.testParam = "old value";
-    const changes = throughUpdatedExec(element);
-    expect(element.testParam).toBe(newValue);
-    expect(changes).toEqual({ testParam: "old value" });
-  });
-  it("should return an empty changes object when no updates occur", () => {
-    ref.__exec.testParam = () => "same value";
-    element.testParam = "same value";
-    const changes = throughUpdatedExec(element);
-    expect(changes).toEqual({});
-  });
-  it("should handle multiple properties and return correct changes", () => {
-    ref.__exec.param1 = () => "new value 1";
-    ref.__exec.param2 = () => "new value 2";
-    element.param1 = "old value 1";
-    element.param2 = "old value 2";
-    const changes = throughUpdatedExec(element);
-    expect(element.param1).toBe("new value 1");
-    expect(element.param2).toBe("new value 2");
-    expect(changes).toEqual({
-      param1: "old value 1",
-      param2: "old value 2"
-    });
-  });
-});

package/dist/esm/__tests__/tree.test.js

@@ -1,11 +0,0 @@
-import { ROOT, TREE } from "../tree";
-describe("ROOT/TREE initialization and report()", () => {
-  it("initializes ROOT with :root key and document.body node", () => {
-    expect(ROOT.key).toBe(":root");
-    expect(ROOT.node).toBe(document.body);
-  });
-  it("assigns TREE to reference ROOT", () => {
-    expect(TREE).toBe(ROOT);
-    expect(TREE.node).toBe(document.body);
-  });
-});

package/dist/esm/__tests__/update.test.js

@@ -1,222 +0,0 @@
-import { update } from "../update";
-describe("update()", () => {
-  let element, params, opts;
-  beforeEach(() => {
-    element = {
-      __ref: {
-        __if: true,
-        __execProps: {},
-        __exec: {},
-        __defineCache: {},
-        __propsStack: [],
-        __props: [],
-        __state: "state"
-      },
-      state: "string",
-      props: {},
-      parent: {
-        props: {}
-      },
-      context: {},
-      define: {},
-      node: document.createElement("div"),
-      key: "testElement",
-      on: {},
-      update
-    };
-    opts = {
-      preventUpdate: [],
-      preventDefineUpdate: [],
-      preventBeforeStateUpdateListener: false,
-      preventListeners: false,
-      preventStateUpdateListener: false
-    };
-    params = {};
-  });
-  it("does not modify opts when params and opts are empty", async () => {
-    await element.update({}, opts);
-    expect(opts).toEqual({
-      calleeElement: false,
-      cleanExec: true,
-      currentSnapshot: false,
-      exclude: [],
-      preventRecursive: false,
-      stackChanges: false,
-      preventUpdate: [],
-      preventDefineUpdate: [],
-      preventBeforeStateUpdateListener: false,
-      preventListeners: false,
-      preventStateUpdateListener: false
-    });
-  });
-  it("initializes options with UPDATE_DEFAULT_OPTIONS when opts is empty", async () => {
-    await element.update({}, opts);
-    expect(opts.calleeElement).toBe(false);
-    expect(element.__ref).toBeDefined();
-  });
-  it("merges opts with UPDATE_DEFAULT_OPTIONS using deepMerge", async () => {
-    opts.customOption = true;
-    await element.update({}, opts);
-    expect(opts.customOption).toBe(true);
-  });
-  it("converts string params to { text: params }", async () => {
-    await element.update("testString", opts);
-    expect(element.text).toBe("testString");
-  });
-  it("converts number params to { text: params }", async () => {
-    await element.update(123, opts);
-    expect(element.text).toBe(123);
-  });
-  it("returns early if preventInheritAtCurrentState matches element", async () => {
-    opts.preventInheritAtCurrentState = { __element: element };
-    await element.update({}, opts);
-    expect(element.__ref.__currentSnapshot).toBe(6);
-  });
-  it("initializes __ref if not present", async () => {
-    delete element.__ref;
-    await element.update({}, opts);
-    expect(element.__ref).toBeDefined();
-  });
-  it("merges options with UPDATE_DEFAULT_OPTIONS when exclude is missing", async () => {
-    await element.update({}, opts);
-    expect(opts.exclude).toBeDefined();
-  });
-  it("does not throw or modify opts when params is undefined", async () => {
-    await element.update(void 0, opts);
-    expect(opts).toEqual({
-      calleeElement: false,
-      cleanExec: true,
-      currentSnapshot: false,
-      exclude: [],
-      preventRecursive: false,
-      preventUpdate: [],
-      preventDefineUpdate: [],
-      stackChanges: false,
-      preventBeforeStateUpdateListener: false,
-      preventListeners: false,
-      preventStateUpdateListener: false
-    });
-  });
-  it("does not throw when opts is undefined", async () => {
-    await element.update({}, void 0);
-    expect(element.__ref).toBeDefined();
-  });
-  it("does not throw when opts is null", async () => {
-    await element.update({}, null);
-    expect(element.__ref).toBeDefined();
-  });
-  it("does not modify the params object", async () => {
-    params = { key: "value" };
-    await element.update(params, opts);
-    expect(params).toEqual({ key: "value" });
-  });
-  it("does modify opts when params is an empty object", async () => {
-    await element.update({}, opts);
-    expect(opts).toEqual({
-      calleeElement: false,
-      cleanExec: true,
-      currentSnapshot: false,
-      exclude: [],
-      preventRecursive: false,
-      stackChanges: false,
-      preventUpdate: [],
-      preventDefineUpdate: [],
-      preventBeforeStateUpdateListener: false,
-      preventListeners: false,
-      preventStateUpdateListener: false
-    });
-  });
-  it("moves regular properties to element.props", async () => {
-    params = { props: { title: "Test", description: "Content" } };
-    await element.update(params, opts);
-    expect(element.props).toEqual({
-      title: "Test",
-      description: "Content"
-    });
-    expect(element.title).toBeUndefined();
-  });
-  it("keeps element-rooted properties", async () => {
-    params = { Header: {}, Footer: {}, 0: "index" };
-    await element.update(params, opts);
-    expect(element.Header).toBeDefined();
-    expect(element.Footer).toBeDefined();
-    expect(element["0"]).toBe("index");
-    expect(element.props).toEqual({});
-  });
-  it("preserves built-in properties on element", async () => {
-    params = { props: { className: "container", hidden: true } };
-    await element.update(params, opts);
-    expect(element.props.className).toBe("container");
-    expect(element.props.hidden).toBe(true);
-    expect(element.props).toEqual({ className: "container", hidden: true });
-  });
-  it("moves element-like properties from props to root", async () => {
-    params = { props: { Header: {} } };
-    await element.update(params, opts);
-    expect(element.Header).toBeDefined();
-    expect(element.props.Header).toBeUndefined();
-  });
-  it("exits early when inheritStateUpdates returns false", async () => {
-    element.__ref.__stateBlocked = true;
-    await element.update({ props: { shouldChange: true } }, opts);
-    expect(element.props.shouldChange).toBe(true);
-    expect(element.__ref.__stateBlocked).toBe(true);
-  });
-  it("exits early when checkIfOnUpdate fails", async () => {
-    element.parent.props.ifCondition = false;
-    await element.update({ state: { newState: true } }, opts);
-    expect(element.state.newState).toBe(true);
-  });
-  it("updates props from parent key match", async () => {
-    element.parent.props.testKey = { inherited: true };
-    await element.update({}, opts);
-    expect(element.props.inherited).toBeUndefined();
-  });
-  it("updates props when functions exist in __props", async () => {
-    element.__ref.__props.push(() => "dynamic");
-    await element.update({}, opts);
-    expect(element.props).toEqual(expect.any(Object));
-  });
-  it("skips props update when preventPropsUpdate=true", async () => {
-    opts.preventPropsUpdate = true;
-    opts.preventUpdateAfter = true;
-    element.parent.props.testKey = { shouldExist: true };
-    await element.update({}, opts);
-    expect(element.props.shouldExist).toBeUndefined();
-  });
-  it("should not skips props update when preventPropsUpdate=false", async () => {
-    opts.preventPropsUpdate = false;
-    opts.lazyLoad = true;
-    opts.onEachUpdate = () => {
-      return true;
-    };
-    element.parent.props.testKey = { shouldExist: true };
-    element.__ref.__propsStack = [];
-    element.__ref.__if = true;
-    element.off = { text: "off" };
-    await element.update({}, opts);
-    expect(element.props.shouldExist).toBeUndefined();
-  });
-  it("should set preventUpdateAfterCount to 1 when is not a number", async () => {
-    opts.preventPropsUpdate = true;
-    opts.preventUpdateAfter = 2;
-    opts.preventUpdateAfterCount = void 0;
-    element.parent.props.testKey = { shouldExist: true };
-    await element.update({}, opts);
-    expect(element.props.shouldExist).toBeUndefined();
-  });
-  it("processes parent.childProps", async () => {
-    element.parent.props.childProps = { global: true };
-    await element.update({}, opts);
-    expect(element.props.global).toBe(true);
-  });
-  it("processes function props", async () => {
-    await element.update({ props: { calc: () => 42 } }, opts);
-    expect(element.props.calc()).toBe(42);
-  });
-  it("returns element when beforeUpdate rejects", async () => {
-    element.on.beforeUpdate = () => false;
-    const result = await element.update({}, opts);
-    expect(result).toBe(element);
-  });
-});

package/methods/set.js

@@ -1,63 +0,0 @@
-'use strict'
-
-import { merge, overwrite } from '@domql/utils'
-
-import { set, reset, updateContent, removeContent } from '../set.js'
-import { update } from '../update.js'
-
-import {
-  call,
-  error,
-  getPath,
-  getRef,
-  keys,
-  log,
-  lookdown,
-  lookdownAll,
-  lookup,
-  nextElement,
-  parse,
-  parseDeep,
-  previousElement,
-  remove,
-  setNodeStyles,
-  setProps,
-  spotByPath,
-  variables,
-  verbose,
-  warn
-} from '@domql/utils/methods'
-
-export const addMethods = (element, parent, options = {}) => {
-  const proto = {
-    set,
-    reset,
-    update,
-    variables,
-    remove,
-    updateContent,
-    removeContent,
-    setProps,
-    lookup,
-    lookdown,
-    lookdownAll,
-    getRef,
-    getPath,
-    setNodeStyles,
-    spotByPath,
-    parse,
-    parseDeep,
-    keys,
-    nextElement,
-    previousElement,
-    log,
-    verbose,
-    warn,
-    error,
-    call
-  }
-  if (element.context.methods) {
-    ;(options.strict ? merge : overwrite)(proto, element.context.methods)
-  }
-  Object.setPrototypeOf(element, proto)
-}

package/methods/v2.js

@@ -1,83 +0,0 @@
-'use strict'
-
-import { isDefined, isFunction, isObjectLike } from '@domql/utils'
-
-export const defineSetter = (element, key, get, set) =>
-  Object.defineProperty(element, key, { get, set })
-
-export const keys = function () {
-  const element = this
-  const keys = []
-  for (const param in element) {
-    // if (REGISTRY[param] && !parseFilters.elementKeys.includes(param)) { continue }
-    keys.push(param)
-  }
-  return keys
-}
-
-export const parse = function (excl = []) {
-  const element = this
-  const obj = {}
-  const keyList = keys.call(element)
-  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 && 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 (excl = []) {
-  const element = this
-  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
-}
-
-export const log = function (...args) {
-  const element = this
-  const { __ref } = element
-  console.group(element.key)
-  if (args.length) {
-    args.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
-  } else {
-    console.log(__ref?.path)
-    const keys = element.keys()
-    keys.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
-  }
-  console.groupEnd(element.key)
-  return element
-}
-
-export const nextElement = function () {
-  const element = this
-  const { key, parent } = element
-  const { __children } = parent.__ref
-
-  const currentIndex = __children.indexOf(key)
-  const nextChild = __children[currentIndex + 1]
-
-  return parent[nextChild]
-}
-
-export const previousElement = function (el) {
-  const element = el || this
-  const { key, parent } = element
-  const { __children } = parent.__ref
-
-  if (!__children) return
-
-  const currentIndex = __children.indexOf(key)
-  return parent[__children[currentIndex - 1]]
-}

package/mixins/attr.js

@@ -1,32 +0,0 @@
-'use strict'
-
-import { deepMerge, exec, isNot, isNull, isUndefined } from '@domql/utils'
-import { report } from '@domql/report'
-
-/**
- * Recursively add attributes to a DOM node
- */
-export function attr (params, element, node) {
-  const { __ref: ref, props } = element
-  const { __attr } = ref
-  if (isNot('object')) report('HTMLInvalidAttr', params)
-  if (params) {
-    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)
-      __attr[attr] = val
-    }
-  }
-}
-
-export default attr

package/mixins/classList.js

@@ -1,54 +0,0 @@
-'use strict'
-
-import { exec, isObject, isString } from '@domql/utils'
-
-export const assignKeyAsClassname = element => {
-  const { key } = element
-  if (element.classlist === true) element.classlist = key
-  else if (
-    !element.classlist &&
-    typeof key === 'string' &&
-    key.charAt(0) === '_' &&
-    key.charAt(1) !== '_'
-  ) {
-    element.classlist = key.slice(1)
-  }
-}
-
-// stringifies class object
-export const classify = (obj, element) => {
-  let className = ''
-  for (const item in obj) {
-    const param = obj[item]
-    if (typeof param === 'boolean' && param) className += ` ${item}`
-    else if (typeof param === 'string') className += ` ${param}`
-    else if (typeof param === 'function') {
-      className += ` ${exec(param, element)}`
-    }
-  }
-  return className
-}
-
-export const classList = (params, element) => {
-  if (!params) return
-  const { key } = element
-  if (params === true) params = element.classlist = { key }
-  if (isString(params)) params = element.classlist = { default: params }
-  if (isObject(params)) params = classify(params, element)
-  // TODO: fails on string
-  const className = params.replace(/\s+/g, ' ').trim()
-  return className
-}
-
-// LEGACY (still needed in old domql)
-export const applyClassListOnNode = (params, element, node) => {
-  const className = classList(params, element)
-  node.classList = className
-  return className
-}
-
-export function applyClasslist (params, element, node) {
-  applyClassListOnNode(params, element, node)
-}
-
-export default applyClasslist

package/mixins/data.js

@@ -1,26 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-'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(param, element) || exec(element?.props?.html, element)
-  const { __ref } = element
-  if (prop !== __ref.__html) {
-    // const parser = new window.DOMParser()
-    // param = parser.parseFromString(param, 'text/html')
-    if (node.nodeName === 'SVG') node.textContent = prop
-    else node.innerHTML = prop
-    __ref.__html = prop
-  }
-}
-
-export default html

package/mixins/index.js

@@ -1,23 +0,0 @@
-'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'