wip(app): wxs

packages/shims-uni-app.d.ts

@@ -275,6 +275,8 @@ declare namespace UniApp {
     shown: boolean
   }
 
+  interface ComponentDescriptor {}
+
   type OnApiLike = (callback: (result: unknown) => void) => void
   type CallbackFunction = (...args: any[]) => void
   interface UniServiceJSBridge {

packages/uni-app-plus/dist/uni-app-service.es.js

@@ -9370,23 +9370,25 @@ var serviceContext = (function (vue) {
           $wxsModules.push(module);
       });
   }
-  const renderjsModule = {};
   function proxyModule(component, module) {
-      return new Proxy(renderjsModule, {
+      const target = {};
+      return new Proxy(target, {
           get(_, p) {
-              return createModuleFunction(component, module, p);
+              return (target[p] ||
+                  (target[p] = createModuleFunction(component, module, p)));
           },
       });
   }
-  function renderjsFn() { }
   function createModuleFunction(component, module, name) {
+      const target = () => { };
       const toJSON = () => WXS_PROTOCOL + JSON.stringify([component, module + '.' + name]);
-      return new Proxy(renderjsFn, {
+      return new Proxy(target, {
           get(_, p) {
               if (p === 'toJSON') {
                   return toJSON;
               }
-              return createModuleFunction(component, module + '.' + name, p);
+              return (target[p] ||
+                  (target[p] = createModuleFunction(component, module + '.' + name, p)));
           },
           apply(_target, _thisArg, args) {
               return (WXS_PROTOCOL +

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

@@ -865,6 +865,7 @@
   var ATTR_INNER_HTML = "innerHTML";
   var ATTR_TEXT_CONTENT = "textContent";
   var ATTR_V_SHOW = ".vShow";
+  var ATTR_CHANGE_PREFIX = "change:";
   var ACTION_TYPE_PAGE_CREATE = 1;
   var ACTION_TYPE_PAGE_CREATED = 2;
   var ACTION_TYPE_CREATE = 3;
@@ -7541,12 +7542,9 @@
   var WXS_PROTOCOL_LEN = WXS_PROTOCOL.length;
   function invokeWxs(value, invokerArgs) {
     var [component, invoker, args] = JSON.parse(value.substr(WXS_PROTOCOL_LEN));
-    if (isArray(args)) {
+    if (isArray(invokerArgs) || isArray(args)) {
       var [moduleName, mehtodName] = invoker.split(".");
-      if (invokerArgs) {
-        args.push(...invokerArgs);
-      }
-      return invokeWxsMethod(component, moduleName, mehtodName, args);
+      return invokeWxsMethod(component, moduleName, mehtodName, invokerArgs || args);
     }
     return getWxsProp(component, invoker);
   }
@@ -7568,6 +7566,19 @@
     }
     return getValueByDataPath(modules, dataPath);
   }
+  function createWxsPropsInvoker(wxsInvoker, value) {
+    var oldValue = value;
+    return (newValue) => {
+      var ownerInstance = null;
+      var instance = null;
+      try {
+        invokeWxs(wxsInvoker, [newValue, oldValue, ownerInstance, instance]);
+      } catch (e2) {
+        console.error(e2);
+      }
+      oldValue = newValue;
+    };
+  }
   function removeEventListener(el, type) {
     var listener = el.__listeners[type];
     if (listener) {
@@ -7672,9 +7683,11 @@
     constructor(id2, element, parentNodeId, refNodeId, nodeJson, propNames = []) {
       super(id2, element.tagName, parentNodeId, element);
       this.$props = reactive({});
+      this.$hasWxsProps = false;
       this.$.__id = id2;
       this.$.__listeners = Object.create(null);
       this.$propNames = propNames;
+      this.$wxsProps = new Map();
       this._update = this.update.bind(this);
       this.init(nodeJson);
       this.insert(parentNodeId, refNodeId);
@@ -7701,10 +7714,23 @@
       this.update(true);
     }
     setAttrs(attrs2) {
+      this.setWxsProps(attrs2);
       Object.keys(attrs2).forEach((name) => {
         this.setAttr(name, attrs2[name]);
       });
     }
+    setWxsProps(attrs2) {
+      Object.keys(attrs2).forEach((name) => {
+        if (name.indexOf(ATTR_CHANGE_PREFIX) === 0) {
+          var value = attrs2[name.replace(ATTR_CHANGE_PREFIX, "")];
+          var invoker = createWxsPropsInvoker(attrs2[name], value);
+          queuePostActionJob(() => invoker(value));
+          this.$wxsProps.set(name, invoker);
+          delete attrs2[name];
+          this.$hasWxsProps = true;
+        }
+      });
+    }
     addWxsEvents(events) {
       Object.keys(events).forEach((name) => {
         var [wxsEvent, flag] = events[name];
@@ -7754,7 +7780,12 @@
       if (this.$propNames.indexOf(name) !== -1) {
         this.$props[name] = value;
       } else {
-        this.$.setAttribute(name, value);
+        var wxsPropsInvoker = this.$hasWxsProps && this.$wxsProps.get(ATTR_CHANGE_PREFIX + name);
+        if (wxsPropsInvoker) {
+          wxsPropsInvoker(value);
+        } else {
+          this.$.setAttribute(name, value);
+        }
       }
     }
     removeAttribute(name) {

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

@@ -6,6 +6,7 @@ import {
   ATTR_TEXT_CONTENT,
   ATTR_V_SHOW,
   UniNodeJSON,
+  ATTR_CHANGE_PREFIX,
 } from '@dcloudio/uni-shared'
 import { reactive, watch } from 'vue'
 import { UniNode } from './UniNode'
@@ -16,11 +17,14 @@ import { UniCustomElement } from '../components'
 import { queuePostActionJob } from '../scheduler'
 import { decodeAttr } from '../utils'
 import { patchVShow, VShowElement } from '../directives/vShow'
+import { createWxsPropsInvoker, WxsPropsInvoker } from '../wxs'
 
 export class UniElement<T extends object> extends UniNode {
   declare $: UniCustomElement
   $props: T = reactive({} as any)
   $propNames: string[]
+  $wxsProps: Map<string, WxsPropsInvoker>
+  $hasWxsProps: boolean = false
   protected _update?: Function
   constructor(
     id: number,
@@ -34,6 +38,7 @@ export class UniElement<T extends object> extends UniNode {
     this.$.__id = id
     this.$.__listeners = Object.create(null)
     this.$propNames = propNames
+    this.$wxsProps = new Map<string, WxsPropsInvoker>()
     this._update = this.update.bind(this)
     this.init(nodeJson)
     this.insert(parentNodeId, refNodeId)
@@ -62,10 +67,26 @@ export class UniElement<T extends object> extends UniNode {
     this.update(true)
   }
   setAttrs(attrs: Record<string, any>) {
+    // 初始化时，先提取 wxsProps，再 setAttr
+    this.setWxsProps(attrs)
     Object.keys(attrs).forEach((name) => {
       this.setAttr(name, attrs[name])
     })
   }
+  setWxsProps(attrs: Record<string, any>) {
+    Object.keys(attrs).forEach((name) => {
+      if (name.indexOf(ATTR_CHANGE_PREFIX) === 0) {
+        const value = attrs[name.replace(ATTR_CHANGE_PREFIX, '')]
+        const invoker = createWxsPropsInvoker(attrs[name], value)
+        // 队列后再执行
+        queuePostActionJob(() => invoker(value))
+
+        this.$wxsProps.set(name, invoker)
+        delete attrs[name]
+        this.$hasWxsProps = true
+      }
+    })
+  }
   addWxsEvents(events: Record<string, [string, number]>) {
     Object.keys(events).forEach((name) => {
       const [wxsEvent, flag] = events[name]
@@ -97,7 +118,12 @@ export class UniElement<T extends object> extends UniNode {
       this.$.innerHTML = value as string
     } else if (name === ATTR_TEXT_CONTENT) {
       this.setText(value as string)
-    } else {
+    }
+    // 不提供动态修改wxsProps
+    // else if (this.$hasWxsProps && name.indexOf(ATTR_CHANGE_PREFIX) === 0) {
+    //   this.$wxsProps.set(name, value as string)
+    // }
+    else {
       this.setAttribute(name, value as string)
     }
   }
@@ -115,7 +141,13 @@ export class UniElement<T extends object> extends UniNode {
     if (this.$propNames.indexOf(name) !== -1) {
       ;(this.$props as any)[name] = value
     } else {
-      this.$.setAttribute(name, value as string)
+      const wxsPropsInvoker =
+        this.$hasWxsProps && this.$wxsProps.get(ATTR_CHANGE_PREFIX + name)
+      if (wxsPropsInvoker) {
+        wxsPropsInvoker(value)
+      } else {
+        this.$.setAttribute(name, value as string)
+      }
     }
   }
   removeAttribute(name: string) {

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

@@ -3,7 +3,9 @@ import {
   formatLog,
   getValueByDataPath,
   WXS_PROTOCOL,
+  ATTR_CHANGE_PREFIX,
 } from '@dcloudio/uni-shared'
+import { ComponentDescriptor } from '@dcloudio/uni-core'
 
 declare global {
   interface Window {
@@ -32,13 +34,15 @@ const WXS_PROTOCOL_LEN = WXS_PROTOCOL.length
 
 export function invokeWxs(value: string, invokerArgs?: unknown[]) {
   const [component, invoker, args] = JSON.parse(value.substr(WXS_PROTOCOL_LEN))
-  if (isArray(args)) {
+  if (isArray(invokerArgs) || isArray(args)) {
     // methods
     const [moduleName, mehtodName] = invoker.split('.')
-    if (invokerArgs) {
-      args.push(...invokerArgs)
-    }
-    return invokeWxsMethod(component, moduleName, mehtodName, args)
+    return invokeWxsMethod(
+      component,
+      moduleName,
+      mehtodName,
+      invokerArgs || args
+    )
   }
   return getWxsProp(component, invoker)
 }
@@ -69,3 +73,23 @@ function getWxsProp(component: string, dataPath: string) {
   }
   return getValueByDataPath(modules, dataPath)
 }
+
+export type WxsPropsInvoker = (newValue: unknown) => void
+
+export function createWxsPropsInvoker(
+  wxsInvoker: string,
+  value: unknown
+): WxsPropsInvoker {
+  let oldValue = value
+  return (newValue: unknown) => {
+    // TODO
+    const ownerInstance: ComponentDescriptor | null = null
+    const instance: ComponentDescriptor | null = null
+    try {
+      invokeWxs(wxsInvoker, [newValue, oldValue, ownerInstance, instance])
+    } catch (e) {
+      console.error(e)
+    }
+    oldValue = newValue
+  }
+}

packages/uni-core/src/view/index.ts

@@ -11,3 +11,4 @@ export {
   createNativeEvent,
   $nne as normalizeNativeEvent,
 } from './plugin/componentInstance'
+export { ComponentDescriptor } from './plugin/componentWxs'

packages/uni-core/src/view/plugin/componentWxs.ts

-import { ComponentPublicInstance } from 'vue'
+import { ComponentInternalInstance, ComponentPublicInstance } from 'vue'
 import { hyphenate, isFunction, isPlainObject } from '@vue/shared'
 import { isBuiltInComponent } from '@dcloudio/uni-shared'
 // import { normalizeEvent, findUniTarget } from './componentEvents'
@@ -8,7 +8,8 @@ interface WxsElement extends HTMLElement {
   __wxsAddClass: string
   __wxsRemoveClass: string[]
   __wxsState: Record<string, any>
-  __vue__: ComponentPublicInstance // TODO vue3 暂不支持
+  __vueParentComponent: ComponentInternalInstance // vue3 引擎内部，需要开放该属性
+  __wxsComponentDescriptor: ComponentDescriptor
 }
 
 const CLASS_RE = /^\s+|\s+$/g
@@ -54,10 +55,17 @@ function parseStyleText(cssText: string) {
   return res
 }
 
-class ComponentDescriptor {
-  private $vm: ComponentPublicInstance
+interface ComponentDescriptorVm {
+  _$id?: string
+  $el: WxsElement
+  $emit: (event: string, ...args: any[]) => void
+  $forceUpdate: () => void
+}
+
+export class ComponentDescriptor {
+  private $vm: ComponentDescriptorVm
   private $el: WxsElement
-  constructor(vm: ComponentPublicInstance) {
+  constructor(vm: ComponentDescriptorVm) {
     this.$vm = vm
     this.$el = vm.$el
   }
@@ -67,7 +75,11 @@ class ComponentDescriptor {
       return
     }
     const el = this.$el.querySelector(selector) as WxsElement
-    return el && el.__vue__ && createComponentDescriptor(el.__vue__, false)
+    return (
+      el &&
+      el.__vueParentComponent &&
+      createComponentDescriptor(el.__vueParentComponent.proxy!, false)
+    )
   }
 
   selectAllComponents(selector: string) {
@@ -78,8 +90,10 @@ class ComponentDescriptor {
     const els = this.$el.querySelectorAll(selector)
     for (let i = 0; i < els.length; i++) {
       const el = els[i] as WxsElement
-      el.__vue__ &&
-        descriptors.push(createComponentDescriptor(el.__vue__, false))
+      el.__vueParentComponent &&
+        descriptors.push(
+          createComponentDescriptor(el.__vueParentComponent.proxy!, false)
+        )
     }
     return descriptors
   }
@@ -147,13 +161,6 @@ class ComponentDescriptor {
     return this.$el && this.$el.classList.contains(cls)
   }
 
-  getComputedStyle() {
-    if (this.$el) {
-      return window.getComputedStyle(this.$el)
-    }
-    return {}
-  }
-
   getDataset() {
     return this.$el && this.$el.dataset
   }
@@ -172,7 +179,7 @@ class ComponentDescriptor {
   }
 
   requestAnimationFrame(callback: FrameRequestCallback) {
-    return window.requestAnimationFrame(callback), this
+    return window.requestAnimationFrame(callback)
   }
 
   getState() {
@@ -183,19 +190,53 @@ class ComponentDescriptor {
     // TODO options
     return this.$vm.$emit(eventName, detail), this
   }
+
+  getComputedStyle(names?: string[]) {
+    if (this.$el) {
+      const styles = window.getComputedStyle(this.$el)
+      if (names && names.length) {
+        return names.reduce<Record<string, any>>((res, n) => {
+          res[n] = styles[n as keyof CSSStyleDeclaration]
+          return res
+        }, {})
+      }
+      return styles
+    }
+    return {}
+  }
+
+  setTimeout(handler: TimerHandler, timeout?: number) {
+    return window.setTimeout(handler, timeout)
+  }
+
+  clearTimeout(handle?: number) {
+    return window.clearTimeout(handle)
+  }
+
+  getBoundingClientRect() {
+    return this.$el.getBoundingClientRect()
+  }
+}
+
+function resolveOwnerVm(vm: ComponentPublicInstance) {
+  let componentName = vm.$options && vm.$options.name
+  while (componentName && isBuiltInComponent(hyphenate(componentName))) {
+    // ownerInstance 内置组件需要使用父 vm
+    vm = vm.$parent!
+    componentName = vm.$options && vm.$options.name
+  }
+  return vm
 }
 
 function createComponentDescriptor(
-  vm: ComponentPublicInstance,
+  vm: ComponentDescriptorVm,
   isOwnerInstance = true
 ) {
   if (isOwnerInstance && vm) {
-    let componentName = vm.$options && vm.$options.name
-    while (componentName && isBuiltInComponent(hyphenate(componentName))) {
-      // ownerInstance 内置组件需要使用父 vm
-      vm = vm.$parent!
-      componentName = vm.$options && vm.$options.name
+    if (__PLATFORM__ === 'h5') {
+      vm = resolveOwnerVm(vm as ComponentPublicInstance)
     }
+    // TODO App
   }
   if (vm && vm.$el) {
     if (!vm.$el.__wxsComponentDescriptor) {
@@ -211,29 +252,3 @@ export function getComponentDescriptor(
 ) {
   return createComponentDescriptor(instance, isOwnerInstance)
 }
-
-// export function handleWxsEvent(this: ComponentPublicInstance, $event: Event) {
-//   if (!($event instanceof Event)) {
-//     return $event
-//   }
-//   const currentTarget = $event.currentTarget as WxsElement
-//   const instance =
-//     currentTarget &&
-//     currentTarget.__vue__ &&
-//     getComponentDescriptor.call(this, currentTarget.__vue__, false)
-//   const $origEvent = $event
-//   $event = normalizeEvent(
-//     $origEvent.type,
-//     $origEvent,
-//     {},
-//     findUniTarget($origEvent, this.$el) || $origEvent.target,
-//     $origEvent.currentTarget as HTMLElement
-//   ) as Event
-//   ;($event as any).instance = instance
-//   $event.preventDefault = function () {
-//     return $origEvent.preventDefault()
-//   }
-//   $event.stopPropagation = function () {
-//     return $origEvent.stopPropagation()
-//   }
-// }

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

 import { withModifiers, createVNode, getCurrentInstance, defineComponent, ref, provide, computed, watch, onUnmounted, inject, onBeforeUnmount, mergeProps, reactive, onActivated, onMounted, nextTick, onBeforeMount, withDirectives, vShow, shallowRef, watchEffect, isVNode, Fragment, markRaw, createTextVNode, injectHook, onBeforeActivate, onBeforeDeactivate, openBlock, createBlock, renderList, onDeactivated, createApp, Transition, withCtx, KeepAlive, resolveDynamicComponent, renderSlot } from "vue";
 import { once, passive, initCustomDataset, invokeArrayFns, normalizeTarget, isBuiltInComponent, ON_RESIZE, ON_APP_ENTER_FOREGROUND, ON_APP_ENTER_BACKGROUND, ON_SHOW, ON_HIDE, ON_PAGE_SCROLL, ON_REACH_BOTTOM, EventChannel, SCHEME_RE, DATA_RE, getCustomDataset, ON_ERROR, callOptions, PRIMARY_COLOR, removeLeadingSlash, getLen, debounce, NAVBAR_HEIGHT, parseQuery, ON_UNLOAD, ON_REACH_BOTTOM_DISTANCE, decodedQuery, WEB_INVOKE_APPSERVICE, ON_WEB_INVOKE_APP_SERVICE, updateElementStyle, ON_BACK_PRESS, parseUrl, addFont, scrollTo, RESPONSIVE_MIN_WIDTH, formatDateTime, ON_PULL_DOWN_REFRESH } from "@dcloudio/uni-shared";
 import { initVueI18n, LOCALE_EN, LOCALE_ES, LOCALE_FR, LOCALE_ZH_HANS, LOCALE_ZH_HANT } from "@dcloudio/uni-i18n";
-import { extend, isString, hyphenate, isPlainObject, isFunction, isArray, hasOwn, isObject, capitalize, toRawType, makeMap as makeMap$1, isPromise, invokeArrayFns as invokeArrayFns$1 } from "@vue/shared";
+import { extend, isString, isPlainObject, isFunction, hyphenate, isArray, hasOwn, isObject, capitalize, toRawType, makeMap as makeMap$1, isPromise, invokeArrayFns as invokeArrayFns$1 } from "@vue/shared";
 import { useRoute, createRouter, createWebHistory, createWebHashHistory, useRouter, isNavigationFailure, RouterView } from "vue-router";
 let i18n;
 function useI18n() {
@@ -1006,7 +1006,7 @@ class ComponentDescriptor {
       return;
     }
     const el = this.$el.querySelector(selector);
-    return el && el.__vue__ && createComponentDescriptor(el.__vue__, false);
+    return el && el.__vueParentComponent && createComponentDescriptor(el.__vueParentComponent.proxy, false);
   }
   selectAllComponents(selector) {
     if (!this.$el || !selector) {
@@ -1016,7 +1016,7 @@ class ComponentDescriptor {
     const els = this.$el.querySelectorAll(selector);
     for (let i = 0; i < els.length; i++) {
       const el = els[i];
-      el.__vue__ && descriptors.push(createComponentDescriptor(el.__vue__, false));
+      el.__vueParentComponent && descriptors.push(createComponentDescriptor(el.__vueParentComponent.proxy, false));
     }
     return descriptors;
   }
@@ -1070,12 +1070,6 @@ class ComponentDescriptor {
   hasClass(cls) {
     return this.$el && this.$el.classList.contains(cls);
   }
-  getComputedStyle() {
-    if (this.$el) {
-      return window.getComputedStyle(this.$el);
-    }
-    return {};
-  }
   getDataset() {
     return this.$el && this.$el.dataset;
   }
@@ -1092,7 +1086,7 @@ class ComponentDescriptor {
     }
   }
   requestAnimationFrame(callback) {
-    return window.requestAnimationFrame(callback), this;
+    return window.requestAnimationFrame(callback);
   }
   getState() {
     return this.$el && (this.$el.__wxsState || (this.$el.__wxsState = {}));
@@ -1100,13 +1094,41 @@ class ComponentDescriptor {
   triggerEvent(eventName, detail = {}) {
     return this.$vm.$emit(eventName, detail), this;
   }
+  getComputedStyle(names) {
+    if (this.$el) {
+      const styles = window.getComputedStyle(this.$el);
+      if (names && names.length) {
+        return names.reduce((res, n) => {
+          res[n] = styles[n];
+          return res;
+        }, {});
+      }
+      return styles;
+    }
+    return {};
+  }
+  setTimeout(handler, timeout) {
+    return window.setTimeout(handler, timeout);
+  }
+  clearTimeout(handle) {
+    return window.clearTimeout(handle);
+  }
+  getBoundingClientRect() {
+    return this.$el.getBoundingClientRect();
+  }
+}
+function resolveOwnerVm(vm) {
+  let componentName = vm.$options && vm.$options.name;
+  while (componentName && isBuiltInComponent(hyphenate(componentName))) {
+    vm = vm.$parent;
+    componentName = vm.$options && vm.$options.name;
+  }
+  return vm;
 }
 function createComponentDescriptor(vm, isOwnerInstance = true) {
   if (isOwnerInstance && vm) {
-    let componentName = vm.$options && vm.$options.name;
-    while (componentName && isBuiltInComponent(hyphenate(componentName))) {
-      vm = vm.$parent;
-      componentName = vm.$options && vm.$options.name;
+    {
+      vm = resolveOwnerVm(vm);
     }
   }
   if (vm && vm.$el) {

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

@@ -575,6 +575,7 @@ const ATTR_STYLE = 'style';
 const ATTR_INNER_HTML = 'innerHTML';
 const ATTR_TEXT_CONTENT = 'textContent';
 const ATTR_V_SHOW = '.vShow';
+const ATTR_CHANGE_PREFIX = 'change:';
 class UniBaseNode extends UniNode {
     constructor(nodeType, nodeName, container) {
         super(nodeType, nodeName, container);
@@ -998,6 +999,7 @@ exports.ACTION_TYPE_REMOVE_ATTRIBUTE = ACTION_TYPE_REMOVE_ATTRIBUTE;
 exports.ACTION_TYPE_REMOVE_EVENT = ACTION_TYPE_REMOVE_EVENT;
 exports.ACTION_TYPE_SET_ATTRIBUTE = ACTION_TYPE_SET_ATTRIBUTE;
 exports.ACTION_TYPE_SET_TEXT = ACTION_TYPE_SET_TEXT;
+exports.ATTR_CHANGE_PREFIX = ATTR_CHANGE_PREFIX;
 exports.ATTR_CLASS = ATTR_CLASS;
 exports.ATTR_INNER_HTML = ATTR_INNER_HTML;
 exports.ATTR_STYLE = ATTR_STYLE;

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

@@ -54,6 +54,8 @@ string | number,
 number
 ];
 
+export declare const ATTR_CHANGE_PREFIX = "change:";
+
 export declare const ATTR_CLASS = "class";
 
 export declare const ATTR_INNER_HTML = "innerHTML";

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

@@ -571,6 +571,7 @@ const ATTR_STYLE = 'style';
 const ATTR_INNER_HTML = 'innerHTML';
 const ATTR_TEXT_CONTENT = 'textContent';
 const ATTR_V_SHOW = '.vShow';
+const ATTR_CHANGE_PREFIX = 'change:';
 class UniBaseNode extends UniNode {
     constructor(nodeType, nodeName, container) {
         super(nodeType, nodeName, container);
@@ -981,4 +982,4 @@ function getEnvLocale() {
     return (lang && lang.replace(/[.:].*/, '')) || 'en';
 }
 
-export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_ADD_WXS_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_PAGE_SCROLL, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CLASS, ATTR_INNER_HTML, ATTR_STYLE, ATTR_TEXT_CONTENT, 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, WXS_PROTOCOL, addFont, cache, cacheStringFunction, callOptions, createRpx2Unit, createUniEvent, debounce, decode, decodedQuery, defaultRpx2Unit, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, getValueByDataPath, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isRootHook, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle };
+export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_ADD_WXS_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_PAGE_SCROLL, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CHANGE_PREFIX, ATTR_CLASS, ATTR_INNER_HTML, ATTR_STYLE, ATTR_TEXT_CONTENT, 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, WXS_PROTOCOL, addFont, cache, cacheStringFunction, callOptions, createRpx2Unit, createUniEvent, debounce, decode, decodedQuery, defaultRpx2Unit, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, getValueByDataPath, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isRootHook, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle };

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

@@ -271,6 +271,8 @@ export const ATTR_STYLE = 'style'
 export const ATTR_INNER_HTML = 'innerHTML'
 export const ATTR_TEXT_CONTENT = 'textContent'
 export const ATTR_V_SHOW = '.vShow'
+
+export const ATTR_CHANGE_PREFIX = 'change:'
 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

@@ -13,6 +13,7 @@ export {
   ATTR_INNER_HTML,
   ATTR_TEXT_CONTENT,
   ATTR_V_SHOW,
+  ATTR_CHANGE_PREFIX,
   NODE_TYPE_PAGE,
   NODE_TYPE_ELEMENT,
   NODE_TYPE_TEXT,

packages/uni-vue/src/componentOptions/renderjs.ts

@@ -28,31 +28,43 @@ export function initModules(
   })
 }
 
-const renderjsModule = {}
-
 function proxyModule(component: string, module: string) {
-  return new Proxy(renderjsModule, {
+  const target: Record<string, any> = {}
+  return new Proxy(target, {
     get(_, p) {
-      return createModuleFunction(component, module, p as string)
+      return (
+        target[p as string] ||
+        (target[p as string] = createModuleFunction(
+          component,
+          module,
+          p as string
+        ))
+      )
     },
   })
 }
 
-function renderjsFn() {}
-
 function createModuleFunction(
   component: string,
   module: string,
   name: string
 ): Function {
+  const target: any = () => {}
   const toJSON = () =>
     WXS_PROTOCOL + JSON.stringify([component, module + '.' + name])
-  return new Proxy(renderjsFn, {
+  return new Proxy(target, {
     get(_, p) {
       if (p === 'toJSON') {
         return toJSON
       }
-      return createModuleFunction(component, module + '.' + name, p as string)
+      return (
+        target[p as string] ||
+        (target[p as string] = createModuleFunction(
+          component,
+          module + '.' + name,
+          p as string
+        ))
+      )
     },
     apply(_target, _thisArg, args) {
       return (