earl-hyperscript

Earl Hyperscript

Converts Earl Grey's document building syntax to vtree that works with Cycle.js.

Example

Here's a rewrite in Earl Grey of the increment/decrement counter from Cycle.js's basic examples.

require:
   "@cycle/core" as cycle
   "@cycle/dom"  -> makeDOMDriver
   earl-hyperscript -> h

main = {=> DOM} ->
   chain cycle.Rx.observable:
      @merge with
         chain DOM:
            @get(".decrement") with .click
            @map: ev -> -1
         chain DOM:
            @get(".increment") with .click
            @map: ev -> +1
      @start-with: 0
      @scan: (x, y) -> x + y
      @map: count ->
         h: div %
            button.decrement % .Decrement
            button.increment % .Increment
            p % 'Counter: {count}'

cycle.run(main) with {
   DOM = makeDOMDriver("#app")
}

With the % operator macro, you can avoid using h at all:

require-macros:
  earl-hyperscript -> [%]

node =
  div %
    button.decrement % .Decrement
    button.increment % .Increment
    p % 'Counter: {count}'

License

MIT © Jake Russo et al