JSFiddle - React, Tailwind, and code Playground

by loubserian

HTML

<div>
</div>
<script>
  var HotJS = (rootEl, documentRef) => {
    var _root = rootEl || document
    var _document = documentRef || document

    var hotElements = {};
    const target = {
      flush: (keys) => {
        keys.forEach((key) => {
          const item = hotElements[key];
          let element = _document.createElement(item.type);
          mergeDeep(element, item);
          renderTree(item, element);
          _root.getElementById(key).replaceWith(element);
        });
      },
    };

    const isObject = (item) => {
      return item && typeof item === "object" && !Array.isArray(item);
    };

    const mergeDeep = (target, ...sources) => {
      if (!sources.length) return target;
      const source = sources.shift();

      if (isObject(target) && isObject(source)) {
        for (const key in source) {
          if (typeof source[key] === 'function' && (key === 'className' || key === 'style')) {
            if (key === 'style') {
              if (!target[key]) Object.assign(target, { [key]: {} });
              mergeDeep(target[key], source[key]() );
            } else {
              Object.assign(target, { [key]: source[key]() });
            }
          } else if (isObject(source[key])) {
            if (!target[key]) Object.assign(target, { [key]: {} });
            mergeDeep(target[key], source[key]);
          } else {
            Object.assign(target, { [key]: source[key] });
          }
        }
      }

      return mergeDeep(target, ...sources);
    };

    const renderTree = (child, element) => {
      if (typeof child === "function") {
        renderTree(child(), element);
      } else if (Array.isArray(child)) {
        child.forEach((c) => renderTree(c, element));
      } else if (child.nodeType === Node.ELEMENT_NODE) {
        element.appendChild(child);
      } else if (typeof child === 'object') {
        renderTree(child.child, element);
      } else {
        element.innerHTML = `${child}`;
      }
    };

    const...