Skip to content

Commit

Permalink
style: format html files
Browse files Browse the repository at this point in the history
  • Loading branch information
sxzz committed Aug 7, 2024
1 parent eaf5455 commit 95b9550
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 30 deletions.
8 changes: 4 additions & 4 deletions packages/vue/__tests__/e2e/hydration-strat-custom.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
32 changes: 20 additions & 12 deletions packages/vue/__tests__/e2e/hydration-strat-idle.html
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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>
25 changes: 20 additions & 5 deletions packages/vue/__tests__/e2e/hydration-strat-interaction.html
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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() {
Expand All @@ -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 {
Expand All @@ -34,7 +49,7 @@

const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
hydrate: hydrateOnInteraction(['click', 'wheel'])
hydrate: hydrateOnInteraction(['click', 'wheel']),
})

createSSRApp({
Expand All @@ -43,6 +58,6 @@
window.isRootMounted = true
})
return () => h(AsyncComp)
}
},
}).mount('#app')
</script>
13 changes: 10 additions & 3 deletions packages/vue/__tests__/e2e/hydration-strat-media.html
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -22,7 +29,7 @@

const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
hydrate: hydrateOnMediaQuery('(max-width:500px)')
hydrate: hydrateOnMediaQuery('(max-width:500px)'),
})

createSSRApp({
Expand All @@ -31,6 +38,6 @@
window.isRootMounted = true
})
return () => h(AsyncComp)
}
},
}).mount('#app')
</script>
25 changes: 20 additions & 5 deletions packages/vue/__tests__/e2e/hydration-strat-visible.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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() {
Expand All @@ -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 {
Expand All @@ -35,7 +50,7 @@

const AsyncComp = defineAsyncComponent({
loader: () => Promise.resolve(Comp),
hydrate: hydrateOnVisible({rootMargin: rootMargin + 'px'})
hydrate: hydrateOnVisible({ rootMargin: rootMargin + 'px' }),
})

createSSRApp({
Expand All @@ -44,6 +59,6 @@
window.isRootMounted = true
})
return () => h(AsyncComp)
}
},
}).mount('#app')
</script>
2 changes: 1 addition & 1 deletion packages/vue/__tests__/e2e/trusted-types.html
Original file line number Diff line number Diff line change
Expand Up @@ -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'"
Expand Down

0 comments on commit 95b9550

Please sign in to comment.