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

[bigmistqke]

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

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[titoBouzout]

This issue should be in dom-expressions 😊

[ryansolid]

Yeah this might be fun. This issue was introduced with this fix: ryansolid/dom-expressions#295

I'm imagining more specifically the fix for ryansolid/dom-expressions#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.