@tamagui/vite-plugin 3.0.0-beta.922.1 → 3.0.0

package/dist/esm/plugin.mjs

@@ -6,8 +6,8 @@ import { readFile } from "node:fs/promises";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { createFilter, createIdResolver, createRunnableDevEnvironment, defaultClientConditions, defaultClientMainFields, isRunnableDevEnvironment, resolveConfig } from "vite";
-import { TAMAGUI_EVALUATION_ENVIRONMENT, createViteTamaguiLoader } from "./loadTamagui.mjs";
+import { createFilter, createIdResolver, createRunnableDevEnvironment, defaultClientConditions, defaultClientMainFields, resolveConfig } from "vite";
+import { TAMAGUI_EVALUATION_ENVIRONMENT, createViteTamaguiLoader, viteBuildConfigLoader } from "./loadTamagui.mjs";
 import { createCompilerStatsReport, formatCompilerStatsReport } from "./compilerStats.mjs";
 import { ZERO_CSS_FILENAME, ZERO_ISLAND_DIRNAME, assertZeroGraph, buildIsland, createZeroRuntimeController, finalizeZeroCSS, zeroModuleKey } from "./zeroRuntime.mjs";
 
@@ -165,6 +165,7 @@ async function createOwnedEvaluationConfig(config, configuredEvaluationPackages)
 	const plugins = environment.plugins.filter(isEvaluationUserPlugin).map((plugin) => createEvaluationPluginFacade(plugin));
 	const resolve2 = getEvaluationResolve(environment.resolve, config.root, plugins.some((plugin) => plugin.name === oneTsconfigPathsPluginName), configuredEvaluationPackages);
 	const { createEnvironment: _createEnvironment, ...dev } = environment.dev;
+	const { esbuildOptions: _esbuildOptions, ...optimizeDeps } = environment.optimizeDeps;
 	return resolveConfig({
 		configFile: false,
 		root: config.root,
@@ -178,7 +179,7 @@ async function createOwnedEvaluationConfig(config, configuredEvaluationPackages)
 			keepProcessEnv: environment.keepProcessEnv,
 			define: environment.define,
 			resolve: resolve2,
-			optimizeDeps: environment.optimizeDeps,
+			optimizeDeps,
 			dev: {
 				...dev,
 				moduleRunnerTransform: true
@@ -219,12 +220,34 @@ function addIfInstalled(userConf, projectRoot, ids) {
 	userConf.optimizeDeps.include ||= [];
 	for (const id of ids) if (!userConf.optimizeDeps.include.includes(id) && isInstalled(root, id)) userConf.optimizeDeps.include.push(id);
 }
+function svgWebEntry() {
+	return normalizePath(path.join(path.dirname(resolve("@tamagui/react-native-svg/package.json")), "dist/esm/index.mjs"));
+}
+function resolveSvgWeb(source) {
+	if (source === "react-native-svg" || source === "@tamagui/react-native-svg") return svgWebEntry();
+}
+const svgOptimizerPlugin = {
+	name: "tamagui-svg-optimizer",
+	enforce: "pre",
+	resolveId: {
+		filter: { id: /^(?:react-native-svg|@tamagui\/react-native-svg)$/ },
+		handler(source) {
+			return resolveSvgWeb(source);
+		}
+	}
+};
 function tamaguiAliases(options = {}) {
 	const aliases = [];
-	if (options.svg) aliases.push({
-		find: "react-native-svg",
-		replacement: resolve("@tamagui/react-native-svg")
-	});
+	if (options.svg) {
+		const svg = svgWebEntry();
+		aliases.push({
+			find: "react-native-svg",
+			replacement: svg
+		}, {
+			find: "@tamagui/react-native-svg",
+			replacement: svg
+		});
+	}
 	if (options.rnwLite) {
 		const rnwlBase = path.dirname(resolve("@tamagui/react-native-web-lite/package.json"));
 		const rnwl = normalizePath(path.join(rnwlBase, options.rnwLite === "without-animated" ? "dist/esm/without-animated.mjs" : "dist/esm/index.mjs"));
@@ -267,7 +290,7 @@ function createTamaguiNativePlugin(tamaguiOptionsIn, nativeContext) {
 				root,
 				platform: "native",
 				outputCSS: void 0
-			});
+			}, viteBuildConfigLoader);
 			const options = {
 				...loadedOptions,
 				root,
@@ -464,12 +487,14 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 		},
 		dev: {
 			createEnvironment(name, resolved) {
-				return createRunnableDevEnvironment(name, createServeEvaluationConfig(resolved, configuredEvaluationPackages));
+				const environment = createRunnableDevEnvironment(name, createServeEvaluationConfig(resolved, configuredEvaluationPackages), { hot: false });
+				tamaguiLoader.setEnvironment(environment);
+				return environment;
 			},
 			moduleRunnerTransform: true
 		}
 	});
