inits dev toolbar app

packages/cloudflare/package.json

@@ -20,11 +20,14 @@
     "./entrypoints/server.directory.js": "./dist/entrypoints/server.directory.js",
     "./image-service": "./dist/entrypoints/image-service.js",
     "./image-endpoint": "./dist/entrypoints/image-endpoint.js",
+    "./dev-toolbar-app": "./dist/entrypoints/dev-toolbar-app.js",
+    "./dev-toolbar-app/tabs.astro": "./dist/dev-toolbar-app/tabs.astro",
+    "./dev-toolbar-app/test.astro": "./dist/dev-toolbar-app/test.astro",
     "./package.json": "./package.json"
   },
   "files": ["dist"],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && copyfiles -u 1 src/dev-toolbar-app/*.astro dist/",
     "test": "astro-scripts test \"test/**/*.test.js\""
   },
   "dependencies": {
@@ -45,7 +48,9 @@
     "astro": "^4.5.8",
     "cheerio": "1.0.0-rc.12",
     "@astrojs/test-utils": "workspace:*",
-    "astro-scripts": "workspace:*"
+    "astro-scripts": "workspace:*",
+    "rimraf": "^5.0.5",
+    "copyfiles": "^2.4.1"
   },
   "publishConfig": {
     "provenance": true

packages/cloudflare/src/dev-toolbar-app/tabs.astro

@@ -0,0 +1,20 @@
+---
+export const partial = true;
+---
+
+<div>
+	<button onclick="fetchHome(this)">Env</button>
+	<button>D1</button>
+</div>
+
+<script is:inline>
+	var fetchHome = function (element) {
+		console.log(element.getRootNode());
+		fetch('/_dev-toolbar-app/cloudflare/home')
+			.then((res) => res.text())
+			.then((html) => {
+				const el = document.createRange().createContextualFragment(html);
+				element.getRootNode().querySelector('#target').replaceChildren(el);
+			});
+	};
+</script>

packages/cloudflare/src/dev-toolbar-app/test.astro

@@ -0,0 +1,15 @@
+---
+export const partial = true;
+
+const { env } = Astro.locals.runtime;
+---
+
+<pre onclick="me(this)">
+  {JSON.stringify(env, null, 2)}
+</pre>
+
+<script is:inline>
+	var me = function (element) {
+		console.log('me');
+	};
+</script>

packages/cloudflare/src/entrypoints/dev-toolbar-app.ts

@@ -0,0 +1,42 @@
+import type { DevToolbarApp } from 'astro';
+
+const plugin: DevToolbarApp = {
+	id: 'cloudflare-app',
+	name: 'Cloudflare DevToolbarApp',
+	icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M10.715 14.32H5.442l-.64-1.203L13.673 0l1.397.579-1.752 9.112h5.24l.648 1.192L10.719 24l-1.412-.54ZM4.091 5.448a.579.579 0 1 1 0-1.157.579.579 0 0 1 0 1.157m1.543 0a.579.579 0 1 1 0-1.157.579.579 0 0 1 0 1.157m1.544 0a.579.579 0 1 1 0-1.157.579.579 0 0 1 0 1.157m8.657-2.7h5.424l.772.771v16.975l-.772.772h-7.392l.374-.579h6.779l.432-.432V3.758l-.432-.432h-4.676l-.552 2.85h-.59l.529-2.877.108-.552ZM2.74 21.265l-.772-.772V3.518l.772-.771h7.677l-.386.579H2.98l-.432.432v16.496l.432.432h5.586l-.092.579zm1.157-1.93h3.28l-.116.58h-3.55l-.192-.193v-3.473l.578 1.158zm13.117 0 .579.58H14.7l.385-.58z"/></svg>',
+	init(canvas, eventTarget) {
+		const page = `
+			<script>
+				var loadTabs = function (element) {
+					console.log(this);
+					console.log(element);
+					fetch('/_dev-toolbar-app/cloudflare/tabs')
+						.then((res) => res.text())
+						.then((html) => {
+							const el = document.createRange().createContextualFragment(html);
+							element.getRootNode().querySelector('#tabs').replaceChildren(el);
+						});
+				};
+			</script>
+			<div id="tabs"></div>
+			<div id="target"></div>
+		`;
+
+		const pageEl = document.createRange().createContextualFragment(page);
+		const cfWindow = document.createElement('astro-dev-toolbar-window');
+		cfWindow.append(pageEl);
+
+		canvas.appendChild(cfWindow);
+
+		eventTarget.addEventListener('app-toggled', (event) => {
+			// @ts-ignore
+			if (event.detail.state === true) {
+				console.log('The app is now enabled!');
+				// @ts-ignore
+				loadTabs(cfWindow);
+			}
+		});
+	},
+};
+
+export default plugin;

packages/cloudflare/src/index.ts

@@ -63,7 +63,14 @@ export default function createIntegration(args?: Options): AstroIntegration {
 	return {
 		name: '@astrojs/cloudflare',
 		hooks: {
-			'astro:config:setup': ({ command, config, updateConfig, logger }) => {
+			'astro:config:setup': ({
+				command,
+				config,
+				updateConfig,
+				logger,
+				addDevToolbarApp,
+				injectRoute,
+			}) => {
 				updateConfig({
 					build: {
 						client: new URL(`.${config.base}/`, config.outDir),
@@ -81,6 +88,19 @@ export default function createIntegration(args?: Options): AstroIntegration {
 					},
 					image: setImageConfig(args?.imageService ?? 'DEFAULT', config.image, command, logger),
 				});
+
+				// MARK: Dev Toolbar App
+				if (command === 'dev') {
+					addDevToolbarApp('@astrojs/cloudflare/dev-toolbar-app');
+					injectRoute({
+						pattern: '/_dev-toolbar-app/cloudflare/tabs',
+						entrypoint: '@astrojs/cloudflare/dev-toolbar-app/tabs.astro',
+					});
+					injectRoute({
+						pattern: '/_dev-toolbar-app/cloudflare/home',
+						entrypoint: '@astrojs/cloudflare/dev-toolbar-app/test.astro',
+					});
+				}
 			},
 			'astro:config:done': ({ setAdapter, config }) => {
 				_config = config;