fix: Render templates correctly when serving from bundled

dist/common.js

@@ -14,7 +14,7 @@ const $ = (...args) => {
 const $$ = document.querySelectorAll.bind(document)
 
 function initTemplate(template, data) {
-    const fragment = template.content.cloneNode(true)
+    const fragment = template.cloneNode(true)
     Object.keys(data).forEach(key => {
         const field = fragment.querySelector('.' + key)
         const value = data[key]

dist/runner.html

@@ -41,24 +41,26 @@
 			<tbody></tbody>
 		</table>
 
-		<template>
-			<tr>
-				<td class="pipeline"><a target="_blank"></a></td>
-				<td class="name"><a target="_blank"></a></td>
-				<td class="created_at"></td>
-				<td class="status"></td>
-				<td class="project"><a target="_blank"></a></td>
-				<td class="runner"></td>
-				<td class="retry">retry</td>
-			</tr>
-		</template>
+		<div class="template">
+			<table>
+				<tr>
+					<td class="pipeline"><a target="_blank"></a></td>
+					<td class="name"><a target="_blank"></a></td>
+					<td class="created_at"></td>
+					<td class="status"></td>
+					<td class="project"><a target="_blank"></a></td>
+					<td class="runner"></td>
+					<td class="retry">retry</td>
+				</tr>
+			</table>
+		</div>
 
 		<script src="common.js"></script>
 		<script>
 			const runnerId = new URLSearchParams(window.location.search).get('id')
 			// $('h2').textContent = runnerId
 
-			const template = $('template')
+			const template = $('.template')
 			const table = $('tbody')
 
 			let notifications = true
@@ -115,7 +117,7 @@
 								link: 'https://gitlab.com/' + job.project.path_with_namespace,
 								text: job.project.name
 							},
-							runner: job.runner.description
+							runner: job.runner?.description || ''
 						})
 
 						const row = $(fragment, 'tr')
@@ -127,7 +129,7 @@
 								retryJob(job.project.id.toString(), job.id)
 							} catch (err) {
 								console.error(err)
-								alert(err)
+								alert(err.toString())
 							}
 						})
 
@@ -143,7 +145,7 @@
 					})
 				} catch (err) {
 					console.error(err)
-					alert(err)
+					alert(err.toString())
 				}
 			}
 

dist/runners.html

@@ -22,16 +22,18 @@
 		</table>
 		<a href="runner.html">Show all runners</a>
 
-		<template>
-			<tr>
-				<td class="id"></td>
-				<td class="desc"></td>
-			</tr>
-		</template>
+		<div class="template">
+			<table>
+				<tr>
+					<td class="id"></td>
+					<td class="desc"></td>
+				</tr>
+			</table>
+		</div>
 
 		<script src="common.js"></script>
 		<script>
-			const template = $('template')
+			const template = $('.template')
 			const table = $('tbody')
 
 			listRunners()
@@ -41,14 +43,17 @@
 							id: runner.id,
 							desc: runner.description
 						})
-						fragment.querySelector('tr').addEventListener('click', ev => {
-							console.log('cock')
+						const row = $(fragment, 'tr')
+						row.addEventListener('click', ev => {
 							document.location.href = 'runner.html?id=' + runner.id
 						})
-						table.appendChild(fragment)
+						table.appendChild(row)
 					})
 				})
-				.catch(err => alert(err))
+				.catch(err => {
+					console.error(err)
+					alert(err.toString())
+				})
 		</script>
 	</body>
 </html>

dist/style.css

@@ -15,6 +15,11 @@ body {
 	justify-content: center;
 }
 
+/* workaround for https://github.com/tauri-apps/tauri/issues/4410 */
+div.template {
+	display: none;
+}
+
 table {
 	border: 1px solid #f0f0f0;
 }