From 700cfdf06eb44e0a62be05b5a4aa24265570d33c Mon Sep 17 00:00:00 2001
From: birdguo <gguoyu@users.noreply.github.com>
Date: Wed, 11 Sep 2024 15:22:08 +0800
Subject: [PATCH] fix(vue-next): fix vuejs ugrade issue (#4004)

* fix(vue-next): fix vuejs ugrade issue

1. fix vuejs 3.4.32 patchProps API change issue
2. compatible vuejs compiler-core API change issue
3. upgrade vue-next demo package version

* fix(vue-next): fix vue-next-ssr-demo issue

1. compatible vue upgrade issue
2. fix vue-next-ssr demo issue
---
 .../examples/hippy-vue-next-demo/package.json |  8 ++--
 .../hippy-vue-next-ssr-demo/README.md         |  2 +-
 .../hippy-vue-next-ssr-demo/package.json      | 15 +++----
 .../scripts/webpack-ssr-config/client.dev.js  | 20 +++++++++
 .../webpack-ssr-config/client.entry.js        | 31 ++++++++++++--
 .../scripts/webpack-ssr-config/server.dev.js  | 27 ++++++++++--
 .../webpack-ssr-config/server.entry.js        | 24 ++++++++++-
 .../hippy-vue-next-ssr-demo/src/app.vue       | 19 ++++++++-
 .../hippy-vue-next-ssr-demo/src/main.ts       |  2 +-
 .../hippy-vue-next-compiler-ssr/package.json  | 12 +++---
 .../src/transforms/ssrInjectCssVars.ts        |  3 +-
 .../transforms/ssrInjectFallthroughAttrs.ts   |  7 ++--
 .../src/transforms/ssrTransformComponent.ts   | 41 +++++++++++--------
 .../src/transforms/ssrTransformSuspense.ts    | 32 ++++++++-------
 .../package.json                              | 13 +++---
 .../hippy-vue-next-style-parser/package.json  |  4 +-
 .../js/packages/hippy-vue-next/package.json   |  8 ++--
 .../packages/hippy-vue-next/src/patch-prop.ts |  3 --
 18 files changed, 190 insertions(+), 81 deletions(-)

diff --git a/driver/js/examples/hippy-vue-next-demo/package.json b/driver/js/examples/hippy-vue-next-demo/package.json
index 1b311547f29..49bf7deac60 100644
--- a/driver/js/examples/hippy-vue-next-demo/package.json
+++ b/driver/js/examples/hippy-vue-next-demo/package.json
@@ -19,9 +19,9 @@
     "@hippy/vue-next": "v3.3-latest",
     "@hippy/vue-router-next-history": "0.0.1",
     "@hippy/web-renderer": "latest",
-    "@vue/runtime-core": "^3.2.46",
-    "@vue/shared": "^3.2.46",
-    "vue": "^3.2.46",
+    "@vue/runtime-core": "^3.4.32",
+    "@vue/shared": "^3.4.32",
+    "vue": "^3.4.32",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
@@ -43,7 +43,7 @@
     "@hippy/vue-css-loader": "v3.3-latest",
     "@vitejs/plugin-vue": "^1.9.4",
     "@vue/cli-service": "^4.5.19",
-    "@vue/compiler-sfc": "^3.2.46",
+    "@vue/compiler-sfc": "^3.4.32",
     "babel-loader": "^8.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
     "clean-webpack-plugin": "^4.0.0",
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/README.md b/driver/js/examples/hippy-vue-next-ssr-demo/README.md
index 77dccfdfd48..6429d65e1ff 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/README.md
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/README.md
@@ -25,7 +25,7 @@ ensure you were at `examples/hippy-vue-next-ssr-demo`.
 
 #### Development
 
-1. run `npm run ssr:dev-build` to build client entry & client bundle, then running hippy debug server
+1. run `npm run ssr:dev-client` to build client entry & client bundle, then running hippy debug server
 2. run `npm run ssr:dev-server` to build server bundle and start SSR web server to listen port **8080**.
 3. debug your app with [reference](https://hippyjs.org/en-us/#/guide/debug)
 > You can change server listen port 8080 in `server.ts` by your self, but you also need change request port 8080 in
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/package.json b/driver/js/examples/hippy-vue-next-ssr-demo/package.json
index 367d4bffe81..90a2f4ee02e 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/package.json
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/package.json
@@ -24,12 +24,13 @@
     "@hippy/vue-router-next-history": "latest",
     "@hippy/web-renderer": "latest",
     "@hippy/vue-next": "latest",
-    "@hippy/vue-next-server-renderer": "file:../../packages/hippy-vue-next-server-renderer",
-    "@hippy/vue-next-style-parser": "file:../../packages/hippy-vue-next-style-parser",
-    "@vue/runtime-core": "^3.2.46",
-    "@vue/shared": "^3.2.46",
+    "@hippy/vue-next-server-renderer": "latest",
+    "@hippy/hippy-vue-next-style-parser": "latest",
+    "@vue/runtime-core": "^3.4.32",
+    "@vue/server-renderer": "^3.4.32",
+    "@vue/shared": "^3.4.32",
     "core-js": "^3.20.2",
-    "vue": "^3.2.46",
+    "vue": "^3.4.32",
     "vue-router": "^4.0.12",
     "express": "^4.18.2",
     "pinia": "2.0.30"
@@ -52,10 +53,10 @@
     "@hippy/rejection-tracking-polyfill": "^1.0.0",
     "@hippy/vue-css-loader": "^2.0.1",
     "@vitejs/plugin-vue": "^1.9.4",
-    "@hippy/vue-next-compiler-ssr": "file:../../packages/hippy-vue-next-compiler-ssr",
+    "@hippy/vue-next-compiler-ssr": "latest",
     "@types/shelljs": "^0.8.5",
     "@vue/cli-service": "^4.5.19",
-    "@vue/compiler-sfc": "^3.2.46",
+    "@vue/compiler-sfc": "^3.4.32",
     "babel-loader": "^8.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
     "chokidar": "^3.5.3",
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js
index f465c4ff488..cab3754f326 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js
@@ -189,6 +189,26 @@ module.exports = {
         console.warn('* Using the @hippy/vue-next defined in package.json');
       }
 
+      // If @hippy/vue-next-style-parser was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextStyleParserPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-style-parser/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextStyleParserPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next-style-parser in ${hippyVueNextStyleParserPath} as @hippy/vue-next-style-parser alias`);
+        aliases['@hippy/vue-next-style-parser'] = hippyVueNextStyleParserPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next-style-parser defined in package.json');
+      }
+
+      // If @hippy/vue-next-server-render was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`);
+        aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json');
+      }
+
       return aliases;
     })(),
   },
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js
index f710f743a1b..660cc908186 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js
@@ -2,6 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 
 const pkg = require('../../package.json');
