Preact: 10.0.0-alpha.1 - Component overwrites property/method at `t` key

[MaxPower15]

I have components that look roughly like this:

class MyComponent extends Component {
  t (input) {
    return translated(input);
  }

  render () {
    return <div>${this.t('whatever')}</div>;
  }
}

After upgrading to 10.0.0-alpha.1, they all started failing to render. I checked the value of this.t and found that it was false instead of a reference to the method. I have not looked into where/how it was set, or if there are any other properties overwrites I didn't expect. I was able to fix by renaming to tr.

Generally, if preact sets property keys on elements, I'd expect them to be a little more obfuscated. Or if there's a list of reserved keys, that would help, I suppose--maybe make a rule of no one-letter methods? I guess this is likely from aggressive minification? If so, is that a possible conflict with aggressive minification of larger bundles? (Since they may perform the same operation to rename instance properties.)

I have a sandbox for this, but it seems to be having trouble fetching the 10.0.0-alpha.1 dep for me. https://codesandbox.io/s/lpqj1lw12m Hopefully it works later, or this is easy to test/repro.

[JoviDeCroock]

When I open your codesandbox it actually seems to work, it shows "hi" on screen.

[MaxPower15]

Hm, I'll revisit this later today then. Sandbox is still not loading for me, but I can reliably repro in my webpack environment, and we're not doing any minification in dev. I need to see what file it's pulling in for preact in the sandbox--if it's not the minified version in dist that webpack is using, I wouldn't expect the issue to appear.

[JoviDeCroock]

CodeSandbox is using the minified version, since when I log the this i see:

__a:
key: undefined
l: null
props: {children: Array(1)}
ref: undefined
text: null
type: ƒ c()
__c: null
__e: null
__k: [{…}]

Which is the mangled result.

[MaxPower15]

Thanks. I figured out what was wrong with my local setup for loading the Sandbox, and I've updated it to reproduce the problem. It seems like this.t is set after setState() is called.

It is called in a timeout in the constructor in this example:

https://codesandbox.io/s/14pvo9jv9j

But I originally saw it caused by handlers in onMouseEnter/onMouseLeave, so it is not limited to setState() usage from the constructor.

[marvinhagemeister]

This is probably fixed with #1377 . My guess is that our minifier turned this._force into this.t because we set that to false on each state update.

[developit]

Yup, should be fixed once that goes out.

[marvinhagemeister]

Alpha 2 is out :tada: