fix(index): dynamic css loading support for older browsers

[gaterking]

This PR contains a:

• [ ] bugfix
• [x] new feature
• [ ] code refactor
• [ ] test update
• [ ] typo fix
• [ ] metadata update

Motivation / Use-Case

Breaking Changes

Additional Info

In old browser, such as android 4.3, link tag not support 4.3. Although these devices is few, the onload callback resolve function will not be called. This PR ignore onload for these devices and resolve immediately.

[jsf-clabot]

All committers have signed the CLA.

[alexander-akait]

@gaterking can you provide minimum reproducible test repo and browser version to ensure it is does not works for all, thanks!

[gaterking]

@evilebottnawi http://pie.gd/test/script-link-events/ From this test page, we can see many old browsers not support link tag onload event.

[alexander-akait]

@gaterking also please accept CLA

[alexander-akait]

@gaterking can you faced this problem ?

[gaterking]

@evilebottnawi Yes, I faced it in my vue project. Android 4.3 browser will fail, bescause some lazy load modules with css chunk not resolve.

[alexander-akait]

@gaterking looks good solution, but i think we should search better solution for detecting this

[Jessidhia]

This also happened to be a blocker for a smartphone-specific project at work. I'll link this to the person involved so he can check if this works 🤔

[Jessidhia]

Note that it's important to know when a dynamically inserted style is loaded. Not knowing this leads to FOUC, which can be disastrous if you're doing things like getBoundingClientRect on component mount if it happens before the load is done.

[gaterking]

index.js @evilebottnawi Can you review my new code? If OK, I will create a new PR. Refer to RequieJS plugin, it use regex to check browser, but it don't check webkit version. In new solution, I refer to Dojo plugin and xstyle. I use setInterval to check css file is loaded in this case. I am sure we need to support webkit < 536 only, Becase of Webpack 4.

[gaterking]

what the next step for this PR?

[hxlniada]

may be this is a better solution: https://stackoverflow.com/a/5371426

[alexander-akait]

/cc @gaterking

[gaterking]

I think this PR is not necessary for most developer, maybe we can close it. If somebody need to support old browser, I suggest to clone own repo.

[lili21]

@evilebottnawi what do you think?

[lili21]

@hxlniada It's a neat solution, just need a little change.

...
var img = document.createElement('img');
img.onerror = function (e) {
  var request = event && event.target && event.target.src || fullhref;
  var i = document.styleSheets.length;
  while(i--) {
    if (document.styleSheets[i].href === request) {
      return resolve();
    }
  }
  var err = new Error('Loading CSS chunk ' + chunkId + ' failed.\n(' + request + ')');
  err.request = request;
  reject(err);
};
img.src = fullhref;
...

[gaterking]

#299 similar PR

[codecov[bot]]

Codecov Report

Merging #134 into master will not change coverage. The diff coverage is n/a.

@@          Coverage Diff           @@
##           master    #134   +/-   ##
======================================
  Coverage    0.00%   0.00%           
======================================
  Files           3       3           
  Lines         241     241           
  Branches       49      49           
======================================
  Misses        198     198           
  Partials       43      43           

Impacted Files	Coverage Δ
src/index.js	0.00% <ø> (ø)

---

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 41347f7...bd891a0. Read the comment docs.