Support TS in sdk

[magicmatatjahu]

Reason/Context

As in title. Support TS in react-sdk. It should be done at this same moment next to asyncapi/generator#455

Description

It need to be use the official TS Rollup plugin https://github.com/rollup/plugins/tree/master/packages/typescript

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue.

Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Stmated]

@magicmatatjahu There is no way of doing this manually currently, right? Since I can't change what plugins are sent to the rollup invocation.
Is there actually any more work required than to just add the typescript plugin along with the babel one?

Or even better, is there a way to disable rollup? Things seemed to work just fine for me, running it all through ts-node, but now rollup can't include my .ts-files.

[jonaslagoni]

@Stmated theoretically you could do your own pre-transpilation process. i.e. keep the template files under a different folder and then add your own transpiler process and output it to the template folder. Havent tested it but it should be possible until this issue is resolved.

Also if you feel the need for the option to disable the entire transpilation process feel free to create an issue with the use-case 😄

[magicmatatjahu]

Is there actually any more work required than to just add the typescript plugin along with the babel one?

We wanted add TS supports in first 0.1.0 version, but we realized that we don't have a TS integration inside generator, so we avoided it, but yes, in sdk there is only needed add rollup plugin for TypeScript and configured it.

And as @jonaslagoni wrote, at the moment you can write template in separate folder (e.g. templateTS) and check in tsconfig.json as output dir template, run tsc and then run generator.

Or even better, is there a way to disable rollup? Things seemed to work just fine for me, running it all through ts-node, but now rollup can't include my .ts-files.

Rollup is needed for simplify template code and transform ESmodules to CommonJS modules. Of course if you want use sdk as a standalone package, then you can use it without worrying about the rollup. Rollup is for Generator itself.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[magicmatatjahu]

Supporting TS has a one (for me huge) problem -> DefinitelyTyped/DefinitelyTyped#20544 TS always complains about returned string from components:

function Component() {
  return "foobar";
}

function App() {
  return (
    <Component /> // error JSX element type 'string' is not a constructor function for JSX elements.
  );
}

So we must wrap string to fragment like <>foobar</>. @jonaslagoni Can we accept this solution or wait for fixing typings? As you see issue is opened in 2017 year, so I think that it won't be fixed quickly.

[jonaslagoni]

@magicmatatjahu hmm, yea I would consider that a problem as well... However I think I could live with that as well, the problem (to me at least) is being able to effectively describe this to the template developers 🤔

This issue combined with #37, do you think there is any way we can create a wrapper for React to selectively exclude errors/warnings from react? While still making it maintainable of course...

[magicmatatjahu]

selectively exclude errors/warnings from react is not that easy 😄 We can make wrapper for string, but then it will be more difficult to use than using fragments <></>

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[magicmatatjahu]

Still relevant, but we must handle that problem #3 (comment)

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[sandrokeil]

Supporting TS has a one (for me huge) problem -> DefinitelyTyped/DefinitelyTyped#20544 TS always complains about returned string from components:

function Component() {
  return "foobar";
}

function App() {
  return (
    <Component /> // error JSX element type 'string' is not a constructor function for JSX elements.
  );
}

So we must wrap string to fragment like <>foobar</>. @jonaslagoni Can we accept this solution or wait for fixing typings? As you see issue is opened in 2017 year, so I think that it won't be fixed quickly.

Is this still a problem, because there exists a Text component. It is also possible to use this workaround if still needed.

import React, { ReactElement } from 'react'

function Component() {
   return ("foobar" as unknown) as ReactElement
}

function App() {
  return (
    <Component /> // no error
  );
```

[Reecer9714]

Something that may help is adding children to the following type definition

export declare type PropsWithChildrenContent<P> = P & {
    children?: ReactNode;
    childrenContent?: string;
};