From 3fc552d0c9ae7753e565791c64767b711933fac5 Mon Sep 17 00:00:00 2001
From: shelton louis <louisshelton0@gmail.com>
Date: Wed, 3 May 2023 18:58:00 -0400
Subject: [PATCH 1/3] Update render-function.md

These docs don't tell devs how to type functional components. This is the post 3.3.0 way but it's just an example people need to know how to type functional components
---
 src/guide/extras/render-function.md | 93 +++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md
index 12659a9889..a50307d58d 100644
--- a/src/guide/extras/render-function.md
+++ b/src/guide/extras/render-function.md
@@ -729,3 +729,96 @@ MyComponent.inheritAttrs = false
 ```
 
 Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to `h()`, it will be treated as a functional component.
+
+### Typing Functional Components
+
+Functional Components can be typed based on whether they are named or anonymous. Volar will warn you if you are not using the right props. It will show you the right types for events that are emitted by them if you are using the right name.  
+
+**Named Functional Component**
+
+
+```tsx
+import type { SetupContext } from "vue";
+
+type FComponentProps = {
+  message:string
+}
+
+type Events = {
+  sendMessage(message:string):void
+}
+
+function FComponent(props:FComponentProps, context:SetupContext<Events>) {
+
+  return <button onClick={()=>context.emit("sendMessage", props.message)}>
+  {props.message}
+  </button>
+
+}
+  
+ FComponentProps.props={
+  message:{
+    type:String,
+    required:true
+  },
+  }
+  
+  FComponent.emits={
+    sendMessage:(value)=> typeof value === "string"
+  }
+
+```
+
+
+**Anonymous Functional Component**
+
+```tsx
+import type { FunctionalComponent } from 'vue'
+
+type FComponentProps = {
+  message:string
+}
+
+type Events = {
+  sendMessage(message:string):void
+}
+
+const FComponent:FunctionalComponent<FComponentProps,Events> = (props, context) {
+
+  return <button 
+  onClick={()=>context.emit("sendMessage", props.message)}
+  >
+  {props.message}
+  </button>
+
+}
+
+  FComponentProps.props={
+  message:{
+    type:String,
+    required:true
+  },
+  }
+  
+  FComponent.emits={
+    sendMessage:(value)=> typeof value === "string"
+  }
+  
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  

From ba899e9ff3fa53c39c27512b24a45c062efd58a7 Mon Sep 17 00:00:00 2001
From: shelton louis <louisshelton0@gmail.com>
Date: Wed, 3 May 2023 19:20:24 -0400
Subject: [PATCH 2/3] Update render-function.md

Misspelled FComponent when writing props. don't worry.
---
 src/guide/extras/render-function.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md
index a50307d58d..58807cee71 100644
--- a/src/guide/extras/render-function.md
+++ b/src/guide/extras/render-function.md
@@ -775,7 +775,7 @@ function FComponent(props:FComponentProps, context:SetupContext<Events>) {
 ```tsx
 import type { FunctionalComponent } from 'vue'
 
-type FComponentProps = {
+type FComponent = {
   message:string
 }
 
@@ -793,7 +793,7 @@ const FComponent:FunctionalComponent<FComponentProps,Events> = (props, context)
 
 }
 
-  FComponentProps.props={
+  FComponent.props={
   message:{
     type:String,
     required:true

From 1602854681b37aefc25d16e14b712f5b8dd67d44 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 14 Jun 2023 12:41:45 +0800
Subject: [PATCH 3/3] Update render-function.md

---
 src/guide/extras/render-function.md | 106 ++++++++++++----------------
 1 file changed, 44 insertions(+), 62 deletions(-)

diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md
index 58807cee71..c2e8b6df96 100644
--- a/src/guide/extras/render-function.md
+++ b/src/guide/extras/render-function.md
@@ -730,95 +730,77 @@ MyComponent.inheritAttrs = false
 
 Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to `h()`, it will be treated as a functional component.
 
-### Typing Functional Components
+### Typing Functional Components<sup class="vt-badge ts" /> {#typing-functional-components}
 
-Functional Components can be typed based on whether they are named or anonymous. Volar will warn you if you are not using the right props. It will show you the right types for events that are emitted by them if you are using the right name.  
+Functional Components can be typed based on whether they are named or anonymous. Volar also supports type checking properly typed functional components when consuming them in SFC templates.
 
 **Named Functional Component**
 
-
 ```tsx
-import type { SetupContext } from "vue";
-
+import type { SetupContext } from 'vue'
 type FComponentProps = {
-  message:string
+  message: string
 }
 
 type Events = {
-  sendMessage(message:string):void
+  sendMessage(message: string): void
 }
 
-function FComponent(props:FComponentProps, context:SetupContext<Events>) {
-
-  return <button onClick={()=>context.emit("sendMessage", props.message)}>
-  {props.message}
-  </button>
-
+function FComponent(
+  props: FComponentProps,
+  context: SetupContext<Events>
+) {
+  return (
+    <button onClick={() => context.emit('sendMessage', props.message)}>
+        {props.message} {' '}
+    </button>
+  )
 }
-  
- FComponentProps.props={
-  message:{
-    type:String,
-    required:true
-  },
-  }
-  
-  FComponent.emits={
-    sendMessage:(value)=> typeof value === "string"
+
+FComponent.props = {
+  message: {
+    type: String,
+    required: true
   }
+}
 
+FComponent.emits = {
+  sendMessage: (value: unknown) => typeof value === 'string'
+}
 ```
 
-
 **Anonymous Functional Component**
 
 ```tsx
 import type { FunctionalComponent } from 'vue'
 
-type FComponent = {
-  message:string
+type FComponentProps = {
+  message: string
 }
 
 type Events = {
-  sendMessage(message:string):void
+  sendMessage(message: string): void
 }
 
-const FComponent:FunctionalComponent<FComponentProps,Events> = (props, context) {
-
-  return <button 
-  onClick={()=>context.emit("sendMessage", props.message)}
-  >
-  {props.message}
-  </button>
-
+const FComponent: FunctionalComponent<FComponentProps, Events> = (
+  props,
+  context
+) => {
+  return (
+    <button onClick={() => context.emit('sendMessage', props.message)}>
+        {props.message} {' '}
+    </button>
+  )
 }
 
-  FComponent.props={
-  message:{
-    type:String,
-    required:true
-  },
-  }
-  
-  FComponent.emits={
-    sendMessage:(value)=> typeof value === "string"
+FComponent.props = {
+  message: {
+    type: String,
+    required: true
   }
-  
-```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+}
 
-  
+FComponent.emits = {
+  sendMessage: (value) => typeof value === 'string'
+}
+```