From 46872270801a6f23e4c09cec199a1d3a90c55135 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Wed, 22 Jan 2025 18:49:01 +0400 Subject: [PATCH 01/11] fix: fix service worker build --- .../src/main/resources/vite.generated.ts | 111 ++++++------------ 1 file changed, 35 insertions(+), 76 deletions(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index 5842357ef55..fa90f86a5fa 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -20,14 +20,14 @@ import { mergeConfig, OutputOptions, PluginOption, - ResolvedConfig, - UserConfigFn + build, + UserConfigFn, + ResolvedConfig } from 'vite'; import { getManifest, type ManifestTransform } from 'workbox-build'; import * as rollup from 'rollup'; import brotli from 'rollup-plugin-brotli'; -import replace from '@rollup/plugin-replace'; import checker from 'vite-plugin-checker'; import postcssLit from '#buildFolder#/plugins/rollup-plugin-postcss-lit-custom/rollup-plugin-postcss-lit.js'; @@ -118,87 +118,46 @@ function injectManifestToSWPlugin(): rollup.Plugin { } function buildSWPlugin(opts: { devMode: boolean }): PluginOption { - let config: ResolvedConfig; - const devMode = opts.devMode; - - const swObj: { code?: string, map?: rollup.SourceMap | null } = {}; - - async function build(action: 'generate' | 'write', additionalPlugins: rollup.Plugin[] = []) { - const includedPluginNames = [ - 'vite:esbuild', - 'rollup-plugin-dynamic-import-variables', - 'vite:esbuild-transpile', - 'vite:terser' - ]; - const plugins: rollup.Plugin[] = config.plugins.filter((p) => { - return includedPluginNames.includes(p.name); - }); - const resolver = config.createResolver(); - const resolvePlugin: rollup.Plugin = { - name: 'resolver', - resolveId(source, importer, _options) { - return resolver(source, importer); - } - }; - plugins.unshift(resolvePlugin); // Put resolve first - plugins.push( - replace({ - values: { - 'process.env.NODE_ENV': JSON.stringify(config.mode), - ...config.define - }, - preventAssignment: true - }) - ); - if (additionalPlugins) { - plugins.push(...additionalPlugins); - } - const bundle = await rollup.rollup({ - input: path.resolve(settings.clientServiceWorkerSource), - plugins - }); - - try { - return await bundle[action]({ - file: path.resolve(buildOutputFolder, 'sw.js'), - format: 'es', - exports: 'none', - sourcemap: config.command === 'serve' || config.build.sourcemap, - inlineDynamicImports: true - }); - } finally { - await bundle.close(); - } - } + const { devMode } = opts; + let viteConfig: ResolvedConfig; return { name: 'vaadin:build-sw', enforce: 'post', async configResolved(resolvedConfig) { - config = resolvedConfig; + viteConfig = resolvedConfig; }, async buildStart() { - if (devMode) { - const { output } = await build('generate'); - swObj.code = output[0].code; - swObj.map = output[0].map; - } - }, - async load(id) { - if (id.endsWith('sw.js')) { - return ''; - } - }, - async transform(_code, id) { - if (id.endsWith('sw.js')) { - return swObj; - } + await build({ + base: viteConfig.base, + root: viteConfig.root, + mode: viteConfig.mode, + resolve: viteConfig.resolve, + define: { + ...viteConfig.define, + 'process.env.NODE_ENV': JSON.stringify(viteConfig.mode), + }, + build: { + ...viteConfig.build, + sourcemap: viteConfig.command === 'serve' || viteConfig.build.sourcemap, + modulePreload: false, + lib: { + entry: settings.clientServiceWorkerSource, + name: 'sw', + formats: ['umd'], + }, + rollupOptions: { + output: { + entryFileNames: 'sw.js', + }, + }, + }, + plugins: [ + !devMode && injectManifestToSWPlugin(), + !devMode && brotli() + ] + }); }, - async closeBundle() { - if (!devMode) { - await build('write', [injectManifestToSWPlugin(), brotli()]); - } - } }; } From 2e72c301bf1c1e64cb4075004441bfe6c937af52 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 10:07:37 +0400 Subject: [PATCH 02/11] fix PwaTestIT --- .../src/test/java/com/vaadin/flow/pwatest/ui/PwaTestIT.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flow-tests/test-pwa/src/test/java/com/vaadin/flow/pwatest/ui/PwaTestIT.java b/flow-tests/test-pwa/src/test/java/com/vaadin/flow/pwatest/ui/PwaTestIT.java index b204cc2078b..f1210c0e353 100644 --- a/flow-tests/test-pwa/src/test/java/com/vaadin/flow/pwatest/ui/PwaTestIT.java +++ b/flow-tests/test-pwa/src/test/java/com/vaadin/flow/pwatest/ui/PwaTestIT.java @@ -129,7 +129,7 @@ public void testPwaResources() throws IOException { Assert.assertTrue( "Expected sw-runtime-resources-precache.js to be imported, but was not", serviceWorkerJS.contains( - "importScripts(\"sw-runtime-resources-precache.js\");")); + "importScripts(\"sw-runtime-resources-precache.js\")")); serviceWorkerUrl = getRootURL() + "/sw-runtime-resources-precache.js"; serviceWorkerJS = readStringFromUrl(serviceWorkerUrl); From 94b5a42e1e550b343b55a8d5a5b8beb00636f069 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 11:26:17 +0400 Subject: [PATCH 03/11] exclude sw.js from manifest --- flow-server/src/main/resources/vite.generated.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index fa90f86a5fa..f7dd2422486 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -106,7 +106,7 @@ function injectManifestToSWPlugin(): rollup.Plugin { const { manifestEntries } = await getManifest({ globDirectory: buildOutputFolder, globPatterns: ['**/*'], - globIgnores: ['**/*.br', 'pwa-icons/**'], + globIgnores: ['**/*.br', 'pwa-icons/**', 'sw.js'], manifestTransforms: [rewriteManifestIndexHtmlUrl], maximumFileSizeToCacheInBytes: 100 * 1024 * 1024 // 100mb, }); From c568ab33c43646545c1cf915299c3c63fa7e5540 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 11:40:38 +0400 Subject: [PATCH 04/11] generate service worker at closeBundle stage --- flow-server/src/main/resources/vite.generated.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index f7dd2422486..2218ab05c52 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -106,7 +106,7 @@ function injectManifestToSWPlugin(): rollup.Plugin { const { manifestEntries } = await getManifest({ globDirectory: buildOutputFolder, globPatterns: ['**/*'], - globIgnores: ['**/*.br', 'pwa-icons/**', 'sw.js'], + globIgnores: ['**/*.br', 'pwa-icons/**'], manifestTransforms: [rewriteManifestIndexHtmlUrl], maximumFileSizeToCacheInBytes: 100 * 1024 * 1024 // 100mb, }); @@ -127,7 +127,7 @@ function buildSWPlugin(opts: { devMode: boolean }): PluginOption { async configResolved(resolvedConfig) { viteConfig = resolvedConfig; }, - async buildStart() { + async closeBundle() { await build({ base: viteConfig.base, root: viteConfig.root, From 0bcc85c352cf0df28067794c5b71799e34a73651 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 11:54:38 +0400 Subject: [PATCH 05/11] clean up service worker build config --- flow-server/src/main/resources/vite.generated.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index 2218ab05c52..b1873218e71 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -138,17 +138,21 @@ function buildSWPlugin(opts: { devMode: boolean }): PluginOption { 'process.env.NODE_ENV': JSON.stringify(viteConfig.mode), }, build: { - ...viteConfig.build, + minify: viteConfig.build.minify, + outDir: viteConfig.build.outDir, sourcemap: viteConfig.command === 'serve' || viteConfig.build.sourcemap, modulePreload: false, lib: { entry: settings.clientServiceWorkerSource, name: 'sw', + // Note the build.minify option does not minify whitespaces + // when using the 'es' format in lib mode. That's why we use + // the 'umd' format here. formats: ['umd'], }, rollupOptions: { output: { - entryFileNames: 'sw.js', + entryChunkNames: 'sw.js', }, }, }, From f2882af196545b69a403666874ed30b1d34d44e8 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 12:27:30 +0400 Subject: [PATCH 06/11] generate service worker at different stages depending on mode --- .../src/main/resources/vite.generated.ts | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index b1873218e71..02978e8231e 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -22,7 +22,7 @@ import { PluginOption, build, UserConfigFn, - ResolvedConfig + InlineConfig } from 'vite'; import { getManifest, type ManifestTransform } from 'workbox-build'; @@ -119,16 +119,13 @@ function injectManifestToSWPlugin(): rollup.Plugin { function buildSWPlugin(opts: { devMode: boolean }): PluginOption { const { devMode } = opts; - let viteConfig: ResolvedConfig; + let buildConfig: InlineConfig; return { name: 'vaadin:build-sw', enforce: 'post', - async configResolved(resolvedConfig) { - viteConfig = resolvedConfig; - }, - async closeBundle() { - await build({ + async configResolved(viteConfig) { + buildConfig = { base: viteConfig.base, root: viteConfig.root, mode: viteConfig.mode, @@ -141,6 +138,7 @@ function buildSWPlugin(opts: { devMode: boolean }): PluginOption { minify: viteConfig.build.minify, outDir: viteConfig.build.outDir, sourcemap: viteConfig.command === 'serve' || viteConfig.build.sourcemap, + emptyOutDir: false, modulePreload: false, lib: { entry: settings.clientServiceWorkerSource, @@ -152,7 +150,7 @@ function buildSWPlugin(opts: { devMode: boolean }): PluginOption { }, rollupOptions: { output: { - entryChunkNames: 'sw.js', + entryFileNames: 'sw.js', }, }, }, @@ -160,7 +158,17 @@ function buildSWPlugin(opts: { devMode: boolean }): PluginOption { !devMode && injectManifestToSWPlugin(), !devMode && brotli() ] - }); + }; + }, + async buildStart() { + if (devMode) { + await build(buildConfig); + } + }, + async closeBundle() { + if (!devMode) { + await build(buildConfig); + } }, }; } From bef6e12528f216b6f8176cf68622d78058216ec8 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 18:41:01 +0400 Subject: [PATCH 07/11] do not use lib mode to allow for minification in es format --- flow-server/src/main/resources/vite.generated.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index 02978e8231e..6b24f91b45f 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -106,7 +106,7 @@ function injectManifestToSWPlugin(): rollup.Plugin { const { manifestEntries } = await getManifest({ globDirectory: buildOutputFolder, globPatterns: ['**/*'], - globIgnores: ['**/*.br', 'pwa-icons/**'], + globIgnores: ['**/*.br', 'pwa-icons/**', 'sw.js'], manifestTransforms: [rewriteManifestIndexHtmlUrl], maximumFileSizeToCacheInBytes: 100 * 1024 * 1024 // 100mb, }); @@ -140,15 +140,10 @@ function buildSWPlugin(opts: { devMode: boolean }): PluginOption { sourcemap: viteConfig.command === 'serve' || viteConfig.build.sourcemap, emptyOutDir: false, modulePreload: false, - lib: { - entry: settings.clientServiceWorkerSource, - name: 'sw', - // Note the build.minify option does not minify whitespaces - // when using the 'es' format in lib mode. That's why we use - // the 'umd' format here. - formats: ['umd'], - }, rollupOptions: { + input: { + sw: settings.clientServiceWorkerSource + }, output: { entryFileNames: 'sw.js', }, From 940672737e2f892cf40d56f831a08b0af510af97 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 18:56:04 +0400 Subject: [PATCH 08/11] clean up plugin code --- .../src/main/resources/vite.generated.ts | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index 6b24f91b45f..0caed34e349 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -117,8 +117,7 @@ function injectManifestToSWPlugin(): rollup.Plugin { }; } -function buildSWPlugin(opts: { devMode: boolean }): PluginOption { - const { devMode } = opts; +function buildSWPlugin(): PluginOption { let buildConfig: InlineConfig; return { @@ -149,20 +148,19 @@ function buildSWPlugin(opts: { devMode: boolean }): PluginOption { }, }, }, - plugins: [ - !devMode && injectManifestToSWPlugin(), - !devMode && brotli() - ] }; }, async buildStart() { - if (devMode) { + if (buildConfig.mode === 'development') { await build(buildConfig); } }, async closeBundle() { - if (!devMode) { - await build(buildConfig); + if (buildConfig.mode !== 'development') { + await build({ + ...buildConfig, + plugins: [injectManifestToSWPlugin(), brotli()] + }); } }, }; @@ -727,7 +725,7 @@ export const vaadinConfig: UserConfigFn = (env) => { productionMode && brotli(), devMode && vaadinBundlesPlugin(), devMode && showRecompileReason(), - settings.offlineEnabled && buildSWPlugin({ devMode }), + settings.offlineEnabled && buildSWPlugin(), !devMode && statsExtracterPlugin(), !productionMode && preserveUsageStats(), themePlugin({ devMode }), From dbbda36dee9a0af8e64a60f434aa002f26cceccf Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 19:05:19 +0400 Subject: [PATCH 09/11] add inlineDynamicImports: true option --- flow-server/src/main/resources/vite.generated.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index 0caed34e349..2854a240f1d 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -145,6 +145,7 @@ function buildSWPlugin(): PluginOption { }, output: { entryFileNames: 'sw.js', + inlineDynamicImports: true, }, }, }, From cd1eb0630adf5f524794dd71f253e94435f8d043 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 19:09:44 +0400 Subject: [PATCH 10/11] revert some changes to minimize diff --- flow-server/src/main/resources/vite.generated.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index 2854a240f1d..2a12522ece1 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -16,13 +16,13 @@ import settings from '#settingsImport#'; import { AssetInfo, ChunkInfo, + build, defineConfig, mergeConfig, OutputOptions, PluginOption, - build, - UserConfigFn, - InlineConfig + InlineConfig, + UserConfigFn } from 'vite'; import { getManifest, type ManifestTransform } from 'workbox-build'; @@ -117,8 +117,9 @@ function injectManifestToSWPlugin(): rollup.Plugin { }; } -function buildSWPlugin(): PluginOption { +function buildSWPlugin(opts: { devMode: boolean }): PluginOption { let buildConfig: InlineConfig; + const devMode = opts.devMode; return { name: 'vaadin:build-sw', @@ -152,12 +153,12 @@ function buildSWPlugin(): PluginOption { }; }, async buildStart() { - if (buildConfig.mode === 'development') { + if (devMode) { await build(buildConfig); } }, async closeBundle() { - if (buildConfig.mode !== 'development') { + if (!devMode) { await build({ ...buildConfig, plugins: [injectManifestToSWPlugin(), brotli()] @@ -726,7 +727,7 @@ export const vaadinConfig: UserConfigFn = (env) => { productionMode && brotli(), devMode && vaadinBundlesPlugin(), devMode && showRecompileReason(), - settings.offlineEnabled && buildSWPlugin(), + settings.offlineEnabled && buildSWPlugin({ devMode }), !devMode && statsExtracterPlugin(), !productionMode && preserveUsageStats(), themePlugin({ devMode }), From 2ab63d1e91441e0973479466e120dc31bed94f3d Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Thu, 23 Jan 2025 19:26:52 +0400 Subject: [PATCH 11/11] add exports option for backward compatibility --- flow-server/src/main/resources/vite.generated.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index 2a12522ece1..9da66af2469 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -145,6 +145,7 @@ function buildSWPlugin(opts: { devMode: boolean }): PluginOption { sw: settings.clientServiceWorkerSource }, output: { + exports: 'none', entryFileNames: 'sw.js', inlineDynamicImports: true, },