Merge pull request #21098 from emberjs/nvp/fix-21096-this-template-runtime

[BUGFIX] Add support for `this` in explicit scope for the runtime template compiler.

Author: NullVoxPopuli

packages/@ember/-internals/glimmer/tests/integration/components/runtime-template-compiler-explicit-test.ts

@@ -72,6 +72,19 @@ moduleFor(
       this.assertStableRerender();
     }
 
+    async '@test Can use `this` from explicit scope'() {
+      await this.renderComponentModule(() => {
+        let state = { cls: 'Hello, world!' };
+
+        return template('<div>{{this.cls}}</div>', {
+          scope: () => ({ this: state }),
+        });
+      });
+
+      this.assertHTML('<div>Hello, world!</div>');
+      this.assertStableRerender();
+    }
+
     async '@test Can use inline if and unless in strict mode templates'() {
       await this.renderComponentModule(() => {
         return template('{{if true "foo" "bar"}}{{unless true "foo" "bar"}}');

packages/@ember/template-compiler/lib/template.ts

@@ -270,10 +270,24 @@ function buildEvaluator(options: Partial<EmberPrecompileOptions> | undefined) {
     }
 
     return (source: string) => {
-      const argNames = Object.keys(scope);
-      const argValues = Object.values(scope);
+      let hasThis = Object.prototype.hasOwnProperty.call(scope, 'this');
+      let thisValue = hasThis ? (scope as { this?: unknown }).this : undefined;
 
-      return new Function(...argNames, `return (${source})`)(...argValues);
+      let argNames: string[] = [];
+      let argValues: unknown[] = [];
+
+      for (let [name, value] of Object.entries(scope)) {
+        if (name === 'this') {
+          continue;
+        }
+
+        argNames.push(name);
+        argValues.push(value);
+      }
+
+      let fn = new Function(...argNames, `return (${source})`);
+
+      return hasThis ? fn.call(thisValue, ...argValues) : fn(...argValues);
     };
   }
 }