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

Leave interpreting attribute values to the renderer #35

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

slaskis
Copy link
Collaborator

@slaskis slaskis commented Sep 7, 2016

This is a PR for #27 which changes the default behaviour of attribute values.

Now it will leave the interpreting of the attribute values to the renderer, such like <div x=${null}></div> will pass attributes as {x: null} to the renderer instead of {x: 'null'} as it does before this PR.

An important note may be that null and undefined as values, with virtual-dom (^2.1.1), removes the attribute entirely, while false instead throws an exception because it attempts to do some entity serialization.

Behaviour is different using hyperscript which simply makes an attribute with an empty string value instead.

@slaskis
Copy link
Collaborator Author

slaskis commented Sep 7, 2016

Because of the potentially breaking changes I'm thinking this might need a semver bump to 3.x.x

@jorgebucaran
Copy link

Hi @substack @JamesKyburz 👋

Do you have any plans to merge this?

@dereke
Copy link

dereke commented Apr 28, 2017

This is a pretty major issue in hyperx in my opinion.
It is definitely worth bumping the version and getting it out.

@casr
Copy link

casr commented Jun 4, 2017

I think if you pass a plain object to the tag it passes it on to the renderer. Your example would be rewritten as:

<div ${{x: null}}></div>

Or a full example from something I was working on recently (notice the selected attribute):

const hx = require('hyperx')(require('virtual-dom/h'))

module.exports = ({changeHandler, label, options, selected}) => {
  return hx`
  <div>
    <label>${label}
      <select onchange=${changeHandler}>
        ${options.map((option) => hx`
          <option
            value=${option.id}
            ${{selected: selected.id === option.id}}
          >
            ${option.name}
          </option>`
        )}
      </select>
    </label>
  </div>`
}

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

Successfully merging this pull request may close these issues.

4 participants