Back

@zachleat I'm curious, how does this pattern work with bundlers?

I guess you can still `import { Nimble } from './nimble.js?nodefine';` and presumably `import.meta` will be set correctly. Will bundlers tree-shake the `customElements.define` call? Will they tree-shake the class definition entirely if the imported symbol is not used?

@develwithoutacause some good discussion on the bundler question documented here from @jakelazaroff which I somehow missed: https://til.jakelazaroff.com/html/define-a-custom-element/

@zachleat @jakelazaroff Ooh duplicating the module between `?define` and not seems pretty rough, though it seems like that's an issue even outside a bundler?

Limiting all consumers to either `?define` or not seems pretty constraining at scale.

@develwithoutacause @jakelazaroff well if you’re wanting both mechanisms you probably wouldn’t do import "./nimble.js" with import "./nimble.js?define", you’d do import "./nimble.js" with `Nimble.define()`—right?

(which to me seems like yet another vote for opt-in rather than opt-out)

@zachleat @jakelazaroff Sure, you can not use the feature, but you need to *know* you can't use it in that situation.

Any given file can import `?define` but it needs to be confident that no *other* file imports without `?define`, which seems hard to enforce.

I guess you could codify this pattern into your bundler or something and rewrite the import / throw an error, but it's still complexity which needs to be managed.

@zachleat @jakelazaroff That just makes it all the more critical to choose `?define` or not.