Senko-san
55aa8933af
The app painted white until <ThemeProvider> mounted and set data-theme, then snapped to the dark theme. Two fixes: - Inline head script (rsbuild html.tags) sets data-theme before first paint, mirroring modern-sk's exact logic (localStorage 'modern-sk-theme' || 'dark') so there's no second flip when the provider mounts. Inline = zero round-trips. - body now paints var(--color-bg) so the themed background shows before React mounts #root and layers the felt grain on top. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import { defineConfig } from '@rsbuild/core';
|
|
import { pluginBabel } from '@rsbuild/plugin-babel';
|
|
import { pluginReact } from '@rsbuild/plugin-react';
|
|
|
|
// In docker dev the container binds 0.0.0.0:3000 and the browser reaches it
|
|
// through nginx on :80 — so HMR must be told the client-facing port. All three
|
|
// vars are unset for a plain `npm run dev`, where the defaults apply.
|
|
const { RSBUILD_HOST, RSBUILD_PORT, RSBUILD_HMR_CLIENT_PORT } = process.env;
|
|
|
|
export default defineConfig({
|
|
server: {
|
|
host: RSBUILD_HOST ?? 'localhost',
|
|
port: RSBUILD_PORT ? Number(RSBUILD_PORT) : 3000,
|
|
},
|
|
dev: {
|
|
client: RSBUILD_HMR_CLIENT_PORT
|
|
? { port: Number(RSBUILD_HMR_CLIENT_PORT) }
|
|
: undefined,
|
|
},
|
|
plugins: [
|
|
pluginReact(),
|
|
pluginBabel({
|
|
include: /\.[jt]sx?$/,
|
|
exclude: [/[\\/]node_modules[\\/]/],
|
|
babelLoaderOptions(opts) {
|
|
opts.plugins?.unshift('babel-plugin-react-compiler');
|
|
},
|
|
}),
|
|
],
|
|
// PUBLIC_-prefixed env vars (e.g. PUBLIC_API_BASE_URL) are exposed natively
|
|
// by rsbuild on both import.meta.env and process.env from .env files —
|
|
// no manual source.define needed. See src/config/env.ts.
|
|
html: {
|
|
title: 'MCMA',
|
|
// PWA: link the manifest + declare theme/icon so the browser offers
|
|
// "Install app". The service worker (audio offline cache) is registered
|
|
// from src/index.tsx, not here.
|
|
tags: [
|
|
// Theme bootstrap — runs inline before first paint to kill the flash of
|
|
// white on a dark-themed load. Mirrors modern-sk's own logic exactly
|
|
// (localStorage 'modern-sk-theme' || 'dark' → data-theme on <html>), so
|
|
// there's no second flip when <ThemeProvider> mounts. Inline (not an
|
|
// external file) so it costs zero round-trips.
|
|
{
|
|
tag: 'script',
|
|
children:
|
|
"(function(){try{var t=localStorage.getItem('modern-sk-theme')||'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){}})();",
|
|
head: true,
|
|
append: false,
|
|
},
|
|
// Runtime operator config. A classic (non-deferred) head script, so it
|
|
// runs before the deferred app bundle and window.__APP_CONFIG__ is set by
|
|
// the time src/config/env.ts reads it. Served from public/ in dev and
|
|
// overwritten from $PUBLIC_API_BASE_URL at container start in prod.
|
|
{
|
|
tag: 'script',
|
|
attrs: { src: '/config.js' },
|
|
head: true,
|
|
append: false,
|
|
},
|
|
{
|
|
tag: 'link',
|
|
attrs: { rel: 'manifest', href: '/manifest.webmanifest' },
|
|
},
|
|
{ tag: 'meta', attrs: { name: 'theme-color', content: '#0b0b0b' } },
|
|
{ tag: 'link', attrs: { rel: 'apple-touch-icon', href: '/favicon.png' } },
|
|
],
|
|
},
|
|
});
|