Add Event for non-legacy browsers with `onlyLegacy: true`

Hi, thank you for building + maintaining such a great ponyfill!

I have some code (initializing a Vue app) that I want to have run as early as possible, but not before the cssVars call completes on legacy browsers. I also don’t want to have to add onlyLegacy: false because I don’t want extra work to be done in non-legacy browsers. However, handlers like onComplete don’t trigger at all in non-legacy browsers, so adding my initialization code to onComplete means that it never runs in non-legacy browsers.

Could you add a handler that triggers after cssVars call is done, even in non-legacy browsers and with onlyLegacy: true set? It could either be a handler called only when cssVars bails early or one that’s called 100% of the time.

Thank you!

[jhildenbiddle]

Sounds good to me then. I’ll take care of this early next week.

Thanks for the quick feedback, everyone!

[jhildenbiddle]

Makes sense. Here are my initial thoughts:

• Callback to be named onDone
• Last callback invoked by the ponyfill (after onComplete, if applicable)
• Invoked in all browsers
• Returns two values: hasNativeSupport and benchmark

Examples

cssVars({
  onDone(hasNativeSupport, benchmark) {
    // All browsers...
    console.log('Benchmark: ' + benchmark);
  }
});

The onComplete callback will continue to be where you access the CSS output, DOM elements, and custom property key/value pairs processed by the ponyfill, while the onDone callback can be used to invoke post-ponyfill code in both modern and legacy browsers:

cssVars({
  onComplete(cssText, styleElms, cssVariables) {
    // Legacy browsers...
  },
  onDone(hasNativeSupport, benchmark) {
    // All browsers...
    console.log('Benchmark: ' + benchmark);
  }
});

If you don’t need to access the values returned by the onComplete callback, you can move all post-ponyfill logic into the onDone callback and use the hasNativeSupport argument to target modern and/or legacy browsers:

cssVars({
  onDone(hasNativeSupport, benchmark) {
    // All browsers...
    console.log('Benchmark: ' + benchmark);

    // Modern browsers...
    if (hasNativeSupport) {
      console.log('Native Support');
    }
    // Legacy browsers...
    else {
      console.log('Legacy');
    }
  }
});

The only bummer is that this will require a major version bump since the benchmark value is being moved from the onComplete callback to the onDone callback.

Thoughts?

Pinging @pseudoramble, @freitasskeeled, and @evry-johber since they created issues related to this same topic earlier.