fix(web): x-list should observe property list-type change.

.changeset/shiny-eyes-follow.md

@@ -0,0 +1,9 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+fix: x-list should observe property list-type change.
+
+Before this commit, list-type only works when it was first assigned.
+
+use `requestAnimationFrame` instead of `queueMicrotask` to layoutListItem, this is because it may cause crashes in webkit.

packages/web-platform/web-elements/src/XList/XListAttributes.ts

@@ -11,8 +11,6 @@ import {
 } from '@lynx-js/web-elements-reactive';
 import type { XList } from './XList.js';
 
-const WATERFALL_SLOT = 'waterfall-slot';
-
 export class XListAttributes
   implements InstanceType<AttributeReactiveClass<typeof HTMLElement>>
 {

packages/web-platform/web-elements/src/XList/XListWaterfall.ts

@@ -4,8 +4,8 @@
 // LICENSE file in the root directory of this source tree.
 */
 import {
-  boostedQueueMicrotask,
   genDomGetter,
+  registerAttributeHandler,
   type AttributeReactiveClass,
 } from '@lynx-js/web-elements-reactive';
 import type { XList } from './XList.js';
@@ -16,7 +16,7 @@ const WATERFALL_STYLE = 'waterfall-style';
 export class XListWaterfall
   implements InstanceType<AttributeReactiveClass<typeof HTMLElement>>
 {
-  static observedAttributes = [];
+  static observedAttributes = ['list-type'];
 
   #dom: XList;
   #getListContainer = genDomGetter(() => this.#dom.shadowRoot!, '#content');
@@ -182,7 +182,7 @@ export class XListWaterfall
     this.#resizeObserver = new ResizeObserver(() => {
       // may cause: Resizeobserver loop completed with undelivered notifications
       // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
-      boostedQueueMicrotask(() => {
+      requestAnimationFrame(() => {
         this.#layoutListItem(
           spanCount,
           isScrollVertical,
@@ -194,8 +194,9 @@ export class XListWaterfall
     });
   };
 
-  connectedCallback() {
-    if (this.#dom.getAttribute('list-type') === 'waterfall') {
+  @registerAttributeHandler('list-type', true)
+  #handlerListType(newVal: string | null) {
+    if (newVal === 'waterfall') {
       const spanCount = parseFloat(
         this.#dom.getAttribute('span-count')
           || this.#dom.getAttribute('column-count')
@@ -227,6 +228,17 @@ export class XListWaterfall
           childList: true,
         });
       }
+    } else {
+      this.#resizeObserver?.disconnect();
+      this.#resizeObserver = undefined;
+      this.#childrenObserver?.disconnect();
+      this.#childrenObserver = undefined;
+      for (let i = 0; i < this.#dom.children.length; i++) {
+        const listItem = this.#dom.children[i] as HTMLElement;
+        listItem.removeAttribute('slot');
+      }
+      this.#dom.shadowRoot?.querySelector(`slot[name=${WATERFALL_SLOT}]`)
+        ?.remove();
     }
   }
 }

packages/web-platform/web-elements/src/XList/x-list.css

@@ -59,6 +59,7 @@ list-item {
   display: none;
   content-visibility: auto;
   flex: 0 0 auto !important;
+  position: static;
 }
 
 x-list > list-item, x-list > lynx-wrapper > list-item {

packages/web-platform/web-tests/tests/web-elements.spec.ts

@@ -20,7 +20,7 @@
     ReturnType<typeof expect<Page>>['toHaveScreenshot']
   >[0],
 ) => {
   await expect(page).toHaveScreenshot([`${caseName}`, `${subcaseName}.png`], {
     maxDiffPixelRatio: 0,
     fullPage: true,
     animations: 'allow',
@@ -2351,6 +2351,34 @@
       await gotoWebComponentPage(page, title);
       await diffScreenShot(page, title, 'index');
     });
+    test('list-type-change', async ({ page }) => {
+      await gotoWebComponentPage(page, 'x-list/basic-waterfall');
+      await diffScreenShot(page, 'x-list/list-type-change', 'index');
+      await page.evaluate(() => {
+        document.querySelector('x-list')?.setAttribute(
+          'list-type',
+          'single',
+        );
+      });
+      await wait(100);
+      await diffScreenShot(page, 'x-list/list-type-change', 'single');
+      await page.evaluate(() => {
+        document.querySelector('x-list')?.setAttribute(
+          'list-type',
+          'flow',
+        );
+      });
+      await wait(100);
+      await diffScreenShot(page, 'x-list/list-type-change', 'flow');
+      await page.evaluate(() => {
+        document.querySelector('x-list')?.setAttribute(
+          'list-type',
+          'waterfall',
+        );
+      });
+      await wait(100);
+      await diffScreenShot(page, 'x-list/list-type-change', 'waterfall');
+    });
   });
   test.describe('x-input', () => {
     test('placeholder', async ({ page }, { titlePath }) => {
@@ -4093,7 +4121,7 @@
       await page.locator('#play').click();
       await wait(100);
       // expect(loading).toBe(true);
       expect(success).toBe(true);
     });
 
     test('event-playbackstatechanged', async ({ page }, { titlePath }) => {