feat!: remove addDevtoolbarFrameworkApp utility (#100)

.changeset/calm-months-return.md

@@ -0,0 +1,5 @@
+---
+"astro-integration-kit": minor
+---
+
+Removes the `addDevtoolbarFrameworkApp` utility in favor of `defineToolbarApp` added in Astro 4.7.0

.changeset/config.json

@@ -7,5 +7,5 @@
 	"access": "public",
 	"baseBranch": "main",
 	"updateInternalDependencies": "patch",
-	"ignore": ["playground", "docs", "test-vue-app"]
+	"ignore": ["playground", "docs"]
 }

docs/astro.config.ts

@@ -132,6 +132,10 @@ export default defineConfig({
 						{
 							label: "addDevToolbarFrameworkApp",
 							link: "/utilities/add-devtoolbar-framework-app/",
+							badge: badge("removed"),
+							attrs: {
+								style: "opacity:0.5",
+							},
 						},
 						{
 							label: "addDts",

docs/src/content/docs/getting-started/upgrade-guide.mdx

@@ -7,6 +7,17 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 Features get added and removed, and breaking changes are introduced! This documents how to migrate.
 
+## `0.12.0`
+
+---
+
+### `addDevToolbarFrameworkApp` removed
+
+The `addDevToolbarFrameworkApp` has been removed in favour of the Astro `defineToolbarApp` utility
+added in Astro v4.7.0.
+
+To migrate your Dev Toolbar App to the new Astro utility, please see [their documentation here](https://docs.astro.build/en/recipes/making-toolbar-apps/#building-apps-with-a-ui-framework).
+
 ## `0.11.0`
 
 ---

docs/src/content/docs/utilities/add-devtoolbar-framework-app.mdx

@@ -4,6 +4,16 @@ description:  Allows you to register a framework component as a Dev Toolbar App.
 ---
 import { Tabs, TabItem, LinkCard, Aside } from '@astrojs/starlight/components';
 
+:::danger
+Removed in v0.12.0.
+
+`addDevToolbarFrameworkApp` has been removed in favour of using the updated Astro Dev Toolbar API,
+specifically looking at the `defineToolbarApp` helper.
+
+See the [Astro v4.7.0 blog post](https://astro.build/blog/astro-470/) for more info
+or [learn how to create Dev Toolbar Apps with a framework from the Astro docs here](https://docs.astro.build/en/recipes/making-toolbar-apps/#building-apps-with-a-ui-framework).
+:::
+
 `addDevToolbarFrameworkApp` allows you to register a framework component as a Dev Toolbar App!
 You can now use a React, Preact, Solid, Vue or Svelte component instead of manipulating the DOM imperatively!
 

package/package.json

@@ -49,39 +49,11 @@
 	"type": "module",
 	"peerDependencies": {
 		"@astrojs/db": "^0.9.0",
-		"@vitejs/plugin-react": "^4.2.1",
-		"astro": "^4.4.1",
-		"preact": "^10.19.4",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"solid-js": "^1.8.15",
-		"svelte": "^4.2.11",
-		"vue": "^3.4.19"
+		"astro": "^4.4.1"
 	},
 	"peerDependenciesMeta": {
 		"@astrojs/db": {
 			"optional": true
-		},
-		"@vitejs/plugin-react": {
-			"optional": true
-		},
-		"preact": {
-			"optional": true
-		},
-		"react": {
-			"optional": true
-		},
-		"react-dom": {
-			"optional": true
-		},
-		"solid-js": {
-			"optional": true
-		},
-		"svelte": {
-			"optional": true
-		},
-		"vue": {
-			"optional": true
 		}
 	},
 	"devDependencies": {

package/src/utilities/index.ts

@@ -5,5 +5,4 @@ export { hasIntegration } from "./has-integration.js";
 export { hasVitePlugin } from "./has-vite-plugin.js";
 export { injectDevRoute } from "./inject-dev-route.js";
 export { watchDirectory } from "./watch-directory.js";
-export { addDevToolbarFrameworkApp } from "./add-devtoolbar-framework-app.js";
 export { addIntegration } from "./add-integration.js";

package/tsup.config.ts

@@ -13,7 +13,7 @@ export default defineConfig((options) => {
 		clean: true,
 		splitting: false,
 		minify: !dev,
-		external: [...Object.keys(peerDependencies), "@@COMPONENT_SRC@@"],
+		external: [...Object.keys(peerDependencies)],
 		tsconfig: "tsconfig.build.json",
 	};
 });