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

package/dist/client/mainthread/LynxView.js

@@ -0,0 +1,367 @@
+// 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 { lynxDisposedAttribute } from '../../constants.js';
+import { createIFrameRealm } from './createIFrameRealm.js';
+import { templateManager } from './TemplateManager.js';
+import(
+/* webpackChunkName: "web-core-main-chunk" */
+/* webpackFetchPriority: "high" */
+'./LynxViewInstance.js');
+/**
+ * Based on our experiences, these elements are almost used in all lynx cards.
+ */
+/**
+ * @property {string} url [required] (attribute: "url") The url of the entry of your Lynx card
+ * @property {Cloneable} globalProps [optional] (attribute: "global-props") The globalProps value of this Lynx card
+ * @property {Cloneable} initData [optional] (attribute: "init-data") The initial data of this Lynx card
+ * @property {Record<string,string>} overrideLynxTagToHTMLTagMap [optional] use this property/attribute to override the lynx tag -> html tag map
+ * @property {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
+ * @property {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
+ * @property {"auto" | null} height [optional] (attribute: "height") set it to "auto" for height auto-sizing
+ * @property {"auto" | null} width [optional] (attribute: "width") set it to "auto" for width auto-sizing
+ * @property {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
+ * @property {INapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
+ * @property {string[]} injectStyleRules [optional] the css rules which will be injected into shadowroot. Each items will be inserted by `insertRule` method. @see https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/insertRule
+ * @property {number} lynxGroupId [optional] (attribute: "lynx-group-id") the background shared context id, which is used to share webworker between different lynx cards
+ * @property {(string)=>Promise<LynxTemplate>} customTemplateLoader [optional] the custom template loader, which is used to load the template
+ * @property {InitI18nResources} initI18nResources [optional] (attribute: "init-i18n-resources") the complete set of i18nResources that on the container side, which can be obtained synchronously by _I18nResourceTranslation
+ *
+ * @event error lynx card fired an error
+ * @event i18nResourceMissed i18n resource cache miss
+ *
+ * @example
+ * HTML Example
+ *
+ * Note that you should declarae the size of lynx-view
+ *
+ * ```html
+ * <lynx-view url="https://path/to/main-thread.js" raw-data="{}" global-props="{}" style="height:300px;width:300px">
+ * </lynx-view>
+ * ```
+ *
+ * React 19 Example
+ * ```jsx
+ * <lynx-view url={myLynxCardUrl} rawData={{}} globalProps={{}} style={{height:'300px', width:'300px'}}>
+ * </lynx-view>
+ * ```
+ */
+export class LynxViewElement extends HTMLElement {
+    static lynxViewCount = 0;
+    static tag = 'lynx-view';
+    static observedAttributeAsProperties = [
+        'url',
+        'global-props',
+        'init-data',
+    ];
+    /**
+     * @private
+     */
+    static observedAttributes = LynxViewElement.observedAttributeAsProperties.map(nm => nm.toLowerCase());
+    #instance;
+    #connected = false;
+    #url;
+    /**
+     * @public
+     * @property nativeModulesMap
+     * @default {}
+     */
+    nativeModulesMap;
+    /**
+     * @param
+     * @property napiModulesMap
+     * @default {}
+     */
+    napiModulesMap;
+    /**
+     * @param
+     * @property
+     */
+    onNapiModulesCall;
+    constructor() {
+        super();
+        if (!this.onNativeModulesCall) {
+            this.onNativeModulesCall = (name, data, moduleName) => {
+                return new Promise((resolve) => {
+                    this.#cachedNativeModulesCall.push({
+                        args: [name, data, moduleName],
+                        resolve,
+                    });
+                });
+            };
+        }
+    }
+    /**
+     * @public
+     * @property the url of lynx view output entry file
+     */
+    get url() {
+        return this.#url;
+    }
+    set url(val) {
+        this.#url = val;
+        this.#render();
+    }
+    #globalProps = {};
+    /**
+     * @public
+     * @property globalProps
+     * @default {}
+     */
+    get globalProps() {
+        return this.#globalProps;
+    }
+    set globalProps(val) {
+        if (typeof val === 'string') {
+            this.#globalProps = JSON.parse(val);
+        }
+        else {
+            this.#globalProps = val;
+        }
+    }
+    #initData = {};
+    /**
+     * @public
+     * @property initData
+     * @default {}
+     */
+    get initData() {
+        return this.#initData;
+    }
+    set initData(val) {
+        if (typeof val === 'string') {
+            this.#initData = JSON.parse(val);
+        }
+        else {
+            this.#initData = val;
+        }
+    }
+    #initI18nResources = [];
+    /**
+     * @public
+     * @property initI18nResources
+     * @default {}
+     */
+    get initI18nResources() {
+        return this.#initI18nResources;
+    }
+    set initI18nResources(val) {
+        if (typeof val === 'string') {
+            this.#initI18nResources = JSON.parse(val);
+        }
+        else {
+            this.#initI18nResources = val;
+        }
+    }
+    /**
+     * @public
+     * @method
+     * update the `__initData` and trigger essential flow
+     */
+    updateI18nResources(data, options) {
+        this.#instance?.i18nManager.updateData(data, options);
+    }
+    #overrideLynxTagToHTMLTagMap = {
+        'page': 'div',
+    };
+    /**
+     * @public
+     * @property
+     * @default {page: 'div'}
+     */
+    get overrideLynxTagToHTMLTagMap() {
+        return this.#overrideLynxTagToHTMLTagMap;
+    }
+    set overrideLynxTagToHTMLTagMap(val) {
+        if (typeof val === 'string') {
+            this.#overrideLynxTagToHTMLTagMap = JSON.parse(val);
+        }
+        else {
+            this.#overrideLynxTagToHTMLTagMap = val;
+        }
+    }
+    #cachedNativeModulesCall = [];
+    #onNativeModulesCall;
+    /**
+     * @param
+     * @property
+     */
+    get onNativeModulesCall() {
+        return this.#onNativeModulesCall;
+    }
+    set onNativeModulesCall(handler) {
+        this.#onNativeModulesCall = handler;
+        for (const callInfo of this.#cachedNativeModulesCall) {
+            callInfo.resolve(handler.apply(undefined, callInfo.args));
+        }
+        this.#cachedNativeModulesCall = [];
+    }
+    /**
+     * @param
+     * @property
+     */
+    get lynxGroupId() {
+        return this.getAttribute('lynx-group-id')
+            ? Number(this.getAttribute('lynx-group-id'))
+            : undefined;
+    }
+    set lynxGroupId(val) {
+        if (val) {
+            this.setAttribute('lynx-group-id', val.toString());
+        }
+        else {
+            this.removeAttribute('lynx-group-id');
+        }
+    }
+    /**
+     * @public
+     * @method
+     * update the `__initData` and trigger essential flow
+     */
+    updateData(data, processorName, callback) {
+        this.#instance?.updateData(data, processorName).then(() => {
+            callback?.();
+        });
+    }
+    /**
+     * @public
+     * @method
+     * update the `__globalProps`
+     */
+    updateGlobalProps(data) {
+        this.#instance?.updateGlobalProps(data);
+        this.globalProps = data;
+    }
+    /**
+     * @public
+     * @method
+     * send global events, which can be listened to using the GlobalEventEmitter
+     */
+    sendGlobalEvent(eventName, params) {
+        this.#instance?.backgroundThread.sendGlobalEvent(eventName, params);
+    }
+    /**
+     * @public
+     * @method
+     * reload the current page
+     */
+    reload() {
+        this.removeAttribute('ssr');
+        this.#render();
+    }
+    /**
+     * @override
+     * "false" value will be omitted
+     *
+     * {@inheritdoc HTMLElement.setAttribute}
+     */
+    setAttribute(qualifiedName, value) {
+        if (value === 'false') {
+            this.removeAttribute(qualifiedName);
+        }
+        else {
+            super.setAttribute(qualifiedName, value);
+        }
+    }
+    /**
+     * @private
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            switch (name) {
+                case 'url':
+                    this.#url = newValue;
+                    break;
+                case 'global-props':
+                    this.#globalProps = JSON.parse(newValue);
+                    break;
+                case 'init-data':
+                    this.#initData = JSON.parse(newValue);
+                    break;
+            }
+        }
+    }
+    injectStyleRules;
+    /**
+     * @private
+     */
+    disconnectedCallback() {
+        /* TODO:
+         * Await async disposal before re-rendering to prevent concurrent instance mutations.
+    
+            Currently disconnectedCallback() triggers asyncDispose() without awaiting, allowing #render() to immediately create a new instance while the old one is still cleaning up on the background thread. This causes both instances to render into the shadowRoot concurrently, producing multiple page elements.
+    
+            The basic-reload-page-only-one test confirms this issue by checking that exactly one page element exists after reload. The disposal must complete before the new instance begins rendering.
+    
+            Extract an async #disposeInstance() method that marks the old page as disposed, awaits the instance cleanup, clears the shadowRoot, and resets adoptedStyleSheets to prevent stylesheet accumulation. Then await this in the microtask before instantiating the new LynxViewInstance.
+    
+            This also fixes a secondary bug where lynxGroupId is referenced before declaration.
+         */
+        this.shadowRoot?.querySelector('[part="page"]')
+            ?.setAttribute(lynxDisposedAttribute, '');
+        this.#instance?.[Symbol.asyncDispose]();
+        if (this.shadowRoot) {
+            this.shadowRoot.innerHTML = '';
+        }
+        this.#instance = undefined;
+    }
+    /**
+     * @#the flag to group all changes into one render operation
+     */
+    #rendering = false;
+    /**
+     * @private
+     */
+    #render() {
+        if (!this.#rendering && this.#connected) {
+            this.#rendering = true;
+            if (!this.shadowRoot) {
+                this.attachShadow({ mode: 'open' });
+            }
+            if (this.#instance) {
+                this.disconnectedCallback();
+            }
+            const mtsRealmPromise = createIFrameRealm(this.shadowRoot);
+            queueMicrotask(async () => {
+                if (this.injectStyleRules && this.injectStyleRules.length > 0) {
+                    const styleSheet = new CSSStyleSheet();
+                    for (const rule of this.injectStyleRules) {
+                        styleSheet.insertRule(rule);
+                    }
+                    this.shadowRoot.adoptedStyleSheets = this.shadowRoot
+                        .adoptedStyleSheets.concat(styleSheet);
+                }
+                const mtsRealm = await mtsRealmPromise;
+                if (this.#url) {
+                    const lynxViewInstance = import(
+                    /* webpackChunkName: "web-core-main-chunk" */
+                    /* webpackFetchPriority: "high" */
+                    './LynxViewInstance.js').then(({ LynxViewInstance }) => {
+                        return new LynxViewInstance(this, this.initData, this.globalProps, this.#url, this.shadowRoot, mtsRealm, lynxGroupId, this.nativeModulesMap, this.napiModulesMap, this.#initI18nResources);
+                    });
+                    templateManager.fetchBundle(this.#url, lynxViewInstance);
+                    const lynxGroupId = this.lynxGroupId;
+                    this.#instance = await lynxViewInstance;
+                    this.#rendering = false;
+                }
+            });
+        }
+    }
+    /**
+     * @private
+     */
+    connectedCallback() {
+        if (this.url) {
+            this.#url = this.url;
+        }
+        this.#connected = true;
+        this.#render();
+    }
+}
+if (customElements.get(LynxViewElement.tag)) {
+    console.error(`[${LynxViewElement.tag}] has already been defined`);
+}
+else {
+    customElements.define(LynxViewElement.tag, LynxViewElement);
+}
+//# sourceMappingURL=LynxView.js.map

