open-wc/packages/storybook/index.js

export { storiesOf, addParameters } from '@storybook/polymer';
export { action } from '@storybook/addon-actions';
export { linkTo } from '@storybook/addon-links';
export { withBackgrounds } from '@storybook/addon-backgrounds';
export { withNotes } from '@storybook/addon-notes';
export { document } from 'global';
export {
  withKnobs,
  text,
  button,
  number,
  select,
  date,
  color,
  array,
  boolean,
} from '@storybook/addon-knobs';

import { html as litHtml } from 'lit-html';

/**
 * This is a wrapper around lit-html that supports dynamic strings to be added as a preprocessing
 * step, before a template is passed to lit's html function.
 * A dynamic string will be evaluated one time (on init) and passed to lit-html as being
 * part of the static string.
 *
 * WARNING: do not use in production!!! has a huge performance penalty as every string is
 * different from lit-htmls perspective so a new tag is created every time.
 *
 * A valid use case for this would be to create dynamic tag names.
 *
 * @example:
 * const tag = unsafeStatic('my-tag');
 * html`<${tag} prop="${prop}"></${tag>`
 * // will in turn calls lit-html html function as:
 * html`<my-tag prop="${prop}"></my-tag>`
 */
export function html(strings, ...values) {
  const newVal = []; // result values to be passed on to lit-html
  const newStr = []; // result strings to be passed on to lit-html

  const isDynamicProp = p => p && p.d && typeof p.d === 'string' && Object.keys(p).length === 1;
  const addToCurrentString = (add) => {
    newStr[newStr.length - 1] = newStr[newStr.length - 1] + add;
  };

  // Create the result arrays
  values.forEach((string, index) => {
    if (index === 0) {
      newStr.push(strings[0]); // this is either ''(if tagged starts with value) or string
    }
    // Situation 1 : dynamic string
    const p = values[index]; // potential dynamic string
    if (isDynamicProp(p)) {
      addToCurrentString(p.d);
      addToCurrentString(strings[index + 1]);
    } else {
      // Situation 2: no dynamic string, just push string and value
      newVal.push(p); // a 'real' value
      newStr.push(strings[index + 1]);
    }
  });
  // Return lit template
  return litHtml(newStr, ...newVal);
};

export function unsafeStatic(options) {
  return {
    d: options
  };
}