[pull] main from lynx-family:main

.changeset/bright-animals-stand.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/offscreen-document": patch
+---
+
+fix: remove all children after the innerHTML setter is called

.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.

.github/workflows/test.yml

@@ -232,6 +232,7 @@ jobs:
       - code-style-check
       - playwright-linux
       - playwright-linux-all-on-ui
+      - playwright-linux-fp-only
       - test-api
       - test-publish
       - test-react

packages/web-platform/offscreen-document/src/webworker/OffscreenDocument.ts

@@ -6,7 +6,11 @@ import {
   type ElementOperation,
 } from '../types/ElementOperation.js';
 import { styleMapSymbol } from './OffscreenCSSStyleDeclaration.js';
-import { _attributes, OffscreenElement } from './OffscreenElement.js';
+import {
+  _attributes,
+  innerHTML,
+  OffscreenElement,
+} from './OffscreenElement.js';
 import {
   eventPhase,
   OffscreenEvent,
@@ -161,7 +165,7 @@ function getInnerHTMLImpl(
   }
 
   const cssText = Array.from(element.style[styleMapSymbol].entries())
-    .map(([key, value]) => `${key}: ${value};`).join(';');
+    .map(([key, value]) => `${key}: ${value};`).join('');
   if (cssText) {
     buffer.push(' style="', cssText, '"');
   }
@@ -174,13 +178,17 @@ function getInnerHTMLImpl(
       : templateImpl;
     buffer.push('<template shadowrootmode="open">', template, '</template>');
   }
-  for (const child of element.children) {
-    getInnerHTMLImpl(
-      buffer,
-      child as OffscreenElement,
-      shadowrootTemplates,
-      tagTransformMap,
-    );
+  if (element[innerHTML]) {
+    buffer.push(element[innerHTML]);
+  } else {
+    for (const child of element.children) {
+      getInnerHTMLImpl(
+        buffer,
+        child as OffscreenElement,
+        shadowrootTemplates,
+        tagTransformMap,
+      );
+    }
   }
   buffer.push('</');
   buffer.push(tagName);

packages/web-platform/offscreen-document/src/webworker/OffscreenElement.ts

@@ -12,10 +12,12 @@ import { OffscreenNode, uniqueId } from './OffscreenNode.js';
 
 export const ancestorDocument = Symbol('ancestorDocument');
 export const _attributes = Symbol('_attributes');
+export const innerHTML = Symbol('innerHTML');
 const _style = Symbol('_style');
 export class OffscreenElement extends OffscreenNode {
   private [_style]?: OffscreenCSSStyleDeclaration;
   private readonly [_attributes]: Record<string, string> = {};
+  public [innerHTML]: string = '';
 
   /**
    * @private
@@ -141,5 +143,9 @@ export class OffscreenElement extends OffscreenNode {
       text,
       uid: this[uniqueId],
     });
+    for (const child of this.children) {
+      (child as OffscreenElement).remove();
+    }
+    this[innerHTML] = text;
   }
 }

packages/web-platform/web-core-server/src/createLynxView.ts

@@ -1,5 +1,6 @@
 import {
   flushElementTreeEndpoint,
+  inShadowRootStyles,
   mainThreadStartEndpoint,
   type MainThreadStartConfigs,
 } from '@lynx-js/web-constants';
@@ -38,6 +39,7 @@ interface LynxViewConfig extends
   >;
   overrideTagTransformMap?: Record<string, string>;
   autoSize?: boolean;
+  lynxViewStyle?: string;
 }
 
 const builtinElementTemplates = {
@@ -78,6 +80,7 @@ export async function createLynxView(
     hydrateUrl,
     autoSize,
     injectStyles,
+    lynxViewStyle,
   } = config;
 
   const mainToUIChannel = new MessageChannel();
@@ -127,9 +130,9 @@ export async function createLynxView(
     return `
     <lynx-view url="${hydrateUrl}" ssr ${
       autoSize ? 'height="auto" width="auto"' : ''
-    }>
+    } ${lynxViewStyle ? `style="${lynxViewStyle}"` : ''}>
       <template shadowrootmode="open">
-        <style>${injectStyles}</style>
+        <style>${injectStyles}\n${inShadowRootStyles.join('\n')}</style>
         ${innerShadowRootHTML}
       </template>
     </lynx-view>`;

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/server.js

@@ -20,13 +20,14 @@ export async function SSR(rawTemplate, caseName, projectName = 'fp-only') {
       pixelWidth: 375,
     },
     tagMap: {},
-    initData: {},
+    initData: { mockData: 'mockData' },
     globalProps: {},
     template: rawTemplate,
     templateName: caseName,
     hydrateUrl: `/dist/${caseName}/index.web.json`,
     injectStyles: `@import url("/${projectName}.css");`,
     autoSize: true,
+    lynxViewStyle: 'width:100vw; max-width: 500px;',
   });
   const ssrHtml = await lynxView.renderToString();
   return ssrHtml;