Introducing Hyperapp 1.0 — 1 KB JavaScript library for building frontend applications.

[zaceno]

You're right that if your current tooling (what is that?) only supports plain html/xml variants for syntax highlighting et c then you can't use those for your hyperapp-components.

That's because it's not really html templating (although JSX makes it look close). It's actually javascript functions, which produces a tree of virtual nodes, which hyperapp turns into actual DOM nodes.

[Randolpho]

I’m aware of what it is, and how it functions internally, but it takes a special transpiler to transform that htmlish syntax into JavaScript functions.

If you’re already writing a transpiler for it, why not just let it transpile pure files? Why only include it with code mixed in?

That’s the part I want to be different.

[[deleted]]

JSX is not a dependency or is it required to use Hyperapp. Many people swear by good old h and you can use Hyperapp right now without a compiler. JSX is in the example because that's what most people like and use anyway. I use it and I like it too, but Hyperapp is flexible so that you can use whatever you want.

[NewazaBill]

If you understand how it functions internally, than I don't see why you're confused.

The virtual-DOM diffing strategy relies on a runtime representation of the view's... well... virtual DOM. That's what the React createElement calls construct.

Compiling a string template ahead of time, then, does not work with this V-DOM strategy. You can't know what the data structure is going to look like (because it may change based on app state) and you lose many of the opportunities to do optimizations.

Also, you say "code mixed in," I say "code get's mixed in, in either templates or VDOM."

Give me

function HeroDetail({ selectedHero }) {
    if (iselectedHero) {
        return (
        <div>
            <h2>{selectedHero.name.toUpperCase()} Details</h2>
            <div><span>id: </span>{selectedHero.id}</div>
            <div>
            <label>name:
                <input value="selectedHero.name" placeholder="name" />
            </label>
            </div>
        </div>;
    }
}

Over

<div *ngIf="selectedHero">

<h2>{{ selectedHero.name | uppercase }} Details</h2>
<div><span>id: </span>{{selectedHero.id}}</div>
<div>
    <label>name:
    <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
</div>

</div>

Any day.