+const fs = require('fs')
 
 module.exports = {
   mode: 'production',
@@ -90,8 +91,32 @@ module.exports = {
   },
   resolve: {
     extensions: ['.js', '.json', '.ts'],
-    alias: (() => ({
-      src: path.resolve('./src'),
-    }))(),
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @hippy/vue-next-style-parser was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextStyleParserPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-style-parser/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextStyleParserPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next-style-parser in ${hippyVueNextStyleParserPath} as @hippy/vue-next-style-parser alias`);
+        aliases['@hippy/vue-next-style-parser'] = hippyVueNextStyleParserPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next-style-parser defined in package.json');
+      }
+
+      // If @hippy/vue-next-server-render was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`);
+        aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json');
+      }
+
+      return aliases;
+    })(),
   },
 };
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js
index e82008654ed..770a4d7b9f7 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js
@@ -3,7 +3,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const compilerSSR = require('@hippy/vue-next-compiler-ssr');
+
 const { VueLoaderPlugin } = require('vue-loader');
 const pkg = require('../../package.json');
 
@@ -24,9 +24,20 @@ if (fs.existsSync(hippyVueNextPath)) {
 } else {
   console.warn('* Using the @hippy/vue-next defined in package.json');
 }
-const { isNativeTag } = require(vueNext);
+
+let compilerSsrPkg = '@hippy/vue-next-compiler-ssr'
+let compilerSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-compiler-ssr/dist/index.js');
+if (fs.existsSync(compilerSsrPath)) {
+  console.warn(`* Using the @hippy/vue-next-compiler-ssr in ${compilerSsrPath}`);
+  compilerSsrPkg = compilerSsrPath
+} else {
+  console.warn('* Using the @hippy/vue-next-compiler-ssr defined in package.json');
+}
 
 
+const { isNativeTag } = require(vueNext);
+const compilerSsr = require(compilerSsrPkg);
+
 module.exports = {
   mode: 'development',
   bail: true,
@@ -83,7 +94,7 @@ module.exports = {
                 comments: false,
               },
               // real used vue compiler
-              compiler: compilerSSR,
+              compiler: compilerSsr,
             },
           },
         ],
