fix: fixed ui5 radio button and select cva support (#112)

* fix: fixed ui5 radio button cva support * chore: updated ui5-webcomponents to 1.21.1 * chore: updated snapshots
SAP · Jan 11, 2024 · 13ef79d · 13ef79d
1 parent 421d60b
commit 13ef79d
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 116 deletions.
diff --git a/libs/angular-generator/src/index.ts b/libs/angular-generator/src/index.ts
@@ -1,6 +1,8 @@
 export * from './lib/angular-export-specifier-type';
 export * from './lib/fundamental-styles/fundamental-generator';
 export * from './lib/ui5-webcomponents/ui5componentsWrapper';
+export * from './lib/ui5-webcomponents/ts-component-file';
+export * from './lib/ui5-webcomponents/js-component-file';
 export * from './lib/ui5-webcomponents/storybook-files-generator';
 export * from './lib/angular-generated-file';
 export * from './lib/angular-module-file';

diff --git a/libs/angular-generator/src/lib/ui5-webcomponents/component-wrapper-creator.ts b/libs/angular-generator/src/lib/ui5-webcomponents/component-wrapper-creator.ts
@@ -1,7 +1,7 @@
 import {AngularGeneratorOptions} from "../angular-generator-options";
 import {ComponentData, InputType, OutputType} from "@ui5/webcomponents-wrapper";
 import {camelCase} from 'lodash';
-import {ComponentFile} from "./component-file";
+import {JsComponentFile} from "./js-component-file";
 import {genericCva} from "./generic-cva";
 import {AngularGeneratedFile} from "../angular-generated-file";
 import {inputsJson, outputsJson} from "./metadata-tools";
@@ -13,7 +13,7 @@ import {outputType} from "./output-type";
  * @param componentFile
  * @constructor
  */
-function CvaBaseClassExtends(componentFile: ComponentFile): string {
+function CvaBaseClassExtends(componentFile: JsComponentFile): string {
   if (componentFile.componentData.formData.length === 0) {
     return '';
   }
@@ -24,7 +24,7 @@ function CvaBaseClassExtends(componentFile: ComponentFile): string {
  * Returns the providers string for the component file.
  * @param componentFile
  */
-function providers(componentFile: ComponentFile) {
+function providers(componentFile: JsComponentFile) {
   if (componentFile.componentData.formData.length === 0) {
     return '';
   }
@@ -38,7 +38,7 @@ function providers(componentFile: ComponentFile) {
  * @param componentFile
  * @constructor
  */
-export function CvaConstructor(componentFile: ComponentFile): string {
+export function CvaConstructor(componentFile: JsComponentFile): string {
   if (componentFile.componentData.formData.length > 0) {
     let getValue, setValue;
     const outputEvents = [...(new Set(componentFile.componentData.formData.reduce((acc: OutputType[], form) => {
@@ -100,7 +100,7 @@ export function CvaConstructor(componentFile: ComponentFile): string {
  * @constructor
  */
 export function ComponentWrapperCreator(
-  componentFile: ComponentFile,
+  componentFile: JsComponentFile,
   elementTypeName: string,
   eventsMapName: string,
   options: AngularGeneratorOptions,

diff --git a/...c/lib/ui5-webcomponents/component-file.ts → ...ib/ui5-webcomponents/js-component-file.ts b/...c/lib/ui5-webcomponents/component-file.ts → ...ib/ui5-webcomponents/js-component-file.ts
@@ -11,7 +11,7 @@ import {outputTypesImportData} from "./output-types-import-data";
 /**
  * The Angular Component file creator.
  */
-export class ComponentFile extends AngularGeneratedFile {
+export class JsComponentFile extends AngularGeneratedFile {
   /** The export specifier of the component wrapper */
   wrapperExportSpecifier!: ExportSpecifier<AngularExportSpecifierType>;
   /** The name of the element type */

diff --git a/libs/angular-generator/src/lib/ui5-webcomponents/ts-component-file.ts b/libs/angular-generator/src/lib/ui5-webcomponents/ts-component-file.ts
@@ -95,41 +95,43 @@ export class TsComponentFile extends AngularGeneratedFile {
       }`
   }
 
-  private getComponentCode(): string {
-    const baseClass = () => {
-      if (this.componentData.formData.length === 0) {
-        return '';
-      }
-      return `extends ${genericCva.exports[0].specifiers[0].exported}`;
-    }
-    const cvaConstructor = (): string => {
-      if (this.componentData.formData.length > 0) {
-        let getValue, setValue;
-        const outputEvents = [...(new Set(this.componentData.formData.reduce((acc: OutputType[], form) => {
-          return acc.concat(form.events);
-        }, []))).values()];
-        if (this.componentData.formData.length > 1) {
-          getValue = `{
-          ${this.componentData.formData.map(({property}) => `${property.name}: elementRef.nativeElement.${property.name}`).join(',\n')}
+  getCvaGetSetCode(): { getterContent: string, setterContent: string } {
+    let getterContent: string;
+    let setterContent: string;
+
+    if (this.componentData.formData.length > 1) {
+      getterContent = `{
+          ${this.componentData.formData.map(({ property }) => `${property.name}: elementRef.nativeElement.${property.name}`).join(',\n')}
         }`;
-          setValue = `
-          ${this.componentData.formData.map(({property}) => `elementRef.nativeElement.${property.name} = val?.${property.name}`).join(';\n')}
+      setterContent = `
+          ${this.componentData.formData.map(({ property }) => `elementRef.nativeElement.${property.name} = val?.${property.name}`).join(';\n')}
         `;
-        } else {
-          try {
-            getValue = `elementRef.nativeElement.${this.componentData.formData[0].property.name}`;
-            setValue = `elementRef.nativeElement.${this.componentData.formData[0].property.name} = val;`;
-          } catch (e) {
-            console.log(e);
-          }
-        }
+    } else {
+      try {
+        getterContent = `elementRef.nativeElement.${this.componentData.formData[0].property.name}`;
+        setterContent = `elementRef.nativeElement.${this.componentData.formData[0].property.name} = val;`;
+      } catch (e) {
+        console.log(e);
+        getterContent = '';
+        setterContent = '';
+      }
+    }
+    return { getterContent: `return ${getterContent}`, setterContent: setterContent };
+  }
 
-        return `super({
+  getConstructorBody(): string {
+    if (this.componentData.formData.length > 0) {
+      const { getterContent, setterContent } = this.getCvaGetSetCode();
+      const outputEvents = [...(new Set(this.componentData.formData.reduce((acc: OutputType[], form) => {
+        return acc.concat(form.events);
+      }, []))).values()];
+
+      return `super({
               get value() {
-                return ${getValue}
+                ${getterContent}
               },
               set value(val) {
-                ${setValue}
+                ${setterContent}
               },
               valueUpdatedNotifier$: merge(
                 ${outputEvents.map((event) => `fromEvent(elementRef.nativeElement, '${event.name}')`).join(',\n')}
@@ -142,9 +144,18 @@ export class TsComponentFile extends AngularGeneratedFile {
               first()
             ).subscribe(() => this.onTouched());
             `;
+    }
+    return '';
+  }
+
+  private getComponentCode(): string {
+    const baseClass = () => {
+      if (this.componentData.formData.length === 0) {
+        return '';
       }
-      return '';
+      return `extends ${genericCva.exports[0].specifiers[0].exported}`;
     }
+
     return `
       // TS source file
       @ProxyInputs(${JSON.stringify(this.componentData.inputs.map(i => i.name))})
@@ -169,7 +180,7 @@ export class TsComponentFile extends AngularGeneratedFile {
         ${this.componentData.inputs.filter(({type}) => typeof type === 'string' && type.indexOf('any') === -1).map(({name}) => `${name}?: ${this.componentData.baseName}Element['${name}'];`).join('\n')}
         constructor(private c: ChangeDetectorRef, private elementRef: ElementRef<${this.componentData.baseName}Element>, private zone: NgZone) {
           c.detach();
-          ${cvaConstructor()}
+          ${this.getConstructorBody()}
         }
 
         get element(): ${this.componentData.baseName}Element {

diff --git a/libs/angular-generator/src/lib/ui5-webcomponents/ui5componentsWrapper.ts b/libs/angular-generator/src/lib/ui5-webcomponents/ui5componentsWrapper.ts
@@ -7,7 +7,7 @@ import {IndexFile} from "../index-file";
 import {join} from "path";
 import {AngularModuleFile} from "../angular-module-file";
 import {TsComponentFile} from "./ts-component-file";
-import {ComponentFile} from "./component-file";
+import {JsComponentFile} from "./js-component-file";
 import { utilsFile } from "./utils";
 
 function getComponentFile(componentData: ComponentData, options: AngularGeneratorOptions, cache: Map<ComponentData, AngularGeneratedFile>): AngularGeneratedFile {
@@ -23,7 +23,7 @@ function getComponentFile(componentData: ComponentData, options: AngularGenerato
     require.resolve(componentData.path.replace(/\.js$/, '.d.ts'));
     componentFile = new TsComponentFile(componentData, options, cache);
   } catch (e) {
-    componentFile = new ComponentFile(componentData, options, cache);
+    componentFile = new JsComponentFile(componentData, options, cache);
   }
   if (componentData.imports.length > 0) {
     componentData.imports.forEach(i => {