earl-hyperscript

    0.2.4 • Public • Published

    Earl Hyperscript

    Earl Grey npm package

    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

    Install

    npm i earl-hyperscript

    DownloadsWeekly Downloads

    13

    Version

    0.2.4

    License

    MIT

    Last publish

    Collaborators

    • avatar