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.

Sign up for GitHub

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

Jump to bottom

ES Module Imports from the Browser #156

Open
Offroaders123 opened this issue Feb 14, 2022 · 4 comments
Open

ES Module Imports from the Browser #156

Offroaders123 opened this issue Feb 14, 2022 · 4 comments

Comments

@Offroaders123
Copy link

Is there a way that I can import the jsmediatags object using the import syntax for ES Modules, in the browser? I was hoping to use an experience similar to the one provided in this article about the import statement.

This isn't working at the moment, but something similar to this is what I was hoping to be able to do inside of my ES Module scripts.

import jsmediatags from "https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js";

Thanks!
@DcolorWei
Copy link

In fact, many of the new ES6 syntaxes are not fully supported in current browsers. You may need Babel, or add type="model" to <script>(view it with chrome). This is not a jsMediatags problem.

@Offroaders123
Copy link
Author

Offroaders123 commented Feb 15, 2022 •
edited

In fact, many of the new ES6 syntaxes are not fully supported in current browsers. You may need Babel, or add type="model" to <script>(view it with chrome). This is not a jsMediatags problem.

Yes, that's a good point, loading it with a standard <script> tag works just fine, but then the jsmediatags object isn't directly coupled with my own modules added with <script type="module">, instead I would have to access it using window.jsmediatags, which isn't quite what I was hoping for.

Essentially, this is how import could be called for jsmediatags, allowing you to use it directly inside of your module code:

<!-- index.html -->
<body>
  <script type="module" src="app.js"></script>
</body>
/* app.js */
import jsmediatags from "./jsmediatags.min.js";

console.log(jsmediatags);
  // {read: ƒ, Reader: ƒ, Config: ƒ}

console.log(window.jsmediatags);
  // undefined

And other than support in Workers, all modern browsers actually support the import and export syntax now! So this will work without Babel or another bundler.

JavaScript Modules - MDN
ES6 Modules Support from MDN

@Android789515
Copy link

I'd like this feature too.

I'm not fond of using require or copying a js file into my directory and grabbing it from the global object.

@Offroaders123
Copy link
Author

Alright, I have some progress for this goal! Been working on my own fork of the project to add ESM, TypeScript, and native browser support out of the box. There's still plenty of work to be done, but a lot of things have already been moved over.

The main challenge has been moving the Jest tests over to ESM TypeScript, which isn't straightforward because most of Jest's tooling expects using CommonJS directly, or Babel to transpile any other syntaxes back down to CommonJS again so Jest can run it. It would be nice to run things directly as how they output, rather than needing a transpile step again, just for testing.

If anyone else has any interest in moving this up to the main library as well, feel free to stop by and see how things are going over at my fork here.
https://github.com/Offroaders123/jsmediatags

I have also moved all of the callback APIs over to Promises, and I plan to move the number array handling for bytes, over to TypedArrays, which I think will help a big deal with speed and performance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Offroaders123 @DcolorWei @Android789515