feat(devtools): ship devtools as a layer

devtools/components/AddComponentDialog.vue → devtools/components/og-image/AddComponentDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AddComponentResult } from '../composables/templates'
+import type { AddComponentResult } from '../../lib/og-image/templates'
 import { computed, ref, watch } from 'vue'
-import { AddComponentDialogPromise } from '../composables/templates'
+import { AddComponentDialogPromise } from '../../lib/og-image/templates'
 
 function handleClose(_a: unknown, resolve: (value: AddComponentResult | false) => void) {
   resolve(false)

devtools/components/CreateOgImageDialog.vue → devtools/components/og-image/CreateOgImageDialog.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { GlobalDebugResponse } from '../composables/types'
+import type { GlobalDebugResponse } from '../../lib/og-image/types'
 import { computed, ref, watch } from 'vue'
 import { inject } from '#imports'
-import { GlobalDebugKey } from '../composables/keys'
-import { CreateOgImageDialogPromise } from '../composables/templates'
+import { GlobalDebugKey } from '../../lib/og-image/keys'
+import { CreateOgImageDialogPromise } from '../../lib/og-image/templates'
 
 function handleClose(_a: unknown, resolve: (value: string | false) => void) {
   resolve(false)

devtools/components/IFrameLoader.vue → devtools/components/og-image/IFrameLoader.vue

@@ -2,7 +2,7 @@
 import { useDebounceFn, useResizeObserver } from '@vueuse/core'
 import { withQuery } from 'ufo'
 import { onMounted, ref, toValue, watch } from '#imports'
-import { options } from '../util/logic'
+import { options } from '../../lib/og-image/util/logic'
 
 const props = defineProps<{
   src: string

devtools/components/ImageLoader.vue → devtools/components/og-image/ImageLoader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, toValue, watch } from '#imports'
-import { options } from '../util/logic'
+import { options } from '../../lib/og-image/util/logic'
 
 const props = defineProps<{
   src: string

devtools/components/RendererSelectModal.vue → devtools/components/og-image/RendererSelectModal.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { RendererType } from '../../src/runtime/types'
+import type { RendererType } from '../../lib/og-image/runtime-types'
 import { computed } from 'vue'
-import { useOgImage } from '../composables/og-image'
-import { RendererSelectDialogPromise } from '../composables/renderer-select'
+import { useOgImage } from '../../lib/og-image/og-image'
+import { RendererSelectDialogPromise } from '../../lib/og-image/renderer-select'
 
 const {
   globalDebug,

devtools/components/TemplateComponentPreview.vue → devtools/components/og-image/TemplateComponentPreview.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { OgImageComponent } from '../../src/runtime/types'
+import type { OgImageComponent } from '../../lib/og-image/runtime-types'
 import { withQuery } from 'ufo'
 import { computed, ref } from 'vue'
-import { devtoolsClient } from '../composables/rpc'
+import { host } from '../../lib/og-image/rpc'
 
 const props = defineProps<{
   src: string
@@ -17,7 +17,7 @@ const props = defineProps<{
 const RE_CLOSING_ANGLE = />/g
 
 function openComponent() {
-  devtoolsClient.value?.devtools.rpc.openInEditor(props.component.path!)
+  host.value?.openInEditor(props.component.path!)
 }
 
 const isHtml = computed(() => {

devtools/composables/og-image.ts → devtools/lib/og-image/og-image.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { DevToolsMetaDataExtraction, OgImageComponent, OgImageOptions, OgImageOptionsInternal, RendererType } from '../../src/runtime/types'
+import type { DevToolsMetaDataExtraction, OgImageComponent, OgImageOptions, OgImageOptionsInternal, RendererType } from './runtime-types'
 import { useLocalStorage, useWindowSize } from '@vueuse/core'
 import defu from 'defu'
 import { colorMode } from 'nuxtseo-layer-devtools/composables/rpc'
@@ -8,11 +8,11 @@ import { relative } from 'pathe'
 import { hasProtocol, joinURL, parseURL, withQuery } from 'ufo'
 import { ref } from 'vue'
 import { computed, inject, toValue, watch } from '#imports'
-import { encodeOgImageParams, separateProps } from '../../src/runtime/shared'
-import { description, hasMadeChanges, ogImageKey, options, optionsOverrides, previewHost, propEditor } from '../util/logic'
 import { GlobalDebugKey, PathDebugKey, PathDebugStatusKey, RefetchPathDebugKey } from './keys'
-import { devtoolsClient, ogImageRpc } from './rpc'
+import { host, ogImageRpc } from './rpc'
+import { encodeOgImageParams, separateProps } from './shared'
 import { AddComponentDialogPromise, CreateOgImageDialogPromise } from './templates'
+import { description, hasMadeChanges, ogImageKey, options, optionsOverrides, previewHost, propEditor } from './util/logic'
 
 const RE_SUFFIX_SATORI = /Satori$/
 const RE_SUFFIX_BROWSER = /Browser$/
@@ -377,19 +377,19 @@ export function useOgImage() {
   }
 
   const pageFile = computed(() => {
-    const component = devtoolsClient.value?.host.nuxt.vueApp.config?.globalProperties?.$route.matched[0]?.components?.default as { __file?: string } | undefined
+    const component = host.value?.route?.value?.matched?.[0]?.components?.default as { __file?: string } | undefined
     return component?.__file
   })
 
   function openCurrentPageFile() {
     if (pageFile.value)
-      devtoolsClient.value?.devtools.rpc.openInEditor(pageFile.value)
+      host.value?.openInEditor(pageFile.value)
   }
 
   function openCurrentComponent() {
     const component = componentNames.value.find(c => c.pascalName === activeComponentName.value)
     if (component?.path)
-      devtoolsClient.value?.devtools.rpc.openInEditor(component.path)
+      host.value?.openInEditor(component.path)
   }
 
   const isPageScreenshot = computed(() => {
@@ -412,7 +412,7 @@ export function useOgImage() {
   })
 
   const currentPageFile = computed(() => {
-    const component = devtoolsClient.value?.host.nuxt.vueApp.config?.globalProperties?.$route.matched[0]?.components?.default as { __file?: string } | undefined
+    const component = host.value?.route?.value?.matched?.[0]?.components?.default as { __file?: string } | undefined
     const path = component?.__file
     return `pages/${path?.split('pages/')[1]}`
   })
@@ -424,7 +424,7 @@ export function useOgImage() {
     const v = await ogImageRpc.value!.ejectCommunityTemplate(`${dir}/${component}.vue`)
     refreshSources()
     if (v)
-      await devtoolsClient.value?.devtools.rpc.openInEditor(v)
+      await host.value?.openInEditor(v)
   }
 
   async function createComponent() {
@@ -438,14 +438,14 @@ export function useOgImage() {
     })
     refreshSources()
     if (v)
-      await devtoolsClient.value?.devtools.rpc.openInEditor(v)
+      await host.value?.openInEditor(v)
   }
 
   async function addExistingComponent(componentName: string) {
     await ogImageRpc.value!.addOgImageToPage(componentName, pageFile.value || '')
     refreshSources()
     if (pageFile.value)
-      await devtoolsClient.value?.devtools.rpc.openInEditor(pageFile.value)
+      await host.value?.openInEditor(pageFile.value)
   }
 
   async function resetProps(fetch = true) {

devtools/lib/og-image/rpc-types.ts

@@ -0,0 +1,2 @@
+export type ClientFunctions = any
+export type ServerFunctions = any

devtools/composables/rpc.ts → devtools/lib/og-image/rpc.ts

@@ -1,11 +1,11 @@
-import type { NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
 import type { BirpcReturn } from 'birpc'
-import type { ClientFunctions, ServerFunctions } from '../../src/rpc-types'
+import type { DevtoolsHost } from 'nuxtseo-layer-devtools/composables/host'
+import type { ClientFunctions, ServerFunctions } from './rpc-types'
 import { appFetch, useDevtoolsConnection } from 'nuxtseo-layer-devtools/composables/rpc'
-import { base, path, query, refreshSources } from 'nuxtseo-layer-devtools/composables/state'
+import { base, path, refreshSources } from 'nuxtseo-layer-devtools/composables/state'
 import { computed, ref } from 'vue'
 
-export const devtoolsClient = ref<NuxtDevtoolsIframeClient>()
+export const host = ref<DevtoolsHost>()
 
 export const ogImageRpc = ref<BirpcReturn<ServerFunctions>>()
 
@@ -50,18 +50,16 @@ onMounted(() => {
 })
 
 useDevtoolsConnection({
-  onConnected(client) {
+  onConnected(connectedHost) {
     if (timer) {
       clearTimeout(timer)
     }
     connectionState.value = 'connected'
-    base.value = client.host.nuxt.vueApp.config.globalProperties?.$router?.options?.history?.base || client.host.app.baseURL || '/'
-    devtoolsClient.value = client
-    // @ts-expect-error untyped
-    ogImageRpc.value = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>('nuxt-og-image', {
+    host.value = connectedHost
+    ogImageRpc.value = connectedHost.rpc<ServerFunctions, ClientFunctions>('nuxt-og-image', {
       refreshRouteData(path: string) {
-        // @ts-expect-error untyped
-        if (devtoolsClient.value?.host.nuxt.vueApp.config?.globalProperties?.$route.matched[0].components?.default.__file.includes(path) || path.endsWith('.md'))
+        const file = connectedHost.route?.value?.matched?.[0]?.components?.default?.__file as string | undefined
+        if (file?.includes(path) || path.endsWith('.md'))
           refreshSources()
       },
       refresh() {
@@ -72,9 +70,4 @@ useDevtoolsConnection({
       },
     })
   },
-  onRouteChange(route) {
-    query.value = route.query
-    path.value = route.path || '/'
-    refreshSources()
-  },
 })

devtools/lib/og-image/runtime-types.ts

@@ -0,0 +1,10 @@
+// Devtools-only contract types, kept local so the shipped layer has no dependency on
+// the module's src (published packages ship dist, not src).
+export type DevToolsMetaDataExtraction = any
+export type FontConfig = any
+export type OgImageComponent = any
+export type OgImageOptions = any
+export type OgImageOptionsInternal = any
+export type OgImageRuntimeConfig = any
+export type RendererType = any
+export type RuntimeCompatibilitySchema = any

devtools/lib/og-image/shared.ts

@@ -0,0 +1,30 @@
+// Vendored from nuxt-og-image src/runtime/shared.ts — only the runtime helpers the
+// devtools panel needs (separateProps + a re-export of encodeOgImageParams). Kept local
+// so the shipped layer has no dependency on the module's src.
+import { defu } from 'defu'
+
+export { encodeOgImageParams } from './shared/urlEncoding'
+
+const RE_KEBAB_CASE = /-([a-z])/g
+const OG_IMAGE_OPTION_KEYS: string[] = ['url', 'extension', 'width', 'height', 'alt', 'props', 'renderer', 'component', 'emojis', '_query', '_hash', 'fonts', 'satori', 'resvg', 'sharp', 'screenshot', 'takumi', 'cacheMaxAgeSeconds', 'cacheKey', 'key']
+
+function filterIsOgImageOption(key: string): boolean {
+  return OG_IMAGE_OPTION_KEYS.includes(key)
+}
+
+export function separateProps(options: any | undefined, ignoreKeys: string[] = []): any {
+  options = options || {}
+  const _props = defu(options.props as Record<string, any>, Object.fromEntries(
+    Object.entries({ ...options }).filter(([k]) => !filterIsOgImageOption(k) && !ignoreKeys.includes(k)),
+  ))
+  const props: Record<string, any> = {}
+  Object.entries(_props).forEach(([key, val]) => {
+    props[key.replace(RE_KEBAB_CASE, g => String(g[1]).toUpperCase())] = val
+  })
+  const result: Record<string, any> = Object.fromEntries(
+    Object.entries({ ...options }).filter(([k]) => filterIsOgImageOption(k) || ignoreKeys.includes(k)),
+  )
+  if (Object.keys(props).length > 0)
+    result.props = props
+  return result
+}