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

Support for direct-to-browser ESM #225

Open
MagnusOxlund opened this issue Sep 27, 2024 · 6 comments
Open

Support for direct-to-browser ESM #225

MagnusOxlund opened this issue Sep 27, 2024 · 6 comments

Comments

@MagnusOxlund
Copy link

From the docs, it looks like the project installs in the browser's global namespace.

Are there any plans to distribute an ES module directly to browsers (without Node.js) that can be imported with an ES6 import declaration?

For instance:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="modulepreload" href="https://path/to/HumanizeDuration.js">
  <script type="module">
    import humanizeDuration from 'https://path/to/HumanizeDuration.js';
    console.log(humanizeDuration(97320000));
  </script>
</head>
</html>
@MagnusOxlund
Copy link
Author

For reference, Luxon is distributed in that form, with both a full and a minified version available.

@EvanHahn
Copy link
Owner

EvanHahn commented Sep 28, 2024 via email

@The-LukeZ
Copy link

The-LukeZ commented Oct 14, 2024 •
edited
Loading

but I'm not sure how I want to do that yet.

Could I make PR for it?

@EvanHahn
Copy link
Owner

EvanHahn commented Oct 14, 2024 via email

@The-LukeZ
Copy link

The-LukeZ commented Nov 3, 2024 •
edited
Loading

Yes, but please let me know how you plan to do this beforehand. There are a lot of different ways to accomplish this and I don't want you to have to do a bunch of unnecessary work.

Okay, sorry for the late response, I had to finish a personal project 😅

I would fork this repo and do the following things:

  • make d.ts file for all type declarations (all @typedef -> interface and type)
  • use the common ES2016 or ES2020 syntax (import instead of require) - tell what I should use: ES2016 or ES2020 or something else
  • create a default export for the default function - which I also want to deconstruct a bit, if possible

@EvanHahn
Copy link
Owner

EvanHahn commented Nov 3, 2024

Thanks for writing this out, because it helps me figure out what's needed.

I think my requirements are:

  • Add ES Module compatibility.
  • Maintain ECMAScript 3 compatibility. This module is still compatible with very old browsers, and I'd like to keep it that way.
  • Maintain CommonJS support.
  • Maintain AMD support (see the code).
  • Maintain window support. It should still be possible to use this module with CommonJS, and it should still be possible to use <script src="humanize-duration.js"></script>. Importantly, it should still be possible to copy humanize-duration.js and use it in a <script> tag with no changes.
  • Do not change TypeScript support as part of this work. It's possible we want to add that, but that's unrelated to ESM.

I think that means shipping two files in the npm package: humanize-duration.cjs and humanize-duration.mjs (or something like that). The latter would be auto-generated and put in the .gitignore file, and only included at build time.

Is that something you could help with?

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
@EvanHahn @MagnusOxlund @The-LukeZ