wip(app): uni-app-plus

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

@@ -5950,10 +5950,10 @@
       };
     }
   });
-  const UniButton = createWrapper(Button);
-  class UniButtonElement extends UniNode {
-    constructor(id) {
-      super(id, "uni-button");
+  class UniComponent extends UniNode {
+    constructor(id, tag, component) {
+      super(id, tag);
+      this.$component = component;
     }
     init(nodeJson) {
       const container = document.createElement("div");
@@ -5964,17 +5964,11 @@
           this.setAttr(n, a[n]);
         });
       }
-      const vm = createApp(UniButton, { attrs: this.$props }).mount(container);
+      createApp(createWrapper(this.$component, this.$props)).mount(container);
       this.$ = container.firstElementChild;
       if (hasOwn$1(nodeJson, "t")) {
         this.$.textContent = nodeJson.t || "";
       }
-      watch(this.$props, () => {
-        {
-          console.log(formatLog(this.tag, "props", "forceUpdate"));
-        }
-        vm.$forceUpdate();
-      });
     }
     setAttr(name, value) {
       const decoded = decodeAttr(name);
@@ -5988,6 +5982,11 @@
       this.$props[decodeAttr(name)] = null;
     }
   }
+  class UniButton extends UniComponent {
+    constructor(id) {
+      super(id, "uni-button", Button);
+    }
+  }
   const BuiltInComponents = [
     ,
     UniViewElement,
@@ -5997,23 +5996,13 @@
     UniComment,
     ,
     ,
-    UniButtonElement
+    UniButton
   ];
   function createBuiltInComponent(type, id) {
     return new BuiltInComponents[type](id);
   }