@@ -177,6 +188,16 @@ module.exports = {
         console.warn('* Using the @hippy/vue-next defined in package.json');
       }
 
+      // If @hippy/vue-next-server-render was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`);
+        aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json');
+      }
+
       return aliases;
     })(),
   },
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js
index 3ecee4aea93..b67c138c5ce 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js
@@ -3,7 +3,6 @@ const fs = require('fs');
 const webpack = require('webpack');
 
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const compilerSSR = require('@hippy/vue-next-compiler-ssr');
 const { VueLoaderPlugin } = require('vue-loader');
 const pkg = require('../../package.json');
 
@@ -24,7 +23,18 @@ if (fs.existsSync(hippyVueNextPath)) {
 } else {
   console.warn('* Using the @hippy/vue-next defined in package.json');
 }
+
+let compilerSsrPkg = '@hippy/vue-next-compiler-ssr'
+let compilerSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-compiler-ssr/dist/index.js');
+if (fs.existsSync(compilerSsrPath)) {
+  console.warn(`* Using the @hippy/vue-next-compiler-ssr in ${compilerSsrPath}`);
+  compilerSsrPkg = compilerSsrPath
+} else {
+  console.warn('* Using the @hippy/vue-next-compiler-ssr defined in package.json');
+}
+
 const { isNativeTag } = require(vueNext);
+const compilerSsr = require(compilerSsrPkg);
 
 module.exports = {
   mode: 'production',
@@ -77,7 +87,7 @@ module.exports = {
                 comments: false,
               },
               // real used vue compiler
-              compiler: compilerSSR,
+              compiler: compilerSsr,
             },
           },
         ],
@@ -171,6 +181,16 @@ module.exports = {
         console.warn('* Using the @hippy/vue-next defined in package.json');
       }
 
+      // If @hippy/vue-next-server-render was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`);
+        aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json');
+      }
+
       return aliases;
     })(),
   },
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
index bb96e1b1097..65058aea3ef 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
@@ -11,7 +11,7 @@
         <label
           v-if="['/', '/debug', '/remote-debug'].includes(currentRoute.path)"
           class="title"
-        >Hippy Vue Next</label>
+        >Hippy Vue Next {{ ssrMsg }}</label>
       </div>
       <label
         class="title"
@@ -46,8 +46,11 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from '@vue/runtime-core';
+import { defineComponent, ref, onServerPrefetch } from '@vue/runtime-core';
 import { useRoute, useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { IS_SSR, IS_SSR_MODE } from './env';
+import { useAppStore } from './store';
 
 import backButtonImg from './back-icon.png';
 
@@ -68,6 +71,9 @@ export default defineComponent({
         path: '/remote-debug',
       },
     ]);
