fix(mp): component with v-show

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

 export const COMPONENT_ON_LINK = 'onVI'
 export const COMPONENT_BIND_LINK = '__l'
+export const COMPONENT_CUSTOM_HIDDEN = 'data-c-h'
+export const COMPONENT_CUSTOM_HIDDEN_BIND = 'bind:-' + COMPONENT_CUSTOM_HIDDEN

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

@@ -39,6 +39,12 @@ export interface MiniProgramCompilerOptions {
   filter?: {
     lang: string
   }
+  component?: {
+    /**
+     * 自定义组件自定义 hidden 属性用于实现 v-show
+     */
+    vShow: string
+  }
   directive: string
   emitFile?: (emittedFile: EmittedAsset) => string
 }

packages/uni-cli-shared/src/vue/utils.ts

@@ -23,7 +23,9 @@ export const VUE_REF_IN_FOR = 'r-i-f'
 
 export function isUserComponent(
   node: RootNode | TemplateChildNode,
-  context: TransformContext
+  context: {
+    isBuiltInComponent: TransformContext['isBuiltInComponent']
+  }
 ): node is ComponentNode {
   return (
     node.type === NodeTypes.ELEMENT &&

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

@@ -16784,10 +16784,9 @@ const chooseFile = /* @__PURE__ */ defineAsyncApi(API_CHOOSE_FILE, ({
     };
     resolve(res);
   });
-  if (getInteractStatus()) {
   fileInput.click();
-  } else {
-    reject(t2("uni.chooseFile.notUserActivation"));
+  if (!getInteractStatus()) {
+    console.warn(t2("uni.chooseFile.notUserActivation"));
   }
 }, ChooseFileProtocol, ChooseFileOptions);
 let imageInput = null;
@@ -16835,10 +16834,9 @@ const chooseImage = /* @__PURE__ */ defineAsyncApi(API_CHOOSE_IMAGE, ({
     };
     resolve(res);
   });
-  if (getInteractStatus()) {
   imageInput.click();
-  } else {
-    reject(t2("uni.chooseFile.notUserActivation"));
+  if (!getInteractStatus()) {
+    console.warn(t2("uni.chooseFile.notUserActivation"));
   }
 }, ChooseImageProtocol, ChooseImageOptions);
 let index$c = 0;
@@ -17135,10 +17133,9 @@ const chooseVideo = /* @__PURE__ */ defineAsyncApi(API_CHOOSE_VIDEO, ({ sourceTy
       resolve(callbackResult);
     }
   });
