integrations api draft

1-draft-proposal.js

export default function createPlugin(options) {
	return {
		// Hook into different events:
		name: 'my-plugin-name',
		hooks: {
			'config:setup': ({ config, command, injectScript, injectHtml }) => {},
			'config:done': ({ config, command, injectScript, injectHtml }) => {},
			'serve:setup': ({ server }) => {},
			'serve:start': ({ port }) => {},
			'serve:done': ({}) => {},
			'build:start': ({}) => {},
			'build:done': ({ pages }) => {},
		},
		// Provide a Vite plugin as well, if you wish.
		// Useful for setting up `load`, `transform`, etc.
		vite: [
			{
				/* ... */
			},
		],
	};
}

// EXAMPLE: @astrojs/turbolinks
function createPlugin(options) {
	return {
		name: '@astrojs/turbolinks',
		hooks: {
			'config:setup': ({ injectScript }) => {
				injectScript('page', `import Turbolinks from "turbolinks"; Turbolinks.start());`);
			},
		},
	};
}

// EXAMPLE: @astrojs/lit
function createPlugin(options) {
	return {
		name: '@astrojs/lit',
		hooks: {
			'config:setup': ({ config, injectScript }) => {
				injectScript('beforeHydration', '@astrojs/lit/client-shim.js');
				injectScript('beforeHydration', '@astrojs/lit/hydration-support.js');
				return {
					optimizeDeps: {
						/* ... */
					},
					ssr: {
						/* ... */
					},
					renderers: [
						{
							/* ... */
						},
					],
				};
			},
		},
	};
}

// EXAMPLE: @astrojs/tailwind
function createPlugin(options) {
	return {
		name: '@astrojs/tailwind',
		hooks: {
			'config:setup': ({ config, injectScript }) => {
				injectScript('head', '@astrojs/tailwind/base.css');
				// Not shown:
				// Add PostCSS Plugin to Astro. Needs Astro-managed PostCSS config.
			},
		},
	};
}

// EXAMPLE: @astrojs/partytown
function createPlugin(options) {
	let config, partytownSnippetHtml;
	const partytownEntrypoint = resolve('@builder.io/partytown/package.json');
	const partytownLibDirectory = path.resolve(partytownEntrypoint, '../lib');
	return {
		name: '@astrojs/partytown',
		hooks: {
			'config:done': ({ config: _config, command, injectHtml }) => {
				config = _config;
				partytownSnippetHtml = partytownSnippet({ debug: command === 'dev' });
				injectHtml('head', partytownSnippetHtml);
			},
			'serve:setup': ({ server }) => {
				server.middlewares.use(sirv(partytownLibDirectory, { mount: '/~partytown' }));
			},
			'build:done': ({}) => {
				await copyLibFiles(path.join(config.outDir, '~partytown'), { debugDir: false });
			},
		},
	};
}

// EXAMPLE: @astrojs/sitemap
function createPlugin(options) {
	return {
		name: '@astrojs/sitemap',
		hooks: {
			'build:done': ({ pages }) => {
				const sitemap = await generateSitemap(pages, options);
				fs.writeFileSync(path.join(config.outDir, 'sitemap.xml'), sitemap);
			},
		},
	};
}

2-alternative-proposal-1.js

// Alternative: Maybe a nicer API? But, also maybe hard to manage/cordinate since Vite owns running its own plugins,
// that would mean both Astro and Vite would have to coordinate "running" this plugin.

export default function (options) {
	return {
		// Astro-specific stuff, hooks into Astro events:
		astro: {
			'config:setup': ({config, command, injectScript, injectHtml}) => {},
			'config:done': ({config, command, injectScript, injectHtml}) => {},
			'serve:setup': ({server}) => {},
			'serve:start': ({port}) => {},
			'serve:done': ({}) => {},
			'build:start': ({}) => {},
			'build:done': ({pages}) => {},
		},
    // Vite-specific stuff:
    resolveId() {},
    load() {},
	};
}