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();