refactor: change code structure for improved readability and maintainibility

.changeset/heavy-birds-beg.md

@@ -0,0 +1,11 @@
+---
+"@lynx-js/web-elements-compat": patch
+"@lynx-js/web-elements": patch
+---
+
+refactor: change code structure for improved readability and maintainability
+
+- enable noUnusedLocals for web-elements
+- add source field for supporting @rsbuild/plugin-source-build
+
+This is a part of #1937

packages/web-platform/web-elements-compat/package.json

@@ -14,6 +14,10 @@
     "./LinearContainer": {
       "types": "./src/LinearContainer/LinearContainer.ts",
       "default": "./src/LinearContainer/LinearContainer.ts"
+    },
+    "./LinearContainer/*": {
+      "types": "./src/LinearContainer/*",
+      "default": "./src/LinearContainer/*"
     }
   },
   "main": "dist/index.js",

packages/web-platform/web-elements-compat/src/LinearContainer/LinearContainer.ts

@@ -5,7 +5,7 @@ import './linear-compat.css';
 import {
   type AttributeReactiveClass,
   bindToAttribute,
-  WebComponentClass,
+  type WebComponentClass,
 } from '@lynx-js/web-elements';
 
 /** For @container

packages/web-platform/web-elements-reactive/package.json

@@ -10,6 +10,13 @@
   "license": "Apache-2.0",
   "sideEffects": false,
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js",
+      "source": "./src/index.ts"
+    }
+  },
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [

packages/web-platform/web-elements/elements.css

@@ -0,0 +1,18 @@
+/* Copyright 2024 The Lynx Authors. All rights reserved.
+ 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 url("./src/LynxWrapper/lynx-wrapper.css");
+@import url("./src/XText/x-text.css");
+@import url("./src/ScrollView/scroll-view.css");
+@import url("./src/XFoldViewNg/x-foldview-ng.css");
+@import url("./src/XViewpagerNg/x-viewpager-ng.css");
+@import url("./src/XCanvas/x-canvas.css");
+@import url("./src/XSvg/x-svg.css");
+@import url("./src/XImage/x-image.css");
+@import url("./src/XInput/x-input.css");
+@import url("./src/XOverlayNg/x-overlay-ng.css");
+@import url("./src/XRefreshView/x-refresh-view.css");
+@import url("./src/XSwiper/x-swiper.css");
+@import url("./src/XTextarea/x-textarea.css");
+@import url("./src/XList/x-list.css");

packages/web-platform/web-elements/index.css

@@ -3,17 +3,4 @@
  LICENSE file in the root directory of this source tree. 
  */
 @import url("./src/common-css/linear.css");
-@import url("./src/LynxWrapper/lynx-wrapper.css");
-@import url("./src/XText/x-text.css");
-@import url("./src/ScrollView/scroll-view.css");
-@import url("./src/XFoldViewNg/x-foldview-ng.css");
-@import url("./src/XViewpagerNg/x-viewpager-ng.css");
-@import url("./src/XCanvas/x-canvas.css");
-@import url("./src/XSvg/x-svg.css");
-@import url("./src/XImage/x-image.css");
-@import url("./src/XInput/x-input.css");
-@import url("./src/XOverlayNg/x-overlay-ng.css");
-@import url("./src/XRefreshView/x-refresh-view.css");
-@import url("./src/XSwiper/x-swiper.css");
-@import url("./src/XTextarea/x-textarea.css");
-@import url("./src/XList/x-list.css");
+@import url("./elements.css");

packages/web-platform/web-elements/package.json

@@ -18,71 +18,90 @@
     "./index.css": {
       "default": "./index.css"
     },
