index.ts — astro Source File

Source Code

import { fileURLToPath } from 'node:url';
import { preact, type PreactPluginOptions as VitePreactPluginOptions } from '@preact/preset-vite';
import type { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';
import type { EnvironmentOptions, Plugin } from 'vite';

const babelCwd = new URL('../', import.meta.url);

function getRenderer(development: boolean): AstroRenderer {
	return {
		name: '@astrojs/preact',
		clientEntrypoint: development ? '@astrojs/preact/client-dev.js' : '@astrojs/preact/client.js',
		serverEntrypoint: '@astrojs/preact/server.js',
	};
}

export const getContainerRenderer = (): AstroRenderer => getRenderer(false);

export interface Options extends Pick<VitePreactPluginOptions, 'include' | 'exclude'> {
	compat?: boolean;
	devtools?: boolean;
}

export default function ({ include, exclude, compat, devtools }: Options = {}): AstroIntegration {
	return {
		name: '@astrojs/preact',
		hooks: {
			'astro:config:setup': ({ addRenderer, updateConfig, command, injectScript }) => {
				const preactPlugin = preact({
					reactAliasesEnabled: compat ?? false,
					include,
					exclude,
					babel: {
						cwd: fileURLToPath(babelCwd),
					},
				});

				const viteConfig: ViteUserConfig = {
					optimizeDeps: {
						// Ideally would be environment config, but
						// putting it there does not result in it being optimized
						include: ['@astrojs/preact/server.js'],
					},
				};

				viteConfig.plugins = [preactPlugin, configEnvironmentPlugin(compat)];

				addRenderer(getRenderer(command === 'dev'));
				updateConfig({
					vite: viteConfig,
				});

				if (command === 'dev' && devtools) {
					injectScript('page', 'import "preact/debug";');
				}
			},
			'astro:config:done': ({ logger, config }) => {
				const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js'];
				const enabledKnownJsxRenderers = config.integrations.filter((renderer) =>
					knownJsxRenderers.includes(renderer.name),
				);

				if (enabledKnownJsxRenderers.length > 1 && !include && !exclude) {
					logger.warn(
						'More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/preact/#combining-multiple-jsx-frameworks for more information.',
					);
				}
			},
		},
	};
}

function configEnvironmentPlugin(compat: boolean | undefined): Plugin {
	return {
		name: '@astrojs/preact:environment',
		configEnvironment(environmentName, options) {
			const environmentOptions: EnvironmentOptions = {
				optimizeDeps: {},
				resolve: {},
			};

			if (environmentName === 'client') {
				environmentOptions.optimizeDeps!.include = [
					'@astrojs/preact/client.js',
					'preact',
					'preact/jsx-runtime',
				];
			}

			if (compat) {
				environmentOptions.resolve = {
					dedupe: ['preact/compat', 'preact'],
				};
				if (environmentName === 'client') {
					environmentOptions.optimizeDeps!.include!.push(
						'preact/compat',
						'preact/test-utils',
						'preact/compat/jsx-runtime',
					);
				}

				if (
					!options.resolve?.noExternal &&
					(environmentName === 'ssr' || environmentName === 'prerender')
				) {
					// noExternal React entrypoints to be bundled, resolved, and aliased by Vite
					environmentOptions.resolve!.noExternal = [
						'react',
						'react-dom',
						'react-dom/test-utils',
						'react/jsx-runtime',
					];
				}
			}

			return environmentOptions;
		},
	};
}