Feature Request Description

Developing a webcomponent requires access to ExampleComponent.ts, ExampleComponentTemplate.tsx, and ExampleComponent.css.

Currently, there are two problems the cause these 3 files not sitting next to each other in the file explorer of an IDE.

1. css file is in the theme folder. When the number of components are large, it is not most convenient to look for the css file for a given web component.
2. JSX/TSX template file naming convention is not ideal. E.g. Source files for Avatar and AvatarGroup are mixed: https://github.com/SAP/ui5-webcomponents/tree/main/packages/main/src

Proposed Solution

Problem 1: Move css files under src folder instead of src/themes.
Problem 2: Use ExampleComponent.template.tsx instead of ExampleComponentTemplate.tsx.

By doing this, it should allow all 3 source files for developing a webcomponent to align next to each other in file explorer. E.g.

src
    - Avatar.css
    - Avatar.template.tsx
    - Avatar.ts
    - AvatarGroup.css
    - AvatarGroup.template.tsx
    - AvatarGroup.ts

instead of

-  themes
    ......
    ......
    - Avatar.css
    - AvatarGroup.css
    ......
    ......
    ......
    ......
    ......
    ......
......
......
- Avatar.ts
- AvatarGroup.ts
- AvatarGroupTemplate.tsx
- AvatarTemplate.tsx
......
......
......

Both also require changes when running wc-create-ui5-element.

Note: It would also be great to be able to configure wc-create-ui5-element so that the generated source code files can have configurable prefix. E.g. ui5-example-component instead of my-example-component.

Priority

Medium

Privacy Policy

• I’m not disclosing any internal or sensitive information.