ember-source/dist/prod/packages/shared-chunks/element-9DRa_9dO.js

A JavaScript framework for creating ambitious web applications

import { a as createComputeRef, v as valueForRef, N as NULL_REFERENCE } from './reference-BshxG6wn.js';
import { s as setInternalComponentManager } from './api-zh_k31vb.js';
import { i as internalHelper } from './internal-helper-DIbr1RgC.js';

/**
  @module @ember/helper
*/


// ============ Element Component (for string tag names) ============
// Renders content wrapped in the specified HTML element, or just renders
// content without a wrapper for empty string.

const ELEMENT_CAPABILITIES = {
  createInstance: true,
  wrapped: true
};
class ElementComponentManager {
  getCapabilities() {
    return ELEMENT_CAPABILITIES;
  }
  getDebugName(state) {
    return `(element "${state.tagName}")`;
  }
  getSelf() {
    return NULL_REFERENCE;
  }
  getDestroyable() {
    return null;
  }
  didCreateElement() {}
  create(_owner, state) {
    // For empty string, return null so getTagName returns null (no wrapper element)
    return state.tagName || null;
  }
  getTagName(state) {
    return state;
  }
  didRenderLayout() {}
  didUpdateLayout() {}
  didCreate() {}
  didUpdate() {}
}
const ELEMENT_COMPONENT_MANAGER = new ElementComponentManager();
class ElementComponentDefinition {
  constructor(tagName) {
    this.tagName = tagName;
  }
  toString() {
    return `(element "${this.tagName}")`;
  }
}
setInternalComponentManager(ELEMENT_COMPONENT_MANAGER, ElementComponentDefinition.prototype);

// Cache component definitions per tag name to avoid creating duplicate definitions
const ELEMENT_DEFINITIONS = new Map();
function getElementDefinition(tagName) {
  let definition = ELEMENT_DEFINITIONS.get(tagName);
  if (definition === undefined) {
    definition = new ElementComponentDefinition(tagName);
    ELEMENT_DEFINITIONS.set(tagName, definition);
  }
  return definition;
}

// ============ Element Helper ============

/**
  The `element` helper lets you dynamically set the tag name of an element.

  ```handlebars
  {{#let (element @tagName) as |Tag|}}
    <Tag class="my-element">Hello</Tag>
  {{/let}}
  ```

  When `@tagName` is `"h1"`, this renders `<h1 class="my-element">Hello</h1>`.

  When `@tagName` is an empty string `""`, the block content is rendered without
  a wrapping element.

  Passing `null`, `undefined`, or non-string values will throw an assertion error.

  Changing the tag name will tear down and recreate the element and its contents.
 
  The `element` helper is built-in and does not need to be imported.

  @method element
  @for Ember.Templates.helpers
  @public
*/
const element = internalHelper(({
  positional,
  named
}) => {
  return createComputeRef(() => {
    let tagName = valueForRef(positional[0]);
    return getElementDefinition(tagName);
  }, null, 'element');
});

export { element as e };