diff --git a/scripts/prepare.ts b/scripts/prepare.ts index 0921e29..48828aa 100644 --- a/scripts/prepare.ts +++ b/scripts/prepare.ts @@ -18,7 +18,7 @@ async function stubIndexHtml() { data = data .replace( '', - '', + '', ) .replace('"./main.tsx"', `"http://localhost:${port}/${view}/main.tsx"`) .replace('
', '
Vite server did not start
'); @@ -44,15 +44,15 @@ async function writeRefreshPreamble() { async function writeThemeSyncScript() { const data = ` - var e = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark').matches, - t = JSON.parse(localStorage.theme).state.theme || 'system'; - ('dark' === t || (e && 'light' !== t)) && document.documentElement.classList.toggle('dark', !0); + var e = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark').matches, + t = JSON.parse(localStorage.theme).state.theme || 'system'; + ('dark' === t || (e && 'light' !== t)) && document.documentElement.classList.toggle('dark', !0); - var configItem = localStorage.getItem('config'); - var { theme, radius } = configItem ? JSON.parse(configItem) : {theme: 'neutral', radius: 0.5}; - document.body.classList.add(\`theme-\${theme}\`); - document.body.style.setProperty('--radius', \`\${radius}rem\`); -`; + var configItem = localStorage.getItem('config'); + var { theme, radius } = configItem ? JSON.parse(configItem) : {theme: 'neutral', radius: 0.5}; + document.body.classList.add(\`theme-\${theme}\`); + document.body.style.setProperty('--radius', \`\${radius}rem\`); + `; await fs.ensureDir(r('extension/dist')); const { code } = await transform(data, { minify: true }); @@ -60,6 +60,27 @@ async function writeThemeSyncScript() { log('PRE', 'write theme settings script'); } +async function dynamicLoadScript() { + const data = ` + const QUERY = '(prefers-reduced-motion: reduce)'; + const prefersReducedMotionQuery = window.matchMedia(QUERY); + + const handleReduceMotionChange = async () => { + if (prefersReducedMotionQuery.matches) { + await import('/dist/prefersReducedMotion.js'); + } + }; + + handleReduceMotionChange(); + + prefersReducedMotionQuery.addEventListener('change', handleReduceMotionChange); + `; + await fs.ensureDir(r('extension/dist')); + const { code } = await transform(data, { minify: true }); + await fs.writeFile(r('extension/dist/dynamicLoadScript.js'), code, 'utf-8'); + log('PRE', 'write dynamic load script'); +} + async function writePrefersReducedMotionScript() { const data = ` const handleReduceMotionChange = () => { @@ -70,16 +91,7 @@ async function writePrefersReducedMotionScript() { const applyStyles = () => { if (styleElement) return; styleElement = document.createElement('style'); - styleElement.textContent = \`* { - -webkit-animation-duration: 0.01ms !important; - animation-duration: 0.01ms !important; - -webkit-animation-iteration-count: 1 !important; - animation-iteration-count: 1 !important; - -webkit-transition-duration: 0.01ms !important; - -o-transition-duration: 0.01ms !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - }\`; + styleElement.textContent = \`* {-webkit-animation-duration: 0.01ms !important;animation-duration: 0.01ms !important;-webkit-animation-iteration-count: 1 !important;animation-iteration-count: 1 !important;-webkit-transition-duration: 0.01ms !important;-o-transition-duration: 0.01ms !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}\`; document.head.appendChild(styleElement); }; @@ -116,6 +128,7 @@ function writeManifest() { } writeManifest(); +dynamicLoadScript(); writeThemeSyncScript(); writePrefersReducedMotionScript();