fix(web): correct node update ordering in web renderer

driver/js/packages/hippy-web-renderer/src/component/hippy-web-view.ts

@@ -39,7 +39,6 @@ export class HippyWebView<T extends HTMLElement> implements HippyBaseView {
   public tagName!: InnerNodeTag;
   public id!: number;
   public pId!: number;
-  public index!: number;
   public dom!: T|null;
   public props: any = {};
   public firstUpdateStyle = true;
@@ -65,6 +64,22 @@ export class HippyWebView<T extends HTMLElement> implements HippyBaseView {
     this.handleOnLongClick = this.handleOnLongClick.bind(this);
   }
 
+  public get index() {
+    let index = -1; // -1 means not mounted
+    if (this.dom) {
+      index = Array.from(this.dom.parentElement?.children || []).indexOf(this.dom);
+    }
+    return index;
+  }
+  public set index(value: number) {
+    if (this.dom && value !== this.index) {
+      const parent = this.dom.parentElement;
+      if (parent) {
+        parent.insertBefore(this.dom, parent.children[value]);
+      }
+    }
+  }
+
   public updateProperty(key: string, value: any) {
     if (typeof this[key] === 'function' || key === 'style') {
       this.props[key] = value;
@@ -246,7 +261,7 @@ export class HippyWebView<T extends HTMLElement> implements HippyBaseView {
   }
 
   public async beforeMount(parent: HippyBaseView, position: number) {
-    this.index = position;
+
   }
 
   public async beforeChildMount(child: HippyBaseView, childPosition: number) {

driver/js/packages/hippy-web-renderer/src/component/scroll-view.ts

@@ -184,6 +184,7 @@ export class ScrollView extends HippyWebView<HTMLDivElement> {
   }
 
   public async beforeChildMount(child: HippyBaseView, childPosition: number) {
+    await super.beforeChildMount(child, childPosition);
     if (childPosition === 0 && this.contentContainerStyle) {
       setElementStyle(child.dom!, this.contentContainerStyle);
     }

driver/js/packages/hippy-web-renderer/src/module/ui-manager-module.ts

@@ -45,8 +45,8 @@ export class UIManagerModule extends HippyWebModule {
     this.createNodePreCheck(rootViewId);
     const updateViewIdSet = new Set();
     for (let c = 0; c < data.length; c++) {
-      const [nodeItemData] = data[c];
-      const { id, pId, index, props, name: tagName } = nodeItemData;
+      const [nodeItemData, { refId, relativeToRef }] = data[c];
+      const { id, pId, props, name: tagName } = nodeItemData;
       if (!tagName) {
         warn(`create component failed, tagName is ${tagName}`);
         continue;
@@ -56,6 +56,13 @@ export class UIManagerModule extends HippyWebModule {
         warn(`create component failed, not support the component ${tagName}`);
         continue;
       }
+      let index;
+      if (refId) {
+        const anchor = this.findViewById(refId);
+        if (anchor && anchor.pId === pId) {
+          index = relativeToRef === (-1 as HippyTypes.RelativeToRef.BEFORE) ? anchor.index : anchor.index + 1;
+        }
+      }
       try {
         await this.viewInit(view, props, index!);
       } catch (e) {
@@ -296,8 +303,9 @@ export class UIManagerModule extends HippyWebModule {
       return;
     }
     let realIndex = index;
-    if (!parent.insertChild && parent.dom?.childNodes?.length !== undefined && index > parent.dom?.childNodes?.length) {
-      realIndex = parent.dom?.childNodes?.length ?? index;
+    if (!parent.insertChild) {
+      const childrenLen = parent.dom?.childNodes?.length ?? 0;
+      realIndex = childrenLen > index ? index : childrenLen;
     }
     await view.beforeMount?.(parent, realIndex);
     await parent.beforeChildMount?.(view, realIndex);

driver/js/scripts/build.js

@@ -32,7 +32,7 @@ let builds = [...reactBuilds, ...reactWebBuilds, ...vueBuilds, ...vueNextBuilds,
 // filter builds via command line arg
 if (process.argv[2]) {
   const filters = process.argv[2].split(',');
-  builds = builds.filter(b => filters.some(f => b.output.file.indexOf(f) > -1 || b.output.name.indexOf(f) > -1));
+  builds = builds.filter(b => filters.some(f => b.output.file?.indexOf(f) > -1 || b.output.name?.indexOf(f) > -1));
 }
 
 function blue(str) {