refactor(core): introduce output() signature and runtime code (angular#54217)

This commit introduces the `output()` function and corresponding
runtime code.

In practice, `output()` will defer to `EventEmitter` as outlined in the
RFC, but we are considering limiting the type to a minimal version that
is not coupled with RxJS, less complex, and also has better type safety
around emitting of values.

E.g. currently `EventEmitter.emit` can always be called without
any value, even though the output may be typed to always pass around
values of type `T`. This could cause subtle and confusing bugs.

PR Close angular#54217

Author: devversion

packages/core/src/authoring.ts

@@ -12,3 +12,4 @@
 export {InputFunction} from './authoring/input/input';
 export {InputOptions, InputOptionsWithoutTransform, InputOptionsWithTransform, InputSignal, InputSignalWithTransform, ɵINPUT_SIGNAL_BRAND_WRITE_TYPE} from './authoring/input/input_signal';
 export {ɵUnwrapDirectiveSignalInputs} from './authoring/input/input_type_checking';
+export {output as ɵoutput, OutputEmitter as ɵOutputEmitter, OutputOptions as ɵOutputOptions} from './authoring/output';

packages/core/src/authoring/output.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {EventEmitter} from '../event_emitter';
+
+/**
+ * An `OutputEmitter` is created by the `output()` function and can be
+ * used to emit values to consumers of your directive or component.
+ *
+ * Consumers of your directive/component can bind to the output and
+ * subscribe to changes via the bound event syntax. For example:
+ *
+ * ```html
+ * <my-comp (valueChange)="processNewValue($event)" />
+ * ```
+ *
+ * @developerPreview
+ */
+export interface OutputEmitter<T> {
+  emit(value: T): void;
+
+  // TODO: Consider exposing `subscribe` for dynamically created components.
+  /** @internal */
+  subscribe(listener: (v: T) => void): void;
+}
+
+/**
+ * Options for declaring an output.
+ *
+ * @developerPreview
+ */
+export interface OutputOptions {
+  alias?: string;
+}
+
+/**
+ * The `outputs` function allows declaration of outputs in directives and
+ * components.
+ *
+ * Initializes an output that can emit values to consumers of your
+ * directive/component.
+ *
+ * @usageNotes
+ * Initialize an output in your directive by declaring a
+ * class field and initializing it with the `output()` function.
+ *
+ * ```ts
+ * @Directive({..})
+ * export class MyDir {
+ *   nameChange = output<string>();     // OutputEmitter<string>
+ *   onClick = output();                // OutputEmitter<void>
+ * }
+ * ```
+ *
+ * @developerPreview
+ */
+export function output<T = void>(opts?: OutputOptions): OutputEmitter<T> {
+  return new EventEmitter();
+}

packages/core/test/bundling/defer/bundle.golden_symbols.json

@@ -1640,6 +1640,9 @@
   {
     "name": "init_operators"
   },
+  {
+    "name": "init_output"
+  },
   {
     "name": "init_partial"
   },

packages/core/test/bundling/router/bundle.golden_symbols.json

@@ -1980,7 +1980,7 @@
     "name": "tap"
   },
   {
-    "name": "throwError2"
+    "name": "throwError"
   },
   {
     "name": "throwIfEmpty"