Skip to content

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

@mediabuff

Description

@mediabuff

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions