Commit from Devin

Author: NullVoxPopuli

packages/@glimmer/integration-tests/test/element-helper-test.ts

@@ -0,0 +1,140 @@
+import { module, test, QUnit } from './utils/qunit';
+import { RenderingTest } from './utils/rendering-test';
+import { strip } from './utils/strip';
+
+module('Element Helper Tests', () => {
+  class ElementHelperTest extends RenderingTest {
+    static suiteName = 'element helper';
+
+    @test
+    'renders a tag with the given tag name'() {
+      this.render(strip`
+        {{#let (element "h1") as |Tag|}}
+          <Tag id="content">hello world!</Tag>
+        {{/let}}
+      `);
+
+      this.assertHTML('<h1 id="content">hello world!</h1>');
+    }
+
+    @test
+    'does not render any tags when passed an empty string'() {
+      this.render(strip`
+        {{#let (element "") as |Tag|}}
+          <Tag id="content">hello world!</Tag>
+        {{/let}}
+      `);
+
+      this.assertHTML('hello world!');
+    }
+
+    @test
+    'does not render anything when passed null'() {
+      this.render(strip`
+        {{#let (element null) as |Tag|}}
+          <Tag id="content">hello world!</Tag>
+        {{/let}}
+      `);
+
+      this.assertHTML('<!---->');
+    }
+
+    @test
+    'does not render anything when passed undefined'() {
+      this.render(strip`
+        {{#let (element undefined) as |Tag|}}
+          <Tag id="content">hello world!</Tag>
+        {{/let}}
+      `);
+
+      this.assertHTML('<!---->');
+    }
+
+    @test
+    'works with element modifiers'() {
+      let clicked = 0;
+      this.registerHelper('increment', () => () => clicked++);
+
+      this.render(strip`
+        {{#let (element "button") as |Tag|}}
+          <Tag type="button" id="action" {{on "click" (helper "increment")}}>hello world!</Tag>
+        {{/let}}
+      `);
+
+      this.assertHTML('<button type="button" id="action">hello world!</button>');
+      this.assert.strictEqual(clicked, 0, 'never clicked');
+
+      this.click('button#action');
+      this.assert.strictEqual(clicked, 1, 'clicked once');
+
+      this.click('button#action');
+      this.assert.strictEqual(clicked, 2, 'clicked twice');
+    }
+
+    @test
+    'can be rendered multiple times'() {
+      this.render(strip`
+        {{#let (element "h1") as |Tag|}}
+          <Tag id="content-1">hello</Tag>
+          <Tag id="content-2">world</Tag>
+          <Tag id="content-3">!!!!!</Tag>
+        {{/let}}
+      `);
+
+      this.assertHTML('<h1 id="content-1">hello</h1><h1 id="content-2">world</h1><h1 id="content-3">!!!!!</h1>');
+    }
+
+    @test
+    'renders when the tag name changes'() {
+      this.registerHelper('tag-name', () => this.context.tagName);
+      
+      this.context = { tagName: 'h1' };
+      this.render(strip`
+        {{#let (element (helper "tag-name")) as |Tag|}}
+          <Tag id="content">hello world!</Tag>
+        {{/let}}
+      `);
+
+      this.assertHTML('<h1 id="content">hello world!</h1>');
+      
+      this.context = { tagName: 'h2' };
+      this.rerender();
+      
+      this.assertHTML('<h2 id="content">hello world!</h2>');
+      
+      this.context = { tagName: 'h3' };
+      this.rerender();
+      
+      this.assertHTML('<h3 id="content">hello world!</h3>');
+      
+      this.context = { tagName: '' };
+      this.rerender();
+      
+      this.assertHTML('hello world!');
+      
+      this.context = { tagName: 'h1' };
+      this.rerender();
+      
+      this.assertHTML('<h1 id="content">hello world!</h1>');
+    }
+
+    @test
+    'throws when passed a non-string value'() {
+      this.render(strip`
+        {{#let (element 123) as |Tag|}}
+          <Tag id="content">hello world!</Tag>
+        {{/let}}
+      `);
+
+      this.assertThrows(() => this.rerender(), /The argument passed to the `element` helper must be a string/);
+    }
+  }
+
+  module('Element Helper Tests', {
+    beforeEach() {
+      QUnit.config.current.testEnvironment.owner = {};
+    }
+  });
+
+  ElementHelperTest.run();
+});

