sap-samples / ui5-typescript-helloworld Goto Github PK

Hello,

The below command copying uncompiled TS and JS files from the src folder into the web app and hence application fails to run.

npx babel src --out-dir webapp --source-maps true --extensions \".ts,.js\" --copy-files

Changing into the below format works for me, I am not very sure if this is what we should do in practice:

npx babel src --out-dir webapp --source-maps true --extensions ".ts,.js" --copy-files

The problem I am experiencing while running this command along with npx but if we run with npm run build:ts, the problem is not occurring.

As this command itself converts from ".ts,.js" to ".ts,.js"

Thanks for this sample project, it helps a lot! :)

BR,
Somnath

Currently I am using ui5 project shims to add in the resources folder.

"ui5": {
"dependencies": [
"ui5-middleware-livereload",
"firebase"
]
},
"dependencies": {
"firebase": "^8.7.0"
}

specVersion: '2.1'
kind: extension
type: project-shim
metadata:
name: thirdparty # this can be your project shim name
shims:
configurations:
firebase: # name as defined in package.json
specVersion: '2.1'
type: module # Use module type
metadata:
name: firebase
resources:
configuration:
paths:
/resources/__firebase/: '' # location where modules are stored

But not able to utilize the TS types as the import for them happens during runtime and design time have to refer to node_modules.

Any suggestions?

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-assigned_teams-1
Explanation: Does it have enough teams on GitHub? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Please provide a guide about adding and running test cases of Qunit, Karma-UI5 in the typescript project. Presently getting below error since the project codebase is in 'webapp' folder -
Error: Could not find application directory of project oaui: //oaui/webapp
Even if provide a path of 'src' folder tests are not executing.

Hi, how can I "npm install" additional libs (like rxjs, lodash etc) and use them in the project? Thanks, Marco

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-assigned_teams-2
Explanation: Does it have an admin team on GitHub? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

In the last "UI5ers live" online session, feedback was that typecasting with as is bad style and whether this can be fixed.

There are two syntax variants:

• <Button> something
• something as Button

The latter was introduced because the former does not work within JSX syntax. In UI5 JS code both could be used and they are functionally equivalent.

My initial search for style guides has led to:

• https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions:
  • "Using one over the other is mostly a choice of preference"
• https://stackoverflow.com/questions/13204759/typescript-or-javascript-type-casting (the two answers with many upvotes):
  • "If you are in a position to choose, just use the syntax that you feel more comfortable with. I personally prefer the as-syntax as it feels more fluent to read and write."
  • You can cast like this ['as' way of casting] Or like this if you want to be compatible with tsx mode: [<> way]
• https://google.github.io/styleguide/tsguide.html: this official Google TypeScript style guide does not explicitly recommend a preferred syntax for casting, but the as-style casting is used all over the place, e.g. in:
  • const mockBookService = ({get() { return mockBook; }} as any) as BookService;
• https://dev.to/ylerjen/typescript-cast-is-a-type-breaker-1jbh:
  • [àsor <...>`] - "The former being probably better (opinionated) as it can't be confused with the angle bracket notation for generic types."
• The TypeScript compiler code itself is written in TypeScript and as far as I see, it uses the as syntax for type casting, e.g. around https://github.com/microsoft/TypeScript/blob/main/src/compiler/core.ts#L770:
  • return deduplicated as any as SortedReadonlyArray<T>;
  • compareStringsCaseSensitive as any as Comparer<T>

Overall, I was not able to find any evidence that casting with as is generally considered "bad style". In contrary: if at all, as seems to be slightly preferred.

Casting at all is of course something that should be better avoided, but cannot in all cases (as seen from the TypeScript compiler code itself), especially when there are existing APIs returning superclasses. The idea to make use of generics to ease this a little exists, but comes with drawbacks.

But the discussion is open for additional input.

Hi Andreas @akudev ,
in this example the sourceMap configuration is set to false.
We would expect this value to be true in order to see the source map also in the browser.
Would that be the recommended setting for production? If we develop would we need to set it to true?

Thank you :)

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-assigned_teams-2
Explanation: Does it have an admin team on GitHub? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

approaching this from scratch leads to an error and prevents app start:
Configuration contains string/RegExp pattern, but no filename was passed to Babel

$> npm i                                   

added 952 packages, and audited 953 packages in 19s

155 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$> npm start          

> [email protected] start
> ui5 serve --port 8080 -o index.html

info graph:helpers:ui5Framework Using OpenUI5 version: 1.116.0

⚠️  Process Failed With Error

Error Message:
Configuration contains string/RegExp pattern, but no filename was passed to Babel

For details, execute the same command again with an additional '--verbose' parameter
$> npm start --verbose           
npm verb cli /Users/me/bin/node /Users/me/bin/npm
npm info using [email protected]
npm info using [email protected]
npm verb title npm start
npm verb argv "start" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/me/2023-09-01T09_11_59_080Z-
npm verb logfile /Users/me/2023-09-01T09_11_59_080Z-debug-0.log

> [email protected] start
> ui5 serve --port 8080 -o index.html

info graph:helpers:ui5Framework Using OpenUI5 version: 1.116.0

⚠️  Process Failed With Error

Error Message:
Configuration contains string/RegExp pattern, but no filename was passed to Babel

For details, execute the same command again with an additional '--verbose' parameter
npm verb exit 1
npm verb code 1

env:
node: 18.17.1
macOS 13.5.1

The OSPO bot created this issue by mistake - It did not have enough priviledge to check the vulnerability alerts, So I am closing this issue now. Sorry for any inconvenience.

At the UI5con workshop for TypeScript we came accross a TS compiler/linter error related to the types and typeRoots configuration in the file tsconfig.json.

Currently the documentation at https://github.com/SAP-samples/ui5-typescript-helloworld/blob/main/step-by-step.md states for that file and the sapui5 case:

"typeRoots": [
"./node_modules/@types",
"./node_modules/@sapui5/ts-types-esm"
],

What we did during the workshop was to adjust this to:

"typeRoots": [
"./node_modules/@types",
],
"types": [
"@openui5/ts-types-esm"
]

If I remember corretly this change is going to be added to the sample ts app. In that case, the tsconfig.json provided in the readme here should be updated too.

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-assigned_teams-1
Explanation: Does it have enough teams on GitHub? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-assigned_teams-1
Explanation: Does it have enough teams on GitHub? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

I am trying to export an app to typescript but we don't have xml views because we have customize ui5 components
basically i have existing openui5 application and i am trying to use your helloworld as starting point and replace the components with mine

Hey experts.

I've started to study SAPUI5 recently and I'm using TS as default.
My doubt is how we could bind in the xml view any property from ts controller.
I saw with i18n properties but i've tryed a lot with a variable from my controller and nothing happens.

I think it's some simple, but i really coundn't do it.
On angular we just call the value with {{property_name_from_ts_file}}, but how it works here?

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-assigned_teams-3
Explanation: Does it have enough admins on GitHub? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Hi,

I can not get the step by step work while using @sapui5/types.

the tsc command will always end with an error

webapp/Component.ts:1:25 - error TS2307: Cannot find module 'sap/ui/core/UIComponent' or its corresponding type declarations.
1 import UIComponent from "sap/ui/core/UIComponent";

Any clu how to solve that ?

note that this is working fine when using @types/openui5

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-assigned_teams-2
Explanation: Does it have an admin team on GitHub? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html