ECMA Sugar - sgml/signature GitHub Wiki

Interpolation

// Template Literals
var box = jsx`
  <${Box}>
    ${
      shouldShowAnswer(user) ?
      jsx`<${Answer} value=${false}>no</${Answer}>` :
      jsx`
        <${Box.Comment}>
         Text Content
        </${Box.Comment}>
      `
    }
  </${Box}>
`;



// JSX
var box =
  <Box>
    {
      shouldShowAnswer(user) ?
      <Answer value={false}>no</Answer> :
      <Box.Comment>
         Text Content
      </Box.Comment>
    }
  </Box>;

Event Handlers

<script>
let counter = 0;
function increment() {
	counter = counter + 1;
}

/** @param {MouseEvent} event */
function track(event) {
	trackEvent(event);
}
</script>

<button on:click={increment} on:click={track}>Click me!</button>

Sleep

var foo = {};

function main()
{
  'use strict';

  /* Initialize global state */
  foo.bar = foo.bar || 0;

  /* Initialize timer */
  foo.bop = setInterval(foo.baz, 1000);
}

sleep =
  function(timer)
  {
    'use strict';
    clearInterval(timer);
    timer = setTimeout(function(){main()}, 5000);
  };

foo.baz =
  function()
  {
    'use strict';

    /* Update state */
    foo.bar = Number(foo.bar + 1) || 0;

    /* Log state */
    console.log(foo.bar);

    /* Check state and stop at 10 */
    (foo.bar === 5) && sleep(foo.bop);
    (foo.bar === 10) && clearInterval(foo.bop);
  };

main();

Prototypal Inheritance

Foo = function(message){
    this.message = message;
}

Foo.prototype = new Error();

Reflection

var dateString = "June 2013";
var foo = new Date(dateString);

if (dateString.match(/\s[0-31]\s/) === null)
  {
  Object.defineProperty(foo, 'getDate', {value: function(){return null} });
  }
console.log(foo.getDate() );

References

⚠️ **GitHub.com Fallback** ⚠️