wip(app): uni-app-plus

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

@@ -14384,6 +14384,24 @@
       return (this.$holder || this.$).insertBefore(newChild, refChild);
     }
   }
+  class UniContainerComponent extends UniComponent {
+    constructor(id2, tag, component, parentNodeId, nodeJson, selector) {
+      super(id2, tag, component, parentNodeId, nodeJson, selector);
+      this.initObserver();
+    }
+    initObserver() {
+      const elem = this.$holder || this.$;
+      const observer = new MutationObserver((mutations) => {
+        {
+          console.log(formatLog("Observer", mutations));
+        }
+      });
+      observer.observe(elem, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
   function getVueParent(node) {
     while (node && node.pid > 0) {
       node = $(node.pid);
@@ -14683,6 +14701,9 @@
         return tags2;
       });
       const cover = new plus.nativeObj.View(`cover-${Date.now()}-${id++}`, viewPosition.value, tags.value);
+      {
+        console.log(formatLog("Cover", cover.id, viewPosition.value, tags.value));
+      }
       plus.webview.currentWebview().append(cover);
       if (hidden.value) {
         cover.hide();
@@ -14721,48 +14742,44 @@
       style.value = props2.autoSize ? "width:0;height:0;" : "";
       const realPath = props2.src ? getRealPath(props2.src) : "";
       if (realPath.indexOf("http://") === 0 || realPath.indexOf("https://") === 0) {
-        plusReady(() => {
-          downloaTask = plus.downloader.createDownload(realPath, {
-            filename: TEMP_PATH + "/download/"
-          }, (task, status) => {
-            if (status === 200) {
-              getImageInfo(task.filename);
-            } else {
-              trigger2("error", {}, {
-                errMsg: "error"
-              });
-            }
-          });
-          downloaTask.start();
+        downloaTask = plus.downloader.createDownload(realPath, {
+          filename: TEMP_PATH + "/download/"
+        }, (task, status) => {
+          if (status === 200) {
+            getImageInfo(task.filename);
+          } else {
+            trigger2("error", {}, {
+              errMsg: "error"
+            });
+          }
         });
+        downloaTask.start();
       } else if (realPath) {
         getImageInfo(realPath);
       }
     }
     function getImageInfo(src) {
       content.src = src;
-      plusReady(() => {
-        plus.io.getImageInfo({
-          src,
-          success: ({
+      plus.io.getImageInfo({
+        src,
+        success: ({
+          width,
+          height
+        }) => {
+          if (props2.autoSize) {
+            style.value = `width:${width}px;height:${height}px;`;
+            window.dispatchEvent(new CustomEvent("updateview"));
+          }
+          trigger2("load", {}, {
             width,
             height
-          }) => {
-            if (props2.autoSize) {
-              style.value = `width:${width}px;height:${height}px;`;
-              window.dispatchEvent(new CustomEvent("updateview"));
-            }
-            trigger2("load", {}, {
-              width,
-              height
-            });
-          },
-          fail: () => {
-            trigger2("error", {}, {
-              errMsg: "error"
-            });
-          }
-        });
+          });
+        },
+        fail: () => {
+          trigger2("error", {}, {
+            errMsg: "error"
+          });
+        }
       });
     }
     if (props2.src) {
@@ -14824,7 +14841,9 @@
         const defaultSlots = slots.default ? flatVNode(slots.default()) : [];
         let text2 = "";
         defaultSlots.forEach((node) => {
-          text2 += node.children || "";
+          if (isString(node.children)) {
+            text2 += node.children;
+          }
         });
         content.text = text2;
         return createVNode("uni-cover-view", {
@@ -14992,7 +15011,7 @@
     }
   }
   var swiper = "uni-swiper {\n  display: block;\n  height: 150px;\n}\n\nuni-swiper[hidden] {\n  display: none;\n}\n\n.uni-swiper-wrapper {\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transform: translateZ(0);\n}\n\n.uni-swiper-slides {\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.uni-swiper-slide-frame {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  will-change: transform;\n}\n\n.uni-swiper-dots {\n  position: absolute;\n  font-size: 0;\n}\n\n.uni-swiper-dots-horizontal {\n  left: 50%;\n  bottom: 10px;\n  text-align: center;\n  white-space: nowrap;\n  transform: translate(-50%, 0);\n}\n\n.uni-swiper-dots-horizontal .uni-swiper-dot {\n  margin-right: 8px;\n}\n\n.uni-swiper-dots-horizontal .uni-swiper-dot:last-child {\n  margin-right: 0;\n}\n\n.uni-swiper-dots-vertical {\n  right: 10px;\n  top: 50%;\n  text-align: right;\n  transform: translate(0, -50%);\n}\n\n.uni-swiper-dots-vertical .uni-swiper-dot {\n  display: block;\n  margin-bottom: 9px;\n}\n\n.uni-swiper-dots-vertical .uni-swiper-dot:last-child {\n  margin-bottom: 0;\n}\n\n.uni-swiper-dot {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  cursor: pointer;\n  transition-property: background-color;\n  transition-timing-function: ease;\n  background: rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n}\n\n.uni-swiper-dot-active {\n  background-color: #000000;\n}\n";
-  class UniSwiper extends UniComponent {
+  class UniSwiper extends UniContainerComponent {
     constructor(id2, parentNodeId, nodeJson) {
       super(id2, "uni-swiper", Swiper, parentNodeId, nodeJson, ".uni-swiper-slide-frame");
     }

packages/uni-app-plus/src/helpers/useCover.ts

 import { computed, Ref, reactive, watch } from 'vue'
 import { CustomEventTrigger } from '@dcloudio/uni-components'
 import { Position, useNative } from './useNative'
+import { formatLog } from '@dcloudio/uni-shared'
 
 let id = 0
 
@@ -169,6 +170,9 @@ export function useCover(
       viewPosition.value,
       tags.value
     )
+    if (__DEV__) {
+      console.log(formatLog('Cover', cover.id, viewPosition.value, tags.value))
+    }
     plus.webview.currentWebview().append(cover)
     if (hidden.value) {
       cover.hide()

packages/uni-app-plus/src/view/components/cover-image/index.tsx

@@ -6,7 +6,6 @@ import {
   watch,
   onBeforeUnmount,
 } from 'vue'
-import { plusReady } from '@dcloudio/uni-shared'
 import {
   defineBuiltInComponent,
   useCustomEvent,
@@ -45,24 +44,22 @@ function useImageLoad(
       realPath.indexOf('http://') === 0 ||
       realPath.indexOf('https://') === 0
     ) {
-      plusReady(() => {
-        downloaTask = plus.downloader.createDownload(
-          realPath,
-          {
-            filename: TEMP_PATH + '/download/',
-          },
-          (task, status) => {
-            if (status === 200) {
-              getImageInfo(task.filename!)
-            } else {
-              trigger('error', {} as Event, {
-                errMsg: 'error',
-              })
-            }
+      downloaTask = plus.downloader.createDownload(
+        realPath,
+        {
+          filename: TEMP_PATH + '/download/',
+        },
+        (task, status) => {
+          if (status === 200) {
+            getImageInfo(task.filename!)
+          } else {
+            trigger('error', {} as Event, {
+              errMsg: 'error',
+            })
           }
-        )
-        downloaTask.start()
-      })
+        }
+      )
+      downloaTask.start()
     } else if (realPath) {
       getImageInfo(realPath)
     }
@@ -70,22 +67,20 @@ function useImageLoad(
 
   function getImageInfo(src: string) {
     content.src = src
-    plusReady(() => {
-      plus.io.getImageInfo({
-        src,
-        success: ({ width, height }) => {
-          if (props.autoSize) {
-            style.value = `width:${width}px;height:${height}px;`
-            window.dispatchEvent(new CustomEvent('updateview'))
-          }
-          trigger('load', {} as Event, { width, height })
-        },
-        fail: () => {
-          trigger('error', {} as Event, {
-            errMsg: 'error',
-          })
-        },
-      })
+    plus.io.getImageInfo({
+      src,
+      success: ({ width, height }) => {
+        if (props.autoSize) {
+          style.value = `width:${width}px;height:${height}px;`
+          window.dispatchEvent(new CustomEvent('updateview'))
+        }
+        trigger('load', {} as Event, { width, height })
+      },
+      fail: () => {
+        trigger('error', {} as Event, {
+          errMsg: 'error',
+        })
+      },
     })
   }
 

packages/uni-app-plus/src/view/components/cover-view/index.tsx

 import { Ref, ref, reactive } from 'vue'
+import { isString } from '@vue/shared'
 import {
   defineBuiltInComponent,
   useCustomEvent,
   EmitEvent,
   flatVNode,
-  // Text,
 } from '@dcloudio/uni-components'
 import { useCover } from '../../../helpers/useCover'
 
@@ -22,9 +22,9 @@ export default /*#__PURE__*/ defineBuiltInComponent({
       const defaultSlots = slots.default ? flatVNode(slots.default()) : []
       let text = ''
       defaultSlots.forEach((node) => {
-        // if (!node.type === Text) {
-        text += node.children || ''
-        // }
+        if (isString(node.children)) {
+          text += node.children
+        }
       })
       content.text = text
       return (

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

@@ -15,7 +15,7 @@ import { $ } from '../page'
 export class UniComponent extends UniNode {
   declare $: UniCustomElement
   protected $props!: Record<string, any>
-  protected $holder?: Element
+  $holder?: Element
   constructor(
     id: number,
     tag: string,
@@ -84,6 +84,34 @@ export class UniComponent extends UniNode {
   }
 }
 
+export class UniContainerComponent extends UniComponent {
+  constructor(
+    id: number,
+    tag: string,
+    component: Component,
+    parentNodeId: number,
+    nodeJson: Partial<UniNodeJSON>,
+    selector?: string
+  ) {
+    super(id, tag, component, parentNodeId, nodeJson, selector)
+    this.initObserver()
+  }
+  initObserver() {
+    const elem = this.$holder || this.$
+    const observer = new MutationObserver((mutations) => {
+      if (__DEV__) {
+        console.log(formatLog('Observer', mutations))
+      }
+      // TODO 刷新容器组件状态
+      // (this.$.__vueParentComponent as any).refresh()
+    })
+    observer.observe(elem, {
+      childList: true,
+      subtree: true,
+    })
+  }
+}
+
 function getVueParent(node: UniNode): ComponentInternalInstance | null {
   while (node && node.pid > 0) {
     node = $(node.pid)

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

 import '@dcloudio/uni-components/style/swiper.css'
 import { Swiper } from '@dcloudio/uni-components'
 import { UniNodeJSON } from '@dcloudio/uni-shared'
-import { UniComponent } from './UniComponent'
+import { UniContainerComponent } from './UniComponent'
 
-export class UniSwiper extends UniComponent {
+export class UniSwiper extends UniContainerComponent {
   constructor(
     id: number,
     parentNodeId: number,

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

 import { UniNodeJSON } from '@dcloudio/uni-shared'
-import { ComponentPublicInstance, defineComponent, h } from 'vue'
+import {
+  ComponentPublicInstance,
+  defineComponent,
+  h,
+  VNodeArrayChildren,
+} from 'vue'
 import { UniComment } from '../elements/UniComment'
 import { UniTextElement } from '../elements/UniTextElement'
 import { UniTextNode } from '../elements/UniTextNode'
@@ -46,7 +51,7 @@ import { UniWebView } from './UniWebView'
 
 export interface UniCustomElement extends Element {
   __id: number
-  __vm: ComponentPublicInstance
+  __vueParentComponent: ComponentPublicInstance
   __listeners: Record<string, (evt: Event) => void>
 }