package/dist/client/mainthread/LynxViewInstance.d.ts

@@ -0,0 +1,56 @@
+import type { Cloneable, InitI18nResources, JSRealm, MainThreadGlobalThis, NapiModulesMap, NativeModulesMap, PageConfig } from '../../types/index.js';
+import type { DecodedStyle } from '../wasm.js';
+import { BackgroundThread } from './Background.js';
+import { I18nManager } from './I18n.js';
+import { WASMJSBinding } from './elementAPIs/WASMJSBinding.js';
+import { ExposureServices } from './ExposureServices.js';
+import type { LynxViewElement } from './LynxView.js';
+import { StyleManager } from './StyleManager.js';
+export declare const systemInfo: Readonly<{
+    pixelRatio: number;
+    pixelWidth: number;
+    pixelHeight: number;
+}>;
+export interface LynxViewConfigs {
+    templateUrl: string;
+    initData: Cloneable;
+    globalProps: Cloneable;
+    shadowRoot: ShadowRoot;
+    nativeModulesMap: NativeModulesMap;
+    napiModulesMap: NapiModulesMap;
+    tagMap: Record<string, string>;
+    lynxGroupId: number | undefined;
+    initI18nResources: InitI18nResources;
+}
+export declare class LynxViewInstance implements AsyncDisposable {
+    #private;
+    readonly parentDom: LynxViewElement;
+    readonly initData: Cloneable;
+    readonly globalprops: Cloneable;
+    readonly templateUrl: string;
+    readonly rootDom: ShadowRoot;
+    readonly mtsRealm: JSRealm;
+    readonly mainThreadGlobalThis: MainThreadGlobalThis;
+    readonly mtsWasmBinding: WASMJSBinding;
+    readonly backgroundThread: BackgroundThread;
+    readonly i18nManager: I18nManager;
+    readonly exposureServices: ExposureServices;
+    readonly webElementsLoadingPromises: Promise<void>[];
+    readonly styleReadyPromise: Promise<void>;
+    readonly styleReadyResolve: () => void;
+    styleManager?: StyleManager;
+    lepusCodeUrls: Map<string, Record<string, string>>;
+    constructor(parentDom: LynxViewElement, initData: Cloneable, globalprops: Cloneable, templateUrl: string, rootDom: ShadowRoot, mtsRealm: JSRealm, lynxGroupId: number | undefined, nativeModulesMap?: NativeModulesMap, napiModulesMap?: NapiModulesMap, initI18nResources?: InitI18nResources);
+    onPageConfigReady(config: PageConfig): void;
+    onStyleInfoReady(styleInfo: DecodedStyle, currentUrl: string): void;
+    onMTSScriptsLoaded(currentUrl: string, isLazy: boolean): void;
+    onMTSScriptsExecuted(): Promise<void>;
+    onBTSScriptsLoaded(url: string): Promise<void>;
+    loadWebElement(id: number): void;
+    loadUnknownElement(tagName: string): void;
+    queryComponent(url: string): Promise<unknown>;
+    updateData(data: Cloneable, processorName?: string): Promise<void>;
+    updateGlobalProps(data: Cloneable): Promise<void>;
+    reportError(error: Error, release: string, fileName: string): void;
+    [Symbol.asyncDispose](): Promise<void>;
+}

