Skip to content

Commit

Permalink
chore: better minification
Browse files Browse the repository at this point in the history
  • Loading branch information
harlan-zw committed Jul 3, 2024
1 parent c02d79f commit ac06473
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 62 deletions.
7 changes: 2 additions & 5 deletions src/runtime/nitro-plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,10 @@ export default defineNitroPlugin((nitro) => {
// insert the hydration API, maybe insert delay script
htmlContext.bodyAppend.push(`<script>
(function() {
const w = window;
w._$delayHydration = (() => {
${script}}
)();
const w = window; w._$delayHydration = (function() { if (!('requestIdleCallback' in w) || !('requestAnimationFrame' in w)) { return new Promise(resolve => resolve('not supported')) } ${script} return hydrationPromise; })();
${debug ? 'w._$delayHydration.then((e) => { console.log(\'[nuxt-delay-hydration] Hydration event\', e) })' : ''}
${extraScripts}
})();
</script>`)
</script>`.replace(/\s+/g, ' ').replace(/[\n\r]/g, ''))
})
})
45 changes: 1 addition & 44 deletions src/runtime/template/global.mjs
Original file line number Diff line number Diff line change
@@ -1,44 +1 @@
if (!('requestIdleCallback' in w) || !('requestAnimationFrame' in w))
return new Promise(resolve => resolve('not supported'))
function eventListeners() {
const c = new AbortController()
const p = new Promise((resolve) => {
const hydrateOnEvents = '<%= options.hydrateOnEvents %>'.split(',')
function handler(e) {
hydrateOnEvents.forEach(e => w.removeEventListener(e, handler))
requestAnimationFrame(() => resolve(e))
}
hydrateOnEvents.forEach((e) => {
w.addEventListener(e, handler, {
capture: true,
once: true,
passive: true,
signal: c.signal,
})
})
})

return { c: () => c.abort(), p }
}

function idleListener() {
let id
const p = new Promise((resolve) => {
const isMobile = w.innerWidth < 640
const timeout = isMobile ? Number.parseInt('<%= options.postIdleTimeout.mobile %>') : Number.parseInt('<%= options.postIdleTimeout.desktop %>')
const timeoutDelay = () => setTimeout(
() => requestAnimationFrame(() => resolve('timeout')),
timeout,
)
id = w.requestIdleCallback(timeoutDelay, { timeout: Number.parseInt('<%= options.idleCallbackTimeout %>') })
})
return { c: () => window.cancelIdleCallback(id), p }
}
const triggers = [idleListener(), eventListeners()]
const hydrationPromise = Promise.race(
triggers.map(t => t.p),
).finally(() => {
triggers.forEach(t => t.c())
})

return hydrationPromise
function eventListeners() { const c = new AbortController(); const p = new Promise((resolve) => { const hydrateOnEvents = '<%= options.hydrateOnEvents %>'.split(','); function handler(e) { hydrateOnEvents.forEach(e => w.removeEventListener(e, handler)); requestAnimationFrame(() => resolve(e)) }hydrateOnEvents.forEach((e) => { w.addEventListener(e, handler, { capture: true, once: true, passive: true, signal: c.signal }) }) }); return { c: () => c.abort(), p } } function idleListener() { let id; const p = new Promise((resolve) => { const isMobile = w.innerWidth < 640; const timeout = isMobile ? Number.parseInt('<%= options.postIdleTimeout.mobile %>') : Number.parseInt('<%= options.postIdleTimeout.desktop %>'); const timeoutDelay = () => setTimeout(() => requestAnimationFrame(() => resolve('timeout')), timeout); id = w.requestIdleCallback(timeoutDelay, { timeout: Number.parseInt('<%= options.idleCallbackTimeout %>') }) }); return { c: () => window.cancelIdleCallback(id), p } } const triggers = [idleListener(), eventListeners()]; const hydrationPromise = Promise.race(triggers.map(t => t.p)).finally(() => { triggers.forEach(t => t.c()) })
14 changes: 1 addition & 13 deletions src/runtime/template/replay.mjs
Original file line number Diff line number Diff line change
@@ -1,13 +1 @@
(() => {
w._$delayHydration.then((e) => {
if (!(e instanceof PointerEvent) && !(e instanceof MouseEvent) && !(window.TouchEvent && e instanceof TouchEvent))
return

if (e instanceof MouseEvent && e.type !== 'click')
return
setTimeout(() =>
w.requestIdleCallback(
() => setTimeout(() => e.target?.click(), 500),
), 50)
})
})()
(() => { w._$delayHydration.then((e) => { if (!(e instanceof PointerEvent) && !(e instanceof MouseEvent) && !(window.TouchEvent && e instanceof TouchEvent) || e instanceof MouseEvent && e.type !== 'click') { return }setTimeout(() => w.requestIdleCallback(() => setTimeout(() => e.target && e.target.click(), 500)), 50) }) })()
39 changes: 39 additions & 0 deletions src/template/global.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
function eventListeners() {
const c = new AbortController()
const p = new Promise((resolve) => {
const hydrateOnEvents = '<%= options.hydrateOnEvents %>'.split(',')
function handler(e) {
hydrateOnEvents.forEach(e => w.removeEventListener(e, handler))
requestAnimationFrame(() => resolve(e))
}
hydrateOnEvents.forEach((e) => {
w.addEventListener(e, handler, {
capture: true,
once: true,
passive: true,
signal: c.signal,
})
})
})
return { c: () => c.abort(), p }
}

function idleListener() {
let id
const p = new Promise((resolve) => {
const isMobile = w.innerWidth < 640
const timeout = isMobile ? Number.parseInt('<%= options.postIdleTimeout.mobile %>') : Number.parseInt('<%= options.postIdleTimeout.desktop %>')
const timeoutDelay = () => setTimeout(
() => requestAnimationFrame(() => resolve('timeout')),
timeout,
)
id = w.requestIdleCallback(timeoutDelay, { timeout: Number.parseInt('<%= options.idleCallbackTimeout %>') })
})
return { c: () => window.cancelIdleCallback(id), p }
}
const triggers = [idleListener(), eventListeners()]
const hydrationPromise = Promise.race(
triggers.map(t => t.p),
).finally(() => {
triggers.forEach(t => t.c())
})
8 changes: 8 additions & 0 deletions src/template/replay.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
(() => {
w._$delayHydration.then((e) => {
if ((!(e instanceof PointerEvent) && !(e instanceof MouseEvent) && !(window.TouchEvent && e instanceof TouchEvent)) || e instanceof MouseEvent && e.type !== 'click') {
return
}
setTimeout(() => w.requestIdleCallback(() => setTimeout(() => e.target && e.target.click(), 500)), 50)
})
})()

0 comments on commit ac06473

Please sign in to comment.