/
index.html
52 lines (40 loc) · 1.3 KB
/
index.html
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
<!DOCTYPE html>
<link rel="stylesheet" href="/global.css" />
<h1 class="text-black">Backend Integration</h1>
<p>
This test configures the <code>root</code> to simulate a Laravel/Rails setup.
</p>
<h2>JS Asset References</h2>
<ul>
<li class="asset-reference outside-root">Asset Outside Root</li>
</ul>
<h2>CSS Asset References</h2>
<ul>
<li>
Background URL with Alias:
<div class="background-asset outside-root--aliased"></div>
</li>
<li>
Background URL with Relative Path:
<div class="background-asset outside-root--relative"></div>
</li>
</ul>
<script type="module" src="./main.ts"></script>
<script type="module">
import './global.css'
// Importing a file outside the `root` should provide an @fs path.
import outsideRootUrl from '~/images/logo.png'
setAssetReference('.outside-root', outsideRootUrl)
// Helper: Allows to test the URL content as well as the request being served.
function setAssetReference(elSelector, url) {
const text = document.createElement('code')
text.classList.add('asset-url')
text.textContent = url
const img = document.createElement('img')
img.classList.add('asset-preview')
img.src = url
const el = document.querySelector(`.asset-reference${elSelector}`)
el.appendChild(img)
el.appendChild(text)
}
</script>