Static properties on components

[DylanPiercey]

Currently as far as I can tell this is not possible.

I would imagine it would be something like:

<p>Hello World</p>
<script>
export const meta = 'my meta data'
export default {...}
</script>

Then you could consume this programatically like so:

import MyComponent, { meta } from './my-component.html'

console.log(meta)

I think this would be handy to have and am curious what others think and if there are other ways to achieve this effect (perhaps using methods as getters).

[nsaunders]

Looks like #193.

[Rich-Harris]

I think this is more in line with #480 (comment) — how does that proposal sound?

[DylanPiercey]

I think that proposal solves the problem. My only reservation is that it seems more frameworky than this as setup would be a runtime thing vs compiling to the proper class.

[Conduitry]

One thing that's not clear to me is with this proposal whether MyComponent.meta would also be 'my meta data'. Simply passing through named exports unchanged seems like it would be really simple, if we didn't have to worry about also storing them on the component's class. This question could be precisely the difference between this ticket and something like #480.

[Rich-Harris]

The only thing that gives me pause is interoperability — at the moment, export default in a Svelte component translates to module.exports = in CommonJS or return in IIFE/AMD/UMD. (This is also how Rollup treats default exports without accompanying named exports).

When you start throwing named exports into the mix, you have to start doing things like this...

exports['default'] = Component;
exports.meta = 'my meta data';

...which inevitably ends up causing all sorts of headaches that are impossible to anticipate. I may be overly sensitive to that sort of thing, having been through the trenches with Rollup, but given that there really isn't a scenario where you'd need the named export but not the default one, to me it feels simpler to just add meta as a static property of the component — works the same everywhere, with no surprises.

[DylanPiercey]

@Rich-Harris couldn't you could simply translate it to the following?

module.exports = exports = Component
exports['default'] = exports
exports.meta = 'my meta data'

Or even

module.exports = exports = Component['default'] = Component
exports.meta = 'my meta data'

[Rich-Harris]

I seem to remember there being some reason why that also causes problems, though I can't remember for the life of me what it was. Possibly something to do with assumptions made by other tooling. Or I could be imagining it...

[DylanPiercey]

@Rich-Harris I can't seem to recall anything like that. Although tools like babel will check for exports.__es_module = true before using exports.default. Although I don't think that matters in this case.