From e702757ec1dde51275c4476e04ffebec319f7d6d Mon Sep 17 00:00:00 2001
From: Joe Pea <joe@trusktr.io>
Date: Tue, 22 Oct 2024 22:35:49 -0700
Subject: [PATCH] ok finally both refs and selected properties for template
 type checking working as expected, by intersecting the custom element class
 with the DefineComponent type. Ugly, but it works.

---
 examples/kitchen-sink-vue/src/App.vue        | 18 +++++++--------
 examples/kitchen-sink-vue/src/KitchenSink.ts | 23 ++++++++++++++++----
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/examples/kitchen-sink-vue/src/App.vue b/examples/kitchen-sink-vue/src/App.vue
index feff9f3..9d77913 100644
--- a/examples/kitchen-sink-vue/src/App.vue
+++ b/examples/kitchen-sink-vue/src/App.vue
@@ -3,17 +3,17 @@ import './KitchenSink.js'
 import {useTemplateRef} from 'vue'
 
 const sink = useTemplateRef('sink')
-sink.value!.foo
+
+sink.value!.someMethod()
+sink.value!.foo = 123
 </script>
 
 <template>
-	<!-- There should be a type error here: -->
-	<kitchen-sink ref="sink" :foo="true"></kitchen-sink>
+	<!-- There should be no type errors: -->
+	<kitchen-sink ref="sink" :foo="123" :bar="true"></kitchen-sink>
+
+	<!-- There should be type errors: -->
+	<kitchen-sink ref="sink" :foo="true" :bar="123"></kitchen-sink>
 </template>
 
-<style scoped>
-kitchen-sink#sink {
-	cursor: pointer;
-	user-select: none;
-}
-</style>
+<style scoped></style>
diff --git a/examples/kitchen-sink-vue/src/KitchenSink.ts b/examples/kitchen-sink-vue/src/KitchenSink.ts
index f256af3..7a8510e 100644
--- a/examples/kitchen-sink-vue/src/KitchenSink.ts
+++ b/examples/kitchen-sink-vue/src/KitchenSink.ts
@@ -1,14 +1,29 @@
+import type {DefineComponent} from 'vue'
+
+// Select the properties to expose to template type checking.
+type KitchenSinkAttributes = 'foo' | 'bar'
+
 export class KitchenSink extends HTMLElement {
 	foo = 123
+	bar = false
+
+	// This is not exposed to template type checking.
+	someMethod() {
+		/* ... */
+	}
 }
+
 customElements.define('kitchen-sink', KitchenSink)
 
-import type {Component} from 'vue'
+type VueElementAttribtues<T extends HTMLElement, Attributes extends keyof T> =
+	// This is the type that is exposed to template type checking.
+	DefineComponent<Partial<Pick<T, Attributes>>> &
+		// Additionally intersect with a constructor type that returns the element type, for refs to work properly.
+		(new () => T)
 
 declare module 'vue' {
 	interface GlobalComponents {
-		// Try toggling between these two lines
-		'kitchen-sink': typeof KitchenSink // not working (except ref works)
-		// 'kitchen-sink': Component<{foo: number}> // works (except ref not working)
+		// Use the helper to add any custom element to GlobalComponents.
+		'kitchen-sink': VueElementAttribtues<KitchenSink, KitchenSinkAttributes>
 	}
 }