webc-generator

webc-generator: Technical Summary

The webc-generator is an NX executor that automatically converts UI5 Web Components into Angular-native wrapper components. It eliminates manual maintenance of 100+ component wrappers by reading a Custom Elements Manifest (CEM) and generating the full library from it.

Do not hand-edit files under libs/ui5-webcomponents*/ — run the generator instead.

---

Directory Structure

libs/webc-generator/
├── src/
│   ├── executors/generate/
│   │   ├── executor.ts               # Main orchestration logic
│   │   ├── schema.json / schema.d.ts # NX executor options schema
│   │   ├── component-template.ts     # Angular component code generator
│   │   └── utils/
│   │       ├── cva.ts                # GenericControlValueAccessor directive
│   │       ├── ng-package.json       # Template for secondary entry points
│   │       └── theming-service-template.tpl
│   └── index.ts
├── executors.json                    # Registers the "generate" executor
└── package.json

---

Pipeline Overview

CEM JSON file (from @ui5/webcomponents package)
        │
        ▼
  loadCemData()        — resolve & parse JSON
        │
        ▼
  extractCemData()     — filter custom element declarations, collect enums
        │
        ├─▶ generateTypesFiles()      — types/ secondary entry point (enum re-exports)
        ├─▶ generateThemingFiles()    — theming/ secondary entry point (ThemingService)
        ├─▶ generateCvaFile()         — utils/cva.ts (Control Value Accessor)
        ├─▶ generateUtilsFiles()      — utils/ secondary entry point
        └─▶ generateComponentFiles() — one directory per component (parallel)
                    │
                    ▼
             componentTemplate()     — produces the Angular wrapper class
        │
        ▼
  Root index.ts        — aggregates all component + secondary entry point exports

---

Inputs

The executor is configured per-library in the library's project.json:

{
    "executor": "@fundamental-ngx/webc-generator:generate",
    "options": {
        "cemFile": "@ui5/webcomponents/dist/custom-elements-internal.json",
        "targetDir": ".",
        "packageName": "@ui5/webcomponents",
        "outputPath": "libs/ui5-webcomponents",
        "tsConfig": "libs/ui5-webcomponents/tsconfig.lib.json"
    }
}