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

Convert to ES6 compatible library #65

Merged
merged 10 commits into from Mar 25, 2021
Merged

Conversation

AStoker
Copy link
Contributor

@AStoker AStoker commented Nov 3, 2020

ES6 Conversion + Features

Resolves #15
Added a new file (toastify-es.js) which contains an ES6 compliant version of Toastify.
Few improvements and changes to behavior:

  • Based off comments, positionLeft was finally removed
  • Expanded functionality for selector that allows you to pass in an element as well (defaults to document.body)

Notable changes to code:

  • Made use of arrow functions to keep context the same (replaced (function(){...}).bind(this))
  • let instead of var
  • Toastify class rather than function. Exported function creates an instance of Toastify
  • When checking classes, use the built in classList functionality on elements
  • rootElement is now stored on the class so when we remove toasts we know where to look specifically (this enhanced the ability of putting toasts inside elements and allows you to use Toastify inside shadowDom nodes)
  • Added ability to use escapeMarkup to allow optionally unsafe innerHTML
  • Added ability to use the HTML DOM style property to directly style the toast (this further extends backgroundColor functionality, and therefore backgroundColor should be deprecated in the future in favor of using style.background). Note, since previous functionality took backgroundColor and applied it to the elements background style (which changes all background styles), to prevent breaking changes, backgroundColor takes precedence over style.backgroundColor.

Things that should still happen:

  • Get maintainer feedback (I'm only human and spent a few hours quickly changing things, don't want to miss something)
  • Prevent XSS issues when we pass text into the innerHTML of the toast (probably just want to use innerText, as there's already node for when you want to pass in an element)
  • Cleanup of default values and states
  • Adequate testing of all use cases
  • Test across browsers
  • Include added functionality in legacy versions

Copy link
Owner

@apvarun apvarun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work @AStoker
This is a nice first step. We can later convert this to TS and also generate types file 👍

src/toastify-es.js Outdated Show resolved Hide resolved
src/toastify-es.js Outdated Show resolved Hide resolved
@AStoker AStoker marked this pull request as draft February 17, 2021 22:27
@AStoker AStoker marked this pull request as ready for review February 17, 2021 22:34
@AStoker
Copy link
Contributor Author

AStoker commented Feb 17, 2021

@apvarun I think this is ready for review

@AStoker AStoker changed the title [WIP] Convert to ES6 compatible library Convert to ES6 compatible library Feb 23, 2021
@AStoker
Copy link
Contributor Author

AStoker commented Mar 1, 2021

@apvarun, see anything I missed in this PR? Would love to get this first draft in. Next steps can be to create a Typescript version which can compile out to native modules or legacy javascript

@AStoker
Copy link
Contributor Author

AStoker commented Mar 10, 2021

@apvarun , let me know if there's something I can do to help this get merged in faster

Copy link
Owner

@apvarun apvarun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code changes looks fine to me.

src/toastify-es.js Outdated Show resolved Hide resolved
src/toastify-es.js Outdated Show resolved Hide resolved
@apvarun
Copy link
Owner

apvarun commented Mar 24, 2021

I think we should also reference this new es file somehow so that the correct file is picked up by bundler

@apvarun apvarun merged commit 647ff79 into apvarun:master Mar 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Moving from ES5 to ES6
2 participants