RFC 256: ReactCDK - Add JSX/TSX Support #258
Conversation
pfeilbr
changed the title
pfeilbr
changed the title
add end quote Co-authored-by: Andrew Luca <[email protected]>
Updated to function. Co-authored-by: Andrew Luca <[email protected]>
|
Thanks @iamandrewluca for the fixes. |
|
|
||
| ReactCDK.render(MyApp, {region: 'us-east-1'}) | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Can you add to the README what would be the next steps users need to take in order to synth and deploy this app?
| # Drawbacks | ||
|
|
||
| * React is not universally liked. If it becomes associated with CDK there is potential brand/product damage. | ||
| * CDK is associated and tied to AWS brand. AWS tends to support all "popular" frameworks equally. Favoring one might |
There was a problem hiding this comment.
I think that's not a concern. Having support for multiple languages and idioms is actually a tenet of the CDK, and as such this proposal enhances the ecosystem.
| * mapping from react concepts of props, state, children, render props to typescript | ||
| CDK constructors, params, hierarchical nesting (parent), etc. | ||
| * code generated based on the jsii manifests of CDK modules | ||
| [via]((https://twitter.com/emeshbi/status/1305017904027643906?s=20)) @eladb |
There was a problem hiding this comment.
This is possible but probably the hardest part. Constructs often offer imperative APIs that won't be expressive JSX but can technically still be accessible from code.
The work we did on decdk can be leveraged.
| const { Api, Resource, Integration } = require('@aws-cdk/react/apigateway') | ||
| const Lambda = require('@aws-cdk/react/lambda') | ||
|
|
||
| const EchoLambda = ( |
There was a problem hiding this comment.
| const EchoLambda = ( | |
| const EchoLambda = () => ( |
| </Lambda> | ||
| ) | ||
|
|
||
| const EchoApi = ( |
There was a problem hiding this comment.
| const EchoApi = ( | |
| const EchoApi = () => ( |
| </CloudFrontDistribution> | ||
| ) | ||
|
|
||
| const MyApp = ( |
There was a problem hiding this comment.
| const MyApp = ( | |
| const MyApp = () => ( |
| </App> | ||
| ) | ||
|
|
||
| ReactCDK.render(MyApp, {region: 'us-east-1'}) |
There was a problem hiding this comment.
| ReactCDK.render(MyApp, {region: 'us-east-1'}) | |
| ReactCDK.render(<MyApp />, {region: 'us-east-1'}) |
| async ({event, context}) => ({ | ||
| "statusCode": 200, | ||
| "headers": { | ||
| "Content-Type": "application/json" | ||
| } | ||
| "body": JSON.stringify(event) | ||
| }) |
There was a problem hiding this comment.
In my opinion the code for a lambda should still be a separated file, and be passed to <Lambda /> as a prop as a path to the code
e.g.
<Lambda handler="src/handler" />
|
I see 2 ways how this can be done.
Creating components for all existing constructs/api, should involve a loooot of work. And in the end if JSX is transformed to something like constructs, then jsii can also be used, from my understanding. ps: I'm new to AWS CDK, I don't know exactly what I'm doing 😆 how it works under the hood 🙂 |
|
So we need to create a JSX transformer that respects https://github.com/aws/constructs interface |
|
RFC Bar Raiser: eladb@ |
|
@pfeilbr I am closing this for now. Please reach out if you are interested to continue working on this. |
By submitting this pull request, I confirm that my contribution is made under
the terms of the Apache-2.0 license