fix(plugin-sdk-tamagotchi): improved naming, use @moeru/eventa offered window-message adapter

Author: nekomeowww

apps/stage-tamagotchi/src/renderer/widgets/extension-ui/composables/use-iframe-message-port.ts

@@ -1,18 +1,18 @@
+import type { WidgetsIframeInitPayload } from '@proj-airi/plugin-sdk-tamagotchi/widgets'
 import type { MaybeElementRef } from '@vueuse/core'
 import type { ComputedRef } from 'vue'
 
 import type { PluginHostModuleSummary } from '../../../../shared/eventa/plugin/host'
 
+import { createContext } from '@moeru/eventa/adapters/window-message'
+import {
+  widgetsIframeChannel,
+  widgetsIframeInitEvent,
+  widgetsIframeReadyEvent,
+} from '@proj-airi/plugin-sdk-tamagotchi/widgets'
 import { unrefElement } from '@vueuse/core'
 import { onBeforeUnmount, shallowRef, watch } from 'vue'
 
-import {
-  extensionUiBridgeEventaChannel,
-  extensionUiBridgeInitEvent,
-  extensionUiBridgeReadyEvent,
-} from '../shared/eventa'
-import { createWindowMessageEventaContext } from '../shared/eventa-runtime'
-
 /**
  * Manages typed parent-to-iframe messaging for one extension UI iframe.
  *
@@ -41,8 +41,8 @@ export function useIframeMessagePort(
 ) {
   const iframeLoadError = shallowRef<string>()
 
-  const iframeRuntime = createWindowMessageEventaContext({
-    channel: extensionUiBridgeEventaChannel,
+  const iframeRuntime = createContext({
+    channel: widgetsIframeChannel,
     currentWindow: window,
     expectedSource: () => {
       const iframeElement = unrefElement(target)
@@ -54,17 +54,17 @@ export function useIframeMessagePort(
     },
   })
 
-  function createInitPayload() {
+  function createInitPayload(): WidgetsIframeInitPayload {
     return {
       moduleId: options.moduleSnapshot.value?.moduleId,
-      module: options.moduleSnapshot.value,
+      module: options.moduleSnapshot.value as unknown as Record<string, unknown> | undefined,
       config: options.moduleConfig.value,
       props: options.propsPayload.value,
     }
   }
 
   function emitInitPayload() {
-    iframeRuntime.context.emit(extensionUiBridgeInitEvent, createInitPayload())
+    iframeRuntime.context.emit(widgetsIframeInitEvent, createInitPayload())
   }
 
   function onIframeLoad() {
@@ -76,7 +76,7 @@ export function useIframeMessagePort(
     iframeLoadError.value = 'Failed to load extension UI iframe source.'
   }
 
-  iframeRuntime.context.on(extensionUiBridgeReadyEvent, () => {
+  iframeRuntime.context.on(widgetsIframeReadyEvent, () => {
     emitInitPayload()
   })
 

apps/stage-tamagotchi/src/renderer/widgets/extension-ui/shared/eventa-runtime.test.ts

@@ -1,11 +1,7 @@
+import { createContext } from '@moeru/eventa/adapters/window-message'
+import { widgetsIframeInitEvent, widgetsIframePublishEvent } from '@proj-airi/plugin-sdk-tamagotchi/widgets'
 import { describe, expect, it } from 'vitest'
 
-import {
-  extensionUiBridgeInitEvent,
-  extensionUiBridgePublishEvent,
-} from './eventa'
-import { createWindowMessageEventaContext } from './eventa-runtime'
-
 class MockWindow {
   peer?: MockWindow
 
@@ -49,13 +45,13 @@ class MockWindow {
 
 /**
  * @example
- * describe('createWindowMessageEventaContext', () => {
+ * describe('createContext', () => {
  *   it('relays typed events between parent and iframe windows', async () => {
  *     expect(true).toBe(true)
  *   })
  * })
  */