+    "./elements.css": {
+      "default": "./elements.css"
+    },
     "./all": {
       "types": "./dist/all.d.ts",
       "default": "./dist/all.js"
     },
     "./LynxWrapper": {
+      "source": "./src/LynxWrapper/index.ts",
       "types": "./dist/LynxWrapper/index.d.ts",
       "default": "./dist/LynxWrapper/index.js"
     },
     "./ScrollView": {
+      "source": "./src/ScrollView/index.ts",
       "types": "./dist/ScrollView/index.d.ts",
       "default": "./dist/ScrollView/index.js"
     },
     "./XAudioTT": {
+      "source": "./src/XAudioTT/index.ts",
       "types": "./dist/XAudioTT/index.d.ts",
       "default": "./dist/XAudioTT/index.js"
     },
     "./XCanvas": {
+      "source": "./src/XCanvas/index.ts",
       "types": "./dist/XCanvas/index.d.ts",
       "default": "./dist/XCanvas/index.js"
     },
     "./XFoldViewNg": {
+      "source": "./src/XFoldViewNg/index.ts",
       "types": "./dist/XFoldViewNg/index.d.ts",
       "default": "./dist/XFoldViewNg/index.js"
     },
     "./XImage": {
+      "source": "./src/XImage/index.ts",
       "types": "./dist/XImage/index.d.ts",
       "default": "./dist/XImage/index.js"
     },
     "./XInput": {
+      "source": "./src/XInput/index.ts",
       "types": "./dist/XInput/index.d.ts",
       "default": "./dist/XInput/index.js"
     },
     "./XOverlayNg": {
+      "source": "./src/XOverlayNg/index.ts",
       "types": "./dist/XOverlayNg/index.d.ts",
       "default": "./dist/XOverlayNg/index.js"
     },
     "./XRefreshView": {
+      "source": "./src/XRefreshView/index.ts",
       "types": "./dist/XRefreshView/index.d.ts",
       "default": "./dist/XRefreshView/index.js"
     },
     "./XSvg": {
+      "source": "./src/XSvg/index.ts",
       "types": "./dist/XSvg/index.d.ts",
       "default": "./dist/XSvg/index.js"
     },
     "./XSwiper": {
+      "source": "./src/XSwiper/index.ts",
       "types": "./dist/XSwiper/index.d.ts",
       "default": "./dist/XSwiper/index.js"
     },
     "./XText": {
+      "source": "./src/XText/index.ts",
       "types": "./dist/XText/index.d.ts",
       "default": "./dist/XText/index.js"
     },
     "./XTextarea": {
+      "source": "./src/XTextarea/index.ts",
       "types": "./dist/XTextarea/index.d.ts",
       "default": "./dist/XTextarea/index.js"
     },
     "./XView": {
+      "source": "./src/XView/index.ts",
       "types": "./dist/XView/index.d.ts",
       "default": "./dist/XView/index.js"
     },
     "./XViewpagerNg": {
+      "source": "./src/XViewpagerNg/index.ts",
       "types": "./dist/XViewpagerNg/index.d.ts",
       "default": "./dist/XViewpagerNg/index.js"
     },
     "./XList": {
+      "source": "./src/XList/index.ts",
       "types": "./dist/XList/index.d.ts",
       "default": "./dist/XList/index.js"
     }

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

@@ -3,13 +3,15 @@
 // 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 {
   type AttributeReactiveClass,
   bindToStyle,
   genDomGetter,
   registerAttributeHandler,
   registerStyleChangeHandler,
 } from '@lynx-js/web-elements-reactive';
+
 import type { ScrollView } from './ScrollView.js';
 
 export class FadeEdgeLengthAttribute
@@ -26,15 +28,15 @@ export class FadeEdgeLengthAttribute
   }
 
   @registerAttributeHandler('fading-edge-length', true)
-  #handleFadingEdgeLength = bindToStyle(
+  _handleFadingEdgeLength = bindToStyle(
     () => this.#dom,
     '--scroll-view-fading-edge-length',
     (v) => `${parseFloat(v)}px`,
   );
 
   @registerStyleChangeHandler('background')
   @registerStyleChangeHandler('background-color')
-  #backgroundColorToVariable(backGroundColor: string | null) {
+  _backgroundColorToVariable(backGroundColor: string | null) {
     this.#getTopFadeMask().style.setProperty(
       '--scroll-view-bg-color',
       backGroundColor,

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

@@ -28,7 +28,7 @@ export class ScrollAttributes
   @registerAttributeHandler('scroll-top', false)
   @registerAttributeHandler('scroll-left', false)
   @registerAttributeHandler('initial-scroll-offset', false)
-  #handleInitialScrollOffset(
+  _handleInitialScrollOffset(
     newVal: string | null,
     _: string | null,
     attributeName: string,
@@ -63,7 +63,7 @@ export class ScrollAttributes
 
   @registerAttributeHandler('scroll-to-index', false)
   @registerAttributeHandler('initial-scroll-to-index', false)
-  #handleInitialScrollIndex(newVal: string | null) {
+  _handleInitialScrollIndex(newVal: string | null) {
     if (newVal) {
       const scrollValue = parseFloat(newVal);
       const childrenElement = this.#dom.children.item(scrollValue);

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

@@ -66,7 +66,7 @@ export class ScrollViewEvents
   ];
 
   @registerEventEnableStatusChangeHandler('scrolltoupper')
-  #handleScrollUpperThresholdEventEnabled = (enabled: boolean) => {
+  _handleScrollUpperThresholdEventEnabled = (enabled: boolean) => {
     enabled
       ? this.#dom.setAttribute('x-enable-scrolltoupper-event', '')
       : this.#dom.removeAttribute('x-enable-scrolltoupper-event'); // css needs this;
@@ -80,7 +80,7 @@ export class ScrollViewEvents
   );
 
   @registerEventEnableStatusChangeHandler('scrolltolower')
-  #handleScrollLowerThresholdEventEnabled = (enabled: boolean) => {
+  _handleScrollLowerThresholdEventEnabled = (enabled: boolean) => {
     enabled
       ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
       : this.#dom.removeAttribute('x-enable-scrolltolower-event'); // css needs this;
@@ -94,14 +94,14 @@ export class ScrollViewEvents
   );
 
   @registerAttributeHandler('upper-threshold', true)
-  #updateUpperThreshold = bindToStyle(
+  _updateUpperThreshold = bindToStyle(
     this.#getUpperThresholdObserverDom,
     'flex-basis',
     (v) => `${parseInt(v)}px`,
   );
 
   @registerAttributeHandler('lower-threshold', true)
-  #updateLowerThreshold = bindToStyle(
+  _updateLowerThreshold = bindToStyle(
     this.#getLowerThresholdObserverDom,
     'flex-basis',
     (v) => `${parseInt(v)}px`,
@@ -157,14 +157,14 @@ export class ScrollViewEvents
 
   #scrollEventEnabled = false;
   @registerEventEnableStatusChangeHandler('lynxscroll')
-  #handleScrollEventEnabled = (enabled: boolean) => {
+  _handleScrollEventEnabled = (enabled: boolean) => {
     this.#scrollEventEnabled = enabled;
     this.#handleScrollEventsSwitches();
   };
 
   #scrollEndEventEnabled = false;
   @registerEventEnableStatusChangeHandler('lynxscrollend')
-  #handleScrollEndEventEnabled = (enabled: boolean) => {
+  _handleScrollEndEventEnabled = (enabled: boolean) => {
     this.#scrollEndEventEnabled = enabled;
     this.#handleScrollEventsSwitches();
   };

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

@@ -27,10 +27,8 @@ export class XAudioAttribute
 
   #getAudioElement = genDomGetter(() => this.#dom.shadowRoot!, '#audio');
 
-  #setAudioSrc = bindToAttribute(this.#getAudioElement, 'src');
-
   @registerAttributeHandler('src', true)
-  #handleSrc(newValue: string | null) {
+  _handleSrc(newValue: string | null) {
     let parsedSrc;
     try {
       parsedSrc = JSON.parse(newValue || '') || {};
@@ -73,7 +71,7 @@ export class XAudioAttribute
   }
 
   @registerAttributeHandler('loop', true)
-  #handleLoop = bindToAttribute(this.#getAudioElement, 'loop');
+  _handleLoop = bindToAttribute(this.#getAudioElement, 'loop');
 
   #documentVisibilitychange = () => {
     if (document.visibilityState === 'hidden') {
@@ -82,7 +80,7 @@ export class XAudioAttribute
   };
 
   @registerAttributeHandler('pause-on-hide', true)
-  #handlePauseOnHide(newValue: string | null) {
+  _handlePauseOnHide(newValue: string | null) {
     if (newValue !== null) {
       document.addEventListener(
         'visibilitychange',

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

@@ -23,13 +23,13 @@ export class XFoldviewNgEvents
   static observedAttributes = ['granularity'];
 
   @registerAttributeHandler('granularity', true)
-  #handleGranularity(newVal: string | null) {
+  _handleGranularity(newVal: string | null) {
     if (newVal && newVal !== '') this.#granularity = parseFloat(newVal);
     else this.#granularity = 0.01;
   }
 
   @registerEventEnableStatusChangeHandler('offset')
-  #enableOffsetEvent(enable: boolean) {
+  _enableOffsetEvent(enable: boolean) {
     if (enable) {
       this.#dom.addEventListener('scroll', this.#handleScroll, {
         passive: true,

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

@@ -6,7 +6,6 @@
 import type { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 import { isHeaderShowing, type XFoldviewNg } from './XFoldviewNg.js';
 import type { XFoldviewSlotNg } from './XFoldviewSlotNg.js';
-import { isChromium } from '../common/constants.js';
 export class XFoldviewSlotNgTouchEventsHandler
   implements InstanceType<AttributeReactiveClass<typeof XFoldviewSlotNg>>
 {

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

@@ -19,7 +19,7 @@ export class DropShadow
   #getImg = genDomGetter<HTMLImageElement>(() => this.#dom.shadowRoot!, '#img');
 
   @registerAttributeHandler('drop-shadow', true)
-  #handleBlurRadius = bindToStyle(
+  _handleBlurRadius = bindToStyle(
     this.#getImg,
     '--drop-shadow',
     undefined,

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

@@ -19,7 +19,7 @@ export class ImageEvents
   #getImg = genDomGetter<HTMLImageElement>(() => this.#dom.shadowRoot!, '#img');
 
   @registerEventEnableStatusChangeHandler('load')
-  #enableLoadEvent(status: boolean) {
+  _enableLoadEvent(status: boolean) {
     if (status) {
       this.#getImg().addEventListener('load', this.#teleportLoadEvent, {
         passive: true,
@@ -30,7 +30,7 @@ export class ImageEvents
   }
 
   @registerEventEnableStatusChangeHandler('error')
-  #enableErrorEvent(status: boolean) {
+  _enableErrorEvent(status: boolean) {
     if (status) {
       this.#getImg().addEventListener('error', this.#teleportErrorEvent, {
         passive: true,