chore: tweak

packages/client/src/components/Content.ts

@@ -28,9 +28,15 @@ export const Content = defineComponent({
 
     return () =>
       h(ContentComponent.value, {
-        onVnodeMounted: runCallbacks,
-        onVnodeUpdated: runCallbacks,
-        onVnodeBeforeUnmount: runCallbacks,
+        onVnodeMounted: () => {
+          runCallbacks('mounted')
+        },
+        onVnodeUpdated: () => {
+          runCallbacks('change')
+        },
+        onVnodeBeforeUnmount: () => {
+          runCallbacks('beforeUnmount')
+        },
       })
   },
 })

packages/client/src/composables/contentHooks.ts

@@ -0,0 +1,31 @@
+import { onUnmounted } from 'vue'
+
+type LifeCycle = 'beforeUnmount' | 'change' | 'mounted'
+
+const hooks: Record<LifeCycle, (() => unknown)[]> = {
+  mounted: [],
+  beforeUnmount: [],
+  change: [],
+}
+
+const createHook =
+  (lifeCycle: LifeCycle) =>
+  (fn: () => unknown): void => {
+    hooks[lifeCycle].push(fn)
+    onUnmounted(() => {
+      hooks[lifeCycle] = hooks[lifeCycle].filter((f) => f !== fn)
+    })
+  }
+
+export const onContentChange = createHook('change')
+
+export const onContentMounted = createHook('mounted')
+
+export const onContentBeforeUnmount = createHook('beforeUnmount')
+
+/**
+ * Call all registered callbacks
+ */
+export const runCallbacks = (lifeCycle: LifeCycle): void => {
+  hooks[lifeCycle].forEach((fn) => fn())
+}

packages/client/src/composables/index.ts

@@ -1,4 +1,4 @@
 export * from './clientData.js'
 export * from './clientDataUtils.js'
 export * from './updateHead.js'
-export * from './contentUpdated.js'
+export * from './contentHooks.js'