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

this inside arrow function is incorrect after Solid transform #292

Closed
trusktr opened this issue Nov 20, 2023 · 3 comments · Fixed by #295
Closed

this inside arrow function is incorrect after Solid transform #292

trusktr opened this issue Nov 20, 2023 · 3 comments · Fixed by #295

Comments

@trusktr
Copy link
Contributor

trusktr commented Nov 20, 2023

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
Copy link
Collaborator

lxsmnsyc commented Nov 20, 2023

Yeah seems like this is pushed in the wrong scope.

edit:

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

@trusktr
Copy link
Contributor Author

trusktr commented Nov 20, 2023

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

@lxsmnsyc
Copy link
Collaborator

@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

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 a pull request may close this issue.

2 participants