fix(svelte): state sync: ignore undefined, HTMLElement and SvelteComp…

…onents, fix #346

examples/svelte3/src/BindThis.story.svelte

@@ -0,0 +1,38 @@
+<script>
+  export let Hst
+
+  let disabled = false;
+  let button = undefined;
+  let checkbox = undefined;
+</script>
+
+<Hst.Story title="BindThisVsControls">
+  <button bind:this={button} {disabled}>
+    Hello Histoire
+  </button>
+
+  <section>
+    button={button}
+    checkbox={checkbox}
+  </section>
+
+  <label>
+    <input
+      type="checkbox"
+      bind:checked={disabled}
+    />
+    Disabled
+  </label>
+
+  <Hst.Checkbox
+    bind:this={checkbox}
+    title="Checkbox"
+  />
+
+  <svelte:fragment slot="controls">
+    <Hst.Checkbox
+      bind:value={disabled}
+      title="Disabled"
+    />
+  </svelte:fragment>
+</Hst.Story>

packages/histoire-plugin-svelte/src/client/util.ts

@@ -7,6 +7,9 @@ function cleanupState (state: Record<string, any>): Record<string, any> {
     if (key === 'Hst') continue
     const value = state[key]
     if (typeof value === 'function') continue
+    if (typeof value === 'undefined') continue
+    if (value instanceof HTMLElement) continue
+    if (typeof value === 'object' && value.$$) continue
     result[key] = value
   }
   return result
@@ -19,7 +22,7 @@ export function syncState (variantState, onChange: (state) => unknown) {
     if (value == null) return
     if (!syncing) {
       syncing = true
-      onChange(value)
+      onChange(cleanupState(value))
     } else {
       syncing = false
     }