From 1bce4df00a8dde384f7b7f623ea055ee070a23f6 Mon Sep 17 00:00:00 2001
From: HomWang <516310460@qq.com>
Date: Wed, 24 Aug 2022 03:08:35 +0800
Subject: [PATCH] docs(examples): add jsx example (#6870)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
---
 .../2.guide/3.directory-structure/10.pages.md |  1 +
 docs/content/4.examples/6.advanced/jsx.md     | 12 +++++++++
 examples/advanced/jsx/app.vue                 | 26 +++++++++++++++++++
 .../advanced/jsx/components/MyComponent.tsx   | 12 +++++++++
 examples/advanced/jsx/nuxt.config.ts          |  7 +++++
 examples/advanced/jsx/package.json            | 13 ++++++++++
 examples/advanced/jsx/tsconfig.json           |  3 +++
 yarn.lock                                     |  9 +++++++
 8 files changed, 83 insertions(+)
 create mode 100644 docs/content/4.examples/6.advanced/jsx.md
 create mode 100644 examples/advanced/jsx/app.vue
 create mode 100644 examples/advanced/jsx/components/MyComponent.tsx
 create mode 100644 examples/advanced/jsx/nuxt.config.ts
 create mode 100644 examples/advanced/jsx/package.json
 create mode 100644 examples/advanced/jsx/tsconfig.json

diff --git a/docs/content/2.guide/3.directory-structure/10.pages.md b/docs/content/2.guide/3.directory-structure/10.pages.md
index 59a7a72a008..e5845521744 100644
--- a/docs/content/2.guide/3.directory-structure/10.pages.md
+++ b/docs/content/2.guide/3.directory-structure/10.pages.md
@@ -34,6 +34,7 @@ export default defineComponent({
 ```
 
 ```ts [pages/index.tsx]
+// https://v3.nuxtjs.org/examples/advanced/jsx
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
   render () {
diff --git a/docs/content/4.examples/6.advanced/jsx.md b/docs/content/4.examples/6.advanced/jsx.md
new file mode 100644
index 00000000000..1139e3fb38c
--- /dev/null
+++ b/docs/content/4.examples/6.advanced/jsx.md
@@ -0,0 +1,12 @@
+---
+template: Example
+---
+
+# JSX / TSX
+
+This example shows how to use [jsx syntax](https://vuejs.org/guide/extras/render-function.html#jsx-tsx) with typescript in Nuxt pages and components.
+
+::ReadMore{link="https://vuejs.org/guide/extras/render-function.html#jsx-tsx"}
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/jsx" file="nuxt.config.ts"}
diff --git a/examples/advanced/jsx/app.vue b/examples/advanced/jsx/app.vue
new file mode 100644
index 00000000000..c1aa9e0f255
--- /dev/null
+++ b/examples/advanced/jsx/app.vue
@@ -0,0 +1,26 @@
+<script lang="tsx" setup>
+// Component could be a simple function with JSX syntax
+const Welcome = () => <span>Welcome </span>
+
+// Or using defineComponent setup that returns render function with JSX syntax
+const Nuxt3 = defineComponent(() => {
+  return () => <span>nuxt3</span>
+})
+
+// We can combine components with JSX syntax too
+const InlineComponent = () => (
+    <div>
+      <Welcome />
+      <span>to </span>
+      <Nuxt3 />
+    </div>
+)
+</script>
+
+<template>
+  <NuxtExampleLayout example="advanced/jsx">
+    <InlineComponent />
+    <!-- Defined in components/jsx-component.ts -->
+    <MyComponent message="This is an external JSX component" />
+  </NuxtExampleLayout>
+</template>
diff --git a/examples/advanced/jsx/components/MyComponent.tsx b/examples/advanced/jsx/components/MyComponent.tsx
new file mode 100644
index 00000000000..bc6942f48fa
--- /dev/null
+++ b/examples/advanced/jsx/components/MyComponent.tsx
@@ -0,0 +1,12 @@
+export default defineComponent({
+  props: {
+    message: String
+  },
+  render: (props) => {
+    return (
+    <div>
+      { props.message }
+    </div>
+    )
+  }
+})
diff --git a/examples/advanced/jsx/nuxt.config.ts b/examples/advanced/jsx/nuxt.config.ts
new file mode 100644
index 00000000000..36c7f84d69b
--- /dev/null
+++ b/examples/advanced/jsx/nuxt.config.ts
@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})
diff --git a/examples/advanced/jsx/package.json b/examples/advanced/jsx/package.json
new file mode 100644
index 00000000000..fda87288ae3
--- /dev/null
+++ b/examples/advanced/jsx/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example-jsx",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "^0.2.0",
+    "nuxt": "npm:nuxt3@latest"
+  }
+}
diff --git a/examples/advanced/jsx/tsconfig.json b/examples/advanced/jsx/tsconfig.json
new file mode 100644
index 00000000000..4b34df1571f
--- /dev/null
+++ b/examples/advanced/jsx/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/yarn.lock b/yarn.lock
index c2af897030d..15aa0106694 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6759,6 +6759,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"example-jsx@workspace:examples/advanced/jsx":
+  version: 0.0.0-use.local
+  resolution: "example-jsx@workspace:examples/advanced/jsx"
+  dependencies:
+    "@nuxt/ui": ^0.2.0
+    nuxt: "npm:nuxt3@latest"
+  languageName: unknown
+  linkType: soft
+
 "example-layouts@workspace:examples/routing/layouts":
   version: 0.0.0-use.local
   resolution: "example-layouts@workspace:examples/routing/layouts"