Vue Reactivity vs. p5.Vector arrays

[katestange]

In working on the turtle visualizer, I got myself into a several-hours-long swamp. I decided to refactor a different way and extracted myself, but I wanted to bring up the issue because it may bite us again. I was getting INSANE behaviour from an array of p5.Vectors. I can try to create a minimal example soon, but the issue appeared to be that Vue was wrapping the array in a proxy in order to make it reactive, and then failing to correctly deal with calls to length, push() etc. I would push two items on the array, and then there would suddenly be 25 copies of the same element in the proxy of that array, etc. Just undiagnosable insanity. I was able to mitigate it a bit by repeatedly shallow copying the array for no good reason, etc. I know this will need a minimal working example, but I just wanted to record this now to warn us all, in case anyone else runs into this, and in case I can't seem to get a minimal working example put together. My priority was to get turtle working, so I just git stashed what I had and started over with a different (better) refactoring plan.

[gwhitney]

Yes, it is definitely at times critical to call markRaw on visualizer properties that are objects. There are examples in Turtle.ts. We should definitely (at the very least) mention this in the doc pages. Any chance you could suggest a specific place for such information? Or maybe we need an "intermediate" visualizer-writing page to go between the "Building a Visualizer" page and the "Behind the scenes" page, where we could move some of the detail that's in Building a Visualizer to shorten that page, and then that's where this information could go?

[katestange]

This "intermediate page" concept is marked "meeting" elsewhere, so we'll chat about it, but in general I think it's probably a good idea, in order to make the first page less overwhelming for beginners.

[gwhitney]

This is now documented in the "Visualizers in detail" page in #486. Once that's merged, I think we can close this discussion.