Merge pull request #1 from ekhaled/further-svelte-support-help

Make actions work with centered

addons/centered/src/components/Centered.svelte

@@ -1,6 +1,6 @@
-<div class="svelte-centered-wrapper" style="{centeredStyles.style}">
-  <div class="svelte-centered-container" style="{centeredStyles.innerStyle}">
-    <svelte:component this="{OriginalComponent}" {...originalData} />
+<div class="svelte-centered-wrapper" style="{style}">
+  <div class="svelte-centered-container" style="{innerStyle}">
+    <slot></slot>
   </div>
 </div>
 
@@ -8,9 +8,8 @@
   export default {
     data() {
       return {
-        OriginalComponent: null,
-        originalData: {},
-        centeredStyles: {}
+        style: '',
+        innerStyle: ''
       };
     }
   };

addons/centered/src/svelte.js

@@ -19,13 +19,7 @@ const centeredStyles = {
  * @see https://svelte.technology/guide#svelte-component
  */
 export default function(storyFn) {
-  const { Component: OriginalComponent, data: originalData } = storyFn();
+  const { Component: OriginalComponent, data, on } = storyFn();
 
-  const centeredData = {
-    OriginalComponent,
-    centeredStyles,
-    originalData,
-  };
-
-  return { Component: Centered, data: centeredData };
+  return { Component: OriginalComponent, data, on, Wrapper: Centered, WrapperData: centeredStyles };
 }

app/svelte/src/client/preview/render.js

@@ -12,8 +12,24 @@ function cleanUpPreviousStory() {
   previousComponent = null;
 }
 
-function mountView({ Component, target, data, on }) {
-  const component = new Component({ target, data });
+function mountView({ Component, target, data, on, Wrapper, WrapperData }) {
+  let component;
+
+  if (Wrapper) {
+    const fragment = document.createDocumentFragment();
+    component = new Component({ target: fragment, data });
+
+    const wrapper = new Wrapper({
+      target,
+      slots: { default: fragment },
+      data: WrapperData || {},
+    });
+    component.on('destroy', () => {
+      wrapper.destroy(true);
+    });
+  } else {
+    component = new Component({ target, data });
+  }
 
   if (on) {
     // Attach svelte event listeners.
@@ -40,6 +56,8 @@ export default function render({
     data,
     /** @type {{[string]: () => {}}} Attach svelte event handlers */
     on,
+    Wrapper,
+    WrapperData,
   } = story();
 
   cleanUpPreviousStory();
@@ -61,7 +79,7 @@ export default function render({
 
   target.innerHTML = '';
 
-  mountView({ Component, target, data, on });
+  mountView({ Component, target, data, on, Wrapper, WrapperData });
 
   showMain();
 }