Feature/required inputs (#673)

mklemarczyk · web-flow · commit 11f028d659b3 · 2025-06-27T08:59:59.000-07:00
* Update output-angular.ts

Adapt the component arguments to pass information on required inputs.

* Update generate-angular-component.ts

Processing of required inputs. Keep the order, but instead of specify only name, define it as object with required property set to true.

* Removed unused code and fixed the syntax

* Add type for component inputs in Angular

* Use ComponentInputProperty instead of two arrays with input property names.

* Adapt the argument for the createAngularComponentDefinition

* Use name field instead of object so correct text is put in proxy. + prettier

* Fix ordering the properties, as .sort() do not provide any order for objects when used without compare callback. + prettier

* Update proxies.ts after with build.

* Move mapPropName function to utils to avoid code duplication.

* Use mapPropName from utils

* Do not use require in @ProxyCmp, it require string array.

* Update generate-angular-component.test.ts with new parameter type and tests for required inputs.

* Update proxies.ts - remove new syntax from @ProxyCmp.

* Update types.ts - remove last new line
diff --git a/example-project/component-library-angular/projects/library/src/directives/proxies.ts b/example-project/component-library-angular/projects/library/src/directives/proxies.ts
@@ -448,7 +448,7 @@ export declare interface MyListScoped extends Components.MyListScoped {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['animated', 'backdropDismiss', 'component', 'componentProps', 'cssClass', 'event', 'keyboardClose', 'mode', 'showBackdrop', 'translucent'],
+  inputs: ['animated', 'backdropDismiss', { name: 'component', required: true }, 'componentProps', 'cssClass', 'event', 'keyboardClose', 'mode', 'showBackdrop', 'translucent'],
 })
 export class MyPopover {
   protected el: HTMLMyPopoverElement;
diff --git a/packages/angular/src/generate-angular-component.ts b/packages/angular/src/generate-angular-component.ts
@@ -1,7 +1,7 @@
 import type { CompilerJsDoc, ComponentCompilerEvent, ComponentCompilerProperty } from '@stencil/core/internal';
 
-import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList } from './utils';
-import type { OutputType } from './types';
+import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList, mapPropName } from './utils';
+import type { ComponentInputProperty, OutputType } from './types';
 
 /**
  * Creates a property declaration.
@@ -33,11 +33,30 @@ function createPropertyDeclaration(
   }
 }
 
+/**
+ * Creates a formatted inputs text with required declaration.
+ *
+ * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
+ * @returns The inputs list declaration as a string.
+ */
+function formatInputs(inputs: readonly ComponentInputProperty[]): string {
+  return inputs
+    .map((item) => {
+      if (item.required) {
+        return `{ name: '${item.name}', required: true }`;
+      } else {
+        return `'${item.name}'`;
+      }
+    })
+    .join(', ');
+}
+
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
  * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
  * @param includeImportCustomElements Whether to define the component as a custom element.
