From 1a84f263f4457b19924d658ecd82ba44ee85e778 Mon Sep 17 00:00:00 2001
From: arnoson <hallo@arno-schlipf.info>
Date: Sat, 25 Mar 2023 18:37:24 +0100
Subject: [PATCH] chore: update readme

---
 README.md | 49 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 2753a11..d2fb3b8 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,7 @@ type Context = {
   props: DOMStringMap | Proxy
 
   // A Record of refs (elements with a `data-ref="name"` inside the component).
+  // See: #Refs
   refs: Record<string, HTMLElement | undefined>
 
   // Similar to refs but can also contain multiple refs with the same name.
@@ -120,6 +121,7 @@ const options = defineOptions({
   },
 
   // Provide types for some or all refs (by default all refs will be HTMLElement)
+  // See: #Refs
   refs: { click: HTMLButtonElement },
 
   // Provide types for the elements events.
@@ -148,6 +150,17 @@ mountComponent(el: HTMLElement)
 mountComponent(root?: HTMLElement)
 ```
 
+### Ignore Elements
+
+Sometimes it is useful to skip big DOM elements when searching for components
+to mount:
+
+```html
+<div data-simple-ignore>
+  <!-- a lot of DOM elements ... -->
+</div>
+```
+
 ### Props
 
 `props`, passed to the component's setup function can read from / write to the component elements dataset. By default all values are strings (as is the normal behavior with an element's dataset). But by providing types and default values for props, these values will be automatically converted to the correct type!
@@ -183,17 +196,6 @@ registerComponent('todo', options, ({ props }) => {
 })
 ```
 
-### Ignore Elements
-
-Sometimes it is useful to skip big DOM elements when searching for components
-to mount:
-
-```html
-<div data-simple-ignore>
-  <!-- a lot of DOM elements ... -->
-</div>
-```
-
 ### Expose Component
 
 The component's context and everything you return from the component's setup function is available on the HTML element.
@@ -238,7 +240,7 @@ const el = document.getElementById<MyComponentElement>('my-id')
 el.$component.sayHello() // <- this gets autocompleted
 ```
 
-### Define Ref Types
+### Refs
 
 Refs are of type HTMLElement by default, but it can be useful to define a more
 specific type for some of them:
@@ -259,6 +261,29 @@ registerComponent('my-component', options, ({ refs, refsAll }) => {
 })
 ```
 
+You can also use another simple component as a ref type. This is very useful inside a parent component.
+
+```ts
+// child.ts
+export default registerComponent('child', () => {})
+
+// parent.ts
+import Child from './child.ts'
+
+const options = defineOptions({
+  refs: { theChild: Child }
+})
+registerComponent('parent', options, ({ refs }) => {
+  // ...
+})
+```
+
+```html
+<div data-simple-component="parent">
+  <div data-simple-component="child" data-ref="theChild"></div>
+</div>
+```
+
 ### Events
 
 Components try to stay as close to native APIs as possible. Therefore events are just [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent), but they can be fully typed: