from Devin: try to implement the element keyword

NullVoxPopuli · NullVoxPopuli · commit 747a80037c05 · 2025-03-17T14:23:10.000-04:00
diff --git a/packages/@glimmer/compiler/lib/passes/1-normalization/keywords/block.ts b/packages/@glimmer/compiler/lib/passes/1-normalization/keywords/block.ts
@@ -382,4 +382,59 @@ export const BLOCK_KEYWORDS = keywords('Block')
           })
       );
     },
+  })
+  .kw('element', {
+    assert(node: ASTv2.InvokeBlock): Result<ASTv2.ExpressionNode> {
+      let { args } = node;
+      
+      if (!args.named.isEmpty()) {
+        return Err(
+          generateSyntaxError(
+            `The element keyword does not take any named arguments`,
+            args.named.loc
+          )
+        );
+      }
+      
+      if (args.positional.size !== 1) {
+        return Err(
+          generateSyntaxError(
+            `The element keyword only takes a single positional parameter, the tag name.`,
+            args.positional.loc
+          )
+        );
+      }
+      
+      let tagName = args.nth(0);
+      
+      if (tagName === null) {
+        return Err(
+          generateSyntaxError(
+            `The element keyword requires a tag name as its first positional parameter`,
+            args.loc
+          )
+        );
+      }
+      
+      return Ok(tagName);
+    },
+    
+    translate(
+      { node, state }: { node: ASTv2.InvokeBlock; state: NormalizationState },
+      tagName: ASTv2.ExpressionNode
+    ): Result<mir.DynamicElement> {
+      let block = node.blocks.get('default');
+      let body = VISIT_STMTS.NamedBlock(block, state);
+      let tagNameResult = VISIT_EXPRS.visit(tagName, state);
+      
+      return Result.all(body, tagNameResult).mapOk(
+        ([body, tag]) =>
+          new mir.DynamicElement({
+            loc: node.loc,
+            tag,
+            params: new mir.ElementParameters({ body: [] }),
+            body: body.body,
+          })
+      );
+    },
   });
diff --git a/packages/@glimmer/compiler/lib/passes/2-encoding/mir.ts b/packages/@glimmer/compiler/lib/passes/2-encoding/mir.ts
@@ -120,6 +120,12 @@ export class SimpleElement extends node('SimpleElement').fields<{
   dynamicFeatures: boolean;
 }>() {}
 
+export class DynamicElement extends node('DynamicElement').fields<{
+  tag: ExpressionNode;
+  params: ElementParameters;
+  body: Statement[];
+}>() {}
+
 export class ElementParameters extends node('ElementParameters').fields<{
   body: AnyOptionalList<ElementParameter>;
 }>() {}
@@ -214,6 +220,7 @@ export type Statement =
   | AppendTextNode
   | Component
   | SimpleElement
+  | DynamicElement
   | InvokeBlock
   | AppendComment
   | If
diff --git a/packages/@glimmer/compiler/test/element-keyword/element-test.ts b/packages/@glimmer/compiler/test/element-keyword/element-test.ts
@@ -0,0 +1,111 @@
+import { preprocess, print } from '@glimmer/syntax';
+import { compileTemplate } from '../../index';
+import { expect } from 'chai';
+import { suite, test } from 'qunit';
+
+suite('Element Keyword', () => {
+  test('it renders a tag with the given tag name', (assert) => {
+    const template = `
+      {{#element "h1"}}
+        hello world!
+      {{/element}}
+    `;
+
+    const result = compileTemplate(template);
+    assert.ok(result, 'Successfully compiled template with element keyword');
+    
+    // Verify the compiled template contains the expected opcodes
+    const serialized = JSON.stringify(result);
+    assert.ok(serialized.includes('OpenDynamicElement'), 'Template includes OpenDynamicElement opcode');
+  });
+
+  test('it handles dynamic tag names', (assert) => {
+    const template = `
+      {{#element tagName}}
+        hello world!
+      {{/element}}
+    `;
+
+    const result = compileTemplate(template);
+    assert.ok(result, 'Successfully compiled template with dynamic element keyword');
+    
+    // Verify the compiled template contains the expected opcodes
+    const serialized = JSON.stringify(result);
+    assert.ok(serialized.includes('OpenDynamicElement'), 'Template includes OpenDynamicElement opcode');
+  });
+
+  test('it handles null/undefined tag names', (assert) => {
+    const template = `
+      {{#element null}}
+        hello world!
+      {{/element}}
+    `;
+
+    const result = compileTemplate(template);
+    assert.ok(result, 'Successfully compiled template with null element keyword');
+  });
+
+  test('it supports element modifiers', (assert) => {
+    const template = `
+      {{#element "button" type="button" {{on "click" this.didClick}}}}
+        hello world!
+      {{/element}}
+    `;
+
+    const result = compileTemplate(template);
+    assert.ok(result, 'Successfully compiled template with element modifiers');
+    
+    // Verify the compiled template contains the expected opcodes
+    const serialized = JSON.stringify(result);
+    assert.ok(serialized.includes('OpenDynamicElement'), 'Template includes OpenDynamicElement opcode');
+    assert.ok(serialized.includes('Modifier'), 'Template includes Modifier opcode');
+  });
+
+  test('it throws an error for invalid tag names', (assert) => {
+    const template = `
+      {{#element 123}}
+        hello world!
+      {{/element}}
+    `;
+
+    assert.throws(() => {
+      compile(template);
+    }, /The element keyword only takes a single positional parameter, the tag name/);
+  });
+
+  test('it throws an error when no arguments are provided', (assert) => {
+    const template = `
+      {{#element}}
+        hello world!
+      {{/element}}
+    `;
+
+    assert.throws(() => {
+      compile(template);
+    }, /The element keyword requires a tag name as its first positional parameter/);
+  });
+
+  test('it throws an error when too many arguments are provided', (assert) => {
+    const template = `
+      {{#element "div" "span"}}
+        hello world!
+      {{/element}}
+    `;
+
+    assert.throws(() => {
+      compile(template);
+    }, /The element keyword only takes a single positional parameter, the tag name/);
+  });
+
+  test('it throws an error when named arguments are provided', (assert) => {
+    const template = `
+      {{#element "div" id="test"}}
+        hello world!
+      {{/element}}
+    `;
+
+    assert.throws(() => {
+      compile(template);
+    }, /The element keyword does not take any named arguments/);
+  });
+});
diff --git a/packages/@glimmer/opcode-compiler/lib/syntax/statements.ts b/packages/@glimmer/opcode-compiler/lib/syntax/statements.ts
@@ -142,6 +142,29 @@ STATEMENTS.add(SexpOpcodes.OpenElement, (op, [, tag]) => {
   op(VM_OPEN_ELEMENT_OP, inflateTagName(tag));
 });
 
