fix(tool-nuxt): add composables and fix types

space-plugins/nuxt-base/composables/useAppBridge.ts

@@ -261,5 +261,7 @@ export const useAppBridge = () => {
 		completed,
 		appBridgeAuth: appBridgeAuthStatus,
 		oauth: oauthStatus,
+		getSlug,
+		getParentHost,
 	};
 };

space-plugins/nuxt-base/utils/appBridge.ts

@@ -0,0 +1,3 @@
+import { useAppBridge } from '../composables/useAppBridge';
+
+export type AppBridge = ReturnType<typeof useAppBridge>;

space-plugins/nuxt-starter/index.d.ts

@@ -0,0 +1,7 @@
+declare module '#app' {
+	interface NuxtApp {
+		$appBridge: AppBridge;
+	}
+}
+
+export {};

space-plugins/nuxt-starter/layouts/default.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
 const config = useAppConfig();
-const { completed, appBridgeAuth, oauth } = useAppBridge();
+const appBridge = useAppBridge();
 const nuxtApp = useNuxtApp();
-nuxtApp.provide('appBridge', {
-	completed,
-	appBridgeAuth,
-	oauth,
-});
+nuxtApp.provide('appBridge', appBridge);
 </script>
 
 <template>
-	<slot v-if="!config.appBridge.enabled || completed" />
+	<slot v-if="!config.appBridge.enabled || appBridge.completed.value" />
 </template>

tool-plugins/nuxt-starter/app.config.ts

@@ -1,5 +1,5 @@
 export default defineAppConfig({
-	type: 'space-plugin',
+	type: 'tool-plugin',
 	appBridge: {
 		enabled: true,
 		oauth: true,

tool-plugins/nuxt-starter/composables/useAutoHeight.ts

@@ -0,0 +1,33 @@
+export function useAutoHeight() {
+	const nuxtApp = useNuxtApp();
+	let observer: MutationObserver | undefined;
+
+	onMounted(() => {
+		const observer = new MutationObserver(() => {
+			const slug = nuxtApp.$appBridge.getSlug();
+			const parentHost = nuxtApp.$appBridge.getParentHost();
+			window.parent.postMessage(
+				{
+					action: 'tool-changed',
+					tool: slug,
+					event: 'heightChange',
+					height: document.body.scrollHeight,
+				},
+				parentHost,
+			);
+		});
+
+		observer.observe(document.body, {
+			attributes: true,
+			childList: true,
+			subtree: true,
+		});
+	});
+
+	onUnmounted(() => {
+		if (observer) {
+			observer.disconnect();
+			observer = undefined;
+		}
+	});
+}

tool-plugins/nuxt-starter/composables/useStoryContext.ts

@@ -0,0 +1,38 @@
+export const useStoryContext = () => {
+	const nuxtApp = useNuxtApp();
+	const data = ref<StoryContext>();
+	const status = ref<'idle' | 'pending' | 'success'>('idle');
+
+	const listener = (event: MessageEvent<StoryContextWithAction>) => {
+		const { action, ...rest } = event.data;
+		if (action === 'get-context') {
+			data.value = rest;
+			status.value = 'success';
+		}
+	};
+
+	const refresh = () => {
+		const slug = nuxtApp.$appBridge.getSlug();
+		const parentHost = nuxtApp.$appBridge.getParentHost();
+		status.value = 'pending';
+		window.parent.postMessage(
+			{
+				action: 'tool-changed',
+				tool: slug,
+				event: 'getContext',
+			},
+			parentHost,
+		);
+	};
+
+	onMounted(() => {
+		window.addEventListener('message', listener);
+		refresh();
+	});
+
+	onUnmounted(() => {
+		window.removeEventListener('message', listener);
+	});
+
+	return { status, data, refresh };
+};

tool-plugins/nuxt-starter/index.d.ts

@@ -0,0 +1,7 @@
+declare module '#app' {
+	interface NuxtApp {
+		$appBridge: AppBridge;
+	}
+}
+
+export {};

tool-plugins/nuxt-starter/layouts/default.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 const config = useAppConfig();
-const { completed, appBridgeAuth, oauth } = useAppBridge();
+const appBridge = useAppBridge();
 const nuxtApp = useNuxtApp();
-nuxtApp.provide('appBridge', {
-	completed,
-	appBridgeAuth,
-	oauth,
-});
+nuxtApp.provide('appBridge', appBridge);
+
+useAutoHeight();
 </script>
 
 <template>
-	<slot v-if="!config.appBridge.enabled || completed" />
+	<slot v-if="!config.appBridge.enabled || appBridge.completed.value" />
 </template>

tool-plugins/nuxt-starter/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { data } = await useFetch('/api/stories');
 const alert = useAlert();
+const { data: story } = useStoryContext();
 </script>
 
 <template>
@@ -33,6 +34,11 @@ const alert = useAlert();
 					</li>
 				</ul>
 			</div>
+
+			<div>
+				<p>Story Context</p>
+				<pre>{{ story }}</pre>
+			</div>
 		</div>
 	</div>
 	<BaseAlert