Add cache version number (#1541)

## Motivation for the change, related issues

To implement [offline
support](#1535) we
need to flush the cache every time Playground is updated.

This PR introduces a `cacheVersion` to the web service worker which will
be used in #1535
for cache busting.

In this PR it doesn't do anything, but I wanted to add it as a separate
PR to keep #1535
reasonably large.

## Implementation details

This PR moves various Vite extensions into a shared `vite-extensions`
folder to avoid code duplication.

It adds a `buildVersionPlugin` Vite extension to create build versions
in different projects (website and remote).

The new build version is created in the _Playground remote_ project and
sent to _PHP-wasm Web service worker_ in `initializeServiceWorker`
options.

I had issues with implementing the build version directly in _PHP-wasm
Web service worker_, so I ended up working around the issue to unblock
offline support.
I recommend we move forward with this approach and change it if needed
later.

A benefit of setting the cache version in Remote is that Playground can
control when the cache is busted.

## Testing Instructions (or ideally a Blueprint)

- Checkout this branch
- add the bellow code [after this
line](https://github.com/WordPress/wordpress-playground/blob/3023e5b67767c586a5d160f7ab95519c84f77992/packages/php-wasm/web-service-worker/src/initialize-service-worker.ts#L14)
```
console.log('Service worker initialized', config.cacheVersion);
```
- Delete the service worker in dev tools
- Reload Playground 
- See the version number in the browser console

packages/php-wasm/fs-journal/vite.config.ts

@@ -5,7 +5,7 @@ import dts from 'vite-plugin-dts';
 import { join } from 'path';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/php-wasm-fs-journal',

packages/php-wasm/logger/vite.config.ts

@@ -5,7 +5,7 @@ import dts from 'vite-plugin-dts';
 import { join } from 'path';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/php-wasm-logger',

packages/php-wasm/progress/vite.config.ts

@@ -5,7 +5,7 @@ import dts from 'vite-plugin-dts';
 import { join } from 'path';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/php-wasm-progress',

packages/php-wasm/scopes/vite.config.ts

@@ -5,7 +5,7 @@ import dts from 'vite-plugin-dts';
 import { join } from 'path';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/php-wasm-scope',

packages/php-wasm/stream-compression/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import * as path from 'path';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/php-wasm-stream-compression',

packages/php-wasm/universal/vite.config.ts

@@ -5,7 +5,7 @@ import dts from 'vite-plugin-dts';
 import { join } from 'path';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/php-wasm-universal',

packages/php-wasm/web-service-worker/src/initialize-service-worker.ts

@@ -175,6 +175,7 @@ export async function broadcastMessageExpectReply(message: any, scope: string) {
 }
 
 interface ServiceWorkerConfiguration {
+	cacheVersion: string;
 	handleRequest?: (event: FetchEvent) => Promise<Response> | undefined;
 }
 

packages/php-wasm/web-service-worker/vite.config.ts

@@ -5,7 +5,7 @@ import dts from 'vite-plugin-dts';
 import { join } from 'path';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/php-wasm-web-service-worker',

packages/php-wasm/web/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig(({ command }) => {
 	return {

packages/playground/blueprints/vite.config.ts

@@ -5,7 +5,7 @@ import dts from 'vite-plugin-dts';
 import { join } from 'path';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/playground-blueprints',

packages/playground/client/vite.config.ts

@@ -5,7 +5,7 @@ import { join } from 'path';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import ignoreWasmImports from '../ignore-wasm-imports';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/playground-client',

packages/playground/common/vite.config.ts

@@ -2,7 +2,7 @@
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 const path = (filename: string) => new URL(filename, import.meta.url).pathname;
 export default defineConfig({

packages/playground/puzzle/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { execSync } from 'node:child_process';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import ignoreWasmImports from '../ignore-wasm-imports';
 // eslint-disable-next-line @nx/enforce-module-boundaries
@@ -14,7 +14,7 @@ import {
 	remoteDevServerPort,
 } from '../build-config';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import virtualModule from '../vite-virtual-module';
+import virtualModule from '../../vite-extensions/vite-virtual-module';
 import { fileURLToPath } from 'node:url';
 
 const proxy = {

packages/playground/remote/service-worker.ts

@@ -14,6 +14,8 @@ import {
 import { wordPressRewriteRules } from '@wp-playground/wordpress';
 import { reportServiceWorkerMetrics } from '@php-wasm/logger';
 
+import { buildVersion } from 'virtual:remote-config';
+
 if (!(self as any).document) {
 	// Workaround: vite translates import.meta.url
 	// to document.currentScript which fails inside of
@@ -26,6 +28,7 @@ if (!(self as any).document) {
 reportServiceWorkerMetrics(self);
 
 initializeServiceWorker({
+	cacheVersion: buildVersion,
 	handleRequest(event) {
 		const fullUrl = new URL(event.request.url);
 		let scope = getURLScope(fullUrl);

packages/playground/remote/src/lib/types.d.ts

@@ -0,0 +1,4 @@
+// Defined in vite.config.ts
+declare module 'virtual:remote-config' {
+	export const buildVersion: string;
+}

packages/playground/remote/vite.config.ts

@@ -6,8 +6,9 @@ import dts from 'vite-plugin-dts';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { remoteDevServerHost, remoteDevServerPort } from '../build-config';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 import { copyFileSync, existsSync } from 'fs';
+import { buildVersionPlugin } from '../../vite-extensions/vite-build-version';
 
 const path = (filename: string) => new URL(filename, import.meta.url).pathname;
 const plugins = [
@@ -32,6 +33,7 @@ const plugins = [
 			}
 		},
 	} as Plugin,
+	buildVersionPlugin('remote-config'),
 ];
 export default defineConfig({
 	assetsInclude: ['**/*.wasm', '*.zip'],

packages/playground/storage/vite.config.ts

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import ignoreWasmImports from '../ignore-wasm-imports';
 

packages/playground/sync/vite.config.ts

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import ignoreWasmImports from '../ignore-wasm-imports';

packages/playground/website/vite.config.ts

@@ -2,9 +2,8 @@
 import { defineConfig } from 'vite';
 import type { Plugin, ViteDevServer } from 'vite';
 import react from '@vitejs/plugin-react';
-import { execSync } from 'node:child_process';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import ignoreWasmImports from '../ignore-wasm-imports';
 // eslint-disable-next-line @nx/enforce-module-boundaries
@@ -15,11 +14,11 @@ import {
 	remoteDevServerPort,
 } from '../build-config';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import virtualModule from '../vite-virtual-module';
 import { oAuthMiddleware } from './vite.oauth';
 import { fileURLToPath } from 'node:url';
 import { copyFileSync, existsSync, cpSync } from 'node:fs';
 import { join } from 'node:path';
+import { buildVersionPlugin } from '../../vite-extensions/vite-build-version';
 
 const proxy = {
 	'^/plugin-proxy': {
@@ -29,13 +28,6 @@ const proxy = {
 	},
 };
 
-let buildVersion: string;
-try {
-	buildVersion = execSync('git rev-parse HEAD').toString().trim();
-} catch (e) {
-	buildVersion = (new Date().getTime() / 1000).toFixed(0);
-}
-
 const path = (filename: string) => new URL(filename, import.meta.url).pathname;
 export default defineConfig(({ command, mode }) => {
 	return {
@@ -83,11 +75,7 @@ export default defineConfig(({ command, mode }) => {
 				root: '../../../',
 			}),
 			ignoreWasmImports(),
-			virtualModule({
-				name: 'website-config',
-				content: `
-				export const buildVersion = ${JSON.stringify(buildVersion)};`,
-			}),
+			buildVersionPlugin('website-config'),
 			// GitHub OAuth flow
 			{
 				name: 'configure-server',

packages/playground/wordpress-builds/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import type { Plugin } from 'vite';
 import dts from 'vite-plugin-dts';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 const path = (filename: string) => new URL(filename, import.meta.url).pathname;
 export default defineConfig({

packages/playground/wordpress/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import type { Plugin } from 'vite';
 import dts from 'vite-plugin-dts';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 
 const path = (filename: string) => new URL(filename, import.meta.url).pathname;
 export default defineConfig({

packages/vite-extensions/vite-build-version.ts

@@ -0,0 +1,17 @@
+import { execSync } from 'node:child_process';
+import virtualModule from './vite-virtual-module';
+
+export const buildVersionPlugin = (name: string) => {
+	let buildVersion: string;
+	try {
+		buildVersion = execSync('git rev-parse HEAD').toString().trim();
+	} catch (e) {
+		buildVersion = (new Date().getTime() / 1000).toFixed(0);
+	}
+
+	return virtualModule({
+		name,
+		content: `
+    export const buildVersion = ${JSON.stringify(buildVersion)};`,
+	});
+};