million/dist/million.js

var Million = (function (exports) {
  'use strict';

  /**
   * Field on DOM node that stores the previous VNode
   */
  const OLD_VNODE_FIELD = '__m_old_vnode';

  /**
   * Creates an element from a VNode
   * @param {VNode} vnode - VNode to convert to HTMLElement or Text
   * @param {boolean} attachField - Attach OLD_VNODE_FIELD
   * @returns {HTMLElement|Text}
   */
  const createElement = (vnode, attachField = true) => {
      if (typeof vnode === 'string')
          return document.createTextNode(vnode);
      const el = document.createElement(vnode.tag);
      if (vnode.props) {
          for (const name of Object.keys(vnode.props)) {
              el[name] = vnode.props[name];
          }
      }
      if (vnode.children) {
          for (let i = 0; i < vnode.children.length; ++i) {
              el.appendChild(createElement(vnode.children[i]));
          }
      }
      if (attachField)
          el[OLD_VNODE_FIELD] = vnode;
      return el;
  };

  /**
   * Attaches ns props to svg element
   * @param {VElement} vnode - SVG VNode
   * @returns {VElement}
   */
  const svg = (vnode) => {
      if (!vnode.props)
          vnode.props = {};
      ns(vnode.tag, vnode.props, vnode.children);
      return vnode;
  };
  const ns = (tag, props, children) => {
      props.ns = 'http://www.w3.org/2000/svg';
      if (children && tag !== 'foreignObject') {
          children.forEach((child) => {
              if (typeof child === 'string')
                  return;
              if (child.props)
                  ns(child.tag, child.props, child.children);
          });
      }
  };
  /**
   * Generates a style string based on a styleObject
   * @param {object} styleObject - Object with styles
   * @returns
   */
  const style = (styleObject) => {
      return Object.entries(styleObject)
          .map((style) => style.join(':'))
          .join(';');
  };
  /**
   * Generates a className string based on a classObject
   * @param {object} classObject - Object with classes paired with boolean values to toggle
   * @returns {string}
   */
  const className = (classObject) => {
      return Object.keys(classObject)
          .filter((className) => classObject[className])
          .join(' ');
  };
  /**
   * Helper method for creating a VNode
   * @param {string} tag - The tagName of an HTMLElement
   * @param {VProps=} props - DOM properties and attributes of an HTMLElement
   * @param {VNode[]=} children - Children of an HTMLElement
   * @param {VFlags=} flag - Compiler flag for VNode
   * @returns {VElement}
   */
  const m = (tag, props, children, flag) => {
      let key;
      if (props?.key) {
          key = props.key;
          delete props.key;
      }
      return {
          tag,
          props,
          children,
          key,
          flag,
      };
  };

  var VFlags;
  (function (VFlags) {
      VFlags[VFlags["NO_CHILDREN"] = 0] = "NO_CHILDREN";
      VFlags[VFlags["ONLY_TEXT_CHILDREN"] = 1] = "ONLY_TEXT_CHILDREN";
      VFlags[VFlags["ANY_CHILDREN"] = 2] = "ANY_CHILDREN";
  })(VFlags || (VFlags = {}));
  var VActions;
  (function (VActions) {
      VActions[VActions["INSERT_TOP"] = 0] = "INSERT_TOP";
      VActions[VActions["INSERT_BOTTOM"] = 1] = "INSERT_BOTTOM";
      VActions[VActions["DELETE_TOP"] = 2] = "DELETE_TOP";
      VActions[VActions["DELETE_BOTTOM"] = 3] = "DELETE_BOTTOM";
      VActions[VActions["ANY_ACTION"] = 4] = "ANY_ACTION";
  })(VActions || (VActions = {}));

  /**
   * Diffs two VNode props and modifies the DOM node based on the necessary changes
   * @param {HTMLElement} el - Target element to be modified
   * @param {VProps} oldProps - Old VNode props
   * @param {VProps} newProps - New VNode props
   */
  /* istanbul ignore next */
  const patchProps = (el, oldProps, newProps) => {
      const cache = [];
      for (const oldPropName of Object.keys(oldProps)) {
          const newPropValue = newProps[oldPropName];
          if (newPropValue) {
              el[oldPropName] = newPropValue;
              cache.push(oldPropName);
          }
          else {
              el.removeAttribute(oldPropName);
              delete el[oldPropName];
          }
      }
      for (const newPropName of Object.keys(newProps)) {
          if (!cache.includes(newPropName)) {
              el[newPropName] = newProps[newPropName];
          }
      }
  };
  /**
   * Diffs two VNode children and modifies the DOM node based on the necessary changes
   * @param {HTMLElement} el - Target element to be modified
   * @param {VNode[]} oldVNodeChildren - Old VNode children
   * @param {VNode[]} newVNodeChildren - New VNode children
   */
  const patchChildren = (el, oldVNodeChildren, newVNodeChildren) => {
      const childNodes = [...el.childNodes];
      /* istanbul ignore next */
      if (oldVNodeChildren) {
          for (let i = 0; i < oldVNodeChildren.length; ++i) {
              patch(childNodes[i], newVNodeChildren[i], oldVNodeChildren[i]);
          }
      }
      /* istanbul ignore next */
      const slicedNewVNodeChildren = newVNodeChildren.slice(oldVNodeChildren?.length ?? 0);
      for (let i = 0; i < slicedNewVNodeChildren.length; ++i) {
          el.appendChild(createElement(slicedNewVNodeChildren[i], false));
      }
  };
  const replaceElementWithVNode = (el, newVNode) => {
      if (typeof newVNode === 'string') {
          el.textContent = newVNode;
          return el;
      }
      else {
          const newElement = createElement(newVNode);
          el.replaceWith(newElement);
          return newElement;
      }
  };
  /**
   * Diffs two VNodes and modifies the DOM node based on the necessary changes
   * @param {HTMLElement|Text} el - Target element to be modified
   * @param {VNode} newVNode - New VNode
   * @param {VNode=} prevVNode - Previous VNode
   * @returns {HTMLElement|Text}
   */
  const patch = (el, newVNode, prevVNode) => {
      if (!newVNode) {
          el.remove();
          return el;
      }
      const oldVNode = prevVNode ?? el[OLD_VNODE_FIELD];
      const hasString = typeof oldVNode === 'string' || typeof newVNode === 'string';
      if (hasString && oldVNode !== newVNode)
          return replaceElementWithVNode(el, newVNode);
      if (!hasString) {
          if ((!oldVNode?.key && !newVNode?.key) ||
              oldVNode?.key !== newVNode?.key) {
              if (oldVNode?.tag !== newVNode?.tag &&
                  !newVNode.children &&
                  !newVNode.props) {
                  // newVNode has no props/children is replaced because it is generally
                  // faster to create a empty HTMLElement rather than iteratively/recursively
                  // remove props/children
                  return replaceElementWithVNode(el, newVNode);
              }
              if (oldVNode && !(el instanceof Text)) {
                  patchProps(el, oldVNode.props || {}, newVNode.props || {});
                  switch (newVNode.flag) {
                      case VFlags.NO_CHILDREN: {
                          el.textContent = '';
                          break;
                      }
                      case VFlags.ONLY_TEXT_CHILDREN: {
                          el.textContent = newVNode.children.join('');
                          break;
                      }
                      default: {
                          const [action, numberOfNodes] = newVNode.action ?? [VActions.ANY_ACTION, 0];
                          switch (action) {
                              case VActions.INSERT_TOP: {
                                  for (let i = numberOfNodes - 1; i >= 0; --i) {
                                      el.insertBefore(createElement(newVNode.children[i]), el.firstChild);
                                  }
                                  break;
                              }
                              case VActions.INSERT_BOTTOM: {
                                  for (let i = 0; i < numberOfNodes; i++) {
                                      el.appendChild(createElement(newVNode.children[i]));
                                  }
                                  break;
                              }
                              case VActions.DELETE_TOP: {
                                  for (let i = numberOfNodes - 1; i >= 0; --i) {
                                      el.removeChild(el.firstChild);
                                  }
                                  break;
                              }
                              case VActions.DELETE_BOTTOM: {
                                  for (let i = 0; i < numberOfNodes; i++) {
                                      el.removeChild(el.lastChild);
                                  }
                                  break;
                              }
                              default: {
                                  patchChildren(el, oldVNode.children || [], newVNode.children);
                                  break;
                              }
                          }
                          break;
                      }
                  }
              }
          }
      }
      if (!prevVNode)
          el[OLD_VNODE_FIELD] = newVNode;
      return el;
  };

  exports.OLD_VNODE_FIELD = OLD_VNODE_FIELD;
  exports.className = className;
  exports.createElement = createElement;
  exports.m = m;
  exports.patch = patch;
  exports.patchChildren = patchChildren;
  exports.patchProps = patchProps;
  exports.style = style;
  exports.svg = svg;

  Object.defineProperty(exports, '__esModule', { value: true });

  return exports;

}({}));
ts.createElement = createElement;
  exports.m = m;
  exports.patch = patch;
  exports.patchChildren = patchChildren;
  exports.patchProps = patchProps;
  exports.style = style;
  exports.svg = svg;

  Object.defineProperty(exports, '__esModule', { value: true });

})));