Merge pull request #20996 from NullVoxPopuli/nvp/renderComponent/cannot-read-properties-of-null-reading-syscall

Fix; renderComponent error: 'Cannot read property of undefined: reading syscall'

Author: NullVoxPopuli

packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts

@@ -637,6 +637,51 @@ moduleFor(
 
       assertHTML('');
     }
+
+    async '@test async rendering multiple times to adjacent elements'() {
+      let Child = defComponent(`Hi`, { scope: {} });
+      let get = (id: string) => this.element.querySelector(id);
+      let promises: Promise<unknown>[] = [];
+
+      function render(Comp: GlimmerishComponent, id: string, owner: Owner) {
+        let promise = (async () => {
+          await Promise.resolve();
+          let element = get(`#${id}`);
+
+          renderComponent(Comp, {
+            into: element!,
+            owner,
+          });
+        })();
+
+        promises.push(promise);
+
+        return;
+      }
+      let A = defComponent('a:<Child />', { scope: { Child } });
+      let B = defComponent('b:<Child />', { scope: { Child } });
+      let Root = defComponent(
+        [
+          `<div id="a"></div><br>`,
+          `<div id="b"></div>`,
+          `{{render A 'a' owner}}`,
+          `{{render B 'b' owner}}`,
+        ].join('\n'),
+        { scope: { render, A, B, owner: this.owner } }
+      );
+
+      this.renderComponent(Root, {
+        expect: [`<div id="a"></div><br>`, `<div id="b"></div>`, ``, ``].join('\n'),
+      });
+
+      await Promise.all(promises);
+
+      assertHTML([`<div id="a">a:Hi</div><br>`, `<div id="b">b:Hi</div>`, ``, ``].join('\n'));
+
+      run(() => destroy(this));
+
+      assertHTML('');
+    }
   }
 );
 

packages/@glimmer/opcode-compiler/lib/compilable-template.ts

@@ -9,7 +9,6 @@ import type {
   HandleResult,
   HighLevelOp,
   LayoutWithContext,
-  Nullable,
   SerializedBlock,
   SerializedInlineBlock,
   Statement,
@@ -37,7 +36,7 @@ class CompilableTemplateImpl<S extends SymbolTable> implements CompilableTemplat
     }
   }
 
-  compiled: Nullable<HandleResult> = null;
+  compiled: WeakMap<EvaluationContext, HandleResult> = new WeakMap();
 
   constructor(
     readonly statements: WireFormat.Statement[],
@@ -70,14 +69,16 @@ function maybeCompile(
   compilable: CompilableTemplateImpl<SymbolTable>,
   context: EvaluationContext
 ): HandleResult {
-  if (compilable.compiled !== null) return compilable.compiled;
+  if (compilable.compiled.has(context)) {
+    return compilable.compiled.get(context) as HandleResult;
+  }
 
-  compilable.compiled = PLACEHOLDER_HANDLE;
+  compilable.compiled.set(context, PLACEHOLDER_HANDLE);
 
   let { statements, meta } = compilable;
 
   let result = compileStatements(statements, meta, context);
-  compilable.compiled = result;
+  compilable.compiled.set(context, result);
 
   return result;
 }