search

mlcheng / js-toast

A small JavaScript library that displays toast messages
MIT License
54 stars 19 forks source link

How to import into non-module code? #9

Closed lprc closed 4 years ago

lprc commented 4 years ago

Hi, now as the code has been converted to conform to the module syntax using export, how can I include it in my code? E.g. before I'd just use <script type="text/javascript" src="lib/toast.min.js"></script> in my index.html and was then able to use iqwerty.toast.Toast("blabla"). Now I think I do have to use an import statement, right? But that just seems to work from inside a module. Is there a possibility to import it into a global variable iqwerty.toast like before?

This information would be nice in the Readme, too.

mlcheng commented 4 years ago

Hi thanks for your question! You can still call it via iqwerty.toast.toast() -- see the Playground for examples! The breaking change with ebd3c88 was Toast() to toast() lowercase. You can probably set iqwerty.toast.Toast = iqwerty.toast.toast if you don't want to change all references. Please let me know if that worked!

lprc commented 4 years ago

Hmm maybe I'm doing something wrong. Here are some small test files I used:

index.html:

<head>
    <script type="module" src="toast.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <input type="button" value="show toast" onclick="showToast()" />
</body>

test.js:

function showToast() {
    iqwerty.toast.toast("test");
}

toast.js is in the same folder as the two files above. Now when I click on the button I get an error message on console saying

Uncaught ReferenceError: iqwerty is not defined
    showToast http://127.0.0.1:5500/test.js:2
    onclick http://127.0.0.1:5500/:1
mlcheng commented 4 years ago

Hi, please use toast.min.js instead. I got confused because in comment 1 the script tag imported the minified one already :)

lprc commented 4 years ago

Oh yeah that works indeed. Sorry, that mistake was on me. Anyways I think the minified version should not behave differently, does it?

In addition, which minifier did you use? I added support for a dismissable toast using a x-button on the right hand side and then stumbled on this issue.

Thanks for your responses so far! :)

mlcheng commented 4 years ago

Hi--sorry for the late response. The minified one shouldn't behave differently, but it is bundled using parcel. I have this weird custom build that I haven't open-sourced yet. As for dismissable toast, do you think the snackbar would work for you?

lprc commented 4 years ago

Looks great, thanks!