@lynx-js/web-mainthread-apis 0.15.2 → 0.15.4

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.15.4
+
+### Patch Changes
+
+- feat: support `__ElementFromBinary` ([#1391](https://github.com/lynx-family/lynx-stack/pull/1391))
+
+- fix: crash on chrome<96 ([#1361](https://github.com/lynx-family/lynx-stack/pull/1361))
+
+  https://github.com/wasm-bindgen/wasm-bindgen/issues/4211#issuecomment-2505965903
+
+  https://github.com/WebAssembly/binaryen/issues/7358
+
+  The rust toolchain enables WASM feature `reference types` by default.
+
+  However this feature is not supported by chromium lower than version 96
+
+  Therefore we found a workaround for it.
+
+  In this implementation we detect if browser supports `reference types` first.
+
+  If user's browser supported it, we load the wasm file with `reference types` on, otherwise we load the wasm file with `reference types` off.
+
+- Updated dependencies [[`22ca433`](https://github.com/lynx-family/lynx-stack/commit/22ca433eb96b39724c6eb47ce0a938d291bbdef2)]:
+  - @lynx-js/web-constants@0.15.4
+  - @lynx-js/web-style-transformer@0.15.4
+
+## 0.15.3
+
+### Patch Changes
+
+- Updated dependencies [[`0da5ef0`](https://github.com/lynx-family/lynx-stack/commit/0da5ef03e41f20e9f8019c6dc03cb4a38ab18854)]:
+  - @lynx-js/web-constants@0.15.3
+
 ## 0.15.2
 
 ### Patch Changes

package/dist/createMainThreadGlobalThis.d.ts

@@ -16,10 +16,11 @@ export interface MainThreadRuntimeConfig {
     callbacks: MainThreadRuntimeCallbacks;
     styleInfo: StyleInfo;
     customSections: LynxTemplate['customSections'];
+    elementTemplate: LynxTemplate['elementTemplate'];
     lepusCode: Record<string, LynxJSModule>;
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
-    rootDom: Pick<Element, 'append' | 'addEventListener'> & Partial<Pick<Element, 'querySelectorAll'>>;
+    rootDom: Pick<Element, 'append' | 'addEventListener'> & Partial<Pick<ShadowRoot, 'querySelectorAll' | 'cloneNode'>>;
     jsContext: LynxContextEventTarget;
     ssrHydrateInfo?: SSRHydrateInfo;
     ssrHooks?: SSRDehydrateHooks;

package/dist/createMainThreadGlobalThis.js

@@ -376,9 +376,69 @@ export function createMainThreadGlobalThis(config) {
     const __GetPageElement = () => {
         return pageElement;
     };
+    const templateIdToTemplate = {};
+    const createElementForElementTemplateData = (data, parentComponentUniId) => {
+        const element = __CreateElement(data.type, parentComponentUniId);
+        __SetID(element, data.id);
+        __SetClasses(element, data.class.join(' '));
+        for (const [key, value] of Object.entries(data.attributes)) {
+            __SetAttribute(element, key, value);
+        }
+        for (const [key, value] of Object.entries(data.builtinAttributes)) {
+            __SetAttribute(element, key, value);
+        }
+        for (const childData of data.children) {
+            __AppendElement(element, createElementForElementTemplateData(childData, parentComponentUniId));
+        }
+        return element;
+    };
+    const applyEventsForElementTemplate = (data, element) => {
+        const uniqueId = uniqueIdInc++;
+        element.setAttribute(lynxUniqueIdAttribute, uniqueId + '');
+        for (const event of data.events) {
+            const { type, name, value } = event;
+            __AddEvent(element, type, name, value);
+        }
+        for (let ii = 0; ii < data.children.length; ii++) {
+            const childData = data.children[ii];
+            const childElement = element.children[ii];
+            if (childData && childElement) {
+                applyEventsForElementTemplate(childData, childElement);
+            }
+        }
+    };
+    const __ElementFromBinary = (templateId, parentComponentUniId) => {
+        const elementTemplateData = config.elementTemplate[templateId];
+        if (elementTemplateData) {
+            let clonedElements;
+            if (templateIdToTemplate[templateId]) {
+                clonedElements = Array.from(templateIdToTemplate[templateId].content.cloneNode(true).children);
+            }
+            else {
+                clonedElements = elementTemplateData.map(data => createElementForElementTemplateData(data, parentComponentUniId));
+                if (rootDom.cloneNode) {
+                    const template = callbacks.createElement('template');
+                    template.content.append(...clonedElements);
+                    templateIdToTemplate[templateId] = template;
+                    rootDom.append(template);
+                    return __ElementFromBinary(templateId, parentComponentUniId);
+                }
+            }
+            for (let ii = 0; ii < clonedElements.length; ii++) {
+                const data = elementTemplateData[ii];
+                const element = clonedElements[ii];
+                if (data && element) {
+                    applyEventsForElementTemplate(data, element);
+                }
+            }
+            return clonedElements;
+        }
+        return [];
+    };
     let release = '';
     const isCSSOG = !pageConfig.enableCSSSelector;
     const mtsGlobalThis = {
+        __ElementFromBinary,
         __GetTemplateParts: rootDom.querySelectorAll
             ? __GetTemplateParts
             : undefined,

package/dist/prepareMainThreadAPIs.js

@@ -6,8 +6,8 @@ import { registerCallLepusMethodHandler } from './crossThreadHandlers/registerCa
 import { registerGetCustomSectionHandler } from './crossThreadHandlers/registerGetCustomSectionHandler.js';
 import { createMainThreadGlobalThis } from './createMainThreadGlobalThis.js';
 import { createExposureService } from './utils/createExposureService.js';
-import { initTokenizer } from './utils/tokenizer.js';
-const initTokenizerPromise = initTokenizer();
+import { initWasm } from '@lynx-js/web-style-transformer';
+const initWasmPromise = initWasm();
 const moduleCache = {};
 export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
@@ -20,9 +20,9 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
     async function startMainThread(config, ssrHydrateInfo) {
         let isFp = true;
         const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, initI18nResources, } = config;
-        const { styleInfo, pageConfig, customSections, cardType, lepusCode } = template;
+        const { styleInfo, pageConfig, customSections, cardType, lepusCode, elementTemplate, } = template;
         markTimingInternal('decode_start');
-        await initTokenizerPromise;
+        await initWasmPromise;
         const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url]) => {
             const cachedModule = moduleCache[url];
             if (cachedModule) {
@@ -50,6 +50,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
             tagMap,
             browserConfig,
             customSections,
+            elementTemplate,
             globalProps,
             pageConfig,
             styleInfo,

package/dist/utils/tokenizer.d.ts

@@ -1,4 +1,3 @@
-export declare const initTokenizer: () => Promise<void>;
 export declare function transformInlineStyleString(str: string): string;
 export declare function transformParsedStyles(styles: [string, string][]): {
     childStyle: [string, string][];

package/dist/utils/tokenizer.js

@@ -1,22 +1,5 @@
-// @ts-ignore the wasm module built later than the ts code
-import init from '@lynx-js/web-style-transformer';
-let wasm;
+import { wasm } from '@lynx-js/web-style-transformer';
 let HEAPU16;
-var ENVIRONMENT_IS_NODE = typeof process == 'object'
-    && typeof process.versions == 'object'
-    && typeof process.versions.node == 'string';
-export const initTokenizer = async () => {
-    // initialize wasm module in node.js environment
-    if (ENVIRONMENT_IS_NODE) {
-        const path = await import(/* webpackIgnore:true */ 'node:path');
-        const fs = await import(/* webpackIgnore:true */ 'node:fs/promises');
-        const wasmModuleBuffer = await fs.readFile(path.join(import.meta.dirname, '..', '..', 'node_modules', '@lynx-js', 'web-style-transformer', 'dist', 'index_bg.wasm'));
-        wasm = await init(wasmModuleBuffer);
-    }
-    else {
-        wasm = await init();
-    }
-};
 const stringToUTF16 = (str) => {
     const len = str.length;
     const ptr = wasm.malloc(len << 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.15.2",
-    "@lynx-js/web-style-transformer": "0.3.3"
+    "@lynx-js/web-constants": "0.15.4",
+    "@lynx-js/web-style-transformer": "0.15.4"
   }
 }