chore: update readme

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: