feat(app): vShow

packages/uni-app-plus/dist/uni-app-view.umd.js

@@ -276,6 +276,7 @@
   };
   const ATTR_CLASS = "class";
   const ATTR_STYLE = "style";
+  const ATTR_V_SHOW = ".vShow";
   const ACTION_TYPE_PAGE_CREATE = 1;
   const ACTION_TYPE_PAGE_CREATED = 2;
   const ACTION_TYPE_CREATE = 3;
@@ -6062,6 +6063,10 @@
     }
     return value;
   }
+  function patchVShow(el, value) {
+    el._vod = el.style.display === "none" ? "" : el.style.display;
+    el.style.display = value ? el._vod : "none";
+  }
   class UniElement extends UniNode {
     constructor(id2, element, parentNodeId, refNodeId, nodeJson, propNames = []) {
       super(id2, element.tagName, parentNodeId, element);
@@ -6110,6 +6115,8 @@
         patchClass(this.$, value);
       } else if (name === ATTR_STYLE) {
         patchStyle(this.$, value);
+      } else if (name === ATTR_V_SHOW) {
+        patchVShow(this.$, value);
       } else {
         this.setAttribute(name, value);
       }
@@ -14704,6 +14711,9 @@
       if (hasOwn$1(nodeJson, "t")) {
         this.setText(nodeJson.t || "");
       }
+      if (nodeJson.a && hasOwn$1(nodeJson.a, ATTR_V_SHOW)) {
+        patchVShow(this.$, nodeJson.a[ATTR_V_SHOW]);
+      }
       this.insert(parentNodeId, refNodeId);
       flushPostFlushCbs();
     }
@@ -14731,8 +14741,14 @@
       this.$props[name] = null;
     }
     setAttr(name, value) {
+      if (name === ATTR_V_SHOW) {
+        if (this.$) {
+          patchVShow(this.$, value);
+        }
+      } else {
         this.$props[name] = decodeAttr(value);
       }
+    }
     removeAttr(name) {
       this.$props[name] = null;
     }

packages/uni-app-plus/src/view/framework/dom/components/UniComponent.ts

@@ -8,13 +8,19 @@ import {
   // @ts-expect-error
   flushPostFlushCbs,
 } from 'vue'
-import { formatLog, parseEventName, UniNodeJSON } from '@dcloudio/uni-shared'
+import {
+  ATTR_V_SHOW,
+  formatLog,
+  parseEventName,
+  UniNodeJSON,
+} from '@dcloudio/uni-shared'
 import { UniNode } from '../elements/UniNode'
 import { createInvoker } from '../modules/events'
 import { createWrapper, UniCustomElement } from '.'
 import { $, removeElement } from '../page'
 import { queuePostActionJob } from '../scheduler'
 import { decodeAttr } from '../utils'
