Svelte: Support latest prerelease

Author: valentinpalkovic

code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount } from 'svelte';
+  export let svelteVersion;
   export let decorator;
   export let decoratorProps = {};
   export let component;
@@ -14,7 +15,7 @@
     return instance || decoratorInstance;
   }
 
-  if (on) {
+  if (on && svelteVersion < 5) {
     // Attach svelte event listeners.
     Object.keys(on).forEach((eventName) => {
       onMount(() => getInstance().$on(eventName, on[eventName]));

code/renderers/svelte/src/components/PreviewRender.svelte

@@ -2,6 +2,7 @@
   import SlotDecorator from './SlotDecorator.svelte';
   import { dedent } from 'ts-dedent';
 
+  export let svelteVersion;
   export let name;
   export let title;
   export let storyFn;
@@ -55,4 +56,4 @@
   }
 </script>
 
-<SlotDecorator {Component} {props} on={{ ...eventsFromArgTypes, ...on }} />
+<SlotDecorator {svelteVersion} {Component} {props} on={{ ...eventsFromArgTypes, ...on }} />

code/renderers/svelte/src/components/SlotDecorator.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
 
+  export let svelteVersion;
   export let decorator = undefined;
   export let Component;
   export let props = {};
@@ -9,16 +10,16 @@
   let instance;
   let decoratorInstance;
   
-  if (on) {
+  if (on && svelteVersion < 5) {
     // Attach Svelte event listeners in Svelte v4
     // In Svelte v5 this is not possible anymore as instances are no longer classes with $on() properties, so it will be a no-op
-    onMount(() => {
+      onMount(() => {
       Object.entries(on).forEach(([eventName, eventCallback]) => {
         // instance can be undefined if a decorator doesn't have <slot/>
         const inst = instance ?? decoratorInstance;
         inst?.$on?.(eventName, eventCallback)
       });
-    });
+    });    
   }
 </script>
 

code/renderers/svelte/src/render.ts

@@ -77,6 +77,7 @@ function renderToCanvasV4(
     const mountedComponent = new PreviewRender({
       target: canvasElement,
       props: {
+        svelteVersion: 4,
         storyFn,
         storyContext,
         name,
@@ -148,6 +149,7 @@ function renderToCanvasV5(
       name,
       title,
       showError,
+      svelteVersion: 5,
     });
     const mountedComponent = svelte.mount(PreviewRender, {
       target: canvasElement,