+    const appStore = useAppStore();
+    const { ssrMsg } = storeToRefs(appStore);
+    const { getSsrMsg } = appStore;
 
     /**
        * go back
@@ -93,12 +99,21 @@ export default defineComponent({
       });
     };
 
+    // get ssr msg in ssr and non ssr client
+    if (IS_SSR || !IS_SSR_MODE) {
+      // onServerPrefetch: https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch
+      onServerPrefetch(async () => {
+        await getSsrMsg();
+      });
+    }
+
     return {
       activatedTab,
       backButtonImg,
       currentRoute: route,
       subTitle,
       tabs,
+      ssrMsg,
       goBack,
       navigateTo,
     };
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
index 97c844e5e00..282a52f0100 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
@@ -1,4 +1,4 @@
-import { type StyleNode, insertStyleForSsrNodes } from '@hippy/vue-next-style-parser';
+import { type StyleNode, insertStyleForSsrNodes } from '@hippy/hippy-vue-next-style-parser';
 import type { SsrNode } from '@hippy/vue-next-server-renderer';
 import { renderNativeNodesByCache, renderSsrNodes, deleteNativeNodes, SSR_UNIQUE_ID_KEY } from './ssr-node-ops';
 import { IS_IOS, isDev } from './env';
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/package.json b/driver/js/packages/hippy-vue-next-compiler-ssr/package.json
index e9ee94c1a46..598532aedf9 100644
--- a/driver/js/packages/hippy-vue-next-compiler-ssr/package.json
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/package.json
@@ -24,14 +24,14 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@vue/compiler-core": "^3.2.46",
-    "@vue/compiler-dom": "^3.2.46",
-    "@vue/shared": "^3.2.46"
+    "@vue/compiler-core": "^3.4.32",
+    "@vue/compiler-dom": "^3.4.32",
+    "@vue/shared": "^3.4.32"
   },
   "devDependencies": {
-    "@vue/compiler-core": "^3.2.46",
-    "@vue/compiler-dom": "^3.2.46",
-    "@vue/shared": "^3.2.46"
+    "@vue/compiler-core": "^3.4.32",
+    "@vue/compiler-dom": "^3.4.32",
+    "@vue/shared": "^3.4.32"
   },
   "jest": {
     "moduleNameMapper": {
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectCssVars.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectCssVars.ts
index 1f5f135ff5d..dd02f7d79f8 100644
--- a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectCssVars.ts
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectCssVars.ts
@@ -28,7 +28,6 @@ import {
   type RootNode,
   type TemplateChildNode,
   findDir,
-  isBuiltInType,
 } from '@vue/compiler-dom';
 
 export const ssrInjectCssVars: NodeTransform = (node, context) => {
@@ -65,7 +64,7 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
       || node.tagType === ElementTypes.COMPONENT)
     && !findDir(node, 'for')
   ) {
-    if (isBuiltInType(node.tag, 'Suspense')) {
+    if (node.tag === 'suspense' || node.tag === 'Suspense') {
       for (const child of node.children) {
         if (
           child.type === NodeTypes.ELEMENT
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
index fb665b39d48..1804e17ce69 100644
--- a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -29,7 +29,6 @@ import {
   type TemplateChildNode,
   type ParentNode,
   findDir,
-  isBuiltInType,
 } from '@vue/compiler-dom';
 
 const filterChild = (node: ParentNode) => node.children.filter(n => n.type !== NodeTypes.COMMENT);
@@ -49,8 +48,10 @@ export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
   if (
     node.type === NodeTypes.ELEMENT
     && node.tagType === ElementTypes.COMPONENT
-    && (isBuiltInType(node.tag, 'Transition')
-      || isBuiltInType(node.tag, 'KeepAlive'))
+    && (node.tag === 'transition'
+      || node.tag === 'Transition'
+      || node.tag === 'KeepAlive'
+      || node.tag === 'keep-alive')
   ) {
     const rootChildren = filterChild(context.root);
     if (rootChildren.length === 1 && rootChildren[0] === node) {
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformComponent.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformComponent.ts
index 63404366c06..9e59c5b0df3 100644
--- a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -64,8 +64,9 @@ import {
   type JSChildNode,
   RESOLVE_DYNAMIC_COMPONENT,
   TRANSITION,
+  type DirectiveNode,
 } from '@vue/compiler-dom';
-import { isSymbol, isObject, isArray } from '@vue/shared';
+import { isSymbol, isObject, isArray, extend } from '@vue/shared';
 
 import { SSR_RENDER_COMPONENT, SSR_RENDER_VNODE } from '../runtimeHelpers';
 import {
@@ -149,8 +150,8 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
     // fallback in case the child is render-fn based). Store them in an array
     // for later use.
     if (clonedNode.children.length) {
-      buildSlots(clonedNode, context, (props, children) => {
-        vnodeBranches.push(createVNodeSlotBranch(props, children, context));
+      buildSlots(clonedNode, context, (props, vFor, children) => {
+        vnodeBranches.push(createVNodeSlotBranch(props, vFor, children, context));
         return createFunctionExpression(undefined);
       });
     }
@@ -174,7 +175,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
     const wipEntries: WIPSlotEntry[] = [];
     wipMap.set(node, wipEntries);
 
-    const buildSSRSlotFn: SlotFnBuilder = (props, children, loc) => {
+    const buildSSRSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) => {
       const fn = createFunctionExpression(
         [props ?? '_', '_push', '_parent', '_scopeId'],
         undefined, // no return, assign body later
@@ -299,7 +300,8 @@ const vnodeDirectiveTransforms = {
 };
 
 function createVNodeSlotBranch(
-  props: ExpressionNode | undefined,
+  slotProps: ExpressionNode | undefined,
+  vFor: DirectiveNode | undefined,
   children: TemplateChildNode[],
   parentContext: TransformContext,
 ): ReturnStatement {
@@ -321,24 +323,29 @@ function createVNodeSlotBranch(
   };
 
   // wrap the children with a wrapper template for proper children treatment.
+  // important: provide v-slot="props" and v-for="exp" on the wrapper for
+  // proper scope analysis
+  const wrapperProps: TemplateNode['props'] = [];
+  if (slotProps) {
+    wrapperProps.push({
+      type: NodeTypes.DIRECTIVE,
+      name: 'slot',
+      exp: slotProps,
+      arg: undefined,
+      modifiers: [],
+      loc: locStub,
+    });
+  }
+  if (vFor) {
+    wrapperProps.push(extend({}, vFor));
+  }
   const wrapperNode: TemplateNode = {
     type: NodeTypes.ELEMENT,
     ns: Namespaces.HTML,
     tag: 'template',
     tagType: ElementTypes.TEMPLATE,
     isSelfClosing: false,
-    // important: provide v-slot="props" on the wrapper for proper
-    // scope analysis
-    props: [
-      {
-        type: NodeTypes.DIRECTIVE,
-        name: 'slot',
-        exp: props,
-        arg: undefined,
-        modifiers: [],
-        loc: locStub,
-      },
-    ],
+    props: wrapperProps,
     children,
     loc: locStub,
     codegenNode: undefined,
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSuspense.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSuspense.ts
index de03a05a1ee..9f97da3fc4d 100644
--- a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSuspense.ts
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSuspense.ts
@@ -60,20 +60,24 @@ export function ssrTransformSuspense(
         wipSlots: [],
       };
       wipMap.set(node, wipEntry);
-      wipEntry.slotsExp = buildSlots(node, context, (_props, children, loc) => {
-        const fn = createFunctionExpression(
-          [],
-          undefined, // no return, assign body later
-          true, // newline
-          false, // suspense slots are not treated as normal slots
-          loc,
-        );
-        wipEntry.wipSlots.push({
-          fn,
-          children,
-        });
-        return fn;
-      }).slots;
+      wipEntry.slotsExp = buildSlots(
+        node,
+        context,
+        (_props, _vForExp, children, loc) => {
+          const fn = createFunctionExpression(
+            [],
+            undefined, // no return, assign body later
+            true, // newline
+            false, // suspense slots are not treated as normal slots
+            loc,
+          );
+          wipEntry.wipSlots.push({
+            fn,
+            children,
+          });
+          return fn;
+        },
+      ).slots;
     }
   };
 }
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/package.json b/driver/js/packages/hippy-vue-next-server-renderer/package.json
index c6b8dd34bdb..c987ce805b4 100644
--- a/driver/js/packages/hippy-vue-next-server-renderer/package.json
+++ b/driver/js/packages/hippy-vue-next-server-renderer/package.json
@@ -26,15 +26,14 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@vue/server-renderer": "^3.2.46",
-    "@vue/runtime-core": "^3.2.46",
-    "@vue/shared": "^3.2.46"
+    "@vue/server-renderer": "^3.4.32",
+    "@vue/runtime-core": "^3.4.32",
+    "@vue/shared": "^3.4.32"
   },
   "devDependencies": {
-    "@vue/server-renderer": "^3.2.46",
-    "@vue/runtime-core": "^3.2.46",
-    "@vue/shared": "^3.2.46",
-    "vue": "^3.2.46"
+    "@vue/server-renderer": "^3.4.32",
+    "@vue/runtime-core": "^3.4.32",
+    "@vue/shared": "^3.4.32"
   },
   "jest": {
     "moduleNameMapper": {
diff --git a/driver/js/packages/hippy-vue-next-style-parser/package.json b/driver/js/packages/hippy-vue-next-style-parser/package.json
index 8659900012b..7f0bb9d09e3 100644
--- a/driver/js/packages/hippy-vue-next-style-parser/package.json
+++ b/driver/js/packages/hippy-vue-next-style-parser/package.json
@@ -24,10 +24,10 @@
     "url": "https://github.com/Tencent/Hippy/issues"
   },
   "peerDependencies": {
-    "@vue/shared": "^3.2.46"
+    "@vue/shared": "^3.4.32"
   },
   "devDependencies": {
-    "@vue/shared": "^3.2.46"
+    "@vue/shared": "^3.4.32"
   },
   "entry": "./src/index.ts",
   "jest": {
diff --git a/driver/js/packages/hippy-vue-next/package.json b/driver/js/packages/hippy-vue-next/package.json
index bb9e21c40d3..1ac65c09891 100644
--- a/driver/js/packages/hippy-vue-next/package.json
+++ b/driver/js/packages/hippy-vue-next/package.json
@@ -28,12 +28,12 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@vue/runtime-core": "^3.2.46",
-    "@vue/shared": "^3.2.46"
+    "@vue/runtime-core": "^3.4.32",
+    "@vue/shared": "^3.4.32"
   },
   "devDependencies": {
-    "@vue/runtime-core": "^3.2.46",
-    "@vue/shared": "^3.2.46"
+    "@vue/runtime-core": "^3.4.32",
+    "@vue/shared": "^3.4.32"
   },
   "jest": {
     "moduleNameMapper": {
diff --git a/driver/js/packages/hippy-vue-next/src/patch-prop.ts b/driver/js/packages/hippy-vue-next/src/patch-prop.ts
index f864b739227..f667d631386 100644
--- a/driver/js/packages/hippy-vue-next/src/patch-prop.ts
+++ b/driver/js/packages/hippy-vue-next/src/patch-prop.ts
@@ -29,8 +29,6 @@ import { patchAttr } from './modules/attrs';
 import { patchClass } from './modules/class';
 import { patchEvent } from './modules/events';
 import { patchStyle } from './modules/style';
-import type { HippyElement } from './runtime/element/hippy-element';
-import type { HippyNode } from './runtime/node/hippy-node';
 
 export function patchProp(
   el: NeedToTyped,
@@ -38,7 +36,6 @@ export function patchProp(
   prevValue: NeedToTyped,
   nextValue: NeedToTyped,
   namespace: ElementNamespace,
-  prevChildren: VNode<HippyNode, HippyElement>[] | undefined,
   parentComponent: ComponentInternalInstance | null,
 ): void {
   // It should be noted that the values contained in prop here will have strings, numbers, arrays, objects, etc.