[client] Evaluate using snabbdom-tsx

[JanKoehnlein]

Currently we use the hyperdom API to create the virtual DOM nodes, which looks a bit sluggish. We should find out whether we can use JSX to do that, and whether snabbdom-tsx is compatible and the way to go.

[JanKoehnlein]

@marcdumais-work: Have you started working on this?

[marcdumais-work]

Hi Jan,

No, aside from doing a quick initial search on the subject, it's not started.

On Thu, Mar 16, 2017 at 7:01 AM, Jan Köhnlein notifications@github.com wrote:

@marcdumais-work https://github.com/marcdumais-work: Have you started working on this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/TypeFox/sprotte/issues/3#issuecomment-287024364, or mute the thread https://github.com/notifications/unsubscribe-auth/AYjmR6_-i4VxnHdSGyvtZuzoAnK10nLxks5rmRaYgaJpZM4MVSIo .

[JanKoehnlein]

snabbdom-tsx had issues: createElement did not work correctly with arrays, making the chilren creation fail.

I switched to snabbdom-jsx, which works better.

You have to use

• {<value>} to insert a primitive value
• class-<myclass>={<true|false>} to toggle a CSS class

Example:

const snabbdom = require("snabbdom-jsx")
const JSX = {createElement: snabbdom.svg}  // snabdom.html to create HTML elements such as DIV 

export class MyView implements View {
    render(node: SModelElement, context: RenderingContext): VNode {
        return <circle key={node.id} id={node.id} class-node={true} r={20}></circle>
    }
}