@lynx-js/web-mainthread-apis 0.8.0 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.9.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/web-constants@0.9.1
+
+## 0.9.0
+
+### Minor Changes
+
+- refractor: remove entryId concept ([#217](https://github.com/lynx-family/lynx-stack/pull/217))
+
+  After the PR #198
+  All contents are isolated by a shadowroot.
+  Therefore we don't need to add the entryId selector to avoid the lynx-view's style taking effect on the whole page.
+
+### Patch Changes
+
+- refactor: clean the decodeOperations implementation ([#261](https://github.com/lynx-family/lynx-stack/pull/261))
+
+- refactor: remove customelement defined detecting logic ([#247](https://github.com/lynx-family/lynx-stack/pull/247))
+
+  Before this commit, for those element with tag without `-`, we always try to detect if the `x-${tagName}` is defined.
+
+  After this commit, we pre-define a map(could be override by the `overrideLynxTagToHTMLTagMap`) to make that transformation for tag name.
+
+  This change is a path to SSR and the MTS support.
+
+- Updated dependencies [[`5b5e090`](https://github.com/lynx-family/lynx-stack/commit/5b5e090fdf0e896f1c38a49bf3ed9889117c4fb8), [`f447811`](https://github.com/lynx-family/lynx-stack/commit/f4478112a08d3cf2d1483b87d591ea4e3b6cc2ea), [`b844e75`](https://github.com/lynx-family/lynx-stack/commit/b844e751f566d924256365d37aec4c86c520ec00), [`6f16827`](https://github.com/lynx-family/lynx-stack/commit/6f16827d1f4d7364870d354fc805a8868c110f1e), [`d2d55ef`](https://github.com/lynx-family/lynx-stack/commit/d2d55ef9fe438c35921d9db0daa40d5228822ecc)]:
+  - @lynx-js/web-constants@0.9.0
+  - @lynx-js/web-style-transformer@0.2.3
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/MainThreadRuntime.d.ts

@@ -1,10 +1,11 @@
-import { type ElementOperation, type LynxLifecycleEvent, type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig } from '@lynx-js/web-constants';
+import { type ElementOperation, type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type onLifecycleEventEndpoint, type reportErrorEndpoint, type flushElementTreeEndpoint } from '@lynx-js/web-constants';
 import { type MainThreadLynx } from './MainThreadLynx.js';
+import type { RpcCallType } from '../../web-worker-rpc/src/TypeUtils.js';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
-    flushElementTree: (operations: ElementOperation[], options: FlushElementTreeOptions, styleContent?: string) => void;
-    _ReportError: (error: Error, info?: unknown) => void;
-    __OnLifecycleEvent: (lynxLifecycleEvents: LynxLifecycleEvent) => void;
+    flushElementTree: RpcCallType<typeof flushElementTreeEndpoint>;
+    _ReportError: RpcCallType<typeof reportErrorEndpoint>;
+    __OnLifecycleEvent: RpcCallType<typeof onLifecycleEventEndpoint>;
     markTiming: (pipelineId: string, timingKey: string) => void;
 }
 export interface MainThreadConfig {
@@ -14,13 +15,17 @@ export interface MainThreadConfig {
     styleInfo: StyleInfo;
     customSections: LynxTemplate['customSections'];
     lepusCode: LynxTemplate['lepusCode'];
-    entryId: string;
     browserConfig: BrowserConfig;
+    tagMap: Record<string, string>;
 }
 export declare class MainThreadRuntime {
     #private;
     private config;
     private isFp;
+    /**
+     * @private
+     */
+    _timingFlags: string[];
     operationsRef: {
         operations: ElementOperation[];
     };
@@ -35,8 +40,8 @@ export declare class MainThreadRuntime {
     __globalProps: unknown;
     processData?: ProcessDataCallback;
     renderPage: (data: unknown) => void;
-    _ReportError: (e: Error, info: unknown) => void;
-    __OnLifecycleEvent: (lynxLifecycleEvents: LynxLifecycleEvent) => void;
+    _ReportError: RpcCallType<typeof reportErrorEndpoint>;
+    __OnLifecycleEvent: RpcCallType<typeof onLifecycleEventEndpoint>;
     __LoadLepusChunk: (path: string) => boolean;
     __FlushElementTree: (_subTree: unknown, options: FlushElementTreeOptions) => void;
     updatePage?: (data: Cloneable, options?: Record<string, string>) => void;

package/dist/MainThreadRuntime.js

@@ -10,9 +10,14 @@ import * as domTreeApis from './elementAPI/domTree/domTreeFunctions.js';
 import * as eventApis from './elementAPI/event/eventFunctions.js';
 import * as styleApis from './elementAPI/style/styleFunctions.js';
 import { flattenStyleInfo, genCssContent, genCssInJsInfo, transformToWebCss, } from './utils/processStyleInfo.js';
+import { createAttributeAndPropertyFunctionsWithContext } from './elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.js';
 export class MainThreadRuntime {
     config;
     isFp = true;
+    /**
+     * @private
+     */
+    _timingFlags = [];
     operationsRef = {
         operations: [],
     };
@@ -25,10 +30,11 @@ export class MainThreadRuntime {
         const cssInJs = this.config.pageConfig.enableCSSSelector
             ? {}
             : genCssInJsInfo(this.config.styleInfo);
-        Object.assign(this, attributeAndPropertyApis, domTreeApis, eventApis, styleApis, initializeElementCreatingFunction({
+        Object.assign(this, createAttributeAndPropertyFunctionsWithContext(this), attributeAndPropertyApis, domTreeApis, eventApis, styleApis, initializeElementCreatingFunction({
             operationsRef: this.operationsRef,
             pageConfig: config.pageConfig,
             styleInfo: cssInJs,
+            tagMap: config.tagMap,
         }));
         this.__LoadLepusChunk = (path) => {
             try {
@@ -79,10 +85,12 @@ export class MainThreadRuntime {
     __LoadLepusChunk;
     __FlushElementTree = (_subTree, options) => {
         const operations = this.operationsRef.operations;
+        const timingFlags = this._timingFlags;
         this.operationsRef.operations = [];
+        this._timingFlags = [];
         this.config.callbacks.flushElementTree(operations, options, this.isFp
             ? genCssContent(this.config.styleInfo, this.config.pageConfig)
-            : undefined);
+            : undefined, timingFlags);
         this.isFp = false;
     };
     updatePage;

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

@@ -16,7 +16,6 @@ export declare function __GetElementConfig(element: ElementThreadElement): Recor
 export declare function __GetElementUniqueID(element: ElementThreadElement | unknown): number;
 export declare function __GetID(element: ElementThreadElement): string;
 export declare function __GetTag(element: ElementThreadElement): string;
-export declare function __SetAttribute(element: ElementThreadElement, key: string, value: string | null | undefined): void;
 export declare function __SetConfig(element: ElementThreadElement, config: Record<string, any>): void;
 export declare function __SetDataset(element: ElementThreadElement, dataset: Record<string, any>): void;
 export declare function __SetID(element: ElementThreadElement, id: string): void;

package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js

@@ -1,7 +1,7 @@
 // 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.
-import { componentIdAttribute } from '@lynx-js/web-constants';
+import { componentIdAttribute, lynxTagAttribute } from '@lynx-js/web-constants';
 import { RefCountType, } from '../ElementThreadElement.js';
 export function __AddConfig(element, type, value) {
     element.property.componentConfig[type] = value;
@@ -35,10 +35,7 @@ export function __GetID(element) {
     return element.attributes.id ?? '';
 }
 export function __GetTag(element) {
-    return element.tag;
-}
-export function __SetAttribute(element, key, value) {
-    element.setAttribute(key, value ?? null);
+    return element.getAttribute(lynxTagAttribute);
 }
 export function __SetConfig(element, config) {
     element.property.componentConfig = config;
@@ -50,7 +47,7 @@ export function __SetID(element, id) {
     element.setAttribute('id', id);
 }
 export function __UpdateComponentID(element, componentID) {
-    __SetAttribute(element, componentIdAttribute, componentID);
+    element.setAttribute(componentIdAttribute, componentID);
 }
 export function __GetConfig(element) {
     return element.property.componentConfig;

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

@@ -0,0 +1,5 @@
+import type { MainThreadRuntime } from '../../MainThreadRuntime.js';
+import type { ElementThreadElement } from '../ElementThreadElement.js';
+export declare function createAttributeAndPropertyFunctionsWithContext(runtime: MainThreadRuntime): {
+    __SetAttribute: (element: ElementThreadElement, key: string, value: string | null | undefined) => void;
+};

package/dist/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.js

@@ -0,0 +1,13 @@
+import { __lynx_timing_flag } from '@lynx-js/web-constants';
+export function createAttributeAndPropertyFunctionsWithContext(runtime) {
+    function __SetAttribute(element, key, value) {
+        element.setAttribute(key, value ?? null);
+        if (key === __lynx_timing_flag && value) {
+            runtime._timingFlags.push(value);
+        }
+    }
+    return {
+        __SetAttribute,
+    };
+}
+//# sourceMappingURL=createAttributeAndPropertyFunctionsWithContext.js.map

package/dist/elementAPI/createOffscreenDocument.js

@@ -4,7 +4,7 @@ export function createOffscreenDocument(options) {
     let incrementalUniqueId = 0;
     function createElement(tagName) {
         const uniqueId = incrementalUniqueId++;
-        if (tagName === 'list') {
+        if (tagName === 'x-list') {
             return new ListElement(tagName, uniqueId, pageConfig, operationsRef, styleInfo);
         }
         else {

package/dist/elementAPI/elementCreating/elementCreatingFunctions.d.ts

@@ -6,6 +6,7 @@ export interface initializeElementCreatingFunctionConfig {
     };
     pageConfig: PageConfig;
     styleInfo: CssInJsInfo;
+    tagMap: Record<string, string>;
 }
 export declare function initializeElementCreatingFunction(config: initializeElementCreatingFunctionConfig): {
     __CreateView: (parentComponentUniqueId: number) => ElementThreadElement;

package/dist/elementAPI/elementCreating/elementCreatingFunctions.js

@@ -1,13 +1,13 @@
 // 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.
-import { cssIdAttribute, parentComponentUniqueIdAttribute, } from '@lynx-js/web-constants';
+import { cssIdAttribute, parentComponentUniqueIdAttribute, lynxTagAttribute, } from '@lynx-js/web-constants';
 import { __UpdateComponentID } from '../attributeAndProperty/attributeAndPropertyFunctions.js';
 import { ListElement, ElementThreadElement, } from '../ElementThreadElement.js';
 import { __SetCSSId } from '../style/styleFunctions.js';
 import { createOffscreenDocument } from '../createOffscreenDocument.js';
 export function initializeElementCreatingFunction(config) {
-    const { operationsRef, pageConfig, styleInfo } = config;
+    const { operationsRef, pageConfig, styleInfo, tagMap } = config;
     const document = createOffscreenDocument({
         pageConfig,
         operationsRef,
@@ -16,7 +16,9 @@ export function initializeElementCreatingFunction(config) {
     function createLynxElement(tag, parentComponentUniqueId, cssId, componentId, 
     // @ts-expect-error
     info) {
-        const element = document.createElement(tag);
+        const htmlTag = tagMap[tag] ?? tag;
+        const element = document.createElement(htmlTag);
+        element.setAttribute(lynxTagAttribute, tag);
         // element.parentComponentUniqueId = parentComponentUniqueId;
         element.setAttribute(parentComponentUniqueIdAttribute, parentComponentUniqueId.toString());
         if (cssId !== undefined)
@@ -49,6 +51,7 @@ export function initializeElementCreatingFunction(config) {
     }
     function __CreatePage(componentID, cssID, info) {
         const page = createLynxElement('page', 0, cssID, componentID, info);
+        page.setAttribute('part', 'page');
         page.setAttribute(parentComponentUniqueIdAttribute, page.uniqueId.toString());
         return page;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "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.8.0",
-    "@lynx-js/web-style-transformer": "0.2.2"
+    "@lynx-js/web-constants": "0.9.1",
+    "@lynx-js/web-style-transformer": "0.2.3"
   }
 }