@lynx-js/web-mainthread-apis-canary 0.15.4-canary-20250801-47e08f2e → 0.15.4-canary-20250801-22ca433e

package/CHANGELOG.md

@@ -1,9 +1,11 @@
 # @lynx-js/web-mainthread-apis
 
-## 0.15.4-canary-20250801083609-47e08f2edaa4616a2183e861893a29cf6cd28245
+## 0.15.4-canary-20250801085747-22ca433eb96b39724c6eb47ce0a938d291bbdef2
 
 ### 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
@@ -20,9 +22,9 @@
 
   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 []:
-  - @lynx-js/web-constants@0.15.4-canary-20250801083609-47e08f2edaa4616a2183e861893a29cf6cd28245
-  - @lynx-js/web-style-transformer@0.15.4-canary-20250801083609-47e08f2edaa4616a2183e861893a29cf6cd28245
+- Updated dependencies [[`22ca433`](https://github.com/lynx-family/lynx-stack/commit/22ca433eb96b39724c6eb47ce0a938d291bbdef2)]:
+  - @lynx-js/web-constants@0.15.4-canary-20250801085747-22ca433eb96b39724c6eb47ce0a938d291bbdef2
+  - @lynx-js/web-style-transformer@0.15.4-canary-20250801085747-22ca433eb96b39724c6eb47ce0a938d291bbdef2
 
 ## 0.15.3
 

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

@@ -20,7 +20,7 @@ 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 initWasmPromise;
         const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url]) => {
@@ -50,6 +50,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
             tagMap,
             browserConfig,
             customSections,
+            elementTemplate,
             globalProps,
             pageConfig,
             styleInfo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis-canary",
-  "version": "0.15.4-canary-20250801-47e08f2e",
+  "version": "0.15.4-canary-20250801-22ca433e",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,8 +24,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.15.4-canary-20250801-47e08f2e",
-    "@lynx-js/web-style-transformer": "npm:@lynx-js/web-style-transformer-canary@0.15.4-canary-20250801-47e08f2e",
+    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.15.4-canary-20250801-22ca433e",
+    "@lynx-js/web-style-transformer": "npm:@lynx-js/web-style-transformer-canary@0.15.4-canary-20250801-22ca433e",
     "hyphenate-style-name": "^1.1.0"
   }
 }