ui5-community / ui5-community/babel-plugin-transform-modules-ui5

[FEATURE REQUEST] Derive UI5 Control Interfaces from TypeScript "implements" Clause

Open
#146 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
33
Forks
20
Avg merge
3h 22m
Merged PRs (30d)
1

Description

Derive UI5 Control Interfaces from TypeScript implements Clause

We (as in the UI5 framework runtime team, incl. @codeworrior) want to propose a feature to automatically derives interface definitions in UI5 control and component metadata from the implements clause in the corresponding TypeScript class definitions.
This feature would complement existing UI5 TypeScript tooling nicely and align with the broader goal of improving the development experience for UI5 applications.

Motivation

Currently, when developing UI5 controls in TypeScript, developers need to manually maintain interface definitions in both:

  1. The TypeScript class definition using the implements clause
  2. The UI5 control/component metadata object

This duplication can lead to mismatches between TypeScript interfaces and UI5 metadata if the developer is not careful, and issues are most likely only detected at runtime, since there is no static check for the interface array in the UI5 metadata.

A similar topic has been raised by @pubmike in the OpenUI5 repository quite a while ago. At this point in time we think the TypeScript support of UI5 is sufficiently matured to allow for better dev experience.

Proposed Solution

Enhance babel-plugin-transform-ui5 to automatically extract interface information from TypeScript implements clauses and generate the corresponding UI5 control metadata interface definitions.

Example

Before (current manual approach):

import { Label } from "sap/ui/core/library";

class MyControl extends Control implements Label {
  static readonly metadata = {
    interfaces: ["sap.ui.core.Label"], // Manual declaration needed
    // ... 
  };
  //...
}

After (proposed automatic derivation):

import { Label } from "sap/ui/core/library";

class MyControl extends Control implements Label {
  static readonly metadata = {
    // interfaces automatically derived from implements clause during transformation, the JS result will contain the interfaces array with the corresponding entry
    // ... 
  };
}

Expected Behavior

  1. Metadata Generation: Automatically populate the interfaces array in the UI5 metadata object
  2. Namespace Mapping: Convert TypeScript interface names to appropriate UI5 namespace format
  3. Backward Compatibility: Ensure existing manually defined interfaces continue to work, existing interfaces arrays must not be overwritten

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the Babel transformation logic for TypeScript classes and UI5 metadata in this plugin, then review how implements clauses and existing interfaces arrays are represented. Done means deriving the mapped UI5 interfaces without overwriting manually defined arrays, while preserving current behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, typescript
Domain
developer-experience, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.