feat(mp): component support v-bind="props" (#3330)

packages/uni-cli-shared/src/json/mp/jsonFile.ts

@@ -171,10 +171,10 @@ function findMiniProgramUsingComponent(
   return Object.keys(usingComponents).reduce<MiniProgramComponents>(
     (res, name) => {
       const path = usingComponents[name]
-      if (componentsDir && path.includes(componentsDir + '/')) {
-        res[name] = 'component'
-      } else if (path.includes('plugin://')) {
+      if (path.includes('plugin://')) {
         res[name] = 'plugin'
+      } else if (componentsDir && path.includes(componentsDir + '/')) {
+        res[name] = 'component'
       }
       return res
     },

packages/uni-h5/dist/uni-h5.es.js

@@ -9071,6 +9071,7 @@ function useTouchtrack(element, method, useCancel) {
   let y1 = 0;
   const fn = function($event, state2, x, y) {
     if (method({
+      cancelable: $event.cancelable,
       target: $event.target,
       currentTarget: $event.currentTarget,
       preventDefault: $event.preventDefault.bind($event),
@@ -10947,13 +10948,15 @@ function useScroller(element, options) {
     if (scroller.onTouchStart) {
       scroller.onTouchStart();
     }
-    event.preventDefault();
+    if (typeof event.cancelable !== "boolean" || event.cancelable)
+      event.preventDefault();
   }
   function handleTouchMove(event) {
     const touchtrackEvent = event;
     const mouseEvent = event;
     if (touchInfo.trackingID !== -1) {
-      event.preventDefault();
+      if (typeof event.cancelable !== "boolean" || event.cancelable)
+        event.preventDefault();
       const delta = findDelta(event);
       if (delta) {
         for (touchInfo.maxDy = Math.max(touchInfo.maxDy, Math.abs(delta.y)), touchInfo.maxDx = Math.max(touchInfo.maxDx, Math.abs(delta.x)), touchInfo.historyX.push(delta.x), touchInfo.historyY.push(delta.y), touchInfo.historyTime.push(touchtrackEvent.detail.timeStamp || mouseEvent.timeStamp); touchInfo.historyTime.length > 10; ) {

packages/uni-mp-compiler/__tests__/component.spec.ts

@@ -3,6 +3,7 @@ import {
   COMPONENT_BIND_LINK,
   createTransformComponentLink,
 } from '@dcloudio/uni-cli-shared'
+import { MPErrorCodes } from '../src/errors'
 import { assert } from './testUtils'
 
 const nodeTransforms = [createTransformComponentLink(COMPONENT_BIND_LINK)]
@@ -116,6 +117,7 @@ describe('compiler: transform component', () => {
   })
 
   test(`mini program component`, () => {
+    const onError = jest.fn()
     const filename = 'pages/vant/vant'
     addMiniProgramPageJson(filename, {
       usingComponents: {
@@ -124,15 +126,29 @@ describe('compiler: transform component', () => {
       },
     })
     assert(
-      `<wxparser :rich-text="richText" /><van-button custom-style="background-color: unset;" :close-on-click-overlay="true"><template #default><view/></template><template #head><view/></template></van-button>`,
+      `<wxparser :rich-text="richText" v-bind="props"/><van-button custom-style="background-color: unset;" :close-on-click-overlay="true" v-bind="props"><template #default><view/></template><template #head><view/></template></van-button>`,
       `<wxparser rich-text="{{a}}" u-t="m" u-i="dc555fe4-0" bind:__l="__l"/><van-button u-t="m" u-i="dc555fe4-1" bind:__l="__l" u-p="{{b}}"><view/><view slot="head"/></van-button>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.richText, b: _p({ customStyle: 'background-color: unset;', closeOnClickOverlay: true }) }
+  return { a: _ctx.richText, b: _p({ customStyle: 'background-color: unset;', closeOnClickOverlay: true, ..._ctx.props }) }
 }`,
       {
+        onError,
         filename,
         nodeTransforms,
       }
     )
+    expect(onError.mock.calls[0][0]).toMatchObject({
+      code: MPErrorCodes.X_V_BIND_NO_ARGUMENT,
+      loc: {
+        start: {
+          line: 1,
+          column: 33,
+        },
+        end: {
+          line: 1,
+          column: 47,
+        },
+      },
+    })
   })
 })

packages/uni-mp-compiler/__tests__/test.ts

@@ -60,7 +60,7 @@ addMiniProgramPageJson(filename, {
   },
 })
 assert(
-  `<van-button><template #default><view/></template></van-button>`,
+  `<van-button v-bind="a"><template #default><view/></template></van-button>`,
   `<van-button u-i="dc555fe4-0"/>`,
   `(_ctx, _cache) => {
 return {}

packages/uni-mp-compiler/src/template/codegen.ts

@@ -448,6 +448,8 @@ function genDirectiveNode(
     const exp = (prop.exp as SimpleExpressionNode).content
     push(` ${arg}="{{${exp}}}"`)
   } else {
-    throw new Error(`unknown directive` + JSON.stringify(prop))
+    if (prop.name !== 'bind') {
+      throw new Error(`unknown directive ` + JSON.stringify(prop))
+    }
   }
 }

packages/uni-mp-compiler/src/transforms/transformComponent.ts

@@ -11,6 +11,8 @@ import {
 import {
   createAttributeNode,
   createBindDirectiveNode,
+  isAttributeNode,
+  isDirectiveNode,
   isUserComponent,
 } from '@dcloudio/uni-cli-shared'
 import { isVForScope, NodeTransform, TransformContext } from '../transform'
@@ -31,6 +33,8 @@ import {
   objectExpression,
   objectProperty,
   ObjectProperty,
+  spreadElement,
+  SpreadElement,
   stringLiteral,
 } from '@babel/types'
 import { RENDER_PROPS } from '../runtimeHelpers'
@@ -165,11 +169,10 @@ export function rewriteBinding(
           computed
         )
       }
-
-  const properties: ObjectProperty[] = []
+  const properties: (ObjectProperty | SpreadElement)[] = []
   for (let i = 0; i < props.length; i++) {
     const prop = props[i]
-    if (prop.type === NodeTypes.ATTRIBUTE) {
+    if (isAttributeNode(prop)) {
       const { name } = prop
       if (!isComponentProp(name)) {
         continue
@@ -177,15 +180,20 @@ export function rewriteBinding(
       properties.push(
         createObjectProperty(name, stringLiteral(prop.value?.content || ''))
       )
-    } else if (prop.type === NodeTypes.DIRECTIVE) {
+    } else if (isDirectiveNode(prop)) {
       if (prop.name !== 'bind') {
         continue
       }
       const { arg, exp } = prop
-      if (!arg || !exp) {
+      if (!exp) {
         continue
       }
-      if (isStaticExp(arg)) {
+      if (!arg) {
+        const spreadElement = createVBindSpreadElement(prop, context)
+        if (spreadElement) {
+          properties.push(spreadElement)
+        }
+      } else if (isStaticExp(arg)) {
         if (!isComponentProp(arg.content)) {
           continue
         }
@@ -217,6 +225,7 @@ export function rewriteBinding(
     props.splice(i, 1)
     i--
   }
+
   if (properties.length) {
     props.push(
       createBindDirectiveNode(
@@ -226,6 +235,24 @@ export function rewriteBinding(
     )
   }
 }
+
+function createVBindSpreadElement(
+  prop: DirectiveNode,
+  context: TransformContext
+) {
+  const { arg, exp } = prop
+  if (!exp) {
+    return
+  }
+  if (!arg) {
+    const argument = parseExpr(genExpr(exp), context, exp)
+    if (!argument) {
+      return
+    }
+    return spreadElement(argument)
+  }
+}
+
 export function isPropsBinding({ arg }: DirectiveNode) {
   return (
     arg &&

packages/uni-mp-compiler/src/transforms/transformElement.ts

@@ -176,7 +176,8 @@ export function processProps(
 ) {
   const { tag } = node
   const isComponent = node.tagType === ElementTypes.COMPONENT
-
+  const isPluginComponent =
+    isComponent && context.isMiniProgramComponent(node.tag) === 'plugin'
   for (let i = 0; i < props.length; i++) {
     const prop = props[i]
     if (prop.type === NodeTypes.DIRECTIVE) {
@@ -209,14 +210,16 @@ export function processProps(
         // v-on=""
         // v-bind=""
         if (!arg) {
-          context.onError(
-            createMPCompilerError(
-              isVBind
-                ? MPErrorCodes.X_V_BIND_NO_ARGUMENT
-                : MPErrorCodes.X_V_ON_NO_ARGUMENT,
-              loc
+          if (isVOn) {
+            context.onError(
+              createMPCompilerError(MPErrorCodes.X_V_ON_NO_ARGUMENT, loc)
             )
-          )
+          }
+          if (isVBind && (!isComponent || isPluginComponent)) {
+            context.onError(
+              createMPCompilerError(MPErrorCodes.X_V_BIND_NO_ARGUMENT, loc)
+            )
+          }
           continue
         }
         // v-on:[a]=""
@@ -224,14 +227,16 @@ export function processProps(
         // v-bind:[a]=""
         // v-bind:[a.b]=""
         if (!(arg.type === NodeTypes.SIMPLE_EXPRESSION && arg.isStatic)) {
-          context.onError(
-            createMPCompilerError(
-              isVBind
-                ? MPErrorCodes.X_V_BIND_DYNAMIC_ARGUMENT
-                : MPErrorCodes.X_V_ON_DYNAMIC_EVENT,
-              loc
+          if (isVOn) {
+            context.onError(
+              createMPCompilerError(MPErrorCodes.X_V_ON_DYNAMIC_EVENT, loc)
             )
-          )
+          }
+          if (isVBind && (!isComponent || isPluginComponent)) {
+            context.onError(
+              createMPCompilerError(MPErrorCodes.X_V_BIND_DYNAMIC_ARGUMENT, loc)
+            )
+          }
           continue
         }
       }