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

HTMLElement support?? #23

Open
mrhut10 opened this issue Jan 4, 2021 · 5 comments
Open

HTMLElement support?? #23

mrhut10 opened this issue Jan 4, 2021 · 5 comments
Assignees
Labels

Comments

@mrhut10
Copy link

mrhut10 commented Jan 4, 2021

I've tried numerous times to ToastStore.error() and send it a HtmlElement as per the typescript types you've defined and it always ends up crashing react.

I can provide further details, but hoping you can provide examples of using HtmlElements in your documentation?

@mrhut10
Copy link
Author

mrhut10 commented Jan 4, 2021

Never mind, i worked out that it does work but its been typed incorrectly as far as typescript goes. The Problem is that it isn't a HTMLElement as per its been typed prob better to be typed as a React.ReactNode

I will try to remember to come back and make a PR to fix this for you, but anyone with the same problem can do the following to bypass typescripts check until a PR to fix the types exists.

example

const userErrorReport = (
  <div>
    Error Importing File:
    <ul>{csvImportErrors.map(error => <li>{error.message}</li>)}</ul>
  </div>
);

//@ts-ignore
ToastsStore.error(userErrorReport);

@Vashnak
Copy link
Owner

Vashnak commented Jan 4, 2021

Hello !

Yeah you are right, the typing has been badly defined, I had a bad understanding of react nodes typing at this moment.

I will push a fix later today.

@Vashnak Vashnak added the bug label Jan 4, 2021
@Vashnak Vashnak self-assigned this Jan 4, 2021
@mrhut10
Copy link
Author

mrhut10 commented Jan 4, 2021

dont stress not urgent :)

and I think i'm 90% on a PR which isn't 100% ready yet.

  • fixes the type problem mentioned above
  • changes to a React functional component from class and uses a hook eventsWithTTL to manage the expiry of events
  • by taking advantage of pure tsc for build step reduces the tree of dependencies from 421ish to I think 21 dependencies.

I suspect it's already working, but I've only done it all with typescript type checking, I will set up a demo project to test it imports into another project as expected.
as stated not quite ready but your welcome to have a look this is a link to the diff master...mrhut10:rewrite

@mrhut10
Copy link
Author

mrhut10 commented Jan 5, 2021

oh just seen you've got a v4 branch as well, what where you hoping to achieve in your v4 version?

@Vashnak
Copy link
Owner

Vashnak commented Jan 5, 2021

Hello mrhut, sorry yesterday I have been quite busy.

The goal of the v4 package is to support server side rendering by using the new React portal and by exporting the css externally.
Moreover, I also wanted to remove the Observable pattern and use the Context api, thus, switch to functional components.
Finally, Adding some basic options was also in my scope like being able to close toast, display a duration bar, or some little improvement like this.

Then I started to work on another project and ... you know what happened :)
I will try to finish this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants