feat(env): client/public variables

packages/astro/config.d.ts

@@ -3,6 +3,7 @@ type ViteUserConfigFn = import('vite').UserConfigFn;
 type AstroUserConfig = import('./dist/@types/astro.js').AstroUserConfig;
 type ImageServiceConfig = import('./dist/@types/astro.js').ImageServiceConfig;
 type SharpImageServiceConfig = import('./dist/assets/services/sharp.js').SharpImageServiceConfig;
+type EnvField = typeof import('./dist/env/config.js').envField;
 
 /**
  * See the full Astro Configuration API Documentation
@@ -33,3 +34,8 @@ export function squooshImageService(): ImageServiceConfig;
  * See: https://docs.astro.build/en/guides/images/#configure-no-op-passthrough-service
  */
 export function passthroughImageService(): ImageServiceConfig;
+
+/**
+ * TODO:
+ */
+export const envField: EnvField;

packages/astro/config.mjs

@@ -1,4 +1,5 @@
 export { defineConfig, getViteConfig } from './dist/config/index.js';
+export { envField } from './dist/env/config.js';
 
 export function sharpImageService(config = {}) {
 	return {

packages/astro/src/@types/astro.ts

@@ -40,7 +40,7 @@ import type {
 } from '../transitions/events.js';
 import type { DeepPartial, OmitIndexSignature, Simplify } from '../type-utils.js';
 import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
-import type { EnvSchema } from '../env/schema.js' 
+import type { EnvSchema } from '../env/schema.js';
 
 export { type AstroIntegrationLogger };
 
@@ -1930,7 +1930,6 @@ export interface AstroUserConfig {
 		 * TODO:
 		 */
 		env?: {
-
 			/**
 			 * @docs
 			 * @name experimental.env.schema
@@ -1941,8 +1940,8 @@ export interface AstroUserConfig {
 			 *
 			 * TODO:
 			 */
-			schema?: EnvSchema
-		}
+			schema?: EnvSchema;
+		};
 	};
 }
 
