Merge branch 'master' into fix-setup-compiler-move-error

docs-vitepress/.vitepress/config.ts

@@ -4,6 +4,7 @@ import {
     groupIconMdPlugin,
     groupIconVitePlugin,
 } from "vitepress-plugin-group-icons"
+import { transformerTwoslash } from "@shikijs/vitepress-twoslash"
 import {
     algoliaTranslations,
     localSearchTranslations,
@@ -226,11 +227,6 @@ export default withPwa(
         head: [
             ["link", { rel: "icon", href: "/favicon.ico" }],
             ["link", { rel: "manifest", href: "/manifest.webmanifest" }],
-            [
-                "script",
-                { id: "unregister-sw" },
-                "if('serviceWorker' in navigator) window.addEventListener('load', (e) => navigator.serviceWorker.register('/service-worker.js', { scope: '/' }))",
-            ],
             [
                 "script",
                 { type: "text/javascript" },
@@ -266,6 +262,8 @@ export default withPwa(
                 light: "github-light",
                 dark: "github-dark",
             },
+            // @ts-ignore
+            codeTransformers: [transformerTwoslash()],
             config(md) {
                 md.use(groupIconMdPlugin)
             },
@@ -292,7 +290,7 @@ export default withPwa(
                 globPatterns: ["**/*.{css,js,html,svg,png,ico,txt,woff2}"],
             },
             devOptions: {
-                enabled: false,
+                enabled: true,
                 suppressWarnings: true,
                 navigateFallback: "/",
             },
@@ -363,6 +361,7 @@ export default withPwa(
         },
         vite: {
             logLevel: "info",
+            // @ts-ignore
             plugins: [groupIconVitePlugin()],
         },
         // @ts-ignore

docs-vitepress/.vitepress/theme/components/Navbar.vue

@@ -66,7 +66,7 @@ export default {
       if (path !== '/') {
         return ''
       }
-      return isSidebarOpen.value ? 'transform: translateY(0);z-index: 0;display: none' : ''
+      return isSidebarOpen.value ? 'transform: translateY(0);' : ''
     })
 
     const isAlgoliaSearch = computed(() => {

docs-vitepress/.vitepress/theme/index.js

@@ -1,7 +1,9 @@
 import { h } from "vue"
 import DefaultTheme from "vitepress/theme"
+import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client"
 import HomepageLayout from "./layouts/HomepageLayout.vue"
 
+import '@shikijs/vitepress-twoslash/style.css'
 import "virtual:group-icons.css"
 import "./styles/index.css"
 import "./styles/switchAppearance.css"
@@ -11,4 +13,7 @@ export default {
     Layout() {
         return h(HomepageLayout)
     },
+    enhanceApp({ app }) {
+        app.use(TwoslashFloatingVue)
+    },
 }

docs-vitepress/api/global-api.md

@@ -402,7 +402,7 @@ createComponent({
 选项式 API 中使用，作用同[onResize](/api/composition-api.html#onresize)
 
 ## 响应式 API
-详情请[移步](/api/reactivity-api/basic-reactivity.html)
+详情请[移步](/api/reactivity-api.html)
 
 ## 组合式 API
 详情请[移步](/api/composition-api.html)

docs-vitepress/guide/advance/provide-inject.md

@@ -210,38 +210,42 @@ export const InjectionKeys = {
 
 直接使用字符串注入 key 时，注入值的类型默认推导会是 `unknown`，需要通过泛型参数显式声明。因为无法保证运行时一定存在这个 provide，所以推导类型也可能是 `undefined`。当声明一个默认值后，这个 `undefined` 类型就可以成功被移除。
 
-```ts
-<script setup lang="ts">
+```ts twoslash
 import { inject } from '@mpxjs/core'
 
-const foo = inject('foo') // 类型：unknown
-const foo = inject<string>('foo') // 类型：string | undefined
-const foo = inject<string>('foo', 'default value') // 类型：string ✅
-</script>
+const foo1 = inject('foo') // 类型：unknown
+const foo2 = inject<string>('foo') // 类型：string | undefined
+const foo3 = inject<string>('foo', 'default value') // 类型：string ✅
 ```
 
 当然，如果你已经确定注入名肯定被提供了，也可以强制断言。
 
-```ts
+```ts twoslash
+import { inject } from '@mpxjs/core'
+
 const foo = inject('foo') as string
 ```
 
 如果使用 `Symbol` 作为注入名，可以使用我们提供的 `InjectionKey` 泛型接口，使用它对注入名进行注解或者断言后，可以用来在不同组件之间同步注入值的类型。建议将注入 key 放在单独文件，这样方便在多个组件中导入使用。
 
-```ts{4}
+```ts{4} twoslash
+// @errors: 2345 1146 1005
 import { provide, inject } from '@mpxjs/core'
 import type { InjectionKey } from '@mpxjs/core'
 
 export const key: InjectionKey<string> = Symbol() // 类型注解
 // const key = Symbol() as InjectionKey<string> // 类型断言写法等效
 
-provide(key, 'foo') // 若默认值是非字符串则会 TS 类型报错
+provide(key, 'foo') // ✅
+provide(key, 123) // ❌
 
-const foo = inject(key) // ✅ foo 的类型：string | undefined
-const foo = inject(key, 'default value') // ✅ foo 的类型：string
-const foo = inject(key, 1) // ❌ 默认值是非字符串则会 TS 类型报错
+const foo1 = inject(key) // ✅ foo1: string | undefined
+const foo2 = inject(key, 'default value') // ✅ foo2: string
+const foo3 = inject(key, 123) // ❌ 默认值应当为字符串类型
 ```
 
+> 👀 鼠标悬浮到上面代码可以查看具体 TS 类型
+
 ## 跨端差异
 
 - Mpx 输出 **Web** 端，使用规则与 Vue 一致，`provide/inject` 的生效范围严格遵行父子组件关系，只有父组件可以成功向子孙组件提供依赖。

docs-vitepress/guide/basic/ide.md

@@ -1,62 +1,57 @@
 # IDE 高亮配置
 
-- [IntelliJ](ide.md#IntelliJ)
-- [vscode](ide.md#vscode)
+-   [IntelliJ](ide.md#intellij)
+-   [vscode](ide.md#vscode)
 
 ## IntelliJ
 
-如果使用 IntelliJ 系 IDE 开发，可将`.mpx`后缀文件关联到`vue`模板类型，按`vue`模板解析。
+如果使用 IntelliJ 系 IDE 开发，可将 `.mpx` 后缀文件关联到 `vue` 模板类型，按 `vue` 模板解析。
 
 ![关联文件类型](../../assets/images/start-tips2.png)
 
-但会报一个`warning`提示有重复的`script`标签，关闭该警告即可。
+但会报一个 `warning` 提示有重复的 `script` 标签，关闭该警告即可。
 
 ![关闭警告](../../assets/images/start-tips1.png)
 
 ## vscode
 
-> [git地址](https://github.com/mpx-ecology/vscode-mpx)，有任何vscode插件的问题和需求可在仓库中提issue
+### 语法高亮插件
 
-> 下载
+#### 下载
 
-1. [下载地址](https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx)
+-   [下载地址](https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx)（也可直接在 vscode 扩展处搜索 mpx 即可下载）
+-   [git 地址](https://github.com/mpx-ecology/vscode-mpx)（有任何 vscode 插件的问题和需求可在仓库中提 issue）
 
-2. 也可直接在vscode扩展处搜索mpx即可下载
+#### 功能介绍
 
-> 使用
-
-### 插件功能介绍
-
-- 高亮
-- emmet
-- 跳转定义
-- 自动补全
-- eslint
-- 格式化
+-   语法高亮
+-   emmet
+-   跳转定义
+-   自动补全
+-   eslint
+-   格式化
 
 [视频介绍](https://gift-static.hongyibo.com.cn/static/kfpub/3227/vscodes.mp4)
 
-
 #### 高亮
 
-&ensp;&ensp;与其他语言插件无异，提供相应代码的高亮，因为Mpx分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如`<template>`中使用的是html的高亮，且注释是`<!-- -->`,而`<script>`中就是`js`的高亮，注释是`//`
+&ensp;&ensp;与其他语言插件无异，提供相应代码的高亮，因为 Mpx 分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如`<template>`中使用的是 html 的高亮，且注释是`<!-- -->`,而`<script>`中就是`js`的高亮，注释是`//`
 
 ![image](https://gift-static.hongyibo.com.cn/static/kfpub/3547/codelight.jpeg)
 
 #### emmet
 
-&ensp;&ensp;早在使用sublime时就在使用emmet插件，以提高写HTML的效率。
+&ensp;&ensp;早在使用 sublime 时就在使用 emmet 插件，以提高写 HTML 的效率。
 
 &ensp;&ensp;比如键入多个`<view>`标签：`view*n`。
 
 &ensp;&ensp;比如一些标签的快速键入，配合`tab`或者`Enter`键快速键入
 
-&ensp;&ensp;不仅仅是`<template>`模块，css，scss，less，stylus，sass模块也有相应的快捷指令
+&ensp;&ensp;不仅仅是`<template>`模块，css，scss，less，stylus，sass 模块也有相应的快捷指令
 
 ![image](https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200258.gif)
 ![image](https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200331.gif)
 
-
 提示组件标签
 
 我们可以像编写 html 一样，只要输入对应的单词就会出现对应的标签，比如输入的是 view ，然后按下 tab 键，即可输入 `<view></view>` 标签。
@@ -89,33 +84,33 @@
 
 #### 自动补全
 
-&ensp;&ensp;毕竟Mpx是个小程序的框架，对于微信和支付宝的api快速补全snippets没有怎么能行，可在`<script>`中通过键入部分文字插入相应的代码块
+&ensp;&ensp;毕竟 Mpx 是个小程序的框架，对于微信和支付宝的 api 快速补全 snippets 没有怎么能行，可在`<script>`中通过键入部分文字插入相应的代码块
 
 ![image](https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-201858.gif)
 
 #### eslint
 
-&ensp;&ensp;eslint这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的eslint，另一部分是要配合eslint的vscode插件，配置.eslintrc高阶的eslint检测。
+&ensp;&ensp;eslint 这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的 eslint，另一部分是要配合 eslint 的 vscode 插件，配置.eslintrc 高阶的 eslint 检测。
 
 部分一可通过配置开关
 
-`<template>`是通过我们自己实现的eslint插件`eslint-plugin-mpx`，通过调eslint提供的引擎api，返回eslint校验的结果，我们再进行展示。
+`<template>`是通过我们自己实现的 eslint 插件`eslint-plugin-mpx`，通过调 eslint 提供的引擎 api，返回 eslint 校验的结果，我们再进行展示。
 
-`<script>`中是通过调用typescript提供的检测js代码的api来进行检测，返回
+`<script>`中是通过调用 typescript 提供的检测 js 代码的 api 来进行检测，返回
 的校验结果也是不太符合语法的，基础的检测，不会过于苛刻
 
-`<style>`中会根据lang的设定进行相应的检测，此检测是vscode官方提供的库
+`<style>`中会根据 lang 的设定进行相应的检测，此检测是 vscode 官方提供的库
 `vscode-css-languageservice`
 
-`<json>`模块同tempalte，用到了一个eslint插件`eslint-plugin-jsonc`来检测json的部分
+`<json>`模块同 tempalte，用到了一个 eslint 插件`eslint-plugin-jsonc`来检测 json 的部分
 
 ![image](https://gift-static.hongyibo.com.cn/static/kfpub/3547/vscodeseting.png)
 
 部分二可参照此[链接](https://github.com/mpx-ecology/vscode-mpx/issues/35)配置
 
 #### 代码格式化
 
-支持代码格式化 JavaScript  (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。
+支持代码格式化 JavaScript (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。
 
 <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format_v2.png" width="500" alt="图片名称" />
 
@@ -136,6 +131,7 @@ Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项
 ```
 
 注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。
+
 ```
 "mpx.format.defaultFormatterOptions": {
   "stylus-supremacy": {
@@ -147,4 +143,19 @@ Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项
   }
 }
 ```
+
 总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。
+
+### 模版增强插件
+
+#### 下载
+
+-   [下载地址](https://marketplace.visualstudio.com/items?itemName=wangshun.mpx-template-features)（也可直接在 vscode 扩展处搜索 Mpx Template Features 即可下载）
+
+#### 功能介绍
+
+-   支持模板中的变量定义跳转
+-   class 类名 hover 展示对应的 style 样式
+-   stylus 一键转换为原子类 Unocss，支持自定义转换规则
+-   模板中变量自动补全
+-   支持拆分 SFC 文件为多个编辑视图

docs-vitepress/guide/composition-api/composition-api.md

@@ -11,15 +11,15 @@
 
 更多关于组合式 API 的说明可以查看 [Vue3 官方文档](https://vuejs.org/guide/extras/composition-api-faq.html)。
 
-Mpx 是一个小程序优先的增强型跨端框架，因此我们在为 Mpx 设计实现组合式 API 的过程中，并不追求与 Vue3 中的组合式 API 完全一致，我们更多是借鉴 Vue3 中组合式 API 的设计思想，将其与目前 Mpx 及小程序中的开发模式结合起来，而非完全照搬其实现。因此在 Mpx 中一些具体的 API 设计实现会与 Vue3 存在差异，我们会在后续相关的文档中进行标注说明，如果你想查看 Mpx 与 Vue3 在组合式 API 中的差异，可以跳转到[这里](#组合式-API-与-Vue3-中的区别)查看。 
+Mpx 是一个小程序优先的增强型跨端框架，因此我们在为 Mpx 设计实现组合式 API 的过程中，并不追求与 Vue3 中的组合式 API 完全一致，我们更多是借鉴 Vue3 中组合式 API 的设计思想，将其与目前 Mpx 及小程序中的开发模式结合起来，而非完全照搬其实现。因此在 Mpx 中一些具体的 API 设计实现会与 Vue3 存在差异，我们会在后续相关的文档中进行标注说明，如果你想查看 Mpx 与 Vue3 在组合式 API 中的差异，可以跳转到[这里](#组合式-api-与-vue3-中的区别)查看。 
 
 ## 组合式 API 基础
 
 ### setup 函数
 
 同 Vue3 一样，在 Mpx 当中 `setup` 函数是组合式 API 的基础，我们可以在 `createPage` 和 `createComponent` 中声明 `setup` 函数。
 
-`setup` 函数接收 `props` 和 `context` 两个参数，其中 `context` 参数与 Vue3 中存在差别，详情可以查看[这里](#Setup)。
+`setup` 函数接收 `props` 和 `context` 两个参数，其中 `context` 参数与 Vue3 中存在差别，详情可以查看[这里](#setup)。
 
 我们参考 Vue3 中的示例实现一个小程序版本，可以看到它和 Vue3 中的实现基本一致，包含以下功能：
 
@@ -94,7 +94,7 @@ createComponent({
 
 ### 在 `setup` 中注册生命周期钩子
 
-为了完整实现选项式 API 中的能力，我们需要支持在 `setup` 中注册生命周期钩子，同 Vue3 类似，我们也提供了一系列生命周期钩子的注册函数，这些函数都以 `on` 开头，不过由于 Mpx 的跨平台特性，我们不可能针对不同的平台提供不同的生命周期钩子函数，因此我们提供了一份抹平跨平台差异后统一的生命周期钩子，与小程序原生生命周期的映射关系可查看[这里](#生命周期钩子)。
+为了完整实现选项式 API 中的能力，我们需要支持在 `setup` 中注册生命周期钩子，同 Vue3 类似，我们也提供了一系列生命周期钩子的注册函数，这些函数都以 `on` 开头，不过由于 Mpx 的跨平台特性，我们不可能针对不同的平台提供不同的生命周期钩子函数，因此我们提供了一份抹平跨平台差异后统一的生命周期钩子，与小程序原生生命周期的映射关系可查看[这里](#lifecycle-hooks)。
 
 我们希望在组件挂载时调用 `getUserRepositories`，可以使用 `onMounted` 钩子来实现，注意这里不是 `onReady`，不过它确实对应于微信小程序中组件的 `ready` 钩子：
 
@@ -828,20 +828,20 @@ const props = withDefaults(defineProps<Props>(), {
 
 下面我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：
 
-* `setup` 的 `context` 参数不同，详见[这里](#Context)
+* `setup` 的 `context` 参数不同，详见[这里](#context)
 * `setup` 不支持返回**渲染函数**
 * `setup` 不能是异步函数
 * `<script setup>` 提供的宏方法不同，详见[这里](#script-setup)
 * `<script setup>` 不支持 `import` 快捷引入组件
-* `<script setup>` 必须使用 [defineExpose](#defineprops)
-* 支持的生命周期钩子不同，详见[这里](#生命周期钩子)
-* 模板引用的方式不同，详见[这里](#模板引用)
+* `<script setup>` 必须使用 [defineExpose](#defineexpose)
+* 支持的生命周期钩子不同，详见[这里](#lifecycle-hooks)
+* 模板引用的方式不同，详见[这里](#template-ref)
 
 ## 组合式 API 周边生态能力的使用
 
 我们对 Mpx 提供的周边生态能力也都进行了组合式 API 适配升级，详情如下：
 
 * `store` 在组合式 API 中使用，详见[这里](../advance/store.md#use-store-in-composition-api)
 * `pinia` 在组合式 API 中使用，详见[这里](../advance/pinia.md)
-* `fetch` 在组合式 API 中使用，详见[这里](../extend/fetch.md/#composition-api-usage)
+* `fetch` 在组合式 API 中使用，详见[这里](../extend.md#usefetch)
 * `i18n` 在组合式 API 中使用，详见[这里](../advance/i18n.md#composition-api-usage)

docs-vitepress/guide/composition-api/reactive-api.md

@@ -17,7 +17,7 @@ const state = reactive({
 })
 ```
 
-你可以在[响应式基础 API](../../api/reactivity-api/basic-reactivity.md) 章节中了解更多关于 `reactive` 的信息。
+你可以在[响应式基础 API](../../api/reactivity-api.md#reactive) 章节中了解更多关于 `reactive` 的信息。
 
 ## 使用`ref()`创建独立的响应式值 {#use-ref-create-reactive-value}
 
@@ -139,7 +139,7 @@ age.value = 30 // age 现在是个 ref，我们需要使用 .value 进行访问
 console.log(people.age) // 30
 ```
 
-你可以在[Refs API](../../api/reactivity-api/refs-api.md) 章节中了解更多关于 `refs` 的信息。
+你可以在[Refs API](../../api/reactivity-api.md#refs) 章节中了解更多关于 `refs` 的信息。
 
 ## 计算值
 
@@ -191,7 +191,7 @@ setTimeout(() => {
 
 ### 停止侦听
 
-当 `watchEffect` 在组件的 [setup()](composition-api.md#Setup) 函数或[生命周期钩子](composition-api.md#生命周期钩子)被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
+当 `watchEffect` 在组件的 [setup()](composition-api.md#Setup) 函数或[生命周期钩子](composition-api.md#lifecycle-hooks)被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
 
 在一些情况下，也可以显式调用返回值以停止侦听：
 
@@ -271,7 +271,7 @@ createComponent({
 * `count` 会在初始运行时同步打印出来
 * 更改 `count` 时，将在组件**更新前**执行副作用。
 
-如果需要在组件更新(例如：当与[模板引用](composition-api.md#模板引用)一起)后重新运行侦听器副作用，我们可以传递带有 `flush` 选项的附加 `options` 对象 (默认为 `'pre'`)：
+如果需要在组件更新(例如：当与[模板引用](composition-api.md#template-ref)一起)后重新运行侦听器副作用，我们可以传递带有 `flush` 选项的附加 `options` 对象 (默认为 `'pre'`)：
 
 ```js
 // 在组件更新后触发，这样你就可以访问更新的 DOM。