html-css-js/html/test-lazyloadlib/index@v0.2.1.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
71
72
73
74
75
76
77
78
79
<!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>
// yes this is the source file and this is how I wrote it. sry

_m = {};
var req = n => {
	if ( e=_m[n]/* && Object.keys(_m[n]).length*/ ) return e;
	var u=req.p(n), e=_m[n]=e||{}, m={exports:e}, 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', x.responseText+'\n\n//# sourceURL='+u+'\n')(m, e);
	if (m.exports!==e) e._ = m.exports, Object.assign(e, m.exports); // dont redefine module.exports
	return e;
};
req.p = n => n.replace(/^(https:\/\/)?(.*?)(\.js)?$/,(O,p,n,j)=>p?O:req.b+'/'+n+(j||'.js')); // req.parse
// export req.parse
</script>
<script>
  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'
  );


  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;
  }

  // TODO: add _l as lazy loaded modules.exports. `e = _m[n] || {}` use replace _m with _l
  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) /*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]||_m[n]._).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>