mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-09-30 11:12:35 +02:00
maziggy
71d506be0c
The cover URL is cache-busted on the print name, which does not change while a print runs. Leaving the printers page and returning therefore re-mounts with a byte-identical src, which the browser serves from its in-memory cache with no network request -- which is why the reporter's network panel was empty while the placeholder sat there. `loaded` could only ever be set by onLoad, and a mount effect reset it to false unconditionally. For a cache hit those are two racing tasks with no ordering between them: when the load event won, the effect undid it, and nothing put it right afterwards because the URL does not change again for the rest of the print. Read the element's own complete/naturalWidth in that effect instead of assuming nothing has loaded. That settles it whichever task wins, and also covers the variant the reporter proposed, where the handler is not live in time. Being a race explains why it reproduced 100% for the reporter and not at all here. Only the printer card was affected; archive thumbnails build a fresh URL every mount, so they always hit the network. CoverImage is exported so the regression tests can mount it directly.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])