Practical Example

import { applyStyle, child } from '../../utils/dom';


/**
 * The component for change an img element to background image of its wrapper.
 *
 * @param {Splide} Splide     - A Splide instance.
 * @param {Object} Components - An object containing components.
 *
 * @return {Object} - The component object.
 */
export default ( Splide, Components ) => {
  /**
   * Hold options.
   *
   * @type {Object}
   */
  const options = Splide.options;

  /**
   * Cover component object.
   *
   * @type {Object}
   */
  const Cover = {
    /**
     * Required only when "cover" option is true.
     *
     * @type {boolean}
     */
    required: options.cover,

    /**
     * Called when the component is mounted.
     */
    mount() {
      Splide.on( 'lazyload:loaded', img => { cover( img, false ) } );
      Splide.on( 'mounted updated refresh', () => apply( false ) );
    },

    /**
     * Destroy.
     */
    destroy() {
      apply( true );
    },
  };

  /**
   * Apply "cover" to all slides.
   *
   * @param {boolean} uncover - If true, "cover" will be clear.
   */
  function apply( uncover ) {
    Components.Elements.each( Slide => {
      const img = child( Slide.slide, 'IMG' ) || child( Slide.container, 'IMG' );

      if ( img && img.src ) {
        cover( img, uncover );
      }
    } );
  }

  /**
   * Set background image of the parent element, using source of the given image element.
   *
   * @param {Element} img     - An image element.
   * @param {boolean} uncover - Reset "cover".
   */
  function cover( img, uncover ) {
    applyStyle( img.parentElement, { background: uncover ? '' : `center/cover no-repeat url("${ img.src }")` } );
    applyStyle( img, { display: uncover ? '' : 'none' } );
  }

  return Cover;
}
  

Comments/Strings

/**
 * Multiline comment
 * 'Should not be a string'
 * "Should not be a string"
 */
/* Multiline comment in a single line */

// Single line comment
// 'Should not be a string'
// "Should not be a string"

'Single quote'
'Single \'quote\' with escape'
'Single 'quote' with single quote'
'Single "quote" with double quote'
'Single `quote` with back quote'

"Double quote"
"Double \"quote\" with escape"
"Double "quote" with double quote"
"Double 'quote' with single quote"
"Double `quote` with back quote"

`Back quote`
'Back \`quote\` with escape'
'Back `quote` with back quote'
'Back 'quote' with single quote'
'Back "quote" with double quote'

'/* Should not be a comment */'
'// Should not be a comment'

"/* Should not be a comment */"
"// Should not be a comment"

`/* Should not be a comment */`
`// Should not be a comment`
  

RegExp

{
  a: /^.*?[\n\s]/gmsi,
  b: /\s+.+(?=[\s/>])/gs,
  c: /((?![*+?])(?:[^\r\n\[/\\]|\\.|\[(?:[^\r\n\]\\]|\\.)*\])+)\/((?:g(?:im?|mi?)?|i(?:gm?|mg?)?|m(?:gi?|ig?)?)?)/,
}
  

Template Literal

`Multiline
    template
      literal`

`The result will be ${ ( a + b ) * 3 }`

// Nested template literal
`container \` \${ ${
  isMobile()
  // ${ comment }
  // `
  ? 'is-mobile'
  : `container--${ page.isFront() ? 'front' : 'page' }`
}`;
  

Keywords

break, catch, class, continue, do, else, extends, finally, for, function,
if, implements, in, instanceof, interface, new, null, return, throw, trait,
try, while
  

Functions

function say( message ) {
  console.log( message );
}

document.getElementById( 'main' );

const a = {
  say() {
    console.log( 'hi!' );
  }
}
  

Classes

Object.keys( object );

class Component {
  constructor() {
  }
}

const component = new Component();
  

Booleans

true, false
  

Numbers

0 1 1.23 .23 +1.23 -1.23
1e10 1e+10 1e-10 1E10 1E+10 1E-10
1.2e10 1.2e+10 1.2e-10 1.2E10 1.2E+10 1.2E-10
  

Operators

+ - ~ ! / * % ** < > <= >= == != === !==
<< >> >>> & | ^ && || ?? ?
= *= **= /= %= += -= <<= >>= >>>= &= ^= |= &&= ||= ??= :
  

Brackets

{} () []
  

Delimiters

; . ,
;;;; .... ,,,,
  

Decorators

@defineElement( "my-class" )
class C extends HTMLElement {
  @reactive prop clicked = false;
}