§ hyperscript 0.8 Release

We are pleased to present the 0.8 release of hyperscript.

§ Changes

• BREAKING: If an element A adds an event listener to another element B, then when element A gets removed, the listener will be removed.

  Count: <output _="
  	on click from #inc
  		log 'Increment'
  		increment my textContent
    init
  	  remove me
  ">0</output>
  
  <!--After the <output/> is removed, clicking this will not log anything to
    the console-->
  <button id="inc">Increment</button>
  

• Hyperscript now has local, global and element-scoped variables.

  By default, variables are in the local scope, which means they disappear when the current handler or function finishes.

  Now, you can use the global scope to set variables that last as long as the current thread (these are set on window in the main thread, and self in workers).

  In addition, you can set element scoped variables that persist as long as the element does. These can be used to persist information across events. If you set element variables within a behavior, those will be usable only from within that behavior and won't clash with anything.

  For more details, see Variables and scope.

• You can now load external hyperscript files!

  <script type="text/hyperscript" src="draggable._hs"></script>
  

• You can use the make command to call constructors or create DOM elements.

  make a WeakMap
  make an URL from "/path", "https://origin.example.com"
  make a <button.btn-primary/>
  

• The put command can now put DOM elements into other elements, in addition to HTML strings. Arrays work as well.

  put ['<b>hello</b>', document.createElement('hr')] at end of me
  

• You can now use any expression as a CSS class or id, as shown:

  get idOfElementToRemove()
  remove #{it}
  

  set configuration to { activeClass: "active" }
  add .{configuration.activeClass} to allActiveElements()
  

• The render command now escapes HTML.

• The fetch command can use conversions. Custom conversions work too!

  fetch /count as Int -- or Float, Date...
  

  • In addition, fetch as html will parse the HTML returned by the server into a DOM tree

• The new built-in Fragment conversion turns HTML strings and DOM elements (and arrays thereof) into DocumentFragments

• The on command now supports string literals as event names, so you can use characters like dashes.

  on "somelibrary:before-init-something"
    ...
  

• You can use "yourself" to refer to the target of a tell command, in addition to the existing "you" and "your"

• You can now use any expression with many commands like add, send, remove that previously only accepted some expressions (id, class, property access and a few more).

Enjoy!