-describe('createWindowMessageEventaContext', () => {
+describe('createContext', () => {
   /**
    * @example
    * it('relays typed events between parent and iframe windows', async () => {
@@ -68,21 +64,21 @@ describe('createWindowMessageEventaContext', () => {
     parentWindow.peer = iframeWindow
     iframeWindow.peer = parentWindow
 
-    const host = createWindowMessageEventaContext({
+    const host = createContext({
       channel: 'test:extension-ui',
       currentWindow: parentWindow as unknown as Window,
       expectedSource: () => iframeWindow as unknown as Window,
       targetWindow: () => iframeWindow as unknown as Window,
     })
-    const iframe = createWindowMessageEventaContext({
+    const iframe = createContext({
       channel: 'test:extension-ui',
       currentWindow: iframeWindow as unknown as Window,
       expectedSource: () => parentWindow as unknown as Window,
       targetWindow: () => parentWindow as unknown as Window,
     })
 
     const initPayload = new Promise<{ moduleId: string }>((resolve) => {
-      iframe.context.on(extensionUiBridgeInitEvent, (event) => {
+      iframe.context.on(widgetsIframeInitEvent, (event) => {
         if (!event.body?.moduleId) {
           return
         }
@@ -91,7 +87,7 @@ describe('createWindowMessageEventaContext', () => {
       })
     })
 
-    host.context.emit(extensionUiBridgeInitEvent, {
+    host.context.emit(widgetsIframeInitEvent, {
       moduleId: 'module-chess',
       config: {},
       module: undefined,
@@ -103,7 +99,7 @@ describe('createWindowMessageEventaContext', () => {
     }))
 
     const publishedPayload = new Promise<Record<string, unknown>>((resolve) => {
-      host.context.on(extensionUiBridgePublishEvent, (event) => {
+      host.context.on(widgetsIframePublishEvent, (event) => {
         if (!event.body) {
           return
         }
@@ -112,7 +108,7 @@ describe('createWindowMessageEventaContext', () => {
       })
     })
 
-    iframe.context.emit(extensionUiBridgePublishEvent, {
+    iframe.context.emit(widgetsIframePublishEvent, {
       topic: {
         namespace: 'plugin.chess',
         name: 'request',

apps/stage-tamagotchi/src/renderer/widgets/extension-ui/shared/eventa-runtime.ts

@@ -20,9 +20,9 @@
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
     },
-    "./extension-ui-bridge": {
-      "types": "./dist/extension-ui-bridge/index.d.mts",
-      "default": "./dist/extension-ui-bridge/index.mjs"
+    "./widgets": {
+      "types": "./dist/widgets/index.d.mts",
+      "default": "./dist/widgets/index.mjs"
     },
     "./gamelet": {
       "types": "./dist/gamelet/index.d.mts",

apps/stage-tamagotchi/src/renderer/widgets/extension-ui/shared/eventa.ts

@@ -1,2 +1,3 @@
 export * from './gamelet'
 export * from './tools'
+export * from './widgets'

packages/plugin-sdk-tamagotchi/package.json

@@ -0,0 +1,30 @@
+import { defineEventa } from '@moeru/eventa'
+
+/**
+ * Channel name shared by tamagotchi hosts and plugin iframes for extension UI Eventa traffic.
+ */
+export const widgetsIframeChannel = 'airi:widgets:ui-iframe:channel'
+
+/**
+ * Snapshot payload forwarded from the host to initialize one extension UI bridge consumer.
+ */
+export interface WidgetsIframeInitPayload {
+  /** Active module identifier when the host already resolved one. */
+  moduleId?: string
+  /** Current host-side module snapshot when available. */
+  module?: Record<string, unknown>
+  /** Structured-clone-safe config payload mirrored from the host. */
+  config: Record<string, unknown>
+  /** Structured-clone-safe runtime props mirrored from the host. */
+  props: Record<string, unknown>
+}
+
+/**
+ * Structured-clone-safe envelope forwarded across the extension UI bridge.
+ */
+export type WidgetsIframeEvent = Record<string, unknown>
+
+export const widgetsIframeInitEvent = defineEventa<WidgetsIframeInitPayload>('eventa:event:widgets:ui-iframe:init')
+export const widgetsIframeReadyEvent = defineEventa<void>('eventa:event:widgets:ui-iframe:ready')
+export const widgetsIframePublishEvent = defineEventa<WidgetsIframeEvent>('eventa:event:widgets:ui-iframe:publish')
+export const widgetsIframeBroadcastEvent = defineEventa<WidgetsIframeEvent>('eventa:event:widgets:ui-iframe:broadcast')

packages/plugin-sdk-tamagotchi/src/index.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'tsdown'
 export default defineConfig({
   entry: [
     'src/index.ts',
+    'src/widgets/index.ts',
     'src/gamelet/index.ts',
     'src/tools/index.ts',
   ],