@lynx-js/web-core-wasm 0.0.3 → 0.0.5

package/binary/server/server_debug_bg.wasm.d.ts

@@ -0,0 +1,51 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const __wbg_mainthreadservercontext_free: (a: number, b: number) => void;
+export const mainthreadservercontext_add_class: (a: number, b: number, c: number, d: number) => [number, number];
+export const mainthreadservercontext_add_inline_style_raw_string_key: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
+export const mainthreadservercontext_append_child: (a: number, b: number, c: number) => void;
+export const mainthreadservercontext_create_element: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => number;
+export const mainthreadservercontext_generate_html: (a: number, b: number) => [number, number];
+export const mainthreadservercontext_get_attribute: (a: number, b: number, c: number, d: number) => [number, number];
+export const mainthreadservercontext_get_attributes: (a: number, b: number) => [number, number, number];
+export const mainthreadservercontext_get_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number) => void;
+export const mainthreadservercontext_get_page_css: (a: number) => [number, number];
+export const mainthreadservercontext_get_tag: (a: number, b: number) => [number, number];
+export const mainthreadservercontext_new: (a: number, b: number, c: number) => number;
+export const mainthreadservercontext_push_style_sheet: (a: number, b: number, c: number, d: number) => [number, number];
+export const mainthreadservercontext_remove_attribute: (a: number, b: number, c: number, d: number) => void;
+export const mainthreadservercontext_set_attribute: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
+export const mainthreadservercontext_set_css_id: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number];
+export const mainthreadservercontext_set_inline_styles_in_str: (a: number, b: number, c: number, d: number) => number;
+export const mainthreadservercontext_set_inline_styles_number_key: (a: number, b: number, c: number, d: number, e: number) => void;
+export const mainthreadservercontext_update_css_og_style: (a: number, b: number, c: number, d: number) => [number, number];
+export const __wbg_rawstyleinfo_free: (a: number, b: number) => void;
+export const __wbg_rule_free: (a: number, b: number) => void;
+export const __wbg_ruleprelude_free: (a: number, b: number) => void;
+export const __wbg_selector_free: (a: number, b: number) => void;
+export const rawstyleinfo_append_import: (a: number, b: number, c: number) => void;
+export const rawstyleinfo_new: () => number;
+export const rawstyleinfo_push_rule: (a: number, b: number, c: number) => void;
+export const rule_new: (a: number, b: number) => [number, number, number];
+export const rule_push_declaration: (a: number, b: number, c: number, d: number, e: number) => void;
+export const rule_push_rule_children: (a: number, b: number) => void;
+export const rule_set_prelude: (a: number, b: number) => void;
+export const ruleprelude_new: () => number;
+export const ruleprelude_push_selector: (a: number, b: number) => void;
+export const selector_new: () => number;
+export const selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number) => [number, number];
+export const decode_style_info: (a: any, b: number, c: number, d: number) => [number, number, number];
+export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number) => [number, number, number];
+export const get_font_face_content: (a: any) => [number, number, number, number];
+export const get_style_content: (a: any) => [number, number, number, number];
+export const __wbg_stylesheetresource_free: (a: number, b: number) => void;
+export const stylesheetresource_new: (a: any, b: any) => [number, number, number];
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+export const __wbindgen_exn_store: (a: number) => void;
+export const __externref_table_alloc: () => number;
+export const __wbindgen_externrefs: WebAssembly.Table;
+export const __externref_table_dealloc: (a: number) => void;
+export const __wbindgen_free: (a: number, b: number, c: number) => void;
+export const __wbindgen_start: () => void;

package/dist/client/decodeWorker/decode.worker.js

@@ -1,10 +1,11 @@
-import { TemplateSectionLabel, MagicHeader } from '../../constants.js';
+import { TemplateSectionLabel, MagicHeader0, MagicHeader1, } from '../../constants.js';
 import { wasmInstance } from '../wasm.js';
 let wasmModuleLoadedResolve;
 const wasmModuleLoadedPromise = new Promise((resolve) => {
     wasmModuleLoadedResolve = resolve;
 });
 import { loadStyleFromJSON } from './cssLoader.js';
