html-css-js/html/test-lazyloadlib/index@v0.2.0.html at master · denisde4ev/html-css-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hello, World!</title>
<style>@media(prefers-color-scheme:dark){html{color-scheme:dark}</style>
<script>
  _m = {}; // req.module
  var req=n=>{ // src: https://github.com/denisde4ev/html-css-js/raw/master/js/lib/req/req-synconly@0.1.0-alpha.js
  	if(_m[n=({u}=req.p(n)).n]){return _m[n]}
  	var u,m={exports:_m[n]={}},x=new XMLHttpRequest();x.open('GET',u,false);x.send(); // don't set request Content-Type. or it'll discard prefethed cache
  	if(x.status!==200||!/^(application|text)\/(x-)?javascript($|;)/i.test(x.getResponseHeader('Content-Type')))throw new Error('bad Content-Type');
  	Function('module, exports','//# sourceURL='+u+'\n'+x.responseText)(m,_m[n]);
  	return _m[n];
  };
  req.b = ( // req.basepath
  	location.hostname === 'www.denisde4ev.xyz' || location.hostname === 'denisde4ev.xyz' ?
  		'//js.denisde4ev.xyz'
  	: location.hostname === 'denisde4ev.github.io' ?
  		'/html-css-js/js/lib'
  	// location.hostname === null && location.href === 'file://...' // origin=null and no "Access-Control-Allow-Origin" for files duh..
  	: location.hostname === 'localhost' && location.pathname.startsWith('/html/test-lazyloadlib/') ?
  		'/js/lib'
  	:
  		'https://cdn.jsdelivr.net/gh/denisde4ev/html-css-js/js/lib'
  );
  req.p = (n,u) => ({n:n.replace(/^(https:\/\/)?(.*?)(\.js)?$/,(O,p,n,j)=>(u=p?O:req.b+'/'+n+(j||'.js'),n)),u}); // req.url


  if (navigator.connection) {
  	var fastConnection = !/2g/.test(navigator.connection.effectiveType); // 'slow-2g' || '2g' || unef
  	defT = !navigator.connection.saveData && (
  		fastConnection ? 6e3 : 0.5e3
  	);
  } else {
  	defT = 2e3;
  }

  var l = function prefetch_lazyfn(n, F, t) {
  	if (t === void 0) t=1;
  	t *= defT;
  	if (t) {
  		setTimeout(_=>{
  			if (Object.hasOwn(_m, n)) { console.info('lib already loaded bef prefetch', n); return; }
  			var el = document.createElement('link'), u = req.p(n).u /*TESTING: + '?v=' + Math.random()*/;
  			el.rel = 'prefetch'; el.href = u; el.as = 'script';
  			el.onload = _ => {
  				if (Object.hasOwn(_m, n)) { console.info('lib already loaded bef async script', n); return; }
  				console.log('will async load script')
  				var el = document.createElement('script');
  				el.async = 1; el.src = u;
  				el.onload = _ => { console.log('script loaded'); };
  				document.head.appendChild(el);
  			}
  			document.head.appendChild(el);
  			console.log('added prefetch');
  		}, t)
  	}

  	for (let f of typeof F === 'string'?[F]:F) {
  		globalThis[f] = function() { // note: if lazyFn is cached and recalled multiple times might redefine fn in globalThis again and again
  			return (globalThis[f] = req(n)[f]).apply(this, arguments);
  		}
  	}
  }

  l(localStorage.qFirefoxDebug ? 'q/q%400.1.0-firefoxpredict.js' : 'q/q%400.1.0','q');

</script>
<button onclick="q('#content').html('clicked '+Math.random())">click me</button>
<p id="content"></p>