+import { patchVShow, VShowElement } from '../directives/vShow'
 
 export class UniComponent extends UniNode {
   declare $: UniCustomElement
@@ -49,6 +55,10 @@ export class UniComponent extends UniNode {
     if (hasOwn(nodeJson, 't')) {
       this.setText(nodeJson.t || '')
     }
+    // 初始化时，处理一次vShow
+    if (nodeJson.a && hasOwn(nodeJson.a, ATTR_V_SHOW)) {
+      patchVShow(this.$ as VShowElement, nodeJson.a[ATTR_V_SHOW])
+    }
     this.insert(parentNodeId, refNodeId)
     // 延迟到insert之后，再flush，确保mounted等生命周期触发正常
     flushPostFlushCbs()
@@ -81,8 +91,14 @@ export class UniComponent extends UniNode {
     this.$props[name] = null
   }
   setAttr(name: string, value: unknown) {
+    if (name === ATTR_V_SHOW) {
+      if (this.$) {
+        patchVShow(this.$ as VShowElement, value)
+      }
+    } else {
       this.$props[name] = decodeAttr(value)
     }
+  }
   removeAttr(name: string) {
     this.$props[name] = null
   }

packages/uni-app-plus/src/view/framework/dom/directives/vShow.ts

+import { UniCustomElement } from '../components'
+
+export interface VShowElement extends UniCustomElement {
+  // _vod = vue original display
+  _vod: string
+}
+
+export function patchVShow(el: VShowElement, value: unknown) {
+  el._vod = el.style.display === 'none' ? '' : el.style.display
+  el.style.display = value ? el._vod : 'none'
+}

packages/uni-app-plus/src/view/framework/dom/elements/UniElement.ts

 import { hasOwn } from '@vue/shared'
-import { ATTR_CLASS, ATTR_STYLE, UniNodeJSON } from '@dcloudio/uni-shared'
+import {
+  ATTR_CLASS,
+  ATTR_STYLE,
+  ATTR_V_SHOW,
+  UniNodeJSON,
+} from '@dcloudio/uni-shared'
 import { reactive, watch } from 'vue'
 import { UniNode } from './UniNode'
 import { patchClass } from '../modules/class'
@@ -8,6 +13,7 @@ import { patchEvent } from '../modules/events'
 import { UniCustomElement } from '../components'
 import { queuePostActionJob } from '../scheduler'
 import { decodeAttr } from '../utils'
+import { patchVShow, VShowElement } from '../directives/vShow'
 
 export class UniElement<T extends object> extends UniNode {
   declare $: UniCustomElement
@@ -71,6 +77,8 @@ export class UniElement<T extends object> extends UniNode {
       patchClass(this.$, value as string)
     } else if (name === ATTR_STYLE) {
       patchStyle(this.$, value as string | Record<string, any>)
+    } else if (name === ATTR_V_SHOW) {
+      patchVShow(this.$ as VShowElement, value)
     } else {
       this.setAttribute(name, value as string)
     }

packages/uni-app-vite/dist/plugin/build.js

@@ -8,6 +8,7 @@ const path_1 = __importDefault(require("path"));
 const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
 function buildOptions() {
     return {
+        assetsInlineLimit: 0,
         rollupOptions: {
             input: uni_cli_shared_1.resolveMainPathOnce(process.env.UNI_INPUT_DIR),
             external: ['vue'],

packages/uni-app-vite/src/plugin/build.ts

@@ -5,6 +5,7 @@ import { normalizePath, resolveMainPathOnce } from '@dcloudio/uni-cli-shared'
 
 export function buildOptions(): UserConfig['build'] {
   return {
+    assetsInlineLimit: 0,
     rollupOptions: {
       input: resolveMainPathOnce(process.env.UNI_INPUT_DIR),
       external: ['vue'],

packages/uni-shared/dist/uni-shared.cjs.js

@@ -572,6 +572,7 @@ class UniNode extends UniEventTarget {
 }
 const ATTR_CLASS = 'class';
 const ATTR_STYLE = 'style';
+const ATTR_V_SHOW = '.vShow';
 class UniBaseNode extends UniNode {
     constructor(nodeType, nodeName, container) {
         super(nodeType, nodeName, container);
@@ -951,6 +952,7 @@ exports.ACTION_TYPE_SET_ATTRIBUTE = ACTION_TYPE_SET_ATTRIBUTE;
 exports.ACTION_TYPE_SET_TEXT = ACTION_TYPE_SET_TEXT;
 exports.ATTR_CLASS = ATTR_CLASS;
 exports.ATTR_STYLE = ATTR_STYLE;
+exports.ATTR_V_SHOW = ATTR_V_SHOW;
 exports.BACKGROUND_COLOR = BACKGROUND_COLOR;
 exports.BUILT_IN_TAGS = BUILT_IN_TAGS;
 exports.COMPONENT_NAME_PREFIX = COMPONENT_NAME_PREFIX;

packages/uni-shared/dist/uni-shared.d.ts

@@ -40,6 +40,8 @@ export declare const ATTR_CLASS = "class";
 
 export declare const ATTR_STYLE = "style";
 
+export declare const ATTR_V_SHOW = ".vShow";
+
 export declare const BACKGROUND_COLOR = "#f7f7f7";
 
 export declare const BUILT_IN_TAGS: string[];

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

@@ -568,6 +568,7 @@ class UniNode extends UniEventTarget {
 }
 const ATTR_CLASS = 'class';
 const ATTR_STYLE = 'style';
+const ATTR_V_SHOW = '.vShow';
 class UniBaseNode extends UniNode {
     constructor(nodeType, nodeName, container) {
         super(nodeType, nodeName, container);
@@ -934,4 +935,4 @@ function getEnvLocale() {
     return (lang && lang.replace(/[.:].*/, '')) || 'en';
 }
 
-export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CLASS, ATTR_STYLE, BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventChannel, EventModifierFlags, JSON_PROTOCOL, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, PLUS_RE, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, addFont, cache, cacheStringFunction, callOptions, createRpx2Unit, createUniEvent, debounce, decode, decodedQuery, defaultRpx2Unit, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle };
+export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CLASS, ATTR_STYLE, ATTR_V_SHOW, BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventChannel, EventModifierFlags, JSON_PROTOCOL, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, PLUS_RE, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, addFont, cache, cacheStringFunction, callOptions, createRpx2Unit, createUniEvent, debounce, decode, decodedQuery, defaultRpx2Unit, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle };

packages/uni-shared/src/vdom/Node.ts

@@ -254,6 +254,7 @@ export interface UniNodeJSON {
 
 export const ATTR_CLASS = 'class'
 export const ATTR_STYLE = 'style'
+export const ATTR_V_SHOW = '.vShow'
 export class UniBaseNode extends UniNode {
   attributes: Record<string, unknown> = Object.create(null)
   style: null | string | Record<string, string | string[]> = null

packages/uni-shared/src/vdom/index.ts

@@ -10,6 +10,7 @@ export {
 export {
   ATTR_CLASS,
   ATTR_STYLE,
+  ATTR_V_SHOW,
   NODE_TYPE_PAGE,
   NODE_TYPE_ELEMENT,
   NODE_TYPE_TEXT,