-  function createWrapper(component) {
-    return defineComponent({
-      props: ["attrs"],
-      data() {
-        return {
-          props: this.attrs
-        };
-      },
-      render() {
-        return h(component, this.props);
-      }
-    });
+  function createWrapper(component, props) {
+    return () => h(component, props);
   }
   const elements = new Map();
   function $(id) {

packages/uni-app-plus/src/PageAction.ts

 import { onNodeEvent } from './service/framework/dom/onNodeEvent'
-import { createElement } from './view/framework/dom/elements'
+import { createElement } from './view/framework/dom/page'
 import { UniElement } from './view/framework/dom/elements/UniElement'
 
 export const ACTION_TYPE_PAGE_CREATE = 1

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

+import '@dcloudio/uni-components/style/button.css'
+import { Button } from '@dcloudio/uni-components'
+
+import { UniComponent } from './UniComponent'
+
+export class UniButton extends UniComponent {
+  constructor(id: number) {
+    super(id, 'uni-button', Button)
+  }
+}

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

-import '@dcloudio/uni-components/style/button.css'
 import { hasOwn } from '@vue/shared'
-import { Button } from '@dcloudio/uni-components'
-import { createApp, reactive, watch } from 'vue'
-import { createWrapper } from '.'
-import {
-  decodeAttr,
-  formatLog,
-  parseEventName,
-  UniNodeJSON,
-} from '@dcloudio/uni-shared'
-import { UniNode } from '../UniNode'
+import { Component, createApp, reactive } from 'vue'
+import { decodeAttr, parseEventName, UniNodeJSON } from '@dcloudio/uni-shared'
+import { UniNode } from '../elements/UniNode'
 import { createInvoker } from '../modules/events'
+import { createWrapper } from '.'
 
-const UniButton = createWrapper(Button)
-
-export class UniButtonElement extends UniNode {
+export class UniComponent extends UniNode {
+  private $component: Component
   private $props!: Record<string, any>
-  constructor(id: number) {
-    super(id, 'uni-button')
+  constructor(id: number, tag: string, component: Component) {
+    super(id, tag)
+    this.$component = component
   }
   init(nodeJson: Partial<UniNodeJSON>) {
     const container = document.createElement('div')
@@ -28,17 +21,13 @@ export class UniButtonElement extends UniNode {
         this.setAttr(n, a[n])
       })
     }
-    const vm = createApp(UniButton, { attrs: this.$props }).mount(container)
+    const vm = createApp(createWrapper(this.$component, this.$props)).mount(
+      container
+    )
     this.$ = container.firstElementChild!
     if (hasOwn(nodeJson, 't')) {
       this.$.textContent = nodeJson.t || ''
     }
-    watch(this.$props, () => {
-      if (__DEV__) {
-        console.log(formatLog(this.tag, 'props', 'forceUpdate'))
-      }
-      vm.$forceUpdate()
-    })
   }
   setAttr(name: string, value: unknown) {
     const decoded = decodeAttr(name)

packages/uni-app-plus/src/view/framework/dom/elements/components/index.ts → packages/uni-app-plus/src/view/framework/dom/components/index.ts

-import { defineComponent, h, reactive } from 'vue'
-import { UniComment } from '../UniComment'
-import { UniText } from '../UniText'
-import { UniViewElement } from '../UniViewElement'
-import { UniButtonElement } from './UniButtonElement'
+import { defineComponent, h } from 'vue'
+import { UniComment } from '../elements/UniComment'
+import { UniText } from '../elements/UniText'
+import { UniViewElement } from '../elements/UniViewElement'
+import { UniButton } from './UniButton'
 
 export interface UniCustomElement extends Element {
   __id: number
@@ -18,23 +18,18 @@ const BuiltInComponents = [
   UniComment,
   ,
   ,
-  UniButtonElement,
+  UniButton,
 ]
 
+export type WrapperComponent = ReturnType<typeof createWrapper>
+
 export function createBuiltInComponent(type: number, id: number) {
   return new BuiltInComponents[type]!(id)
 }
 
-export function createWrapper(component: ReturnType<typeof defineComponent>) {
-  return defineComponent({
-    props: ['attrs'],
-    data() {
-      return {
-        props: this.attrs,
-      }
-    },
-    render() {
-      return h(component, this.props)
-    },
-  })
+export function createWrapper(
+  component: ReturnType<typeof defineComponent>,
+  props: Record<string, any>
+) {
+  return () => h(component, props)
 }

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

@@ -2,10 +2,10 @@ import { hasOwn } from '@vue/shared'
 import { decodeAttr, UniNodeJSON } from '@dcloudio/uni-shared'
 
 import { UniNode } from './UniNode'
-import { patchClass } from './modules/class'
-import { patchStyle } from './modules/style'
-import { patchEvent } from './modules/events'
-import { UniCustomElement } from './components'
+import { patchClass } from '../modules/class'
+import { patchStyle } from '../modules/style'
+import { patchEvent } from '../modules/events'
+import { UniCustomElement } from '../components'
 
 export class UniElement extends UniNode {
   $: UniCustomElement

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

 import { hasOwn } from '@vue/shared'
 import { UniNodeJSON } from '@dcloudio/uni-shared'
 
-import { $ } from '.'
+import { $ } from '../page'
 
 export class UniNode {
   id: number

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

-import { isString } from '@vue/shared'
-import { createBuiltInComponent } from './components'
-
-import { UniElement } from './UniElement'
-import { UniText } from './UniText'
-
-const elements = new Map<number, UniElement | UniText>()
-
-export function $(id: number) {
-  return elements.get(id) as UniElement
-}
-
-export function createElement(id: number, tag: string | number) {
-  let element: UniElement | UniText
-  if (isString(tag)) {
-    element = new UniElement(id, document.createElement(tag))
-  } else {
-    element = createBuiltInComponent(tag, id)
-  }
-  elements.set(id, element)
-  return element
-}

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

@@ -9,8 +9,7 @@ import {
   ACTION_TYPE_SET_TEXT,
   PageAction,
 } from '../../../PageAction'
-import { $, createElement } from './elements'
-import { onPageCreate, onPageCreated } from './page'
+import { $, createElement, onPageCreate, onPageCreated } from './page'
 
 export function onVdSync(actions: PageAction[]) {
   actions.forEach((action) => {

packages/uni-app-plus/src/view/framework/dom/elements/modules/events.ts → packages/uni-app-plus/src/view/framework/dom/modules/events.ts

@@ -7,8 +7,8 @@ import {
   EventModifierFlags,
   normalizeEventType,
 } from '@dcloudio/uni-shared'
-import { VD_SYNC } from '../../../../../constants'
-import { ACTION_TYPE_EVENT } from '../../../../../PageAction'
+import { VD_SYNC } from '../../../../constants'
+import { ACTION_TYPE_EVENT } from '../../../../PageAction'
 import { UniCustomElement } from '../components'
 
 export function patchEvent(el: UniCustomElement, name: string, flag: number) {

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

+import { isString } from '@vue/shared'
 import {
   createScrollListener,
   CreateScrollListenerOptions,
@@ -6,7 +7,28 @@ import {
 } from '@dcloudio/uni-core'
 import { formatLog } from '@dcloudio/uni-shared'
 import { PageCreateData } from '../../../PageAction'
-import { createElement } from './elements'
+
+import { createBuiltInComponent } from './components'
+
+import { UniElement } from './elements/UniElement'
+import { UniNode } from './elements/UniNode'
+
+const elements = new Map<number, UniNode>()
+
+export function $(id: number) {
+  return elements.get(id) as UniElement
+}
+
+export function createElement(id: number, tag: string | number) {
+  let element: UniNode
+  if (isString(tag)) {
+    element = new UniElement(id, document.createElement(tag))
+  } else {
+    element = createBuiltInComponent(tag, id)
+  }
+  elements.set(id, element)
+  return element
+}
 
 export function onPageCreated() {}
 

packages/vite-plugin-uni/package.json

@@ -41,7 +41,7 @@
     "@types/sass": "^1.16.0"
   },
   "uni-app": {
-    "compilerVersion": "3.1.21"
+    "compilerVersion": "3.1.22"
   },
   "gitHead": "56deaeb47d42e924d10282d7af418ccee6b139bf"
 }