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

Author: chouchouji

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/src/compiler/options.ts

@@ -135,6 +135,7 @@ export function getMiniProgramOptions(
       lang: 'wxs',
       setStyle: true,
     },
+    keyEnabledElements: ['editor-portal'],
   }
 }