leofavre

// DUMB COMPONENT
// a *pure* function that renders a stateless component.

const UserView = (args) => html`
  <div>
    <h4>${args.firstName} ${args.lastName}</h4>
    <p>Requests: <strong>${args.requests}</strong></p>
  </div>
`;

leofavre

/**
 * Part of [Canivete](http://canivete.leofavre.com/#waitinpromise)
 *
 * Delays the chaining of a promise by a specified
 * time in milliseconds.
 *
 * The function is curried so as to be used inside
 * the `.then()` method, passing along the resolved
 * value from the previous promise step to the next.
 *

leofavre

/**
 * Part of [Canivete](http://canivete.leofavre.com/#deepgroupby)
 * 
 * Groups the contents of an array by one or more iteratees.
 * Unlike Lodash [`groupBy()`](https://lodash.com/docs/4.17.4#groupBy),
 * this function can create nested groups, but cannot receive
 * strings for iteratees.
 */
const deepGroupBy = (collection, ...iteratees) => {
	let paths = collection.map(value => iteratees.map(iteratee => iteratee(value))),

leofavre

/**
 * Returns an array with all DOM elements affected by an event.
 * The function serves as a polyfill for
 * [`Event.composedPath()`](https://dom.spec.whatwg.org/#dom-event-composedpath).
 *
 * @category Event
 * @param {Event} evt The triggered event.
 * @return {Array.<HTMLElement>} The DOM elements affected by the event.
 * 
 * @example

leofavre

{% comment %}
If all product images of your Shopify store share the same aspect ratio,
you can use the following snippet to generate the correct srcset without
having to use Javascript to detect their widths.

The aspect ratio of an image is equal to its width divided by its height.
Example: for an image that is 1536px wide by 2048px tall,
the aspect ratio will be 1536 / 2048 = 0.75;

The `default` variable corresponds to the default size that older browsers