fix(mp): usingSwanComponents (#3864)

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

@@ -144,7 +144,7 @@ export function isMiniProgramUsingComponent(
 }
 
 interface MiniProgramComponents {
-  [name: string]: 'plugin' | 'component'
+  [name: string]: 'plugin' | 'component' | 'dynamicLib'
 }
 
 export function findMiniProgramUsingComponents({
@@ -168,12 +168,25 @@ export function findMiniProgramUsingComponents({
   const jsonFile = findJsonFile(
     removeExt(normalizeMiniProgramFilename(filename, inputDir))
   )
-  if (jsonFile?.usingComponents) {
-    extend(
-      miniProgramComponents,
-      findMiniProgramUsingComponent(jsonFile.usingComponents, componentsDir)
-    )
+  if (jsonFile) {
+    if (jsonFile.usingComponents) {
+      extend(
+        miniProgramComponents,
+        findMiniProgramUsingComponent(jsonFile.usingComponents, componentsDir)
+      )
+    }
+    // mp-baidu 特有
+    if (jsonFile.usingSwanComponents) {
+      extend(
+        miniProgramComponents,
+        findMiniProgramUsingComponent(
+          jsonFile.usingSwanComponents,
+          componentsDir
+        )
+      )
+    }
   }
+
   return miniProgramComponents
 }
 
@@ -186,6 +199,8 @@ function findMiniProgramUsingComponent(
       const path = usingComponents[name]
       if (path.includes('plugin://')) {
         res[name] = 'plugin'
+      } else if (path.includes('dynamicLib://')) {
+        res[name] = 'dynamicLib'
       } else if (componentsDir && path.includes(componentsDir + '/')) {
         res[name] = 'component'
       }

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

@@ -24,6 +24,7 @@ export interface PageWindowOptions extends ShareWindowOptions {
   component?: true // 百度小程序页面必须配置component: true
   disableScroll?: boolean // false
   usingComponents?: UsingComponents
+  usingSwanComponents?: UsingComponents // 百度小程序特有
   initialRenderingCache?: 'static' | string
   style?: Style
   singlePage?: SinglePage

packages/uni-cli-shared/src/mp/template.ts

 import path from 'path'
-import { EmittedAsset } from 'rollup'
+import type { EmittedAsset } from 'rollup'
+import type { ElementNode } from '@vue/compiler-core'
+
 import { LINEFEED } from '@dcloudio/uni-shared'
+
 import { normalizeMiniProgramFilename } from '../utils'
 
+type LazyElementFn = (
+  node: ElementNode,
+  context: {
+    isMiniProgramComponent(
+      name: string
+    ): 'plugin' | 'component' | 'dynamicLib' | undefined
+  }
+) =>
+  | {
+      [name: string]: { name: 'on' | 'bind'; arg: string[] }[]
+    }
+  | boolean
 export interface MiniProgramCompilerOptions {
   /**
    * 需要延迟渲染的组件，通常是某个组件的某个事件会立刻触发，需要延迟到首次 render 之后，比如微信 editor 的 ready 事件，快手 switch 的 change
    */
-  lazyElement?: {
-    [name: string]: { name: 'on' | 'bind'; arg: string[] }[]
-  }
+  lazyElement?:
+    | {
+        [name: string]: { name: 'on' | 'bind'; arg: string[] }[]
+      }
+    | LazyElementFn
   event?: {
     key?: boolean
     format?(

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

@@ -27,12 +27,15 @@ describe('mp-baidu: transform component', () => {
       usingComponents: {
         'van-button': 'swancomponents/button/index',
       },
+      usingSwanComponents: {
+        'comment-list': 'dynamicLib://myDynamicLib/comment-list',
+      },
     })
     assert(
-      `<van-button/>`,
-      `<van-button u-t="m" u-i="dc555fe4-0"/>`,
+      `<van-button/><comment-list :comment-param="comment"/>`,
+      `<van-button s-if="{{r0}}" u-t="m" u-i="dc555fe4-0"/><comment-list s-if="{{r0}}" comment-param="{{a}}" u-t="m" u-i="dc555fe4-1"/>`,
       `(_ctx, _cache) => {
-  return {}
+  return { a: _ctx.comment }
 }`,
       {
         filename,

packages/uni-mp-compiler/src/compile.ts

@@ -119,6 +119,7 @@ export function baseCompile(template: string, options: CompilerOptions = {}) {
       lazyElement,
       component,
       isBuiltInComponent: context.isBuiltInComponent,
+      isMiniProgramComponent: context.isMiniProgramComponent,
     })
   }
 

packages/uni-mp-compiler/src/options.ts

@@ -103,6 +103,9 @@ export interface TemplateCodegenOptions
   scopeId?: string | null
   filename: string
   isBuiltInComponent: Required<TransformOptions>['isBuiltInComponent']
+  isMiniProgramComponent(
+    name: string
+  ): 'plugin' | 'component' | 'dynamicLib' | undefined
 }
 
 export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions

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

-import { hyphenate } from '@vue/shared'
+import { hyphenate, isFunction, isPlainObject } from '@vue/shared'
 import { SLOT_DEFAULT_NAME, dynamicSlotName } from '@dcloudio/uni-shared'
 import {
   formatMiniProgramEvent,
@@ -36,7 +36,7 @@ import {
   VIRTUAL_HOST_CLASS,
 } from '../transforms/utils'
 
-interface TemplateCodegenContext {
+export interface TemplateCodegenContext {
   code: string
   directive: string
   scopeId?: string | null
@@ -45,6 +45,7 @@ interface TemplateCodegenContext {
   lazyElement: MiniProgramCompilerOptions['lazyElement']
   component: MiniProgramCompilerOptions['component']
   isBuiltInComponent: TransformContext['isBuiltInComponent']
+  isMiniProgramComponent: TransformContext['isMiniProgramComponent']
   push(code: string): void
 }
 
@@ -59,6 +60,7 @@ export function generate(
     directive,
     lazyElement,
     isBuiltInComponent,
+    isMiniProgramComponent,
     component,
   }: TemplateCodegenOptions
 ) {
@@ -71,6 +73,7 @@ export function generate(
     lazyElement,
     component,
     isBuiltInComponent,
+    isMiniProgramComponent,
     push(code) {
       context.code += code
     },
@@ -253,6 +256,14 @@ function genComponent(node: ComponentNode, context: TemplateCodegenContext) {
   if (isIfElementNode(node) || isForElementNode(node)) {
     return genElement(node, context)
   }
+  // 小程序原生组件，补充 if(r0)
+  if (context.isMiniProgramComponent(node.tag)) {
+    ;(node as IfElementNode).vIf = {
+      name: 'if',
+      condition: 'r0',
+    }
+    return genElement(node, context)
+  }
   const prop = findProp(node, ATTR_VUE_PROPS) as DirectiveNode
   if (!prop) {
     return genElement(node, context)
@@ -268,14 +279,23 @@ function isLazyElement(node: ElementNode, context: TemplateCodegenContext) {
   if (!context.lazyElement) {
     return false
   }
-  const lazyProps = context.lazyElement[node.tag]
+  let lazyProps: { name: 'on' | 'bind'; arg: string[] }[] | undefined
+  if (isFunction(context.lazyElement)) {
+    const res = context.lazyElement(node, context)
+    if (!isPlainObject(res)) {
+      return res
+    }
+    lazyProps = res[node.tag]
+  } else {
+    lazyProps = context.lazyElement[node.tag]
+  }
   if (!lazyProps) {
     return
   }
   return node.props.some(
     (prop) =>
       prop.type === NodeTypes.DIRECTIVE &&
-      lazyProps.find((lazyProp) => {
+      lazyProps!.find((lazyProp) => {
         return (
           prop.name === lazyProp.name &&
           prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION &&

packages/uni-mp-compiler/src/transform.ts

@@ -123,7 +123,9 @@ export interface TransformContext
   addVIfScope(initScope: CodegenVIfScopeInit): CodegenVIfScope
   addVForScope(initScope: CodegenVForScopeInit): CodegenVForScope
   cache<T extends JSChildNode>(exp: T, isVNode?: boolean): CacheExpression | T
-  isMiniProgramComponent(name: string): 'plugin' | 'component' | undefined
+  isMiniProgramComponent(
+    name: string
+  ): 'plugin' | 'component' | 'dynamicLib' | undefined
   rootNode: TemplateChildNode | null
 }
 

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

@@ -153,7 +153,10 @@ export function rewriteBinding(
   context: TransformContext
 ) {
   const isMiniProgramComponent = context.isMiniProgramComponent(tag)
-  if (isMiniProgramComponent === 'plugin') {
+  if (
+    isMiniProgramComponent === 'plugin' ||
+    isMiniProgramComponent === 'dynamicLib'
+  ) {
     // 因无法介入插件类型组件内部实现，故保留原始属性
     return
   }

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

@@ -27,7 +27,7 @@ describe('mp-kuaishou: transform component', () => {
     })
     assert(
       `<van-button/>`,
-      `<van-button u-t="m" u-i="dc555fe4-0" bind:__l="__l"/>`,
+      `<van-button ks:if="{{r0}}" u-t="m" u-i="dc555fe4-0" bind:__l="__l"/>`,
       `(_ctx, _cache) => {
   return {}
 }`,

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

 import { addMiniProgramPageJson } from '@dcloudio/uni-cli-shared'
 import { assert } from './testUtils'
 
-describe('mp-baidu: transform component', () => {
+describe('mp-toutiao: transform component', () => {
   test(`component with v-show`, () => {
     assert(
       `<custom v-show="ok"/>`,
@@ -29,7 +29,7 @@ describe('mp-baidu: transform component', () => {
     })
     assert(
       `<van-button/>`,
-      `<van-button u-t="m" u-i="dc555fe4-0" bind:__l="__l"/>`,
+      `<van-button tt:if="{{r0}}" u-t="m" u-i="dc555fe4-0" bind:__l="__l"/>`,
       `(_ctx, _cache) => {
   return {}
 }`,