_{tachometer-reporter-action v2 for Benchmarks}

Size Change: +46 B (0%)

Total Size: 57 kB

_{compressed-size-action}

The failure here is interesting, basically we have a fallthrough case now that we shield for the value being a function in either the old or new case. When we are hydrating and have the test where we perform onClick={null} then we have no oldValue (undefined) and no newValue (null) so we fall to the removeAttribute case

I worry that this will prevent us from supporting EventListener Objects in the future, in addition to the issue you noted with set/unset.

An idea I had while looking at this: what if we hoisted the in check up above on* handler detection? This would cause onclick to be set as a property, but folks aren't really using lowercase DOM handler names anyway.

if (name === 'style') {
  // set/diff style
  return;
}

if (
  !isSvg &&
  name !== 'width' &&
  name !== 'height' &&
  name !== 'href' &&
  name !== 'list' &&
  name !== 'form' &&
  name !== 'tabIndex' &&
  name !== 'download' &&
  name !== 'rowSpan' &&
  name !== 'colSpan' &&
  name in dom
) {
  try {
    dom[name] = value == null ? '' : value;
    return;
  } catch (e) {
    // property assignment failed, fall back to attribute
  }
}

if (name[0] === 'o' && name[1] === 'n' && name.indexOf('-') === -1) {
  // if we got here, we know `onxyz` is not a property defined on `dom` and there was no dash
  // set/diff event listener
  return;
}

if (typeof value === 'function') return;

// fall through to setting as attribute
if (value != null && (value !== false || name[4] === '-')) {
  dom.setAttribute(name, value);
} else {
  dom.removeAttribute(name);
}

@developit the issue with that approach is that you'll fall into the on case for only-overflow for instance. Checking whether we are dealing with a custom-element on that branch seems wrong as we can't support event-handlers on custom-elements like that. We could do a check like the event not containing a dash but if they then leverage onlyoverflow it would also fall in this bucket 😅

Not too sure how we can support all three here

<x-custom onChange={myFunc} only-overflow onlyoverflow />

Where the first has to fall in our event-handler bucket and the latter two in our setProperty