Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic prop/attr names #124

Open
dy opened this issue Sep 24, 2019 · 7 comments
Open

Dynamic prop/attr names #124

dy opened this issue Sep 24, 2019 · 7 comments

Comments

@dy
Copy link

@dy dy commented Sep 24, 2019

Not the same as #109.

That would be useful to have insertable attribute names:

html`<a ${foo}=${bar}/>`
// same as
html`<a ...${ {[foo]: bar} }/>`

Practical cases

Optional attributes:

html`<button ${ data.disabled ? 'disabled' : '' }/>`

Private props:

let html = htm.bind(h)

let _data = Symbol('data')
html`<a ${_data}=${data}/>`

function h (tag, props) {
  props[_data]
}

Anonymous props:

html`<a ${draggable}/>`

function draggable(el) {
...
}
draggable[Symbol.toPrimitive] = () => 'data-draggable'

@developit @jviide would you consider that feature?

@dy
Copy link
Author

@dy dy commented Sep 27, 2019

@developit any thoughts? I can devote some time for a PR.

@dy
Copy link
Author

@dy dy commented Oct 7, 2019

@developit
Copy link
Owner

@developit developit commented Oct 16, 2019

TBH it doesn't seem like these fit with the minimalistic philosophy of htm. They are all relatively easy to accomplish already using objects, and the resulting output (when not over-transpiled) represents a real improvement over what we'd have to do to support the sugared syntax in HTM's parser.

let _data = Symbol('data')
html`<a ...${{ [_data]: data }} />`
// output:
h('a', { [data]: data })

Regarding the last example, this might be interesting to you (demo):

function draggable(el) {}
draggable['data-draggable'] = true;

html`<a ...${draggable}/>`
@dy
Copy link
Author

@dy dy commented Oct 16, 2019

it doesn't seem like these fit with the minimalistic philosophy of htm

#121 suggests distinguishing min / max philosophies, since that's already shipped.

Would it be nice to have htm-max with syntactic sugar/sauce (html-compatible, validation, unclosed tags, dynamic attributes), and keep htm-min JSX-compatible?

@jviide
Copy link
Collaborator

@jviide jviide commented Oct 16, 2019

I'd like to point out that htm/mini is functionally identical to the regular htm.

@dy
Copy link
Author

@dy dy commented Oct 16, 2019

htm/mini is functionally identical

What is this argued by? What are the pros having it identical? Or, rather, what's the point of htm/max then? A safe-ground implementation? (mb the discussion belongs to #121).

This distinction potential seems to be underdeveloped.

@jviide
Copy link
Collaborator

@jviide jviide commented Oct 16, 2019

htm and htm/mini implement the same "language" and produce the same output for the same given input.

Their only real difference is that htm/mini doesn't do caching, which allows us save some implementation bytes. The brotli-compressed htm/mini is 170 bytes (~29%) smaller than htm. Whether this size reduction is worth the effort of maintaining two different builds is IMHO a different issue and best left for #121.

Currently the point of htm/mini is to be a drop-in replacement for htm, allowing the library user make a tradeoff between execution speed and code size, depending on their specific situation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.