Future @ember/component types

packages/@ember/-internals/glimmer/lib/component-managers/curly.ts

@@ -39,6 +39,7 @@ import {
   valueForTag,
 } from '@glimmer/validator';
 import { SimpleElement } from '@simple-dom/interface';
+import Component from '../component';
 import { DynamicScope } from '../renderer';
 import RuntimeResolver from '../resolver';
 import { isTemplateFactory } from '../template';
@@ -49,7 +50,7 @@ import {
   parseAttributeBinding,
 } from '../utils/bindings';
 
-import ComponentStateBucket, { Component } from '../utils/curly-component-state-bucket';
+import ComponentStateBucket from '../utils/curly-component-state-bucket';
 import { processComponentArgs } from '../utils/process-args';
 
 export const ARGS = enumerableSymbol('ARGS');

packages/@ember/-internals/glimmer/lib/component-managers/root.ts

@@ -11,8 +11,9 @@ import {
 } from '@glimmer/interfaces';
 import { capabilityFlagsFrom } from '@glimmer/manager';
 import { CONSTANT_TAG, consumeTag } from '@glimmer/validator';
+import Component from '../component';
 import { DynamicScope } from '../renderer';
-import ComponentStateBucket, { Component } from '../utils/curly-component-state-bucket';
+import ComponentStateBucket from '../utils/curly-component-state-bucket';
 import CurlyComponentManager, {
   DIRTY_TAG,
   initialRenderInstrumentDetails,

packages/@ember/-internals/glimmer/lib/component.ts

@@ -1,6 +1,7 @@
 import { get, PROPERTY_DID_CHANGE } from '@ember/-internals/metal';
 import { getOwner } from '@ember/-internals/owner';
 import { TargetActionSupport } from '@ember/-internals/runtime';
+import { CoreObjectClass } from '@ember/-internals/runtime/lib/system/core_object';
 import {
   ActionSupport,
   ChildViewsSupport,
@@ -13,7 +14,7 @@ import {
 } from '@ember/-internals/views';
 import { assert } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
-import { Environment } from '@glimmer/interfaces';
+import { Environment, Template, TemplateFactory } from '@glimmer/interfaces';
 import { setInternalComponentManager } from '@glimmer/manager';
 import { isUpdatableRef, updateRef } from '@glimmer/reference';
 import { normalizeProperty } from '@glimmer/runtime';
@@ -648,7 +649,39 @@ let lazyEventsProcessed = new WeakMap<EventDispatcher, WeakSet<object>>();
   @uses Ember.ViewStateSupport
   @public
 */
-const Component = CoreView.extend(
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface ComponentClass extends CoreObjectClass<Component> {}
+interface Component
+  extends CoreView,
+    ChildViewsSupport,
+    ViewStateSupport,
+    ClassNamesSupport,
+    TargetActionSupport,
+    ActionSupport,
+    ViewMixin {
+  attributeBindings?: string[];
+
+  /**
+    Layout can be used to wrap content in a component.
+    @property layout
+    @type Function
+    @public
+  */
+  layout?: TemplateFactory | Template;
+
+  /**
+    The name of the layout to lookup if no layout is provided.
+    By default `Component` will lookup a template with this name in
+    `Ember.TEMPLATES` (a shared global object).
+    @property layoutName
+    @type String
+    @default undefined
+    @private
+  */
+  layoutName?: string;
+}
+
+const Component = (CoreView.extend(
   ChildViewsSupport,
   ViewStateSupport,
   ClassNamesSupport,
@@ -986,23 +1019,6 @@ const Component = CoreView.extend(
      @since 1.13.0
      */
 
-    /**
-      Layout can be used to wrap content in a component.
-      @property layout
-      @type Function
-      @public
-    */
-
-    /**
-      The name of the layout to lookup if no layout is provided.
-      By default `Component` will lookup a template with this name in
-      `Ember.TEMPLATES` (a shared global object).
-      @property layoutName
-      @type String
-      @default null
-      @private
-    */
-
     /**
       The HTML `id` of the component's element in the DOM. You can provide this
       value yourself but it must be unique (just as in HTML):
@@ -1036,7 +1052,7 @@ const Component = CoreView.extend(
       @public
     */
   }
-);
+) as unknown) as ComponentClass;
 
 Component.toString = () => '@ember/component';
 

packages/@ember/-internals/glimmer/lib/environment.ts

@@ -41,7 +41,7 @@ setGlobalContext({
 
   warnIfStyleNotTrusted(value: unknown) {
     warn(
-      constructStyleDeprecationMessage(value),
+      constructStyleDeprecationMessage(String(value)),
       (() => {
         if (value === null || value === undefined || isHTMLSafe(value)) {
           return true;

packages/@ember/-internals/glimmer/lib/helper.ts

@@ -13,9 +13,15 @@ import { consumeTag, createTag, dirtyTag } from '@glimmer/validator';
 
 export const RECOMPUTE_TAG = symbol('RECOMPUTE_TAG');
 
-export type HelperFunction<T = unknown> = (positional: unknown[], named: Dict<unknown>) => T;
-
-export type SimpleHelperFactory = Factory<SimpleHelper, HelperFactory<SimpleHelper>>;
+export type HelperFunction<T, P extends unknown[], N extends Dict<unknown>> = (
+  positional: P,
+  named: N
+) => T;
+
+export type SimpleHelperFactory<T, P extends unknown[], N extends Dict<unknown>> = Factory<
+  SimpleHelper<T, P, N>,
+  HelperFactory<SimpleHelper<T, P, N>>
+>;
 export type ClassHelperFactory = Factory<HelperInstance, HelperFactory<HelperInstance>>;
 
 export interface HelperFactory<T> {
@@ -30,8 +36,8 @@ export interface HelperInstance<T = unknown> {
 
 const IS_CLASSIC_HELPER: unique symbol = Symbol('IS_CLASSIC_HELPER');
 
-export interface SimpleHelper<T = unknown> {
-  compute: HelperFunction<T>;
+export interface SimpleHelper<T, P extends unknown[], N extends Dict<unknown>> {
+  compute: HelperFunction<T, P, N>;
 }
 
 /**
@@ -89,7 +95,7 @@ interface Helper {
     @public
     @since 1.13.0
   */
-  compute(params: unknown[], hash: object): unknown;
+  compute(params: unknown[], hash: Dict<unknown>): unknown;
 }
 class Helper extends FrameworkObject {
   static isHelperFactory = true;
@@ -199,10 +205,11 @@ export const CLASSIC_HELPER_MANAGER = getInternalHelperManager(Helper);
 
 ///////////
 
-class Wrapper implements HelperFactory<SimpleHelper> {
+class Wrapper<T = unknown, P extends unknown[] = unknown[], N extends Dict<unknown> = Dict<unknown>>
+  implements HelperFactory<SimpleHelper<T, P, N>> {
   isHelperFactory: true = true;
 
-  constructor(public compute: HelperFunction) {}
+  constructor(public compute: HelperFunction<T, P, N>) {}
 
   create() {
     // needs new instance or will leak containers
@@ -256,7 +263,9 @@ setHelperManager(() => SIMPLE_CLASSIC_HELPER_MANAGER, Wrapper.prototype);
   @public
   @since 1.13.0
 */
-export function helper(helperFn: HelperFunction): HelperFactory<SimpleHelper> {
+export function helper<T, P extends unknown[], N extends Dict<unknown>>(
+  helperFn: HelperFunction<T, P, N>
+): HelperFactory<SimpleHelper<T, P, N>> {
   return new Wrapper(helperFn);
 }
 

packages/@ember/-internals/glimmer/lib/renderer.ts

@@ -1,6 +1,7 @@
 import { privatize as P } from '@ember/-internals/container';
 import { ENV } from '@ember/-internals/environment';
 import { getOwner, Owner } from '@ember/-internals/owner';
+import { guidFor } from '@ember/-internals/utils';
 import { getViewElement, getViewId } from '@ember/-internals/views';
 import { assert } from '@ember/debug';
 import { _backburner, _getCurrentRunLoop } from '@ember/runloop';
@@ -38,23 +39,29 @@ import { unwrapTemplate } from '@glimmer/util';
 import { CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator';
 import { SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface';
 import RSVP from 'rsvp';
+import Component from './component';
 import { BOUNDS } from './component-managers/curly';
 import { createRootOutlet } from './component-managers/outlet';
 import { RootComponentDefinition } from './component-managers/root';
 import { NodeDOMTreeConstruction } from './dom';
 import { EmberEnvironmentDelegate } from './environment';
 import ResolverImpl from './resolver';
-import { Component } from './utils/curly-component-state-bucket';
 import { OutletState } from './utils/outlet';
 import OutletView from './views/outlet';
 
 export type IBuilder = (env: Environment, cursor: Cursor) => ElementBuilder;
 
+export interface View {
+  parentView: Option<View>;
+  renderer: Renderer;
+  tagName: string | null;
+  elementId: string | null;
+  isDestroying: boolean;
+  isDestroyed: boolean;
+}
+
 export class DynamicScope implements GlimmerDynamicScope {
-  constructor(
-    public view: Component | {} | null,
-    public outletState: Reference<OutletState | undefined>
-  ) {}
+  constructor(public view: View | null, public outletState: Reference<OutletState | undefined>) {}
 
   child() {
     return new DynamicScope(this.view, this.outletState);
@@ -129,7 +136,7 @@ class RootState {
       template !== undefined
     );
 
-    this.id = getViewId(root);
+    this.id = root instanceof OutletView ? guidFor(root) : getViewId(root);
     this.result = undefined;
     this.destroyed = false;
 
@@ -449,7 +456,7 @@ export class Renderer {
     this._clearAllRoots();
   }
 
-  getElement(view: unknown): Option<SimpleElement> {
+  getElement(view: View): Option<SimpleElement> {
     if (this._isInteractive) {
       return getViewElement(view);
     } else {

packages/@ember/-internals/glimmer/lib/resolver.ts

@@ -174,7 +174,10 @@ export default class ResolverImpl implements RuntimeResolver<Owner>, CompileTime
     }
 
     const factory = owner.factoryFor(`helper:${name}`) as
-      | Factory<SimpleHelper, HelperFactory<SimpleHelper>>
+      | Factory<
+          SimpleHelper<unknown, unknown[], Record<string, unknown>>,
+          HelperFactory<SimpleHelper<unknown, unknown[], Record<string, unknown>>>
+        >
       | Factory<HelperInstance, HelperFactory<HelperInstance>>;
 
     if (factory === undefined) {

packages/@ember/-internals/glimmer/lib/utils/bindings.ts

@@ -10,7 +10,7 @@ import {
   Reference,
   valueForRef,
 } from '@glimmer/reference';
-import { Component } from './curly-component-state-bucket';
+import Component from '../component';
 
 function referenceForParts(rootRef: Reference<Component>, parts: string[]): Reference {
   let isAttrs = parts[0] === 'attrs';

packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts

@@ -1,27 +1,9 @@
 import { clearElementView, clearViewElement, getViewElement } from '@ember/-internals/views';
 import { registerDestructor } from '@glimmer/destroyable';
-import { CapturedNamedArguments, Template, TemplateFactory } from '@glimmer/interfaces';
+import { CapturedNamedArguments } from '@glimmer/interfaces';
 import { createConstRef, Reference } from '@glimmer/reference';
 import { beginUntrackFrame, endUntrackFrame, Revision, Tag, valueForTag } from '@glimmer/validator';
-import { Renderer } from '../renderer';
-
-export interface Component {
-  _debugContainerKey: string;
-  _transitionTo(name: string): void;
-  layout?: TemplateFactory | Template;
-  layoutName?: string;
-  attributeBindings: Array<string>;
-  classNames: Array<string>;
-  classNameBindings: Array<string>;
-  elementId: string;
-  tagName: string;
-  isDestroying: boolean;
-  appendChild(view: {}): void;
-  trigger(event: string): void;
-  destroy(): void;
-  setProperties(props: { [key: string]: any }): void;
-  renderer: Renderer;
-}
+import Component from '../component';
 
 type Finalizer = () => void;
 function NOOP() {}

packages/@ember/-internals/glimmer/lib/utils/managers.ts

@@ -17,10 +17,10 @@ import {
    @return {Object} the same object passed in
    @public
   */
-export function setComponentManager(
+export function setComponentManager<T extends object>(
   manager: (owner: Owner) => ComponentManager<unknown>,
-  obj: object
-): object {
+  obj: T
+): T {
   return glimmerSetComponentManager(manager, obj);
 }
 

packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts

@@ -1003,7 +1003,7 @@ if (ENV._DEBUG_RENDER_TREE) {
         );
 
         this.addComponent('hello-world', {
-          ComponentClass: Component.extend(),
+          ComponentClass: class extends Component {},
           template: 'Hello World',
         });
 
@@ -1498,11 +1498,12 @@ if (ENV._DEBUG_RENDER_TREE) {
         );
 
         this.addComponent('hello-world', {
-          ComponentClass: Component.extend({
-            init() {
+          ComponentClass: class extends Component {
+            constructor(owner: Owner) {
+              super(owner);
               throw new Error('oops!');
-            },
-          }),
+            }
+          },
           template: '{{@name}}',
         });
 

packages/@ember/-internals/runtime/lib/mixins/action_handler.d.ts

@@ -1,3 +1,6 @@
 import { Mixin } from '@ember/-internals/metal';
 
-export default class ActionHandler extends Mixin {}
+export default class ActionHandler extends Mixin {
+  actions?: Record<string, (...args: unknown[]) => void>;
+  send(actionName: string, ...args: unknown[]): void;
+}

packages/@ember/-internals/runtime/lib/mixins/evented.d.ts

@@ -13,6 +13,13 @@ interface Evented {
     method: string | ((this: Target, ...args: any[]) => void)
   ): this;
   on(name: string, method: ((...args: any[]) => void) | string): this;
+  // Allow for easier super calls
+  on<Target>(
+    name: string,
+    ...args:
+      | [Target, string | ((this: Target, ...args: any[]) => void)]
+      | [((...args: any[]) => void) | string]
+  ): this;
   /**
    * Subscribes a function to a named event and then cancels the subscription
    * after the first time the event is triggered. It is good to use ``one`` when

packages/@ember/-internals/runtime/lib/mixins/target_action_support.d.ts

@@ -0,0 +1,12 @@
+import Mixin from '@ember/object/mixin';
+
+interface TargetActionSupport {
+  target: unknown;
+  action: unknown;
+  actionContext: unknown;
+  actionContextObject: unknown;
+  triggerAction(opts?: object): unknown;
+}
+declare const TargetActionSupport: Mixin;
+
+export default TargetActionSupport;