feat: enable load callbacks

[pimlie]

Resolves: #240

This pr adds the possibility for adding callbacks which are called when eg the script has been loaded. This makes it possible to chain scripts which are depending on each other.

Client side implementation

When the element is created the onload attribute is just directly set

Server side implementation

• Elements need to have a ${tagIDKeyName} set (vmid / hid)
• When a tag has a callback, an onload attribute is added onload="this.__vm_l=1"
• On hydration, VueMeta will check for the ${ssrAttribute} attribute
• When this exists, the load callbacks are added
• The corresponding callback for an element is resolved using the tagIDKeyName
• On existing elements an load event listener is directly added
• When the DOM is not fully loaded, an event listener is added onReadyStateChange which adds callback to available elements
• Once the load callback is triggered for a tag, the onload attribute will be removed from the element

VueMeta uses the following three props directly on the element for hydration/ load callback control:

• __vm_cb whether the load callback has been called
• __vm_l set by onload attribute, whether the element was loaded
• __vm_ev whether the event listener was added or not

skip attribute

I have added a skip attribute for tag definitions in metaInfo so its easier to do reactive chaining (see async-callback example)

Potential caveats

• Callbacks on tags which are loaded before the main app will probably not trigger not anymore due to onload attribute which is always added

ToDo

• add tests

[atinux]

LGTM :)

[galvez]

You've been busy :D

[TheAlexLichter]

LGTM so far. Only 2 small things

[codecov]

Codecov Report

Merging #414 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #414   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          31     33    +2     
  Lines         449    511   +62     
  Branches      127    145   +18     
=====================================
+ Hits          449    511   +62

Impacted Files	Coverage Δ
src/client/$meta.js	100% <ø> (ø)	⬆️
src/client/updateClientMetaInfo.js	100% <100%> (ø)	⬆️
src/server/generators/tag.js	100% <100%> (ø)	⬆️
src/shared/constants.js	100% <100%> (ø)	⬆️
src/client/updaters/tag.js	100% <100%> (ø)	⬆️
src/shared/merge.js	100% <100%> (ø)	⬆️
src/shared/log.js	100% <100%> (ø)
src/client/load.js	100% <100%> (ø)
src/shared/mixin.js	100% <100%> (ø)	⬆️
... and 1 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 05163a7...9e50b87. Read the comment docs.

[pimlie]

Due to issues in IE9, I've opted for a more basic approach. Its quite ugly if you ask me, but adding the onload attribute on ssr makes sure that we know the element has been loaded also when the loading takes place before we can add a load event listener.

I've also removed the MutationObserver and just try to add callbacks on every document.readyState change.

Have to fix the tests again once you approve.

[pimlie]

I've could have made this an object like __vm = {} instead but as __vm_l needs to be set from the onload attribute and using an object there is too complicated, this approach of separate variables seemed ok to me.

major refactor