-
Notifications
You must be signed in to change notification settings - Fork 2
/
auto.ui.js
139 lines (117 loc) · 4.8 KB
/
auto.ui.js
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import {render, html, svg} from 'https://unpkg.com/uhtml@3.1.0/esm/index.js?module';
import {repos, latestUrlCached, latestUrl, parseUrl} from './u1.js';
let win = null;
export function open(){
if (window['u1-config'] && !window['u1-config'].closed) window['u1-config'].close();
win = window.open('about:blank', 'u1-config', 'popup,width=800,height=640');
win.focus()
const doc = win.document;
// Problem: depencencies in this script are also tracked...
doc.write (
`<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<script>import('${import.meta.url+'/../auto.js'}')<\/script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/u1ui/ico.el@x/font/Material Icons.css">
<style>
html {
font-size:14px;
padding:2rem;
}
body {
font-size:inherit;
}
pre {
font-size:12px;
max-height:70vh;
}
</style>
<body>`
);
setTimeout(()=>{
renderUi(doc.body);
}, 10);
}
async function renderUi(el){
const code = await exportCode();
const repoVersions = await versionCheck();
render(el,
html`
<details>
<summary>Versioncheck</summary>
<div style="overflow:auto; max-height:70vh">
<table>
<thead>
<th>Repo
<th>New version
<th>Old version
<tbody>
${Object.entries(repoVersions).map(([repo, v])=>{
return html`
<tr>
<td>${repo}
<td>${v.newVersion}
<td>${v.oldVersions.map(data=>{
return html`
<span style="display:inline-block">${data.vers||'no version'}
<button title="view in console" onclick="${()=>console.log(data.node)}" class=u1-unstyle><u1-ico>info</u1-ico></button>
</span> `
})}
`
})}
</table>
</div>
</details>
<details>
<summary>needed HTML</summary>
<button onclick="${()=>win.navigator.clipboard.writeText(code)}">copy to clipboard</button>
<button onclick="${()=>win.localStorage.removeItem('u1-needed')}">reset</button>
<pre>${code}</pre>
</details>
`
);
}
const needed = window.u1.needed;
const exportCode = async function(){
await repos();
let needed = localStorage.getItem('u1-needed');
needed = JSON.parse(needed) || {};
let strCss = Object.entries(needed.css).filter(([,prio])=>prio===1).map(([url,prio])=>'<link href="'+latestUrlCached(url)+'" rel="stylesheet" crossorigin>').join('\n');
// todo: combined string (just in the console for now)
let strCssPromizes = Object.entries(needed.css).filter(([,prio])=>prio===1).map(([url,prio])=>{
return fetch(latestUrlCached(url)).then(res=>res.text());
});
const cssContents = await Promise.all(strCssPromizes);
const cssText = cssContents.join('').replace(/\/\*[\s\S]*?\*\//g, '');
console.log(cssText);
let strJs = Object.entries(needed.js).map(([url,prio])=>'<script src="'+latestUrlCached(url)+'" type=module crossorigin></script>').join('\n');
let strCssNonCritical = Object.entries(needed.css).filter(([,prio])=>prio>1).map(([url,prio])=>'<link rel="stylesheet" href="'+latestUrlCached(url)+'" crossorigin>').join('\n');
return strCss +'\n' + strJs + '\n' + '\n<!-- non critical at the end -->\n' + strCssNonCritical;
}
const versionCheck = async function(){
await repos();
const urls = [];
document.querySelectorAll('script').forEach(el=>{
urls.push({url:el.src, node:el});
})
document.querySelectorAll('link[rel=stylesheet]').forEach(el=>{
urls.push({url:el.href,node:el});
})
const reposObj = {};
urls.forEach(obj=>{
const {url, node} = obj;
if (!url.match('u1ui')) return;
const newUrl = latestUrlCached(url);
if (!newUrl) return;
if (newUrl === url) return;
const {repo, vers:oldVers} = parseUrl(url);
const newVers = parseUrl(newUrl).vers;
if (oldVers === newVers) return;
reposObj[repo] ??= {}
reposObj[repo].newVersion = newVers;
reposObj[repo].oldVersions ??= [];
reposObj[repo].oldVersions.push({vers:oldVers, node});
});
return reposObj;
}