esm.sh icon indicating copy to clipboard operation
esm.sh copied to clipboard

Ability to turn off transformation entirely?

Open NullVoxPopuli opened this issue 7 months ago • 2 comments

I just want to get the file out of the package.

For example, I currently have: https://esm.sh/*ember-primitives/components/avatar?bundle=false&dev=&target=esnext&keep-names=true

which gets me

/* esm.sh - [email protected]/components/avatar */
export * from "/*[email protected]/X-aw/esnext/components/avatar.development.nobundle.mjs";
export { default } from "/*[email protected]/X-aw/esnext/components/avatar.development.nobundle.mjs";

which at https://esm.sh/*[email protected]/X-aw/esnext/components/avatar.development.nobundle.mjs is:

/* esm.sh - [email protected]/components/avatar */
var r=Object.defineProperty;var t=(s,o)=>r(s,"name",{value:o,configurable:!0});import{hash as n}from"@ember/helper";import{ReactiveImage as m}from"reactiveweb/image";import{WaitUntil as l}from"reactiveweb/wait-until";import{precompileTemplate as e}from"@ember/template-compilation";import{setComponentTemplate as a}from"@ember/component";import i from"@ember/component/template-only";var d=a(e(`
  {{#unless @isLoaded}}
    {{#let (WaitUntil @delayMs) as |delayFinished|}}
      {{#if delayFinished}}
        {{yield}}
      {{/if}}
    {{/let}}
  {{/unless}}
`,{strictMode:!0,scope:t(()=>({WaitUntil:l}),"scope")}),i()),c=a(e(`
  {{#if @isLoaded}}
    <img alt="__missing__" ...attributes src={{@src}} />
  {{/if}}
`,{strictMode:!0}),i()),v=a(e(`
  {{#let (ReactiveImage @src) as |imgState|}}
    <span data-prim-avatar ...attributes data-loading={{imgState.isLoading}} data-error={{imgState.isError}}>
      {{yield (hash Image=(component Image src=@src isLoaded=imgState.isResolved) Fallback=(component Fallback isLoaded=imgState.isResolved) isLoading=imgState.isLoading isError=imgState.isError)}}
    </span>
  {{/let}}
`,{strictMode:!0,scope:t(()=>({ReactiveImage:m,hash:n,Image:c,Fallback:d}),"scope")}),i());export{v as Avatar,v as default};
//# sourceMappingURL=avatar.development.nobundle.mjs.map

but this isn't what I want.

Here is what is published on npm: https://www.npmjs.com/package/ember-primitives?activeTab=code (and GH)

import { hash } from '@ember/helper';
import { ReactiveImage } from 'reactiveweb/image';
import { WaitUntil } from 'reactiveweb/wait-until';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import templateOnly from '@ember/component/template-only';

const Fallback = setComponentTemplate(precompileTemplate("\n  {{#unless @isLoaded}}\n    {{#let (WaitUntil @delayMs) as |delayFinished|}}\n      {{#if delayFinished}}\n        {{yield}}\n      {{/if}}\n    {{/let}}\n  {{/unless}}\n", {
  strictMode: true,
  scope: () => ({
    WaitUntil
  })
}), templateOnly());

const Image = setComponentTemplate(precompileTemplate("\n  {{#if @isLoaded}}\n    <img alt=\"__missing__\" ...attributes src={{@src}} />\n  {{/if}}\n", {
  strictMode: true
}), templateOnly());

const Avatar = setComponentTemplate(precompileTemplate("\n  {{#let (ReactiveImage @src) as |imgState|}}\n    <span data-prim-avatar ...attributes data-loading={{imgState.isLoading}} data-error={{imgState.isError}}>\n      {{yield (hash Image=(component Image src=@src isLoaded=imgState.isResolved) Fallback=(component Fallback isLoaded=imgState.isResolved) isLoading=imgState.isLoading isError=imgState.isError)}}\n    </span>\n  {{/let}}\n", {
  strictMode: true,
  scope: () => ({
    ReactiveImage,
    hash,
    Image,
    Fallback
  })
}), templateOnly());

export { Avatar, Avatar as default };
//# sourceMappingURL=avatar.js.map

which I'd entirely prefer

  • no minification
  • easier to read
  • variable names are kept
  • no messing with Object.defineProperty / property polyfilling? what is going on?

NullVoxPopuli avatar May 23 '25 19:05 NullVoxPopuli

no minification easier to read

the server minifies js by default to reduce network cast. i have the plan of adding a new option minify=false to disable the minifier

variable names are kept no messing with Object.defineProperty / property polyfilling? what is going on?

Object.defineProperty is added by esbuild, when the option keep-names present, which is out of my control. i also do not like this. There is a plan of improving the /*pkg pattern using esbuild's transform instead of build, which disables the code optimization feature

ije avatar May 24 '25 14:05 ije

@NullVoxPopuli if you just want a CDN to serve a package file exactly as it's published, you should use the UNPKG CDN:

import Avatar from "https://unpkg.com/[email protected]/dist/components/avatar.js";

Only use esm.sh if you actually need transformations of the imported code; e.g. because the published package is in CJS and not ESM format.

jaydenseric avatar Jul 24 '25 04:07 jaydenseric