fix(core): custom renderer timing

antfu · antfu · commit dd3083885e86 · 2025-12-15T14:06:49.000+09:00
diff --git a/packages/core/playground/vite.config.ts b/packages/core/playground/vite.config.ts
@@ -132,11 +132,10 @@ export default defineConfig({
               type: 'action',
               icon: `material-symbols:counter-${count}`,
               title: `Counter ${count}`,
-              // TODO: HMR
-              action: ctx.utils.createSimpleClientScript(() => {
-                // eslint-disable-next-line no-alert
-                alert(`Counter ${count}`)
-              }),
+              // TODO: HMR?
+              action: ctx.utils.createSimpleClientScript(`() => {
+                alert('Counter ${count}')
+              }`),
             })
           }, 1000)
         },
diff --git a/packages/core/src/client/webcomponents/state/context.ts b/packages/core/src/client/webcomponents/state/context.ts
@@ -55,7 +55,6 @@ export async function createDocksContext(
         const entry = dockEntries.value.find(e => e.id === id)
         if (!entry)
           return false
-        selectedId.value = entry.id
 
         // If has import script, run it
         if (
diff --git a/packages/core/src/client/webcomponents/state/docks.ts b/packages/core/src/client/webcomponents/state/docks.ts
@@ -32,22 +32,22 @@ export function createDockEntryState(
 
   watch(() => selected.value?.id, (newSelectedId) => {
     if (newSelectedId === entry.id) {
-      events.emit('entry:activated')
+      events.emitOnce('entry:activated')
     }
     else {
-      events.emit('entry:deactivated')
+      events.emitOnce('entry:deactivated')
     }
-  })
+  }, { immediate: true })
 
   watch(() => state.domElements.iframe, (newIframe) => {
     if (newIframe)
-      events.emit('dom:iframe:mounted', newIframe)
-  })
+      events.emitOnce('dom:iframe:mounted', newIframe)
+  }, { immediate: true })
 
   watch(() => state.domElements.panel, (newPanel) => {
     if (newPanel)
-      events.emit('dom:panel:mounted', newPanel)
-  })
+      events.emitOnce('dom:panel:mounted', newPanel)
+  }, { immediate: true })
 
   return state
 }
diff --git a/packages/kit/src/types/events.ts b/packages/kit/src/types/events.ts
@@ -18,7 +18,17 @@ export interface EventEmitter<Events extends EventsMap> {
    * @param args The arguments for listeners.
    */
   emit: <K extends keyof Events>(
-    this: this,
+    event: K,
+    ...args: Parameters<Events[K]>
+  ) => void
+
+  /**
+   * Calls the listeners for a given event once and then removes the listener.
+   *
+   * @param event The event name.
+   * @param args The arguments for listeners.
+   */
+  emitOnce: <K extends keyof Events>(
     event: K,
     ...args: Parameters<Events[K]>
   ) => void
@@ -47,5 +57,23 @@ export interface EventEmitter<Events extends EventsMap> {
    * @param cb The listener function.
    * @returns Unbind listener from event.
    */
-  on: <K extends keyof Events>(this: this, event: K, cb: Events[K]) => EventUnsubscribe
+  on: <K extends keyof Events>(event: K, cb: Events[K]) => EventUnsubscribe
+  /**
+   * Add a listener for a given event once.
+   *
+   * ```js
+   * const unbind = ee.once('tick', (tickType, tickDuration) => {
+   *   count += 1
+   * })
+   *
+   * disable () {
+   *   unbind()
+   * }
+   * ```
+   *
+   * @param event The event name.
+   * @param cb The listener function.
+   * @returns Unbind listener from event.
+   */
+  once: <K extends keyof Events>(event: K, cb: Events[K]) => EventUnsubscribe
 }
diff --git a/packages/kit/src/utils/events.ts b/packages/kit/src/utils/events.ts
@@ -8,29 +8,49 @@ export function createEventEmitter<
 >(): EventEmitter<Events> {
   const _listeners: Partial<{ [E in keyof Events]: Events[E][] }> = {}
 
+  function emit<K extends keyof Events>(
+    event: K,
+    ...args: Parameters<Events[K]>
+  ) {
+    const callbacks = _listeners[event] || []
+    for (let i = 0, length = callbacks.length; i < length; i++) {
+      const callback = callbacks[i]
+      if (callback)
+        callback(...args)
+    }
+  }
+  function emitOnce<K extends keyof Events>(
+    event: K,
+    ...args: Parameters<Events[K]>
+  ) {
+    emit(event, ...args)
+    delete _listeners[event]
+  }
+  function on<K extends keyof Events>(
+    event: K,
+    cb: Events[K],
+  ): EventUnsubscribe {
+    ;(_listeners[event] ||= [] as Events[K][]).push(cb)
+    return () => {
+      _listeners[event] = _listeners[event]?.filter(i => cb !== i) as Events[K][] | undefined
+    }
+  }
+  function once<K extends keyof Events>(
+    event: K,
+    cb: Events[K],
+  ) {
+    const unsubscribe = on(event, ((...args: Parameters<Events[K]>) => {
+      unsubscribe()
+      return cb(...args)
+    }) as Events[K])
+    return unsubscribe
+  }
+
   return {
-    emit<K extends keyof Events>(
-      this: EventEmitter<Events>,
-      event: K,
-      ...args: Parameters<Events[K]>
-    ) {
-      const callbacks = _listeners[event] || []
-      for (let i = 0, length = callbacks.length; i < length; i++) {
-        const callback = callbacks[i]
-        if (callback)
-          callback(...args)
-      }
-    },
     _listeners,
-    on<K extends keyof Events>(
-      this: EventEmitter<Events>,
-      event: K,
-      cb: Events[K],
-    ): EventUnsubscribe {
-      ;(_listeners[event] ||= [] as Events[K][]).push(cb)
-      return () => {
-        _listeners[event] = _listeners[event]?.filter(i => cb !== i) as Events[K][] | undefined
-      }
-    },
+    emit,
+    emitOnce,
+    on,
+    once,
   }
 }
