fix: use the base path if specified in vite config

Author: anthonny

packages/vite-plugin/src/__tests__/plugin.test.ts

@@ -27,6 +27,7 @@ describe('Workerify Vite Plugin', () => {
 
       expect(plugin.name).toBe('vite:workerify');
       expect(plugin.enforce).toBe('pre');
+      expect(typeof plugin.configResolved).toBe('function');
       expect(typeof plugin.configureServer).toBe('function');
       expect(typeof plugin.generateBundle).toBe('function');
       expect(typeof plugin.resolveId).toBe('function');
@@ -81,6 +82,118 @@ describe('Workerify Vite Plugin', () => {
     });
   });
 
+  describe('Base path configuration', () => {
+    it('should handle base path from Vite config', () => {
+      const plugin = workerifyPlugin();
+
+      // Simulate Vite calling configResolved with a base path
+      plugin.configResolved?.({ base: '/app/' });
+
+      // Load the virtual module and check it contains the correct URL
+      const virtualModule = plugin.load?.('\0virtual:workerify-register');
+      expect(virtualModule).toContain('/app/workerify-sw.js');
+    });
+
+    it('should handle base path without trailing slash', () => {
+      const plugin = workerifyPlugin();
+
+      plugin.configResolved?.({ base: '/myapp' });
+
+      const virtualModule = plugin.load?.('\0virtual:workerify-register');
+      expect(virtualModule).toContain('/myapp/workerify-sw.js');
+    });
+
+    it('should handle empty base path', () => {
+      const plugin = workerifyPlugin();
+
+      plugin.configResolved?.({ base: '' });
+
+      const virtualModule = plugin.load?.('\0virtual:workerify-register');
+      expect(virtualModule).toContain('/workerify-sw.js');
+    });
+
+    it('should handle undefined base path', () => {
+      const plugin = workerifyPlugin();
+
+      plugin.configResolved?.({});
+
+      const virtualModule = plugin.load?.('\0virtual:workerify-register');
+      expect(virtualModule).toContain('/workerify-sw.js');
+    });
+
+    it('should handle base path with custom SW filename', () => {
+      const plugin = workerifyPlugin({ swFileName: 'custom-sw.js' });
+
+      plugin.configResolved?.({ base: '/my-app/' });
+
+      const virtualModule = plugin.load?.('\0virtual:workerify-register');
+      expect(virtualModule).toContain('/my-app/custom-sw.js');
+    });
+
+    it('should serve SW at correct URL with base path in dev', async () => {
+      const plugin = workerifyPlugin({ swFileName: 'test-sw.js' });
+
+      // Set base path
+      plugin.configResolved?.({ base: '/base/' });
+
+      // Configure server
+      plugin.configureServer?.(mockServer);
+
+      const middleware = captureMockMiddleware(mockServer);
+
+      // Request with base path
+      const req = createMockRequest('/base/test-sw.js');
+      const res = createMockResponse();
+
+      const handled = await callMiddleware(middleware, req, res);
+
+      expect(handled).toBe(true);
+      expect(res.setHeader).toHaveBeenCalledWith('Content-Type', 'application/javascript');
+      expect(res.end).toHaveBeenCalledWith(expect.any(String));
+    });
+
+    it('should not serve SW at wrong base path', async () => {
+      const plugin = workerifyPlugin({ swFileName: 'test-sw.js' });
+
+      // Set base path
+      plugin.configResolved?.({ base: '/correct-base/' });
+
+      // Configure server
+      plugin.configureServer?.(mockServer);
+
+      const middleware = captureMockMiddleware(mockServer);
+
+      // Request without base path (wrong URL)
+      const req = createMockRequest('/test-sw.js');
+      const res = createMockResponse();
+
+      const handled = await callMiddleware(middleware, req, res);
+
+      expect(handled).toBe(false);
+      expect(res.setHeader).not.toHaveBeenCalled();
+      expect(res.end).not.toHaveBeenCalled();
+    });
+
+    it('should handle complex base paths', () => {
+      const plugin = workerifyPlugin();
+
+      plugin.configResolved?.({ base: '/path/to/app/' });
+
+      const virtualModule = plugin.load?.('\0virtual:workerify-register');
+      expect(virtualModule).toContain('/path/to/app/workerify-sw.js');
+    });
+
+    it('should handle root base path correctly', () => {
+      const plugin = workerifyPlugin();
+
+      plugin.configResolved?.({ base: '/' });
+
+      const virtualModule = plugin.load?.('\0virtual:workerify-register');
+      expect(virtualModule).toContain('/workerify-sw.js');
+      expect(virtualModule).not.toContain('//workerify-sw.js');
+    });
+  });
+
   describe('Development server middleware', () => {
     it('should register middleware with Vite server', () => {
       const plugin = workerifyPlugin();
@@ -256,12 +369,14 @@ describe('Workerify Vite Plugin', () => {
       const plugin = workerifyPlugin();
 
       expect(plugin).toHaveProperty('name');
+      expect(plugin).toHaveProperty('configResolved');
       expect(plugin).toHaveProperty('configureServer');
       expect(plugin).toHaveProperty('generateBundle');
       expect(plugin).toHaveProperty('resolveId');
       expect(plugin).toHaveProperty('load');
 
       expect(typeof plugin.name).toBe('string');
+      expect(typeof plugin.configResolved).toBe('function');
       expect(typeof plugin.configureServer).toBe('function');
       expect(typeof plugin.generateBundle).toBe('function');
       expect(typeof plugin.resolveId).toBe('function');

packages/vite-plugin/src/index.ts

@@ -5,6 +5,7 @@ import { SW_TEMPLATE } from './generated/service-worker-template.js';
 interface Plugin {
   name: string;
   enforce?: 'pre' | 'post';
+  configResolved?: (config: any) => void;
   configureServer?: (server: any) => void;
   generateBundle?: (this: PluginContext) => void;
   resolveId?: (id: string) => string | null;
@@ -28,17 +29,32 @@ export default function workerifyPlugin(
     : (opts.scope ?? '') + '/';
   const swFileName = opts.swFileName ?? 'workerify-sw.js';
 
-  // on garde le contenu en mémoire, pas besoin de fichier sur disque
+  // keep content in memory, no need for file on disk
   const swSource = SW_TEMPLATE;
 
-  // URL publique finale du SW (ex: /workerify-sw.js)
-  const publicSwUrl = '/' + swFileName.replace(/^\//, '');
+  // Variable to store Vite's base path
+  let viteBasePath = '/';
+
+  // Final public SW URL will be calculated with the base path
+  let publicSwUrl = '/' + swFileName.replace(/^\//, '');
 
   return {
     name: 'vite:workerify',
     enforce: 'pre',
 
-    // Dev server: servir le fichier SW en mémoire
+    // Hook into Vite config to get base path
+    configResolved(config: any) {
+      // Get the base path from Vite config (defaults to '/')
+      viteBasePath = config.base || '/';
+      // Ensure base path ends with '/'
+      if (!viteBasePath.endsWith('/')) {
+        viteBasePath = viteBasePath + '/';
+      }
+      // Update the public SW URL with the base path
+      publicSwUrl = viteBasePath + swFileName.replace(/^\//, '');
+    },
+
+    // Dev server: serve the SW file from memory
     configureServer(server: any) {
       server.middlewares.use((req: any, res: any, next: any) => {
         if (req.url === publicSwUrl) {
@@ -50,7 +66,7 @@ export default function workerifyPlugin(
       });
     },
 
-    // Build: émettre l'asset SW dans dist/
+    // Build: emit the SW asset to dist/
     generateBundle() {
       this.emitFile({
         type: 'asset',
@@ -59,7 +75,7 @@ export default function workerifyPlugin(
       });
     },
 
-    // Module virtuel pour l'enregistrement
+    // Virtual module for registration
     resolveId(id: string) {
       if (id === 'virtual:workerify-register') {
         return '\0virtual:workerify-register';