2
0
三咲智子 Kevin Deng 1 жил өмнө
parent
commit
95b9550f73

+ 4 - 4
packages/vue/__tests__/e2e/hydration-strat-custom.html

@@ -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>

+ 20 - 12
packages/vue/__tests__/e2e/hydration-strat-idle.html

@@ -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>

+ 20 - 5
packages/vue/__tests__/e2e/hydration-strat-interaction.html

@@ -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>

+ 10 - 3
packages/vue/__tests__/e2e/hydration-strat-media.html

@@ -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>

+ 20 - 5
packages/vue/__tests__/e2e/hydration-strat-visible.html

@@ -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>

+ 1 - 1
packages/vue/__tests__/e2e/trusted-types.html

@@ -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'"