search

facebook / prop-types

Runtime type checking for React props and similar objects
MIT License
4.48k stars 358 forks source link

rushed esm outline #386

Closed brandonros closed 1 year ago

brandonros commented 1 year ago

part of https://github.com/facebook/prop-types/issues/111

allows for 

<!doctype>
<html>
  <head>
  </head>
  <body>
      <script type="importmap">
      {
        "imports": {
          "d3": "https://unpkg.com/d3@7.6.1/src/index.js?module",
          "c3": "https://unpkg.com/c3@0.7.20/c3.esm.js",
          "preact": "https://unpkg.com/htm/preact/index.mjs?module",
          "preact-compat": "https://unpkg.com/preact-compat@3.19.0/dist/preact-compat.es.js?module",
          "prop-types": "https://cdn.jsdelivr.net/gh/brandonros/prop-types@esm/esm/index.js"
        }
      }
    </script>
    <script type="module">
      import c3 from 'c3'
      import { html, Component, render } from 'preact'
      import PropTypes from 'prop-types'
      import { findDOMNode } from 'preact-compat'
      console.log({
        c3
      })
    </script>
  </body>
</html>

i'm not saying we should actually merge this, just hopes it helps somebody else out there

ljharb commented 1 year ago

This definitely isn't a good approach to provide native ESM modules.

What I'm wondering is why you're not bundling anyways - there's tons of performance benefits to using bundles that simply aren't available with native ESM.

kungfooman commented 1 year ago

Wow, I'm sick of projects not shipping proper ES6 files.

This PR is a giant time saver, thank you so much! I was about to do the same thing for my project :sweat: :sweat_drops: :face_with_head_bandage:

What I'm wondering is why you're not bundling anyways - there's tons of performance benefits to using bundles that simply aren't available with native ESM.

It's mostly about developing and debugging. Once that is done, you can create sweat, fast, mangled, compressed, tersed, tree-shaked and whatnot bundle... but don't eat that thing during development!

And especially don't provide that as the only option while feeling righteous about it!

I suggest to make ES6 a top-priority for a while - learn from people who know how to ship NPM packages, like the Monaco team.