feat(ui5-tooling-transpile): integrate ts-interface-generator

If a TypeScript project adds the dependency to the ts-interface-generator
the ui5-tooling-transpile-middleware tries to start the watch mode so
that changes to control files will automatically update the interfaces
and that code completion can work properly. For now this only works for
the local project, not for dependencies.

.prettierignore

@@ -21,3 +21,4 @@ pnpm-lock.yaml
 /**/*.svg
 /**/*.png
 /**/*.md
+/**/*.gen.d.ts

packages/ui5-tooling-transpile/README.md

@@ -41,6 +41,9 @@ npm install ui5-tooling-transpile --save-dev
 - transformTypeScript: `boolean` (old alias: transpileTypeScript)
  if enabled, the tooling extension transforms TypeScript sources; the default value is derived from the existence of a `tsconfig.json` in the root folder of the project - if the file exists the configuration option is `true` otherwise `false`; setting this configuration option overrules the automatic determination
 
+- generateTsInterfaces: `boolean|undefined` (*experimental feature*)
+ option requires a dependency to the `@ui5/ts-interface-generator` when either the value of the option is `true` or `undefined` and the project is a TypeScript-based project or the `transformTypeScript` option is set to `true` - can be forced to be inactive by setting the option to `false` (only relevant for the middleware)
+
 - generateDts: `boolean`
  if enabled, the tooling extension will generate type definitions (`.d.ts`) files; by default for projects of type `library` this option is considered as `true` and for other projects such as `application` this option is considered as `false` by default (is only relevant in case of transformTypeScript is `true`)
 

packages/ui5-tooling-transpile/lib/middleware.js

@@ -87,6 +87,28 @@ module.exports = async function ({ log, resources, options, middlewareUtil }) {
  );
  }
 
+ // if the project is a TypeScript-based project
+ // let's try to start the ts-interface-generator
+ // if the dependency is present
+ if (config.generateTsInterfaces) {
+ const argvOrg = process.argv;
+ try {
+ // check if the dependency could be found
+ const module = require.resolve("@ui5/ts-interface-generator", {
+ paths: [cwd]
+ });
+ // launch the ts-interface-generator in watch mode
+ process.argv = [process.argv[0], process.argv[1], "--watch", "--logLevel", log.constructor.getLevel()];
+ require(module);
+ } catch (e) {
+ config.debug &&
+ log.error(
+ "Failed to generate the control interfaces! The dependency to the @ui5/ts-interface-generator is missing!"
+ );
+ }
+ process.argv = argvOrg;
+ }
+
  return async (req, res, next) => {
  const pathname = parseurl(req)?.pathname;
  if (pathname.endsWith(".js") && shouldHandlePath(pathname, config.excludes, config.includes)) {

packages/ui5-tooling-transpile/lib/util.js

@@ -127,6 +127,8 @@ module.exports = function (log) {
  excludes,
  filePattern,
  omitTSFromBuildResult: config.omitTSFromBuildResult,
+ generateTsInterfaces:
+ config.generateTsInterfaces !== undefined ? config.generateTsInterfaces : transformTypeScript,
  generateDts: config.generateDts,
  transpileDependencies: config.transpileDependencies,
  transformAtStartup: config.transformAtStartup,

packages/ui5-tooling-transpile/package.json

@@ -22,6 +22,14 @@
  "devDependencies": {
  "ava": "^5.3.1"
  },
+ "peerDependencies": {
+ "@ui5/ts-interface-generator": ">=0.7.0"
+ },
+ "peerDependenciesMeta": {
+ "@ui5/ts-interface-generator": {
+ "optional": true
+ }
+ },
  "scripts": {
  "lint": "eslint lib",
  "test": "ava --no-worker-threads"

showcases/ui5-tsapp-simple/webapp/control/SimpleControl.gen.d.ts

@@ -0,0 +1,34 @@
+import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+import { $ControlSettings } from "sap/ui/core/Control";
+
+declare module "./SimpleControl" {
+
+ /**
+ * Interface defining the settings object used in constructor calls
+ */
+ interface $SimpleControlSettings extends $ControlSettings {
+ text?: string | PropertyBindingInfo;
+ }
+
+ export default interface SimpleControl {
+
+ // property: text
+
+ /**
+ * Gets current value of property "text".
+ *
+ * @returns Value of property "text"
+ */
+ getText(): string;
+
+ /**
+ * Sets a new value for property "text".
+ *
+ * When called with a value of "null" or "undefined", the default value of the property will be restored.
+ *
+ * @param text New value for property "text"
+ * @returns Reference to "this" in order to allow method chaining
+ */
+ setText(text: string): this;
+ }
+}

showcases/ui5-tsapp-simple/webapp/control/SimpleControl.ts

@@ -0,0 +1,36 @@
+import Control from "sap/ui/core/Control";
+import RenderManager from "sap/ui/core/RenderManager";
+import type { MetadataOptions } from "sap/ui/core/Element";
+
+/**
+ * @namespace ui5.ecosystem.demo.simpletsapp.control
+ */
+export default class SimpleControl extends Control {
+ static readonly metadata: MetadataOptions = {
+ properties: {
+ text: "string",
+ },
+ };
+
+ // The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures
+ constructor(idOrSettings?: string | $SimpleControlSettings);
+ constructor(id?: string, settings?: $SimpleControlSettings);
+ constructor(id?: string, settings?: $SimpleControlSettings) {
+ super(id, settings);
+ }
+
+ renderer = {
+ apiVersion: 2,
+ render: (rm: RenderManager, control: SimpleControl) => {
+ rm.openStart("div", control);
+ rm.style("font-size", "2rem");
+ rm.style("width", "2rem");
+ rm.style("height", "2rem");
+ rm.style("display", "inline-block");
+ rm.style("color", "blue");
+ rm.openEnd();
+ rm.text(control.getText());
+ rm.close("div");
+ },
+ };
+}