Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Array Property not converted to ReactiveArray when using ViewModel inside IFRAME #292

Open
arggh opened this issue Aug 10, 2017 · 7 comments

Comments

@arggh
Copy link

arggh commented Aug 10, 2017

This has to be the most absurd, far fetched edge case scenario this repository has seen so far, but here goes:

  1. I have a template that gets an array as prop. ViewModel converts the Array to a ReactiveArray like I'm used to.
  2. If I have the same template inside an IFRAME, rendered with same initial properties, the Array prop does not get converted to ReactiveArray.

Reproduction here: https://github.com/arggh/viewmodel-iframe-issue

I tried to make it as simple as possible while still explaining the issue properly. I had to include a router for the IFRAME to work.

@ManuelDeLeon
Copy link
Owner

I can't check it right now but I'm pretty sure ReactiveArray doesn't work across IFrames due to the moronic decision I made like 5 years ago when I decided to extend JS Arrays.

@arggh
Copy link
Author

arggh commented Aug 10, 2017

I'm trying to build a component browser (like Chromatic or Storybook) for Blaze and ViewModel, which is why I hope for ViewModel to work inside IFRAME.

@ManuelDeLeon
Copy link
Owner

I'll see what I can do.

@arggh
Copy link
Author

arggh commented Aug 16, 2017

Other weirdness probably related to using an IFRAME.

Seems I cannot access a component's value by reference from a helper, like so:

<template name="parent">
   {{> component ref='childComponent' }}
   <span>{{valueFromChild}}</span>
</template>
Template.parent.viewmodel({
   valueFromChild() {
      return this.childComponent.value();
   }
}

but I can like so:

<template name="parent">
   {{> component ref='childComponent' }}
   <span {{b "text: childComponent.value"}}></span>
</template>

The weirdest thing is, if I write this in a helper:

Template.parent.viewmodel({
   log() {
      console.log(this) // Prints out ViewModel with props, one of them the reference to 'childComponent' (ViewModel)
      console.log(this.childComponent) // Prints out undefined
   }
}

@ManuelDeLeon
Copy link
Owner

Okay, I fixed the array issue. Update VM to 6.3.3 and ReactiveArray to 1.0.6 (if you have a direct reference).

Please make a repro for the parent/child issue.

@arggh
Copy link
Author

arggh commented Aug 17, 2017

This is great and it seems to fix the issue, thanks! I'll try to build a repro for the referencing issue.

@arggh arggh closed this as completed Aug 17, 2017
@arggh
Copy link
Author

arggh commented Aug 17, 2017

I'm reopening this since there's still something funny going on with IFRAME's.

In certain scenarios, ViewModel somehow "mangles" Objects in a way I do not quite understand. Suddenly for example aldeed:simple-schema does not recognize Objects as Objects if they were referenced by calling a ViewModel helper (at least in my test scenario below, which I admit, is slightly unusual).

Repro:

https://github.com/arggh/viewmodel-iframe-issue/tree/object-issue

How to:

  1. Open console
  2. Click "Open person data"
  3. Observe how two grey modals pop up and all is fine, objects are objects
  4. Open the IFRAME
  5. Click "Open person data"
  6. The first case with hard coded props works and the modal opens
  7. The second case with props from ViewModel methods fails, Objects are no longer Objects :/

@arggh arggh reopened this Aug 17, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants