I have a scenario where I need to provide information to a ponent class such that downstream instantiations can make use of that info.

For instance:

import { AComponent } from 'AComponent.svelte'
...
AComponent.classInfo = {something: somedata}

And then, the ponent could access that information as in:

<script>
  let something = AComponent.classInfo.something
</script>

There seemed to be some effort in providing this kind of functionality in V2 (I'm using 3) that was discussed in these issues: Support Component Static Method #480, which resulted in Added setup function which can supply static methods/properties. #572.

However, scanning the current docs reveals no such setup method. So, did this survive from V2 to 3 & if not, is there some way to do this?

I have a scenario where I need to provide information to a ponent class such that downstream instantiations can make use of that info.

For instance:

import { AComponent } from 'AComponent.svelte'
...
AComponent.classInfo = {something: somedata}

And then, the ponent could access that information as in:

<script>
  let something = AComponent.classInfo.something
</script>

There seemed to be some effort in providing this kind of functionality in V2 (I'm using 3) that was discussed in these issues: Support Component Static Method #480, which resulted in Added setup function which can supply static methods/properties. #572.

However, scanning the current docs reveals no such setup method. So, did this survive from V2 to 3 & if not, is there some way to do this?

• javascript
• static-methods
• svelte-3

Share Follow asked Jan 30, 2021 at 21:38 rickbrickb 67166 silver badges1919 bronze badges 4

• 1 why not create a .js file, write your logic to generate the data for the ponent, then import this variable from the js file, in the ponent, this way the same data will be shared amongst all the ponents – OmG3r Commented Jan 31, 2021 at 16:23
• Yeah, I could do something like that, and I might. This is in an external ponent library, but it would still be possible by adding a .js function that exports a 'setSomething()' function and then the ponents in the lib could get access to the 'something' via a 'getSomething()' call. – rickb Commented Feb 1, 2021 at 16:43
• Right now, I'm working around it using a sessionStorage object. Store the 'something' in the sessionStorage and the ponents can get to it. – rickb Commented Feb 1, 2021 at 16:45
• Neither of these approaches are optimal - I'd rather have the information pletely encapsulated in the ponent definition. – rickb Commented Feb 1, 2021 at 16:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can define static properties that are not instance specific in the module script block

<script context="module">
  export const someValue = 123
</script>
<script>
  // Normal ponent stuff
</script>

and then import it directly from the ponent file:

import { someValue } from './MyComponent.svelte'

Note that this is a value shared among all instances of this ponent.

At least in version v3.32, it's not possible to define static properties in a Svelte Component. Only named exports are possible.

The only workaround I known is using a custom webpack loader/rollup plugin, and the implementation is never pretty.