@@ -2132,6 +2131,7 @@ export interface AstroSettings {
 	tsConfigPath: string | undefined;
 	watchFiles: string[];
 	timer: AstroTimer;
+	dotAstroDir: URL;
 }
 
 export type AsyncRendererComponentFn<U> = (

packages/astro/src/config/index.ts

@@ -1,7 +1,6 @@
 import type { UserConfig } from 'vite';
 import type { AstroUserConfig } from '../@types/astro.js';
 import { Logger } from '../core/logger/core.js';
-export { envField } from "../env/config.js";
 
 export function defineConfig(config: AstroUserConfig) {
 	return config;

packages/astro/src/content/index.ts

@@ -5,7 +5,6 @@ export { createContentTypesGenerator } from './types-generator.js';
 export {
 	contentObservable,
 	getContentPaths,
-	getDotAstroTypeReference,
 	hasAssetPropagationFlag,
 } from './utils.js';
 export { astroContentAssetPropagationPlugin } from './vite-plugin-content-assets.js';

packages/astro/src/content/types-generator.ts

@@ -382,7 +382,7 @@ async function writeContentFiles({
 	let contentTypesStr = '';
 	let dataTypesStr = '';
 
-	const collectionSchemasDir = new URL('./collections/', contentPaths.cacheDir);
+	const collectionSchemasDir = new URL('./collections/', settings.dotAstroDir);
 	if (
 		settings.config.experimental.contentCollectionJsonSchema &&
 		!fs.existsSync(collectionSchemasDir)
@@ -490,12 +490,12 @@ async function writeContentFiles({
 		}
 	}
 
-	if (!fs.existsSync(contentPaths.cacheDir)) {
-		fs.mkdirSync(contentPaths.cacheDir, { recursive: true });
+	if (!fs.existsSync(settings.dotAstroDir)) {
+		fs.mkdirSync(settings.dotAstroDir, { recursive: true });
 	}
 
 	const configPathRelativeToCacheDir = normalizeConfigPath(
-		contentPaths.cacheDir.pathname,
+		settings.dotAstroDir.pathname,
 		contentPaths.config.url.pathname
 	);
 
@@ -512,7 +512,7 @@ async function writeContentFiles({
 	);
 
 	await fs.promises.writeFile(
-		new URL(CONTENT_TYPES_FILE, contentPaths.cacheDir),
+		new URL(CONTENT_TYPES_FILE, settings.dotAstroDir),
 		typeTemplateContent
 	);
 }

packages/astro/src/content/utils.ts

@@ -40,15 +40,6 @@ export const collectionConfigParser = z.union([
 	}),
 ]);
 
-export function getDotAstroTypeReference({ root, srcDir }: { root: URL; srcDir: URL }) {
-	const { cacheDir } = getContentPaths({ root, srcDir });
-	const contentTypesRelativeToSrcDir = normalizePath(
-		path.relative(fileURLToPath(srcDir), fileURLToPath(new URL(CONTENT_TYPES_FILE, cacheDir)))
-	);
-
-	return `/// <reference path=${JSON.stringify(contentTypesRelativeToSrcDir)} />`;
-}
-
 export const contentConfigParser = z.object({
 	collections: z.record(collectionConfigParser),
 });
@@ -430,7 +421,6 @@ export function contentObservable(initialCtx: ContentCtx): ContentObservable {
 export type ContentPaths = {
 	contentDir: URL;
 	assetsDir: URL;
-	cacheDir: URL;
 	typesTemplate: URL;
 	virtualModTemplate: URL;
 	config: {
@@ -440,13 +430,12 @@ export type ContentPaths = {
 };
 
 export function getContentPaths(
-	{ srcDir, root }: Pick<AstroConfig, 'root' | 'srcDir'>,
+	{ srcDir }: Pick<AstroConfig, 'root' | 'srcDir'>,
 	fs: typeof fsMod = fsMod
 ): ContentPaths {
 	const configStats = search(fs, srcDir);
 	const pkgBase = new URL('../../', import.meta.url);
 	return {
-		cacheDir: new URL('.astro/', root),
 		contentDir: new URL('./content/', srcDir),
 		assetsDir: new URL('./assets/', srcDir),
 		typesTemplate: new URL('content-types.template.d.ts', pkgBase),

packages/astro/src/core/config/settings.ts

@@ -104,6 +104,7 @@ export function createBaseSettings(config: AstroConfig): AstroSettings {
 		watchFiles: [],
 		devToolbarApps: [],
 		timer: new AstroTimer(),
+		dotAstroDir: new URL('.astro/', config.root),
 	};
 }
 

packages/astro/src/core/create-vite.ts

@@ -136,6 +136,7 @@ export async function createVite(
 			// the build to run very slow as the filewatcher is triggered often.
 			mode !== 'build' && vitePluginAstroServer({ settings, logger, fs }),
 			envVitePlugin({ settings }),
+			astroEnvVirtualModPlugin({ settings, logger, mode, fs }),
 			markdownVitePlugin({ settings, logger }),
 			htmlVitePlugin(),
 			mdxVitePlugin(),
@@ -156,7 +157,6 @@ export async function createVite(
 			astroDevToolbar({ settings, logger }),
 			vitePluginFileURL({}),
 			astroInternationalization({ settings }),
-			astroEnvVirtualModPlugin({ settings, logger })
 		],
 		publicDir: fileURLToPath(settings.config.publicDir),
 		root: fileURLToPath(settings.config.root),

packages/astro/src/core/errors/errors-data.ts

@@ -1156,6 +1156,18 @@ export const i18nNotEnabled = {
 	hint: 'See https://docs.astro.build/en/guides/internationalization for a guide on setting up i18n.',
 } satisfies ErrorData;
 
+/**
+ * @docs
+ * @description
+ * The failing environment variable does not match the type and constraints your defined in `experimental.env.schema`.
+ */
+export const EnvInvalidVariable = {
+	name: 'EnvInvalidVariable',
+	title: 'Invalid Environment variable',
+	message: (key: string, type: string) => `Variable "${key}" is not of type: ${type}.`,
+	hint: 'The failing environment variable does not match the type and constraints your defined in `experimental.env.schema`.',
+} satisfies ErrorData;
+
 /**
  * @docs
  * @kind heading

packages/astro/src/env/constants.ts

@@ -0,0 +1,11 @@
+function resolveVirtualModuleId<T extends string>(id: T): `\0${T}` {
+	return `\0${id}`;
+}
+
+export const VIRTUAL_CLIENT_MODULE_ID = 'astro:env/client';
+export const RESOLVED_VIRTUAL_CLIENT_MODULE_ID = resolveVirtualModuleId(VIRTUAL_CLIENT_MODULE_ID);
+export const VIRTUAL_SERVER_MODULE_ID = 'astro:env/server';
+export const RESOLVED_VIRTUAL_SERVER_MODULE_ID = resolveVirtualModuleId(VIRTUAL_SERVER_MODULE_ID);
+
+export const PUBLIC_PREFIX = 'PUBLIC_';
+export const ENV_TYPES_FILE = 'astro-env.d.ts';

packages/astro/src/env/schema.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { PUBLIC_PREFIX } from './constants.js';
 
 const StringSchema = z.object({
 	type: z.literal('string'),
@@ -33,7 +34,6 @@ const SecretServerEnvFieldMetadata = z.object({
 });
 
 const KEY_REGEX = /^[A-Z_]+$/;
-const PUBLIC_PREFIX = 'PUBLIC_';
 
 export const EnvSchema = z
 	.record(

packages/astro/src/env/validators.ts

@@ -5,17 +5,18 @@ export type ValidationResultValue = EnvFieldType['default'];
 type ValidationResult =
 	| {
 			ok: true;
+			type: string;
 			value: ValidationResultValue;
 	  }
 	| {
 			ok: false;
-			error: string;
+			type: string;
 	  };
 
-const errorMsg = (key: string, options: EnvFieldType) => {
-	const optional = options.optional ?? options.default;
-	return `Variable "${key}" is not of type: ${options.type}${optional ? '| undefined' : ''}.`;
-};
+export function getType(options: EnvFieldType) {
+	const optional = options.optional ? (options.default !== undefined ? false : true) : false;
+	return `${options.type}${optional ? ' | undefined' : ''}`;
+}
 
 type ValueValidator = (input: string | undefined) => {
 	valid: boolean;
@@ -46,7 +47,6 @@ const booleanValidator: ValueValidator = (input) => {
 };
 
 export function validateEnvVariable(
-	key: string,
 	value: string | undefined,
 	options: EnvFieldType
 ): ValidationResult {
@@ -56,11 +56,14 @@ export function validateEnvVariable(
 		boolean: booleanValidator,
 	}[options.type];
 
+	const type = getType(options);
+
 	if (options.optional || options.default !== undefined) {
 		if (value === undefined) {
 			return {
 				ok: true,
 				value: options.default,
+				type,
 			};
 		}
 	}
@@ -69,10 +72,11 @@ export function validateEnvVariable(
 		return {
 			ok: true,
 			value: parsed,
+			type,
 		};
 	}
 	return {
 		ok: false,
-		error: errorMsg(key, options),
+		type,
 	};
 }

packages/astro/src/env/vite-plugin-env-virtual-mod.ts

@@ -1,28 +1,117 @@
-import type { Plugin } from 'vite';
+import { loadEnv, type Plugin } from 'vite';
 import type { AstroSettings } from '../@types/astro.js';
 import type { Logger } from '../core/logger/core.js';
+import {
+	ENV_TYPES_FILE,
+	RESOLVED_VIRTUAL_CLIENT_MODULE_ID,
+	VIRTUAL_CLIENT_MODULE_ID,
+} from './constants.js';
+import type { EnvSchema } from './schema.js';
+import { validateEnvVariable } from './validators.js';
+import { AstroError, AstroErrorData } from '../core/errors/index.js';
+import type fsMod from 'node:fs';
+import { fileURLToPath } from 'node:url';
 
 interface AstroEnvVirtualModPluginParams {
 	settings: AstroSettings;
 	logger: Logger;
+	mode: 'dev' | 'build' | string;
+	fs: typeof fsMod;
 }
 
 export function astroEnvVirtualModPlugin({
 	settings,
 	logger,
+	mode,
+	fs,
 }: AstroEnvVirtualModPluginParams): Plugin | undefined {
 	if (!settings.config.experimental.env) {
 		return;
 	}
 
 	logger.warn('env', 'This feature is experimental. TODO:');
 
-	const { schema } = settings.config.experimental.env;
-	// TODO: client / public
+	const schema = settings.config.experimental.env.schema ?? {};
+	const loadedEnv = loadEnv(
+		mode === 'dev' ? 'development' : 'production',
+		fileURLToPath(settings.config.root),
+		''
+	);
+
+	const { clientContent, clientDts } = handleClientModule({ schema, loadedEnv });
+	handleDts({ settings, fs, content: clientDts });
+
 	// TODO: server / public
 	// TODO: server / secret
 	return {
 		name: 'astro-env-virtual-mod-plugin',
 		enforce: 'pre',
+		resolveId(id) {
+			if (id === VIRTUAL_CLIENT_MODULE_ID) {
+				return RESOLVED_VIRTUAL_CLIENT_MODULE_ID;
+			}
+		},
+		load(id) {
+			if (id === RESOLVED_VIRTUAL_CLIENT_MODULE_ID) {
+				return clientContent;
+			}
+		},
+	};
+}
+
+function handleDts({
+	content,
+	settings,
+	fs,
+}: {
+	content: string;
+	settings: AstroSettings;
+	fs: typeof fsMod;
+}) {
+	fs.mkdirSync(settings.dotAstroDir, { recursive: true });
+	fs.writeFileSync(new URL(ENV_TYPES_FILE, settings.dotAstroDir), content, 'utf-8');
+}
+
+function handleClientModule({
+	schema,
+	loadedEnv,
+}: {
+	schema: EnvSchema;
+	loadedEnv: Record<string, string>;
+}) {
+	const data: Array<{ key: string; value: any; type: string }> = [];
+
+	for (const [key, options] of Object.entries(schema)) {
+		if (options.context !== 'client') {
+			continue;
+		}
+		const variable = loadedEnv[key];
+		const result = validateEnvVariable(variable === '' ? undefined : variable, options);
+		if (!result.ok) {
+			throw new AstroError({
+				...AstroErrorData.EnvInvalidVariable,
+				message: AstroErrorData.EnvInvalidVariable.message(key, result.type),
+			});
+		}
+		data.push({ key, value: result.value, type: result.type });
+	}
+
+	const clientContent = `
+const data = ${JSON.stringify(Object.fromEntries(data.map((e) => [e.key, e.value])))};
+
+${data.map((e) => `const ${e.key} = data.${e.key};`).join('\n')}
+
+export {
+	${data.map((e) => e.key).join(',\n')}
+}
+	`;
+
+	const clientDts = `declare module "astro:env/client" {
+    ${data.map((e) => `export const ${e.key}: ${e.type};`).join('\n    ')}
+}`;
+
+	return {
+		clientContent,
+		clientDts,
 	};
 }