feat(vite-plugin-angular): support inputs and outputs for .ng format

apps/ng-app/src/app/app.component.ng

@@ -22,6 +22,7 @@
 
   const counter = signal(1);
   const doubled = computed(() => counter() * 2);
+  const text = computed(() => `The count from parent is: ${counter()}`);
   const todo = signal(null);
 
   const increment = () => {
@@ -32,6 +33,10 @@
     counter.update((value) => value - 1);
   }
 
+  function onClick(event: MouseEvent) {
+    console.log('the click from Hello', event);
+  }
+
   effect(() => {
     console.log('counter changed', counter());
   });
@@ -50,7 +55,7 @@
 
 <template>
   @if (counter() > 5) {
-  <Hello />
+  <Hello [text]="text()" (clicked)="onClick($event)" />
   <AnotherOne />
   <app-hello-original />
   }
@@ -68,11 +73,11 @@
   <p>Loading todo...</p>
   }
 
-  <br/>
+  <br />
 
   <a routerLink="/">Home</a> | <a routerLink="/about">About</a>
 
-  <br/>
+  <br />
 
   <router-outlet />
 </template>

apps/ng-app/src/app/hello.ng

@@ -1,9 +1,23 @@
 <script lang="ts">
-  import { DestroyRef, inject } from '@angular/core';
+  import {
+    DestroyRef,
+    inject,
+    input,
+    EventEmitter,
+    effect,
+  } from '@angular/core';
 
   const { foo: aliasFoo = 'tran', ...rest } = { foo: 'chau' };
   const [a, b, , c = 5, ...restArray] = [1, 2, 3];
 
+  const text = input('');
+
+  effect(() => {
+    console.log('text changed', text());
+  });
+
+  const clicked = new EventEmitter<MouseEvent>();
+
   inject(DestroyRef).onDestroy(() => {
     console.log('hello destroyed');
   });
@@ -15,4 +29,15 @@
   <p>{{ b }}</p>
   <p>{{ c }}</p>
   <p>{{ aliasFoo }}</p>
+  <p>Text from input: {{ text() }}</p>
+  <button (click)="clicked.emit($event)">Emit The Click</button>
 </template>
+
+<style>
+  :host {
+    display: block;
+    padding: 1rem;
+    border: 1px dashed red;
+    border-radius: 0.5rem;
+  }
+</style>

apps/ng-app/src/app/hello.ts

@@ -7,7 +7,7 @@ import Hello from './hello.ng';
   template: `
     <p>I'm a boring hello</p>
     <p>Below me is a cool hello though</p>
-    <Hello />
+    <Hello text="this is from the boring HelloOriginal" />
   `,
   imports: [Hello],
 })

package.json

@@ -43,17 +43,17 @@
     "apps/docs-app"
   ],
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/cdk": "^17.0.1",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/material": "^17.0.1",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/platform-server": "^17.0.0",
-    "@angular/router": "^17.0.0",
+    "@angular/animations": "^17.1.0-rc.0",
+    "@angular/cdk": "^17.1.0-rc.0",
+    "@angular/common": "^17.1.0-rc.0",
+    "@angular/compiler": "^17.1.0-rc.0",
+    "@angular/core": "^17.1.0-rc.0",
+    "@angular/forms": "^17.1.0-rc.0",
+    "@angular/material": "^17.1.0-rc.0",
+    "@angular/platform-browser": "^17.1.0-rc.0",
+    "@angular/platform-browser-dynamic": "^17.1.0-rc.0",
+    "@angular/platform-server": "^17.1.0-rc.0",
+    "@angular/router": "^17.1.0-rc.0",
     "@astrojs/mdx": "^1.1.0",
     "@astrojs/react": "^3.0.0",
     "@babel/core": "^7.21.8",
@@ -82,15 +82,15 @@
     "zone.js": "^0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular-devkit/core": "^17.0.0",
-    "@angular-devkit/schematics": "^17.0.0",
+    "@angular-devkit/build-angular": "^17.1.0-rc.1",
+    "@angular-devkit/core": "^17.1.0-rc.1",
+    "@angular-devkit/schematics": "^17.1.0-rc.1",
     "@angular-eslint/eslint-plugin": "16.0.1",
     "@angular-eslint/eslint-plugin-template": "16.0.1",
     "@angular-eslint/template-parser": "16.0.1",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/language-service": "^17.0.0",
