From f5f1150d8ae115814a74bfed87edde67259cd2ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 17 May 2024 20:38:57 +0800
Subject: [PATCH] feat(runtime-vapor): add globalProperties

---
 .../runtime-vapor/src/apiCreateVaporApp.ts    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/runtime-vapor/src/apiCreateVaporApp.ts b/packages/runtime-vapor/src/apiCreateVaporApp.ts
index 7a5392424..f1c40304f 100644
--- a/packages/runtime-vapor/src/apiCreateVaporApp.ts
+++ b/packages/runtime-vapor/src/apiCreateVaporApp.ts
@@ -100,6 +100,7 @@ export function createAppContext(): AppContext {
     config: {
       errorHandler: undefined,
       warnHandler: undefined,
+      globalProperties: {},
     },
     provides: Object.create(null),
   }
@@ -131,6 +132,7 @@ export interface AppConfig {
     instance: ComponentInternalInstance | null,
     trace: string,
   ) => void
+  globalProperties: ComponentCustomProperties & Record<string, any>
 }
 
 export interface AppContext {
@@ -144,3 +146,30 @@ export interface AppContext {
  * `app.runWithContext()`.
  */
 export let currentApp: App | null = null
+
+/**
+ * Custom properties added to component instances in any way and can be accessed through `this`
+ *
+ * @example
+ * Here is an example of adding a property `$router` to every component instance:
+ * ```ts
+ * import { createApp } from 'vue'
+ * import { Router, createRouter } from 'vue-router'
+ *
+ * declare module '@vue/runtime-core' {
+ *   interface ComponentCustomProperties {
+ *     $router: Router
+ *   }
+ * }
+ *
+ * // effectively adding the router to every component instance
+ * const app = createApp({})
+ * const router = createRouter()
+ * app.config.globalProperties.$router = router
+ *
+ * const vm = app.mount('#app')
+ * // we can access the router from the instance
+ * vm.$router.push('/')
+ * ```
+ */
+export interface ComponentCustomProperties {}