update example to show ref issue

lume · Oct 22, 2024 · 1d46ada · 1d46ada
1 parent 060e793
commit 1d46ada
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 15 deletions.
diff --git a/examples/kitchen-sink-vue/src/App.vue b/examples/kitchen-sink-vue/src/App.vue
@@ -1,21 +1,14 @@
 <script setup lang="ts">
 import './KitchenSink.js'
-// import {FooBar} from './FooBar.ce.js'
-import './FooBar.ce.js'
+import {useTemplateRef} from 'vue'
+
+const sink = useTemplateRef('sink')
+sink.value!.foo
 </script>
 
 <template>
-	<!-- not working (expected type error): -->
-	<!-- <FooBar :foo="true" /> -->
-	<foo-bar :foo="true" />
-	<!-- <fooBar :foo="true" /> -->
-
-	<!-- <kitchen-sink :count="123" :foo="true"></kitchen-sink> -->
-
-	<!-- This works (expect error) -->
-	<kitchen-sink :foo="true"></kitchen-sink>
-	<!-- This works (expect no error) -->
-	<kitchen-sink :foo="123"></kitchen-sink>
+	<!-- There should be a type error here: -->
+	<kitchen-sink ref="sink" :foo="true"></kitchen-sink>
 </template>
 
 <style scoped>

diff --git a/examples/kitchen-sink-vue/src/KitchenSink.ts b/examples/kitchen-sink-vue/src/KitchenSink.ts
@@ -7,8 +7,9 @@ import type {Component} from 'vue'
 
 declare module 'vue' {
 	interface GlobalComponents {
-		// 'kitchen-sink': typeof KitchenSink // not working
-		'kitchen-sink': Component<{foo: number}> // works
+		// 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)
 	}
 
 	interface IntrinsicElementAttributes {