+    "@angular/cli": "^17.1.0-rc.1",
+    "@angular/compiler-cli": "^17.1.0-rc.0",
+    "@angular/language-service": "^17.1.0-rc.0",
     "@astrojs/markdown-component": "^1.0.5",
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",

packages/vite-plugin-angular/src/lib/authoring/__snapshots__/ng.spec.ts.snap

@@ -2,7 +2,8 @@
 
 exports[`authoring ng file > should process component as ng file 1`] = `
 "import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { signal } from "@angular/core";
+import { signal, input } from "@angular/core";
+import { Output } from "@angular/core";
 
 @Component({
     standalone: true,
@@ -22,21 +23,48 @@ export default class VirtualAnalogComponent {
         setTimeout(() => {
             test = 'test';
         }, 1000)
-        const counter = (this.counter = signal(0));
+        const counter = this.counter
         const [a, b, , c = 4] = [1, 2, 3];
         this.a = a;
         this.b = b;
         this.c = c;
+        const inputWithDefault = this.inputWithDefault
+        const inputWithoutDefault = this.inputWithoutDefault
+        const inputWithAlias = this.inputWithAlias
+        const inputWithoutDefaultWithAlias = this.inputWithoutDefaultWithAlias
+        const inputWithTransform = this.inputWithTransform
+        const requiredInput = this.requiredInput
+        const requiredInputWithTransform = this.requiredInputWithTransform
+        const output = this.output
+        const outputWithType = this.outputWithType
 
         Object.defineProperties(this, {
             test: { get() { return test; } },
         });
     }
 
     protected Math = Math;
+    protected counter = signal(0);
     protected a;
     protected b;
     protected c;
+    protected inputWithDefault = input("");
+    protected inputWithoutDefault = input<string>();
+    protected inputWithAlias = input("", { alias: "theAlias" });
+    protected inputWithoutDefaultWithAlias = input<string | undefined>(undefined, {
+        alias: "theAlias",
+    });
+    protected inputWithTransform = input<unknown, boolean>("", {
+        transform: booleanAttribute,
+    });
+    protected requiredInput = input.required<string>();
+    protected requiredInputWithTransform = input.required<unknown, number>({
+        transform: (value) => numberAttribute(value, 10),
+    });
+    @Output
+    protected output = new EventEmitter();
+    @Output
+    protected outputWithType = new EventEmitter<string>();
 }
 "
 `;
@@ -51,7 +79,7 @@ import { inject, ElementRef, afterNextRender } from "@angular/core";
 })
 export default class VirtualAnalogDirective {
     constructor() {
-        const elRef = (this.elRef = inject(ElementRef));
+        const elRef = this.elRef
         afterNextRender(() => {
             elRef.nativeElement.focus();
         });
@@ -63,6 +91,8 @@ export default class VirtualAnalogDirective {
         });
     }
 
+    protected elRef = inject(ElementRef);
+
     ngOnInit() {
         this.onInit();
     }

packages/vite-plugin-angular/src/lib/authoring/ng.spec.ts

@@ -2,7 +2,7 @@ import { compileNgFile } from './ng';
 
 const COMPONENT_CONTENT = `
 <script lang="ts">
-import { signal } from '@angular/core';
+import { signal, input } from '@angular/core';
 
 defineMetadata({
   exposes: [Math]
@@ -16,6 +16,22 @@ setTimeout(() => {
 
 const counter = signal(0);
 const [a, b, , c = 4] = [1, 2, 3];
+
+const inputWithDefault = input(""); // InputSignal<string, string>
+const inputWithoutDefault = input<string>(); // InputSignal<string | undefined, string | undefined>
+const inputWithAlias = input("", { alias: "theAlias" }); // InputSignal<string, string>
+const inputWithoutDefaultWithAlias = input<string | undefined>(undefined, {
+    alias: "theAlias",
+  }); // InputSignal<string | undefined, string | undefined>
+const inputWithTransform = input<unknown, boolean>("", {
+    transform: booleanAttribute,
+  }); // InputSignal<unknown, boolean>
+const requiredInput = input.required<string>(); // InputSignal<string, string>
+const requiredInputWithTransform = input.required<unknown, number>({
+    transform: (value) => numberAttribute(value, 10),
+  });
+const output = new EventEmitter();
+const outputWithType = new EventEmitter<string>();
 </script>
 
 <template>