misleading demo

[Andrea Giammarchi]

quick heads-up, the produced code with that extra object won't ever work:

const Greet = _arg => {
  let {name, ...extra} = _arg;
  return wire(_arg)`<div ${extra}><h1>Hi ${name}</h1></div>`;
}

attributes always need to be assigned to a name

[Charles Pick]

yep, thought this might be an issue - this is a common pattern with JSX though and so ideally we need some way to handle it, any thoughts on how it could be done?

[Andrea Giammarchi]

I have no idea what is that extra about but it cannot possibly work on hyperHTML as it is.

What is the intent? What would that produce in React?

[Andrea Giammarchi]

P.S. if it's just some data you want to pass through the node then <div data=${extra}> would do, but again I'm not sure what you'd expect to happen after

[Charles Pick]

Consider a component like this:

const TextField = ({value, onChange}) => <input class="TextField" value={value} onchange={onChange} />;

which you use like this:

<form>
  <TextField value={state.value} onChange={state.handleChange} />
</form>

Now you want to support placeholders. Ok so you add the relevant property and pass it through in your component. Now you want to do something when the TextField gets focus, so you add the props for onFocus and pass that through, and so on. Eventually you end up recreating almost all of the API of the native input component - it's really expensive and makes it hard to make truly flexible, reusable components.

React solves this problem with the JSX Spread Element. In React, the following component:

const TextField = (props) => <input className="TextField" {...props} />;

When used like:

<TextField type="tel" placeholder="Enter Your Phone Number" value={123} />

Produces:

<input className="TextField" type="tel" placeholder="Enter Your Phone Number" value={123} />

It spreads the attributes/properties from an (ordinary) object into the element, this ends up being really important in practice.

[Andrea Giammarchi]

So ...

const TextField = (props) => <input className="TextField" {...props} />;

wont' work in hyperHTML for one simple reason: there's no HTML parsing there, everything is trashed on the DOM, hence, it cannot work like that.

We need a compromise in core that understand your intents as JSX user ... that would be something that if you do that, it loops over every property and it setups the attributes.

After that: you want to update with the same mechanism? In that case, propose a no nconflicting name for an attribute in charge of providing extra magic

[Charles Pick]

It seems like this would be a useful feature regardless of whether you're using JSX or not. I guess we could compile to something like:

wire()`<input class="TextField" props=${extra} />`

then special case props in setAttribute()

[Andrea Giammarchi]

DOM and objects don't cope well with each other but hyperHTML accepts data, wich is the equivalent of props in React, I guess

[Andrea Giammarchi]

the issue is that I don't know how you're supposed to manipulate or reach those properties ... this feel like a bad pattern (I am talking about using a function), I'd rather use the class approach which makes more sense, otherwise you'll have a props object attached to an element that neither the element,, nor you, can easily consume/reach

[Andrea Giammarchi]

closing this one too.