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
|
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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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'"
|
||||||
|
|
Loading…
Reference in New Issue