Relative imports shouldn't be bundled

[jaydenseric]

At the moment, relative imports within a module are incorrectly bundled into the module, for example:

https://esm.sh/graphql-react@15.0.0/public/index.mjs

/* esm.sh - graphql-react@15.0.0/public/index.mjs */
export * from "https://cdn.esm.sh/v43/graphql-react@15.0.0/es2020/public/index.mjs.js";

If you then open https://cdn.esm.sh/v43/graphql-react@15.0.0/es2020/public/index.mjs.js :

File contents…

/* esm.sh - esbuild bundle(graphql-react@15.0.0/public/index.mjs) es2020 production */
import __object_assign$ from "/v43/object-assign@4.1.1/es2020/object-assign.js";import __react$ from "/v43/react@17.0.2/es2020/react.js";var zr=Object.create;var x=Object.defineProperty;var Xr=Object.getOwnPropertyDescriptor;var Zr=Object.getOwnPropertyNames;var Kr=Object.getPrototypeOf,et=Object.prototype.hasOwnProperty;var Z=o=>x(o,"__esModule",{value:!0});var f=o=>{if(typeof require!="undefined")return require(o);throw new Error('Dynamic require of "'+o+'" is not supported')};var c=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),rt=(o,e)=>{Z(o);for(var r in e)x(o,r,{get:e[r],enumerable:!0})},tt=(o,e,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of Zr(e))!et.call(o,t)&&t!=="default"&&x(o,t,{get:()=>e[t],enumerable:!(r=Xr(e,t))||r.enumerable});return o},u=o=>tt(Z(x(o!=null?zr(Kr(o)):{},"default",o&&o.__esModule&&"default"in o?{get:()=>o.default,enumerable:!0}:{value:o,enumerable:!0})),o);var v=c((Ao,K)=>{"use strict";function ot(o){return o!=null&&typeof o=="object"&&Array.isArray(o)===!1}K.exports=ot});var p=c((wo,ee)=>{"use strict";ee.exports=function(e){return`Argument ${e} type invalid.`}});var l=c((_o,re)=>{"use strict";var st=v(),nt=p();re.exports=class extends EventTarget{constructor(e={}){super();if(!st(e))throw new TypeError(nt(1));this.store=e}}});var N=c((qo,te)=>{"use strict";var ct=__react$,at=ct.createContext();te.exports=at});var L=c((To,se)=>{"use strict";var oe=p(),it=l();se.exports=function(e,r){if(!(e instanceof it))throw new TypeError(oe(1));if(typeof r!="string")throw new TypeError(oe(2));r in e.store&&(delete e.store[r],e.dispatchEvent(new CustomEvent(`${r}/delete`)))}});var ae=c((Do,ce)=>{"use strict";var ne=p(),ut=l(),pt=L();ce.exports=function(e,r){if(!(e instanceof ut))throw new TypeError(ne(1));if(r!==void 0&&typeof r!="function")throw new TypeError(ne(2));for(let t in e.store)(!r||r(t))&&pt(e,t)}});var D=c((Ro,ue)=>{"use strict";var ie=p(),ft=l(),dt=L();ue.exports=function(e,r){if(!(e instanceof ft))throw new TypeError(ie(1));if(typeof r!="string")throw new TypeError(ie(2));r in e.store&&e.dispatchEvent(new CustomEvent(`${r}/prune`,{cancelable:!0}))&&dt(e,r)}});var R=c((So,fe)=>{"use strict";var pe=p(),Et=l();fe.exports=function(e,r,t){if(!(e instanceof Et))throw new TypeError(pe(1));if(typeof r!="string")throw new TypeError(pe(2));e.store[r]=t,e.dispatchEvent(new CustomEvent(`${r}/set`,{detail:{cacheValue:t}}))}});var S=c((Vo,Ee)=>{"use strict";var de=p(),lt=l();Ee.exports=function(e,r){if(!(e instanceof lt))throw new TypeError(de(1));if(typeof r!="string")throw new TypeError(de(2));if(!(r in e.store))throw new Error(`Cache key \`${r}\` isn\u2019t in the store.`);e.dispatchEvent(new CustomEvent(`${r}/stale`))}});var he=c((Mo,ge)=>{"use strict";var le=p(),gt=l(),ht=D();ge.exports=function(e,r){if(!(e instanceof gt))throw new TypeError(le(1));if(r!==void 0&&typeof r!="function")throw new TypeError(le(2));for(let t in e.store)(!r||r(t))&&ht(e,t)}});var je=c((Fo,ye)=>{"use strict";var me=p(),mt=l(),yt=S();ye.exports=function(e,r){if(!(e instanceof mt))throw new TypeError(me(1));if(r!==void 0&&typeof r!="function")throw new TypeError(me(2));for(let t in e.store)(!r||r(t))&&yt(e,t)}});var V=c((Ho,be)=>{"use strict";var Ce=v(),jt="FETCH_ERROR",Ct="RESPONSE_HTTP_STATUS",bt="RESPONSE_JSON_PARSE_ERROR",O="RESPONSE_MALFORMED";be.exports=function(e,r){let t={errors:[]};return(typeof fetch=="function"?fetch:()=>Promise.reject(new TypeError("Global `fetch` API unavailable.")))(e,r).then(n=>(Object.defineProperty(t,"response",{value:n}),n.ok||t.errors.push({message:`HTTP ${n.status} status.`,extensions:{client:!0,code:Ct,statusCode:n.status,statusText:n.statusText}}),n.json().then(a=>{if(!Ce(a))t.errors.push({message:"Response JSON isn\u2019t an object.",extensions:{client:!0,code:O}});else{let i="errors"in a,d="data"in a;!i&&!d?t.errors.push({message:"Response JSON is missing an `errors` or `data` property.",extensions:{client:!0,code:O}}):(i&&(Array.isArray(a.errors)?t.errors.push(...a.errors):t.errors.push({message:"Response JSON `errors` property isn\u2019t an array.",extensions:{client:!0,code:O}})),d&&(!Ce(a.data)&&a.data!==null?t.errors.push({message:"Response JSON `data` property isn\u2019t an object or null.",extensions:{client:!0,code:O}}):t.data=a.data))}},({message:a})=>{t.errors.push({message:"Response JSON parse error.",extensions:{client:!0,code:bt,jsonParseErrorMessage:a}})})),({message:n})=>{t.errors.push({message:"Fetch error.",extensions:{client:!0,code:jt,fetchErrorMessage:n}})}).then(()=>(t.errors.length||delete t.errors,t))}});var ve=c((Go,xe)=>{"use strict";xe.exports=class{constructor({uri:e,name:r,type:t}){this.uri=e,this.name=r,this.type=t}}});var Le=c((Io,Ne)=>{"use strict";var xt=ve();Ne.exports=function(e){return typeof File!="undefined"&&e instanceof File||typeof Blob!="undefined"&&e instanceof Blob||e instanceof xt}});var Ae=c((ko,Oe)=>{"use strict";var vt=Le();Oe.exports=function(e,r="",t=vt){let s=new Map,n=new Map;function a(i,d,g){let E=i;if(t(i)){E=null;let h=s.get(i);h?h.push(d):s.set(i,[d])}else{let h=Array.isArray(i)||typeof FileList!="undefined"&&i instanceof FileList,Yr=i&&i.constructor===Object;if(h||Yr){let q=n.has(i);if(q?E=n.get(i):(E=h?[]:{},n.set(i,E)),!g.has(i)){let z=d?`${d}.`:"",X=new Set(g).add(i);if(h){let y=0;for(let T of i){let Br=a(T,z+y++,X);q||E.push(Br)}}else for(let y in i){let T=a(i[y],z+y,X);q||(E[y]=T)}}}}return E}return{clone:a(e,r,new Set),files:s}}});var Pe=c((Qo,we)=>{"use strict";var Nt=Ae();we.exports=function(e){let r={method:"POST",headers:{Accept:"application/json"}},{clone:t,files:s}=Nt(e),n=JSON.stringify(t);if(s.size){let a=new FormData;a.set("operations",n);let i={},d=0;s.forEach(g=>{i[++d]=g}),a.set("map",JSON.stringify(i)),d=0,s.forEach((g,E)=>{a.set(`${++d}`,E,E.name)}),r.body=a}else r.headers["Content-Type"]="application/json",r.body=n;return r}});var M=c((Uo,_e)=>{"use strict";_e.exports=1e3});var A=c((Jo,qe)=>{"use strict";var Lt=__react$,Ot=Lt.createContext();qe.exports=Ot});var j=c((Yo,Te)=>{"use strict";Te.exports=class extends EventTarget{constructor(){super();this.store={}}}});var w=c((zo,De)=>{"use strict";var C=p(),At=l(),wt=j(),Pt=R();De.exports=class{constructor(e,r,t,s,n){if(!(e instanceof wt))throw new TypeError(C(1));if(!(r instanceof At))throw new TypeError(C(2));if(typeof t!="string")throw new TypeError(C(3));if(!(s instanceof Promise))throw new TypeError(C(4));if(!(n instanceof AbortController))throw new TypeError(C(5));this.timeStamp=performance.now(),this.abortController=n,t in e.store||(e.store[t]=new Set);let a=e.store[t],i,d=new Promise(g=>{i=g});this.promise=s.then(async g=>{if(await d,!this.abortController.signal.aborted){let E;for(let h of a.values()){if(h===this){await E;break}E=h.promise}Pt(r,t,g)}return a.delete(this),a.size||delete e.store[t],e.dispatchEvent(new CustomEvent(`${t}/end`,{detail:{loadingCacheValue:this}})),g}),a.add(this),i(),e.dispatchEvent(new CustomEvent(`${t}/start`,{detail:{loadingCacheValue:this}}))}}});var P=c((Xo,Re)=>{"use strict";var _t=__react$,qt=_t.createContext();Re.exports=qt});var Me=c(b=>{"use strict";__object_assign$;var Tt=__react$,Se=60103;b.Fragment=60107;typeof Symbol=="function"&&Symbol.for&&(F=Symbol.for,Se=F("react.element"),b.Fragment=F("react.fragment"));var F,Dt=Tt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Rt=Object.prototype.hasOwnProperty,St={key:!0,ref:!0,__self:!0,__source:!0};function Ve(o,e,r){var t,s={},n=null,a=null;r!==void 0&&(n=""+r),e.key!==void 0&&(n=""+e.key),e.ref!==void 0&&(a=e.ref);for(t in e)Rt.call(e,t)&&!St.hasOwnProperty(t)&&(s[t]=e[t]);if(o&&o.defaultProps)for(t in e=o.defaultProps,e)s[t]===void 0&&(s[t]=e[t]);return{$$typeof:Se,type:o,key:n,ref:a,props:s,_owner:Dt.current}}b.jsx=Ve;b.jsxs=Ve});var He=c((Ko,Fe)=>{"use strict";Fe.exports=Me()});var Ie=c((es,Ge)=>{"use strict";var $e=__react$,{jsx:H}=He(),Vt=l(),Mt=N(),Ft=A(),Ht=j(),$t=P();Ge.exports=function({cache:e,children:r}){let t=$e.useRef();t.current||(t.current=performance.now());let s=$e.useRef();if(s.current||(s.current=new Ht),!(e instanceof Vt))throw new TypeError("Prop `cache` must be a `Cache` instance.");return H(Ft.Provider,{value:t.current,children:H(Mt.Provider,{value:e,children:H($t.Provider,{value:s.current,children:r})})})}});var G=c((rs,ke)=>{"use strict";var $=__react$,Gt=p();ke.exports=function(e){if(typeof e!="function")throw new TypeError(Gt(1));let r=$.useRef();return $.useEffect(()=>()=>{r.current&&r.current.abortController.abort()},[e]),$.useCallback(()=>{r.current&&r.current.abortController.abort();let t=e();return r.current=t,t.promise.then(()=>{r.current===t&&(r.current=null)}),t},[e])}});var m=c((ts,Qe)=>{"use strict";var It=__react$,kt=l(),Qt=N();Qe.exports=function(){let e=It.useContext(Qt);if(e===void 0)throw new TypeError("Cache context missing.");if(!(e instanceof kt))throw new TypeError("Cache context value must be a `Cache` instance.");return e}});var I=c((os,Je)=>{"use strict";var Ue=__react$,Ut=p(),Jt=m();Je.exports=function(e){if(typeof e!="string")throw new TypeError(Ut(1));let r=Jt(),t=Ue.useCallback(s=>{s.preventDefault()},[]);Ue.useEffect(()=>{let s=`${e}/prune`;return r.addEventListener(s,t),()=>{r.removeEventListener(s,t)}},[r,e,t])}});var k=c((ss,Be)=>{"use strict";var We=__react$,Ye=p(),Wt=m();Be.exports=function(e,r){if(typeof e!="string")throw new TypeError(Ye(1));if(typeof r!="function")throw new TypeError(Ye(2));let t=Wt(),s=We.useCallback(()=>{r()},[r]);We.useEffect(()=>{let n=`${e}/delete`;return t.addEventListener(n,s),()=>{t.removeEventListener(n,s)}},[t,e,s])}});var U=c((ns,Xe)=>{"use strict";var Q=__react$,ze=p(),Yt=M(),Bt=A(),zt=m();Xe.exports=function(e,r){if(typeof e!="string")throw new TypeError(ze(1));if(typeof r!="function")throw new TypeError(ze(2));let t=zt(),s=Q.useContext(Bt);if(s!==void 0&&typeof s!="number")throw new TypeError("Hydration time stamp context value must be a number.");let n=Q.useRef();Q.useEffect(()=>{!(n.current&&n.current.cache===t&&n.current.cacheKey===e&&n.current.load===r)&&!(e in t.store&&performance.now()-s<Yt)&&(n.current={cache:t,cacheKey:e,load:r},r())},[t,e,s,r])}});var J=c((cs,er)=>{"use strict";var Ze=__react$,Ke=p(),Xt=m();er.exports=function(e,r){if(typeof e!="string")throw new TypeError(Ke(1));if(typeof r!="function")throw new TypeError(Ke(2));let t=Xt(),s=Ze.useCallback(()=>{r()},[r]);Ze.useEffect(()=>{let n=`${e}/stale`;return t.addEventListener(n,s),()=>{t.removeEventListener(n,s)}},[t,e,s])}});var or=c((as,tr)=>{"use strict";var rr=p(),Zt=G(),Kt=I(),eo=k(),ro=U(),to=J();tr.exports=function(e,r){if(typeof e!="string")throw new TypeError(rr(1));if(typeof r!="function")throw new TypeError(rr(2));Kt(e);let t=Zt(r);return ro(e,t),to(e,t),eo(e,t),t}});var W=c((is,sr)=>{"use strict";var oo=__react$;sr.exports=function(){return oo.useReducer(()=>Symbol())[1]}});var ar=c((us,cr)=>{"use strict";var nr=__react$,so=p(),no=W(),co=m();cr.exports=function(e){if(typeof e!="string")throw new TypeError(so(1));let r=co(),t=no(),s=nr.useCallback(()=>{t()},[t]);return nr.useEffect(()=>{let a=`${e}/set`,i=`${e}/delete`;return r.addEventListener(a,s),r.addEventListener(i,s),()=>{r.removeEventListener(a,s),r.removeEventListener(i,s)}},[r,e,s]),r.store[e]}});var _=c((ps,ir)=>{"use strict";var ao=__react$,io=j(),uo=P();ir.exports=function(){let e=ao.useContext(uo);if(e===void 0)throw new TypeError("Loading context missing.");if(!(e instanceof io))throw new TypeError("Loading context value must be a `Loading` instance.");return e}});var pr=c((fs,ur)=>{"use strict";var po=v(),fo=__react$,Y=p(),Eo=w(),lo=V(),go=m(),ho=_();ur.exports=function(){let e=go(),r=ho();return fo.useCallback((t,s,n)=>{if(typeof t!="string")throw new TypeError(Y(1));if(typeof s!="string")throw new TypeError(Y(2));if(!po(n))throw new TypeError(Y(3));let{signal:a,...i}=n,d=new AbortController;return a&&(a.aborted?d.abort():a.addEventListener("abort",()=>{d.abort()},{once:!0})),i.signal=d.signal,new Eo(r,e,t,lo(s,i),d)},[e,r])}});var Er=c((ds,dr)=>{"use strict";var fr=__react$,mo=p(),yo=W(),jo=_();dr.exports=function(e){if(typeof e!="string")throw new TypeError(mo(1));let r=jo(),t=yo(),s=fr.useCallback(()=>{t()},[t]);return fr.useEffect(()=>{let a=`${e}/start`,i=`${e}/end`;return r.addEventListener(a,s),r.addEventListener(i,s),()=>{r.removeEventListener(a,s),r.removeEventListener(i,s)}},[r,e,s]),r.store[e]}});var gr=c((Es,lr)=>{"use strict";var{createContext:Co}=__react$,bo=Co();lr.exports=bo});var yr=c((ls,mr)=>{"use strict";var xo=__react$,vo=gr(),hr=p(),No=w(),Lo=m();mr.exports=function(e,r){if(typeof e!="string")throw new TypeError(hr(1));if(typeof r!="function")throw new TypeError(hr(2));let t=Lo(),s=xo.useContext(vo);if(s&&!(e in t.store)){let n=r();if(!(n instanceof No))throw new TypeError("Argument 2 `load` must return a `LoadingCacheValue` instance.");return s(n.promise),!0}return!1}});var B={};rt(B,{Cache:()=>jr.default,CacheContext:()=>Cr.default,HYDRATION_TIME_MS:()=>_r.default,HydrationTimeStampContext:()=>qr.default,Loading:()=>Tr.default,LoadingCacheValue:()=>Dr.default,LoadingContext:()=>Rr.default,Provider:()=>Sr.default,cacheDelete:()=>br.default,cacheEntryDelete:()=>xr.default,cacheEntryPrune:()=>vr.default,cacheEntrySet:()=>Nr.default,cacheEntryStale:()=>Lr.default,cachePrune:()=>Or.default,cacheStale:()=>Ar.default,fetchGraphQL:()=>wr.default,fetchOptionsGraphQL:()=>Pr.default,useAutoAbortLoad:()=>Vr.default,useAutoLoad:()=>Mr.default,useCache:()=>Fr.default,useCacheEntry:()=>Hr.default,useCacheEntryPrunePrevention:()=>$r.default,useLoadGraphQL:()=>Gr.default,useLoadOnDelete:()=>Qr.default,useLoadOnMount:()=>Ur.default,useLoadOnStale:()=>Jr.default,useLoading:()=>Ir.default,useLoadingEntry:()=>kr.default,useWaterfallLoad:()=>Wr.default});var jr=u(l()),Cr=u(N()),br=u(ae()),xr=u(L()),vr=u(D()),Nr=u(R()),Lr=u(S()),Or=u(he()),Ar=u(je()),wr=u(V()),Pr=u(Pe()),_r=u(M()),qr=u(A()),Tr=u(j()),Dr=u(w()),Rr=u(P()),Sr=u(Ie()),Vr=u(G()),Mr=u(or()),Fr=u(m()),Hr=u(ar()),$r=u(I()),Gr=u(pr()),Ir=u(_()),kr=u(Er()),Qr=u(k()),Ur=u(U()),Jr=u(J()),Wr=u(yr());var{useCacheEntry:gs,useLoadGraphQL:hs,fetchGraphQL:ms,cacheDelete:ys,cacheStale:js,Provider:Cs,Cache:bs,useLoading:xs,useCacheEntryPrunePrevention:vs,HYDRATION_TIME_MS:Ns,useWaterfallLoad:Ls,cacheEntrySet:Os,cacheEntryPrune:As,useLoadOnDelete:ws,cachePrune:Ps,Loading:_s,LoadingCacheValue:qs,HydrationTimeStampContext:Ts,useLoadOnMount:Ds,useAutoLoad:Rs,LoadingContext:Ss,cacheEntryStale:Vs,cacheEntryDelete:Ms,useCache:Fs,CacheContext:Hs,useLoadOnStale:$s,useLoadingEntry:Gs,fetchOptionsGraphQL:Is,useAutoAbortLoad:ks}=B;export{bs as Cache,Hs as CacheContext,Ns as HYDRATION_TIME_MS,Ts as HydrationTimeStampContext,_s as Loading,qs as LoadingCacheValue,Ss as LoadingContext,Cs as Provider,ys as cacheDelete,Ms as cacheEntryDelete,As as cacheEntryPrune,Os as cacheEntrySet,Vs as cacheEntryStale,Ps as cachePrune,js as cacheStale,ms as fetchGraphQL,Is as fetchOptionsGraphQL,ks as useAutoAbortLoad,Rs as useAutoLoad,Fs as useCache,gs as useCacheEntry,vs as useCacheEntryPrunePrevention,hs as useLoadGraphQL,ws as useLoadOnDelete,Ds as useLoadOnMount,$s as useLoadOnStale,xs as useLoading,Gs as useLoadingEntry,Ls as useWaterfallLoad};
/*!
 * isobject <https://github.com/jonschlinkert/isobject>
 *
 * Copyright (c) 2014-2017, Jon Schlinkert.
 * Released under the MIT License.
 */