@@ -47,7 +66,7 @@ function createPropertyDeclaration(
  */
 export const createAngularComponentDefinition = (
   tagName: string,
-  inputs: readonly string[],
+  inputs: readonly ComponentInputProperty[],
   outputs: readonly string[],
   methods: readonly string[],
   includeImportCustomElements = false,
@@ -61,7 +80,10 @@ export const createAngularComponentDefinition = (
   const hasMethods = methods.length > 0;
 
   // Formats the input strings into comma separated, single quoted values.
-  const formattedInputs = formatToQuotedList(inputs);
+  const proxyCmpFormattedInputs = formatToQuotedList(inputs.map(mapPropName));
+  // Formats the input strings into comma separated, single quoted values if optional.
+  // Formats the required input strings into comma separated {name, required} objects.
+  const formattedInputs = formatInputs(inputs);
   // Formats the output strings into comma separated, single quoted values.
   const formattedOutputs = formatToQuotedList(outputs);
   // Formats the method strings into comma separated, single quoted values.
@@ -76,7 +98,7 @@ export const createAngularComponentDefinition = (
   }
 
   if (hasInputs) {
-    proxyCmpOptions.push(`\n  inputs: [${formattedInputs}]`);
+    proxyCmpOptions.push(`\n  inputs: [${proxyCmpFormattedInputs}]`);
   }
 
   if (hasMethods) {
diff --git a/packages/angular/src/output-angular.ts b/packages/angular/src/output-angular.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import type { CompilerCtx, ComponentCompilerMeta, ComponentCompilerProperty, Config } from '@stencil/core/internal';
-import type { OutputTargetAngular, PackageJSON } from './types';
+import type { ComponentInputProperty, OutputTargetAngular, PackageJSON } from './types';
 import {
   relativeImport,
   normalizePath,
@@ -10,6 +10,7 @@ import {
   createImportStatement,
   isOutputTypeCustomElementsBuild,
   OutputTypes,
+  mapPropName,
 } from './utils';
 import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
@@ -144,7 +145,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
   const proxyFileOutput = [];
 
   const filterInternalProps = (prop: { name: string; internal: boolean }) => !prop.internal;
-  const mapPropName = (prop: { name: string }) => prop.name;
+
+  // Ensure that virtual properties has required as false.
+  const mapInputProp = (prop: { name: string; required?: boolean }) => ({
+    name: prop.name,
+    required: prop.required ?? false,
+  });
 
   const { componentCorePackage, customElementsDir } = outputTarget;
 
@@ -157,13 +163,13 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
       internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
     }
 
-    const inputs = internalProps.map(mapPropName);
+    const inputs = internalProps.map(mapInputProp);
 
     if (cmpMeta.virtualProperties) {
-      inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
+      inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
     }
 
-    inputs.sort();
+    const orderedInputs = sortBy(inputs, (cip: ComponentInputProperty) => cip.name);
 
     const outputs: string[] = [];
 
@@ -187,7 +193,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
      */
     const componentDefinition = createAngularComponentDefinition(
       cmpMeta.tagName,
-      inputs,
+      orderedInputs,
       outputs,
       methods,
       isCustomElementsBuild,
diff --git a/packages/angular/src/types.ts b/packages/angular/src/types.ts
@@ -48,3 +48,8 @@ export interface ValueAccessorConfig {
 export interface PackageJSON {
   types: string;
 }
+
+export interface ComponentInputProperty {
+  name: string;
+  required: boolean;
+}
diff --git a/packages/angular/src/utils.ts b/packages/angular/src/utils.ts
@@ -10,6 +10,8 @@ export const OutputTypes: { [key: string]: OutputType } = {
 
 export const toLowerCase = (str: string) => str.toLowerCase();
 
+export const mapPropName = (prop: { name: string }) => prop.name;
+
 export const dashToPascalCase = (str: string) =>
   toLowerCase(str)
     .split('-')
diff --git a/packages/angular/tests/generate-angular-component.test.ts b/packages/angular/tests/generate-angular-component.test.ts
@@ -27,7 +27,7 @@ export class MyComponent {
     });
 
     it('generates a component with inputs', () => {
-      const component = createAngularComponentDefinition('my-component', ['my-input', 'my-other-input'], [], [], false);
+      const component = createAngularComponentDefinition('my-component', [{name: 'my-input', required: false}, {name: 'my-other-input', required: false}], [], [], false);
       expect(component).toMatch(`@ProxyCmp({
   inputs: ['my-input', 'my-other-input']
 })
@@ -48,6 +48,28 @@ export class MyComponent {
 }`);
     });
 
+    it('generates a component with inputs (required)', () => {
+      const component = createAngularComponentDefinition('my-component', [{name: 'my-input', required: false}, {name: 'my-other-input', required: true}], [], [], false);
+      expect(component).toMatch(`@ProxyCmp({
+  inputs: ['my-input', 'my-other-input']
+})
+@Component({
+  selector: 'my-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['my-input', { name: 'my-other-input', required: true }],
+  standalone: false
+})
+export class MyComponent {
+  protected el: HTMLMyComponentElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}`);
+    });
+
     it('generates a component with outputs', () => {
       const component = createAngularComponentDefinition(
         'my-component',
@@ -126,7 +148,7 @@ export class MyComponent {
     });
 
     it('generates a component with inputs', () => {
-      const component = createAngularComponentDefinition('my-component', ['my-input', 'my-other-input'], [], [], true);
+      const component = createAngularComponentDefinition('my-component', [{name: 'my-input', required: false}, {name: 'my-other-input', required: false}], [], [], true);
 
       expect(component).toEqual(`@ProxyCmp({
   defineCustomElementFn: defineMyComponent,
@@ -149,6 +171,30 @@ export class MyComponent {
 }`);
     });
 
+    it('generates a component with inputs (required)', () => {
+      const component = createAngularComponentDefinition('my-component', [{name: 'my-input', required: true}, {name: 'my-other-input', required: false}], [], [], true);
+
+      expect(component).toEqual(`@ProxyCmp({
+  defineCustomElementFn: defineMyComponent,
+  inputs: ['my-input', 'my-other-input']
+})
+@Component({
+  selector: 'my-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [{ name: 'my-input', required: true }, 'my-other-input'],
+  standalone: false
+})
+export class MyComponent {
+  protected el: HTMLMyComponentElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}`);
+    });
+
     it('generates a component with outputs', () => {
       const component = createAngularComponentDefinition(
         'my-component',
@@ -227,7 +273,7 @@ export class MyComponent {
 
   describe('inline members', () => {
     it('generates component with inlined member with jsDoc', () => {
-      const component = createAngularComponentDefinition('my-component', ['myMember'], [], [], false, false, [
+      const component = createAngularComponentDefinition('my-component', [{name: 'myMember', required: false}], [], [], false, false, [
         {
           docs: {
             tags: [{ name: 'deprecated', text: 'use v2 of this API' }],

Original file line number	Diff line number	Diff line change
`@@ -48,3 +48,8 @@ export interface ValueAccessorConfig {`
`48`	`48`	`export interface PackageJSON {`
`49`	`49`	`types: string;`
`50`	`50`	`}`
	`51`	`+`
	`52`	`+export interface ComponentInputProperty {`
	`53`	`+ name: string;`
	`54`	`+ required: boolean;`
	`55`	`+}`