chore: update docs

Author: zhiyuanzmj

README.md

@@ -2,102 +2,27 @@
 
 [![NPM version](https://img.shields.io/npm/v/vue-jsx-vapor?color=a1b858&label=)](https://www.npmjs.com/package/vue-jsx-vapor)
 
-Vue JSX Vapor.
+Vapor Mode of Vue JSX.
 
-[Docs](https://jsx-vapor.netlify.app/) . [Playground](https://repl.zmjs.dev/vuejs/vue-jsx-vapor)
+## Features
 
-## Install
+- ⚡️ High Performance: It has the same performance as Vue Vapor!
+- ⚒️ Directives: Support all build-in directives of Vue.
+- ✨ Macros: Support most macros of Vue, Friendly to JSX.
+- 🌈 Hot Module Replacement: Support functional components or defined by defineComponent.
+- 🦾 Type Safe: Provide Volar plugin support by install TS Macro (VSCode plugin).
+- ⚙️ ESLint: Provide an ESLint plugin for vue-jsx-vapor to automatically fix code.
+
+## Installation
 
 ```bash
 npm i vue-jsx-vapor
 ```
 
-> [!CAUTION]
-> ❌ The destructuring of props in a functional component will cause loss of reactivity.
-
-```tsx
-function Comp({ foo }) {
-  return <div>{foo}</div>
-}
-
-export default () => {
-  const foo = ref('foo')
-  return <Comp foo={foo.value} />
-}
-```
-
-#### Two Solutions
-
-1. ✅ Pass a ref variable as prop:
-
-```tsx
-function Comp({ foo }) {
-  return <div>{foo.value}</div>
-}
-
-export default () => {
-  const foo = ref('foo')
-  return <Comp foo={foo} />
-}
-```
-
-2. ✅ Set the macros option to true, then use the `defineComponent` macro for wrapping.
-
-Setup
-
-```ts
-// vite.config.ts
-import vueJsxVapor from 'vue-jsx-vapor/vite'
-
-export default defineConfig({
-  plugins: [
-    vueJsxVapor({
-      macros: true,
-    }),
-  ]
-})
-
-```
-
-Usage
-
-```tsx
-const Comp = defineComponent(({ foo }) => {
-  return <>{foo}</>
-})
-// Will be convert to:
-const Comp = defineComponent((_props) => {
-  return <>{_props.foo}</>
-}, { props: ['foo'] })
-
-export default () => {
-  const foo = ref('foo')
-  return <Comp foo={foo.value} />
-}
-```
-
-## Typescript
-
-Because of vue-jsx-vapor support all directives and most macros of Vue,\
-so we need the VSCode plugin [ts-macro](https://github.com/ts-macro/ts-macro) to use the `vue-jsx-vapor/volar` plugin for Typescript support.\
-It works similarly to [@vue/language-tools](https://github.com/vuejs/language-tools) but only used for `ts` or `tsx` files.
-
-By default, after installing the `ts-macro` VSCode plugin, `ts-macro` will automatically load `vue-jsx-vapor/volar` by analyzing `vite.config.ts` and shared vueJsxVapor's options. so you don't need to config `tsm.config.ts`. But if you want, you can also configure it manually:
-
-```ts
-// tsm.config.ts
-import vueJsxVapor from 'vue-jsx-vapor/volar'
-
-export default {
-  plugins: [
-    vueJsxVapor({
-      macros: true,
-    }),
-  ],
-}
-
-```
+## Usage
 
+- [📜 Documentation]((https://jsx-vapor.netlify.app/))
+- [🛰️ Playground](https://repl.zmjs.dev/vuejs/vue-jsx-vapor)
 
 <details>
 <summary>Vite</summary><br>

docs/index.md

@@ -26,10 +26,10 @@ features:
     details: Support most macros of Vue, Friendly to JSX.
   - icon: 🦾
     title: Type Safe
-    details: Provide Volar support by install TS Macro (VSCode plugin).
+    details: Provide Volar plugin support by install TS Macro (VSCode plugin).
   - icon: ⚡️
     title: High Performance
-    details: It has the same performance with Vue Vapor!
+    details: It has the same performance as Vue Vapor!
   - icon: 🌈
     title: Hot Module Replacement
     details: Support functional components or defined by defineComponent.

docs/introduction/getting-started.md

@@ -51,10 +51,9 @@ export default defineConfig({
 
 ## Typescript
 
-Because of `vue-jsx-vapor` support all directives and most macros of Vue, so we need the VSCode plugin [ts-macro](https://github.com/ts-macro/ts-macro) to use the `vue-jsx-vapor/volar` plugin for Typescript support.\
-It works similarly to [@vue/language-tools](https://github.com/vuejs/language-tools) but only used for `ts` or `tsx` files.
+Due to `vue-jsx-vapor`'s support for all Vue directives and most Vue macros, the [ts-macro](https://github.com/ts-macro/ts-macro) VSCode plugin is required to enable TypeScript support when using the `vue-jsx-vapor/volar` plugin.
 
-By default, after installing the `ts-macro` VSCode plugin, `ts-macro` will automatically load `vue-jsx-vapor/volar` by analyzing `vite.config.ts` and shared vueJsxVapor's options. so you don't need to config `tsm.config.ts`. But if you want, you can also configure it manually:
+After installing the `ts-macro` VSCode plugin, it automatically loads `vue-jsx-vapor/volar` by analyzing vite.config.ts and shared vueJsxVapor options, eliminating the need to configure tsm.config.ts.
 
 ::: code-group
 

packages/vue-jsx-vapor/src/core/runtime.ts

@@ -1,13 +1,12 @@
 import {
-  effectScope,
+  EffectScope,
   insert,
   isFragment,
   isVaporComponent,
   remove,
   renderEffect,
   VaporFragment,
   type Block,
-  type EffectScope,
 } from 'vue'
 
 export { shallowRef as useRef } from 'vue'
@@ -80,7 +79,7 @@ function resolveValues(values: any[] = [], _anchor?: Element) {
     if (typeof value === 'function') {
       renderEffect(() => {
         if (scopes[index]) scopes[index].stop()
-        scopes[index] = effectScope()
+        scopes[index] = new EffectScope()
         nodes[index] = scopes[index].run(() =>
           resolveValue(nodes[index], value(), anchor),
         )!