@lynx-js/web-mainthread-apis 0.14.2 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.15.1
+
+### Patch Changes
+
+- Updated dependencies [[`e59138b`](https://github.com/lynx-family/lynx-stack/commit/e59138b3c2285ce83a2927ee046671b9015acdfd)]:
+  - @lynx-js/web-style-transformer@0.3.3
+  - @lynx-js/web-constants@0.15.1
+
+## 0.15.0
+
+### Minor Changes
+
+- refactor: move exposure system to web-core ([#1254](https://github.com/lynx-family/lynx-stack/pull/1254))
+
+  **THIS IS A BREAKING CHANGE**
+
+  **You'll need to upgrade your @lynx-js/web-elements to >= 0.8.0**
+
+  For SSR and better performance, we moved the lynx's exposure system from web-element to web-core.
+
+  Before this commit, we create Intersection observers by creating HTMLElements.
+
+  After this commit, we will create such Intersection observers after dom stabled.
+
+  Also, the setInterval for exposure has been removed, now we use an on time lazy timer for such features.
+
+### Patch Changes
+
+- Updated dependencies [[`16f402f`](https://github.com/lynx-family/lynx-stack/commit/16f402f557ba12ec34a35a1b9b00115bf576c20f), [`60095d7`](https://github.com/lynx-family/lynx-stack/commit/60095d741ae969e76a8faeb669a0fbe7e6e81f7c), [`224c653`](https://github.com/lynx-family/lynx-stack/commit/224c653f370d807281fa0a9ffbb4f4dd5c9d308e)]:
+  - @lynx-js/web-style-transformer@0.3.2
+  - @lynx-js/web-constants@0.15.0
+
 ## 0.14.2
 
 ### Patch Changes

package/dist/createMainThreadGlobalThis.d.ts

@@ -1,7 +1,7 @@
 import { type LynxTemplate, type PageConfig, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type LynxJSModule, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions } from '@lynx-js/web-constants';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
-    flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[]) => void;
+    flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[], exposureChangedElements: WebFiberElementImpl[]) => void;
     _ReportError: RpcCallType<typeof reportErrorEndpoint>;
     __OnLifecycleEvent: (lifeCycleEvent: Cloneable) => void;
     markTiming: (pipelineId: string, timingKey: string) => void;

package/dist/createMainThreadGlobalThis.js

@@ -4,10 +4,22 @@
 import { lynxUniqueIdAttribute, systemInfo, parentComponentUniqueIdAttribute, componentIdAttribute, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, lynxTagAttribute, W3cEventNameToLynx, cssIdAttribute, lynxDefaultDisplayLinearAttribute, __lynx_timing_flag, lynxDisposedAttribute, } from '@lynx-js/web-constants';
 import { globalMuteableVars } from '@lynx-js/web-constants';
 import { createMainThreadLynx } from './createMainThreadLynx.js';
-import { flattenStyleInfo, genCssContent, genCssInJsInfo, transformToWebCss, } from './utils/processStyleInfo.js';
+import { flattenStyleInfo, genCssContent, genCssOGInfo, transformToWebCss, } from './utils/processStyleInfo.js';
 import { __AddClass, __AddConfig, __AddDataset, __AddInlineStyle, __AppendElement, __ElementIsEqual, __FirstElement, __GetAttributes, __GetChildren, __GetClasses, __GetComponentID, __GetDataByKey, __GetDataset, __GetElementConfig, __GetElementUniqueID, __GetID, __GetParent, __GetTag, __InsertElementBefore, __LastElement, __NextElement, __RemoveElement, __ReplaceElement, __ReplaceElements, __SetClasses, __SetConfig, __SetCSSId, __SetDataset, __SetID, __SetInlineStyles, __UpdateComponentID, } from './pureElementPAPIs.js';
 import { createCrossThreadEvent } from './utils/createCrossThreadEvent.js';
-import { decodeCssInJs } from './utils/decodeCssInJs.js';
+import { decodeCssOG } from './utils/decodeCssOG.js';
+const exposureRelatedAttributes = new Set([
+    'exposure-id',
+    'exposure-area',
+    'exposure-screen-margin-top',
+    'exposure-screen-margin-right',
+    'exposure-screen-margin-bottom',
+    'exposure-screen-margin-left',
+    'exposure-ui-margin-top',
+    'exposure-ui-margin-right',
+    'exposure-ui-margin-bottom',
+    'exposure-ui-margin-left',
+]);
 export function createMainThreadGlobalThis(config) {
     let pageElement;
     let uniqueIdInc = 1;
@@ -22,6 +34,7 @@ export function createMainThreadGlobalThis(config) {
      */
     const varsUpdateHandlers = [];
     const lynxGlobalBindingValues = {};
+    const exposureChangedElements = new Set();
     /**
      * now create the style content
      * 1. flatten the styleInfo
@@ -32,15 +45,15 @@ export function createMainThreadGlobalThis(config) {
      */
     flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
     transformToWebCss(styleInfo);
-    const cssInJsInfo = pageConfig.enableCSSSelector
+    const cssOGInfo = pageConfig.enableCSSSelector
         ? {}
-        : genCssInJsInfo(styleInfo);
+        : genCssOGInfo(styleInfo);
     const cardStyleElement = callbacks.createElement('style');
     cardStyleElement.innerHTML = genCssContent(styleInfo, pageConfig);
     // @ts-expect-error
     rootDom.append(cardStyleElement);
     const cardStyleElementSheet = cardStyleElement.sheet;
-    const updateCSSInJsStyle = (uniqueId, newStyles) => {
+    const updateCssOGStyle = (uniqueId, newStyles) => {
         if (lynxUniqueIdToStyleRulesIndex[uniqueId] !== undefined) {
             const rule = cardStyleElementSheet
                 .cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
@@ -121,6 +134,12 @@ export function createMainThreadGlobalThis(config) {
                 element.removeEventListener(eventName, currentRegisteredHandler, {
                     capture: isCapture,
                 });
+                // remove the exposure id if the exposure-id is a placeholder value
+                const isExposure = eventName === 'uiappear'
+                    || eventName === 'uidisappear';
+                if (isExposure && element.getAttribute('exposure-id') === '-1') {
+                    mtsGlobalThis.__SetAttribute(element, 'exposure-id', null);
+                }
             }
         }
         else {
@@ -133,6 +152,12 @@ export function createMainThreadGlobalThis(config) {
                 element.addEventListener(htmlEventName, currentRegisteredHandler, {
                     capture: isCapture,
                 });
+                // add exposure id if no exposure-id is set
+                const isExposure = eventName === 'uiappear'
+                    || eventName === 'uidisappear';
+                if (isExposure && element.getAttribute('exposure-id') === null) {
+                    mtsGlobalThis.__SetAttribute(element, 'exposure-id', '-1');
+                }
             }
         }
         if (newEventHandler) {
@@ -276,6 +301,10 @@ export function createMainThreadGlobalThis(config) {
             if (key === __lynx_timing_flag && value) {
                 timingFlags.push(value);
             }
+            if (exposureRelatedAttributes.has(key)) {
+                // if the attribute is related to exposure, we need to mark the element as changed
+                exposureChangedElements.add(element);
+            }
         }
     };
     const __UpdateListCallbacks = (element, componentAtIndex, enqueueComponent) => {
@@ -306,13 +335,13 @@ export function createMainThreadGlobalThis(config) {
         const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className)
             .trim();
         element.setAttribute('class', newClassName);
-        const newStyleStr = decodeCssInJs(newClassName, cssInJsInfo, element.getAttribute(cssIdAttribute));
-        updateCSSInJsStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr);
+        const newStyleStr = decodeCssOG(newClassName, cssOGInfo, element.getAttribute(cssIdAttribute));
+        updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr);
     };
     const __SetClassesForCSSOG = (element, classNames) => {
         __SetClasses(element, classNames);
-        const newStyleStr = decodeCssInJs(classNames ?? '', cssInJsInfo, element.getAttribute(cssIdAttribute));
-        updateCSSInJsStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr ?? '');
+        const newStyleStr = decodeCssOG(classNames ?? '', cssOGInfo, element.getAttribute(cssIdAttribute));
+        updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr ?? '');
     };
     const __LoadLepusChunk = (path) => {
         const lepusModule = lepusCode[`${path}`];
@@ -333,7 +362,9 @@ export function createMainThreadGlobalThis(config) {
             // @ts-expect-error
             rootDom.append(pageElement);
         }
-        callbacks.flushElementTree(options, timingFlagsCopied);
+        const exposureChangedElementsArray = Array.from(exposureChangedElements);
+        exposureChangedElements.clear();
+        callbacks.flushElementTree(options, timingFlagsCopied, exposureChangedElementsArray);
     };
     const __GetTemplateParts = () => {
         return undefined;

package/dist/prepareMainThreadAPIs.d.ts

@@ -1,4 +1,4 @@
 import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type MainThreadGlobalThis, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources } from '@lynx-js/web-constants';
-export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, createElement: Document['createElement'], commitDocument: () => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources): {
+export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, createElement: Document['createElement'], commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources): {
     startMainThread: (config: StartMainThreadContextConfig) => Promise<MainThreadGlobalThis>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -6,6 +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();
 const moduleCache = {};
 export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
@@ -20,6 +22,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
         const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, initI18nResources, } = config;
         const { styleInfo, pageConfig, customSections, cardType, lepusCode } = template;
         markTimingInternal('decode_start');
+        await initTokenizerPromise;
         const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url]) => {
             const cachedModule = moduleCache[url];
             if (cachedModule) {
@@ -78,7 +81,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
                     mtsGlobalThis.renderPage(initData);
                     mtsGlobalThis.__FlushElementTree(undefined, {});
                 },
-                flushElementTree: async (options, timingFlags) => {
+                flushElementTree: async (options, timingFlags, exposureChangedElements) => {
                     const pipelineId = options?.pipelineOptions?.pipelineID;
                     markTimingInternal('dispatch_start', pipelineId);
                     if (isFp) {
@@ -90,7 +93,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
                     }
                     markTimingInternal('layout_start', pipelineId);
                     markTimingInternal('ui_operation_flush_start', pipelineId);
-                    await commitDocument();
+                    await commitDocument(exposureChangedElements);
                     markTimingInternal('ui_operation_flush_end', pipelineId);
                     markTimingInternal('layout_end', pipelineId);
                     markTimingInternal('dispatch_end', pipelineId);

package/dist/pureElementPAPIs.js

@@ -128,13 +128,16 @@ export const __AddClass = /*#__PURE__*/ (element, className) => {
 export const __SetInlineStyles = /*#__PURE__*/ (element, value) => {
     if (!value)
         return;
-    const { transformedStyle } = typeof value === 'string'
-        ? transformInlineStyleString(value)
-        : transformParsedStyles(Object.entries(value).map(([k, value]) => [
+    if (typeof value === 'string') {
+        element.setAttribute('style', transformInlineStyleString(value));
+    }
+    else {
+        const { transformedStyle } = transformParsedStyles(Object.entries(value).map(([k, value]) => [
             hyphenateStyleName(k),
             value,
         ]));
-    const transformedStyleStr = transformedStyle.map(([property, value]) => `${property}:${value};`).join('');
-    element.setAttribute('style', transformedStyleStr);
+        const transformedStyleStr = transformedStyle.map(([property, value]) => `${property}:${value};`).join('');
+        element.setAttribute('style', transformedStyleStr);
+    }
 };
 //# sourceMappingURL=pureElementPAPIs.js.map

package/dist/style/transformInlineStyle.d.ts

@@ -1,8 +1 @@
-export declare function transformInlineStyleString(str: string): {
-    childStyle: [string, string][];
-    transformedStyle: [string, string][];
-};
-export declare function transformParsedStyles(hyphenatedStyleObject: [property: string, value: string][]): {
-    childStyle: [string, string][];
-    transformedStyle: [string, string][];
-};
+export { transformInlineStyleString, transformParsedStyles, } from '../utils/tokenizer.js';

package/dist/style/transformInlineStyle.js

@@ -1,42 +1,5 @@
 // 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.
-// @ts-expect-error
-import * as tokenizer from 'css-tree/tokenizer';
-import { transformLynxStyles } from '@lynx-js/web-style-transformer';
-function parseStyleStringToObject(str) {
-    const hyphenNameStyles = [];
-    let beforeColonToken = true;
-    let propertyStart = 0;
-    let propertyEnd = 0;
-    let valueStart = 0;
-    let valueEnd = 0;
-    tokenizer.tokenize(str + ';', (type, start, end) => {
-        if (type === tokenizer.Semicolon || tokenizer.EOF) {
-            valueEnd = start;
-            const trimmedProperty = str.substring(propertyStart, propertyEnd).trim();
-            const trimmedValue = str.substring(valueStart, valueEnd).trim();
-            if (!beforeColonToken && trimmedValue && trimmedProperty) {
-                hyphenNameStyles.push([
-                    trimmedProperty,
-                    trimmedValue,
-                ]);
-            }
-            beforeColonToken = true;
-            propertyStart = end;
-        }
-        else if (type === tokenizer.Colon && beforeColonToken) {
-            beforeColonToken = false;
-            valueStart = end;
-            propertyEnd = start;
-        }
-    });
-    return hyphenNameStyles;
-}
-export function transformInlineStyleString(str) {
-    return transformParsedStyles(parseStyleStringToObject(str));
-}
-export function transformParsedStyles(hyphenatedStyleObject) {
-    return transformLynxStyles(hyphenatedStyleObject);
-}
+export { transformInlineStyleString, transformParsedStyles, } from '../utils/tokenizer.js';
 //# sourceMappingURL=transformInlineStyle.js.map

package/dist/utils/createExposureService.js

@@ -7,6 +7,7 @@ export function createExposureService(rootDom, postExposure) {
     let working = true;
     let exposureCache = [];
     let disexposureCache = [];
+    let delayCallback = null;
     const onScreen = new Map();
     function exposureEventHandler(ev) {
         const exposureEvent = createCrossThreadEvent(ev, ev.type);
@@ -20,19 +21,22 @@ export function createExposureService(rootDom, postExposure) {
             disexposureCache.push(exposureEvent);
             onScreen.delete(exposureID);
         }
-    }
-    setInterval(() => {
-        if (exposureCache.length > 0 || disexposureCache.length > 0) {
-            const currentExposure = exposureCache;
-            const currentDisexposure = disexposureCache;
-            exposureCache = [];
-            disexposureCache = [];
-            postExposure({
-                exposures: currentExposure,
-                disExposures: currentDisexposure,
-            });
+        if (!delayCallback) {
+            delayCallback = setTimeout(() => {
+                if (exposureCache.length > 0 || disexposureCache.length > 0) {
+                    const currentExposure = exposureCache;
+                    const currentDisexposure = disexposureCache;
+                    exposureCache = [];
+                    disexposureCache = [];
+                    postExposure({
+                        exposures: currentExposure,
+                        disExposures: currentDisexposure,
+                    });
+                }
+                delayCallback = null;
+            }, 1000 / 20);
         }
-    }, 1000 / 20);
+    }
     rootDom.addEventListener('exposure', exposureEventHandler, {
         passive: true,
     });

package/dist/utils/decodeCssOG.d.ts

@@ -0,0 +1,8 @@
+import type { CssOGInfo } from '@lynx-js/web-constants';
+/**
+ * @param classes
+ * @param styleInfo it should be flattened, which means there is no imports field in the styleInfo
+ * @param cssId
+ * @returns
+ */
+export declare function decodeCssOG(classes: string, styleInfo: CssOGInfo, cssId: string | null): string;

package/dist/utils/{decodeCssInJs.js → decodeCssOG.js}

@@ -4,7 +4,7 @@
  * @param cssId
  * @returns
  */
-export function decodeCssInJs(classes, styleInfo, cssId) {
+export function decodeCssOG(classes, styleInfo, cssId) {
     const classList = classes.split(' ').filter(e => e);
     let declarations = [];
     const currentStyleInfo = styleInfo[cssId ?? '0'];
@@ -20,4 +20,4 @@ export function decodeCssInJs(classes, styleInfo, cssId) {
     }
     return declarations.map(([property, value]) => `${property}:${value};`).join('');
 }
-//# sourceMappingURL=decodeCssInJs.js.map
+//# sourceMappingURL=decodeCssOG.js.map

package/dist/utils/processStyleInfo.d.ts

@@ -1,4 +1,4 @@
-import { type StyleInfo, type CssInJsInfo, type PageConfig } from '@lynx-js/web-constants';
+import { type StyleInfo, type CssOGInfo, type PageConfig } from '@lynx-js/web-constants';
 export declare function flattenStyleInfo(styleInfo: StyleInfo, enableCSSSelector: boolean): void;
 /**
  * apply the lynx css -> web css transformation
@@ -11,4 +11,4 @@ export declare function genCssContent(styleInfo: StyleInfo, pageConfig: PageConf
 /**
  * generate the css-in-js data
  */
-export declare function genCssInJsInfo(styleInfo: StyleInfo): CssInJsInfo;
+export declare function genCssOGInfo(styleInfo: StyleInfo): CssOGInfo;

package/dist/utils/processStyleInfo.js

@@ -2,7 +2,7 @@
 // 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 { cssIdAttribute, lynxTagAttribute, } from '@lynx-js/web-constants';
-import { transformLynxStyles } from '@lynx-js/web-style-transformer';
+import { transformParsedStyles } from './tokenizer.js';
 export function flattenStyleInfo(styleInfo, enableCSSSelector) {
     function flattenOneStyleInfo(cssId) {
         const oneInfo = styleInfo[cssId];
@@ -16,7 +16,7 @@ export function flattenStyleInfo(styleInfo, enableCSSSelector) {
                     oneInfo.rules.push(...(enableCSSSelector
                         ? flatInfo.rules
                         // when enableCSSSelector is false, need to make a shallow copy of rules.sel
-                        // otherwise updating `oneCssInfo.sel` in `genCssInJsInfo()` will affect other imported cssInfo
+                        // otherwise updating `oneCssInfo.sel` in `genCssOGInfo()` will affect other imported cssInfo
                         : flatInfo.rules.map(i => ({ ...i }))));
                 }
             }
@@ -35,7 +35,7 @@ export function transformToWebCss(styleInfo) {
     for (const cssInfos of Object.values(styleInfo)) {
         for (const rule of cssInfos.rules) {
             const { sel: selectors, decl: declarations } = rule;
-            const { transformedStyle, childStyle } = transformLynxStyles(declarations);
+            const { transformedStyle, childStyle } = transformParsedStyles(declarations);
             rule.decl = transformedStyle;
             if (childStyle.length > 0) {
                 cssInfos.rules.push({
@@ -87,9 +87,9 @@ export function genCssContent(styleInfo, pageConfig) {
 /**
  * generate the css-in-js data
  */
-export function genCssInJsInfo(styleInfo) {
+export function genCssOGInfo(styleInfo) {
     return Object.fromEntries(Object.entries(styleInfo).map(([cssId, cssInfos]) => {
-        const oneCssInJsInfo = {};
+        const oneCssOGInfo = {};
         cssInfos.rules = cssInfos.rules.filter(oneCssInfo => {
             oneCssInfo.sel = oneCssInfo.sel.filter(selectorList => {
                 const [classSelectors, pseudoClassSelectors, pseudoElementSelectors, combinator,] = selectorList;
@@ -100,12 +100,12 @@ export function genCssInJsInfo(styleInfo) {
                     && pseudoElementSelectors.length === 0
                     && combinator.length === 0) {
                     const selectorName = classSelectors[0].substring(1);
-                    const currentDeclarations = oneCssInJsInfo[selectorName];
+                    const currentDeclarations = oneCssOGInfo[selectorName];
                     if (currentDeclarations) {
                         currentDeclarations.push(...oneCssInfo.decl);
                     }
                     else {
-                        oneCssInJsInfo[selectorName] = oneCssInfo.decl;
+                        oneCssOGInfo[selectorName] = oneCssInfo.decl;
                     }
                     return false; // remove this selector from style info
                 }
@@ -113,7 +113,7 @@ export function genCssInJsInfo(styleInfo) {
             });
             return oneCssInfo.sel.length > 0;
         });
-        return [cssId, oneCssInJsInfo];
+        return [cssId, oneCssOGInfo];
     }));
 }
 //# sourceMappingURL=processStyleInfo.js.map

package/dist/utils/tokenizer.d.ts

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

package/dist/utils/tokenizer.js

@@ -0,0 +1,78 @@
+// @ts-ignore the wasm module built later than the ts code
+import init from '@lynx-js/web-style-transformer';
+let wasm;
+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);
+    if (!HEAPU16 || HEAPU16.byteLength == 0) {
+        HEAPU16 = new Uint16Array(wasm.memory.buffer);
+    }
+    for (let i = 0; i < len; i++) {
+        HEAPU16[(ptr >> 1) + i] = str.charCodeAt(i);
+    }
+    return { ptr, len };
+};
+export function transformInlineStyleString(str) {
+    const { ptr, len } = stringToUTF16(str);
+    try {
+        const transformedStyle = wasm.transform_raw_u16_inline_style_ptr(ptr, len)
+            ?? str;
+        wasm.free(ptr, len << 1);
+        return transformedStyle;
+    }
+    catch (e) {
+        wasm.free(ptr, len << 1);
+        throw e;
+    }
+}
+export function transformParsedStyles(styles) {
+    let childStyle = [];
+    let transformedStyle = [];
+    for (const [property, value] of styles) {
+        const { ptr: propertyPtr, len: propertyLen } = stringToUTF16(property);
+        const { ptr: valuePtr, len: valueLen } = stringToUTF16(value);
+        try {
+            const transformedResult = wasm
+                .transform_raw_u16_inline_style_ptr_parsed(propertyPtr, propertyLen, valuePtr, valueLen);
+            wasm.free(propertyPtr, propertyLen << 1);
+            wasm.free(valuePtr, valueLen << 1);
+            if (transformedResult) {
+                const [transformedStyleForCurrent, childStyleForCurrent] = transformedResult;
+                transformedStyle = transformedStyle.concat(transformedStyleForCurrent);
+                if (childStyleForCurrent) {
+                    childStyle = childStyle.concat(childStyleForCurrent);
+                }
+            }
+            else {
+                // If the transformation fails, we keep the original style
+                transformedStyle.push([property, value]);
+            }
+        }
+        catch (e) {
+            wasm.free(propertyPtr, propertyLen << 1);
+            wasm.free(valuePtr, valueLen << 1);
+            throw e;
+        }
+    }
+    return {
+        childStyle,
+        transformedStyle,
+    };
+}
+//# sourceMappingURL=tokenizer.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.14.2",
+  "version": "0.15.1",
   "private": false,
   "description": "",
   "keywords": [],
@@ -15,6 +15,7 @@
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
+    "binary",
     "!dist/**/*.js.map",
     "LICENSE.txt",
     "Notice.txt",
@@ -23,9 +24,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "css-tree": "^3.1.0",
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.14.2",
-    "@lynx-js/web-style-transformer": "0.3.1"
+    "@lynx-js/web-constants": "0.15.1",
+    "@lynx-js/web-style-transformer": "0.3.3"
   }
 }

package/dist/utils/decodeCssInJs.d.ts

@@ -1,8 +0,0 @@
-import type { CssInJsInfo } from '@lynx-js/web-constants';
-/**
- * @param classes
- * @param styleInfo it should be flattened, which means there is no imports field in the styleInfo
- * @param cssId
- * @returns
- */
-export declare function decodeCssInJs(classes: string, styleInfo: CssInJsInfo, cssId: string | null): string;