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
Tencent · Aug 26, 2024 · d89a8ce · d89a8ce
1 parent ac3fd3d
commit d89a8ce
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 62 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/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) {

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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -29,16 +29,13 @@ 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,
   key: string,
   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.