packages/@glimmer/runtime/index.ts

@@ -17,6 +17,11 @@ export {
   templateOnlyComponent,
   TemplateOnlyComponentManager,
 } from './lib/component/template-only';
+export {
+  DynamicTagComponent,
+  DynamicTagComponentManager,
+  DYNAMIC_TAG_COMPONENT_MANAGER,
+} from './lib/component/dynamic-tag';
 export { CurriedValue, curry } from './lib/curried-value';
 export {
   DOMChanges,
@@ -33,6 +38,7 @@ export {
 } from './lib/environment';
 export { array } from './lib/helpers/array';
 export { concat } from './lib/helpers/concat';
+export { element } from './lib/helpers/element';
 export { fn } from './lib/helpers/fn';
 export { get } from './lib/helpers/get';
 export { hash } from './lib/helpers/hash';

packages/@glimmer/runtime/lib/component/dynamic-tag.ts

@@ -0,0 +1,45 @@
+import type { InternalComponentCapabilities, InternalComponentManager, Option, Destroyable } from '@glimmer/interfaces';
+import { setInternalComponentManager } from '@glimmer/manager';
+import { NULL_REFERENCE, Reference } from '@glimmer/reference';
+
+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,
+};
+
+export class DynamicTagComponent {
+  constructor(public tagName: string) {}
+}
+
+export class DynamicTagComponentManager implements InternalComponentManager {
+  getCapabilities(): InternalComponentCapabilities {
+    return CAPABILITIES;
+  }
+
+  getDebugName(): string {
+    return 'dynamic-tag';
+  }
+
+  getSelf(): Reference {
+    return NULL_REFERENCE;
+  }
+
+  getDestroyable(): Option<Destroyable> {
+    return null;
+  }
+}
+
+export const DYNAMIC_TAG_COMPONENT_MANAGER = new DynamicTagComponentManager();
+
+setInternalComponentManager(DYNAMIC_TAG_COMPONENT_MANAGER, DynamicTagComponent.prototype);

packages/@glimmer/runtime/lib/helpers/element.ts

@@ -0,0 +1,52 @@
+import type { CapturedArguments } from '@glimmer/interfaces';
+import { createComputeRef, valueForRef } from '@glimmer/reference';
+import { curry } from '../curried-value';
+import { internalHelper } from './internal-helper';
+import { CurriedType } from '@glimmer/interfaces';
+
+/**
+  Use the `{{element}}` helper to create a contextual component with a dynamic tag name.
+
+  ```handlebars
+  {{#let (element "div") as |Tag|}}
+    <Tag>hello</Tag>
+  {{/let}}
+  ```
+
+  You can also pass a dynamic value as the tag name:
+
+  ```handlebars
+  {{#let (element (if this.isActive "button" "div")) as |Tag|}}
+    <Tag>hello</Tag>
+  {{/let}}
+  ```
+
+  @method element
+  @param {String} tagName The HTML tag name to render
+  @return {Component} A component with the specified tag name
+  @public
+ */
+export const element = internalHelper(({ positional }: CapturedArguments) => {
+  return createComputeRef(() => {
+    const tagName = positional[0] ? valueForRef(positional[0]) : undefined;
+    
+    // Handle null, undefined, or empty string
+    if (tagName === null || tagName === undefined || tagName === '') {
+      return undefined;
+    }
+    
+    // Validate tag name is a string
+    if (typeof tagName !== 'string') {
+      throw new Error(`The argument passed to the \`element\` helper must be a string (you passed \`${tagName}\`)`);
+    }
+    
+    // Create a dynamic component with the specified tag name
+    return curry(
+      CurriedType.Component,
+      { tagName },
+      {},
+      null,
+      false
+    );
+  }, null, 'element');
+});