fix(dev): inject of scripts with non-runnable pipelines (#15811)

Co-authored-by: astrobot-houston <fred+astrobot@astro.build>

Author: ematipico

.changeset/hip-wings-tie.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+---
+
+Fixes integration-injected scripts (e.g. Alpine.js via `injectScript()`) not being loaded in the dev server when using non-runnable environment adapters like `@astrojs/cloudflare`.
+

packages/astro/src/vite-plugin-routes/index.ts

@@ -16,6 +16,7 @@ import { createDefaultAstroMetadata } from '../vite-plugin-astro/metadata.js';
 import type { PluginMetadata } from '../vite-plugin-astro/types.js';
 import { ASTRO_VITE_ENVIRONMENT_NAMES } from '../core/constants.js';
 import { isAstroServerEnvironment } from '../environments.js';
+import { PAGE_SCRIPT_ID } from '../vite-plugin-scripts/index.js';
 
 type Payload = {
 	settings: AstroSettings;
@@ -30,6 +31,32 @@ const ASTRO_ROUTES_MODULE_ID_RESOLVED = '\0' + ASTRO_ROUTES_MODULE_ID;
 
 const KNOWN_FILE_EXTENSIONS = ['.astro', '.js', '.ts'];
 
+/**
+ * In dev mode, populate route scripts with integration-injected scripts from settings.
+ * This ensures non-runnable environments (e.g. Cloudflare's workerd) can access
+ * scripts injected via `injectScript()` during `astro:config:setup`.
+ */
+export function getDevRouteScripts(
+	command: 'dev' | 'build',
+	scripts: AstroSettings['scripts'],
+): SerializedRouteInfo['scripts'] {
+	if (command !== 'dev') return [];
+	const result: SerializedRouteInfo['scripts'] = [];
+	const hasPageScripts = scripts.some((s) => s.stage === 'page');
+	if (hasPageScripts) {
+		result.push({
+			type: 'external',
+			value: `/@id/${PAGE_SCRIPT_ID}`,
+		});
+	}
+	for (const script of scripts) {
+		if (script.stage === 'head-inline') {
+			result.push({ stage: script.stage, children: script.content });
+		}
+	}
+	return result;
+}
+
 export default async function astroPluginRoutes({
 	settings,
 	logger,
@@ -44,7 +71,7 @@ export default async function astroPluginRoutes({
 			return {
 				file: '',
 				links: [],
-				scripts: [],
+				scripts: getDevRouteScripts(command, settings.scripts),
 				styles: [],
 				routeData: serializeRouteData(r, settings.config.trailingSlash),
 			};
@@ -77,7 +104,7 @@ export default async function astroPluginRoutes({
 				return {
 					file: fileURLToPath(file),
 					links: [],
-					scripts: [],
+					scripts: getDevRouteScripts(command, settings.scripts),
 					styles: [],
 					routeData: serializeRouteData(r, settings.config.trailingSlash),
 				};

packages/astro/test/dev-route-scripts.test.js

@@ -0,0 +1,102 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { getDevRouteScripts } from '../dist/vite-plugin-routes/index.js';
+
+describe('getDevRouteScripts', () => {
+	it('returns empty array when command is build', () => {
+		const scripts = [{ stage: 'page', content: 'console.log("page")' }];
+		const result = getDevRouteScripts('build', scripts);
+		assert.deepEqual(result, []);
+	});
+
+	it('returns empty array when no scripts are provided in dev mode', () => {
+		const result = getDevRouteScripts('dev', []);
+		assert.deepEqual(result, []);
+	});
+
+	it('includes external page script entry when page-stage scripts exist', () => {
+		const scripts = [{ stage: 'page', content: 'import "alpinejs"' }];
+		const result = getDevRouteScripts('dev', scripts);
+
+		assert.equal(result.length, 1);
+		assert.deepEqual(result[0], {
+			type: 'external',
+			value: '/@id/astro:scripts/page.js',
+		});
+	});
+
+	it('collapses multiple page scripts into a single external entry', () => {
+		const scripts = [
+			{ stage: 'page', content: 'import "alpinejs"' },
+			{ stage: 'page', content: 'import "other"' },
+		];
+		const result = getDevRouteScripts('dev', scripts);
+
+		const pageEntries = result.filter((s) => 'type' in s && s.type === 'external');
+		assert.equal(pageEntries.length, 1);
+	});
+
+	it('includes head-inline scripts with their content', () => {
+		const scripts = [{ stage: 'head-inline', content: 'console.log("inline")' }];
+		const result = getDevRouteScripts('dev', scripts);
+
+		assert.equal(result.length, 1);
+		assert.deepEqual(result[0], {
+			stage: 'head-inline',
+			children: 'console.log("inline")',
+		});
+	});
+
+	it('includes both page and head-inline scripts together', () => {
+		const scripts = [
+			{ stage: 'page', content: 'import "alpinejs"' },
+			{ stage: 'head-inline', content: 'console.log("inline1")' },
+			{ stage: 'head-inline', content: 'console.log("inline2")' },
+		];
+		const result = getDevRouteScripts('dev', scripts);
+
+		assert.equal(result.length, 3);
+		assert.deepEqual(result[0], {
+			type: 'external',
+			value: '/@id/astro:scripts/page.js',
+		});
+		assert.deepEqual(result[1], {
+			stage: 'head-inline',
+			children: 'console.log("inline1")',
+		});
+		assert.deepEqual(result[2], {
+			stage: 'head-inline',
+			children: 'console.log("inline2")',
+		});
+	});
+
+	it('ignores before-hydration and page-ssr stage scripts', () => {
+		const scripts = [
+			{ stage: 'before-hydration', content: 'console.log("hydration")' },
+			{ stage: 'page-ssr', content: 'console.log("ssr")' },
+		];
+		const result = getDevRouteScripts('dev', scripts);
+
+		assert.deepEqual(result, []);
+	});
+
+	it('ignores non-relevant stages while still collecting page and head-inline', () => {
+		const scripts = [
+			{ stage: 'before-hydration', content: 'console.log("hydration")' },
+			{ stage: 'page', content: 'import "alpinejs"' },
+			{ stage: 'page-ssr', content: 'console.log("ssr")' },
+			{ stage: 'head-inline', content: 'window.__config = {}' },
+		];
+		const result = getDevRouteScripts('dev', scripts);
+
+		assert.equal(result.length, 2);
+		assert.deepEqual(result[0], {
+			type: 'external',
+			value: '/@id/astro:scripts/page.js',
+		});
+		assert.deepEqual(result[1], {
+			stage: 'head-inline',
+			children: 'window.__config = {}',
+		});
+	});
+});