Skip to content

Commit cf7cfe2

Browse files
AylenHozAylenHoz
authored
fix - Support errors without stack trace and move scripts to the body end (#77)
1 parent 944c237 commit cf7cfe2

File tree

6 files changed

+25
-28
lines changed

6 files changed

+25
-28
lines changed

‎src/public/error_stack/script.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,15 @@ function toggleAllFrames() {
4444
}
4545
}
4646

47-
onContentLoaded(() => {
48-
document.querySelector('#formatted-frames-toggle').addEventListener('click', function () {
47+
document.querySelector('#formatted-frames-toggle')?.addEventListener('click', function () {
4948
showFormattedFrames(this)
5049
})
51-
document.querySelector('#raw-frames-toggle').addEventListener('click', function () {
50+
document.querySelector('#raw-frames-toggle')?.addEventListener('click', function () {
5251
showRawFrames(this)
5352
})
5453
document
5554
.querySelector('#all-frames-toggle input[type="checkbox"]')
56-
.addEventListener('change', function () {
55+
?.addEventListener('change', function () {
5756
toggleAllFrames()
5857
})
5958

@@ -71,4 +70,3 @@ onContentLoaded(() => {
7170
toggleFrameSource(e.target.closest('li'))
7271
})
7372
})
74-
})

‎src/public/header/script.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ function toggleTheme(input) {
88
}
99
}
1010

11-
onContentLoaded(() => {
1211
document.querySelector('#toggle-theme-checkbox').checked = usesDarkMode()
1312
document.querySelector('#toggle-theme-checkbox').addEventListener('change', function () {
1413
toggleTheme(this)
1514
})
16-
})

‎src/public/layout/script.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,4 @@ function usesDarkMode() {
99
return hasDarkMode
1010
}
1111

12-
function onContentLoaded(listener) {
13-
if (document.readyState !== 'loading') {
14-
listener()
15-
return
16-
}
17-
document.addEventListener('DOMContentLoaded', listener)
18-
}
19-
2012
document.documentElement.classList.add(usesDarkMode() ? 'dark' : 'light')

‎src/templates.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export class Templates {
7272
* the end
7373
*/
7474
let customInjectedStyles: string = ''
75+
let globalScript: string = ''
7576
const styles: string[] = []
7677
const scripts: string[] = []
7778
const cspNonceAttr = cspNonce ? ` nonce="${cspNonce}"` : ''
@@ -84,10 +85,18 @@ export class Templates {
8485
}
8586
})
8687
this.#scripts.forEach((bucket, name) => {
88+
if (name === 'global') {
89+
globalScript = `<script id="${name}-script"${cspNonceAttr}>${bucket}</script>`
90+
}
91+
8792
scripts.push(`<script id="${name}-script"${cspNonceAttr}>${bucket}</script>`)
8893
})
8994

90-
return { styles: `${styles.join('\n')}\n${customInjectedStyles}`, scripts: scripts.join('\n') }
95+
return {
96+
styles: `${styles.join('\n')}\n${customInjectedStyles}`,
97+
scripts: scripts.join('\n'),
98+
globalScript,
99+
}
91100
}
92101

93102
/**
@@ -204,8 +213,11 @@ export class Templates {
204213
},
205214
})
206215

207-
const { scripts, styles } = this.#getStylesAndScripts(props.cspNonce)
208-
return html.replace('<!-- STYLES -->', styles).replace('<!-- SCRIPTS -->', scripts)
216+
const { globalScript, scripts, styles } = this.#getStylesAndScripts(props.cspNonce)
217+
return html
218+
.replace('<!-- STYLES -->', styles)
219+
.replace('<!-- SCRIPTS -->', scripts)
220+
.replace('<!-- GLOBAL SCRIPT -->', globalScript)
209221
}
210222

211223
/**

‎src/templates/layout/main.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ export class Layout extends BaseComponent<LayoutProps> {
3434
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3535
<title>${props.title}</title>
3636
<!-- STYLES -->
37-
<!-- SCRIPTS -->
37+
<!-- GLOBAL SCRIPT -->
3838
</head>
3939
<body>
4040
<div id="layout">
4141
${await props.children()}
4242
</div>
43+
<!-- SCRIPTS -->
4344
</body>
4445
</html>`
4546
}

‎tests/templates.spec.ts‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,10 @@ test.group('Templates', () => {
4343
}
4444
}
4545
46-
onContentLoaded(() => {
4746
document.querySelector('#toggle-theme-checkbox').checked = usesDarkMode()
4847
document.querySelector('#toggle-theme-checkbox').addEventListener('change', function () {
4948
toggleTheme(this)
50-
})
51-
})"
49+
})"
5250
`)
5351
expect(window.document.querySelector('#errorStack-script')?.textContent?.trim())
5452
.toMatchInlineSnapshot(`
@@ -98,16 +96,15 @@ test.group('Templates', () => {
9896
}
9997
}
10098
101-
onContentLoaded(() => {
102-
document.querySelector('#formatted-frames-toggle').addEventListener('click', function () {
99+
document.querySelector('#formatted-frames-toggle')?.addEventListener('click', function () {
103100
showFormattedFrames(this)
104101
})
105-
document.querySelector('#raw-frames-toggle').addEventListener('click', function () {
102+
document.querySelector('#raw-frames-toggle')?.addEventListener('click', function () {
106103
showRawFrames(this)
107104
})
108105
document
109106
.querySelector('#all-frames-toggle input[type=\\"checkbox\\"]')
110-
.addEventListener('change', function () {
107+
?.addEventListener('change', function () {
111108
toggleAllFrames()
112109
})
113110
@@ -124,8 +121,7 @@ test.group('Templates', () => {
124121
sfl.addEventListener('click', function (e) {
125122
toggleFrameSource(e.target.closest('li'))
126123
})
127-
})
128-
})"
124+
})"
129125
`)
130126
expect(window.document.querySelector('#error-hint')).toEqual(null)
131127
})

0 commit comments

Comments
 (0)