@lynx-js/web-mainthread-apis 0.10.1 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.12.0
+
+### Patch Changes
+
+- feat: fully support MTS ([#569](https://github.com/lynx-family/lynx-stack/pull/569))
+
+  Now use support the following usage
+
+  - mainthread event
+  - mainthread ref
+  - runOnMainThread/runOnBackground
+  - ref.current.xx
+
+- feat: support mts event with target methods ([#564](https://github.com/lynx-family/lynx-stack/pull/564))
+
+  After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler
+
+- fix: crash on removing a id attribute ([#582](https://github.com/lynx-family/lynx-stack/pull/582))
+
+- Updated dependencies [[`f1ca29b`](https://github.com/lynx-family/lynx-stack/commit/f1ca29bd766377dd46583f15e1e75bca447699cd), [`7edf478`](https://github.com/lynx-family/lynx-stack/commit/7edf478410cb57eeedc18aac6f5d3950b16c7fa8)]:
+  - @lynx-js/web-constants@0.12.0
+  - @lynx-js/web-style-transformer@0.3.0
+
+## 0.11.0
+
+### Patch Changes
+
+- feat: support mts event handler (1/n) ([#495](https://github.com/lynx-family/lynx-stack/pull/495))
+
+  now the main-thread:bind handler could be invoked. The params of the handler will be implemented later.
+
+- Updated dependencies [[`ea42e62`](https://github.com/lynx-family/lynx-stack/commit/ea42e62fbcd5c743132c3e6e7c4851770742d544), [`a0f5ca4`](https://github.com/lynx-family/lynx-stack/commit/a0f5ca4ea0895ccbaa6aa63f449f53a677a1cf73)]:
+  - @lynx-js/web-constants@0.11.0
+
 ## 0.10.1
 
 ### Patch Changes

package/dist/MainThreadLynx.d.ts

@@ -1,5 +1,6 @@
 import { type MainThreadConfig, MainThreadRuntime } from './MainThreadRuntime.js';
 export declare function createMainThreadLynx(config: MainThreadConfig, lepusRuntime: MainThreadRuntime): {
+    getJSContext(): import("@lynx-js/web-constants").LynxContextEventTarget;
     requestAnimationFrame(cb: FrameRequestCallback): number;
     cancelAnimationFrame(handler: number): void;
     __globalProps: unknown;

package/dist/MainThreadLynx.js

@@ -1,6 +1,9 @@
 import { MainThreadRuntime, } from './MainThreadRuntime.js';
 export function createMainThreadLynx(config, lepusRuntime) {
     return {
+        getJSContext() {
+            return config.jsContext;
+        },
         requestAnimationFrame(cb) {
             return requestAnimationFrame(cb);
         },
@@ -11,9 +14,9 @@ export function createMainThreadLynx(config, lepusRuntime) {
         requireModule(path) {
             // @ts-expect-error
             if (self.WorkerGlobalScope) {
-                const mainfestUrl = config.lepusCode[`/${path}`];
-                if (mainfestUrl)
-                    path = mainfestUrl;
+                const lepusChunkUrl = config.lepusCode[`${path}`];
+                if (lepusChunkUrl)
+                    path = lepusChunkUrl;
                 // @ts-expect-error
                 importScripts(path);
                 const entry = globalThis.module.exports;
@@ -24,9 +27,9 @@ export function createMainThreadLynx(config, lepusRuntime) {
             }
         },
         requireModuleAsync(path, callback) {
-            const mainfestUrl = config.lepusCode[`/${path}`];
-            if (mainfestUrl)
-                path = mainfestUrl;
+            const lepusChunkUrl = config.lepusCode[`${path}`];
+            if (lepusChunkUrl)
+                path = lepusChunkUrl;
             import(
             /* webpackIgnore: true */
             path).catch(callback).then(() => {

package/dist/MainThreadRuntime.d.ts

@@ -1,11 +1,11 @@
-import { type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type onLifecycleEventEndpoint, type RpcCallType, type postExposureEndpoint } from '@lynx-js/web-constants';
+import { type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type postExposureEndpoint, type LynxContextEventTarget } from '@lynx-js/web-constants';
 import { type MainThreadLynx } from './MainThreadLynx.js';
 import type { LynxRuntimeInfo } from './elementAPI/ElementThreadElement.js';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
     flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[]) => void;
     _ReportError: RpcCallType<typeof reportErrorEndpoint>;
-    __OnLifecycleEvent: RpcCallType<typeof onLifecycleEventEndpoint>;
+    __OnLifecycleEvent: (lifeCycleEvent: Cloneable) => void;
     markTiming: (pipelineId: string, timingKey: string) => void;
     publishEvent: RpcCallType<typeof publishEventEndpoint>;
     publicComponentEvent: RpcCallType<typeof publicComponentEventEndpoint>;
@@ -21,6 +21,7 @@ export interface MainThreadConfig {
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
     docu: Pick<Document, 'append' | 'createElement' | 'addEventListener'>;
+    jsContext: LynxContextEventTarget;
 }
 export declare const elementToRuntimeInfoMap: unique symbol;
 export declare const getElementByUniqueId: unique symbol;
@@ -74,9 +75,11 @@ export declare class MainThreadRuntime {
     processData?: ProcessDataCallback;
     renderPage: (data: unknown) => void;
     _ReportError: RpcCallType<typeof reportErrorEndpoint>;
-    __OnLifecycleEvent: RpcCallType<typeof onLifecycleEventEndpoint>;
+    __OnLifecycleEvent: (lifeCycleEvent: Cloneable) => void;
     __LoadLepusChunk: (path: string) => boolean;
     __FlushElementTree: (_subTree: unknown, options: FlushElementTreeOptions) => void;
     updatePage?: (data: Cloneable, options?: Record<string, string>) => void;
-    _updateVars?: () => void;
+    runWorklet?: (obj: unknown, event: unknown) => void;
+    private __varsUpdateHandlers;
+    set _updateVars(handler: () => void);
 }

package/dist/MainThreadRuntime.js

@@ -98,7 +98,9 @@ export class MainThreadRuntime {
                 },
                 set: (v) => {
                     this.__lynxGlobalBindingValues[nm] = v;
-                    this._updateVars?.();
+                    for (const handler of this.__varsUpdateHandlers) {
+                        handler();
+                    }
                 },
             });
         }
@@ -150,6 +152,10 @@ export class MainThreadRuntime {
         this.config.callbacks.flushElementTree(options, timingFlags);
     };
     updatePage;
-    _updateVars;
+    runWorklet;
+    __varsUpdateHandlers = [];
+    set _updateVars(handler) {
+        this.__varsUpdateHandlers.push(handler);
+    }
 }
 //# sourceMappingURL=MainThreadRuntime.js.map

package/dist/elementAPI/ElementThreadElement.d.ts

@@ -7,11 +7,17 @@ export interface LynxRuntimeInfo {
     eventHandlerMap: Record<string, {
         capture: {
             type: LynxEventType;
-            handler: string;
+            handler: string | {
+                type: 'worklet';
+                value: unknown;
+            };
         } | undefined;
         bind: {
             type: LynxEventType;
-            handler: string;
+            handler: string | {
+                type: 'worklet';
+                value: unknown;
+            };
         } | undefined;
     }>;
     componentAtIndex?: ComponentAtIndexCallback;

package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.d.ts

@@ -21,7 +21,7 @@ export declare function createAttributeAndPropertyFunctions(runtime: MainThreadR
     __GetTag: (element: HTMLElement) => string;
     __SetConfig: (element: HTMLElement, config: Record<string, any>) => void;
     __SetDataset: (element: HTMLElement, dataset: Record<string, any>) => void;
-    __SetID: (element: HTMLElement, id: string) => void;
+    __SetID: (element: HTMLElement, id: string | null) => void;
     __UpdateComponentID: (element: HTMLElement, componentID: string) => void;
     __UpdateListCallbacks: (element: HTMLElement, componentAtIndex: ComponentAtIndexCallback, enqueueComponent: EnqueueComponentCallback) => void;
     __GetConfig: (element: HTMLElement) => Record<string, import("@lynx-js/web-constants").Cloneable>;

package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js

@@ -57,7 +57,12 @@ export function createAttributeAndPropertyFunctions(runtime) {
         }
     }
     function __SetID(element, id) {
-        element.id = id;
+        if (typeof id === 'string') {
+            element.id = id;
+        }
+        else {
+            element.removeAttribute('id');
+        }
     }
     function __UpdateComponentID(element, componentID) {
         element.setAttribute(componentIdAttribute, componentID);

package/dist/elementAPI/event/eventFunctions.d.ts

@@ -1,12 +1,21 @@
-import { type LynxCrossThreadEvent, type LynxEventType } from '@lynx-js/web-constants';
+import { type LynxEventType } from '@lynx-js/web-constants';
 import { type MainThreadRuntime } from '../../MainThreadRuntime.js';
 export declare function createEventFunctions(runtime: MainThreadRuntime): {
-    __AddEvent: (element: HTMLElement, eventType: LynxEventType, eventName: string, newEventHandler: string | undefined) => void;
-    __GetEvent: (element: HTMLElement, eventName: string, eventType: LynxEventType) => string | ((ev: LynxCrossThreadEvent) => void) | undefined;
+    __AddEvent: (element: HTMLElement, eventType: LynxEventType, eventName: string, newEventHandler: string | {
+        type: "worklet";
+        value: unknown;
+    } | undefined) => void;
+    __GetEvent: (element: HTMLElement, eventName: string, eventType: LynxEventType) => string | {
+        type: "worklet";
+        value: unknown;
+    } | undefined;
     __GetEvents: (element: HTMLElement) => {
         type: LynxEventType;
         name: string;
-        function: string | ((ev: Event) => void) | undefined;
+        function: string | {
+            type: "worklet";
+            value: unknown;
+        } | undefined;
     }[];
     __SetEvents: (element: HTMLElement, listeners: {
         type: LynxEventType;

package/dist/elementAPI/event/eventFunctions.js

@@ -18,8 +18,8 @@ export function createEventFunctions(runtime) {
                 ?.handler
             : runtimeInfo.eventHandlerMap[lynxEventName]?.bind
                 ?.handler;
-        if (hname) {
-            const crossThreadEvent = createCrossThreadEvent(runtime, event, lynxEventName);
+        const crossThreadEvent = createCrossThreadEvent(runtime, event, lynxEventName);
+        if (typeof hname === 'string') {
             const parentComponentUniqueId = runtimeInfo.parentComponentUniqueId;
             const parentComponent = runtime[getElementByUniqueId](Number(parentComponentUniqueId));
             const componentId = parentComponent?.getAttribute(lynxTagAttribute) !== 'page'
@@ -33,6 +33,15 @@ export function createEventFunctions(runtime) {
             }
             return true;
         }
+        else if (hname) {
+            crossThreadEvent.target.elementRefptr =
+                event.target;
+            if (crossThreadEvent.currentTarget) {
+                crossThreadEvent.currentTarget
+                    .elementRefptr = event.currentTarget;
+            }
+            runtime.runWorklet?.(hname.value, [crossThreadEvent]);
+        }
         return false;
     };
     const btsCatchHandler = (event) => {
@@ -40,8 +49,7 @@ export function createEventFunctions(runtime) {
         if (handlerTriggered)
             event.stopPropagation();
     };
-    function __AddEvent(element, eventType, eventName, newEventHandler // | ((ev: LynxCrossThreadEvent) => void) | undefined,
-    ) {
+    function __AddEvent(element, eventType, eventName, newEventHandler) {
         eventName = eventName.toLowerCase();
         const isCatch = eventType === 'catchEvent' || eventType === 'capture-catch';
         const isCapture = eventType.startsWith('capture');
@@ -106,14 +114,13 @@ export function createEventFunctions(runtime) {
         for (const [lynxEventName, info] of Object.entries(eventHandlerMap)) {
             for (const atomInfo of [info.bind, info.capture]) {
                 if (atomInfo) {
-                    for (const [type, handler] of Object.values(atomInfo)) {
-                        if (handler) {
-                            eventInfos.push({
-                                type: type,
-                                name: lynxEventName,
-                                function: handler,
-                            });
-                        }
+                    const { type, handler } = atomInfo;
+                    if (handler) {
+                        eventInfos.push({
+                            type: type,
+                            name: lynxEventName,
+                            function: handler,
+                        });
                     }
                 }
             }

package/dist/elementAPI/style/styleFunctions.js

@@ -30,14 +30,20 @@ export function createStyleFunctions(runtime, cssInJsInfo) {
         return (element.className ?? '').split(' ').filter(e => e);
     }
     function __AddInlineStyle(element, key, value) {
-        const lynxStyleInfo = queryCSSProperty(Number(key));
+        let dashName;
+        if (typeof key === 'number') {
+            dashName = queryCSSProperty(key).dashName;
+        }
+        else {
+            dashName = key;
+        }
         const valueStr = typeof value === 'number' ? value.toString() : value;
         if (!valueStr) { // null or undefined
-            element.style.removeProperty(lynxStyleInfo.dashName);
+            element.style.removeProperty(dashName);
         }
         else {
             const { transformedStyle } = transfromParsedStyles([[
-                    lynxStyleInfo.dashName,
+                    dashName,
                     valueStr,
                 ]]);
             for (const [property, value] of transformedStyle) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
   "dependencies": {
     "css-tree": "^3.1.0",
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.10.1",
-    "@lynx-js/web-style-transformer": "0.2.3"
+    "@lynx-js/web-constants": "0.12.0",
+    "@lynx-js/web-style-transformer": "0.3.0"
   }
 }