@discourse/types 2026.1.0-c7e9cdd → 2026.3.0-d02b2966

package/external-types/ember-source/types/stable/@ember/-internals/glimmer/lib/component.d.ts

@@ -1,10 +1,13 @@
 declare module '@ember/-internals/glimmer/lib/component' {
+    import type { View } from "@ember/-internals/glimmer";
     import { PROPERTY_DID_CHANGE } from "@ember/-internals/metal";
-    import type { PropertyDidChange } from "@ember/-internals/metal/lib/property_events";
+    import type { PropertyDidChange } from "@ember/-internals/metal";
     import { TargetActionSupport } from "@ember/-internals/runtime";
-    import { ActionSupport, ChildViewsSupport, ClassNamesSupport, CoreView, EventDispatcher, ViewMixin, ViewStateSupport } from "@ember/-internals/views";
+    import type { ViewStates } from "@ember/-internals/views";
+    import { ActionSupport, CoreView, EventDispatcher } from "@ember/-internals/views";
     import type { Template, TemplateFactory } from "@glimmer/interfaces";
     import type { DirtyableTag } from "@glimmer/validator";
+    import type { SimpleElement } from "@simple-dom/interface";
     import { DIRTY_TAG, IS_DISPATCHING_ATTRS } from "@ember/-internals/glimmer/lib/component-managers/curly";
     /**
     @module @ember/component
@@ -122,14 +125,14 @@ declare module '@ember/-internals/glimmer/lib/component' {
           instantiated:
       
           ```javascript
-          export default Component.extend({
+          export default class extends Component {
             init() {
-              this._super(...arguments);
+              super.init(...arguments);
       
               var index = this.get('index');
               this.set('elementId', `component-id${index}`);
             }
-          });
+          }
           ```
       
           @property elementId
@@ -173,8 +176,9 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/person-profile.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        displayName: computed('person.title', 'person.firstName', 'person.lastName', function() {
+      export default class extends Component {
+        @computed('person.title', 'person.firstName', 'person.lastName')
+        get displayName() {
           let { title, firstName, lastName } = this.person;
 
           if (title) {
@@ -182,8 +186,8 @@ declare module '@ember/-internals/glimmer/lib/component' {
           } else {
             return `${firstName} ${lastName}`;
           }
-        })
-      });
+        }
+      }
       ```
 
       And then use it in the component's template:
@@ -205,9 +209,9 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/emphasized-paragraph.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        tagName: 'em'
-      });
+      export default class extends Component {
+        tagName = 'em';
+      }
       ```
 
       When invoked, this component would produce output that looks something like
@@ -225,9 +229,9 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-widget.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        classNames: ['my-class', 'my-other-class']
-      });
+      export default class extends Component {
+        classNames = ['my-class', 'my-other-class'];
+      }
       ```
 
       Invoking this component will produce output that looks like this:
@@ -245,15 +249,16 @@ declare module '@ember/-internals/glimmer/lib/component' {
       import Component from '@ember/component';
       import { computed } from '@ember/object';
 
-      export default Component.extend({
-        classNames: ['my-class', 'my-other-class'],
-        classNameBindings: ['propertyA', 'propertyB'],
+      export default class extends Component {
+        classNames = ['my-class', 'my-other-class'];
+        classNameBindings = ['propertyA', 'propertyB'];
+
+        propertyA = 'from-a';
 
-        propertyA: 'from-a',
-        propertyB: computed(function() {
+        get propertyB {
           if (someLogic) { return 'from-b'; }
-        })
-      });
+        }
+      }
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -283,11 +288,11 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-widget.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        classNameBindings: ['hovered'],
+      export default class extends Component {
+        classNameBindings = ['hovered'];
 
-        hovered: true
-      });
+        hovered = true;
+      }
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -305,11 +310,11 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-widget.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        classNameBindings: ['awesome:so-very-cool'],
+      export default class extends Component {
+        classNameBindings = ['awesome:so-very-cool'];
 
-        awesome: true
-      });
+        awesome = true;
+      }
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -324,11 +329,11 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-widget.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        classNameBindings: ['isUrgent'],
+      export default class extends Component {
+        classNameBindings = ['isUrgent'];
 
-        isUrgent: true
-      });
+        isUrgent = true;
+      }
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -344,13 +349,13 @@ declare module '@ember/-internals/glimmer/lib/component' {
       import Component from '@ember/component';
       import EmberObject from '@ember/object';
 
-      export default Component.extend({
-        classNameBindings: ['messages.empty'],
+      export default class extends Component {
+        classNameBindings = ['messages.empty'];
 
-        messages: EmberObject.create({
+        messages = EmberObject.create({
           empty: true
-        })
-      });
+        });
+      }
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -366,10 +371,11 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-widget.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        classNameBindings: ['isEnabled:enabled:disabled'],
-        isEnabled: true
-      });
+      export default class extends Component {
+        classNameBindings = ['isEnabled:enabled:disabled'];
+
+        isEnabled = true;
+      }
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -390,10 +396,11 @@ declare module '@ember/-internals/glimmer/lib/component' {
       import Component from '@ember/component';
 
       // Applies no class when isEnabled is true and class 'disabled' when isEnabled is false
-      export default Component.extend({
-        classNameBindings: ['isEnabled::disabled'],
-        isEnabled: true
-      });
+      export default class extends Component {
+        classNameBindings = ['isEnabled::disabled'];
+
+        isEnabled = true;
+      }
       ```
 
       Invoking this component when the `isEnabled` property is true will produce
@@ -429,12 +436,12 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-anchor.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        tagName: 'a',
-        attributeBindings: ['href'],
+      export default class extends Component {
+        tagName = 'a';
+        attributeBindings = ['href'];
 
-        href: 'http://google.com'
-      });
+        href = 'http://google.com';
+      };
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -449,12 +456,12 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-anchor.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        tagName: 'a',
-        attributeBindings: ['url:href'],
+      export default class extends Component {
+        tagName = 'a';
+        attributeBindings = ['url:href'];
 
-        url: 'http://google.com'
-      });
+        url = 'http://google.com';
+      };
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -487,12 +494,12 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-use.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        tagName: 'use',
-        attributeBindings: ['xlinkHref:xlink:href'],
+      export default class extends Component {
+        tagName = 'use';
+        attributeBindings = ['xlinkHref:xlink:href'];
 
-        xlinkHref: '#triangle'
-      });
+        xlinkHref = '#triangle';
+      };
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -507,12 +514,12 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-text-input.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        tagName: 'input',
-        attributeBindings: ['disabled'],
+      export default class extends Component {
+        tagName = 'input';
+        attributeBindings = ['disabled'];
 
-        disabled: false
-      });
+        disabled = false;
+      };
       ```
 
       Invoking this component will produce HTML that looks like:
@@ -527,18 +534,18 @@ declare module '@ember/-internals/glimmer/lib/component' {
       import Component from '@ember/component';
       import { computed } from '@ember/object';
 
-      export default Component.extend({
-        tagName: 'input',
-        attributeBindings: ['disabled'],
+      export default class extends Component {
+        tagName = 'input';
+        attributeBindings = ['disabled'];
 
-        disabled: computed(function() {
+        get disabled() {
           if (someLogic) {
             return true;
           } else {
             return false;
           }
-        })
-      });
+        }
+      };
       ```
 
       To prevent setting an attribute altogether, use `null` or `undefined` as the
@@ -547,11 +554,11 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-text-input.js
       import Component from '@ember/component';
 
-      export default Component.extend({
-        tagName: 'form',
-        attributeBindings: ['novalidate'],
-        novalidate: null
-      });
+      export default class extends Component {
+        tagName = 'form';
+        attributeBindings = ['novalidate'];
+        novalidate = null;
+      };
       ```
 
       Updates to the property of an attribute binding will result in automatic
@@ -582,9 +589,9 @@ declare module '@ember/-internals/glimmer/lib/component' {
         import Component from '@ember/component';
         import layout from '../templates/components/person-profile';
 
-        export default Component.extend({
-          layout
-        });
+        export default class extends Component {
+          layout = layout;
+        }
       ```
 
       If you invoke the component:
@@ -637,7 +644,7 @@ declare module '@ember/-internals/glimmer/lib/component' {
           // `event` is the native click Event
           console.log('clicked on the button');
         };
-      });
+      }
       ```
 
       See the [Guide on Component event
@@ -656,13 +663,13 @@ declare module '@ember/-internals/glimmer/lib/component' {
       ```app/components/my-widget.js
       import Component from '@ember/component';
 
-      export default Component.extend({
+      export default class extends Component {
         click(event) {
           // `event.target` is either the component's element or one of its children
           let tag = event.target.tagName.toLowerCase();
           console.log('clicked on a `<${tag}>` HTML element!');
         }
-      });
+      }
       ```
 
       In this example, whenever the user clicked anywhere inside the component, it
@@ -716,21 +723,91 @@ declare module '@ember/-internals/glimmer/lib/component' {
       @class Component
       @extends Ember.CoreView
       @uses Ember.TargetActionSupport
-      @uses Ember.ClassNamesSupport
       @uses Ember.ActionSupport
-      @uses Ember.ViewMixin
-      @uses Ember.ViewStateSupport
       @public
     */
-    interface Component<S = unknown> extends CoreView, ChildViewsSupport, ViewStateSupport, ClassNamesSupport, TargetActionSupport, ActionSupport, ViewMixin, ComponentMethods {
+    interface Component<S = unknown> extends CoreView, TargetActionSupport, ActionSupport, ComponentMethods {
     }
-    const Component_base: Readonly<typeof CoreView> & (new (owner?: import("@ember/-internals/owner").default | undefined) => CoreView) & import("@ember/object/mixin").default & ComponentMethods;
+    const Component_base: Readonly<typeof CoreView> & (new (owner?: import("@ember/-internals/owner").default | undefined) => CoreView) & import("@ember/object/mixin").default & ComponentMethods & {
+        concatenatedProperties: string[];
+        classNames: readonly never[];
+        classNameBindings: readonly never[];
+    };
     class Component<S = unknown> extends Component_base implements PropertyDidChange {
         isComponent: boolean;
         private [SIGNATURE];
-        _superRerender: ViewMixin["rerender"];
+        _superRerender: this["rerender"];
         [IS_DISPATCHING_ATTRS]: boolean;
         [DIRTY_TAG]: DirtyableTag;
+        /**
+          Standard CSS class names to apply to the view's outer element. This
+          property automatically inherits any class names defined by the view's
+          superclasses as well.
+      
+          @property classNames
+          @type Array
+          @default ['ember-view']
+          @public
+        */
+        classNames: string[];
+        /**
+          A list of properties of the view to apply as class names. If the property
+          is a string value, the value of that string will be applied as a class
+          name.
+      
+          ```javascript
+          // Applies the 'high' class to the view element
+          import Component from '@ember/component';
+          Component.extend({
+            classNameBindings: ['priority'],
+            priority: 'high'
+          });
+          ```
+      
+          If the value of the property is a Boolean, the name of that property is
+          added as a dasherized class name.
+      
+          ```javascript
+          // Applies the 'is-urgent' class to the view element
+          import Component from '@ember/component';
+          Component.extend({
+            classNameBindings: ['isUrgent'],
+            isUrgent: true
+          });
+          ```
+      
+          If you would prefer to use a custom value instead of the dasherized
+          property name, you can pass a binding like this:
+      
+          ```javascript
+          // Applies the 'urgent' class to the view element
+          import Component from '@ember/component';
+          Component.extend({
+            classNameBindings: ['isUrgent:urgent'],
+            isUrgent: true
+          });
+          ```
+      
+          If you would like to specify a class that should only be added when the
+          property is false, you can declare a binding like this:
+      
+          ```javascript
+          // Applies the 'disabled' class to the view element
+          import Component from '@ember/component';
+          Component.extend({
+            classNameBindings: ['isEnabled::disabled'],
+            isEnabled: false
+          });
+          ```
+      
+          This list of properties is inherited from the component's superclasses as well.
+      
+          @property classNameBindings
+          @type Array
+          @default []
+          @public
+        */
+        classNameBindings: string[];
         init(properties?: object | undefined): void;
         __dispatcher?: EventDispatcher | null;
         get _dispatcher(): EventDispatcher | null;
@@ -771,6 +848,58 @@ declare module '@ember/-internals/glimmer/lib/component' {
           @public
           */
         readDOMAttr(name: string): any;
+        /**
+         A list of properties of the view to apply as attributes. If the property
+         is a string value, the value of that string will be applied as the value
+         for an attribute of the property's name.
+      
+         The following example creates a tag like `<div priority="high" />`.
+      
+         ```app/components/my-component.js
+         import Component from '@ember/component';
+      
+         export default Component.extend({
+            attributeBindings: ['priority'],
+            priority: 'high'
+          });
+         ```
+      
+         If the value of the property is a Boolean, the attribute is treated as
+         an HTML Boolean attribute. It will be present if the property is `true`
+         and omitted if the property is `false`.
+      
+         The following example creates markup like `<div visible />`.
+      
+         ```app/components/my-component.js
+         import Component from '@ember/component';
+      
+         export default Component.extend({
+            attributeBindings: ['visible'],
+            visible: true
+          });
+         ```
+      
+         If you would prefer to use a custom value instead of the property name,
+         you can create the same markup as the last example with a binding like
+         this:
+      
+         ```app/components/my-component.js
+         import Component from '@ember/component';
+      
+         export default Component.extend({
+            attributeBindings: ['isVisible:visible'],
+            isVisible: true
+          });
+         ```
+      
+         This list of attributes is inherited from the component's superclasses,
+         as well.
+      
+         @property attributeBindings
+         @type Array
+         @default []
+         @public
+         */
         attributeBindings?: string[];
         /**
          Enables components to take a list of parameters as arguments.
@@ -780,13 +909,9 @@ declare module '@ember/-internals/glimmer/lib/component' {
           ```app/components/my-component.js
           import Component from '@ember/component';
       
-          let MyComponent = Component.extend();
-      
-          MyComponent.reopenClass({
-            positionalParams: ['name', 'age']
-          });
-      
-          export default MyComponent;
+          export default class MyComponent extends Component {
+            static positionalParams = ['name', 'age'];
+          }
           ```
       
           It can then be invoked like this:
@@ -807,13 +932,9 @@ declare module '@ember/-internals/glimmer/lib/component' {
           ```app/components/my-component.js
           import Component from '@ember/component';
       
-          let MyComponent = Component.extend();
-      
-          MyComponent.reopenClass({
-            positionalParams: 'names'
-          });
-      
-          export default MyComponent;
+          export default class MyComponent extends Component {
+            static positionalParams = 'names';
+          }
           ```
       
           It can then be invoked like this:
@@ -839,13 +960,9 @@ declare module '@ember/-internals/glimmer/lib/component' {
         ```app/components/my-component.js
         import Component from '@ember/component';
 
-        let MyComponent = Component.extend();
-
-        MyComponent.reopenClass({
-          positionalParams: ['name', 'age']
-        });
-
-        export default MyComponent;
+        export default class MyComponent extends Component {
+          static positionalParams = ['name', 'age'];
+        }
         ```
 
         It can then be invoked like this:
@@ -866,13 +983,9 @@ declare module '@ember/-internals/glimmer/lib/component' {
         ```app/components/my-component.js
         import Component from '@ember/component';
 
-        let MyComponent = Component.extend();
-
-        MyComponent.reopenClass({
-          positionalParams: 'names'
-        });
-
-        export default MyComponent;
+        export default class MyComponent extends Component {
+          static positionalParams = 'names';
+        }
         ```
 
         It can then be invoked like this:
@@ -924,6 +1037,225 @@ declare module '@ember/-internals/glimmer/lib/component' {
           @public
           */
         ariaRole?: string;
+        /**
+          Array of child views. You should never edit this array directly.
+      
+          @property childViews
+          @type Array
+          @default []
+          @private
+        */
+        get childViews(): View[];
+        appendChild(view: View): void;
+        _transitionTo(this: Component, state: keyof typeof ViewStates): void;
+        /**
+         Return the nearest ancestor that is an instance of the provided
+         class or mixin.
+      
+         @method nearestOfType
+         @param {Class,Mixin} klass Subclass of Ember.View (or Ember.View itself),
+         or an instance of Mixin.
+         @return Ember.View
+         @deprecated use `yield` and contextual components for composition instead.
+         @private
+         */
+        nearestOfType(klass: any): View | undefined;
+        /**
+         Return the nearest ancestor that has a given property.
+      
+         @method nearestWithProperty
+         @param {String} property A property name
+         @return Ember.View
+         @deprecated use `yield` and contextual components for composition instead.
+         @private
+         */
+        nearestWithProperty(property: string): View | undefined;
+        /**
+         Renders the view again. This will work regardless of whether the
+         view is already in the DOM or not. If the view is in the DOM, the
+         rendering process will be deferred to give bindings a chance
+         to synchronize.
+      
+         If children were added during the rendering process using `appendChild`,
+         `rerender` will remove them, because they will be added again
+         if needed by the next `render`.
+      
+         In general, if the display of your view changes, you should modify
+         the DOM element directly instead of manually calling `rerender`, which can
+         be slow.
+      
+         @method rerender
+         @public
+         */
+        rerender(): void;
+        /**
+         Returns the current DOM element for the view.
+      
+          @property element
+          @type DOMElement
+          @public
+        */
+        get element(): import("@ember/-internals/utility-types").Nullable<Element>;
+        /**
+         Appends the view's element to the specified parent element.
+      
+         Note that this method just schedules the view to be appended; the DOM
+         element will not be appended to the given element until all bindings have
+         finished synchronizing.
+      
+         This is not typically a function that you will need to call directly when
+         building your application. If you do need to use `appendTo`, be sure that
+         the target element you are providing is associated with an `Application`
+         and does not have an ancestor element that is associated with an Ember view.
+      
+         @method appendTo
+         @param {String|DOMElement} A selector, element, HTML string
+         @return {Ember.View} receiver
+         @private
+         */
+        appendTo(selector: string | Element | SimpleElement): this;
+        /**
+         Appends the view's element to the document body. If the view does
+         not have an HTML representation yet
+         the element will be generated automatically.
+      
+         If your application uses the `rootElement` property, you must append
+         the view within that element. Rendering views outside of the `rootElement`
+         is not supported.
+      
+         Note that this method just schedules the view to be appended; the DOM
+         element will not be appended to the document body until all bindings have
+         finished synchronizing.
+      
+         @method append
+         @return {Ember.View} receiver
+         @private
+         */
+        append(): this;
+        /**
+         The HTML `id` of the view's element in the DOM. You can provide this
+         value yourself but it must be unique (just as in HTML):
+      
+         ```handlebars
+         {{my-component elementId="a-really-cool-id"}}
+         ```
+      
+         If not manually set a default value will be provided by the framework.
+      
+         Once rendered an element's `elementId` is considered immutable and you
+         should never change it. If you need to compute a dynamic value for the
+         `elementId`, you should do this when the component or element is being
+         instantiated:
+      
+         ```app/components/my-component.js
+         import Component from '@ember/component';
+      
+         export default Component.extend({
+            init() {
+              this._super(...arguments);
+              let index = this.get('index');
+              this.set('elementId', 'component-id' + index);
+            }
+          });
+         ```
+      
+         @property elementId
+         @type String
+         @public
+         */
+        elementId: string | null;
+        /**
+         Called when a view is going to insert an element into the DOM.
+      
+         @event willInsertElement
+         @public
+         */
+        willInsertElement(): this;
+        /**
+         Called when the element of the view has been inserted into the DOM.
+         Override this function to do any set up that requires an element
+         in the document body.
+      
+         When a view has children, didInsertElement will be called on the
+         child view(s) first and on itself afterwards.
+      
+         @event didInsertElement
+         @public
+         */
+        didInsertElement(): this;
+        /**
+         Called when the view is about to rerender, but before anything has
+         been torn down. This is a good opportunity to tear down any manual
+         observers you have installed based on the DOM state
+      
+         @event willClearRender
+         @public
+         */
+        willClearRender(): this;
+        /**
+         You must call `destroy` on a view to destroy the view (and all of its
+         child views). This will remove the view from any parent node, then make
+         sure that the DOM element managed by the view can be released by the
+         memory manager.
+      
+         @method destroy
+         @private
+         */
+        destroy(): this;
+        /**
+         Called when the element of the view is going to be destroyed. Override
+         this function to do any teardown that requires an element, like removing
+         event listeners.
+      
+         Please note: any property changes made during this event will have no
+         effect on object observers.
+      
+         @event willDestroyElement
+         @public
+         */
+        willDestroyElement(): this;
+        /**
+         Called after the element of the view is destroyed.
+      
+         @event willDestroyElement
+         @public
+         */
+        didDestroyElement(): this;
+        /**
+         Called when the parentView property has changed.
+      
+         @event parentViewDidChange
+         @private
+         */
+        parentViewDidChange(): this;
+        /**
+         Tag name for the view's outer element. The tag name is only used when an
+         element is first created. If you change the `tagName` for an element, you
+         must destroy and recreate the view element.
+      
+         By default, the render buffer will use a `<div>` tag for views.
+      
+         If the tagName is `''`, the view will be tagless, with no outer element.
+         Component properties that depend on the presence of an outer element, such
+         as `classNameBindings` and `attributeBindings`, do not work with tagless
+         components. Tagless components cannot implement methods to handle events,
+         and their `element` property has a `null` value.
+      
+         @property tagName
+         @type String
+         @default null
+         @public
+         */
+        tagName: string | null;
+        /**
+         Handle events from `EventDispatcher`
+      
+         @method handleEvent
+         @param eventName {String}
+         @param evt {Event}
+         @private
+         */
+        handleEvent(eventName: string, evt: Event): boolean;
         static isComponentFactory: boolean;
         static toString(): string;
     }