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

View File

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

View File

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

View File

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

View File

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

View File

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