Merge branch 'master' into feat-rn-split-chunk-rnExternalRequests

Author: hiyuki

docs-vitepress/.vitepress/config.ts

@@ -18,7 +18,7 @@ const sidebar = {
                 { text: "快速开始", link: "/guide/basic/start" },
                 { text: "介绍", link: "/guide/basic/intro" },
                 { text: "单文件开发", link: "/guide/basic/single-file" },
-                { text: "IDE 高亮配置", link: "/guide/basic/ide" },
+                { text: "IDE 支持", link: "/guide/basic/ide" },
                 { text: "模板语法", link: "/guide/basic/template" },
                 { text: "CSS 处理", link: "/guide/basic/css" },
                 { text: "数据响应", link: "/guide/basic/reactive" },

docs-vitepress/assets/images/ide-mpx-official-demo-1.png

@@ -1,161 +1,33 @@
-# IDE 高亮配置
+# IDE 支持
 
--   [IntelliJ](ide.md#intellij)
--   [vscode](ide.md#vscode)
+## VS Code
 
-## IntelliJ
-
-如果使用 IntelliJ 系 IDE 开发，可将 `.mpx` 后缀文件关联到 `vue` 模板类型，按 `vue` 模板解析。
-
-![关联文件类型](../../assets/images/start-tips2.png)
-
-但会报一个 `warning` 提示有重复的 `script` 标签，关闭该警告即可。
-
-![关闭警告](../../assets/images/start-tips1.png)
-
-## vscode
-
-### 语法高亮插件
-
-#### 下载
-
--   [下载地址](https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx)（也可直接在 vscode 扩展处搜索 mpx 即可下载）
--   [git 地址](https://github.com/mpx-ecology/vscode-mpx)（有任何 vscode 插件的问题和需求可在仓库中提 issue）
-
-#### 功能介绍
-
--   语法高亮
--   emmet
--   跳转定义
--   自动补全
--   eslint
--   格式化
-
-[视频介绍](https://gift-static.hongyibo.com.cn/static/kfpub/3227/vscodes.mp4)
-
-#### 高亮
-
-&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;比如键入多个`<view>`标签：`view*n`。
-
-&ensp;&ensp;比如一些标签的快速键入，配合`tab`或者`Enter`键快速键入
-
-&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>` 标签。
-
-<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi1_v2.png" width="500" alt="图片名称" />
-
-组件指令提示
-
-指令的提示类似于 vue 文件一样，只要输入对应的指令前缀就会出现对应的完整指令，比如输入的是 wx ，然后按下 tab 键，就可以输入 wx:if="" 指令。
+推荐使用的 IDE 是 [VS Code](https://code.visualstudio.com)，配合官方维护的新版本 [**Mpx (Official)**](https://marketplace.visualstudio.com/items?itemName=mpxjs.mpx-official) 插件。该插件提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示，提供更好的开发体验。
 
-<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi2_v2.png" width="500" alt="图片名称" />
+::: tip 注意
+Mpx (Official) 现在取代了我们过去提供的插件 [mpx](https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx)、[mpx-template-features](https://marketplace.visualstudio.com/items?itemName=wangshun.mpx-template-features)。历史插件将不再维护逐步废弃，请大家及时切换到新版插件。更多历史背景及功能差异请参考[说明](https://github.com/mpx-ecology/language-tools?tab=readme-ov-file#why-new-extension)。
+:::
 
-组件属性提示
+Mpx (Official) 插件一大亮点功能是为 `<template>` 模板中的变量支持 TS 智能提示，包括类型提示、类型检查、自动补全、定义跳转等等功能。如下图所示：
 
-微信小程序的每个组件都有一些属性选项，在编写组件的时候输入前缀就会出现完整的属性，并且包含了属性的说明和属性的类型。
+![模板类型提示演示1](../../assets/images/ide-mpx-official-demo-1.png)
 
-<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi3_v2.png" width="500" alt="图片名称" />
+![模板类型检查演示2](../../assets/images/ide-mpx-official-demo-2.png)
 
-组件事件提示
+有关更多插件详细功能介绍和使用说明，请参阅我们的[插件文档](https://github.com/mpx-ecology/language-tools/wiki)。
 
-给组件绑定事件，也是只需要输入事件的前缀，就会出现完整的事件列表，然后按下 tab 键，即可输入 bindtap="" 类似的事件。
+## Open VSX 插件生态 IDE
 
-<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi4_v2.png" width="500" alt="图片名称" />
+[Open VSX](https://open-vsx.org/) 是 Visual Studio Marketplace（VS Code 官方插件市场）的开源替代方案，可以为兼容 VS Code 的 IDE 提供插件市场支持。[Mpx (Official)](https://open-vsx.org/extension/mpxjs/mpx-official) 插件支持在 Open VSX 同步发版。
 
-#### 跳转定义
+目前主流的 AI IDE 比如 [Cursor](https://cursor.com/cn)、[Trae](https://www.trae.cn)、[windsurf](https://windsurf.com/) 等等，基于都是 fork VS Code 开发，内部插件市场一般由 Open VSX 提供支持。如果您使用此类 IDE 或者其他支持 Open VSX 插件源的 IDE，可直接搜索安装 Mpx (Official)。
 
-&ensp;&ensp;command + 鼠标左键 查看定义位置，也可以在当前文件查看内容，决定是否跳转
-
-![image](https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200848.gif)
-
-#### 自动补全
-
-&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 检测。
-
-部分一可通过配置开关
-
-`<template>`是通过我们自己实现的 eslint 插件`eslint-plugin-mpx`，通过调 eslint 提供的引擎 api，返回 eslint 校验的结果，我们再进行展示。
-
-`<script>`中是通过调用 typescript 提供的检测 js 代码的 api 来进行检测，返回
-的校验结果也是不太符合语法的，基础的检测，不会过于苛刻
-
-`<style>`中会根据 lang 的设定进行相应的检测，此检测是 vscode 官方提供的库
-`vscode-css-languageservice`
-
-`<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，通过鼠标右键选择代码格式化文档。
-
-<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format_v2.png" width="500" alt="图片名称" />
-
-默认每个区块都是调用 Prettier 这个库来完成格式化的，当然也可以在设置中切换成使用其他库。
-
-<img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format2_v3.png" width="500" alt="图片名称" />
-
-如果切换成 none 将会禁用格式化。
-
-Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项可以参考 [官方](https://prettier.io/docs/en/configuration.html) 文档。.prettierrc 文件可以使用 JSON 语法编写，比如下面这样：
-
-```
-{
-  "tabWidth": 4,
-  "semi": false,
-  "singleQuote": true
-}
-```
-
-注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。
-
-```
-"mpx.format.defaultFormatterOptions": {
-  "stylus-supremacy": {
-    "insertColons": false, // 不使用括号
-    "insertSemicolons": false, // 不使用冒号
-    "insertBraces": false, // 不使用分号
-    "insertNewLineAroundImports": true, // import之后插入空行
-    "insertNewLineAroundBlocks": false // 每个块不添加空行
-  }
-}
-```
-
-总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。
-
-### 模版增强插件
+## IntelliJ
 
-#### 下载
+如果使用 IntelliJ 系 IDE 开发，可将 `.mpx` 后缀文件关联到 `vue` 模板类型，按 `vue` 模板解析。
 
--   [下载地址](https://marketplace.visualstudio.com/items?itemName=wangshun.mpx-template-features)（也可直接在 vscode 扩展处搜索 Mpx Template Features 即可下载）
+![关联文件类型](../../assets/images/start-tips2.png)
 
-#### 功能介绍
+但会报一个 `warning` 提示有重复的 `script` 标签，关闭该警告即可。
 
--   支持模板中的变量定义跳转
--   class 类名 hover 展示对应的 style 样式
--   stylus 一键转换为原子类 Unocss，支持自定义转换规则
--   模板中变量自动补全
--   支持拆分 SFC 文件为多个编辑视图
+![关闭警告](../../assets/images/start-tips1.png)

docs-vitepress/assets/images/ide-mpx-official-demo-2.png

@@ -97,10 +97,10 @@ sixSection:
     details: 页面桥接
     icon: https://dpubstatic.udache.com/static/dpubimg/trdVxyR_5_/kaifa_icon_6.png
     actionLink: /api/extend.html#webview-bridge
-  - title: '@mpxjs/vscode-plugin ide'
-    details: 插件
+  - title: 'Mpx language tools'
+    details: IDE 插件等语言工具
     icon: https://dpubstatic.udache.com/static/dpubimg/PczNH3wywM/kaifa_icon_7.png
-    actionLink: https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx
+    actionLink: https://github.com/mpx-ecology/language-tools
   - title: '@mpxjs/es-check'
     details: 高级语法检查
     icon: https://dpubstatic.udache.com/static/dpubimg/qXb0ZEY4xN/kaifa_icon_8.png

docs-vitepress/guide/basic/ide.md

@@ -7,7 +7,7 @@
 /// <reference path="./global.d.ts" />
 /// <reference path="./node.d.ts" />
 
-import { GetComputedType } from '@mpxjs/store'
+import type { GetComputedType } from '@mpxjs/store'
 
 export * from '@mpxjs/store'
 
@@ -255,11 +255,22 @@ interface AnyConstructor {
   prototype: any
 }
 
-interface WebviewConfig {
+export interface WebviewConfig {
   hostWhitelists?: Array<string>
   apiImplementations?: object
 }
 
+export interface RnConfig {
+  onStateChange?: (state: any) => void
+  parseAppProps?: (props: any) => ({ initialRouteName?: string, initialParams?: any } | undefined | null | void)
+  /**
+   * 外层可能会异常设置此配置，因此加载监听函数内部
+   */
+  disableAppStateListener?: boolean
+  /** 进入页面是否控制回退按钮的展示以及监听回退按钮的点击 */
+  onStackTopBack?: () => void
+}
+
 interface MpxConfig {
   useStrictDiff: boolean
   ignoreWarning: boolean | string | RegExp | ((msg: string, location: string, e: Error) => boolean)
@@ -272,8 +283,14 @@ interface MpxConfig {
   forceFlushSync: boolean,
   webRouteConfig: object,
   webConfig: object,
+  /*
+   * 支持两个属性
+   * hostWhitelists Array 类型 支持h5域名白名单安全校验
+   * apiImplementations webview JSSDK接口 例如getlocation
+  */
   webviewConfig: WebviewConfig,
-  rnConfig: object,
+  /** react-native 相关配置，用于挂载事件等，如 onShareAppMessage */
+  rnConfig?: RnConfig,
 }
 
 type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'
@@ -664,9 +681,15 @@ export const SERVERPREFETCH: string
 export const REACTHOOKSEXEC: string
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const defineProps: (<T extends Properties = {}>(props: T) => Readonly<GetPropsType<T>>) & (<T>() => Readonly<T>)
   const defineOptions: <D extends Data = {}, P extends Properties = {}, C = {}, M extends Methods = {}, Mi extends Array<any> = [], S extends AnyObject = {}, O extends AnyObject = {}> (opt: ThisTypedComponentOpt<D, P, C, M, Mi, S, O>) => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const defineExpose: <E extends AnyObject = AnyObject>(exposed?: E) => void
   const useContext: () => Context
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const withDefaults: <Props, Defaults extends InferDefaults<Props>>(props: Props, defaults: Defaults) => PropsWithDefaults<Props, Defaults>
 }

docs-vitepress/index.md

@@ -115,6 +115,9 @@ function use (plugin, options = {}) {
 
 APIs.use = use
 
+/**
+ * @returns {import('@mpxjs/core').Mpx}
+ */
 function factory () {
   // 作为原型挂载属性的中间层
   function Mpx () {
@@ -125,6 +128,9 @@ function factory () {
   return Mpx
 }
 
+/**
+ * @type {import('@mpxjs/core').Mpx}
+ */
 const Mpx = factory()
 
 Mpx.config = {

packages/core/@types/index.d.ts

@@ -2,6 +2,9 @@ import { isObject, isArray, dash2hump, cached, isEmptyObject } from '@mpxjs/util
 import { Dimensions, StyleSheet } from 'react-native'
 
 let { width, height } = Dimensions.get('screen')
+// TODO 临时适配折叠屏场景适配
+const isLargeFoldableLike = (__mpx_mode__ === 'android') && (height / width < 1.5) && (width > 600)
+if (isLargeFoldableLike) width = width / 2
 
 Dimensions.addEventListener('change', ({ screen }) => {
   width = screen.width

packages/core/src/index.js

@@ -95,14 +95,23 @@ export function innerNav ({ pageConfig, navigation }) {
   const safeAreaTop = useSafeAreaInsets()?.top || 0
   // 假设是栈导航，获取栈的长度
   const stackLength = navigation.getState()?.routes?.length
-  // 用于外部注册打开RN容器之前的栈长度
-  const beforeStackLength = Mpx.config?.rnConfig?.beforeStackLength || 0
+  const onStackTopBack = Mpx.config?.rnConfig?.onStackTopBack
+  const isHandleStackTopBack = typeof onStackTopBack === 'function'
 
   // 回退按钮与图标
-  const backElement = stackLength + beforeStackLength > 1
+  const backElement = stackLength > 1 || isHandleStackTopBack
   ? createElement(TouchableOpacity, {
     style: [styles.backButton],
-    onPress: () => { navigation.goBack() }
+    onPress: () => {
+      if (stackLength <= 1) {
+        if (isHandleStackTopBack) {
+          onStackTopBack()
+        }
+        return
+      }
+
+      navigation.goBack()
+    }
   }, createElement(Image, {
     source: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg==' },
     // 回退按钮的颜色与设置的title文案颜色一致

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -304,7 +304,14 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
 
   if (type === 'page') {
     const props = propsRef.current
-    proxy.callHook(ONLOAD, [props.route.params || {}])
+    const loadParams = {}
+    // 此处拿到的props.route.params内属性的value被进行过了一次decode, 不符合预期，此处额外进行一次encode来与微信对齐
+    if (isObject(props.route.params)) {
+      for (const key in props.route.params) {
+        loadParams[key] = encodeURIComponent(props.route.params[key])
+      }
+    }
+    proxy.callHook(ONLOAD, [loadParams])
   }
 
   Object.assign(proxy, {