From 755ac0d846bde9547031f30bceb26b079ccc8067 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sat, 12 Nov 2022 02:32:14 +0100
Subject: [PATCH] fix(svelte): state sync: ignore undefined, HTMLElement and
 SvelteComponents, fix #346

---
 examples/svelte3/src/BindThis.story.svelte    | 38 +++++++++++++++++++
 .../histoire-plugin-svelte/src/client/util.ts |  5 ++-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 examples/svelte3/src/BindThis.story.svelte

diff --git a/examples/svelte3/src/BindThis.story.svelte b/examples/svelte3/src/BindThis.story.svelte
new file mode 100644
index 00000000..3f663883
--- /dev/null
+++ b/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>
diff --git a/packages/histoire-plugin-svelte/src/client/util.ts b/packages/histoire-plugin-svelte/src/client/util.ts
index d77ee87e..9a715e5a 100644
--- a/packages/histoire-plugin-svelte/src/client/util.ts
+++ b/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
     }