ui5-next / babel-plugin-ui5-next Goto Github PK
View Code? Open in Web Editor NEWNext-generation syntax for SAP/Open UI5
License: MIT License
Next-generation syntax for SAP/Open UI5
License: MIT License
Ref title, just write new complex test case.
interface ProductRatingProps {
value?: PropertyBindingInfo | number | ExpressionBindingInfo;
change?: any;
}
export default class ProductRating extends Control<ProductRatingProps> {
metadata = { } // to compile
}
Hello!
I've been trying to create a minimal example using UI5 + Typescript + babel-plugin-ui5-next + https://github.com/ui5-next/types, but I'm having some problems that I'd like to know if you have inputs.
1 - Component Metadata
In your example in https://github.com/ui5-next/ui5g (at least the Walkthrough one), you define your component metadata as a property, like this:
This is being a big problem for me as I haven't been able to create a typescript class variable syntax that outputs this code. I've tried:
private metadata = { manifest };
// transpiled code has metadata as a property being initialized in constructor. When going through your plugin, Component is not able to read the manifest
static metadata = { manifest };
// transpiled code has metadata being set after class definition with Component.metadata = { manifest}. Same error happens.
const metadata = { manifest }; // before class definition
// transpiled code has metadata out of class scope and the same error happens;
I imagine you know much better than me the inner workings of this metadata property, do you have any suggestions?
2 - Can I use just this plugin?
As I said, I was trying to create a repo with the minimal infrastructure possible, so I didn't want to use all gulp tasks and wanted to focus just on TS -> JS transpile & JS -> UI5JS babel transformation, but I imagine several other things happen your gulp 'pipeline', because I got many of my javascript files to be really close to the ones on your sample project, but when I ran babel using ONLY the babel-plugin-ui5-next, I got errors like this:
When removing my export default
from classes, it worked, but the JS files on your sample are export default
, so I don't really understand if I need to go through other transformations before. A lot of the code I was testing for the Typescript transpiling I ended up copying and pasting to the ui5wt generated app so I could test if the transpiled JS ended up being a valid app.
If you've ever created a typescript sample with these tools you've created, I'd love to take a look. Just so you understand why I'm really interested in all your projects: currently we use UI5 and Typescript in my team, but we had to create a custom Typescript fork and this hinders us a bit, as we don't get the newest features. Besides that, using JSX and ES6 seems like the future for me, so I'm really hyped about all these things you've already made. I don't have a lot of knowledge in the inner workings of the frameworks, but I'm happy to help whenever possible.
For the code I'm making, it's available here: https://github.com/lucasheim/base-ts-ui5-jsx-project
One thing to notice, one package I'm using, custdev-sapui5-infra-util
is only available on SAP npm registry.
Thanks for the help!
Not support class member {"type":"ClassProperty","start":326,"end":338,"loc":{"start":{"line":16,"column":2},"end":{"line":16,"column":14}},"static":false,"computed":false,"key":{"type":"Identifier","start":326,"end":331,"loc":{"start":{"line":16,"column":2},"end":{"line":16,"column":7},"identifierName":"props"},"name":"props"},"variance":null,"typeAnnotation":{"type":"TypeAnnotation","start":331,"end":338,"loc":{"start":{"line":16,"column":7},"end":{"line":16,"column":14}},"typeAnnotation":{"type":"GenericTypeAnnotation","start":333,"end":338,"loc":{"start":{"line":16,"column":9},"end":{"line":16,"column":14}},"typeParameters":null,"id":{"type":"Identifier","start":333,"end":338,"loc":{"start":{"line":16,"column":9},"end":{"line":16,"column":14},"identifierName":"Props"},"name":"Props"}}},"value":null} in EChartsControl
{
"type":"ClassProperty",
"start":326,
"end":338,
"loc":{
"start":{
"line":16,
"column":2
},
"end":{
"line":16,
"column":14
}
},
"static":false,
"computed":false,
"key":{
"type":"Identifier",
"start":326,
"end":331,
"loc":{
"start":{
"line":16,
"column":2
},
"end":{
"line":16,
"column":7
},
"identifierName":"props"
},
"name":"props"
},
"variance":null,
"typeAnnotation":{
"type":"TypeAnnotation",
"start":331,
"end":338,
"loc":{
"start":{
"line":16,
"column":7
},
"end":{
"line":16,
"column":14
}
},
"typeAnnotation":{
"type":"GenericTypeAnnotation",
"start":333,
"end":338,
"loc":{
"start":{
"line":16,
"column":9
},
"end":{
"line":16,
"column":14
}
},
"typeParameters":null,
"id":{
"type":"Identifier",
"start":333,
"end":338,
"loc":{
"start":{
"line":16,
"column":9
},
"end":{
"line":16,
"column":14
},
"identifierName":"Props"
},
"name":"Props"
}
}
},
"value":null
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.