chore: build d.ts files using npm script

package.json

@@ -6,10 +6,9 @@
   "license": "Apache-2.0",
   "scripts": {
     "start": "lerna run build:i18n && start-storybook -p 6006 -c .storybook",
-    "build": "npm-run-all -s build:clean build:bundle",
-    "build:clean": "yarn clean",
+    "build": "npm-run-all -s clean build:bundle build:types",
     "build:bundle": "lerna run build --stream",
-    "build:storybook": "lerna run build:i18n && build-storybook -c .storybook -o .out",
+    "build:types": "lerna run build:types --stream",
     "pretest": "rimraf coverage && lerna run build:i18n",
     "test": "jest --config=config/jest.config.js --coverage",
     "clean": "lerna run clean --stream && rimraf coverage",

packages/base/package.json

@@ -23,7 +23,8 @@
     "clean": "rimraf cjs Device hooks lib polyfill styling types utils index.esm.js index.d.ts",
     "build:rollup": "rollup -c rollup.config.js",
     "build:polyfills": "tsc ./src/polyfill/*.ts --outDir ./polyfill --skipLibCheck",
-    "build": "npm-run-all -s build:rollup build:polyfills"
+    "build": "npm-run-all -s build:rollup build:polyfills",
+    "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir . --removeComments false"
   },
   "dependencies": {
     "@babel/runtime": "7.11.0",

packages/charts/package.json

@@ -16,7 +16,8 @@
   "sideEffects": false,
   "scripts": {
     "clean": "rimraf cjs components interfaces internal lib util index.esm.js index.d.ts config.d.ts hooks",
-    "build": "rollup -c rollup.config.js"
+    "build": "rollup -c rollup.config.js",
+    "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir . --removeComments false || exit 0"
   },
   "dependencies": {
     "@babel/runtime": "7.11.0",

packages/main/package.json

@@ -28,7 +28,8 @@
     "build:i18n-bundles": "mkdirp dist/assets/i18n && node ../../node_modules/@ui5/webcomponents-tools/lib/i18n/toJSON.js src/i18n dist/assets/i18n",
     "build:i18n-default": "node ../../node_modules/@ui5/webcomponents-tools/lib/i18n/defaults.js src/i18n dist/assets/i18n && tsc dist/assets/i18n/i18n-defaults.js --allowJs --declaration --emitDeclarationOnly --declarationDir dist/assets/i18n",
     "build:i18n-imports": "mkdirp dist/json-imports && node ../../node_modules/@ui5/webcomponents-tools/lib/generate-json-imports/i18n.js dist/assets/i18n dist/json-imports/",
-    "build:assets": "node ../../scripts/generate-assets/index.js"
+    "build:assets": "node ../../scripts/generate-assets/index.js",
+    "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir . --removeComments false"
   },
   "dependencies": {
     "@babel/runtime": "7.11.0",

packages/main/src/components/FormItem/index.tsx

@@ -2,7 +2,7 @@ import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createC
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
 import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
 import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
-import { Label } from '@ui5/webcomponents-react/lib/Label';
+import { Label, LabelPropTypes } from '@ui5/webcomponents-react/lib/Label';
 import React, { cloneElement, CSSProperties, FC, isValidElement, ReactElement, ReactNode, ReactNodeArray } from 'react';
 
 export interface FormItemProps {
@@ -50,18 +50,21 @@ const renderLabel = (
   }
 
   if (isValidElement(label)) {
-    return cloneElement(
+    return cloneElement<LabelPropTypes>(
       label,
       {
-        wrap: label.props.wrap ?? true,
-        className: `${classes.label} ${label.props.className ?? ''}`,
+        wrap: (label as ReactElement<LabelPropTypes>).props.wrap ?? true,
+        className: `${classes.label} ${(label as ReactElement<LabelPropTypes>).props.className ?? ''}`,
         style: {
           gridColumnStart: styles.gridColumnStart,
           gridRowStart: styles.gridRowStart,
-          ...(label.props.style || {})
+          ...((label as ReactElement<LabelPropTypes>).props.style || {})
         }
       },
-      label.props.children ? `${label.props.children}:` : ''
+      (label as ReactElement<LabelPropTypes>).props.children
+        ? // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          `${(label as ReactElement<LabelPropTypes>).props.children}:`
+        : ''
     );
   }
 

scripts/rollup/configFactory.js

@@ -65,25 +65,6 @@ const rollupConfigFactory = (pkgName, externals = []) => {
   console.info('Copy index file');
   asyncCopyTo(path.resolve(PKG_BASE_PATH, 'src', 'index.ts'), path.resolve(PKG_BASE_PATH, `index.esm.js`));
 
-  console.info('Create TS Types');
-  const tsConfigPath = path.resolve(PKG_BASE_PATH, 'tsconfig.json');
-  if (fs.existsSync(tsConfigPath)) {
-    spawnSync(
-      path.resolve(PATHS.nodeModules, '.bin', 'tsc'),
-      [
-        '--project',
-        tsConfigPath,
-        '--declaration',
-        '--emitDeclarationOnly',
-        '--declarationDir',
-        PKG_BASE_PATH,
-        '--removeComments',
-        'false'
-      ],
-      { stdio: 'inherit' }
-    );
-  }
-
   const external = (id) => {
     const containsThisModule = (pkg) => id === pkg || id.startsWith(pkg + '/');
     return externalModules.some(containsThisModule);