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/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[] | undefined, parentComponent: ComponentInternalInstance | null, ): void { // It should be noted that the values contained in prop here will have strings, numbers, arrays, objects, etc.