package/dist/client/mainthread/LynxViewInstance.js

@@ -0,0 +1,196 @@
+import { loadUnknownElementEventName, systemInfoBase, } from '../../constants.js';
+import { BackgroundThread } from './Background.js';
+import { I18nManager } from './I18n.js';
+import { WASMJSBinding } from './elementAPIs/WASMJSBinding.js';
+import { ExposureServices } from './ExposureServices.js';
+import { createElementAPI } from './elementAPIs/createElementAPI.js';
+import { createMainThreadGlobalAPIs } from './createMainThreadGlobalAPIs.js';
+import { templateManager } from './TemplateManager.js';
+import { loadAllWebElements, loadWebElement, } from '../webElementsDynamicLoader.js';
+import { StyleManager } from './StyleManager.js';
+const pixelRatio = window.devicePixelRatio;
+const screenWidth = window.screen.availWidth * pixelRatio;
+const screenHeight = window.screen.availHeight * pixelRatio;
+export const systemInfo = Object.freeze({
+    ...systemInfoBase,
+    // some information only available on main thread, we should read and pass to worker
+    pixelRatio,
+    pixelWidth: screenWidth,
+    pixelHeight: screenHeight,
+});
+export class LynxViewInstance {
+    parentDom;
+    initData;
+    globalprops;
+    templateUrl;
+    rootDom;
+    mtsRealm;
+    mainThreadGlobalThis;
+    mtsWasmBinding;
+    backgroundThread;
+    i18nManager;
+    exposureServices;
+    webElementsLoadingPromises = [];
+    styleReadyPromise;
+    styleReadyResolve;
+    styleManager;
+    #renderPageFunction = null;
+    #queryComponentCache = new Map();
+    #pageConfig;
+    #nativeModulesMap;
+    #napiModulesMap;
+    lepusCodeUrls = new Map();
+    constructor(parentDom, initData, globalprops, templateUrl, rootDom, mtsRealm, lynxGroupId, nativeModulesMap = {}, napiModulesMap = {}, initI18nResources) {
+        this.parentDom = parentDom;
+        this.initData = initData;
+        this.globalprops = globalprops;
+        this.templateUrl = templateUrl;
+        this.rootDom = rootDom;
+        this.mtsRealm = mtsRealm;
+        this.#nativeModulesMap = nativeModulesMap;
+        this.#napiModulesMap = napiModulesMap;
+        let resolve;
+        const promise = new Promise((res) => {
+            resolve = res;
+        });
+        this.styleReadyPromise = promise;
+        this.styleReadyResolve = resolve;
+        this.parentDom.style.display = 'none';
+        this.mainThreadGlobalThis = mtsRealm.globalWindow;
+        this.backgroundThread = new BackgroundThread(lynxGroupId, this);
+        this.i18nManager = new I18nManager(this.backgroundThread, this.rootDom, initI18nResources);
+        this.mtsWasmBinding = new WASMJSBinding(this);
+        this.exposureServices = new ExposureServices(this);
+        this.backgroundThread.markTiming('create_lynx_start');
+    }
+    onPageConfigReady(config) {
+        if (this.#pageConfig) {
+            return;
+        }
+        // create element APIs
+        this.#pageConfig = config;
+        const enableCSSSelector = config['enableCSSSelector'] == 'true';
+        const defaultDisplayLinear = config['defaultDisplayLinear'] == 'true';
+        const defaultOverflowVisible = config['defaultOverflowVisible'] == 'true';
+        this.styleManager = new StyleManager(this.rootDom);
+        Object.assign(this.mtsRealm.globalWindow, createElementAPI(this.templateUrl, this.rootDom, this.mtsWasmBinding, enableCSSSelector, defaultDisplayLinear, defaultOverflowVisible), createMainThreadGlobalAPIs(this));
+        Object.defineProperty(this.mainThreadGlobalThis, 'renderPage', {
+            get: () => {
+                return this.#renderPageFunction;
+            },
+            set: (v) => {
+                this.#renderPageFunction = v;
+                this.onMTSScriptsExecuted();
+            },
+            configurable: true,
+            enumerable: true,
+        });
+    }
+    onStyleInfoReady(styleInfo, currentUrl) {
+        this.styleManager?.pushStyleSheet(styleInfo, currentUrl === this.templateUrl ? undefined : currentUrl);
+        this.parentDom.style.display = 'flex';
+        this.styleReadyResolve();
+    }
+    onMTSScriptsLoaded(currentUrl, isLazy) {
+        this.backgroundThread.markTiming('lepus_execute_start');
+        const urlMap = templateManager.getTemplate(currentUrl)
+            ?.lepusCode;
+        this.lepusCodeUrls.set(currentUrl, urlMap);
+        if (!isLazy) {
+            this.mtsRealm.loadScript(urlMap['root']);
+        }
+    }
+    async onMTSScriptsExecuted() {
+        this.backgroundThread.markTiming('lepus_execute_end');
+        if (!templateManager.getTemplate(this.templateUrl)?.elementTemplates) {
+            this.webElementsLoadingPromises.push(loadAllWebElements());
+        }
+        await Promise.all([
+            ...this.webElementsLoadingPromises,
+            this.styleReadyPromise,
+        ]);
+        this.webElementsLoadingPromises.length = 0;
+        this.backgroundThread.markTiming('data_processor_start');
+        const processedData = this.mainThreadGlobalThis.processData
+            ? this.mainThreadGlobalThis.processData?.(this.initData)
+            : this.initData;
+        this.backgroundThread.markTiming('data_processor_end');
+        this.backgroundThread.startWebWorker(processedData, this.globalprops, templateManager.getTemplate(this.templateUrl).config.cardType, templateManager.getTemplate(this.templateUrl)?.customSections, this.#nativeModulesMap, this.#napiModulesMap);
+        this.#renderPageFunction?.(processedData);
+        this.mainThreadGlobalThis.__FlushElementTree();
+    }
+    async onBTSScriptsLoaded(url) {
+        const btsUrls = templateManager.getTemplate(url)
+            ?.backgroundCode;
+        await this.backgroundThread.updateBTSChunk(url, btsUrls);
+        this.backgroundThread.startBTS();
+    }
+    loadWebElement(id) {
+        const loadPromise = loadWebElement(id);
+        if (loadPromise) {
+            this.webElementsLoadingPromises.push(loadPromise);
+        }
+    }
+    loadUnknownElement(tagName) {
+        if (tagName.includes('-') && !customElements.get(tagName)) {
+            this.rootDom.dispatchEvent(new CustomEvent(loadUnknownElementEventName, {
+                detail: {
+                    tagName,
+                },
+            }));
+            this.webElementsLoadingPromises.push(customElements.whenDefined(tagName).then(() => { }));
+        }
+    }
+    queryComponent(url) {
+        if (this.#queryComponentCache.has(url)) {
+            return this.#queryComponentCache.get(url);
+        }
+        const promise = templateManager.fetchBundle(url, Promise.resolve(this), {
+            enableCSSSelector: this.#pageConfig['enableCSSSelector'],
+        })
+            .then(async () => {
+            const urlMap = this.lepusCodeUrls.get(url);
+            const rootUrl = urlMap?.['root'];
+            if (!rootUrl) {
+                throw new Error(`[lynx-web] Missing root URL for component: ${url}`);
+            }
+            let lepusRootChunkExport = await this.mtsRealm.loadScript(rootUrl);
+            lepusRootChunkExport = this.mainThreadGlobalThis.processEvalResult?.(lepusRootChunkExport, url);
+            return lepusRootChunkExport;
+        });
+        this.#queryComponentCache.set(url, promise);
+        return promise;
+    }
+    async updateData(data, processorName) {
+        const processedData = this.mainThreadGlobalThis.processData
+            ? this.mainThreadGlobalThis.processData(data, processorName)
+            : data;
+        this.mainThreadGlobalThis.updatePage?.(processedData, { processorName });
+        await this.backgroundThread.updateData(processedData, { processorName });
+    }
+    async updateGlobalProps(data) {
+        await this.backgroundThread.updateGlobalProps(data);
+    }
+    reportError(error, release, fileName) {
+        this.rootDom.dispatchEvent(new CustomEvent('error', {
+            detail: {
+                sourceMap: {
+                    offset: {
+                        line: 2,
+                        col: 0,
+                    },
+                },
+                error,
+                release,
+                fileName,
+            },
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        }));
+    }
+    async [Symbol.asyncDispose]() {
+        await this.backgroundThread[Symbol.asyncDispose]();
+    }
+}
+//# sourceMappingURL=LynxViewInstance.js.map

package/dist/client/mainthread/StyleManager.d.ts

@@ -0,0 +1,15 @@
+import type { DecodedStyle } from '../wasm.js';
+/**
+ * There are two modes to manage styles:
+ * 1. CSS Selector mode: styles are injected into a <style>, the style manager won't keep track of which styles are applied to which elements.
+ *    The browser's native CSS selector engine will handle the style application.
+ * 2. Non-CSS Selector mode: styles are managed by the style manager, which keeps track of which styles are applied to which elements.
+ *    The style manager will inject styles into the style sheet of a <style> element. All classes is calculated
+ *    based on entry_name, css_id, class_name, and applied by using [unique-id="x"] selectors.
+ */
+export declare class StyleManager {
+    #private;
+    constructor(rootNode: Node);
+    updateCssOgStyle(uniqueId: number, cssId: number, classNames: DOMTokenList, entryName?: string): void;
+    pushStyleSheet(decodedStyle: DecodedStyle, entryName?: string): void;
+}