DOM attributes getting applied from an unrelated component's props, nextBase not cleaned up

[ngokevin]

I have attributes from a different component somehow getting applied internally to another component. Here is the code for the component; the only props it defines are id and className, but it is somehow getting position, rotation, and scale attributes from another component.

<!-- This component should not have any other props applied. -->
<Entity id={entity.id} className="entity"/>

Here is React Developer Tools showing the props. Those position, rotation, and scale props are getting applied to #entity1 somehow. It's not in the props, but it does end up in the DOM node:

Here's showing that those values are applied:

I don't believe it is any of the application code doing this. Here I am logging the attachedCallback, and these values are there from the start:

And then logging from Preact's afterMount, those values are there:

I've also confirmed that MutationObserver says those values are there when the DOM node is mounted. I've disabled my refs and checked my attributeChangedCallbacks, and they are not what's causing this. Adding key does not help.

I've tried poking around Preact's code (v8.2.1). Perhaps these values are being recycled somehow? Any tips on where to investigate?

Repo: https://github.com/ngokevin/architect
Reproduce: npm install && npm run start then head to http://localhost:7001/?recording=https://gist.githubusercontent.com/anonymous/0bb931162b5b3280ec58dba4bd0d18e2/raw/cd9115e332e5ef0373282849255e7757362987b1/clone.json. Do document.querySelector('#entity1').getAttribute('position') after the recording runs and it should return 0/0/0.

[ngokevin]

OK, working on debugging! Found that it's using an initialBase against the offending component:

EDIT:

I've found it was trying to reuse an existing DOM element. The diffing didn't seem to work quite right. The "base" element had attributes [id, class, geometry, material, position, rotation, scale], and my desired props were only [id, class], yet the diffing did not try to remove any of the [geometry, material, position, rotation, scale] attributes.

EDIT 2:

Adding this to idiff sort of fixes it for me. Cleans up that "base" element of leftover attributes that aren't part of the actual props. It's a band-aid, but the root problem is how we're trying to reuse a base element without cleaning it up.

function idiff(dom, vnode, context, mountAll, componentRoot) {
    let out = dom,
      prevSvgMode = isSvgMode;

+   if (dom && !dom.parentNode && vnode.attributes) {
+     let i;
+     let removeAttributes = [];
+     for (i = 0; i < dom.attributes.length; i++) {
+       if (!(dom.attributes[i].name in vnode.attributes)) {
+         removeAttributes.push(dom.attributes[i].name);
+       }
+     }
+     for (i = 0; i < removeAttributes.length; i++) {
+       dom.removeAttribute(removeAttributes[i]);
+     }
+   }
+

EDIT 3:

Also fixed doing:

function renderComponent(component, opts, mountAll, isChild) {
  if (component._disable) return;

+  component.nextBase = null;

[developit]

@ngokevin Thanks for the debugging! It looks like this is a result of component recycling, which I'd like to remove. There is actually a branch with recycling removed - maybe it'd be worth giving it a try to see if the issue is fixed there?

[marvinhagemeister]

We completely removed the component recycler for Preact X, so issues like this should not be present anymore 👍 An alpha release is already out on npm and can be installed via preact@next.