class MyElement extends LitElement {
  foo() {
    this.myPropertyA = 1;
  }
}

class MyElement extends LitElement {
  foo() {
    this.myPropertyA = 1;
    this.myPropertyB = 2;
  }
}

/* This is generally what a debounce function looks like, it takes a function to execute, and optionally a delay */
function debounce(func, delay = 0) {

  /* We create a variable to store a reference to the last `setTimeout` */
  let timeoutId;

  /* And then we return a new function, that whenever called, clears the latest timeout, essentially cancelling it, and schedules a new timeout */
  return function() {

    /* Because this function closes over the outer function, we'll still have access to the `timeoutId` declared above. This is useful on subsequent calls to the 'inner' function. */
    clearTimeout(timeoutId);

    /* We then schedule a new timeout, that calls the function that we'd like to execute */
    timeoutId = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  }
};

function search() {
  /* Do some API call to get more search results */
}

/* We create a new variable that stores the _returned_ function from the debounce function */
const debouncedSearch = debounce(search, 500);
input.addEventListener("input", debouncedSearch);

console.log(1);

Promise.resolve().then(() => {
  console.log(2);
});

console.log(3);

// 1
// 3
// 2

class Batching {
  /* We declare and initialize a variable to keep track of whether or not an update has already been requested */
  updateRequested = false;

  scheduleUpdate() {
    /** 
     * In here, we need a check to see if an update is already previously requested.
     * If an update already is requested, we don't want to do any unnecessary work!
     */
    if(!this.updateRequested) {

      /* If no update has yet been requested, we set the `updateRequested` flag to `true` */
      this.updateRequested = true;

      /** 
       * Since we now know that microtasks run after JavaScript has finished
       * executing, we can use this knowledge to our advantage, and only set 
       * the `updateRequested` flag back to `false` again once all the tasks 
       * have run, essentially delaying, or _batching_ the update!
       */
      Promise.resolve().then(() => {
        this.updateRequested = false;
        this.update();
      });
    }
  }

  /* This is our `update` method that we only want to be called once */
  update() {
    console.log('updating!');
  }
}

const batching = new Batching();

/* We call scheduleUpdate in quick succession */
batching.scheduleUpdate();
batching.scheduleUpdate();
batching.scheduleUpdate();

/* 🎉 The result: */

// "updating!" 

/* `update` only ran once! */

class Batching {
  // ...

  async scheduleUpdate() {
    if(!this.updateRequested) {
      this.updateRequested = true;
      this.updateRequested = await false;
      this.update();
    }
  }

  // ...
}

/* We declare a new variable */
let resolveFn;

/** 
 * We declare a new promise, but we _dont_ resolve it! 
 * Instead, we assign the `resolve` function to the
 * `resolveFn` that we declared above
 */
const myPromise = new Promise((resolve) => {
  resolveFn = resolve;
});

/** 
 * `myPromise` now is just a pending promise, waiting to be resolved,
 * and we can do that whenever we please with our `resolveFn`
 */
myPromise; // Promise {<pending>}

/* For example, we could do a whole bunch of other work in between */

/* And finally, whenever we're ready, we can call the `resolveFn` to resolve `myPromise` */
resolveFn(); // Resolves `myPromise`

/* Aaand `myPromise` is now fulfilled! */
myPromise; // Promise {<fulfilled>: undefined} ! 🎉

function sleep(delay) {
  return new Promise(resolve => {
    setTimeout(resolve, delay)
  });
}

(async () => {
  await sleep(1000); // Awaits one second for the timeout to execute before continuing
})()

class MyCounter extends LitElement {
  static get properties() {
    return {
      count: { type: Number }
    }
  }
}

class MyCounter extends LitElement {
  set count(value) {
    this.__count = value;
    this.requestUpdate(); // ❗️ (metal-gear-solid-alert.mp3)
  }

  get count() {
    return this.__count;
  }
}

{
  name: "Mark",
  age: 30
}

this.user = {
  ...this.user,
  name: "Mark"
}

this.users.push({name: 'Nick', age: 30});

/* We create a new class ... */
class Batching {

  /* ... that has a `requestUpdate` method */
  async requestUpdate() {

    /** 
     * In here, we need a check to see if an update has already previously been requested.
     * If an update is already requested, we don't want to do any unnecessary work!
     */
    if (!this.updateRequested) {

      /**
       * If no update was previously requested, we set this
       * flag to `true` to avoid doing unnecessary work in
       * case `requestUpdate` might get called another (or several) times
       */
      this.updateRequested = true;

      /** 
       * ... and _this_ is where the magic happens;
       * This schedules a microtask that executes once JavaScript has
       * finished executing, and since we guard against any other
       * incoming calls for `requestUpdate`, we only do work once
       */
      this.updateRequested = await false;

      /* Finally, we call our `update` method, which can then render some DOM, or do whatever */
      this.update();
    }
  }

