@lynx-js/web-core-wasm-canary 0.0.0 → 0.0.1-canary-20260116-ce265e8f

package/dist/client/mainthread/elementAPIs/createElementAPI.js

@@ -0,0 +1,346 @@
+import { wasmInstance } from '../../wasm.js';
+import { templateManager } from '../TemplateManager.js';
+import { LYNX_TIMING_FLAG_ATTRIBUTE, lynxDisposedAttribute, lynxDefaultDisplayLinearAttribute, lynxEntryNameAttribute, uniqueIdSymbol, LYNX_TAG_TO_HTML_TAG_MAP, cssIdAttribute, lynxDefaultOverflowVisibleAttribute, } from '../../../constants.js';
+import { __SwapElement, __AppendElement, __ElementIsEqual, __FirstElement, __GetChildren, __GetParent, __InsertElementBefore, __LastElement, __NextElement, __RemoveElement, __ReplaceElement, __ReplaceElements, __GetAttributes, __GetAttributeByName, __GetID, __SetID, __GetTag, __GetClasses, __SetClasses, __AddClass, __MarkTemplateElement, __MarkPartElement, __GetElementUniqueID, __GetTemplateParts, __UpdateListCallbacks, } from './pureElementPAPIs.js';
+import hyphenateStyleName from 'hyphenate-style-name';
+export function createElementAPI(entryTemplateUrl, rootDom, mtsBinding, config_enable_css_selector, config_default_display_linear, config_default_overflow_visible) {
+    const wasmContext = new wasmInstance.MainThreadWasmContext(document, rootDom, mtsBinding, uniqueIdSymbol, config_enable_css_selector);
+    mtsBinding.wasmContext = wasmContext;
+    let page = undefined;
+    const timingFlags = [];
+    const uniqueIdToElement = mtsBinding.uniqueIdToElement;
+    const __SetCSSId = (elements, cssId, entryName) => {
+        const uniqueIds = elements.map((element) => {
+            if (entryName) {
+                element.setAttribute(lynxEntryNameAttribute, entryName);
+            }
+            else {
+                element.removeAttribute(lynxEntryNameAttribute);
+            }
+            if (cssId) {
+                element.setAttribute(cssIdAttribute, cssId.toString());
+            }
+            else {
+                element.removeAttribute(cssIdAttribute);
+            }
+            return element[uniqueIdSymbol];
+        });
+        if (cssId !== null) {
+            wasmContext.__wasm_set_css_id(new Uint32Array(uniqueIds), cssId);
+            for (const element of elements) {
+                const uniqueId = element[uniqueIdSymbol];
+                if (!config_enable_css_selector) {
+                    mtsBinding.lynxViewInstance.styleManager.updateCssOgStyle(uniqueId, cssId, element.classList, entryName);
+                }
+            }
+        }
+    };
+    const __AddEvent = (element, eventType, eventName, frameworkCrossThreadIdentifier) => {
+        const uniqueId = element[uniqueIdSymbol];
+        if (typeof frameworkCrossThreadIdentifier === 'string') {
+            wasmContext.__wasm_add_event_bts(uniqueId, eventType, eventName, frameworkCrossThreadIdentifier);
+        }
+        else if (frameworkCrossThreadIdentifier == null) {
+            wasmContext.__wasm_add_event_bts(uniqueId, eventType, eventName, undefined);
+            wasmContext.__wasm_add_event_run_worklet(uniqueId, eventType, eventName, undefined);
+        }
+        else if (typeof frameworkCrossThreadIdentifier === 'object') {
+            wasmContext.__wasm_add_event_run_worklet(uniqueId, eventType, eventName, frameworkCrossThreadIdentifier);
+        }
+        if (eventName === 'uiappear' || eventName === 'uidisappear') {
+            mtsBinding.markExposureRelatedElementByUniqueId(uniqueId, frameworkCrossThreadIdentifier != null);
+        }
+    };
+    return {
+        __CreateView(parentComponentUniqueId) {
+            const dom = document.createElement('x-view');
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(parentComponentUniqueId, dom);
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreateText(parentComponentUniqueId) {
+            const dom = document.createElement('x-text');
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(parentComponentUniqueId, dom);
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreateImage(parentComponentUniqueId) {
+            const dom = document.createElement('x-image');
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(parentComponentUniqueId, dom);
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreateRawText(text) {
+            const dom = document.createElement('raw-text');
+            dom.setAttribute('text', text);
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(-1, dom);
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreateScrollView(parentComponentUniqueId) {
+            const dom = document.createElement('scroll-view');
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(parentComponentUniqueId, dom);
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreateElement(tagName, parentComponentUniqueId) {
+            const dom = document.createElement(LYNX_TAG_TO_HTML_TAG_MAP[tagName] ?? tagName);
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(parentComponentUniqueId, dom);
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreateComponent(parentComponentUniqueId, componentID, cssID, entryName, name) {
+            const dom = document.createElement('x-view');
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(parentComponentUniqueId, dom, cssID, componentID);
+            if (entryName) {
+                dom.setAttribute(lynxEntryNameAttribute, entryName);
+            }
+            if (name) {
+                dom.setAttribute('name', name);
+            }
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreateWrapperElement(parentComponentUniqueId) {
+            const dom = document.createElement('lynx-wrapper');
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(parentComponentUniqueId, dom);
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreateList(parentComponentUniqueId, componentAtIndex, enqueueComponent) {
+            const dom = document.createElement('x-list');
+            dom.componentAtIndex = componentAtIndex;
+            dom.enqueueComponent = enqueueComponent;
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(parentComponentUniqueId, dom);
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __CreatePage(componentID, cssID) {
+            if (page)
+                return page;
+            const dom = document.createElement('div');
+            dom[uniqueIdSymbol] = wasmContext.__CreateElementCommon(0, dom, cssID, componentID);
+            if (config_default_overflow_visible) {
+                dom.setAttribute(lynxDefaultOverflowVisibleAttribute, 'true');
+            }
+            if (!config_default_display_linear) {
+                dom.setAttribute(lynxDefaultDisplayLinearAttribute, 'false');
+            }
+            dom.setAttribute('part', 'page');
+            page = dom;
+            uniqueIdToElement[dom[uniqueIdSymbol]] = dom;
+            return dom;
+        },
+        __ElementFromBinary(templateId, parentComponentUniqueId) {
+            let template_root = wasmContext._wasm_elementFromBinary(parentComponentUniqueId, entryTemplateUrl, templateId, templateManager.getTemplate(entryTemplateUrl).elementTemplates);
+            __MarkTemplateElement(template_root);
+            return template_root;
+        },
+        __SetClasses: config_enable_css_selector
+            ? __SetClasses
+            : ((element, classname) => {
+                __SetClasses(element, classname);
+                // Also sync to wasm side
+                const uniqueId = element[uniqueIdSymbol];
+                mtsBinding.lynxViewInstance.styleManager.updateCssOgStyle(uniqueId, wasmContext.__wasm_get_css_id_by_unique_id(uniqueId), element.classList, element.getAttribute(lynxEntryNameAttribute) || undefined);
+            }),
+        __SetCSSId,
+        __AddInlineStyle: (element, key, value) => {
+            if (typeof value != 'string') {
+                value = value.toString();
+            }
+            if (typeof key === 'number') {
+                return wasmContext.__wasm_AddInlineStyle_number_key(element, key, value);
+            }
+            else {
+                return wasmContext.__wasm_AddInlineStyle_str_key(element, key.toString(), value);
+            }
+        },
+        __SetInlineStyles: (element, value) => {
+            if (!value) {
+                element.removeAttribute('style');
+            }
+            else {
+                const styleString = typeof value === 'string'
+                    ? value
+                    : Object.entries(value).map(([k, v]) => `${hyphenateStyleName(k)}: ${v};`).join();
+                if (!wasmContext.__wasm_SetInlineStyles(element, styleString)) {
+                    element.setAttribute('style', styleString);
+                }
+            }
+        },
+        __AddConfig: (element, type, value) => {
+            const uniqueId = element[uniqueIdSymbol];
+            const config = wasmContext.__GetConfig(uniqueId);
+            // @ts-ignore
+            config[type] = value;
+        },
+        __UpdateComponentInfo: (element, componentInfo) => {
+            const uniqueId = element[uniqueIdSymbol];
+            const { componentID, cssID, entry, name } = componentInfo;
+            if (name) {
+                element.setAttribute('name', name);
+            }
+            else {
+                element.removeAttribute('name');
+            }
+            wasmContext.__UpdateComponentID(uniqueId, componentID);
+            if (cssID !== undefined) {
+                __SetCSSId([element], cssID, entry);
+            }
+        },
+        __UpdateComponentID: (element, componentID) => {
+            const uniqueId = element[uniqueIdSymbol];
+            wasmContext.__UpdateComponentID(uniqueId, componentID);
+        },
+        __GetConfig: (element) => {
+            const uniqueId = element[uniqueIdSymbol];
+            return wasmContext.__GetConfig(uniqueId);
+        },
+        __SetConfig: (element, config) => {
+            const uniqueId = element[uniqueIdSymbol];
+            wasmContext.__SetConfig(uniqueId, config);
+        },
+        __GetElementConfig: (element) => {
+            const uniqueId = element[uniqueIdSymbol];
+            return wasmContext.__GetElementConfig(uniqueId);
+        },
+        __GetComponentID: (element) => {
+            const uniqueId = element[uniqueIdSymbol];
+            return wasmContext.__GetComponentID(uniqueId);
+        },
+        __SetDataset: (element, dataset) => {
+            const uniqueId = element[uniqueIdSymbol];
+            wasmContext.__SetDataset(uniqueId, element, dataset);
+        },
+        __AddDataset: (element, key, value) => {
+            const uniqueId = element[uniqueIdSymbol];
+            if (value) {
+                element.setAttribute(`data-${key}`, typeof value === 'object' ? JSON.stringify(value) : value.toString());
+            }
+            else {
+                element.removeAttribute(`data-${key}`);
+            }
+            wasmContext.__AddDataset(uniqueId, key, value);
+        },
+        __GetDataset: (element) => {
+            const uniqueId = element[uniqueIdSymbol];
+            return Object.assign(Object.create(null), wasmContext.__GetDataset(uniqueId));
+        },
+        __GetDataByKey: (element, key) => {
+            const uniqueId = element[uniqueIdSymbol];
+            return wasmContext.__GetDataByKey(uniqueId, key);
+        },
+        __SetAttribute(element, name, value) {
+            if (name === 'update-list-info') {
+                const { insertAction, removeAction } = value;
+                queueMicrotask(() => {
+                    const componentAtIndex = element.componentAtIndex;
+                    const enqueueComponent = element.enqueueComponent;
+                    const uniqueId = __GetElementUniqueID(element);
+                    for (const action of insertAction) {
+                        componentAtIndex?.(element, uniqueId, action.position, 0, false);
+                    }
+                    for (const action of removeAction) {
+                        enqueueComponent?.(element, uniqueId, action.position);
+                    }
+                });
+            }
+            else {
+                if (value == null) {
+                    element.removeAttribute(name);
+                }
+                else {
+                    element.setAttribute(name, value.toString());
+                }
+                if (name === 'exposure-id') {
+                    if (value != null) {
+                        const uniqueId = element[uniqueIdSymbol];
+                        mtsBinding.markExposureRelatedElementByUniqueId(uniqueId, true);
+                    }
+                    else {
+                        const uniqueId = element[uniqueIdSymbol];
+                        mtsBinding.markExposureRelatedElementByUniqueId(uniqueId, false);
+                    }
+                }
+                else if (name === LYNX_TIMING_FLAG_ATTRIBUTE) {
+                    timingFlags.push(String(value));
+                }
+            }
+        },
+        __AddEvent,
+        __GetEvent: (element, eventType, eventName) => {
+            const uniqueId = element[uniqueIdSymbol];
+            return wasmContext.__GetEvent(uniqueId, eventType, eventName);
+        },
+        __GetEvents: (element) => {
+            const uniqueId = element[uniqueIdSymbol];
+            return wasmContext.__GetEvents(uniqueId);
+        },
+        __SetEvents: (element, events) => {
+            for (const event of events) {
+                __AddEvent(element, event.type, event.name, event.function);
+            }
+        },
+        __GetPageElement: () => page,
+        __AppendElement,
+        __ElementIsEqual,
+        __FirstElement,
+        __GetChildren,
+        __GetParent,
+        __InsertElementBefore,
+        __LastElement,
+        __NextElement,
+        __RemoveElement,
+        __ReplaceElement,
+        __GetAttributes,
+        __GetAttributeByName,
+        __ReplaceElements,
+        __GetID,
+        __SetID,
+        __GetTag,
+        __AddClass,
+        __GetClasses,
+        __MarkTemplateElement,
+        __MarkPartElement,
+        __GetTemplateParts,
+        __GetElementUniqueID,
+        __UpdateListCallbacks,
+        __SwapElement,
+        __FlushElementTree: (_, options) => {
+            const pipelineId = options?.pipelineOptions?.pipelineID;
+            const backgroundThread = mtsBinding.lynxViewInstance.backgroundThread;
+            if (page && !page.parentNode
+                && page.getAttribute(lynxDisposedAttribute) !== '') {
+                backgroundThread.markTiming('dispatch_start', pipelineId);
+                backgroundThread.jsContext.dispatchEvent({
+                    type: '__OnNativeAppReady',
+                    data: undefined,
+                });
+                backgroundThread.markTiming('layout_start', pipelineId);
+                backgroundThread.markTiming('ui_operation_flush_start', pipelineId);
+                rootDom.appendChild(page);
+                rootDom.host.style.display = 'flex';
+                backgroundThread.markTiming('ui_operation_flush_end', pipelineId);
+                backgroundThread.markTiming('layout_end', pipelineId);
+                backgroundThread.markTiming('dispatch_end', pipelineId);
+                backgroundThread.flushTimingInfo();
+            }
+            let timingFlagsAll = timingFlags.concat(wasmContext.__wasm_take_timing_flags());
+            requestAnimationFrame(() => {
+                mtsBinding.postTimingFlags(timingFlagsAll, pipelineId);
+            });
+            timingFlags.length = 0;
+            const enabledExposureElements = [
+                ...mtsBinding.toBeEnabledElement,
+            ];
+            mtsBinding.toBeEnabledElement.clear();
+            const disabledExposureElements = [
+                ...mtsBinding.toBeDisabledElement,
+            ];
+            mtsBinding.toBeDisabledElement.clear();
+            mtsBinding?.updateExposureStatus(enabledExposureElements, disabledExposureElements);
+        },
+    };
+}
+//# sourceMappingURL=createElementAPI.js.map

package/dist/client/mainthread/elementAPIs/index.d.ts

@@ -0,0 +1,2 @@
+export { WASMJSBinding } from './WASMJSBinding.js';
+export { createElementAPI } from './createElementAPI.js';

package/dist/client/mainthread/elementAPIs/index.js

@@ -0,0 +1,3 @@
+export { WASMJSBinding } from './WASMJSBinding.js';
+export { createElementAPI } from './createElementAPI.js';
+//# sourceMappingURL=index.js.map

package/dist/client/mainthread/elementAPIs/pureElementPAPIs.d.ts

@@ -0,0 +1,26 @@
+import type { AddClassPAPI, AppendElementPAPI, ElementIsEqualPAPI, FirstElementPAPI, GetAttributeByNamePAPI, GetAttributesPAPI, GetChildrenPAPI, GetClassesPAPI, GetElementUniqueIDPAPI, GetIDPAPI, GetParentPAPI, GetTagPAPI, GetTemplatePartsPAPI, InsertElementBeforePAPI, LastElementPAPI, MarkPartElementPAPI, MarkTemplateElementPAPI, NextElementPAPI, RemoveElementPAPI, ReplaceElementPAPI, ReplaceElementsPAPI, SetClassesPAPI, SetIDPAPI, SwapElementPAPI, UpdateListCallbacksPAPI } from '../../../types/index.js';
+export declare const __AppendElement: AppendElementPAPI;
+export declare const __ElementIsEqual: ElementIsEqualPAPI;
+export declare const __FirstElement: FirstElementPAPI;
+export declare const __GetChildren: GetChildrenPAPI;
+export declare const __GetParent: GetParentPAPI;
+export declare const __InsertElementBefore: InsertElementBeforePAPI;
+export declare const __LastElement: LastElementPAPI;
+export declare const __NextElement: NextElementPAPI;
+export declare const __RemoveElement: RemoveElementPAPI;
+export declare const __ReplaceElement: ReplaceElementPAPI;
+export declare const __ReplaceElements: ReplaceElementsPAPI;
+export declare const __GetAttributes: GetAttributesPAPI;
+export declare const __GetAttributeByName: GetAttributeByNamePAPI;
+export declare const __GetID: GetIDPAPI;
+export declare const __SetID: SetIDPAPI;
+export declare const __GetTag: GetTagPAPI;
+export declare const __GetClasses: GetClassesPAPI;
+export declare const __SwapElement: SwapElementPAPI;
+export declare const __SetClasses: SetClassesPAPI;
+export declare const __AddClass: AddClassPAPI;
+export declare const __GetTemplateParts: GetTemplatePartsPAPI;
+export declare const __MarkTemplateElement: MarkTemplateElementPAPI;
+export declare const __MarkPartElement: MarkPartElementPAPI;
+export declare const __GetElementUniqueID: GetElementUniqueIDPAPI;
+export declare const __UpdateListCallbacks: UpdateListCallbacksPAPI;

package/dist/client/mainthread/elementAPIs/pureElementPAPIs.js

@@ -0,0 +1,85 @@
+// Copyright 2023 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 { HTML_TAG_TO_LYNX_TAG_MAP, lynxElementTemplateMarkerAttribute, lynxPartIdAttribute, uniqueIdSymbol, } from '../../../constants.js';
+export const __AppendElement = /*#__PURE__*/ (parent, child) => parent.appendChild(child);
+export const __ElementIsEqual = /*#__PURE__*/ (left, right) => left === right;
+export const __FirstElement = /*#__PURE__*/ (element) => element.firstElementChild;
+export const __GetChildren = /*#__PURE__*/ (element) => element.children ? [...element.children] : null;
+export const __GetParent = /*#__PURE__*/ (element) => element.parentElement;
+export const __InsertElementBefore = /*#__PURE__*/ (parent, child, ref) => parent.insertBefore(child, ref);
+export const __LastElement = /*#__PURE__*/ (element) => element.lastElementChild;
+export const __NextElement = /*#__PURE__*/ (element) => element.nextElementSibling;
+export const __RemoveElement = /*#__PURE__*/ (parent, child) => parent.removeChild(child);
+export const __ReplaceElement = /*#__PURE__*/ (newElement, oldElement) => oldElement.replaceWith(newElement);
+export const __ReplaceElements = /*#__PURE__*/ (parent, newChildren, oldChildren) => {
+    newChildren = Array.isArray(newChildren) ? newChildren : [newChildren];
+    if (!oldChildren || (Array.isArray(oldChildren) && oldChildren?.length === 0)) {
+        parent.append(...newChildren);
+    }
+    else {
+        oldChildren = Array.isArray(oldChildren) ? oldChildren : [oldChildren];
+        for (let ii = 1; ii < oldChildren.length; ii++) {
+            __RemoveElement(parent, oldChildren[ii]);
+        }
+        const firstOldChildren = oldChildren[0];
+        firstOldChildren.replaceWith(...newChildren);
+    }
+};
+export const __GetAttributes = /*#__PURE__*/ (element) => {
+    return Object.fromEntries(element.getAttributeNames().map((attributeName) => [attributeName, element.getAttribute(attributeName)])
+        .filter(([, value]) => value));
+};
+export const __GetAttributeByName = /*#__PURE__*/ (element, name) => element.getAttribute(name);
+export const __GetID = /*#__PURE__*/ (element) => element.getAttribute('id');
+export const __SetID = /*#__PURE__*/ (element, id) => id ? element.setAttribute('id', id) : element.removeAttribute('id');
+export const __GetTag = /*#__PURE__*/ (element) => {
+    const tagName = element.tagName.toLowerCase();
+    return HTML_TAG_TO_LYNX_TAG_MAP[tagName] ?? tagName;
+};
+export const __GetClasses = /*#__PURE__*/ (element) => [...element.classList];
+export const __SwapElement = /*#__PURE__*/ (childA, childB) => {
+    const temp = document.createElement('div');
+    childA.replaceWith(temp);
+    childB.replaceWith(childA);
+    temp.replaceWith(childB);
+};
+export const __SetClasses = /*#__PURE__*/ (element, classname) => {
+    classname
+        ? element.setAttribute('class', classname)
+        : element.removeAttribute('class');
+};
+export const __AddClass = /*#__PURE__*/ (element, className) => {
+    element.classList.add(className);
+};
+export const __GetTemplateParts = (templateElement) => {
+    const isTemplate = templateElement.getAttribute(lynxElementTemplateMarkerAttribute)
+        !== null;
+    if (!isTemplate) {
+        return {};
+    }
+    const templateUniqueId = __GetElementUniqueID(templateElement);
+    const parts = {};
+    const partElements = templateElement.querySelectorAll(`[${lynxPartIdAttribute}]:not([${lynxElementTemplateMarkerAttribute}="${templateUniqueId}"] [${lynxElementTemplateMarkerAttribute}] [${lynxPartIdAttribute}])`);
+    for (const partElement of partElements) {
+        const partId = partElement.getAttribute(lynxPartIdAttribute);
+        if (partId) {
+            parts[partId] = partElement;
+        }
+    }
+    return parts;
+};
+export const __MarkTemplateElement = (element) => {
+    const templateUniqueId = __GetElementUniqueID(element);
+    element.setAttribute(lynxElementTemplateMarkerAttribute, templateUniqueId.toString());
+};
+export const __MarkPartElement = (element, partId) => {
+    element.setAttribute(lynxPartIdAttribute, partId);
+};
+export const __GetElementUniqueID = /*#__PURE__*/ (element) => (element && element[uniqueIdSymbol]) ?? -1;
+export const __UpdateListCallbacks = /*#__PURE__*/ (element, componentAtIndex, enqueueComponent) => {
+    const decoratedElement = element;
+    decoratedElement.componentAtIndex = componentAtIndex;
+    decoratedElement.enqueueComponent = enqueueComponent;
+};
+//# sourceMappingURL=pureElementPAPIs.js.map

package/dist/client/mainthread/utils/convertLengthToPx.d.ts

@@ -0,0 +1 @@
+export declare function convertLengthToPx(targetElement: HTMLElement, str: string | null, isWidth?: boolean): number;

package/dist/client/mainthread/utils/convertLengthToPx.js

@@ -0,0 +1,25 @@
+// 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.
+export function convertLengthToPx(targetElement, str, isWidth) {
+    if (str) {
+        str = str.trim();
+        if (str.endsWith('px')) {
+            return Number(str.substring(0, str.length - 2));
+        }
+        else if (str.endsWith('%')) {
+            const pct = Number(str.substring(0, str.length - 1));
+            const { width, height } = targetElement.getBoundingClientRect();
+            const base = isWidth ? width : height;
+            return (base * pct) / 100;
+        }
+        else {
+            /**
+             * TODO (haoyang.wang): support rpx
+             */
+            return 0;
+        }
+    }
+    return 0;
+}
+//# sourceMappingURL=convertLengthToPx.js.map

package/dist/client/wasm.d.ts

@@ -0,0 +1,11 @@
+export declare const wasmInstance: typeof import("../../binary/client/client.js"), wasmModule: WebAssembly.Module | undefined;
+export declare class DecodedStyle {
+    #private;
+    static webWorkerDecode(data: Uint8Array, configEnableCssSelector: boolean, entryName?: string): Uint8Array<ArrayBufferLike>;
+    readonly style_content: string;
+    readonly font_face_content: string;
+    constructor(data: Uint8Array);
+    query_css_og_declarations_by_css_id: InstanceType<typeof wasmInstance.DecodedStyleData>['query_css_og_declarations_by_css_id'];
+}
+export type MainThreadWasmContext = typeof import('../../binary/client/client.js').MainThreadWasmContext;
+export type ElementTemplateSection = typeof import('../../binary/client/client.js').ElementTemplateSection;

package/dist/client/wasm.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2025 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 { referenceTypes } from 'wasm-feature-detect';
+const isWorker = typeof WorkerGlobalScope !== 'undefined'
+    && self instanceof WorkerGlobalScope;
+const wasmLoaded = referenceTypes().then((supportsReferenceTypes) => {
+    if (supportsReferenceTypes) {
+        return Promise.all([
+            import(
+            /* webpackMode: "eager" */
+            /* webpackFetchPriority: "high" */
+            /* webpackPrefetch: true */
+            /* webpackPreload: true */
+            '../../binary/client/client.js'),
+            isWorker ? undefined : WebAssembly.compileStreaming(fetch(new URL(
+            /* webpackChunkName: "standard-wasm" */
+            /* webpackMode: "eager" */
+            /* webpackFetchPriority: "high" */
+            /* webpackPrefetch: true */
+            /* webpackPreload: true */
+            '../../binary/client/client_bg.wasm', import.meta.url))),
+        ]);
+    }
+    else {
+        throw new Error('WASM not supported');
+    }
+});
+export const [wasmInstance, wasmModule] = await wasmLoaded;
+if (!isWorker) {
+    wasmInstance.initSync({ module: wasmModule });
+}
+export class DecodedStyle {
+    static webWorkerDecode(data, configEnableCssSelector, entryName) {
+        return wasmInstance.DecodedStyleData.decode_into(data, entryName, configEnableCssSelector);
+    }
+    #styleData;
+    style_content;
+    font_face_content;
+    constructor(data) {
+        this.#styleData = new wasmInstance.DecodedStyleData(data);
+        // cache the string result to avoid multiple utf8 -> utf16 string transformation
+        this.style_content = this.#styleData.style_content;
+        this.font_face_content = this.#styleData.font_face_content;
+        this.query_css_og_declarations_by_css_id = this.#styleData
+            .query_css_og_declarations_by_css_id.bind(this.#styleData);
+    }
+    query_css_og_declarations_by_css_id;
+}
+//# sourceMappingURL=wasm.js.map

package/dist/client/webElementsDynamicLoader.d.ts

@@ -0,0 +1,8 @@
+import '@lynx-js/web-elements/XView';
+import '@lynx-js/web-elements/XText';
+import '@lynx-js/web-elements/XImage';
+import '@lynx-js/web-elements/XSvg';
+import '@lynx-js/web-elements/LynxWrapper';
+import '@lynx-js/web-elements/ScrollView';
+export declare function loadWebElement(id: number): Promise<void> | undefined;
+export declare function loadAllWebElements(): Promise<void>;

package/dist/client/webElementsDynamicLoader.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2025 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 '@lynx-js/web-elements/XView';
+import '@lynx-js/web-elements/XText';
+import '@lynx-js/web-elements/XImage';
+import '@lynx-js/web-elements/XSvg';
+import '@lynx-js/web-elements/LynxWrapper';
+import '@lynx-js/web-elements/ScrollView';
+const loadedWebElementsCSSIds = new Set();
+export function loadWebElement(id) {
+    if (loadedWebElementsCSSIds.has(id)) {
+        return undefined;
+    }
+    let promise = undefined;
+    switch (id) {
+        case 0:
+            promise = import(
+            /* webpackChunkName: "web-elements-list" */
+            '@lynx-js/web-elements/XList');
+            break;
+        case 1:
+            promise = import(
+            /* webpackChunkName: "web-elements-swiper" */
+            '@lynx-js/web-elements/XSwiper');
+            break;
+        case 2:
+            promise = import(
+            /* webpackChunkName: "web-elements-input" */
+            '@lynx-js/web-elements/XInput');
+            break;
+        case 3:
+            promise = import(
+            /* webpackChunkName: "web-elements-textarea" */
+            '@lynx-js/web-elements/XTextarea');
+            break;
+        case 4:
+            promise = import(
+            /* webpackChunkName: "web-elements-audio" */
+            '@lynx-js/web-elements/XAudioTT');
+            break;
+        case 5:
+            promise = import(
+            /* webpackChunkName: "web-elements-foldview" */
+            '@lynx-js/web-elements/XFoldViewNg');
+            break;
+        case 6:
+            promise = import(
+            /* webpackChunkName: "web-elements-refrshview" */
+            '@lynx-js/web-elements/XRefreshView');
+            break;
+        case 7:
+            promise = import(
+            /* webpackChunkName: "web-elements-overlay" */
+            '@lynx-js/web-elements/XOverlayNg');
+            break;
+        case 8:
+            promise = import(
+            /* webpackChunkName: "web-elements-viewpager" */
+            '@lynx-js/web-elements/XViewpagerNg');
+            break;
+        default:
+    }
+    return promise?.then(() => {
+        loadedWebElementsCSSIds.add(id);
+    });
+}
+export function loadAllWebElements() {
+    const promises = [];
+    for (let i = 0; i <= 8; i++) {
+        const p = loadWebElement(i);
+        if (p) {
+            promises.push(p);
+        }
+    }
+    return Promise.all(promises);
+}
+//# sourceMappingURL=webElementsDynamicLoader.js.map

package/dist/client_prod/static/css/async/web-core-main-chunk.css

@@ -0,0 +1 @@
+@supports not ((content-visibility:auto) and (transition-behavior:allow-discrete) and (width:1rex)){*{--lynx-display:linear;--lynx-linear-weight-sum:1;--lynx-linear-weight:0;--justify-content-column:flex-start;--justify-content-column-reverse:flex-start;--justify-content-row:flex-start;--justify-content-row-reverse:flex-start;--align-self-row:auto;--align-self-column:auto;--lynx-linear-weight-basis:auto;--lynx-linear-orientation:vertical;--flex-direction:row;--flex-grow:0;--flex-shrink:1;--flex-basis:auto;--justify-content:flex-start;--flex-wrap:nowrap;--align-self:auto}[lynx-computed-display=linear]{flex-direction:column;justify-content:flex-start;flex-wrap:nowrap!important}[lynx-computed-display=flex]{flex-direction:var(--flex-direction);justify-content:var(--justify-content);flex-wrap:var(--flex-wrap)}[lynx-computed-display=flex]>*,[lynx-computed-display=flex]>lynx-wrapper>*{flex:var(--flex,var(--flex-grow)var(--flex-shrink)var(--flex-basis))}[lynx-computed-display=linear]>*,[lynx-computed-display=linear]>lynx-wrapper>*{flex-shrink:0!important;flex-grow:calc(var(--lynx-linear-weight)/calc(var(--lynx-linear-weight-sum) + ( 1 - clamp(0,var(--lynx-linear-weight-sum)*999999,1))))!important;flex-basis:var(--lynx-linear-weight-basis)!important}[lynx-computed-display=linear][lynx-linear-orientation=vertical]{justify-content:var(--justify-content-column);flex-direction:column!important}[lynx-computed-display=linear][lynx-linear-orientation=horizontal]{justify-content:var(--justify-content-row);flex-direction:row!important}[lynx-computed-display=linear][lynx-linear-orientation=vertical-reverse]{justify-content:var(--justify-content-column-reverse);flex-direction:column-reverse!important}[lynx-computed-display=linear][lynx-linear-orientation=horizontal-reverse]{justify-content:var(--justify-content-row-reverse);flex-direction:row-reverse!important}[lynx-computed-display=linear][lynx-linear-orientation=vertical]>*,[lynx-computed-display=linear][lynx-linear-orientation=vertical-reverse],[lynx-computed-display=linear][lynx-linear-orientation=vertical]>lynx-wrapper>*,[lynx-computed-display=linear][lynx-linear-orientation=vertical-reverse]>lynx-wrapper>*{align-self:var(--align-self-column)}[lynx-computed-display=linear][lynx-linear-orientation=horizontal]>*,[lynx-computed-display=linear][lynx-linear-orientation=horizontal-reverse],[lynx-computed-display=linear][lynx-linear-orientation=horizontal]>lynx-wrapper>*,[lynx-computed-display=linear][lynx-linear-orientation=horizontal-reverse]>lynx-wrapper>*{align-self:var(--align-self-row)}}

package/dist/client_prod/static/css/client.css

@@ -0,0 +1 @@
+lynx-view{contain:strict;display:none}lynx-view[width=auto]{--lynx-view-width:100%;width:var(--lynx-view-width);inline-size:var(--lynx-view-width)}lynx-view[height=auto],lynx-view[width=auto]{contain:content}lynx-view::part(page){width:100%;height:100%}@property --lynx-display{syntax:"linear|flex";inherits:false;initial-value:linear}@property --lynx-linear-weight-sum{syntax:"<number>";inherits:false;initial-value:1}@property --lynx-linear-weight{syntax:"<number>";inherits:false;initial-value:0}@property --justify-content-column{syntax:"flex-start|flex-end|center|space-between|space-around";inherits:false;initial-value:flex-start}@property --justify-content-column-reverse{syntax:"flex-start|flex-end|center|space-between|space-around";inherits:false;initial-value:flex-start}@property --justify-content-row{syntax:"flex-start|flex-end|center|space-between|space-around";inherits:false;initial-value:flex-start}@property --justify-content-row-reverse{syntax:"flex-start|flex-end|center|space-between|space-around";inherits:false;initial-value:flex-start}@property --align-self-row{syntax:"start|end|center|stretch|auto";inherits:false;initial-value:auto}@property --align-self-column{syntax:"start|end|center|stretch|auto";inherits:false;initial-value:auto}@property --lynx-linear-weight-basis{syntax:"auto|<number>|<length>";inherits:false;initial-value:auto}@property --lynx-linear-orientation{syntax:"<custom-ident>";inherits:false;initial-value:vertical}@property --flex-direction{syntax:"*";inherits:false}@property --flex-wrap{syntax:"*";inherits:false}@property --flex-grow{syntax:"<number>";inherits:false;initial-value:0}@property --flex-shrink{syntax:"<number>";inherits:false;initial-value:1}@property --flex-basis{syntax:"*";inherits:false;initial-value:auto}@property --flex-value{syntax:"*";inherits:false}@property --flex{syntax:"*";inherits:false}@property --linear-justify-content{syntax:"flex-start|flex-end|center|space-between|space-around";inherits:false;initial-value:flex-start}