fix(app): support input models | first level of syntax support

vogloblinsky · vogloblinsky · commit 3b41147154c1 · 2024-04-27T14:13:59.000+02:00
fix #1474
diff --git a/src/app/compiler/angular/deps/helpers/component-helper.ts b/src/app/compiler/angular/deps/helpers/component-helper.ts
@@ -138,13 +138,22 @@ export class ComponentHelper {
     public getInputSignals(props) {
         let inputSignals = [];
         props?.forEach((prop, i) => {
-            const regexp = /input(?:\.(required))?(?:<([\w-]+)>)?\(([\w-]+)?\)/;
-            const res = regexp.exec(prop.defaultValue);
-            if (res) {
+            const regexpInput = /input(?:\.(required))?(?:<([\w-]+)>)?\(([\w-]+)?\)/;
+            const resInput = regexpInput.exec(prop.defaultValue);
+            if (resInput) {
                 const newInput = prop;
-                newInput.defaultValue = res[res.length - 1];
-                newInput.required = res[0]?.includes('.required') ?? false;
+                newInput.defaultValue = resInput[resInput.length - 1];
+                newInput.required = resInput[0]?.includes('.required') ?? false;
                 inputSignals.push(newInput);
+            } else {
+                const regexpModel = /model(?:\.(required))?(?:<([\w-]+)>)?\(([\w-]+)?\)/;
+                const resModel = regexpModel.exec(prop.defaultValue);
+                if (resModel) {
+                    const newInput = prop;
+                    newInput.defaultValue = resModel[resModel.length - 1];
+                    newInput.required = resModel[0]?.includes('.required') ?? false;
+                    inputSignals.push(newInput);
+                }
             }
         });
         return inputSignals;
diff --git a/test/fixtures/todomvc-ng2/src/app/about/compodoc/compodoc.component.ts b/test/fixtures/todomvc-ng2/src/app/about/compodoc/compodoc.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, model, input, Input, output } from '@angular/core';
 
 /**
  * The compodoc component
@@ -8,4 +8,26 @@ import { Component } from '@angular/core';
     templateUrl: './compodoc.component.html',
     styleUrl: './compodoc.component.css'
 })
-export class CompodocComponent {}
+export class CompodocComponent {
+    // model input.
+    checked = model(false);
+
+    // model input.
+    checkedInf = model<string>();
+
+    // model input.
+    checkedRequired = model.required<boolean>();
+
+    // standard input.
+    disabled = input(false);
+
+    // optional input
+    firstName = input<string>();
+
+    // required inputs
+    lastName = input.required<string>();
+
+    buttonClick = output<MouseEvent>();
+
+    buttonClickSimple = output();
+}
diff --git a/test/src/cli/cli-generation-big-app.spec.ts b/test/src/cli/cli-generation-big-app.spec.ts
@@ -974,10 +974,18 @@ describe('CLI simple generation - big app', () => {
         expect(file).to.contain('<div><i>&nbsp;Inputs</i> : color&nbsp;</div>');
     });
 
-    it('should support inputs and outputs signals', () => {
-        const file = read(distFolder + '/classes/DumbParentComponent.html');
+    it('should support inputs and outputs signals and model', () => {
+        let file = read(distFolder + '/classes/DumbParentComponent.html');
         expect(file).to.contain('<a href="#label" >label</a>');
         expect(file).to.contain('<a href="#currentChange" >currentChange</a>');
+        file = read(distFolder + '/components/CompodocComponent.html');
+        expect(file).to.contain(`<h3 id="inputs">Inputs</h3>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="checked"></a>
+                        <b>checked</b>`);
     });
 
     it('should support component styles url/urls', () => {