-	tamaguiLoader.loadTamaguiBuildConfig();
+	tamaguiLoader.loadTamaguiBuildConfig().catch(() => {});
 	const ensureLoaded = async () => {
 		const promise = tamaguiLoader.getLoadPromise();
 		if (promise) await promise;
@@ -482,6 +507,7 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 	const transformedModuleIds = /* @__PURE__ */ new Set();
 	const compilerHotUpdateSignatures = /* @__PURE__ */ new Map();
 	const compilerHotReloadSignatures = /* @__PURE__ */ new Map();
+	let watchedDependencies = /* @__PURE__ */ new Set();
 	let config;
 	let server;
 	let zero = null;
@@ -505,6 +531,7 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 	function isNotClient(environment) {
 		return environment?.name && environment.name !== "client";
 	}
+	const isDevEnvironment = (environment) => environment.mode === "dev";
 	function isNative(environment) {
 		return environment?.name && (environment.name === "ios" || environment.name === "android");
 	}
@@ -527,11 +554,13 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 			{
 				name: "tamagui",
 				enforce: "pre",
+				resolveId(source) {
+					if (disableResolveConfig || tamaguiOptionsIn.platform === "native" || isNative(this.environment)) return;
+					return resolveSvgWeb(source);
+				},
 				configureServer(_server) {
 					server = _server;
-					const evaluationEnvironment = server.environments[TAMAGUI_EVALUATION_ENVIRONMENT];
-					if (!isRunnableDevEnvironment(evaluationEnvironment)) throw new Error(`The ${TAMAGUI_EVALUATION_ENVIRONMENT} Vite environment must support ModuleRunner evaluation`);
-					tamaguiLoader.setEnvironment(evaluationEnvironment);
+					watchedDependencies = /* @__PURE__ */ new Set();
 				},
 				async buildEnd() {
 					await releaseBuildEnvironment(this.environment);
@@ -560,7 +589,7 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 							[TAMAGUI_EVALUATION_ENVIRONMENT]: getEvaluationEnvironmentOptions(resolvedRoot, userConfig.environments?.[TAMAGUI_EVALUATION_ENVIRONMENT]?.resolve?.noExternal)
 						},
 						define: {
-							"process.env.TAMAGUI_RUNTIME": JSON.stringify("full"),
+							"process.env.TAMAGUI_RUNTIME": JSON.stringify(zeroIslandBuild ? "island" : "full"),
 							_frameTimestamp: void 0,
 							_WORKLET: false,
 							__DEV__: `${env.mode === "development"}`,
@@ -575,7 +604,6 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 							alias: { ...options.platform !== "native" && {
 								"react-native/Libraries/Renderer/shims/ReactFabric": resolve("@tamagui/proxy-worm"),
 								"react-native/Libraries/Utilities/codegenNativeComponent": resolve("@tamagui/proxy-worm"),
-								"react-native-svg": resolve("@tamagui/react-native-svg"),
 								...!useReactNativeWebLite && { "react-native": resolve("react-native-web") }
 							} }
 						}
@@ -614,6 +642,11 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 					await ensureLoaded();
 					userConf.optimizeDeps ||= {};
 					userConf.optimizeDeps.include ||= [];
+					if (!disableResolveConfig && tamaguiOptionsIn.platform !== "native") {
+						userConf.optimizeDeps.rolldownOptions ||= {};
+						const existingPlugins = userConf.optimizeDeps.rolldownOptions.plugins;
+						userConf.optimizeDeps.rolldownOptions.plugins = [svgOptimizerPlugin, ...Array.isArray(existingPlugins) ? existingPlugins : existingPlugins ? [existingPlugins] : []];
+					}
 					userConf.optimizeDeps.include.push("inline-style-prefixer");
 					addIfInstalled(userConf, userConf.root, ["@react-native/normalize-color"]);
 					addIfInstalled(userConf, userConf.root, [
@@ -647,7 +680,13 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 				},
 				async buildStart() {
 					const buildConfig = this.environment.getTopLevelConfig();
-					if (buildConfig.command !== "build") return;
+					if (buildConfig.command !== "build") {
+						if (this.environment.name === "client") {
+							const dependencies = await tamaguiLoader.ensureFullConfigLoaded();
+							for (const dependency of dependencies) this.addWatchFile(dependency);
+						}
+						return;
+					}
 					const pendingCleanup = buildCleanupPromise;
 					if (pendingCleanup) await pendingCleanup;
 					const buildEnvironment = this.environment;
@@ -678,13 +717,18 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 						if (!tamaguiLoader.isEvaluationDependency(options.file)) {
 							if (this.environment.name !== "client") return;
 							const compilerFrontend = getCompilerFrontend(this.environment);
-							const source = options.type === "delete" ? null : await options.read();
+							let source = null;
+							if (options.type !== "delete") try {
+								source = await options.read();
+							} catch (error) {
+								if (!(error instanceof Error && "code" in error && error.code === "ENOENT")) throw error;
+							}
 							const affectedModules = /* @__PURE__ */ new Set();
 							const compilerHmrRoots = new Set(compilerFrontend.dependentsOf(options.file));
 							if (compilerHmrRoots.size || compilerFrontend.has(options.file)) compilerHmrRoots.add(options.file);
 							if (compilerFrontend.has(options.file) || compilerHmrRoots.size > 0) {
 								if (!(await ensureLoaded())?.disable) {
-									const invalidatedIds = options.type === "delete" ? (await compilerFrontend.remove(options.file)).invalidatedIds : await compilerFrontend.update({
+									const invalidatedIds = source === null ? (await compilerFrontend.remove(options.file)).invalidatedIds : await compilerFrontend.update({
 										id: options.file,
 										source,
 										root: config.root,
@@ -718,7 +762,10 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 										}
 										const cssId = getAbsoluteVirtualFileId(`${invalidatedId}${virtualExt}`);
 										const cssModule = this.environment.moduleGraph.getModuleById(cssId);
-										if (cssModule) this.environment.moduleGraph.invalidateModule(cssModule);
+										if (cssModule) {
+											this.environment.moduleGraph.invalidateModule(cssModule);
+											affectedModules.add(cssModule);
+										}
 									}
 								}
 							}
@@ -737,6 +784,11 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 							tamaguiLoader.invalidate(options.file);
 							invalidateCompilerModules();
 						}
+						const unwatched = (await tamaguiLoader.ensureFullConfigLoaded()).filter((file) => !watchedDependencies.has(file));
+						if (unwatched.length) {
+							for (const file of unwatched) watchedDependencies.add(file);
+							server.watcher.add(unwatched);
+						}
 						if (this.environment.name === "client" && compilerHotReloadSignatures.get(options.file) !== signature) {
 							compilerHotReloadSignatures.set(options.file, signature);
 							this.environment.hot.send({
@@ -770,6 +822,11 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 					if (isNotClient(this.environment)) return;
 					if (!shouldExtract) return;
 					const [validId] = id.split("?");
+					if (!validId.endsWith(virtualExt)) return;
+					if (isDevEnvironment(this.environment)) {
+						const importer = this.environment.moduleGraph.getModuleById(validId.slice(0, -virtualExt.length));
+						if (importer && importer.transformResult == null) await this.environment.transformRequest(importer.url);
+					}
 					return cssMap.get(validId);
 				}
 			},
@@ -866,7 +923,7 @@ function createTamaguiPlugins({ disableResolveConfig, wrapExtractedCSS = (css) =
 							}
 							if (zero.isEnforcing) {
 								Static.mergeIslandBridges(zero.bridges, zeroResult.bridges);
-								const moduleCSS = [wrapExtractedCSS(result.plan.css), ...[...zeroResult.bridgeCSS.values()]].filter(Boolean).join("\n");
+								const moduleCSS = [wrapExtractedCSS(result.plan.css), ...zeroResult.bridgeCSS.values()].filter(Boolean).join("\n");
 								if (config.command !== "build") {
 									let cssImport2 = "";
 									if (moduleCSS) {