sku 15.10.2 → 15.10.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sku
 
+## 15.10.3
+
+### Patch Changes
+
+- start(vite): minimize reloads caused by dependency optimization on cold startup ([#1516](https://github.com/seek-oss/sku/pull/1516))
+
 ## 15.10.2
 
 ### Patch Changes

package/dist/_virtual/rolldown_runtime.mjs

@@ -26,6 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 //#endregion
-export { __commonJSMin, __toESM };
+export { __commonJSMin, __require, __toESM };

package/dist/config/storybook.cjs

@@ -1475,7 +1475,7 @@ var MetricsPlugin = class {
 		compiler.hooks.done.tap(smp, () => {
 			if (this.initial) {
 				log$2("Initial \"%s\" build complete: %s", this.target, { toString: () => (0, pretty_ms.default)(node_perf_hooks.performance.now()) });
-				telemetry_default.timing("start.webpack.initial", node_perf_hooks.performance.now(), {
+				telemetry_default.timing("start.initial", node_perf_hooks.performance.now(), {
 					target: this.target,
 					type: this.type
 				});
@@ -1483,7 +1483,7 @@ var MetricsPlugin = class {
 			} else {
 				const rebuildTime = node_perf_hooks.performance.now() - this.startTime;
 				log$2("Rebuild for \"%s\" complete: %s", this.target, { toString: () => (0, pretty_ms.default)(rebuildTime) });
-				telemetry_default.timing("start.webpack.rebuild", rebuildTime, {
+				telemetry_default.timing("start.rebuild", rebuildTime, {
 					target: this.target,
 					type: this.type
 				});

package/dist/packages/sku/package.mjs

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "15.10.2";
+var version = "15.10.3";
 var package_default = {
 	name: "sku",
 	version,

package/dist/program/commands/serve/serve.action.mjs

@@ -2,9 +2,9 @@ import { serverUrls } from "../../../private/utils/src/serverUrls.mjs";
 import "../../../private/utils/src/index.mjs";
 import telemetry_default from "../../../services/telemetry/index.mjs";
 import exists_default from "../../../utils/exists.mjs";
+import { checkHosts, getAppHosts, withHostile } from "../../../context/hosts.mjs";
 import { getSiteForHost } from "../../../context/getSiteForHost.mjs";
 import { getRouteWithLanguage, getValidLanguagesForRoute } from "../../../utils/language-utils.mjs";
-import { checkHosts, getAppHosts, withHostile } from "../../../context/hosts.mjs";
 import allocatePort_default from "../../../utils/allocatePort.mjs";
 import { configureProject, validatePeerDeps } from "../../../utils/configure.mjs";
 import { openBrowser } from "../../../openBrowser.mjs";

package/dist/program/commands/start/webpack-start-handler.mjs

@@ -1,10 +1,10 @@
 import { serverUrls } from "../../../private/utils/src/serverUrls.mjs";
 import "../../../private/utils/src/index.mjs";
 import certificate_default from "../../../utils/certificate.mjs";
+import { getAppHosts } from "../../../context/hosts.mjs";
 import { getSiteForHost } from "../../../context/getSiteForHost.mjs";
 import { getMatchingRoute } from "../../../utils/routeMatcher.mjs";
 import { getLanguageFromRoute, getRouteWithLanguage } from "../../../utils/language-utils.mjs";
-import { getAppHosts } from "../../../context/hosts.mjs";
 import createHtmlRenderPlugin_default from "../../../services/webpack/config/plugins/createHtmlRenderPlugin.mjs";
 import allocatePort_default from "../../../utils/allocatePort.mjs";
 import statsConfig_default from "../../../services/webpack/config/statsConfig.mjs";

package/dist/program/commands/test/vitest-test-handler.mjs

@@ -1,11 +1,11 @@
 import { hasErrorCode } from "../../../utils/error-guards.mjs";
-import { createSkuVitestConfig } from "../../../services/vite/helpers/config/baseConfig.mjs";
+import { createConfig } from "../../../services/vite/helpers/config/createConfig.mjs";
 import { styleText } from "node:util";
 
 //#region src/program/commands/test/vitest-test-handler.ts
 const vitestHandler = async ({ skuContext, args }) => {
 	const { parseCLI, startVitest } = await lazyLoadVitest();
-	const viteConfigOverride = createSkuVitestConfig({}, skuContext);
+	const viteConfigOverride = createConfig(skuContext);
 	const results = parseCLI(["vitest", ...args]);
 	const overrideableOptions = skuContext.vitestDecorator({
 		css: true,

package/dist/services/vite/helpers/config/createConfig.mjs

@@ -1,81 +1,50 @@
-import { serverUrls } from "../../../../private/utils/src/serverUrls.mjs";
-import "../../../../private/utils/src/index.mjs";
-import isCI_default from "../../../../utils/isCI.mjs";
-import { createSkuViteConfig } from "./baseConfig.mjs";
-import { createOutDir, renderEntryChunkName } from "../bundleConfig.mjs";
-import { middlewarePlugin } from "../../plugins/middlewarePlugin.mjs";
-import { startTelemetryPlugin } from "../../plugins/startTelemetry.mjs";
-import { HMRTelemetryPlugin } from "../../plugins/HMRTelemetry.mjs";
-import { getAppHosts } from "../../../../context/hosts.mjs";
-import { httpsDevServerPlugin } from "../../plugins/httpsDevServerPlugin.mjs";
-import { bundleAnalyzerPlugin } from "../../plugins/bundleAnalyzer.mjs";
-import { vitePluginSsrCss } from "../../plugins/ssrCss/plugin.mjs";
+import { getVocabConfig } from "../../../vocab/config.mjs";
+import { skuPlugin } from "../../skuPlugin.mjs";
 import { createRequire } from "node:module";
+import { vitePluginVocab } from "@vocab/vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { cjsInterop } from "vite-plugin-cjs-interop";
+import react from "@vitejs/plugin-react";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
 //#region src/services/vite/helpers/config/createConfig.ts
-const clientEntry = createRequire(import.meta.url).resolve("#entries/vite-client");
-const shouldOpenTab = process.env.OPEN_TAB !== "false" && !isCI_default;
-const createServerBuildConfig = (skuContext) => {
-	return createSkuViteConfig({ build: {
-		ssr: true,
-		outDir: createOutDir(skuContext.paths.target).ssg,
-		rollupOptions: {
-			input: skuContext.paths.renderEntry,
-			output: { entryFileNames: renderEntryChunkName }
-		}
-	} }, skuContext);
-};
-const createClientBuildConfig = (skuContext) => {
-	const outDir = createOutDir(skuContext.paths.target);
-	return createSkuViteConfig({
-		plugins: [process.env.NODE_ENV === "production" ? bundleAnalyzerPlugin({ name: "client" }) : null],
-		build: {
-			ssr: false,
-			outDir: outDir.client,
-			manifest: true,
-			sourcemap: skuContext.sourceMapsProd,
-			rollupOptions: { input: clientEntry }
-		}
-	}, skuContext);
-};
-const createStartConfig = ({ skuContext, environment }) => {
-	const outDir = createOutDir(skuContext.paths.target);
-	return createSkuViteConfig({
-		base: "/",
-		plugins: [
-			vitePluginSsrCss({ entries: [skuContext.paths.renderEntry] }),
-			middlewarePlugin({
-				skuContext,
-				environment
-			}),
-			startTelemetryPlugin({
-				target: "node",
-				type: "static"
-			}),
-			HMRTelemetryPlugin({
-				target: "node",
-				type: "static"
-			}),
-			httpsDevServerPlugin(skuContext)
-		],
-		build: {
-			ssr: false,
-			outDir: outDir.client,
-			manifest: true,
-			rollupOptions: { input: clientEntry }
-		},
-		server: {
-			host: "localhost",
-			allowedHosts: getAppHosts(skuContext).filter((host) => typeof host === "string"),
-			open: shouldOpenTab && serverUrls({
-				hosts: getAppHosts(skuContext),
-				port: skuContext.port.client,
-				initialPath: skuContext.initialPath,
-				https: skuContext.httpsDevServer
-			}).first()
-		}
-	}, skuContext);
+const require = createRequire(import.meta.url);
+const createConfig = (skuContext, environment) => {
+	const vocabConfig = getVocabConfig(skuContext);
+	const isProductionBuild = process.env.NODE_ENV === "production";
+	const prodBabelPlugins = [
+		require.resolve("babel-plugin-transform-react-remove-prop-types"),
+		require.resolve("@babel/plugin-transform-react-constant-elements"),
+		[require.resolve("babel-plugin-unassert"), {
+			variables: ["assert", "invariant"],
+			modules: [
+				"assert",
+				"node:assert",
+				"tiny-invariant"
+			]
+		}]
+	];
+	if (skuContext.displayNamesProd) prodBabelPlugins.push(require.resolve("@sku-lib/babel-plugin-display-name"));
+	return { plugins: [
+		skuContext.vitePlugins,
+		vocabConfig && vitePluginVocab({ vocabConfig }),
+		tsconfigPaths(),
+		cjsInterop({
+			dependencies: skuContext.serveCjsInteropDependencies,
+			apply: "serve"
+		}),
+		cjsInterop({
+			dependencies: skuContext.buildCjsInteropDependencies,
+			apply: "build"
+		}),
+		react({ babel: { plugins: [require.resolve("babel-plugin-macros"), ...isProductionBuild ? prodBabelPlugins : []] } }),
+		vanillaExtractPlugin(),
+		skuPlugin({
+			skuContext,
+			environment
+		})
+	] };
 };
 
 //#endregion
-export { createClientBuildConfig, createServerBuildConfig, createStartConfig };
+export { createConfig };

package/dist/services/vite/helpers/makePluginName.mjs

@@ -0,0 +1,5 @@
+//#region src/services/vite/helpers/makePluginName.ts
+const makePluginName = (name) => `sku:${name}`;
+
+//#endregion
+export { makePluginName };

package/dist/services/vite/plugins/build.mjs

@@ -0,0 +1,48 @@
+import { __require } from "../../../_virtual/rolldown_runtime.mjs";
+import { makePluginName } from "../helpers/makePluginName.mjs";
+import { createOutDir, renderEntryChunkName } from "../helpers/bundleConfig.mjs";
+import browserslistToEsbuild from "../helpers/browserslist-to-esbuild.mjs";
+import { createVocabChunks } from "@vocab/vite/chunks";
+
+//#region src/services/vite/plugins/build.ts
+const clientEntry = __require.resolve("#entries/vite-client");
+const buildPlugin = ({ skuContext }) => {
+	const outDir = createOutDir(skuContext.paths.target);
+	return {
+		name: makePluginName("build"),
+		apply: "build",
+		config: () => ({
+			base: skuContext.publicPath,
+			build: {
+				target: browserslistToEsbuild(skuContext.supportedBrowsers),
+				assetsDir: "",
+				rollupOptions: { output: {
+					experimentalMinChunkSize: void 0,
+					manualChunks: (id, ctx) => {
+						const languageChunkName = createVocabChunks(id, ctx);
+						if (languageChunkName) return languageChunkName;
+					}
+				} }
+			},
+			environments: {
+				client: { build: {
+					outDir: outDir.client,
+					manifest: true,
+					sourcemap: skuContext.sourceMapsProd,
+					rollupOptions: { input: clientEntry }
+				} },
+				ssr: { build: {
+					ssr: true,
+					outDir: outDir.ssg,
+					rollupOptions: {
+						input: skuContext.paths.renderEntry,
+						output: { entryFileNames: renderEntryChunkName }
+					}
+				} }
+			}
+		})
+	};
+};
+
+//#endregion
+export { buildPlugin };

package/dist/services/vite/plugins/bundleAnalyzer.mjs

@@ -3,13 +3,15 @@ import "../../../private/utils/src/index.mjs";
 import { visualizer } from "rollup-plugin-visualizer";
 
 //#region src/services/vite/plugins/bundleAnalyzer.ts
-const bundleReportFolder = "report";
-const getProjectName = () => requireFromCwd("./package.json").name;
-const bundleAnalyzerPlugin = ({ name }) => visualizer({
-	filename: getPathFromCwd(`${bundleReportFolder}/${name}.html`),
-	template: "treemap",
-	gzipSize: true,
-	title: getProjectName() || "Vite Bundle Analyzer"
+const bundleAnalyzerPlugin = () => ({
+	...visualizer({
+		filename: getPathFromCwd("report/client.html"),
+		template: "treemap",
+		gzipSize: true,
+		title: requireFromCwd("./package.json").name || "Vite Bundle Analyzer"
+	}),
+	apply: "build",
+	applyToEnvironment: (environment) => environment.name === "client"
 });
 
 //#endregion

package/dist/services/vite/plugins/config.mjs

@@ -0,0 +1,36 @@
+import { makePluginName } from "../helpers/makePluginName.mjs";
+import { fixViteVanillaExtractDepScanPlugin } from "./esbuild/fixViteVanillaExtractDepScanPlugin.mjs";
+import { createRequire } from "node:module";
+
+//#region src/services/vite/plugins/config.ts
+const require = createRequire(import.meta.url);
+const renderEntry = require.resolve("#entries/vite-render");
+const clientEntry = require.resolve("#entries/vite-client");
+const configPlugin = ({ skuContext }) => ({
+	name: makePluginName("config"),
+	config: () => ({
+		publicDir: false,
+		root: process.cwd(),
+		resolve: { alias: {
+			__sku_alias__clientEntry: skuContext.paths.clientEntry,
+			__sku_alias__serverEntry: skuContext.paths.serverEntry,
+			__sku_alias__renderEntry: skuContext.paths.renderEntry
+		} },
+		define: { "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) },
+		optimizeDeps: {
+			entries: [
+				skuContext.paths.clientEntry,
+				skuContext.paths.serverEntry,
+				skuContext.paths.renderEntry,
+				renderEntry,
+				clientEntry
+			],
+			esbuildOptions: { plugins: [fixViteVanillaExtractDepScanPlugin()] },
+			exclude: skuContext.skipPackageCompatibilityCompilation
+		},
+		ssr: { external: ["serialize-javascript", "@sku-lib/vite"] }
+	})
+});
+
+//#endregion
+export { configPlugin };

package/dist/services/vite/plugins/dangerouslySetViteConfig.mjs

@@ -1,10 +1,12 @@
+import { makePluginName } from "../helpers/makePluginName.mjs";
+
 //#region src/services/vite/plugins/dangerouslySetViteConfig.ts
-function dangerouslySetViteConfig(skuContext) {
+function dangerouslySetViteConfigPlugin(skuContext) {
 	return {
-		name: "vite-plugin-dangerously-set-config",
+		name: makePluginName("dangerously-set-vite-config"),
 		config: skuContext.viteDecorator
 	};
 }
 
 //#endregion
-export { dangerouslySetViteConfig };
+export { dangerouslySetViteConfigPlugin };

package/dist/services/vite/plugins/devServer.mjs

@@ -0,0 +1,25 @@
+import { serverUrls } from "../../../private/utils/src/serverUrls.mjs";
+import isCI_default from "../../../utils/isCI.mjs";
+import { getAppHosts } from "../../../context/hosts.mjs";
+import { makePluginName } from "../helpers/makePluginName.mjs";
+
+//#region src/services/vite/plugins/devServer.ts
+const shouldOpenTab = process.env.OPEN_TAB !== "false" && !isCI_default;
+const disableWatch = Boolean(process.env.SKU_VITE_DISABLE_WATCH);
+const devServerPlugin = ({ skuContext }) => ({
+	name: makePluginName("dev-server"),
+	config: () => ({ server: {
+		watch: disableWatch ? null : {},
+		host: "localhost",
+		allowedHosts: getAppHosts(skuContext).filter((host) => typeof host === "string"),
+		open: shouldOpenTab && serverUrls({
+			hosts: getAppHosts(skuContext),
+			port: skuContext.port.client,
+			initialPath: skuContext.initialPath,
+			https: skuContext.httpsDevServer
+		}).first()
+	} })
+});
+
+//#endregion
+export { devServerPlugin };

package/dist/services/vite/plugins/esbuild/fixViteVanillaExtractDepScanPlugin.mjs

@@ -1,3 +1,4 @@
+import { makePluginName } from "../../helpers/makePluginName.mjs";
 import { createRequire } from "node:module";
 import { dirname } from "node:path";
 import { cssFileFilter } from "@vanilla-extract/integration";
@@ -5,7 +6,7 @@ import { cssFileFilter } from "@vanilla-extract/integration";
 //#region src/services/vite/plugins/esbuild/fixViteVanillaExtractDepScanPlugin.ts
 const require = createRequire(import.meta.url);
 const fixViteVanillaExtractDepScanPlugin = () => ({
-	name: "fix-vite-vanilla-extract-dep-scan",
+	name: makePluginName("fix-vanilla-extract-dep-scan"),
 	setup(build) {
 		build.onResolve({ filter: cssFileFilter }, ({ importer, path: path$1 }) => ({
 			path: require.resolve(path$1, { paths: [dirname(importer)] }),

package/dist/services/vite/plugins/{httpsDevServerPlugin.mjs → httpsDevServer.mjs}

@@ -2,7 +2,7 @@ import { getAppHosts } from "../../../context/hosts.mjs";
 import path from "node:path";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 
-//#region src/services/vite/plugins/httpsDevServerPlugin.ts
+//#region src/services/vite/plugins/httpsDevServer.ts
 const httpsDevServerPlugin = (skuContext) => {
 	if (!skuContext.httpsDevServer) return [];
 	const certDir = path.join(process.cwd(), ".ssl");

package/dist/services/vite/plugins/{middlewarePlugin.mjs → middleware.mjs}

@@ -2,16 +2,17 @@ import { getMatchingRoute } from "../../../utils/routeMatcher.mjs";
 import { getLanguageFromRoute, getRouteWithLanguage } from "../../../utils/language-utils.mjs";
 import { metricsMeasurers } from "../../telemetry/metricsMeasurers.mjs";
 import createCSPHandler from "../../webpack/entry/csp.mjs";
+import { makePluginName } from "../helpers/makePluginName.mjs";
 import { createRequire } from "node:module";
 import debug from "debug";
 
-//#region src/services/vite/plugins/middlewarePlugin.ts
+//#region src/services/vite/plugins/middleware.ts
 const log = debug("sku:middleware:vite");
 const require = createRequire(import.meta.url);
 const renderEntry = require.resolve("#entries/vite-render");
 const clientEntry = require.resolve("#entries/vite-client");
 const middlewarePlugin = ({ skuContext, environment }) => ({
-	name: "vite-plugin-sku-server-middleware",
+	name: makePluginName("middleware"),
 	async configureServer(server) {
 		if (metricsMeasurers.initialPageLoad.isInitialPageLoad && metricsMeasurers.initialPageLoad.openTab) metricsMeasurers.initialPageLoad.mark();
 		if (skuContext.paths.devServerMiddleware) {

package/dist/services/vite/plugins/{polyfillsPlugin.mjs → polyfills.mjs}

@@ -1,12 +1,13 @@
+import { makePluginName } from "../helpers/makePluginName.mjs";
 import { resolvePolyfills } from "../../../utils/resolvePolyfills.mjs";
 
-//#region src/services/vite/plugins/polyfillsPlugin.ts
+//#region src/services/vite/plugins/polyfills.ts
 const polyfillsPlugin = (skuContext) => {
 	const virtualModuleId = "virtual:sku/polyfills";
 	const resolvedVirtualModuleId = `\0${virtualModuleId}`;
 	const resolvedPolyfills = resolvePolyfills(skuContext.polyfills);
 	return {
-		name: "vite-plugin-sku-polyfills",
+		name: makePluginName("polyfills"),
 		resolveId(id) {
 			if (id === virtualModuleId) return resolvedVirtualModuleId;
 		},

package/dist/services/vite/plugins/preloadPlugin/preloadPlugin.mjs

@@ -1,5 +1,6 @@
 import { getExecuteCommand } from "../../../../private/utils/src/packageManager/packageManager.mjs";
 import "../../../../private/utils/src/index.mjs";
+import { makePluginName } from "../../helpers/makePluginName.mjs";
 import { VITE_LOADABLE_IMPORT, WEBPACK_LOADABLE_IMPORT } from "./helpers/constants.mjs";
 import { getViteLoadableSpecifierName } from "./helpers/getViteLoadableSpecifierName.mjs";
 import { getWebpackLoadableSpecifierName } from "./helpers/getWebpackLoadableSpecifierName.mjs";
@@ -18,14 +19,10 @@ function preloadPlugin({ debug, convertFromWebpack } = {}) {
 	const lazyImportedModules = /* @__PURE__ */ new Set();
 	const injectedModules = /* @__PURE__ */ new Set();
 	let count = 0;
-	let isSsr = false;
 	return {
-		name: "vite-plugin-sku-vite-preload",
-		apply(config) {
-			isSsr = Boolean(config.build?.ssr);
-			return true;
-		},
+		name: makePluginName("preload"),
 		async transform(code, id) {
+			const isSsr = this.environment?.name === "ssr";
 			if (!include.test(id)) return null;
 			if (code.includes(WEBPACK_LOADABLE_IMPORT) && code.includes(VITE_LOADABLE_IMPORT)) throw new Error(`Both ${WEBPACK_LOADABLE_IMPORT} and ${VITE_LOADABLE_IMPORT} imports found in ${id}. Please remove one of them.`);
 			let ast;

package/dist/services/vite/plugins/setNoExternal.mjs

@@ -1,9 +1,11 @@
+import { makePluginName } from "../helpers/makePluginName.mjs";
 import { extractDependencyGraph, getSsrExternalsForCompiledDependency } from "../helpers/config/dependencyGraph.mjs";
 
 //#region src/services/vite/plugins/setNoExternal.ts
-function setNoExternal(skuContext) {
+function setNoExternalPlugin(skuContext) {
 	return {
-		name: "vite-plugin-set-no-external",
+		name: makePluginName("set-no-external"),
+		applyToEnvironment: (environment) => environment.name === "ssr",
 		async config() {
 			const ssrExternals = getSsrExternalsForCompiledDependency("@vanilla-extract/css", await extractDependencyGraph(process.cwd()));
 			return { resolve: { noExternal: [...skuContext.paths.compilePackages, ...ssrExternals.noExternal] } };
@@ -12,4 +14,4 @@ function setNoExternal(skuContext) {
 }
 
 //#endregion
-export { setNoExternal };
+export { setNoExternalPlugin };

package/dist/services/vite/plugins/telemetry.mjs

@@ -0,0 +1,93 @@
+import telemetry_default from "../../telemetry/index.mjs";
+import { metricsMeasurers } from "../../telemetry/metricsMeasurers.mjs";
+import { makePluginName } from "../helpers/makePluginName.mjs";
+import debug from "debug";
+import dedent from "dedent";
+
+//#region src/services/vite/plugins/telemetry.ts
+const log = debug("sku:metrics");
+const customHmrEvent = "sku:vite-hmr";
+const initialPageLoadEvent = "sku:initialPageLoad";
+const telemetryPlugin = ({ target, type }) => {
+	const hmrUpdateTimestamps = /* @__PURE__ */ new Set();
+	return {
+		apply: "serve",
+		name: makePluginName("telemetry"),
+		transformIndexHtml: {
+			order: "pre",
+			handler: () => [{
+				tag: "script",
+				attrs: { type: "module" },
+				children: skuPageLoadTelemetryClient,
+				injectTo: "head"
+			}, {
+				tag: "script",
+				attrs: { type: "module" },
+				children: skuHmrTelemetryClient,
+				injectTo: "head"
+			}]
+		},
+		handleHotUpdate: {
+			order: "pre",
+			handler: (ctx) => {
+				hmrUpdateTimestamps.add(ctx.timestamp);
+			}
+		},
+		configureServer(server) {
+			server.ws.on(initialPageLoadEvent, handleInitialPageLoadEvent({
+				target,
+				type
+			}));
+			server.ws.on(customHmrEvent, handleCustomHmrEvent(hmrUpdateTimestamps, {
+				target,
+				type
+			}));
+		}
+	};
+};
+/**
+* This client script is used to measure the initial page load time.
+*/
+const skuPageLoadTelemetryClient = dedent`
+  addEventListener("load", () => {
+    if (import.meta.hot) {
+      import.meta.hot.send('${initialPageLoadEvent}');
+    }
+  })
+`;
+const handleInitialPageLoadEvent = (tags) => () => {
+	if (metricsMeasurers.initialPageLoad.isInitialPageLoad && metricsMeasurers.initialPageLoad.openTab) {
+		const { duration: skuStartDuration } = metricsMeasurers.skuStart.measure();
+		const { duration: initialLoadDuration } = metricsMeasurers.initialPageLoad.measure();
+		const initialStartTime = skuStartDuration + initialLoadDuration;
+		telemetry_default.timing("start.initial", initialStartTime, tags);
+	}
+};
+/**
+* This client script is used to measure the HMR time.
+*/
+const skuHmrTelemetryClient = dedent`
+  if (import.meta.hot) {
+    import.meta.hot.on('vite:beforeUpdate', () => {
+      performance.mark("vite-hmr");
+    })
+
+    import.meta.hot.on('vite:afterUpdate', (ctx) => {
+      const result = performance.measure("hmr-time", "vite-hmr");
+      const timestamp = ctx.updates[0].timestamp;
+
+      import.meta.hot.send('${customHmrEvent}', { durationInMs: result.duration, timestamp });
+    })
+  }
+`;
+const handleCustomHmrEvent = (timestamps, tags) => (data) => {
+	const { durationInMs, timestamp } = data;
+	if (timestamps.has(timestamp)) {
+		timestamps.delete(timestamp);
+		log("HMR update completed in %dms", durationInMs);
+		telemetry_default.timing("start.rebuild", durationInMs, tags);
+	}
+};
+
+//#endregion
+export { telemetryPlugin };

package/dist/services/vite/skuPlugin.mjs

@@ -0,0 +1,40 @@
+import { httpsDevServerPlugin } from "./plugins/httpsDevServer.mjs";
+import { middlewarePlugin } from "./plugins/middleware.mjs";
+import { vitePluginSsrCss } from "./plugins/ssrCss/plugin.mjs";
+import { preloadPlugin } from "./plugins/preloadPlugin/preloadPlugin.mjs";
+import { setNoExternalPlugin } from "./plugins/setNoExternal.mjs";
+import { polyfillsPlugin } from "./plugins/polyfills.mjs";
+import { dangerouslySetViteConfigPlugin } from "./plugins/dangerouslySetViteConfig.mjs";
+import { telemetryPlugin } from "./plugins/telemetry.mjs";
+import { configPlugin } from "./plugins/config.mjs";
+import { buildPlugin } from "./plugins/build.mjs";
+import { devServerPlugin } from "./plugins/devServer.mjs";
+import { bundleAnalyzerPlugin } from "./plugins/bundleAnalyzer.mjs";
+
+//#region src/services/vite/skuPlugin.ts
+/**
+* All sku related functionality and customization as a vite plugin.
+*/
+const skuPlugin = ({ skuContext, environment }) => [
+	configPlugin({ skuContext }),
+	dangerouslySetViteConfigPlugin(skuContext),
+	setNoExternalPlugin(skuContext),
+	buildPlugin({ skuContext }),
+	devServerPlugin({ skuContext }),
+	httpsDevServerPlugin(skuContext),
+	preloadPlugin({ convertFromWebpack: skuContext.convertLoadable }),
+	polyfillsPlugin(skuContext),
+	vitePluginSsrCss({ entries: [skuContext.paths.renderEntry] }),
+	environment !== void 0 && middlewarePlugin({
+		skuContext,
+		environment
+	}),
+	telemetryPlugin({
+		target: "node",
+		type: "static"
+	}),
+	bundleAnalyzerPlugin()
+];
+
+//#endregion
+export { skuPlugin };

package/dist/services/webpack/config/plugins/metricsPlugin.mjs

@@ -24,7 +24,7 @@ var MetricsPlugin = class {
 		compiler.hooks.done.tap(smp, () => {
 			if (this.initial) {
 				log("Initial \"%s\" build complete: %s", this.target, { toString: () => prettyMilliseconds(performance.now()) });
-				telemetry_default.timing("start.webpack.initial", performance.now(), {
+				telemetry_default.timing("start.initial", performance.now(), {
 					target: this.target,
 					type: this.type
 				});
@@ -32,7 +32,7 @@ var MetricsPlugin = class {
 			} else {
 				const rebuildTime = performance.now() - this.startTime;
 				log("Rebuild for \"%s\" complete: %s", this.target, { toString: () => prettyMilliseconds(rebuildTime) });
-				telemetry_default.timing("start.webpack.rebuild", rebuildTime, {
+				telemetry_default.timing("start.rebuild", rebuildTime, {
 					target: this.target,
 					type: this.type
 				});

package/dist/services/webpack/config/webpack.config.mjs

@@ -2,8 +2,8 @@ import { cwd } from "../../../private/utils/src/filesystem/cwd.mjs";
 import "../../../private/utils/src/index.mjs";
 import { browserslistNodeTarget } from "../../../config/targets.mjs";
 import { bundleAnalyzerPlugin } from "./plugins/bundleAnalyzer.mjs";
-import { resolvePolyfills } from "../../../utils/resolvePolyfills.mjs";
 import { getVocabConfig } from "../../vocab/config.mjs";
+import { resolvePolyfills } from "../../../utils/resolvePolyfills.mjs";
 import { resolvePackage } from "./utils/resolvePackage.mjs";
 import { JAVASCRIPT } from "./utils/index.mjs";
 import { SkuWebpackPlugin } from "../../../webpack-plugin.mjs";

package/dist/services/webpack/config/webpack.config.ssr.mjs

@@ -2,8 +2,8 @@ import { requireFromCwd } from "../../../private/utils/src/filesystem/cwd.mjs";
 import "../../../private/utils/src/index.mjs";
 import { browserslistNodeTarget } from "../../../config/targets.mjs";
 import { bundleAnalyzerPlugin } from "./plugins/bundleAnalyzer.mjs";
-import { resolvePolyfills } from "../../../utils/resolvePolyfills.mjs";
 import { getVocabConfig } from "../../vocab/config.mjs";
+import { resolvePolyfills } from "../../../utils/resolvePolyfills.mjs";
 import { resolvePackage } from "./utils/resolvePackage.mjs";
 import { JAVASCRIPT } from "./utils/index.mjs";
 import { SkuWebpackPlugin } from "../../../webpack-plugin.mjs";

package/dist/vite/client.mjs

@@ -1,28 +1,24 @@
 import { serverUrls } from "../private/utils/src/serverUrls.mjs";
 import "../private/utils/src/index.mjs";
-import { createOutDir } from "../services/vite/helpers/bundleConfig.mjs";
 import { getAppHosts } from "../context/hosts.mjs";
-import { createClientBuildConfig, createServerBuildConfig, createStartConfig } from "../services/vite/helpers/config/createConfig.mjs";
+import { createOutDir } from "../services/vite/helpers/bundleConfig.mjs";
+import { createConfig } from "../services/vite/helpers/config/createConfig.mjs";
 import { cleanTargetDirectory } from "../utils/buildFileUtils.mjs";
 import { prerenderConcurrently } from "../services/vite/helpers/prerender/prerenderConcurrently.mjs";
 import allocatePort_default from "../utils/allocatePort.mjs";
-import { build, createServer } from "vite";
+import { createBuilder, createServer } from "vite";
 
 //#region src/services/vite/index.ts
 const viteService = {
 	build: async (skuContext) => {
 		const outDir = createOutDir(skuContext.paths.target);
-		await build(createClientBuildConfig(skuContext));
-		await build(createServerBuildConfig(skuContext));
+		await (await createBuilder(createConfig(skuContext))).buildApp();
 		if (skuContext.routes) await prerenderConcurrently(skuContext);
 		await cleanTargetDirectory(outDir.ssg, true);
 		await cleanTargetDirectory(outDir.join(".vite"), true);
 	},
 	start: async ({ skuContext, environment }) => {
-		const server = await createServer(createStartConfig({
-			skuContext,
-			environment
-		}));
+		const server = await createServer(createConfig(skuContext, environment));
 		const availablePort = await allocatePort_default({
 			port: skuContext.port.client,
 			strictPort: skuContext.port.strictPort

package/dist/vite/prerender-worker.mjs

@@ -1,6 +1,6 @@
 import { createPreRenderedHtml } from "../services/vite/helpers/html/createPreRenderedHtml.mjs";
-import { createOutDir, renderEntryChunkName } from "../services/vite/helpers/bundleConfig.mjs";
 import createCSPHandler from "../services/webpack/entry/csp.mjs";
+import { createOutDir, renderEntryChunkName } from "../services/vite/helpers/bundleConfig.mjs";
 import { ensureTargetDirectory } from "../utils/buildFileUtils.mjs";
 import path from "node:path";
 import { readFile, writeFile } from "node:fs/promises";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "15.10.2",
+  "version": "15.10.3",
   "description": "Front-end development toolkit, powered by Webpack, Babel, Vanilla Extract and Jest",
   "types": "./dist/index.d.mts",
   "bin": {
@@ -100,7 +100,7 @@
     "@vocab/core": "^1.6.2",
     "@vocab/phrase": "^2.2.0",
     "@vocab/pseudo-localize": "^1.0.1",
-    "@vocab/vite": "^0.3.1",
+    "@vocab/vite": "^1.0.0",
     "@vocab/webpack": "^1.2.9",
     "autoprefixer": "^10.3.1",
     "babel-jest": "^30.0.0",

package/dist/services/vite/helpers/config/baseConfig.mjs

@@ -1,94 +0,0 @@
-import { polyfillsPlugin } from "../../plugins/polyfillsPlugin.mjs";
-import { preloadPlugin } from "../../plugins/preloadPlugin/preloadPlugin.mjs";
-import { fixViteVanillaExtractDepScanPlugin } from "../../plugins/esbuild/fixViteVanillaExtractDepScanPlugin.mjs";
-import { getVocabConfig } from "../../../vocab/config.mjs";
-import { dangerouslySetViteConfig } from "../../plugins/dangerouslySetViteConfig.mjs";
-import { setNoExternal } from "../../plugins/setNoExternal.mjs";
-import browserslistToEsbuild from "../browserslist-to-esbuild.mjs";
-import { createRequire } from "node:module";
-import { createVocabChunks } from "@vocab/vite/chunks";
-import { mergeConfig } from "vite";
-import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
-import react from "@vitejs/plugin-react";
-import tsconfigPaths from "vite-tsconfig-paths";
-import { vitePluginVocab } from "@vocab/vite";
-import { cjsInterop } from "vite-plugin-cjs-interop";
-
-//#region src/services/vite/helpers/config/baseConfig.ts
-const require = createRequire(import.meta.url);
-const getBaseConfig = (skuContext) => {
-	const vocabConfig = getVocabConfig(skuContext);
-	const isProductionBuild = process.env.NODE_ENV === "production";
-	const prodBabelPlugins = [
-		require.resolve("babel-plugin-transform-react-remove-prop-types"),
-		require.resolve("@babel/plugin-transform-react-constant-elements"),
-		[require.resolve("babel-plugin-unassert"), {
-			variables: ["assert", "invariant"],
-			modules: [
-				"assert",
-				"node:assert",
-				"tiny-invariant"
-			]
-		}]
-	];
-	if (skuContext.displayNamesProd) prodBabelPlugins.push(require.resolve("@sku-lib/babel-plugin-display-name"));
-	return {
-		base: skuContext.publicPath,
-		publicDir: false,
-		root: process.cwd(),
-		plugins: [
-			dangerouslySetViteConfig(skuContext),
-			skuContext.vitePlugins,
-			vocabConfig && vitePluginVocab({ vocabConfig }),
-			tsconfigPaths(),
-			cjsInterop({
-				dependencies: skuContext.serveCjsInteropDependencies,
-				apply: "serve"
-			}),
-			cjsInterop({
-				dependencies: skuContext.buildCjsInteropDependencies,
-				apply: "build"
-			}),
-			react({ babel: { plugins: [require.resolve("babel-plugin-macros"), ...isProductionBuild ? prodBabelPlugins : []] } }),
-			vanillaExtractPlugin(),
-			preloadPlugin({ convertFromWebpack: skuContext.convertLoadable }),
-			polyfillsPlugin(skuContext),
-			setNoExternal(skuContext)
-		],
-		resolve: { alias: {
-			__sku_alias__clientEntry: skuContext.paths.clientEntry,
-			__sku_alias__serverEntry: skuContext.paths.serverEntry,
-			__sku_alias__renderEntry: skuContext.paths.renderEntry
-		} },
-		define: { "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) },
-		build: {
-			target: browserslistToEsbuild(skuContext.supportedBrowsers),
-			emptyOutDir: true,
-			ssrManifest: false,
-			assetsDir: "",
-			rollupOptions: { output: {
-				experimentalMinChunkSize: void 0,
-				manualChunks: (id, ctx) => {
-					const languageChunkName = createVocabChunks(id, ctx);
-					if (languageChunkName) return languageChunkName;
-				}
-			} }
-		},
-		optimizeDeps: {
-			esbuildOptions: { plugins: [fixViteVanillaExtractDepScanPlugin()] },
-			exclude: skuContext.skipPackageCompatibilityCompilation
-		},
-		ssr: { external: ["serialize-javascript", "@sku-lib/vite"] }
-	};
-};
-const getVitestBaseConfig = (skuContext) => ({ plugins: [
-	tsconfigPaths(),
-	react(),
-	setNoExternal(skuContext),
-	vanillaExtractPlugin()
-] });
-const createSkuViteConfig = (config, skuContext) => mergeConfig(getBaseConfig(skuContext), config);
-const createSkuVitestConfig = (config, skuContext) => mergeConfig(getVitestBaseConfig(skuContext), config);
-
-//#endregion
-export { createSkuViteConfig, createSkuVitestConfig };

package/dist/services/vite/plugins/HMRTelemetry.mjs

@@ -1,58 +0,0 @@
-import telemetry_default from "../../telemetry/index.mjs";
-import debug from "debug";
-import dedent from "dedent";
-
-//#region src/services/vite/plugins/HMRTelemetry.ts
-const log = debug("sku:metrics");
-const customHmrEvent = "sku:vite-hmr";
-function HMRTelemetryPlugin({ target, type }) {
-	const hmrUpdateTimestamps = /* @__PURE__ */ new Set();
-	return {
-		name: "vite-plugin-sku-hmr-telemetry",
-		transformIndexHtml: {
-			order: "pre",
-			handler: () => [{
-				tag: "script",
-				attrs: { type: "module" },
-				children: skuHmrTelemetryClient,
-				injectTo: "head"
-			}]
-		},
-		handleHotUpdate: {
-			order: "pre",
-			handler: (ctx) => {
-				hmrUpdateTimestamps.add(ctx.timestamp);
-			}
-		},
-		configureServer: (server) => {
-			server.ws.on(customHmrEvent, (data) => {
-				const { durationInMs, timestamp } = data;
-				if (hmrUpdateTimestamps.has(timestamp)) {
-					hmrUpdateTimestamps.delete(timestamp);
-					log("HMR update completed in %dms", durationInMs);
-					telemetry_default.timing("start.webpack.rebuild", durationInMs, {
-						target,
-						type
-					});
-				}
-			});
-		}
-	};
-}
-const skuHmrTelemetryClient = dedent`
-  if (import.meta.hot) {
-    import.meta.hot.on('vite:beforeUpdate', () => {
-      performance.mark("vite-hmr");
-    })
-
-    import.meta.hot.on('vite:afterUpdate', (ctx) => {
-      const result = performance.measure("hmr-time", "vite-hmr");
-      const timestamp = ctx.updates[0].timestamp;
-
-      import.meta.hot.send('${customHmrEvent}', { durationInMs: result.duration, timestamp });
-    })
-  }
-`;
-
-//#endregion
-export { HMRTelemetryPlugin };

package/dist/services/vite/plugins/startTelemetry.mjs

@@ -1,41 +0,0 @@
-import telemetry_default from "../../telemetry/index.mjs";
-import { metricsMeasurers } from "../../telemetry/metricsMeasurers.mjs";
-import dedent from "dedent";
-
-//#region src/services/vite/plugins/startTelemetry.ts
-const initialPageLoadEventName = "sku:initialPageLoad";
-const startTelemetryPlugin = ({ target, type }) => ({
-	name: "vite-plugin-sku-server-middleware",
-	transformIndexHtml: {
-		order: "pre",
-		handler: () => [{
-			tag: "script",
-			attrs: { type: "module" },
-			children: skuPageLoadTelemetryClient,
-			injectTo: "head"
-		}]
-	},
-	configureServer(server) {
-		server.ws.on(initialPageLoadEventName, () => {
-			if (metricsMeasurers.initialPageLoad.isInitialPageLoad && metricsMeasurers.initialPageLoad.openTab) {
-				const { duration: skuStartDuration } = metricsMeasurers.skuStart.measure();
-				const { duration: initialLoadDuration } = metricsMeasurers.initialPageLoad.measure();
-				const initialStartTime = skuStartDuration + initialLoadDuration;
-				telemetry_default.timing("start.webpack.initial", initialStartTime, {
-					target,
-					type
-				});
-			}
-		});
-	}
-});
-const skuPageLoadTelemetryClient = dedent`
-  addEventListener("load", () => {
-    if (import.meta.hot) {
-      import.meta.hot.send('${initialPageLoadEventName}');
-    }
-  })
-`;
-
-//#endregion
-export { startTelemetryPlugin };