+STATEMENTS.add(SexpOpcodes.DynamicElement, (op, [, tag, params, body]) => {
+  expr(op, tag);
+  op(VM_OPEN_DYNAMIC_ELEMENT_OP);
+  
+  if (params && params.length > 0) {
+    op(VM_PUT_COMPONENT_OPERATIONS_OP);
+    
+    for (let param of params) {
+      STATEMENTS.compile(op, param);
+    }
+  }
+  
+  op(VM_FLUSH_ELEMENT_OP);
+  
+  if (body && body.length > 0) {
+    for (let statement of body) {
+      STATEMENTS.compile(op, statement);
+    }
+  }
+  
+  op(VM_CLOSE_ELEMENT_OP);
+});
+
 STATEMENTS.add(SexpOpcodes.OpenElementWithSplat, (op, [, tag]) => {
   op(VM_PUT_COMPONENT_OPERATIONS_OP);
   op(VM_OPEN_ELEMENT_OP, inflateTagName(tag));
diff --git a/packages/@glimmer/runtime/lib/references/dynamic-element.ts b/packages/@glimmer/runtime/lib/references/dynamic-element.ts
@@ -0,0 +1,69 @@
+import { CurriedType, Dict, Maybe, InternalComponentCapabilities, InternalComponentManager, Option, Destroyable } from '@glimmer/interfaces';
+import { createComputeRef, Reference, valueForRef, NULL_REFERENCE } from '@glimmer/reference';
+import { setInternalComponentManager } from '@glimmer/manager';
+import { curry } from '../curried-value';
+
+const CAPABILITIES: InternalComponentCapabilities = {
+  dynamicLayout: false,
+  dynamicTag: true,
+  prepareArgs: false,
+  createArgs: false,
+  attributeHook: false,
+  elementHook: false,
+  createCaller: false,
+  dynamicScope: false,
+  updateHook: false,
+  createInstance: true,
+  wrapped: false,
+  willDestroy: false,
+  hasSubOwner: false,
+};
+
+class DynamicElementComponent {
+  constructor(public tagName: string) {}
+}
+
+export class DynamicElementManager implements InternalComponentManager {
+  getCapabilities(): InternalComponentCapabilities {
+    return CAPABILITIES;
+  }
+
+  getDebugName(): string {
+    return 'dynamic-element';
+  }
+
+  getSelf(): Reference {
+    return NULL_REFERENCE;
+  }
+
+  getDestroyable(): Option<Destroyable> {
+    return null;
+  }
+}
+
+export const DYNAMIC_ELEMENT_MANAGER = new DynamicElementManager();
+
+setInternalComponentManager(DYNAMIC_ELEMENT_MANAGER, DynamicElementComponent);
+
+export default function createDynamicElementRef(tagName: Reference) {
+  let lastValue: Maybe<Dict> | string, curriedDefinition: object | string | null;
+
+  return createComputeRef(() => {
+    let value = valueForRef(tagName) as Maybe<Dict> | string;
+
+    if (value === lastValue) {
+      return curriedDefinition;
+    }
+
+    lastValue = value;
+    curriedDefinition = curry(
+      CurriedType.Component,
+      new DynamicElementComponent(tagName),
+      {},
+      null,
+      false
+    );
+
+    return curriedDefinition;
+  });
+}
diff --git a/packages/@glimmer/wire-format/lib/opcodes.ts b/packages/@glimmer/wire-format/lib/opcodes.ts
@@ -56,6 +56,7 @@ export const opcodes = {
   Block: 6 satisfies BlockOpcode,
   StrictBlock: 7 satisfies StrictBlockOpcode,
   Component: 8 satisfies ComponentOpcode,
+  DynamicElement: 9 satisfies number,
   OpenElement: 10 satisfies OpenElementOpcode,
   OpenElementWithSplat: 11 satisfies OpenElementWithSplatOpcode,
   FlushElement: 12 satisfies FlushElementOpcode,
