Mutating one prop recreates the whole window.xprops object

I am passing a number of properties from parent to the child (the child is an iframe). Some of the props are primitives, some are arrays of objects.

I noticed that when I mutate one prop (e.g. a primitive one) then the whole window.xprops object is recreated, i.e. it becomes a completely new object. Since the child is a reactive app (Vue), rebuilding the array prop forces the child to rerender itself completely (the array contains data which is used to render some components). It would be best if props that are not explicitly mutated in the parent are not altered in window.xprops on the child.

Is this by design or can it be fixed?

My setup: I am using the Vue driver in the parent, and passing the props as props of the Vue component, e.g.:

<my-comp :selected-element="selectedElement" :document="document" />

selectedElement is a number and document is a nested structure (array of objects with children). So whenever selectedElement is updated in the parent, this forces window.xprops.document to be updated in the child as well, even though its contents are the same (it has not been changed in the parent).

[ddenev]

@ogulcantumdogan, sure. First, I have to note that I’m using Zoid with an iframe (not popup).

On the parent side I create the Zoid Vue component and store it in Vuex with code like this (here createIframe is a Vuex action):

import * as zoid from 'zoid/dist/zoid.frameworks.js'
...
createIframe ({ commit }, clientUrl) {
  const zoidIframe = zoid.create({
    tag: 'zoid-iframe',
    url: clientUrl,
    dimensions: { width: '100%', height: '100%' }      
  }).driver('vue', Vue)
  commit('storeIframe', zoidIframe)
}

Then I have another Vue component (in the parent app) which I use as a wrapper for my Zoid component and to pass props and methods to the client Zoid component. Here is the <template> part of this Vue component:

<template>
  <!-- eslint-disable vue/attribute-hyphenation -->
  <component :is="iframe"
             :zoidXProp1="zoidXProp1"
             :zoidXProp2="zoidXProp2"
             :onEvent="handleEvent" />
</template>

here iframe is the actual Zoid component that was created and stored in Vuex above. Note how I pass props and methods (e.g. handleEvent) to the client but this is already well documented by the Zoid team.

Then in the client Vue app I just call zoid.create() in App.vue:

<script>
import * as zoid from 'zoid/dist/zoid.frameworks.js' 

zoid.create({
  tag: 'zoid-iframe',
  url: 'http://your-url-here-can-be-anything.com'
})

export default {
...
}
</script>

That’s pretty much it. Then, on the client, just use the code in my previous post if you need the reactivity.

Hope that helps. Good luck!

[ddenev]

In the mean time, I’ll think about if and how zoid can handle this better.

BTW, @bluepnume, did you have a chance to think on how to add this reactivity to Zoid?