reblendjs/lib/internal/PropertyUtil.js

This is build using react way of handling dom but with web components

import { attributeName, shouldUseSetAttribute } from 'reblend-typing';
import { NodeUtil } from './NodeUtil';
import { EventUtil } from './EventUtil';
import { ElementUtil } from './ElementUtil';
/* eslint-disable @typescript-eslint/no-explicit-any */
export class PropertyUtil {
  /**
   * Sets properties on the target component, updating attributes and handling special cases like events and style.
   *
   * @param {ReblendTyping.IAny} props - The properties to set.
   * @param {ReblendTyping.Component} to - The target component to apply the properties to.
   * @param {boolean} init - Whether this is an initial setting of properties.
   */
  static async setProps(props, to, init) {
    if (!props || !to) {
      return;
    }
    if (init && to.initProps) {
      await to.initProps(props);
    } else {
      to.props = {
        ...(to.props || {}),
        ...(props || {})
      };
    }
    if (NodeUtil.isReblendRenderedNodeStandard(to)) {
      for (const propName in props) {
        const _attributeName = attributeName(propName);
        const propValue = props[propName];
        if (propName == 'dangerouslySetInnerHTML') {
          to.innerHTML = propValue?.__html;
        } else if (propName.startsWith('on')) {
          to[_attributeName] = EventUtil.fn(propValue);
        } else {
          if (_attributeName === 'style') {
            to.addStyle(propValue);
          } else {
            const _shouldUseSetAttribute = shouldUseSetAttribute(_attributeName);
            try {
              if (_shouldUseSetAttribute) {
                ElementUtil.setAttributesWithNamespace(to, {
                  [_attributeName]: propValue
                });
              } else {
                to[_attributeName] = propValue;
              }
            } catch (error) {
              /* empty */
            }
          }
        }
      }
    }
    if (init && to.initState) {
      to.initStateRunning = true;
      await to.initState();
      to.initStateRunning = false;
    }
  }
  /**
   * Removes specified properties from the `to` component and removes the corresponding attributes.
   * If a property is to be removed using `setAttribute`, it will also be removed from `props`.
   *
   * @param {ReblendTyping.IAny} props - The properties to remove from the component.
   * @param {ReblendTyping.Component} to - The target component from which to remove the properties.
   */
  static removeProps(props, to) {
    if (props && to) {
      to.props = {
        ...to.props,
        ...props
      };
      for (const propName in props) {
        const _attributeName = attributeName(propName);
        const _shouldUseSetAttribute = shouldUseSetAttribute(propName);
        try {
          if (_shouldUseSetAttribute) {
            to.removeAttribute(_attributeName);
            delete to?.props[_attributeName];
          } else {
            to[_attributeName] = props[propName];
            delete to[_attributeName];
          }
        } catch (error) {
          /* empty */
        }
      }
    }
  }
}