fix: postMessage error, fix #250

histoire-dev · Aug 17, 2022 · 0f5b400 · 0f5b400
1 parent cefa4f9
commit 0f5b400
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/examples/vue3/src/components/SharedControls.story.vue b/examples/vue3/src/components/SharedControls.story.vue
@@ -13,6 +13,7 @@ const state = reactive({
  number: 20,
  longText: 'Longer text...',
  select: 'crash-bandicoot',
+ fn: () => { /* noop */ },
 })
 
 defineExpose({

diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue b/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue
@@ -25,7 +25,7 @@ function syncState () {
  if (iframe.value && props.variant.previewReady) {
  iframe.value.contentWindow.postMessage({
  type: STATE_SYNC,
- state: toRawDeep(props.variant.state),
+ state: toRawDeep(props.variant.state, true),
  })
  }
 }

diff --git a/packages/histoire-app/src/app/sandbox.ts b/packages/histoire-app/src/app/sandbox.ts
@@ -45,7 +45,7 @@ const app = createApp({
  }
  window.parent?.postMessage({
  type: STATE_SYNC,
- state: toRawDeep(value),
+ state: toRawDeep(value, true),
  })
  }, {
  deep: true,

diff --git a/packages/histoire-app/src/app/util/state.ts b/packages/histoire-app/src/app/util/state.ts
@@ -2,7 +2,7 @@ import { unref, isRef } from 'vue'
 
 const isObject = (val) => val !== null && typeof val === 'object'
 
-export function toRawDeep (val, seen = new WeakMap()) {
+export function toRawDeep (val, clean = false, seen = new WeakMap()) {
  const unwrappedValue = isRef(val) ? unref(val) : val
 
  if (typeof unwrappedValue === 'symbol') {
@@ -20,18 +20,25 @@ export function toRawDeep (val, seen = new WeakMap()) {
  if (Array.isArray(unwrappedValue)) {
  const result = []
  seen.set(unwrappedValue, result)
- result.push(...unwrappedValue.map(value => toRawDeep(value, seen)))
+ let list = unwrappedValue.map(value => toRawDeep(value, clean, seen))
+ if (clean) {
+ list = list.filter(value => typeof value !== 'function')
+ }
+ result.push(...list)
  return result
  } else {
  const result = {}
  seen.set(unwrappedValue, result)
- toRawObject(unwrappedValue, result, seen)
+ toRawObject(unwrappedValue, result, clean, seen)
  return result
  }
 }
 
-const toRawObject = (obj: Record<any, any>, target: Record<any, any>, seen = new WeakMap()) => {
+const toRawObject = (obj: Record<any, any>, target: Record<any, any>, clean = false, seen = new WeakMap()) => {
  Object.keys(obj).forEach((key) => {
- target[key] = toRawDeep(obj[key], seen)
+ if (clean && typeof obj[key] === 'function') {
+ return
+ }
+ target[key] = toRawDeep(obj[key], clean, seen)
  })
 }