style: format html files

This commit is contained in:
三咲智子 Kevin Deng 2024-08-07 19:58:07 +08:00
parent eaf5455d77
commit 95b9550f73
No known key found for this signature in database
6 changed files with 75 additions and 30 deletions

View File

@ -29,16 +29,16 @@
window.teardownCalled = true
triggerEl.removeEventListener('click', hydrate)
}
}
},
})
const show = window.show = ref(true)
const show = (window.show = ref(true))
createSSRApp({
setup() {
onMounted(() => {
window.isRootMounted = true
})
return () => show.value ? h(AsyncComp) : 'off'
}
return () => (show.value ? h(AsyncComp) : 'off')
},
}).mount('#app')
</script>

View File

@ -4,7 +4,14 @@
<script>
window.isHydrated = false
const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnIdle } = Vue
const {
createSSRApp,
defineAsyncComponent,
h,
ref,
onMounted,
hydrateOnIdle,
} = Vue
const Comp = {
setup() {
@ -18,19 +25,20 @@
}
const AsyncComp = defineAsyncComponent({
loader: () => new Promise(resolve => {
setTimeout(() => {
console.log('resolve')
resolve(Comp)
requestIdleCallback(() => {
console.log('busy')
})
}, 10)
}),
hydrate: hydrateOnIdle()
loader: () =>
new Promise(resolve => {
setTimeout(() => {
console.log('resolve')
resolve(Comp)
requestIdleCallback(() => {
console.log('busy')
})
}, 10)
}),
hydrate: hydrateOnIdle(),
})
createSSRApp({
render: () => h(AsyncComp)
render: () => h(AsyncComp),
}).mount('#app')
</script>

View File

@ -2,7 +2,11 @@
<div>click to hydrate</div>
<div id="app"><button>0</button></div>
<style>body { margin: 0 }</style>
<style>
body {
margin: 0;
}
</style>
<script>
const isFragment = location.search.includes('?fragment')
@ -12,7 +16,14 @@
}
window.isHydrated = false
const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnInteraction } = Vue
const {
createSSRApp,
defineAsyncComponent,
h,
ref,
onMounted,
hydrateOnInteraction,
} = Vue
const Comp = {
setup() {
@ -22,7 +33,11 @@
window.isHydrated = true
})
return () => {
const button = h('button', { onClick: () => count.value++ }, count.value)
const button = h(
'button',
{ onClick: () => count.value++ },
count.value,
)
if (isFragment) {
return [[h('span', 'one')], button, h('span', 'two')]
} else {
@ -34,7 +49,7 @@
const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
hydrate: hydrateOnInteraction(['click', 'wheel'])
hydrate: hydrateOnInteraction(['click', 'wheel']),
})
createSSRApp({
@ -43,6 +58,6 @@
window.isRootMounted = true
})
return () => h(AsyncComp)
}
},
}).mount('#app')
</script>

View File

@ -5,7 +5,14 @@
<script>
window.isHydrated = false
const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnMediaQuery } = Vue
const {
createSSRApp,
defineAsyncComponent,
h,
ref,
onMounted,
hydrateOnMediaQuery,
} = Vue
const Comp = {
setup() {
@ -22,7 +29,7 @@
const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
hydrate: hydrateOnMediaQuery('(max-width:500px)')
hydrate: hydrateOnMediaQuery('(max-width:500px)'),
})
createSSRApp({
@ -31,6 +38,6 @@
window.isRootMounted = true
})
return () => h(AsyncComp)
}
},
}).mount('#app')
</script>

View File

@ -2,7 +2,11 @@
<div style="height: 1000px">scroll to the bottom to hydrate</div>
<div id="app"><button>0</button></div>
<style>body { margin: 0 }</style>
<style>
body {
margin: 0;
}
</style>
<script>
const rootMargin = location.search.match(/rootMargin=(\d+)/)?.[1] ?? 0
@ -13,7 +17,14 @@
}
window.isHydrated = false
const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnVisible } = Vue
const {
createSSRApp,
defineAsyncComponent,
h,
ref,
onMounted,
hydrateOnVisible,
} = Vue
const Comp = {
setup() {
@ -23,7 +34,11 @@
window.isHydrated = true
})
return () => {
const button = h('button', { onClick: () => count.value++ }, count.value)
const button = h(
'button',
{ onClick: () => count.value++ },
count.value,
)
if (isFragment) {
return [[h('span', 'one')], button, h('span', 'two')]
} else {
@ -35,7 +50,7 @@
const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
hydrate: hydrateOnVisible({rootMargin: rootMargin + 'px'})
hydrate: hydrateOnVisible({ rootMargin: rootMargin + 'px' }),
})
createSSRApp({
@ -44,6 +59,6 @@
window.isRootMounted = true
})
return () => h(AsyncComp)
}
},
}).mount('#app')
</script>

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<meta
http-equiv="content-security-policy"
content="require-trusted-types-for 'script'"