  update() {
    console.log("updating!");
  }

  /**
   * For demonstration purposes we add some setters here,
   * that when given a new value, will request an update
   */
  set a(val) {
    this.__a = val;
    this.requestUpdate();
  }

  set b(val) {
    this.__b = val;
    this.requestUpdate();
  }
}

/* We instantiate a new instance of our class */
const batching = new Batching();

/* And we set multiple properties */
batching.a = 1;
batching.b = 2;

/* 🎉 The result: */

// "updating!"

class Batching {
  constructor() {

    /** 
     * We initialize an `updateComplete` property with a new 
     * Promise that we'll only resolve once `this.update()`
     * has been called
     */
    this.updateComplete = this.__createDeferredPromise();
  }

  async requestUpdate() {
    if (!this.updateRequested) {
      this.updateRequested = true;
      this.updateRequested = await false;
      this.update();

      /* When our update is, in fact, complete we resolve the Promise that was assigned to the `updateComplete` property ... */
      this.__resolve();

      /* ... And we assign a new promise to updateComplete for the next update */
      this.updateComplete = this.__createDeferredPromise();
    }
  }

  update() {
    console.log("updating!");
  }

  /** 
   * Creates a new deferred promise that we can await, 
   * and assign the `resolve` function to `this.__resolve`, 
   * so we can resolve the promise after we call `this.update()`
   */
  __createDeferredPromise() {
    return new Promise((resolve) => {
      this.__resolve = resolve;
    });
  }

  set a(val) {
    this.__a = val;
    this.requestUpdate();
  }

  set b(val) {
    this.__b = val;
    this.requestUpdate();
  }
}

/* We use an Async IIFE (Immediately Invoked Function Expression), because top-level await is not a thing yet 😑 */
(async () => {
  /* We instantiate a new instance of our class */
  const batching = new Batching();

  /* Set multiple properties in a row */
  batching.a = 1;
  batching.b = 2;

  /* And this is where we `await` an update */
  await batching.updateComplete;

  /* We then assign another property */
  batching.b = 3;

  /* 🎉 The result: */

  // "updating!"
  // "updating!"
})();

/* We create a new class that extends from the native HTMLElement */
class BatchingElement extends HTMLElement {
  constructor() {

    /* We now have to call `super` to make sure our element gets set up correctly */
    super();
    this.updateComplete = this.__createDeferredPromise();
  }

  async requestUpdate() {
    if (!this.updateRequested) {
      this.updateRequested = true;
      this.updateRequested = await false;
      this.update();
      this.__resolve();
      this.updateComplete = this.__createDeferredPromise();
    }
  }

  update() {}

  __createDeferredPromise() {
    return new Promise((resolve) => {
      this.__resolve = resolve;
    });
  }
}

/* We create a new class, MyElement, that extends from our BatchingElement base class */
class MyElement extends BatchingElement {

  constructor() {
    super();

    /* We attach a shadowRoot to our component for good measure */
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    /* And we call an initial render when our component gets connected to the DOM */
    this.update();
  }

  /**
   * This is our `update` function that will get triggered by the
   * `requestUpdate` method.
   * 
   * Any time we set a property on this element, we'll also
   * trigger an update.
   */
  update() {
    console.log('updating!');
    this.shadowRoot.innerHTML = `
      <div>value of a: ${this.a}</div>
      <div>value of b: ${this.b}</div>
    `;
  }

  /**
   * And finally, we need some getters and setters to
   * actually be able to trigger updates 🙃
   * 
   * Notice how much boilerplate this is, and how nice
   * LitElement makes this for us instead? 😩
   */
  set a(val) {
    this.__a = val;
    this.requestUpdate();
  }
  get a(){
    return this.__a;
  }

  set b(val) {
    this.__b = val;
    this.requestUpdate();
  }
  get b(){
    return this.__b;
  }
}

customElements.define("my-element", MyElement);

/* We get a reference to our component, so we can call methods on it */
const myElement = document.querySelector('my-element');

/**
 * We assign multiple properties in quick succession,
 * but our component will still only call `update` once!
 */
myElement.a = 'foo';
myElement.b = 'bar';

/* 🎉 The result: */

// "updating!" -> called in the `connectedCallback` to do an initial render
// "updating!" -> trigger by setting two properties