fix(mp-weixin): 修复 editor-portal 带有 key prop 并作为 v-for 子节点时编译报错的 Bug (question/208703)

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

@@ -100,6 +100,10 @@ export interface MiniProgramCompilerOptions {
   }
   directive: string
   emitFile?: (emittedFile: EmittedAsset) => string
+  /**
+   * 允许作为 v-for 子节点并保留 key 的组件列表
+   */
+  keyEnabledElements?: string[]
 }
 export interface MiniProgramFilterOptions {
   id: string

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

@@ -120,6 +120,7 @@ export function baseCompile(template: string, options: CompilerOptions = {}) {
       lazyElement,
       component,
       checkPropName,
+      keyEnabledElements,
     } = options.miniProgram
     genTemplate(ast, {
       class: clazz,
@@ -135,6 +136,7 @@ export function baseCompile(template: string, options: CompilerOptions = {}) {
       isBuiltInComponent: context.isBuiltInComponent,
       isMiniProgramComponent: context.isMiniProgramComponent,
       checkPropName,
+      keyEnabledElements,
       autoImportFilters: context.autoImportFilters,
       filter: options.miniProgram?.filter,
     })

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

@@ -54,6 +54,7 @@ export interface TemplateCodegenContext {
   isMiniProgramComponent: TransformContext['isMiniProgramComponent']
   push(code: string): void
   checkPropName: TemplateCodegenOptions['checkPropName']
+  keyEnabledElements: TemplateCodegenOptions['keyEnabledElements']
 }
 
 /**
@@ -88,6 +89,7 @@ export function generate(
     isBuiltInComponent,
     isMiniProgramComponent,
     checkPropName,
+    keyEnabledElements,
     component,
     autoImportFilters,
     filter,
@@ -105,6 +107,7 @@ export function generate(
     isBuiltInComponent,
     isMiniProgramComponent,
     checkPropName,
+    keyEnabledElements,
     push(code) {
       context.code += code
     },

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

@@ -185,16 +185,20 @@ export const transformFor = createStructuralDirectiveTransform(
       scopes.vFor--
       if (isTemplateNode(node)) {
         node.children.some((c) => {
-          if (c.type === NodeTypes.ELEMENT && !isForElementNode(c)) {
+          if (isElementNode(c) && !isForElementNode(c)) {
             const key = findProp(c, 'key')
             if (key) {
-              context.onError(
-                createCompilerError(
-                  ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT,
-                  key.loc
+              const keyEnabledElements =
+                context.miniProgram.keyEnabledElements || []
+              if (!keyEnabledElements.includes(c.tag)) {
+                context.onError(
+                  createCompilerError(
+                    ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT,
+                    key.loc
+                  )
                 )
-              )
-              return true
+                return true
+              }
             }
           }
         })

packages/uni-mp-vite/src/plugin/index.ts

@@ -96,6 +96,7 @@ export interface UniMiniProgramPluginOptions {
       generate: Parameters<typeof findMiniProgramTemplateFiles>[0]
     }
     compilerOptions?: CompilerOptions
+    keyEnabledElements?: MiniProgramCompilerOptions['keyEnabledElements']
     checkPropName?: MiniProgramCompilerOptions['checkPropName']
   }
   style: {
@@ -141,6 +142,7 @@ export function uniMiniProgramPlugin(
         component: template.component,
         emitFile,
         slot: template.slot,
+        keyEnabledElements: template.keyEnabledElements,
         checkPropName: template.checkPropName,
       },
       compilerOptions: template.compilerOptions,

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

@@ -309,6 +309,24 @@ describe('mp-weixin: transform component', () => {
     )
   })
 
+  test('editor-protal', () => {
+    assert(
+      `<editor id="editor"><editor-portal :key="blockId"><view class="flex"></view></editor-portal></editor>`,
+      `<editor id="editor"><editor-portal key="{{a}}"><view class="flex"></view></editor-portal></editor>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.blockId }
+}`
+    )
+
+    assert(
+      `<editor id="editor"><template v-for="item in customBlockList" :key="item.blockId"><editor-portal :key="item.blockId"><view class="flex"></view></editor-portal></template></editor>`,
+      `<editor id="editor"><block wx:for="{{a}}" wx:for-item="item" wx:key="b"><editor-portal key="{{item.a}}"><view class="flex"></view></editor-portal></block></editor>`,
+      `(_ctx, _cache) => {
+  return { a: _f(_ctx.customBlockList, (item, k0, i0) => { return { a: item.blockId, b: item.blockId }; }) }
+}`
+    )
+  })
+
   // 暂不上线，先注释掉
   //   test('input > keyboard-accessory', () => {
   //     assert(

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

@@ -62,6 +62,7 @@ export const customElements = [
   'open-data-list',
   'open-data-item',
   'selection',
+  'editor-portal',
   ...getNativeTags(process.env.UNI_INPUT_DIR, process.env.UNI_PLATFORM),
 ]
 
@@ -134,6 +135,7 @@ export function getMiniProgramOptions(
       lang: 'wxs',
       setStyle: true,
     },
+    keyEnabledElements: ['editor-portal'],
   }
 }