[pull] main from lynx-family:main

.changeset/dirty-bananas-tan.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+feat: support `layoutchange` event for x-overlay-ng

.changeset/sour-streets-remain.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-explorer": patch
+---
+
+fix: blank screen issue for 0.0.4

packages/web-platform/web-elements/src/ScrollView/ScrollView.ts

@@ -3,7 +3,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { FadeEdgeLengthAttribute } from './FadeEdgeLengthAttribute.js';
 import { ScrollAttributes } from './ScrollAttributes.js';
 import { ScrollViewEvents } from './ScrollViewEvents.js';
@@ -14,7 +14,7 @@ import { scrollContainerDom } from '../common/constants.js';
 @Component<typeof ScrollView>(
   'scroll-view',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     ScrollAttributes,
     FadeEdgeLengthAttribute,
     ScrollViewEvents,

packages/web-platform/web-elements/src/XAudioTT/XAudioTT.ts

@@ -11,7 +11,7 @@ import {
 } from '@lynx-js/web-elements-reactive';
 import { XAudioAttribute } from './XAudioAttribute.js';
 import { XAudioEvents } from './XAudioEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import {
   XAudioErrorCode,
@@ -23,7 +23,7 @@ import {
 
 @Component<typeof XAudioTT>(
   'x-audio-tt',
-  [LynxExposure, XAudioAttribute, XAudioEvents],
+  [CommonEventsAndMethods, XAudioAttribute, XAudioEvents],
   html`<audio id="audio"></audio>`,
 )
 export class XAudioTT extends HTMLElement {

packages/web-platform/web-elements/src/XCanvas/XCanvas.ts

@@ -4,15 +4,15 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { CanvasAttributes } from './CanvasAttributes.js';
 
 /**
  * @deprecated this proposals cannot be implemented on other platforms
  */
 @Component<typeof XCanvas>(
   'x-canvas',
-  [LynxExposure, CanvasAttributes],
+  [CommonEventsAndMethods, CanvasAttributes],
   html`<canvas id="canvas" part="canvas"></canvas>`,
 )
 export class XCanvas extends HTMLElement {}

packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts

@@ -4,13 +4,13 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewHeaderNgFeatures } from './XFoldviewHeaderNgFeatures.js';
 
 @Component<typeof XFoldviewHeaderNg>(
   'x-foldview-header-ng',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XFoldviewHeaderNgFeatures,
   ],
 )

packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewNg.ts

@@ -4,15 +4,15 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewNgEvents } from './XFoldviewNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
 
 export const scrollableLength = Symbol('scrollableLength');
 export const isHeaderShowing = Symbol('isHeaderShowing');
 
 @Component<typeof XFoldviewNg>('x-foldview-ng', [
-  LynxExposure,
+  CommonEventsAndMethods,
   XFoldviewNgEvents,
 ])
 export class XFoldviewNg extends HTMLElement {

packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotDragNg.ts

@@ -4,9 +4,9 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XFoldviewSlotDragNg>('x-foldivew-slot-drag-ng', [
-  LynxExposure,
+  CommonEventsAndMethods,
 ])
 export class XFoldviewSlotDragNg extends HTMLElement {}

packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotNg.ts

@@ -4,13 +4,13 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewSlotNgTouchEventsHandler } from './XFoldviewSlotNgTouchEventsHandler.js';
 
 @Component<typeof XFoldviewSlotNg>(
   'x-foldview-slot-ng',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XFoldviewSlotNgTouchEventsHandler,
   ],
 )

packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts

@@ -4,9 +4,9 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XFoldviewToolbarNg>('x-foldview-toolbar-ng', [
-  LynxExposure,
+  CommonEventsAndMethods,
 ])
 export class XFoldviewToolbarNg extends HTMLElement {}

packages/web-platform/web-elements/src/XImage/FilterImage.ts

@@ -4,14 +4,14 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { DropShadow } from './DropShadow.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
 
 @Component<typeof FilterImage>(
   'filter-image',
-  [LynxExposure, ImageSrc, DropShadow, ImageEvents],
+  [CommonEventsAndMethods, ImageSrc, DropShadow, ImageEvents],
   html` <img part="img" alt="" id="img" /> `,
 )
 export class FilterImage extends HTMLElement {}

packages/web-platform/web-elements/src/XImage/XImage.ts

@@ -4,13 +4,13 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
 
 @Component<typeof XImage>(
   'x-image',
-  [LynxExposure, ImageSrc, ImageEvents],
+  [CommonEventsAndMethods, ImageSrc, ImageEvents],
   html` <img part="img" alt="" id="img" /> `,
 )
 export class XImage extends HTMLElement {}

packages/web-platform/web-elements/src/XInput/XInput.ts

@@ -9,12 +9,12 @@ import { InputBaseAttributes } from './InputBaseAttributes.js';
 import { Placeholder } from './Placeholder.js';
 import { XInputAttribute } from './XInputAttribute.js';
 import { XInputEvents } from './XInputEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XInput>(
   'x-input',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     Placeholder,
     XInputAttribute,
     InputBaseAttributes,

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

@@ -4,7 +4,7 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
-@Component<typeof ListItem>('list-item', [LynxExposure])
+@Component<typeof ListItem>('list-item', [CommonEventsAndMethods])
 export class ListItem extends HTMLElement {}

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

@@ -7,12 +7,12 @@ import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
 import { XListAttributes } from './XListAttributes.js';
 import { XListEvents } from './XListEvents.js';
 import { XListWaterfall } from './XListWaterfall.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 
 @Component<typeof XList>(
   'x-list',
-  [LynxExposure, XListAttributes, XListEvents, XListWaterfall],
+  [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall],
   html`<style>
   .placeholder-dom {
     display: none;

packages/web-platform/web-elements/src/XOverlayNg/XOverlayNg.ts

@@ -3,14 +3,17 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { LynxExposure } from '../common/Exposure.js';
+import {
+  layoutChangeTarget,
+  CommonEventsAndMethods,
+} from '../common/CommonEventsAndMethods.js';
 import { XOverlayAttributes } from './XOverlayAttributes.js';
 
 import { Component, html } from '@lynx-js/web-elements-reactive';
 
 @Component<typeof XOverlayNg>(
   'x-overlay-ng',
-  [LynxExposure, XOverlayAttributes],
+  [CommonEventsAndMethods, XOverlayAttributes],
   html`
     <style>
       #dialog[open] {
@@ -29,4 +32,8 @@ import { Component, html } from '@lynx-js/web-elements-reactive';
     </dialog>
   `,
 )
-export class XOverlayNg extends HTMLElement {}
+export class XOverlayNg extends HTMLElement {
+  get [layoutChangeTarget](): HTMLElement {
+    return this.shadowRoot!.firstElementChild as HTMLElement;
+  }
+}

packages/web-platform/web-elements/src/XRefreshView/XRefreshFooter.ts

@@ -5,12 +5,12 @@
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component(
   'x-refresh-footer',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XRefreshSubElementIntersectionObserver,
   ],
 )

packages/web-platform/web-elements/src/XRefreshView/XRefreshHeader.ts

@@ -5,12 +5,12 @@
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component(
   'x-refresh-header',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XRefreshSubElementIntersectionObserver,
   ],
 )

packages/web-platform/web-elements/src/XRefreshView/XRefreshView.ts

@@ -5,12 +5,12 @@
 */
 import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
 import { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
 
 @Component(
   'x-refresh-view',
-  [LynxExposure, XRefreshViewEventsEmitter],
+  [CommonEventsAndMethods, XRefreshViewEventsEmitter],
   html`
     <style>
       .bounce-container {

packages/web-platform/web-elements/src/XSvg/XSvg.ts

@@ -9,7 +9,7 @@ import {
   bindToStyle,
   registerAttributeHandler,
 } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 
 export class XSvgFeatures
@@ -62,5 +62,5 @@ export class XSvgFeatures
   }
 }
 
-@Component<typeof XSvg>('x-svg', [LynxExposure, XSvgFeatures])
+@Component<typeof XSvg>('x-svg', [CommonEventsAndMethods, XSvgFeatures])
 export class XSvg extends HTMLElement {}

packages/web-platform/web-elements/src/XSwiper/SwiperItem.ts

@@ -4,7 +4,7 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
-@Component<typeof SwiperItem>('x-swiper-item', [LynxExposure])
+@Component<typeof SwiperItem>('x-swiper-item', [CommonEventsAndMethods])
 export class SwiperItem extends HTMLElement {}

packages/web-platform/web-elements/src/XSwiper/XSwiper.ts

@@ -9,13 +9,13 @@ import { XSwipeEvents } from './XSwiperEvents.js';
 import { XSwiperAutoScroll } from './XSwiperAutoScroll.js';
 import { XSwiperCircular } from './XSwiperCircular.js';
 import { XSwiperIndicator } from './XSwiperIndicator.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
 
 @Component<typeof XSwiper>(
   'x-swiper',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XSwiperIndicator,
     XSwipeEvents,
     XSwiperCircular,

packages/web-platform/web-elements/src/XText/XText.ts

@@ -4,14 +4,16 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
 import { XTextTruncation } from './XTextTruncation.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
-import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import {
+  CommonEventsAndMethods,
+  layoutChangeTarget,
+} from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XText>(
   'x-text',
-  [LynxExposure, CommonEventsAndMethods, XTextTruncation],
+  [CommonEventsAndMethods, CommonEventsAndMethods, XTextTruncation],
   html`<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`,
 )
 export class XText extends HTMLElement {
@@ -36,4 +38,6 @@ export class XText extends HTMLElement {
       super.scrollIntoView(arg);
     }
   }
+
+  [layoutChangeTarget] = this;
 }

packages/web-platform/web-elements/src/XTextarea/XTextarea.ts

@@ -8,13 +8,13 @@ import { Placeholder } from './Placeholder.js';
 import { TextareaBaseAttributes } from './TextareaBaseAttributes.js';
 import { XTextareaAttributes } from './XTextareaAttributes.js';
 import { XTextareaEvents } from './XTextareaEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 // x-textarea
 @Component(
   'x-textarea',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     Placeholder,
     TextareaBaseAttributes,
     XTextareaAttributes,

packages/web-platform/web-elements/src/XView/XBlurView.ts

@@ -4,12 +4,12 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { BlurRadius } from './BlurRadius.js';
 
 @Component<typeof XBlurView>(
   'x-blur-view',
-  [LynxExposure, BlurRadius],
+  [CommonEventsAndMethods, BlurRadius],
   `<style id="dynamic-style"></style><slot></slot>`,
 )
 export class XBlurView extends HTMLElement {}