Preserve Class/Component.name or introduce a new displayName property

[Prinzhorn]

Describe the problem

I have a system that allows Svelte components to be opened in a new window (Electron app). Let's say I have a Details component, then I have a config which maps the name to the component { "Details": Details } and "blesses" this component so it can be used in a new window. This mapping is needed because Details.name will not be Details after minification.

Now this system has reached it's limit. I need to make contents of a generic TabGroup component compatible with the window system. They are rendered via <svelte:component this={TabComponent} />. This means I need to access the name of the component at runtime in order to render it in the new window as I cannot know beforehand (the component name and props are passed via URL parameter and postMessage).

Take this REPL as an example https://svelte.dev/repl/af0f92d5cb5f4dbfb9518287baa81497?version=3.38.3

In dev (npm run dev):

In production (npm run build):

Describe the proposed solution

On a per-component basis I'd like to enable a new static property of the component class, e.g. displayName so that I can access the name at runtime like MyComponent.displayName === 'MyComponent'

This needs to be per-component because otherwise with hundreds of components this would increase bundle size even if you don't need it for every single component.

Alternatives considered

I guess I could manually maintain this in a <script context="module"> block?

Importance

would make my life easier

[dummdidumm]

What would this give you that <script context="module"> can't? With <script context="module"> it might be a little more inconvenient, but at the same time you are more flexible with choosing your component name.

[Prinzhorn]

Thanks for the reply.

What would this give you that <script context="module"> can't?

A guarantee that it's always consistent with the name.

I just tried the <script context="module"> approach and it does not solve my issue.

<script context="module">
  export const displayName = 'MyComponent';
</script>

This will not make MyComponent.displayName available (a static property of the component class), but only a named export called displayName. But I only have a reference to the MyComponent available to be used in <svelte:component>.

But I think I can solve this by switching my logic around and having a Map<Component, String> (in addition to the Map<String, Component>) in the same central place that I bless the components that can be opened in a new window.

Unless you have some insights on how I could make that work with context="module" we can go ahead and close this. Can I get a reference to the class inside that script block? I'd rather see bugs fixed (#6112, #6298) than time spent on a feature that nobody except me needs 😅

[dummdidumm]

I don't really have further insights since I don't know your exact situation, and if you say you don't have access to the module context then that's probably not a way to go.
But since you said you found another way and are ok with it to close this, I'm going ahead and do this 😄 We can always revisit this if more people run into this situation and don't have ways to work around this.

[bluwy]

Another idea is to have a preprocessor to auto add the displayName based on the file name.