203 lines
8.3 KiB
JavaScript
203 lines
8.3 KiB
JavaScript
import { defineConfig } from 'vite';
|
|
import react from '@vitejs/plugin-react';
|
|
import { VitePWA } from 'vite-plugin-pwa';
|
|
import { readdirSync, existsSync } from 'fs';
|
|
import { join, dirname } from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
|
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
|
|
// ────────────────────────────────────────────────────────────────────────
|
|
// Sticker manifest plugin
|
|
// ────────────────────────────────────────────────────────────────────────
|
|
//
|
|
// Exposes a virtual module `virtual:sticker-manifest` that emits a list of
|
|
// sticker filenames present in `public/stickers/` at build time. The client
|
|
// imports this list to render the Stickers tab without paying for a runtime
|
|
// directory listing or shipping a separately-maintained manifest file.
|
|
//
|
|
// Why a virtual module rather than `import.meta.glob`:
|
|
// Vite's docs explicitly state that files in `public/` should not be
|
|
// imported — they're served as-is, untouched by the build. So glob globs
|
|
// against `public/` don't work. A virtual module is the documented escape
|
|
// hatch when we want build-time access to public assets without giving up
|
|
// their stable, hash-free URLs.
|
|
//
|
|
// Stable URLs matter here because the SERVER ALSO needs to read these files
|
|
// during export (see server.js → resolveImageSource). If we used /src/assets/
|
|
// the URLs would be hashed in prod and the server couldn't recover the
|
|
// original filename. Keeping the stickers in public/ means the URL is
|
|
// `/stickers/<filename>` everywhere, and the server reads from
|
|
// `public/stickers/` (dev) or `dist/stickers/` (prod).
|
|
//
|
|
// On change: in dev, the plugin watches the directory and triggers an HMR
|
|
// reload when files are added or removed. Adding a sticker means: drop the
|
|
// file in, the next page render picks it up. No restart.
|
|
function stickerManifestPlugin() {
|
|
const VIRTUAL_ID = 'virtual:sticker-manifest';
|
|
const RESOLVED_ID = '\0' + VIRTUAL_ID;
|
|
const STICKERS_DIR = join(__dirname, 'public', 'stickers');
|
|
const VALID_EXT = /\.(png|webp|jpe?g|svg)$/i;
|
|
|
|
function readStickerFilenames() {
|
|
if (!existsSync(STICKERS_DIR)) return [];
|
|
try {
|
|
return readdirSync(STICKERS_DIR).filter((f) => VALID_EXT.test(f)).sort();
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
return {
|
|
name: 'sticker-manifest',
|
|
resolveId(id) {
|
|
if (id === VIRTUAL_ID) return RESOLVED_ID;
|
|
return null;
|
|
},
|
|
load(id) {
|
|
if (id !== RESOLVED_ID) return null;
|
|
const filenames = readStickerFilenames();
|
|
// The manifest is just the filename list. URL construction is the
|
|
// client's job (always `/stickers/<filename>`); doing it here would
|
|
// bake in assumptions about the public path prefix.
|
|
return `export const STICKER_FILES = ${JSON.stringify(filenames)};\n`;
|
|
},
|
|
configureServer(server) {
|
|
// HMR: when files in public/stickers/ change, invalidate the virtual
|
|
// module so the next import re-runs and the client sees the new list.
|
|
// Vite's default file watcher already watches public/ for plain file
|
|
// serving; we just need to react to the events.
|
|
server.watcher.add(STICKERS_DIR);
|
|
const onChange = (path) => {
|
|
if (!path.startsWith(STICKERS_DIR)) return;
|
|
const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
|
|
if (mod) {
|
|
server.moduleGraph.invalidateModule(mod);
|
|
server.ws.send({ type: 'full-reload' });
|
|
}
|
|
};
|
|
server.watcher.on('add', onChange);
|
|
server.watcher.on('unlink', onChange);
|
|
// We deliberately don't react to 'change' — a sticker file being
|
|
// overwritten with new bytes doesn't change the manifest (still the
|
|
// same filename); the browser will re-fetch when the user reloads.
|
|
},
|
|
};
|
|
}
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
react(),
|
|
stickerManifestPlugin(),
|
|
VitePWA({
|
|
registerType: 'prompt',
|
|
// We register the SW manually via `useRegisterSW` in PWAInstall, so the plugin
|
|
// shouldn't inject a registration script.
|
|
injectRegister: false,
|
|
includeAssets: ['favicon.svg', 'pwa-192x192.svg', 'pwa-512x512.svg'],
|
|
manifest: {
|
|
name: 'Apparel Designer',
|
|
short_name: 'ApparelDesigner',
|
|
description: 'T-shirt customization editor',
|
|
theme_color: '#38bdf8',
|
|
background_color: '#ffffff',
|
|
display: 'standalone',
|
|
orientation: 'any',
|
|
scope: '/',
|
|
start_url: '/',
|
|
icons: [
|
|
{ src: 'pwa-192x192.svg', sizes: '192x192', type: 'image/svg+xml' },
|
|
{ src: 'pwa-512x512.svg', sizes: '512x512', type: 'image/svg+xml' },
|
|
{ src: 'pwa-512x512.svg', sizes: '512x512', type: 'image/svg+xml', purpose: 'any maskable' },
|
|
],
|
|
},
|
|
workbox: {
|
|
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
|
|
// Stickers live in /stickers/ and may be many in number. Don't
|
|
// precache them — the whole point of `loading="lazy"` on the
|
|
// <img> tags is to skip fetching stickers the user never sees,
|
|
// which precaching would undo. They're served via the
|
|
// `sticker-library` runtimeCaching rule below instead.
|
|
globIgnores: ['**/stickers/**'],
|
|
runtimeCaching: [
|
|
{
|
|
urlPattern: /^https:\/\/cdn\.huggingface\.co\/.*/i,
|
|
handler: 'CacheFirst',
|
|
options: {
|
|
cacheName: 'transformers-models',
|
|
expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 30 },
|
|
cacheableResponse: { statuses: [0, 200] },
|
|
},
|
|
},
|
|
{
|
|
urlPattern: /^https:\/\/cdn-lfs\.huggingface\.co\/.*/i,
|
|
handler: 'CacheFirst',
|
|
options: {
|
|
cacheName: 'transformers-lfs',
|
|
expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 30 },
|
|
cacheableResponse: { statuses: [0, 200] },
|
|
},
|
|
},
|
|
{
|
|
urlPattern: /^\/uploads\/.*/i,
|
|
handler: 'CacheFirst',
|
|
options: {
|
|
cacheName: 'uploaded-images',
|
|
expiration: { maxEntries: 50, maxAgeSeconds: 60 * 60 * 24 * 7 },
|
|
},
|
|
},
|
|
{
|
|
urlPattern: /^\/api\/.*/i,
|
|
handler: 'NetworkFirst',
|
|
options: {
|
|
cacheName: 'api-responses',
|
|
expiration: { maxEntries: 50, maxAgeSeconds: 300 },
|
|
cacheableResponse: { statuses: [0, 200] },
|
|
networkTimeoutSeconds: 3,
|
|
},
|
|
},
|
|
{
|
|
urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
|
|
handler: 'StaleWhileRevalidate',
|
|
options: {
|
|
cacheName: 'google-fonts',
|
|
expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 },
|
|
},
|
|
},
|
|
{
|
|
urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
|
|
handler: 'CacheFirst',
|
|
options: {
|
|
cacheName: 'gstatic-fonts',
|
|
expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 },
|
|
},
|
|
},
|
|
{
|
|
// Stickers are static brand assets — once fetched, they're
|
|
// safe to cache aggressively. CacheFirst minimizes network
|
|
// traffic when the user reopens the editor. Capacity (200)
|
|
// is comfortably more than a typical library; new stickers
|
|
// pushed via a deploy will displace old ones on access.
|
|
urlPattern: /^\/stickers\/.*/i,
|
|
handler: 'CacheFirst',
|
|
options: {
|
|
cacheName: 'sticker-library',
|
|
expiration: { maxEntries: 200, maxAgeSeconds: 60 * 60 * 24 * 30 },
|
|
cacheableResponse: { statuses: [0, 200] },
|
|
},
|
|
},
|
|
],
|
|
},
|
|
}),
|
|
],
|
|
server: {
|
|
port: 3000,
|
|
proxy: {
|
|
'/api': { target: 'http://localhost:3001', changeOrigin: true },
|
|
'/uploads': { target: 'http://localhost:3001', changeOrigin: true },
|
|
'/exports': { target: 'http://localhost:3001', changeOrigin: true },
|
|
},
|
|
},
|
|
build: { outDir: 'dist' },
|
|
});
|