+import { decodeBinaryMap } from '../../common/decodeUtils.js';
 class StreamReader {
     #reader;
     #buffer = new Uint8Array(0);
@@ -66,41 +67,6 @@ function decodeJSONMap(buffer) {
     }
     return JSON.parse(jsonString);
 }
-function decodeBinaryMap(buffer) {
-    const view = new DataView(buffer.buffer, buffer.byteOffset, buffer.byteLength);
-    let offset = 0;
-    if (buffer.byteLength < 4) {
-        throw new Error('Buffer too short for count');
-    }
-    const count = view.getUint32(offset, true);
-    offset += 4;
-    const result = {};
-    const decoder = new TextDecoder();
-    for (let i = 0; i < count; i++) {
-        if (buffer.byteLength < offset + 4) {
-            throw new Error('Buffer too short for key length');
-        }
-        const keyLen = view.getUint32(offset, true);
-        offset += 4;
-        if (buffer.byteLength < offset + keyLen) {
-            throw new Error('Buffer too short for key');
-        }
-        const key = decoder.decode(buffer.subarray(offset, offset + keyLen));
-        offset += keyLen;
-        if (buffer.byteLength < offset + 4) {
-            throw new Error('Buffer too short for value length');
-        }
-        const valLen = view.getUint32(offset, true);
-        offset += 4;
-        if (buffer.byteLength < offset + valLen) {
-            throw new Error('Buffer too short for value');
-        }
-        const val = buffer.subarray(offset, offset + valLen);
-        offset += valLen;
-        result[key] = val;
-    }
-    return result;
-}
 self.onmessage = async (event) => {
     const data = event.data;
     if (data.type === 'init') {
@@ -146,8 +112,9 @@ async function handleStream(url, reader, overrideConfig) {
         return;
     }
     const view = new DataView(headerBytes.buffer, headerBytes.byteOffset, headerBytes.byteLength);
-    const magic = view.getBigUint64(0, true); // Little Endian
-    if (magic !== BigInt(MagicHeader)) {
+    const magic0 = view.getUint32(0, true);
+    const magic1 = view.getUint32(4, true);
+    if (magic0 !== MagicHeader0 || magic1 !== MagicHeader1) {
         throw new Error('Invalid Magic Header');
     }
     // 2. Check Version
@@ -205,9 +172,16 @@ async function handleStream(url, reader, overrideConfig) {
                 const isLazy = config['isLazy'] === 'true';
                 const blobMap = {};
                 for (const [key, code] of Object.entries(codeMap)) {
-                    const prefix = `(function(){ "use strict"; const navigator=void 0,postMessage=void 0,window=void 0; ${isLazy ? 'module.exports=' : ''} `;
-                    const suffix = ` \n })()\n//# sourceURL=${url}\n`;
-                    const blob = new Blob([prefix, code, suffix], {
+                    const blob = new Blob([
+                        '//# allFunctionsCalledOnLoad\n(function(){ "use strict"; const navigator=void 0,postMessage=void 0,window=void 0; ',
+                        isLazy ? 'module.exports=' : '',
+                        code,
+                        ' \n })()\n//# sourceURL=',
+                        url,
+                        '/',
+                        key,
+                        '\n',
+                    ], {
                         type: 'text/javascript; charset=utf-8',
                     });
                     blobMap[key] = URL.createObjectURL(blob);
@@ -229,8 +203,13 @@ async function handleStream(url, reader, overrideConfig) {
                 const codeMap = decodeBinaryMap(content);
                 const blobMap = {};
                 for (const [key, code] of Object.entries(codeMap)) {
-                    const suffix = `//# sourceURL=${url}/${key}`;
-                    const blob = new Blob([code, suffix], {
+                    const blob = new Blob([
+                        code,
+                        '//# sourceURL=',
+                        url,
+                        '/',
+                        key,
+                    ], {
                         type: 'text/javascript; charset=utf-8',
                     });
                     blobMap[key] = URL.createObjectURL(blob);
@@ -281,10 +260,10 @@ async function handleJSON(json, url, overrideConfig) {
         for (const [key, code] of Object.entries(json.lepusCode)) {
             if (typeof code !== 'string')
                 continue;
-            const prefix = `(function(){ "use strict"; const navigator=void 0,postMessage=void 0,window=void 0; ${isLazy ? 'module.exports=' : ''} `;
+            const prefix = `//# allFunctionsCalledOnLoad\n(function(){ "use strict"; const navigator=void 0,postMessage=void 0,window=void 0; ${isLazy ? 'module.exports=' : ''} `;
             const suffix = ` \n })()\n//# sourceURL=${url}/${key}\n`;
             const blob = new Blob([prefix, code, suffix], {
-                type: 'text/javascript;',
+                type: 'text/javascript; charset=utf-8',
             });
             blobMap[key] = URL.createObjectURL(blob);
         }

package/dist/client/mainthread/Background.js

@@ -51,8 +51,7 @@ export class BackgroundThread {
     constructor(lynxGroupId, lynxViewInstance) {
         this.#lynxGroupId = lynxGroupId;
         this.#lynxViewInstance = lynxViewInstance;
-        const btsRpc = new Rpc(undefined, 'main-to-bg');
-        this.#rpc = btsRpc;
+        this.#rpc = new Rpc(undefined, 'main-to-bg');
         this.jsContext = new LynxCrossThreadContext({
             rpc: this.#rpc,
             receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,

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

@@ -34,14 +34,12 @@ export declare class LynxViewInstance implements AsyncDisposable {
     readonly i18nManager: I18nManager;
     readonly exposureServices: ExposureServices;
     readonly webElementsLoadingPromises: Promise<void>[];
-    readonly styleReadyPromise: Promise<void>;
-    readonly styleReadyResolve: () => void;
     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(currentUrl: string): void;
-    onMTSScriptsLoaded(currentUrl: string, isLazy: boolean): void;
-    onMTSScriptsExecuted(): Promise<void>;
+    onMTSScriptsLoaded(currentUrl: string, isLazy: boolean): Promise<void>;
+    onMTSScriptsExecuted(): void;
     onBTSScriptsLoaded(url: string): Promise<void>;
     loadUnknownElement(tagName: string): void;
     queryComponent(url: string): Promise<unknown>;

package/dist/client/mainthread/LynxViewInstance.js

@@ -7,7 +7,18 @@ import { createElementAPI } from './elementAPIs/createElementAPI.js';
 import { createMainThreadGlobalAPIs } from './createMainThreadGlobalAPIs.js';
 import { templateManager } from './TemplateManager.js';
 import { loadAllWebElements } from '../webElementsDynamicLoader.js';
-import { templateManagerWasm } from '../wasm.js';
+// @ts-expect-error
+import IN_SHADOW_CSS_MODERN from '../../../css/in_shadow.css?inline';
+loadAllWebElements().catch((e) => {
+    console.error('[lynx-web] Failed to load web elements', e);
+});
+const IN_SHADOW_CSS = URL.createObjectURL(new Blob([IN_SHADOW_CSS_MODERN], { type: 'text/css' }));
+const linkElement = document.createElement('link');
+linkElement.rel = 'stylesheet';
+linkElement.href = IN_SHADOW_CSS;
+linkElement.type = 'text/css';
+linkElement.fetchPriority = 'high';
+linkElement.blocking = 'render';
 const pixelRatio = window.devicePixelRatio;
 const screenWidth = window.screen.availWidth * pixelRatio;
 const screenHeight = window.screen.availHeight * pixelRatio;
@@ -31,9 +42,6 @@ export class LynxViewInstance {
     i18nManager;
     exposureServices;
     webElementsLoadingPromises = [];
-    styleReadyPromise;
-    styleReadyResolve;
-    #renderPageFunction = null;
     #queryComponentCache = new Map();
     #pageConfig;
     #nativeModulesMap;
@@ -46,15 +54,9 @@ export class LynxViewInstance {
         this.templateUrl = templateUrl;
         this.rootDom = rootDom;
         this.mtsRealm = mtsRealm;
+        this.rootDom.append(linkElement.cloneNode(false));
         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);
@@ -72,41 +74,27 @@ export class LynxViewInstance {
         const defaultDisplayLinear = config['defaultDisplayLinear'] == 'true';
         const defaultOverflowVisible = config['defaultOverflowVisible'] == 'true';
         Object.assign(this.mtsRealm.globalWindow, createElementAPI(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(currentUrl) {
         if (this.mtsWasmBinding.wasmContext) {
-            this.mtsWasmBinding.wasmContext.push_style_sheet(templateManagerWasm, currentUrl, this.templateUrl === currentUrl);
+            const resource = templateManager.getStyleSheet(currentUrl);
+            if (resource) {
+                this.mtsWasmBinding.wasmContext.push_style_sheet(resource, this.templateUrl === currentUrl ? undefined : currentUrl);
+            }
         }
-        this.parentDom.style.display = 'flex';
-        this.styleReadyResolve();
     }
-    onMTSScriptsLoaded(currentUrl, isLazy) {
+    async 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']);
+            await this.mtsRealm.loadScript(urlMap['root']);
+            this.onMTSScriptsExecuted();
         }
     }
-    async onMTSScriptsExecuted() {
+    onMTSScriptsExecuted() {
         this.backgroundThread.markTiming('lepus_execute_end');
-        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
@@ -114,7 +102,7 @@ export class LynxViewInstance {
             : 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.renderPage?.(processedData);
         this.mainThreadGlobalThis.__FlushElementTree();
     }
     async onBTSScriptsLoaded(url) {

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

@@ -6,5 +6,6 @@ export declare class TemplateManager {
     fetchBundle(url: string, lynxViewInstancePromise: Promise<LynxViewInstance>, overrideConfig?: Record<string, string>): Promise<void>;
     createTemplate(url: string): void;
     getTemplate(url: string): DecodedTemplate | undefined;
+    getStyleSheet(url: string): any;
 }
 export declare const templateManager: TemplateManager;

package/dist/client/mainthread/TemplateManager.js

@@ -138,9 +138,9 @@ export class TemplateManager {
         }
     }
     async #handleSection(msg, instancePromise) {
-        const [instance, templateManagerWasm,] = await Promise.all([
+        const [instance, StyleSheetResource,] = await Promise.all([
             instancePromise,
-            wasm.then((wasm) => (wasm.templateManagerWasm)),
+            wasm.then((wasm) => (wasm.wasmInstance.StyleSheetResource)),
         ]);
         const { label, data, url, config } = msg;
         switch (label) {
@@ -151,7 +151,11 @@ export class TemplateManager {
                 break;
             }
             case TemplateSectionLabel.StyleInfo: {
-                templateManagerWasm.add_style_info(url, new Uint8Array(data), document);
+                const resource = new StyleSheetResource(new Uint8Array(data), document);
+                const template = this.#templates.get(url);
+                if (template) {
+                    template.styleSheet = resource;
+                }
                 instance.onStyleInfoReady(url);
                 break;
             }
@@ -193,12 +197,16 @@ export class TemplateManager {
                         URL.revokeObjectURL(blobUrl);
                     }
                 }
+                if (template.styleSheet) {
+                    template.styleSheet.free();
+                }
             }
             this.#templates.delete(url);
         }
         this.#templates.set(url, {});
     }
     #removeTemplate(url) {
+        this.createTemplate(url); // This actually clears it in current logic
         this.#templates.delete(url);
     }
     #setConfig(url, config) {
@@ -228,6 +236,9 @@ export class TemplateManager {
     getTemplate(url) {
         return this.#templates.get(url);
     }
+    getStyleSheet(url) {
+        return this.#templates.get(url)?.styleSheet;
+    }
 }
 export const templateManager = new TemplateManager();
 //# sourceMappingURL=TemplateManager.js.map

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

@@ -1,16 +1,9 @@
 import { wasmInstance } from '../../wasm.js';
 import { LYNX_TAG_TO_HTML_TAG_MAP, LYNX_TIMING_FLAG_ATTRIBUTE, lynxDefaultDisplayLinearAttribute, lynxDefaultOverflowVisibleAttribute, lynxDisposedAttribute, lynxEntryNameAttribute, uniqueIdSymbol, } 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';
-// @ts-expect-error
-import IN_SHADOW_CSS_MODERN from '../../../../css/in_shadow.css?inline';
-const IN_SHADOW_CSS = URL.createObjectURL(new Blob([IN_SHADOW_CSS_MODERN], { type: 'text/css' }));
-const linkElement = document.createElement('link');
-linkElement.rel = 'stylesheet';
-linkElement.href = IN_SHADOW_CSS;
-linkElement.type = 'text/css';
+import { requestIdleCallbackImpl } from '../utils/requestIdleCallback.js';
 const { MainThreadWasmContext, add_inline_style_raw_string_key, set_inline_styles_number_key, set_inline_styles_in_str, get_inline_styles_in_key_value_vec, } = wasmInstance;
 export function createElementAPI(rootDom, mtsBinding, config_enable_css_selector, config_default_display_linear, config_default_overflow_visible) {
-    rootDom.append(linkElement.cloneNode(false));
     const wasmContext = new MainThreadWasmContext(rootDom, mtsBinding, config_enable_css_selector);
     mtsBinding.wasmContext = wasmContext;
     let page = undefined;
@@ -303,7 +296,7 @@ export function createElementAPI(rootDom, mtsBinding, config_enable_css_selector
                 backgroundThread.flushTimingInfo();
             }
             let timingFlagsAll = timingFlags.concat(wasmContext.take_timing_flags());
-            requestAnimationFrame(() => {
+            requestIdleCallbackImpl(() => {
                 mtsBinding.postTimingFlags(timingFlagsAll, pipelineId);
             });
             timingFlags.length = 0;

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

@@ -0,0 +1 @@
+export declare const requestIdleCallbackImpl: typeof requestIdleCallback | ((callback: () => void) => NodeJS.Timeout);

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

@@ -0,0 +1,5 @@
+// Safari doesn't support requestIdleCallback
+export const requestIdleCallbackImpl = typeof requestIdleCallback === 'undefined'
+    ? (callback) => setTimeout(callback, 16)
+    : requestIdleCallback;
+//# sourceMappingURL=requestIdleCallback.js.map

package/dist/client/wasm.d.ts

@@ -1,3 +1,2 @@
 export declare const wasmInstance: typeof import("../../binary/client/client.js"), wasmModule: WebAssembly.Module | undefined;
-export declare const templateManagerWasm: import("../../binary/client/client.js").TemplateManager | undefined;
 export type MainThreadWasmContext = typeof import('../../binary/client/client.js').MainThreadWasmContext;

package/dist/client/wasm.js

@@ -32,7 +32,4 @@ export const [wasmInstance, wasmModule] = await wasmLoaded;
 if (!isWorker) {
     wasmInstance.initSync({ module: wasmModule });
 }
-export const templateManagerWasm = isWorker
-    ? undefined
-    : new wasmInstance.TemplateManager();
 //# sourceMappingURL=wasm.js.map