solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://solidjs.com
MIT License
31.64k stars 887 forks source link

`this` inside jsx-template inside a constructor of a derived class causes transformation-bug #2141

Closed bigmistqke closed 2 months ago

bigmistqke commented 2 months ago

Describe the bug

When a template is written inside the constructor of a derived class and this is accessed inside the template, the following error is thrown: Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor.

The following code

abstract class Root {
}

class Derived extends Root {
  constructor() {
    super();
    <div>{this.test}</div>;
  }
}

new Derived();

will become

import { template as _$template } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
var _tmpl$ = /*#__PURE__*/_$template(`<div>`);
class Root {}
class Derived extends Root {
  constructor() {
    const _self$ = this;
    super();
    (() => {
      var _el$ = _tmpl$();
      _$insert(_el$, () => _self$.test);
      return _el$;
    })();
  }
}
new Derived();

const _self$ = this; should be set after super() when the class is extended.

Your Example Website or App

https://playground.solidjs.com/anonymous/51a44967-beca-46ba-9332-a9cfa8d81c5d

Steps to Reproduce the Bug or Issue

  1. open link
  2. look at error in console
  3. look at transformed output

Expected behavior

using jsx-template inside a class-constructor to not cause issues.

Screenshots or Videos

No response

Platform

Additional context

No response

titoBouzout commented 2 months ago

This issue should be in dom-expressions 😊

ryansolid commented 2 months ago

Yeah this might be fun. This issue was introduced with this fix: https://github.com/ryansolid/dom-expressions/pull/295

I'm imagining more specifically the fix for https://github.com/ryansolid/dom-expressions/issues/292.

The old approach tried to walk up and then get in front of the current block at that scope and the new way jumps up to the right parent but it doesn't know where to put the expression in front of and just pushes it in the front it looks like.