this inside arrow function is incorrect after Solid transform

[trusktr]

Reproduction:

https://playground.solidjs.com/anonymous/ab9e79a2-8bb0-4e1d-96cd-f55b12d0242e

A workaround is to avoid arrow functions, here with a regular method:

https://playground.solidjs.com/anonymous/e80be486-0bc4-4512-b4d0-c1dad21ee863

The transform is replacing this with a variable that grabs this from somewhere unrelated to the code, f.e. like so:

const _self$ = this; // <--------- HERE
const ClickCounter = element(class ClickCounter extends Element {
  template = () => (() => {
    // ...
    _$insert(_el$, () => _self$.count, _el$4); // <---- HERE
    return _el$;
  })();
});

At the top level of a module, this is undefined.

[lxsmnsyc]

Yeah seems like this is pushed in the wrong scope.

edit:

dom-expressions/packages/babel-plugin-jsx-dom-expressions/src/shared/transform.js

Line 50 in 82c377d

let parent = path.getStatementParent();

This is the culprit. The workaround could be to find the nearest function or block parent, and then move the declaration there.

[trusktr]

Why do we need a declaration? Why not leave this as-is considering that the output's wrapper is also an arrow function?

[lxsmnsyc]

@trusktr It's to protect reactive properties from accessing the props object.

For example:

<Div title={this.title} />

// if preserved
createComponent(Div, {
  get title() {
    return this.title; // recursive
  },
});

Origin: ryansolid/mobx-jsx#44