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

is there an official published version of this library for ES modules ? #66

Open
mediabuff opened this issue Feb 22, 2024 · 0 comments
Open

Comments

@mediabuff
Copy link

mediabuff commented Feb 22, 2024

I tried the following and doesn't work.

https://cdn.jsdelivr.net/npm/@indic-transliteration/sanscript@1.3.1/+esm

Trying to use this without a bundler - direct import in a js/ts module like
import 'https://cdn.jsdelivr.net/npm/@indic-transliteration/sanscript@1.3.1/+esm'. This avoids including scripts in your main SPA html - can be just included in the component that needs.

Unfortunately, this library needs some tweaks to make this work.

Some background here https://lea.verou.me/blog/2020/07/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js/
Technically, a JS file can be parsed as a module even with no imports or exports. Therefore, almost any library that uses globals can be fair game, it can just be imported as a module with no exports! How do we do that?

While you may not see this syntax a lot, you don’t actually need to name anything in the import statement. There is a syntax to import a module entirely for its side effects:

import "url/to/library.js";
This syntax works fine for libraries that use globals, since declaring a global is essentially a side effect, and all modules share the same global scope. For this to work, the imported library needs to satisfy the following conditions:

It should declare the global as a property on window (or self), not via var Foo or this. In modules top-level variables are local to the module scope, and this is undefined, so the last two ways would not work.
Its code should not violate strict mode
The URL is either same-origin or CORS-enabled. While <script> can run cross-origin resources, import sadly cannot.
Basically, you are running a library as a module that was never written with the intention to be run as a module. Many are written in a way that also works in a module context, but not all.

@mediabuff mediabuff changed the title is a official published version of this library for ES modules ? is an official published version of this library for ES modules ? Feb 22, 2024
@mediabuff mediabuff changed the title is an official published version of this library for ES modules ? is there an official published version of this library for ES modules ? Feb 26, 2024
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

No branches or pull requests

1 participant