Data initialization and watchers using P5Js and VueJs - vuejs2

As I am trying to play with evolutionary algorithms and building visualization tools of the process, I'd like to use VueJs with P5Js.
I have this code: (SO) Playing with Evolutionary Algorithms on Codepen.io
The problem is that Vue instance's data population does not update properly.
Here what I tried to do:
Pass the global objet Game as Vue instance's data. Then population get updated properly, but the data is so big that everything get laggy;
Populate Game.population array when declared, but it does not work: P5JS throw me an error createVector() is not defined;
Populate Game.population array in Vue instance's beforeCreate() method. It does not work neither. Giving me an other error;
Proxy Game.population by an other object Data declared globally or in Vue instance's beforeCreate() method, for curating interesting cells data (I don't need the pos attribute) and so avoiding createVector() error. It is a dead end;
Thinking about hoisting, I wondered if VueJS was initialized before P5JS run. It is the case. But I can't figure how to change that.
What is the issue here? How should I refactor my script so Vue instance's data and Game.population can be linked?


This solution isn't as pretty as throwing your Game object into the Vue instance, but it works.
Forked here: https://codepen.io/andymerskin/pen/LyoEmW
Here's what I changed:
Added a computed getter/setter for population, giving you a clean way to render the array's length in the template, and the ability to assign it in your Game loop using app.population = Game.population in your Game.doPopulatePacks routine.
Changed data.property in the Vue instance to _property to keep the naming conventions paired up for use inside the computed property. It does come with the caveat that it's no longer proxied to avoid conflicts with Vue's internal properties, since we're leaning on the computed property in the template.
(Currently, there isn't a clear convention for defining private properties in a Vue instance, even though underscores _ are the preference in JS more broadly.)
And with that, you'll see in the forked demo that your game's population stays up to date in the UI.

Related

Do I have to call unmount with Vue3?

Maybe I'm y bit too careful here. I create a component with createApp programmatically and mount it on a DOM node. Later, I remove the DOM node from the DOM tree.
Do I have to make sure to call unmount before removing the DOM node (with the mounted Vue3 app) in order to avoid a memory leak? Or is all data maintained in properties of the DOM node created during the mount? The documentation doesn't mention this explicitly (or I failed to find anything).
Explicit unmounting seems natural according to general resource allocation/deallocation rules. No need for explicit unmounting also seems natural as this is a garbage collecting environment.

Vue 3 Composition API - watchEffect vs. watch

So I have been learning the Vue Composition API and was wondering what the difference between watchEffect and watch is. Watch says it's the same as the Vue 2 watch, so I'm guessing watchEffect is like the 2.0 of that? I'm wondering if there is any specific cases where one would have great advantages over the other like in the case of stopping the watchEffect and then reactivating it instead of using a boolean in a regular watch... or are they just basically different ways of writing the same thing.
Thanks!
Reference:
watcheffect: https://vue-composition-api-rfc.netlify.com/api.html#watcheffect
watch: https://vue-composition-api-rfc.netlify.com/api.html#watch

watchEffect seems to be a simplified watch and the main differences are
Only accepts a function
watch can accept either a function or one or more reactive properties.
Runs immediately when defined and when reactive dependencies change
watch only runs when reactive dependencies change

What helped me to understand the difference between watch and watchEffect in Vue 3 was to think about watchEffect as computed with side-effects.
The watchEffect() hook works like the computed() hook or the computed option, but instead of returning a value, you use it to trigger side-effects.
Use watch whenever you want to trigger a side-effect when a single reactive value changes.
// Triggers whenever `user` is updated.
watch(user, () => doSomething({ user: user.value, profile: profile.value }))
Use watchEffect whenever you need to watch multiple reactive values and trigger a side-effect whenever any of them is updated.
// Triggers whenever `user` *or* `profile` is updated.
watchEffect(() => doSomething({ user: user.value, profile: profile.value }))
See: watch vs. watchEffect when to use what with Vue.js

I would use:
watchEffect when I want to watch multiple reactive properties and I don't care about old values
watch when I want to watch one specific reactive properties and I may want old value
Note, above is what I would use them for, but may not be their only usage.
Also found in docs regarding the difference:
Compared to watchEffect, watch allows us to:
Perform the side effect lazily;
Be more specific about what state should trigger the watcher to re-run;
Access both the previous and current value of the watched state.
Source: https://composition-api.vuejs.org/api.html#watch

watchEffect is something introduced in Vue3 with its composition api. The reason to have both watchEffect and watch, as I understand, is to keep the semantics of watch as close as possible to that of Vue2. The birth of watchEffect, if you are interested, can be traced back to here and here
As it stands today, watchEffect is an immediate/eager watch that uses a more concise/consistent syntax (consistent with computed):
watchEffect does not accept explicit watch sources, but instead automatically figures out all the dependencies by immediately executing the callback (or effect as how it is called in the source code), similar to how computed works. Therefore watchEffect must run the effect immediately. And because of this, there is a common trap (at least I have to keep reminding myself of it constantly) when setting up watchEffect: you need to make sure that during the first execution of your watchEffect, all of the dependencies are indeed accessed. How would some dependency escape from being accessed? Watch for conditional statements.
watchEffect will run its effect immediately as mentioned above.
watchEffect is a deep watch. This is something I am not sure whether it is intended or not. If you use a reactive object inside your effect, any change on that object will cause the effect to rerun, even if the changed property is not the one you accessed or is nested.
If Vue 3 is designed from scratch or there is no concern of maintaining backward compatibility, I would imagine there will only be watchEffect

How to test Stencil.js state change?

I'm trying to figure out how to test state change in a Stencil web component using jest. I'm new to testing in general and have found that you can you use Enzyme to test state change within React components but I haven't been able to figure out how to do it with a Stencil component. How would I go about doing this?

Generally, you are not recommended to test the internal logic of component (state) but test public API(props, events) instead.
But if you wish to test it anyway, I suggest you check Testing documentation on stencils original website. If by testing a component you mean test it by instantiating a component explicitly then it means you are going to test an instance of plain javascript class. So if your state variable marked as private (which is a best practice) then you will not able to compile it, since TS will throw compilation errors. So, as an option (and the only as I see now) you can make those state members public and check them in your expects().

Apache Velocity not replacing few variables sometimes

We are using Velocity to create email templates. For that, we are adding all the required parameters to a HashMap and that HashMap we are adding to the VelocityContext object. It generally works fine, but sometimes(not always) few variables are not being replaced by velocity. I also checked that these variables did exist in HashMap before being added to the context. Please suggest what might be wrong.

Hard to guess the reason without seeing the code... typos? name collision?
There's a debugging technique (if you don't use the SecureUberspector) which consists in displaying $object.class.name from inside the template.

Use data in plugin outside the SCIPsolve call

I would like to share data between a plugin and my main function (this is, use it outside the call to the SCIPsolve function). For example, a branching rule sets a certain int variable to 1 and then, after the optimization is done I can go and check wether the variable was changes or not.
I thought I could accomplish this by using the plugin data (e.g. SCIP_BranchruleData) but it can't be accessed from outside the plugin's source file.
How can I do it?
I will appreciate any help.
Rodolfo

An easy solution is to add a getter function to the branchrule which you implement in branch_xyc.c and prototype in branch_xyz.h. Then your code needs to include the header file and you can access the fields in the branchdata.
See also the documentation of branch_allfullstrong.cpp where an external function is defined and you can see how to get the branchdata and branchrule when passing just a SCIP pointer.