handsontable/helpers/templateLiteralTag.mjs

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.for-each.js";
import "core-js/modules/esnext.iterator.reduce.js";
import { arrayReduce } from "../helpers/array.mjs";
/**
 * Tags a multiline string and return new one without line break characters and following spaces.
 *
 * @param {Array} strings Parts of the entire string without expressions.
 * @param {...string} expressions Expressions converted to strings, which are added to the entire string.
 * @returns {string}
 */
export function toSingleLine(strings) {
  for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    expressions[_key - 1] = arguments[_key];
  }
  const result = arrayReduce(strings, (previousValue, currentValue, index) => {
    const valueWithoutWhiteSpaces = currentValue.replace(/\r?\n\s*/g, '');
    const expressionForIndex = expressions[index] ? expressions[index] : '';
    return previousValue + valueWithoutWhiteSpaces + expressionForIndex;
  }, '');
  return result.trim();
}

/* eslint-disable jsdoc/require-description-complete-sentence */
/**
 * Creates DOM element from the string. For example:
 * ```
 * const element = html`
 *  <div data-ref="example" class="example">
 *    <p>Example:</p>
 *    <span data-ref="counter">1</span>
 *  </div>
 * `
 * ```
 * Will create a `div` element with class `example` and a `span` and `p` element inside.
 * When `data-ref` attribute is used, the element will be added to the `refs` object.
 * ```
 * {
 *   fragment: ...,
 *   refs: {
 *    example: ..., // reference to the div element
 *    counter: ..., // reference to the span element
 *   }
 * }
 * ```
 * Tip: If necessary it can be extended to support other attributes or events.
 *
 * @param {string} strings Parts of the entire string without expressions.
 * @param  {*} values Expressions converted to strings, which are added to the entire string.
 * @returns {{ fragment: DocumentFragment, refs: object.<string, HTMLElement> }}
 */
export function html(strings) {
  for (var _len2 = arguments.length, values = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
    values[_key2 - 1] = arguments[_key2];
  }
  // eslint-disable-next-line no-restricted-globals
  const template = document.createElement('template');
  template.innerHTML = strings.reduce((acc, string, i) => {
    var _values$i;
    return acc + string + ((_values$i = values[i]) !== null && _values$i !== void 0 ? _values$i : '');
  }, '');
  const fragment = template.content.cloneNode(true);
  const refs = {};
  fragment.querySelectorAll('[data-ref]').forEach(element => {
    const name = element.getAttribute('data-ref');
    element.removeAttribute('data-ref');
    refs[name] = element;
  });
  return {
    fragment,
    refs
  };
}
/* eslint-enable jsdoc/require-description-complete-sentence */