Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support TS in sdk #3

Closed
magicmatatjahu opened this issue Dec 9, 2020 · 13 comments · May be fixed by #40
Closed

Support TS in sdk #3

magicmatatjahu opened this issue Dec 9, 2020 · 13 comments · May be fixed by #40
Assignees
Labels
enhancement New feature or request stale

Comments

@magicmatatjahu
Copy link
Member

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

@magicmatatjahu magicmatatjahu added the enhancement New feature or request label Dec 9, 2020
@github-actions
Copy link

github-actions bot commented Dec 9, 2020

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
Copy link

Stmated commented Dec 27, 2020

@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
Copy link
Member

@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
Copy link
Member Author

magicmatatjahu commented Dec 28, 2020

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
Copy link

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
Copy link
Member Author

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
Copy link
Member

jonaslagoni commented Apr 28, 2021

@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
Copy link
Member Author

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
Copy link

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
Copy link
Member Author

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

@github-actions
Copy link

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
Copy link

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
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request stale
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants