mirror of
https://github.com/vitejs/vite.git
synced 2024-11-22 07:09:05 +00:00
508 lines
14 KiB
HTML
508 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link class="ico" rel="icon" type="image/svg+xml" href="favicon.ico" />
|
|
</head>
|
|
|
|
<link rel="icon" href="data:," />
|
|
<link rel="stylesheet" href="/raw.css" />
|
|
|
|
<h1>Assets</h1>
|
|
|
|
<p class="base"></p>
|
|
|
|
<h2>Raw References from publicDir</h2>
|
|
<ul>
|
|
<li class="raw-js"></li>
|
|
<script src="/raw.js"></script>
|
|
<li class="raw-css">
|
|
Raw CSS from publicDir should load (this should be red)
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Asset Imports from JS</h2>
|
|
<ul>
|
|
<li>Relative: <code class="asset-import-relative"></code></li>
|
|
<li>Absolute: <code class="asset-import-absolute"></code></li>
|
|
<li>From publicDir: <code class="public-import"></code></li>
|
|
</ul>
|
|
|
|
<h2>CSS url references</h2>
|
|
<div>Font should be loaded (all text should be italic)</div>
|
|
<div class="css-url-absolute">
|
|
<span style="background: #fff">CSS background (absolute)</span>
|
|
</div>
|
|
<div class="css-url-relative">
|
|
<span style="background: #fff">CSS background (relative)</span>
|
|
</div>
|
|
<div class="css-image-set-relative">
|
|
<span style="background: #fff"
|
|
>CSS background with image-set() (relative)</span
|
|
>
|
|
</div>
|
|
<div class="css-image-set-without-url-call">
|
|
<span style="background: #fff"
|
|
>CSS background with image-set() (relative)</span
|
|
>
|
|
</div>
|
|
<div class="css-image-set-with-var">
|
|
<span style="background: #fff">
|
|
CSS background image-set() (relative in var)
|
|
</span>
|
|
</div>
|
|
<div class="css-image-set-mix-url-var">
|
|
<span style="background: #fff">
|
|
CSS background image-set() (mix var and url)
|
|
</span>
|
|
</div>
|
|
<div class="css-image-set-base64">
|
|
<span style="background: #fff">
|
|
CSS background image-set() (with base64)
|
|
</span>
|
|
</div>
|
|
<div class="css-image-set-gradient">
|
|
<span style="background: #fff">
|
|
CSS background image-set() (with gradient)
|
|
</span>
|
|
</div>
|
|
<div class="css-image-set-multiple-descriptor">
|
|
<span style="background: #fff">
|
|
CSS background image-set() (with multiple descriptor)
|
|
</span>
|
|
</div>
|
|
<div
|
|
style="
|
|
background-image: -webkit-image-set(
|
|
'./nested/asset.png' type('image/png') 1x,
|
|
'./nested/asset.png' type('image/png') 2x
|
|
);
|
|
background-size: 10px;
|
|
"
|
|
>
|
|
<span style="background: #fff">
|
|
CSS background image-set() (with multiple descriptor)
|
|
</span>
|
|
</div>
|
|
<div class="css-url-relative-at-imported">
|
|
<span style="background: #fff"
|
|
>CSS background (relative from @imported file in different dir)</span
|
|
>
|
|
</div>
|
|
<div class="css-url-public">
|
|
<span style="background: #fff">CSS background (public)</span>
|
|
</div>
|
|
<div class="css-url-data-uri">
|
|
<span style="background: #fff">CSS background (data URI)</span>
|
|
</div>
|
|
<div class="css-url-base64-inline">
|
|
<span style="background: #fff">CSS background (base64 inline in prod)</span>
|
|
</div>
|
|
<div class="css-url-quotes-base64-inline">
|
|
<span style="background: #fff">CSS background (base64 inline in prod)</span>
|
|
</div>
|
|
<div class="css-url-same-line">
|
|
<span style="background: #fff"
|
|
>CSS background (multiple urls on same line)</span
|
|
>
|
|
</div>
|
|
<div class="css-url-aliased">
|
|
<span style="background: #fff">CSS background (aliased)</span>
|
|
</div>
|
|
|
|
<h2>Unicode URL</h2>
|
|
<div>
|
|
<code class="unicode-url"></code>
|
|
<img src="./nested/テスト-測試-white space.png" />
|
|
</div>
|
|
|
|
<h2>encodeURI for the address</h2>
|
|
<div>
|
|
<img
|
|
class="encodeURI"
|
|
src="./nested/%E3%83%86%E3%82%B9%E3%83%88-%E6%B8%AC%E8%A9%A6-white%20space.png"
|
|
/>
|
|
</div>
|
|
|
|
<h2>Image Src Set</h2>
|
|
<div>
|
|
<img
|
|
class="img-src-set"
|
|
src="./nested/asset.png"
|
|
srcset="./nested/asset.png 1x, ./nested/asset.png 2x"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<h2>SVG Fragments</h2>
|
|
<div>
|
|
<img
|
|
class="svg-frag-img"
|
|
src="./nested/fragment.svg#icon-clock-view"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="svg-frag-img"
|
|
src="./nested/fragment.svg#icon-heart-view"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="svg-frag-img"
|
|
src="./nested/fragment.svg#icon-arrow-right-view"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<h2>SVG Fragments via CSS background url</h2>
|
|
<div>
|
|
<span class="icon icon-clock"></span>
|
|
<span class="icon icon-heart"></span>
|
|
<span class="icon icon-arrow-right"></span>
|
|
</div>
|
|
|
|
<h2>SVG Fragments via JS Import</h2>
|
|
<div>
|
|
<p>Imported path: <code class="svg-frag-import-path"></code></p>
|
|
<img class="svg-frag-import" alt="" />
|
|
</div>
|
|
|
|
<h2>Unknown extension assets import</h2>
|
|
<code class="unknown-ext"></code>
|
|
|
|
<h2>?raw import</h2>
|
|
<code class="raw"></code>
|
|
|
|
<h2>?url import</h2>
|
|
<code class="url"></code>
|
|
|
|
<h2>?url import with css</h2>
|
|
<code class="url-css"></code>
|
|
|
|
<h2>new URL('...', import.meta.url)</h2>
|
|
<img class="import-meta-url-img" />
|
|
<code class="import-meta-url"></code>
|
|
|
|
<h2>new URL('@/...', import.meta.url)</h2>
|
|
<img class="import-meta-url-dep-img" />
|
|
<code class="import-meta-url-dep"></code>
|
|
|
|
<h2>new URL('/...', import.meta.url)</h2>
|
|
<img class="import-meta-url-base-path-img" />
|
|
<code class="import-meta-url-base-path"></code>
|
|
|
|
<h2>new URL('...', import.meta.url (without extension))</h2>
|
|
<p>
|
|
<code class="import-meta-url-content-without-extension"></code>
|
|
</p>
|
|
<p>
|
|
<code class="import-meta-url-without-extension"></code>
|
|
</p>
|
|
|
|
<h2>new URL('...', import.meta.url,) (with comma)</h2>
|
|
<img class="import-meta-url-img-comma" />
|
|
<code class="import-meta-url-comma"></code>
|
|
|
|
<h2>new URL('...', import.meta.url,) (with comma + new line)</h2>
|
|
<img class="import-meta-url-img-comma-nl" />
|
|
<code class="import-meta-url-comma-nl"></code>
|
|
|
|
<h2>new URL(`./${dynamic}`, import.meta.url)</h2>
|
|
<p>
|
|
<img class="dynamic-import-meta-url-img-1" />
|
|
<code class="dynamic-import-meta-url-1"></code>
|
|
</p>
|
|
<p>
|
|
<img class="dynamic-import-meta-url-img-2" />
|
|
<code class="dynamic-import-meta-url-2"></code>
|
|
</p>
|
|
<p>
|
|
<code class="dynamic-import-meta-url-js"></code>
|
|
</p>
|
|
|
|
<h2>new URL(`./${dynamic}`, import.meta.url,) (with comma)</h2>
|
|
<p>
|
|
<img class="dynamic-import-meta-url-img-1-comma" />
|
|
<code class="dynamic-import-meta-url-1-comma"></code>
|
|
</p>
|
|
<p>
|
|
<img class="dynamic-import-meta-url-img-2-comma" />
|
|
<code class="dynamic-import-meta-url-2-comma"></code>
|
|
</p>
|
|
|
|
<h2>new URL(`./${dynamic}?abc`, import.meta.url)</h2>
|
|
<p>
|
|
<img class="dynamic-import-meta-url-img-1-query" />
|
|
<code class="dynamic-import-meta-url-1-query"></code>
|
|
</p>
|
|
<p>
|
|
<img class="dynamic-import-meta-url-img-2-query" />
|
|
<code class="dynamic-import-meta-url-2-query"></code>
|
|
</p>
|
|
|
|
<h2>new URL(`./${1 === 0 ? static : dynamic}?abc`, import.meta.url)</h2>
|
|
<p>
|
|
<img class="dynamic-import-meta-url-img-1-ternary" />
|
|
<code class="dynamic-import-meta-url-1-ternary"></code>
|
|
</p>
|
|
<p>
|
|
<img class="dynamic-import-meta-url-img-2-ternary" />
|
|
<code class="dynamic-import-meta-url-2-ternary"></code>
|
|
</p>
|
|
|
|
<h2>new URL(`non-existent`, import.meta.url)</h2>
|
|
<p>
|
|
<code class="non-existent-import-meta-url"></code>
|
|
</p>
|
|
|
|
<h2>new URL(`${dynamic}`, import.meta.url)</h2>
|
|
<p>
|
|
<code class="dynamic-import-meta-url-all"></code>
|
|
</p>
|
|
|
|
<h2>simple script tag import-expression</h2>
|
|
<code class="import-expression"></code>
|
|
<code class="obj-import-express"></code>
|
|
<code class="string-import-express"></code>
|
|
<script>
|
|
const obj = {
|
|
import(t) {
|
|
text('.obj-import-express', t)
|
|
},
|
|
}
|
|
const stringImport = "const t = import('package')"
|
|
function text(el, text) {
|
|
document.querySelector(el).textContent = text
|
|
}
|
|
import('./static/import-expression.js')
|
|
import('/import-expression.js')
|
|
// import('./static/raw.js')
|
|
/* import('./static/raw.js') */
|
|
obj.import('ignore object import prop')
|
|
try {
|
|
text('.string-import-express', t)
|
|
} catch {
|
|
text('.string-import-express', 'no load')
|
|
}
|
|
</script>
|
|
<h2>url in style tag</h2>
|
|
<h3>url</h3>
|
|
<style class="style-url">
|
|
.style-url-assets {
|
|
background: url('./nested/asset.png');
|
|
background-size: 10px 10px;
|
|
}
|
|
</style>
|
|
<div
|
|
class="inline-style"
|
|
style="background: url('./nested/asset.png'); background-size: 10px 10px"
|
|
>
|
|
inline style
|
|
</div>
|
|
<div class="style-url-assets">use style class</div>
|
|
|
|
<h3>base64</h3>
|
|
<style class="style-base64">
|
|
.style-base64-assets {
|
|
background: url('./static/icon.png');
|
|
}
|
|
</style>
|
|
<p class="inline-style-base64" style="background: url(./static/icon.png)">
|
|
inline style
|
|
</p>
|
|
<p class="style-base64-assets">use style class</p>
|
|
<h3>from publicDir</h3>
|
|
<style>
|
|
.style-public-assets {
|
|
background: url('/icon.png');
|
|
}
|
|
</style>
|
|
<p class="inline-style-public" style="background: url(/icon.png)">
|
|
inline style
|
|
</p>
|
|
<p class="style-public-assets">use style class</p>
|
|
|
|
<h3 class="import-css">@import</h3>
|
|
<style class="style-import">
|
|
@import url('./css/import.css');
|
|
</style>
|
|
|
|
<h3 class="foo-public">
|
|
@import CSS from publicDir should load (this should be red)
|
|
</h3>
|
|
<h3 id="foo">import module css</h3>
|
|
|
|
<h3 class="raw-query"></h3>
|
|
|
|
<h3>style in svg</h3>
|
|
<svg viewBox="0 0 512 512" width="21" height="21" class="style-insvg">
|
|
<style>
|
|
.style-insvg-color {
|
|
fill: #0088ff;
|
|
}
|
|
</style>
|
|
<g class="style-insvg-color">
|
|
<rect x="224" y="352" width="64" height="64" />
|
|
<path
|
|
d="M128 128v96h64v-96h96v96h-32v32h-32v64h64v-64h64V128h-32V96H160v32h-32z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
|
|
<h3>assets in noscript</h3>
|
|
<noscript>
|
|
<img class="noscript" src="./nested/asset.png" />
|
|
</noscript>
|
|
|
|
<link rel="stylesheet" href="asset/style.css" />
|
|
<div class="relative-css">link style</div>
|
|
<div class="relative-js"></div>
|
|
<script src="asset/main.js" type="module"></script>
|
|
<style>
|
|
@import '/foo.css';
|
|
</style>
|
|
|
|
<script type="module">
|
|
import './css/fonts.css'
|
|
import './css/css-url.css'
|
|
import './css/icons.css'
|
|
|
|
text('.base', `import.meta.${``}env.BASE_URL: ${import.meta.env.BASE_URL}`)
|
|
|
|
import url from './nested/asset.png'
|
|
text('.asset-import-relative', url)
|
|
|
|
import absoluteUrl from '/nested/asset.png'
|
|
text('.asset-import-absolute', absoluteUrl)
|
|
|
|
import publicUrl from '/icon.png'
|
|
text('.public-import', publicUrl)
|
|
|
|
import svgFrag from './nested/fragment.svg'
|
|
text('.svg-frag-import-path', svgFrag)
|
|
document.querySelector('.svg-frag-import').src = svgFrag + '#icon-heart-view'
|
|
|
|
import unknownExtUrl from './nested/foo.unknown'
|
|
text('.unknown-ext', unknownExtUrl)
|
|
|
|
import rawSvg from './nested/fragment.svg?raw'
|
|
text('.raw', rawSvg)
|
|
|
|
import fooUrl from './foo.js?url'
|
|
text('.url', fooUrl)
|
|
|
|
import unicodeUrl from './テスト-測試-white space.js?url'
|
|
text('.unicode-url', unicodeUrl)
|
|
|
|
import cssUrl from './css/icons.css?url'
|
|
text('.url-css', cssUrl)
|
|
|
|
// const url = new URL('non_existent_file.png', import.meta.url)
|
|
const metaUrl = new URL('./nested/asset.png', import.meta.url)
|
|
text('.import-meta-url', metaUrl)
|
|
document.querySelector('.import-meta-url-img').src = metaUrl
|
|
|
|
const metaUrlDep = new URL('@/asset.png', import.meta.url)
|
|
text('.import-meta-url-dep', metaUrlDep)
|
|
document.querySelector('.import-meta-url-dep-img').src = metaUrlDep
|
|
|
|
// testing URLs for public assets served at the public base path
|
|
// equivalent to `new URL(`${import.meta.env.BASE_URL}/icon.png`, self.location)
|
|
const metaUrlBasePath = new URL('/icon.png', import.meta.url)
|
|
text('.import-meta-url-base-path', metaUrlBasePath)
|
|
document.querySelector('.import-meta-url-base-path-img').src = metaUrlBasePath
|
|
|
|
const metaUrlWithoutExtension = new URL('./nested/test', import.meta.url)
|
|
text('.import-meta-url-without-extension', metaUrlWithoutExtension)
|
|
;(async () => {
|
|
const res = await fetch(metaUrlWithoutExtension)
|
|
text('.import-meta-url-content-without-extension', await res.text())
|
|
})()
|
|
|
|
// prettier-ignore
|
|
const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url,)
|
|
text('.import-meta-url-comma', metaUrlWithComma)
|
|
document.querySelector('.import-meta-url-img-comma').src = metaUrlWithComma
|
|
|
|
// testing trailing comma and new line
|
|
// prettier-ignore
|
|
const metaUrlWithCommaNL = new URL(
|
|
'./nested/asset.png',
|
|
import.meta.url,
|
|
)
|
|
text('.import-meta-url-comma-nl', metaUrlWithCommaNL)
|
|
document.querySelector('.import-meta-url-img-comma-nl').src =
|
|
metaUrlWithCommaNL
|
|
|
|
import classNames from './css/foo.module.css'
|
|
document.querySelector('#foo').className = classNames['foo-module']
|
|
|
|
import someString from './static/foo.txt?raw'
|
|
document.querySelector('.raw-query').textContent = someString
|
|
|
|
const metaUrlNonExistent = new URL('non-existent', import.meta.url).pathname
|
|
text('.non-existent-import-meta-url', metaUrlNonExistent)
|
|
|
|
/**
|
|
* don't process the code in the comment
|
|
* const url = new URL('non_existent_file.png', import.meta.url)
|
|
*/
|
|
|
|
function testDynamicImportMetaUrl(name, i) {
|
|
const metaUrl = new URL(`./nested/${name}.png`, import.meta.url)
|
|
text(`.dynamic-import-meta-url-${i}`, metaUrl)
|
|
document.querySelector(`.dynamic-import-meta-url-img-${i}`).src = metaUrl
|
|
}
|
|
|
|
testDynamicImportMetaUrl('icon', 1)
|
|
testDynamicImportMetaUrl('asset', 2)
|
|
|
|
function testDynamicImportMetaUrlWithComma(name, i) {
|
|
// prettier-ignore
|
|
const metaUrl = new URL(`./nested/${name}.png`, import.meta.url,)
|
|
text(`.dynamic-import-meta-url-${i}-comma`, metaUrl)
|
|
document.querySelector(`.dynamic-import-meta-url-img-${i}-comma`).src =
|
|
metaUrl
|
|
}
|
|
|
|
testDynamicImportMetaUrlWithComma('icon', 1)
|
|
testDynamicImportMetaUrlWithComma('asset', 2)
|
|
|
|
function testDynamicImportMetaUrlWithQuery(name, i) {
|
|
// prettier-ignore
|
|
const metaUrl = new URL(`./nested/${name}.png?abc`, import.meta.url,)
|
|
text(`.dynamic-import-meta-url-${i}-query`, metaUrl)
|
|
document.querySelector(`.dynamic-import-meta-url-img-${i}-query`).src =
|
|
metaUrl
|
|
}
|
|
|
|
testDynamicImportMetaUrlWithQuery('icon', 1)
|
|
testDynamicImportMetaUrlWithQuery('asset', 2)
|
|
|
|
function testDynamicImportMetaUrlWithTernaryOperator(name, i) {
|
|
// prettier-ignore
|
|
const metaUrl = new URL(`./nested/${1 === 0 ? 'failed' : name}.png?abc`, import.meta.url,)
|
|
text(`.dynamic-import-meta-url-${i}-ternary`, metaUrl)
|
|
document.querySelector(`.dynamic-import-meta-url-img-${i}-ternary`).src =
|
|
metaUrl
|
|
}
|
|
|
|
testDynamicImportMetaUrlWithTernaryOperator('icon', 1)
|
|
testDynamicImportMetaUrlWithTernaryOperator('asset', 2)
|
|
|
|
{
|
|
const name = 'test'
|
|
const js = new URL(`./nested/${name}.js`, import.meta.url).href
|
|
text('.dynamic-import-meta-url-js', js)
|
|
}
|
|
|
|
{
|
|
const name = './nested/icon'
|
|
const metaUrl = new URL(`${name}.png`, import.meta.url)
|
|
text(`.dynamic-import-meta-url-all`, metaUrl)
|
|
}
|
|
|
|
function text(el, text) {
|
|
document.querySelector(el).textContent = text
|
|
}
|
|
</script>
|