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
Tencent · Sep 11, 2024 · 700cfdf · 700cfdf
1 parent e5fcf2f
commit 700cfdf
Show file tree

Hide file tree

Showing 18 changed files with 190 additions and 81 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {