@lynx-js/web-core 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @lynx-js/web-core
 
+## 0.9.1
+
+### Patch Changes
+
+- feat: remove extra div #lynx-view-root ([#311](https://github.com/lynx-family/lynx-stack/pull/311))
+
+  In this commit we've re-implemented the lynx-view's auto-size. Now we use the `contain:content` instead of `resizeObserver`.
+
+- Updated dependencies []:
+  - @lynx-js/web-constants@0.9.1
+  - @lynx-js/web-worker-rpc@0.9.1
+  - @lynx-js/web-worker-runtime@0.9.1
+
 ## 0.9.0
 
 ### Minor Changes

package/dist/apis/LynxView.d.ts

@@ -96,18 +96,6 @@ export declare class LynxView extends HTMLElement {
      */
     get onNapiModulesCall(): NapiModulesCall | undefined;
     set onNapiModulesCall(handler: NapiModulesCall);
-    /**
-     * @public
-     * "auto" for auto calculated height
-     */
-    get height(): string | null;
-    /**
-     * @public
-     * "auto" for auto calculated width
-     */
-    get width(): string | null;
-    set height(val: string | null);
-    set width(val: string | null);
     /**
      * @public
      * @method
@@ -145,5 +133,4 @@ export declare class LynxView extends HTMLElement {
      * @private
      */
     connectedCallback(): void;
-    private cleanupResizeObserver;
 }

package/dist/apis/LynxView.js

@@ -2,7 +2,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 { createLynxView, } from './createLynxView.js';
-import { lynxViewRootDomId, } from '@lynx-js/web-constants';
+import {} from '@lynx-js/web-constants';
 import { inShadowRootStyles } from './inShadowRootStyles.js';
 /**
  * Based on our experiences, these elements are almost used in all lynx cards.
@@ -169,81 +169,13 @@ export class LynxView extends HTMLElement {
     set onNapiModulesCall(handler) {
         this.#onNapiModulesCall = handler;
     }
-    #autoHeight = false;
-    #autoWidth = false;
-    #currentWidth = 0;
-    #currentHeight = 0;
-    /**
-     * @public
-     * "auto" for auto calculated height
-     */
-    get height() {
-        return this.#autoHeight ? 'auto' : null;
-    }
-    /**
-     * @public
-     * "auto" for auto calculated width
-     */
-    get width() {
-        return this.#autoWidth ? 'auto' : null;
-    }
-    set height(val) {
-        this.#handleAutoSize();
-        this.#autoHeight = val === 'auto' ? true : false;
-    }
-    set width(val) {
-        this.#handleAutoSize();
-        this.#autoWidth = val === 'auto' ? true : false;
-    }
-    #handleAutoSize() {
-        if (this.#autoHeight || this.#autoWidth) {
-            if (this.#instance && !this.#instance.resizeObserver) {
-                this.#instance.resizeObserver = new ResizeObserver((sizes) => {
-                    const size = sizes[0];
-                    if (size) {
-                        const { width, height } = size.contentRect;
-                        if (this.#autoWidth) {
-                            if (this.#currentWidth !== width) {
-                                this.#currentWidth = width;
-                                this.style.setProperty('--lynx-view-width', `${width}px`);
-                            }
-                        }
-                        if (this.#autoHeight) {
-                            if (this.#currentHeight !== height) {
-                                this.#currentHeight = height;
-                                this.style.setProperty('--lynx-view-height', `${height}px`);
-                            }
-                        }
-                    }
-                });
-                this.#instance.resizeObserver.observe(this.#instance.rootDom);
-            }
-        }
-        else {
-            if (this.#instance?.resizeObserver) {
-                this.#instance.resizeObserver.disconnect();
-            }
-        }
-        if (this.#autoHeight) {
-            this.setAttribute('height', 'auto');
-        }
-        else {
-            this.removeAttribute('height');
-        }
-        if (this.#autoWidth) {
-            this.setAttribute('width', 'auto');
-        }
-        else {
-            this.removeAttribute('width');
-        }
-    }
     /**
      * @public
      * @method
      * update the `__initData` and trigger essential flow
      */
     updateData(data, updateDataType, callback) {
-        this.#instance?.lynxView.updateData(data, updateDataType, callback);
+        this.#instance?.updateData(data, updateDataType, callback);
     }
     /**
      * @public
@@ -251,7 +183,7 @@ export class LynxView extends HTMLElement {
      * send global events, which can be listened to using the GlobalEventEmitter
      */
     sendGlobalEvent(eventName, params) {
-        this.#instance?.lynxView.sendGlobalEvent(eventName, params);
+        this.#instance?.sendGlobalEvent(eventName, params);
     }
     /**
      * @public
@@ -291,11 +223,7 @@ export class LynxView extends HTMLElement {
      * @private
      */
     disconnectedCallback() {
-        this.cleanupResizeObserver();
-        if (this.#instance) {
-            this.#instance.lynxView.dispose();
-            this.#instance.rootDom.remove();
-        }
+        this.#instance?.dispose();
         this.#instance = undefined;
         if (this.shadowRoot) {
             this.shadowRoot.innerHTML = '';
@@ -317,9 +245,6 @@ export class LynxView extends HTMLElement {
                     this.disconnectedCallback();
                 }
                 if (this.#url) {
-                    const rootDom = document.createElement('div');
-                    rootDom.id = lynxViewRootDomId;
-                    rootDom.setAttribute('part', lynxViewRootDomId);
                     const tagMap = {
                         'page': 'div',
                         'view': 'x-view',
@@ -329,9 +254,12 @@ export class LynxView extends HTMLElement {
                         'svg': 'x-svg',
                         ...this.overrideLynxTagToHTMLTagMap,
                     };
+                    if (!this.shadowRoot) {
+                        this.attachShadow({ mode: 'open' });
+                    }
                     const lynxView = createLynxView({
                         tagMap,
-                        rootDom,
+                        shadowRoot: this.shadowRoot,
                         templateUrl: this.#url,
                         globalProps: this.#globalProps,
                         initData: this.#initData,
@@ -357,14 +285,7 @@ export class LynxView extends HTMLElement {
                             },
                         },
                     });
-                    this.#instance = {
-                        lynxView,
-                        rootDom,
-                    };
-                    this.#handleAutoSize();
-                    if (!this.shadowRoot) {
-                        this.attachShadow({ mode: 'open' });
-                    }
+                    this.#instance = lynxView;
                     const styleElement = document.createElement('style');
                     this.shadowRoot.append(styleElement);
                     const styleSheet = styleElement.sheet;
@@ -376,7 +297,6 @@ export class LynxView extends HTMLElement {
                             styleSheet.insertRule(`@import url("${href}");`);
                         });
                     }
-                    this.shadowRoot.append(rootDom);
                 }
             });
         }
@@ -387,12 +307,6 @@ export class LynxView extends HTMLElement {
     connectedCallback() {
         this.#render();
     }
-    cleanupResizeObserver() {
-        if (this.#instance?.resizeObserver) {
-            this.#instance.resizeObserver.disconnect();
-            this.#instance.resizeObserver = undefined;
-        }
-    }
 }
 if (customElements.get(LynxView.tag)) {
     console.warn(`[${LynxView.tag}] has already been defined`);

package/dist/apis/createLynxView.d.ts

@@ -5,7 +5,7 @@ export interface LynxViewConfigs {
     templateUrl: string;
     initData: Cloneable;
     globalProps: Cloneable;
-    rootDom: HTMLElement;
+    shadowRoot: ShadowRoot;
     callbacks: Parameters<typeof startUIThread>[3];
     nativeModulesMap: NativeModulesMap;
     napiModulesMap: NapiModulesMap;

package/dist/apis/createLynxView.js

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 import { startUIThread } from '../uiThread/startUIThread.js';
 export function createLynxView(configs) {
-    const { rootDom, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, } = configs;
+    const { shadowRoot, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, } = configs;
     return startUIThread(templateUrl, {
         tagMap,
         initData,
@@ -11,6 +11,6 @@ export function createLynxView(configs) {
         nativeModulesMap,
         napiModulesMap,
         browserConfig: {},
-    }, rootDom, callbacks);
+    }, shadowRoot, callbacks);
 }
 //# sourceMappingURL=createLynxView.js.map

package/dist/uiThread/crossThreadHandlers/bootTimingSystem.d.ts

@@ -1,5 +1,5 @@
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function bootTimingSystem(mainThreadRpc: Rpc, backgroundThreadRpc: Rpc, rootDom: HTMLElement): {
+export declare function bootTimingSystem(mainThreadRpc: Rpc, backgroundThreadRpc: Rpc, shadowRoot: ShadowRoot): {
     markTimingInternal: (timingKey: string, pipelineId?: string, timeStamp?: number) => void;
     sendTimingResult: (pipelineId: string | undefined, timingFlags: string[], isFp: boolean) => void;
 };

package/dist/uiThread/crossThreadHandlers/bootTimingSystem.js

@@ -2,7 +2,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 { postTimingInfoFromBackgroundThread, postTimingInfoFromMainThread, postTimingResult, } from '@lynx-js/web-constants';
-export function bootTimingSystem(mainThreadRpc, backgroundThreadRpc, rootDom) {
+export function bootTimingSystem(mainThreadRpc, backgroundThreadRpc, shadowRoot) {
     const setupTiming = {};
     const pipelineIdToTiming = new Map();
     let commonTimingFlags = [];
@@ -31,7 +31,7 @@ export function bootTimingSystem(mainThreadRpc, backgroundThreadRpc, rootDom) {
             timingFlags,
             isFp ? setupTiming : undefined,
         ]);
-        rootDom.dispatchEvent(new CustomEvent('timing', {
+        shadowRoot.dispatchEvent(new CustomEvent('timing', {
             detail: isFp ? setupTiming : timingInfo,
             bubbles: true,
             cancelable: true,

package/dist/uiThread/crossThreadHandlers/createExposureService.d.ts

@@ -1,2 +1,2 @@
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function createExposureService(rpc: Rpc, rootDom: Element): void;
+export declare function createExposureService(rpc: Rpc, shadowRoot: ShadowRoot): void;

package/dist/uiThread/crossThreadHandlers/createExposureService.js

@@ -1,6 +1,6 @@
 import { lynxUniqueIdAttribute, postExposureEndpoint, switchExposureService, } from '@lynx-js/web-constants';
 import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
-export function createExposureService(rpc, rootDom) {
+export function createExposureService(rpc, shadowRoot) {
     let working = true;
     let exposureCache = [];
     let disexposureCache = [];
@@ -30,8 +30,10 @@ export function createExposureService(rpc, rootDom) {
                 }]);
         }
     }, 1000 / 20);
-    rootDom.addEventListener('exposure', exposureEventHandler, { passive: true });
-    rootDom.addEventListener('disexposure', exposureEventHandler, {
+    shadowRoot.addEventListener('exposure', exposureEventHandler, {
+        passive: true,
+    });
+    shadowRoot.addEventListener('disexposure', exposureEventHandler, {
         passive: true,
     });
     rpc.registerHandler(switchExposureService, async (enable, sendEvent) => {

package/dist/uiThread/crossThreadHandlers/queryNodes.d.ts

@@ -1,2 +1,2 @@
 import { ErrorCode, IdentifierType } from '@lynx-js/web-constants';
-export declare function queryNodes(rootDom: Element, type: IdentifierType, identifier: string, component_id: string, first_only: boolean, root_unique_id: number | undefined, callback: (dom: Element) => void, error?: (code: ErrorCode) => void): void;
+export declare function queryNodes(shadowRoot: ShadowRoot, type: IdentifierType, identifier: string, component_id: string, first_only: boolean, root_unique_id: number | undefined, callback: (dom: Element) => void, error?: (code: ErrorCode) => void): void;

package/dist/uiThread/crossThreadHandlers/queryNodes.js

@@ -2,10 +2,10 @@
 // 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 { componentIdAttribute, ErrorCode, IdentifierType, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
-export function queryNodes(rootDom, type, identifier, component_id, first_only, root_unique_id, callback, error) {
-    let queryRoot = rootDom;
+export function queryNodes(shadowRoot, type, identifier, component_id, first_only, root_unique_id, callback, error) {
+    let queryRoot = shadowRoot;
     if (root_unique_id) {
-        const root = rootDom.querySelector(`[${lynxUniqueIdAttribute}="${root_unique_id}"]`);
+        const root = shadowRoot.querySelector(`[${lynxUniqueIdAttribute}="${root_unique_id}"]`);
         if (root) {
             queryRoot = root;
         }
@@ -16,7 +16,7 @@ export function queryNodes(rootDom, type, identifier, component_id, first_only,
         }
     }
     else if (component_id) {
-        const root = rootDom.querySelector(`[${componentIdAttribute}="${component_id}"]`);
+        const root = shadowRoot.querySelector(`[${componentIdAttribute}="${component_id}"]`);
         if (root) {
             queryRoot = root;
         }

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.d.ts

@@ -4,7 +4,7 @@ import type { RuntimePropertyOnElement } from '../../types/RuntimePropertyOnElem
 export declare function registerFlushElementTreeHandler(mainThreadRpc: Rpc, endpoint: typeof flushElementTreeEndpoint, options: {
     pageConfig: PageConfig;
     backgroundRpc: Rpc;
-    rootDom: HTMLElement;
+    shadowRoot: ShadowRoot;
 }, onCommit: (info: {
     pipelineId: string | undefined;
     timingFlags: string[];

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.js

@@ -10,12 +10,12 @@ function applyPageAttributes(page, pageConfig) {
     }
 }
 export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options, onCommit, markTimingInternal) {
-    const { pageConfig, backgroundRpc, rootDom, } = options;
+    const { pageConfig, backgroundRpc, shadowRoot, } = options;
     const uniqueIdToElement = [];
     const uniqueIdToCssInJsRule = [];
     const rootStyleElementForCssInJs = document.createElement('style');
     if (!pageConfig.enableCSSSelector) {
-        rootDom.append(rootStyleElementForCssInJs);
+        shadowRoot.append(rootStyleElementForCssInJs);
     }
     const createElementImpl = (tag) => {
         const element = document.createElement(tag);
@@ -38,7 +38,7 @@ export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options
         const crossThreadEvent = createCrossThreadEvent(event);
         const currentTarget = event.currentTarget;
         const parentComponentUniqueId = currentTarget.getAttribute(parentComponentUniqueIdAttribute) ?? '0';
-        const componentTargetDom = rootDom.querySelector(`[${lynxUniqueIdAttribute}="${parentComponentUniqueId}"]`);
+        const componentTargetDom = shadowRoot.querySelector(`[${lynxUniqueIdAttribute}="${parentComponentUniqueId}"]`);
         const componentId = componentTargetDom?.getAttribute(lynxTagAttribute) !== 'page'
             ? componentTargetDom?.getAttribute(componentIdAttribute) ?? undefined
             : undefined;
@@ -80,8 +80,8 @@ export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options
             // on FP
             const styleElement = document.createElement('style');
             styleElement.innerHTML = cardCss;
-            rootDom.append(styleElement);
-            rootDom.append(page);
+            shadowRoot.append(styleElement);
+            shadowRoot.append(page);
             applyPageAttributes(page, pageConfig);
         }
         markTimingInternal('layout_end', pipelineId);

package/dist/uiThread/crossThreadHandlers/registerInvokeUIMethodHandler.d.ts

@@ -1,2 +1,2 @@
 import { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function registerInvokeUIMethodHandler(rpc: Rpc, rootDom: Element): void;
+export declare function registerInvokeUIMethodHandler(rpc: Rpc, shadowRoot: ShadowRoot): void;

package/dist/uiThread/crossThreadHandlers/registerInvokeUIMethodHandler.js

@@ -17,11 +17,11 @@ const methodAlias = {
         };
     },
 };
-export function registerInvokeUIMethodHandler(rpc, rootDom) {
+export function registerInvokeUIMethodHandler(rpc, shadowRoot) {
     let code = ErrorCode.UNKNOWN;
     let data = undefined;
     rpc.registerHandler(invokeUIMethodEndpoint, (type, identifier, component_id, method, params, root_unique_id) => {
-        queryNodes(rootDom, type, identifier, component_id, true, root_unique_id, (element) => {
+        queryNodes(shadowRoot, type, identifier, component_id, true, root_unique_id, (element) => {
             try {
                 const aliasMethod = methodAlias[method];
                 const hasDomMethod = typeof element[method] === 'function';

package/dist/uiThread/crossThreadHandlers/registerSelectComponentHandler.d.ts

@@ -1,2 +1,2 @@
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function registerSelectComponentHandler(rpc: Rpc, rootDom: Element): void;
+export declare function registerSelectComponentHandler(rpc: Rpc, shadowRoot: ShadowRoot): void;

package/dist/uiThread/crossThreadHandlers/registerSelectComponentHandler.js

@@ -3,10 +3,10 @@
 // LICENSE file in the root directory of this source tree.
 import { componentIdAttribute, IdentifierType, selectComponentEndpoint, } from '@lynx-js/web-constants';
 import { queryNodes } from './queryNodes.js';
-export function registerSelectComponentHandler(rpc, rootDom) {
+export function registerSelectComponentHandler(rpc, shadowRoot) {
     let element;
     rpc.registerHandler(selectComponentEndpoint, (componentId, idSelector, single) => {
-        queryNodes(rootDom, IdentifierType.ID_SELECTOR, idSelector, componentId === 'card' ? '0' : componentId, single, undefined, (ele) => {
+        queryNodes(shadowRoot, IdentifierType.ID_SELECTOR, idSelector, componentId === 'card' ? '0' : componentId, single, undefined, (ele) => {
             element = ele;
         });
         return [element?.getAttribute(componentIdAttribute) ?? undefined];

package/dist/uiThread/crossThreadHandlers/registerSetNativePropsHandler.d.ts

@@ -1,2 +1,2 @@
 import { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function registerNativePropsHandler(rpc: Rpc, rootDom: Element): void;
+export declare function registerNativePropsHandler(rpc: Rpc, shadowRoot: ShadowRoot): void;

package/dist/uiThread/crossThreadHandlers/registerSetNativePropsHandler.js

@@ -22,9 +22,9 @@ function applyNativeProps(element, nativeProps) {
         }
     }
 }
-export function registerNativePropsHandler(rpc, rootDom) {
+export function registerNativePropsHandler(rpc, shadowRoot) {
     rpc.registerHandler(setNativePropsEndpoint, (type, identifier, component_id, first_only, native_props, root_unique_id) => {
-        queryNodes(rootDom, type, identifier, component_id, first_only, root_unique_id, (element) => {
+        queryNodes(shadowRoot, type, identifier, component_id, first_only, root_unique_id, (element) => {
             applyNativeProps(element, native_props);
         });
     });

package/dist/uiThread/crossThreadHandlers/registerTriggerComponentEventHandler.d.ts

@@ -1,2 +1,2 @@
 import type { Rpc } from '@lynx-js/web-worker-rpc';
-export declare function registerTriggerComponentEventHandler(rpc: Rpc, rootDom: Element): void;
+export declare function registerTriggerComponentEventHandler(rpc: Rpc, shadowRoot: ShadowRoot): void;

package/dist/uiThread/crossThreadHandlers/registerTriggerComponentEventHandler.js

@@ -2,9 +2,9 @@
 // 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 { componentIdAttribute, triggerComponentEventEndpoint, } from '@lynx-js/web-constants';
-export function registerTriggerComponentEventHandler(rpc, rootDom) {
+export function registerTriggerComponentEventHandler(rpc, shadowRoot) {
     rpc.registerHandler(triggerComponentEventEndpoint, (id, params) => {
-        const componentDom = rootDom.querySelector(`[${componentIdAttribute}="${params.componentId}"]`);
+        const componentDom = shadowRoot.querySelector(`[${componentIdAttribute}="${params.componentId}"]`);
         componentDom?.dispatchEvent(new CustomEvent(id, {
             ...params.eventOption,
             detail: params.eventDetail,

package/dist/uiThread/startUIThread.d.ts

@@ -1,6 +1,6 @@
 import type { LynxView } from '../apis/createLynxView.js';
 import { type MainThreadStartConfigs, type NapiModulesCall, type NativeModulesCall } from '@lynx-js/web-constants';
-export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, rootDom: HTMLElement, callbacks: {
+export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, shadowRoot: ShadowRoot, callbacks: {
     nativeModulesCall: NativeModulesCall;
     napiModulesCall: NapiModulesCall;
     onError?: () => void;

package/dist/uiThread/startUIThread.js

@@ -16,14 +16,14 @@ import { flushElementTreeEndpoint, mainThreadChunkReadyEndpoint, mainThreadStart
 import { loadTemplate } from '../utils/loadTemplate.js';
 import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
 import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
-export function startUIThread(templateUrl, configs, rootDom, callbacks) {
+export function startUIThread(templateUrl, configs, shadowRoot, callbacks) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
     const { nativeModulesMap, napiModulesMap } = configs;
     const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers();
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
     const uiThreadFpReady = backgroundRpc.createCall(uiThreadFpReadyEndpoint);
     const mainThreadStart = mainThreadRpc.createCall(mainThreadStartEndpoint);
-    const { markTimingInternal, sendTimingResult } = bootTimingSystem(mainThreadRpc, backgroundRpc, rootDom);
+    const { markTimingInternal, sendTimingResult } = bootTimingSystem(mainThreadRpc, backgroundRpc, shadowRoot);
     markTimingInternal('create_lynx_start', undefined, createLynxStartTiming);
     markTimingInternal('load_template_start');
     loadTemplate(templateUrl).then((template) => {
@@ -41,15 +41,15 @@ export function startUIThread(templateUrl, configs, rootDom, callbacks) {
         registerFlushElementTreeHandler(mainThreadRpc, flushElementTreeEndpoint, {
             pageConfig,
             backgroundRpc,
-            rootDom,
+            shadowRoot,
         }, (info) => {
             const { pipelineId, timingFlags, isFP } = info;
             if (isFP) {
-                registerInvokeUIMethodHandler(backgroundRpc, rootDom);
-                registerNativePropsHandler(backgroundRpc, rootDom);
-                registerTriggerComponentEventHandler(backgroundRpc, rootDom);
-                registerSelectComponentHandler(backgroundRpc, rootDom);
-                createExposureService(backgroundRpc, rootDom);
+                registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
+                registerNativePropsHandler(backgroundRpc, shadowRoot);
+                registerTriggerComponentEventHandler(backgroundRpc, shadowRoot);
+                registerSelectComponentHandler(backgroundRpc, shadowRoot);
+                createExposureService(backgroundRpc, shadowRoot);
                 uiThreadFpReady();
             }
             sendTimingResult(pipelineId, timingFlags, isFP);

package/dist/utils/createCrossThreadEvent.js

@@ -33,7 +33,7 @@ export function createCrossThreadEvent(domEvent) {
         currentTarget: {
             id: currentTargetElement.id,
             dataset: currentTargetElement[lynxRuntimeValue]?.dataset ?? {},
-            uniqueId: parseFloat(currentTargetElement.getAttribute(lynxUniqueIdAttribute)),
+            uniqueId: parseFloat(currentTargetElement.getAttribute?.(lynxUniqueIdAttribute)),
         },
         // @ts-expect-error
         detail: domEvent.detail ?? {},

package/index.css

@@ -9,54 +9,17 @@ lynx-view {
   display: flex;
 }
 
-lynx-view::part(lynx-view-root) {
-  display: contents;
-  width: 100%;
-  height: 100%;
-}
-
-lynx-view[height="auto"] {
-  --lynx-view-height: 100%;
-  height: var(--lynx-view-height);
-  block-size: var(--lynx-view-height);
-}
-lynx-view[height="auto"]::part(lynx-view-root) {
-  height: unset;
-}
-
 lynx-view[width="auto"] {
   --lynx-view-width: 100%;
   width: var(--lynx-view-width);
   inline-size: var(--lynx-view-width);
 }
-lynx-view[width="auto"]::part(lynx-view-root) {
-  width: unset;
-}
 
 lynx-view[height="auto"], lynx-view[width="auto"] {
-  contain-intrinsic-size: var(--lynx-view-width) var(--lynx-view-height);
-}
-lynx-view[height="auto"]::part(lynx-view-root),
-lynx-view[width="auto"]::part(lynx-view-root) {
-  display: unset;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-@property --lynx-view-width {
-  syntax: "<length> | <percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-
-@property --lynx-view-height {
-  syntax: "<length> | <percentage>";
-  inherits: false;
-  initial-value: 100%;
+  contain: content;
 }
 
-lynx-view:not([width="auto"]):not([height="auto"])::part(page) {
+lynx-view::part(page) {
   height: 100%;
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,13 +24,13 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "0.9.0",
-    "@lynx-js/web-worker-rpc": "0.9.0",
-    "@lynx-js/web-worker-runtime": "0.9.0"
+    "@lynx-js/web-constants": "0.9.1",
+    "@lynx-js/web-worker-rpc": "0.9.1",
+    "@lynx-js/web-worker-runtime": "0.9.1"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.0",
-    "@lynx-js/web-elements": "0.5.0"
+    "@lynx-js/web-elements": "0.5.1"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.0",