Function whyDidYouUpdate

src/index.js:60–194

(React)

// takes in react component, triggers all other logic, is exported out
var whyDidYouUpdate = function whyDidYouUpdate(React) {

  // event listener for load page
  window.addEventListener('load', () => {
    // calculation for total time taken to render the webpage
    const startLoadTime = window.performance.timing.loadEventStart
    const endLoadTime = window.performance.timing.domLoading
    const deltaTime = startLoadTime - endLoadTime;

    window.data.time = deltaTime + 'ms';
  });

  /**
   * function handler for click, dbclick, and drag
   */
  function handleMouseEvents(e) {
    let localName = e.target.localName;
    let innerText = '';

    // description string for click elements
    function setInnerText(type, targetInfo) {
      innerText = type +': ' + targetInfo;
    }
    // if clicked element is '<button>', check innerText, then id, then className for descriptor
    if (localName === 'button') {
      if (e.target.innerText) {
        setInnerText('text', e.target.innerText);
      } else if (e.target.id) {
        setInnerText('id', e.target.target.id);
      } else if (e.target.className){
        setInnerText('className', e.target.className);
      } 
    } 
    // if clicked element is '<img>', check alt text, then className for descriptor
    else if (localName === 'img') {
      if (e.target.alt) {
        setInnerText('alt', e.target.alt);
      } else if (e.target.className) {
        setInnerText('className', e.target.className);
      }
    }
    // if clicked element is '<div>', check id, then className for descriptor
    else if (localName === 'div') {
      if (e.target.id) {
        setInnerText('id', e.target.id);
      } else if (e.target.className){
        setInnerText('className', e.target.className);
      } 
    } 
    else {
      innerText = 'unknown';
    }
    let currentEventName = localName +' ('+innerText+')';

    let obj = {
      type: e.type,
      name: currentEventName,
      components: []