/** @license React v17.0.2
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

This is not right at all. This is what the file is supposed to contain:

https://unpkg.com/graphql-react@15.0.0/public/index.mjs

File contents…

export { default as Cache } from './Cache.js';
export { default as CacheContext } from './CacheContext.js';
export { default as cacheDelete } from './cacheDelete.js';
export { default as cacheEntryDelete } from './cacheEntryDelete.js';
export { default as cacheEntryPrune } from './cacheEntryPrune.js';
export { default as cacheEntrySet } from './cacheEntrySet.js';
export { default as cacheEntryStale } from './cacheEntryStale.js';
export { default as cachePrune } from './cachePrune.js';
export { default as cacheStale } from './cacheStale.js';
export { default as fetchGraphQL } from './fetchGraphQL.js';
export { default as fetchOptionsGraphQL } from './fetchOptionsGraphQL.js';
export { default as HYDRATION_TIME_MS } from './HYDRATION_TIME_MS.js';
export { default as HydrationTimeStampContext } from './HydrationTimeStampContext.js';
export { default as Loading } from './Loading.js';
export { default as LoadingCacheValue } from './LoadingCacheValue.js';
export { default as LoadingContext } from './LoadingContext.js';
export { default as Provider } from './Provider.js';
export { default as useAutoAbortLoad } from './useAutoAbortLoad.js';
export { default as useAutoLoad } from './useAutoLoad.js';
export { default as useCache } from './useCache.js';
export { default as useCacheEntry } from './useCacheEntry.js';
export { default as useCacheEntryPrunePrevention } from './useCacheEntryPrunePrevention.js';
export { default as useLoadGraphQL } from './useLoadGraphQL.js';
export { default as useLoading } from './useLoading.js';
export { default as useLoadingEntry } from './useLoadingEntry.js';
export { default as useLoadOnDelete } from './useLoadOnDelete.js';
export { default as useLoadOnMount } from './useLoadOnMount.js';
export { default as useLoadOnStale } from './useLoadOnStale.js';
export { default as useWaterfallLoad } from './useWaterfallLoad.js';

If your app imports the same module via the index, and the deep import where it actually lives, it should result in the same code being cached and used instead of duplicates in separate bundled code:

import { Cache } from "https://esm.sh/graphql-react@15.0.0/public/index.mjs";

import Cache from "https://esm.sh/graphql-react@15.0.0/public/Cache.js";

It's important the same code is cached and used so that:

• There is less to download.
• Code that relies on the same class being used throughout the codebase and instanceof checks can work.

[ije]

this will be imporved only for bundler which supports tree-share, but for browser/deno all exports in index.mjs will be imported even not used

[ije]

for example, if you import d3 (esm) in browser using unpkg.com, you may see there are hundreds js files will be imported that takes a lot of time in network, but with esm.sh there are only 32 bundled files need

[jaydenseric]

For people that want to bundle a particular import it should be opt-in via a URL query string parameter.

esm.sh already has the bundle query string parameter, although that currently only controls if external dependencies within the module being imported get bundled. Intuitively it should control all kinds of bundling, by accepting a value. E.g. ?bundle=internal,external. internal would toggle bundling of imports of modules that are internal to the same package (relative file path import specifiers, and edge-case but also HTTPS/S import specifiers that reference the same package), while external would toggle bundling of imports that are external to the package (HTTP/S import specifiers referencing other packages).

Ideally no bundling of either kind occurs by default, as it can easily break the way vanilla ESM is supposed to work. Bundling is even riskier for esm.sh than in traditional Node.js projects with webpack, because esh.sh doesn't have visibility of the entire project and all dependencies at the time of bundling like webpack in a Node.js project does.

Over time modules will start to structure their internal modules to take full advantage of deep imports so Deno and browsers only load the exact code that that's needed. We shouldn't let a few bloated legacy packages block people from architecting efficient modern packages.

This issue isn't a nice-to-have, it's a total blocker. There are a bunch of packages I can't use with esm.sh because it's bundling behavior causes all sorts of runtime errors, so I've been using other CDNs.

[ije]

@jaydenseric can you please list the packages you can't used?

in fact i already tried remove the internal bundling, but some packages is hug with lots of deps that is hard to esm.sh since the server just have 4 cpu cores for the build queue, this let you wait long time until the first build is done! even let's say it's really in cdn cache you also need more time to import those denpencies specially your browser doesn't have any cache.

the other idea i want to try is follow the exports field in package.json which specifies the accurate exports name.

{
  "exports": {
    "./public": {"import": "..."},
    "./public/*": {"import": "..."}
  }
}

with above settings we don't bundle the public and its submodules.

[lifegpc]

@jaydenseric can you please list the packages you can't used?

in fact i already tried remove the internal bundling, but some packages is hug with lots of deps that is hard to esm.sh since the server just have 4 cpu cores for the build queue, this let you wait long time until the first build is done! even let's say it's really in cdn cache you also need more time to import those denpencies specially your browser doesn't have any cache.

the other idea i want to try is follow the exports field in package.json which specifies the accurate exports name.

{
  "exports": {
    "./public": {"import": "..."},
    "./public/*": {"import": "..."}
  }
}

with above settings we don't bundle the public and its submodules.

import { MdOutlinedButton as _MdOutlinedButton } from "https://esm.sh/@material/web@1.0.0-pre.12/button/outlined-button.js?target=es2022";
import { MdTonalButton as _MdTonalButton } from "https://esm.sh/@material/web@1.0.0-pre.12/button/tonal-button.js?target=es2022";

These code will get this error:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "md-focus-ring" has already been used with this registry

Because it bundle same script twice