-  if (getInteractStatus()) {
   videoInput.click();
-  } else {
-    reject(t2("uni.chooseFile.notUserActivation"));
+  if (!getInteractStatus()) {
+    console.warn(t2("uni.chooseFile.notUserActivation"));
   }
 }, ChooseVideoProtocol, ChooseVideoOptions);
 const request = /* @__PURE__ */ defineTaskApi(API_REQUEST, ({

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

@@ -100,6 +100,7 @@ export function baseCompile(template: string, options: CompilerOptions = {}) {
       event,
       slot,
       lazyElement,
+      component,
     } = options.miniProgram
     genTemplate(ast, {
       class: clazz,
@@ -110,6 +111,8 @@ export function baseCompile(template: string, options: CompilerOptions = {}) {
       event,
       slot,
       lazyElement,
+      component,
+      isBuiltInComponent: context.isBuiltInComponent,
     })
   }
 

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

@@ -100,6 +100,7 @@ export interface TemplateCodegenOptions
   extends Omit<MiniProgramCompilerOptions, 'filter'> {
   scopeId?: string | null
   filename: string
+  isBuiltInComponent: Required<TransformOptions>['isBuiltInComponent']
 }
 
 export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions

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

@@ -3,6 +3,7 @@ import { SLOT_DEFAULT_NAME, dynamicSlotName } from '@dcloudio/uni-shared'
 import {
   formatMiniProgramEvent,
   isElementNode,
+  isUserComponent,
   MiniProgramCompilerOptions,
 } from '@dcloudio/uni-cli-shared'
 import {
@@ -25,6 +26,7 @@ import { genExpr } from '../codegen'
 import { ForElementNode, isForElementNode } from '../transforms/vFor'
 import { IfElementNode, isIfElementNode } from '../transforms/vIf'
 import { findSlotName } from '../transforms/vSlot'
+import { TransformContext } from '../transform'
 interface TemplateCodegenContext {
   code: string
   directive: string
@@ -32,6 +34,8 @@ interface TemplateCodegenContext {
   event: MiniProgramCompilerOptions['event']
   slot: MiniProgramCompilerOptions['slot']
   lazyElement: MiniProgramCompilerOptions['lazyElement']
+  component: MiniProgramCompilerOptions['component']
+  isBuiltInComponent: TransformContext['isBuiltInComponent']
   push(code: string): void
 }
 
@@ -45,6 +49,8 @@ export function generate(
     filename,
     directive,
     lazyElement,
+    isBuiltInComponent,
+    component,
   }: TemplateCodegenOptions
 ) {
   const context: TemplateCodegenContext = {
@@ -54,6 +60,8 @@ export function generate(
     scopeId,
     directive,
     lazyElement,
+    component,
+    isBuiltInComponent,
     push(code) {
       context.code += code
     },
@@ -266,7 +274,7 @@ function genElement(node: ElementNode, context: TemplateCodegenContext) {
       genNode(node, context)
     })
   }
-  if (node.tagType === ElementTypes.COMPONENT) {
+  if (isUserComponent(node, context)) {
     tag = hyphenate(tag)
   }
   const { push } = context
@@ -333,7 +341,7 @@ export function genElementProps(
       if (name === 'on') {
         genOn(prop, node, context)
       } else {
-        genDirectiveNode(prop, context)
+        genDirectiveNode(prop, node, context)
       }
     }
   })
@@ -341,7 +349,7 @@ export function genElementProps(
 function genOn(
   prop: DirectiveNode,
   node: ElementNode,
-  { push, event }: TemplateCodegenContext
+  { push, event, isBuiltInComponent }: TemplateCodegenContext
 ) {
   const arg = (prop.arg as SimpleExpressionNode).content
   const exp = prop.exp as SimpleExpressionNode
@@ -349,7 +357,7 @@ function genOn(
   const name = (event?.format || formatMiniProgramEvent)(arg, {
     isCatch: modifiers.includes('stop') || modifiers.includes('prevent'),
     isCapture: modifiers.includes('capture'),
-    isComponent: node.tagType === ElementTypes.COMPONENT,
+    isComponent: isUserComponent(node, { isBuiltInComponent }),
   })
   if (exp.isStatic) {
     push(` ${name}="${exp.content}"`)
@@ -360,8 +368,10 @@ function genOn(
 
 function genDirectiveNode(
   prop: DirectiveNode,
-  { push }: TemplateCodegenContext
+  node: ElementNode,
+  context: TemplateCodegenContext
 ) {
+  const { push, component } = context
   if (prop.name === 'slot') {
     if (prop.arg) {
       const arg = prop.arg as SimpleExpressionNode
@@ -375,7 +385,13 @@ function genDirectiveNode(
       )
     }
   } else if (prop.name === 'show') {
-    push(` hidden="{{!${(prop.exp as SimpleExpressionNode).content}}}"`)
+    let hiddenPropName = 'hidden'
+    if (isUserComponent(node, context) && component && component.vShow) {
+      hiddenPropName = component.vShow
+    }
+    push(
+      ` ${hiddenPropName}="{{!${(prop.exp as SimpleExpressionNode).content}}}"`
+    )
   } else if (prop.arg && prop.exp) {
     const arg = (prop.arg as SimpleExpressionNode).content
     const exp = (prop.exp as SimpleExpressionNode).content

packages/uni-mp-lark/dist/uni.compiler.js

@@ -81,6 +81,9 @@ const miniProgram = {
         dynamicSlotNames: true,
     },
     directive: 'tt:',
+    component: {
+        vShow: uniCliShared.COMPONENT_CUSTOM_HIDDEN_BIND,
+    },
 };
 const options = {
     vite: {

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

 import { assert } from './testUtils'
 
 describe('mp-baidu: transform component', () => {
+  test(`component with v-show`, () => {
+    assert(
+      `<custom v-show="ok"/>`,
+      `<custom data-c-h="{{!a}}" u-i="2a9ec0b0-0" bind:__l="__l"/>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.ok }
+}`
+    )
+  })
   test(`match-media`, () => {
     assert(
       `<match-media/>`,

packages/uni-mp-qq/dist/uni.compiler.js

@@ -99,6 +99,9 @@ const miniProgram = {
         dynamicSlotNames: true,
     },
     directive: 'qq:',
+    component: {
+        vShow: uniCliShared.COMPONENT_CUSTOM_HIDDEN,
+    },
 };
 const options = {
     vite: {

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

 import path from 'path'
 import type { CompilerOptions } from '@vue/compiler-core'
 import {
+  COMPONENT_CUSTOM_HIDDEN,
   MiniProgramCompilerOptions,
   transformComponentLink,
   transformMatchMedia,
@@ -29,6 +30,9 @@ export const miniProgram: MiniProgramCompilerOptions = {
     dynamicSlotNames: true,
   },
   directive: 'qq:',
+  component: {
+    vShow: COMPONENT_CUSTOM_HIDDEN,
+  },
 }
 
 export const options: UniMiniProgramPluginOptions = {

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

 import { assert } from './testUtils'
 
 describe('mp-baidu: transform component', () => {
+  test(`component with v-show`, () => {
+    assert(
+      `<custom v-show="ok"/>`,
+      `<custom bind:-data-c-h="{{!a}}" u-i="2a9ec0b0-0" bind:__l="__l"/>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.ok }
+}`
+    )
+  })
   test(`match-media`, () => {
     assert(
       `<match-media/>`,

packages/uni-mp-toutiao/dist/uni.compiler.js

@@ -81,6 +81,9 @@ const miniProgram = {
         dynamicSlotNames: true,
     },
     directive: 'tt:',
+    component: {
+        vShow: uniCliShared.COMPONENT_CUSTOM_HIDDEN_BIND,
+    },
 };
 const options = {
     vite: {

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

 import path from 'path'
 import type { CompilerOptions } from '@vue/compiler-core'
 import {
+  COMPONENT_CUSTOM_HIDDEN_BIND,
   MiniProgramCompilerOptions,
   transformComponentLink,
   transformMatchMedia,
@@ -32,6 +33,9 @@ export const miniProgram: MiniProgramCompilerOptions = {
     dynamicSlotNames: true,
   },
   directive: 'tt:',
+  component: {
+    vShow: COMPONENT_CUSTOM_HIDDEN_BIND,
+  },
 }
 
 export const options: UniMiniProgramPluginOptions = {

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

@@ -24,9 +24,12 @@ import {
 const debugNVueCss = debug('vite:uni:nvue-css')
 const cssVars = `page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}`
 const shadowCss = `page::after{position:fixed;content:'';left:-1000px;top:-1000px;-webkit-animation:shadow-preload .1s;-webkit-animation-delay:3s;animation:shadow-preload .1s;animation-delay:3s}@-webkit-keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}100%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}@keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}100%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}`
+const genComponentCustomHiddenCss = (name: string) =>
+  `[${name.replace(':', '')}="true"]{display: none !important;}`
 
 export function createConfigResolved({
   style: { extname },
+  template: { component },
 }: UniMiniProgramPluginOptions): Plugin['configResolved'] {
   function normalizeCssChunkFilename(id: string, extname: string) {
     return (
@@ -54,10 +57,15 @@ export function createConfigResolved({
       chunkCssCode(filename, cssCode) {
         cssCode = transformScopedCss(cssCode)
         if (filename === 'app' + extname) {
+          const componentCustomHiddenCss =
+            (component &&
+              component.vShow &&
+              genComponentCustomHiddenCss(component.vShow)) ||
+            ''
           if (config.isProduction) {
-            return cssCode + shadowCss + cssVars
+            return cssCode + shadowCss + cssVars + componentCustomHiddenCss
           } else {
-            return cssCode + cssVars
+            return cssCode + cssVars + componentCustomHiddenCss
           }
         }
 

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

@@ -57,6 +57,7 @@ export interface UniMiniProgramPluginOptions {
     class: MiniProgramCompilerOptions['class']
     slot: MiniProgramCompilerOptions['slot']
     lazyElement?: MiniProgramCompilerOptions['lazyElement']
+    component?: MiniProgramCompilerOptions['component']
     customElements?: string[]
     filter?: {
       lang: string
@@ -96,6 +97,7 @@ export function uniMiniProgramPlugin(
         filter: template.filter ? { lang: template.filter.lang } : undefined,
         directive: template.directive,
         lazyElement: template.lazyElement,
+        component: template.component,
         emitFile,
         slot: template.slot,
       },

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

 import { assert } from './testUtils'
 import { customElements } from '../src/compiler/options'
 describe('mp-weixin: transform component', () => {
+  test(`component with v-show`, () => {
+    assert(
+      `<custom v-show="ok"/>`,
+      `<custom data-c-h="{{!a}}" u-i="2a9ec0b0-0" bind:__l="__l"/>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.ok }
+}`
+    )
+  })
   test(`built-in component`, () => {
     const code = customElements.map((tag) => `<${tag}/>`).join('')
     assert(

packages/uni-mp-weixin/dist/uni.compiler.js

@@ -75,6 +75,9 @@ const miniProgram = {
         canvas: [{ name: 'bind', arg: ['canvas-id', 'id'] }],
         editor: [{ name: 'on', arg: ['ready'] }],
     },
+    component: {
+        vShow: uniCliShared.COMPONENT_CUSTOM_HIDDEN,
+    },
 };
 const projectConfigFilename = 'project.config.json';
 const options = {

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

 import path from 'path'
 import type { CompilerOptions } from '@vue/compiler-core'
 import {
+  COMPONENT_CUSTOM_HIDDEN,
   MiniProgramCompilerOptions,
   transformComponentLink,
   transformRef,
@@ -28,6 +29,9 @@ export const miniProgram: MiniProgramCompilerOptions = {
     canvas: [{ name: 'bind', arg: ['canvas-id', 'id'] }],
     editor: [{ name: 'on', arg: ['ready'] }],
   },
+  component: {
+    vShow: COMPONENT_CUSTOM_HIDDEN,
+  },
 }
 const projectConfigFilename = 'project.config.json'