feat(app-nvue): auto add render-whole

packages/uni-app-vite/__tests__/nvue/__snapshots__/compiler.spec.ts.snap

@@ -19,7 +19,8 @@ exports[`app-nvue: compiler <scroll-view data-id="id" scroll-x="true" :show-scro
 const _hoisted_1 = {
   \\"data-id\\": \\"id\\",
   scrollX: \\"true\\",
-  showScrollbar: true
+  showScrollbar: true,
+  renderWhole: true
 }
 
 export function render(_ctx, _cache) {
@@ -76,41 +77,44 @@ export function render(_ctx, _cache) {
 exports[`app-nvue: compiler <view><text>hello</text></view> 1`] = `
 "import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"u-text\\", null, \\"hello\\", -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
+const _hoisted_1 = { renderWhole: true }
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"u-text\\", null, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_3 = [
+  _hoisted_2
 ]
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"view\\", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock(\\"view\\", _hoisted_1, _hoisted_3))
 }"
 `;
 
 exports[`app-nvue: compiler <view>hello</view> 1`] = `
 "import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"u-text\\", null, \\"hello\\", -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
+const _hoisted_1 = { renderWhole: true }
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"u-text\\", null, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_3 = [
+  _hoisted_2
 ]
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"view\\", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock(\\"view\\", _hoisted_1, _hoisted_3))
 }"
 `;
 
 exports[`app-nvue: compiler <view>hello{{a}}<view>aaa{{a}}</view>{{b}}</view> 1`] = `
 "import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"u-text\\", null, \\"hello\\", -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"u-text\\", null, \\"aaa\\", -1 /* HOISTED */)
+const _hoisted_1 = { renderWhole: true }
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"u-text\\", null, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"u-text\\", null, \\"aaa\\", -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"view\\", null, [
-    _hoisted_1,
+  return (_openBlock(), _createElementBlock(\\"view\\", _hoisted_1, [
+    _hoisted_2,
     _createElementVNode(\\"u-text\\", null, _toDisplayString(_ctx.a), 1 /* TEXT */),
     _createElementVNode(\\"view\\", null, [
-      _hoisted_2,
+      _hoisted_3,
       _createElementVNode(\\"u-text\\", null, _toDisplayString(_ctx.a), 1 /* TEXT */)
     ]),
     _createElementVNode(\\"u-text\\", null, _toDisplayString(_ctx.b), 1 /* TEXT */)

packages/uni-app-vite/src/nvue/plugin/transforms/transformRenderWhole.ts

-import { renameProp, isElementNode } from '@dcloudio/uni-cli-shared'
-import { findProp, NodeTransform } from '@vue/compiler-core'
+import {
+  renameProp,
+  isElementNode,
+  createBindDirectiveNode,
+} from '@dcloudio/uni-cli-shared'
+import {
+  createSimpleExpression,
+  findProp,
+  NodeTransform,
+  RootNode,
+} from '@vue/compiler-core'
 
 export const transformRenderWhole: NodeTransform = (node, _) => {
   if (!isElementNode(node)) {
@@ -12,3 +21,43 @@ export const transformRenderWhole: NodeTransform = (node, _) => {
   // render-whole => append
   renameProp('append', prop)
 }
+
+//
+const RENDER_WHOLE_TAGS = [
+  'view',
+  'scroll-view',
+  'swiper',
+  'match-media',
+  'movable-area',
+  'movable-view',
+  'cover-view',
+  'cover-image',
+  'form',
+  'picker',
+  'picker-view',
+  'navigator',
+  'map',
+]
+/**
+ * 仅当根节点只有一个，标签在白名单，且开发者未主动配置的情况下，才补充
+ * @param node
+ */
+export function addRenderWhole(node: RootNode) {
+  if (node.children.length === 1) {
+    const element = node.children[0]
+    if (isElementNode(element) && RENDER_WHOLE_TAGS.includes(element.tag)) {
+      if (
+        !findProp(element, 'render-whole') &&
+        !findProp(element, 'append') &&
+        !findProp(element, 'appendAsTree')
+      ) {
+        element.props.push(
+          createBindDirectiveNode(
+            'render-whole',
+            createSimpleExpression('true')
+          )
+        )
+      }
+    }
+  }
+}

packages/uni-app-vite/src/nvue/plugin/transforms/transformRootNode.ts

@@ -14,6 +14,7 @@ import {
   RootNode,
   TemplateChildNode,
 } from '@vue/compiler-core'
+import { addRenderWhole } from './transformRenderWhole'
 const SCROLLER_COMPONENTS = [
   'list',
   'scroller',
@@ -21,10 +22,17 @@ const SCROLLER_COMPONENTS = [
   'waterfall',
   'recycle-list',
 ]
+
 export const transformRootNode: NodeTransform = (node, context) => {
-  if (node.type !== NodeTypes.ROOT || !context.bindingMetadata.__pageOptions) {
+  if (node.type !== NodeTypes.ROOT) {
     return
   }
+  const isPage = !!context.bindingMetadata.__pageOptions
+  if (!isPage) {
+    // 非页面组件，自动为根节点补充 render-whole
+    return addRenderWhole(node)
+  }
+
   const { disableScroll, scrollIndicator } = context.bindingMetadata
     .__pageOptions as {
     disableScroll?: boolean