mirror of https://github.com/vuejs/core.git
style: format html files
This commit is contained in:
parent
eaf5455d77
commit
95b9550f73
|
@ -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>
|
||||
|
|
|
@ -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,7 +25,8 @@
|
|||
}
|
||||
|
||||
const AsyncComp = defineAsyncComponent({
|
||||
loader: () => new Promise(resolve => {
|
||||
loader: () =>
|
||||
new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
console.log('resolve')
|
||||
resolve(Comp)
|
||||
|
@ -27,10 +35,10 @@
|
|||
})
|
||||
}, 10)
|
||||
}),
|
||||
hydrate: hydrateOnIdle()
|
||||
hydrate: hydrateOnIdle(),
|
||||
})
|
||||
|
||||
createSSRApp({
|
||||
render: () => h(AsyncComp)
|
||||
render: () => h(AsyncComp),
|
||||
}).mount('#app')
|
||||
</script>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'"
|
||||
|
|
Loading…
Reference in New Issue