/
index.js
114 lines (94 loc) · 3.15 KB
/
index.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
import mxdStatic from '../files/mxd'
import mxdStaticJSON from '../files/mxd.json'
async function setView(view) {
const { msg } = await import(`../views/${view}.js`)
text('.view', msg)
}
;['foo', 'bar'].forEach((id) => {
document.querySelector(`.${id}`).addEventListener('click', () => setView(id))
})
// literal dynamic
document.querySelector('.baz').addEventListener('click', async () => {
const { msg } = await import('../views/baz.js')
text('.view', msg)
})
// full dynamic
const arr = ['qux.js']
const view = `/views/${arr[0]}`
document.querySelector('.qux').addEventListener('click', async () => {
const { msg } = await import(/*@vite-ignore*/ view)
text('.view', msg)
})
// mixed static and dynamic
document.querySelector('.mxd').addEventListener('click', async () => {
const view = 'mxd'
const { default: mxdDynamic } = await import(`../files/${view}.js`)
text('.view', mxdStatic === mxdDynamic)
})
document.querySelector('.mxd2').addEventListener('click', async () => {
const test = { jss: '../files/mxd.js' }
const ttest = test
const view = 'mxd'
const { default: mxdDynamic } = await import(/*@vite-ignore*/ test.jss)
text('.view', mxdStatic === mxdDynamic)
})
document.querySelector('.mxdjson').addEventListener('click', async () => {
const view = 'mxd'
const { default: mxdDynamicJSON } = await import(`../files/${view}.json`)
text('.view', mxdStaticJSON === mxdDynamicJSON)
})
// data URLs (`blob:`)
const code1 = 'export const msg = "blob"'
const blob = new Blob([code1], { type: 'text/javascript;charset=UTF-8' })
const blobURL = URL.createObjectURL(blob)
document.querySelector('.issue-2658-1').addEventListener('click', async () => {
const { msg } = await import(/*@vite-ignore*/ blobURL)
text('.view', msg)
})
// data URLs (`data:`)
const code2 = 'export const msg = "data";'
const dataURL = `data:text/javascript;charset=utf-8,${encodeURIComponent(
code2
)}`
document.querySelector('.issue-2658-2').addEventListener('click', async () => {
const { msg } = await import(/*@vite-ignore*/ dataURL)
text('.view', msg)
})
document.querySelector('.css').addEventListener('click', async () => {
await import('../css/index.css')
text('.view', 'dynamic import css')
})
document.querySelector('.pkg-css').addEventListener('click', async () => {
await import('./deps')
text('.view', 'dynamic import css in package')
})
function text(el, text) {
document.querySelector(el).textContent = text
}
let base = 'hello'
import(`../alias/${base}.js`).then((mod) => {
text('.dynamic-import-with-vars', mod.hello())
})
// prettier-ignore
import(
/* this messes with */
`../alias/${base}.js`
/* es-module-lexer */
).then((mod) => {
text('.dynamic-import-with-vars-multiline', mod.hello())
})
import(`../alias/${base}.js?raw`).then((mod) => {
text('.dynamic-import-with-vars-raw', JSON.stringify(mod))
})
base = 'hi'
import(`@/${base}.js`).then((mod) => {
text('.dynamic-import-with-vars-alias', mod.hi())
})
base = 'self'
import(`../nested/${base}.js`).then((mod) => {
text('.dynamic-import-self', mod.self)
})
import(`../nested/nested/${base}.js`).then((mod) => {
text('.dynamic-import-nested-self', mod.self)
})
console.log('index.js')