@lynx-js/web-core 0.7.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,198 @@
 # @lynx-js/web-core
 
+## 0.9.0
+
+### Minor Changes
+
+- feat: `nativeModulesUrl` of lynx-view is changed to `nativeModulesMap`, and the usage is completely aligned with `napiModulesMap`. ([#220](https://github.com/lynx-family/lynx-stack/pull/220))
+
+  "warning: This is a breaking change."
+
+  `nativeModulesMap` will be a map: key is module-name, value should be a esm url which export default a
+  function with two parameters(you never need to use `this`):
+
+  - `NativeModules`: oriented `NativeModules`, which you can use to call
+    other Native-Modules.
+
+  - `NativeModulesCall`: trigger `onNativeModulesCall`, same as the deprecated `this.nativeModulesCall`.
+
+  example:
+
+  ```js
+  const nativeModulesMap = {
+    CustomModule: URL.createObjectURL(
+      new Blob(
+        [
+          `export default function(NativeModules, NativeModulesCall) {
+      return {
+        async getColor(data, callback) {
+          const color = await NativeModulesCall('getColor', data);
+          callback(color);
+        },
+      }
+    };`,
+        ],
+        { type: 'text/javascript' },
+      ),
+    ),
+  };
+  lynxView.nativeModulesMap = nativeModulesMap;
+  ```
+
+  In addition, we will use Promise.all to load `nativeModules`, which will optimize performance in the case of multiple modules.
+
+- 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: code clean ([#266](https://github.com/lynx-family/lynx-stack/pull/266))
+
+- refactor: clean the decodeOperations implementation ([#261](https://github.com/lynx-family/lynx-stack/pull/261))
+
+- fix: When the width and height of lynx-view are not auto, the width and height of the `lynx-tag="page"` need to be correctly set to 100%. ([#228](https://github.com/lynx-family/lynx-stack/pull/228))
+
+- 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.
+
+- fix: 'error' event for main-thread \_reportError ([#283](https://github.com/lynx-family/lynx-stack/pull/283))
+
+- Updated dependencies [[`5b5e090`](https://github.com/lynx-family/lynx-stack/commit/5b5e090fdf0e896f1c38a49bf3ed9889117c4fb8), [`b844e75`](https://github.com/lynx-family/lynx-stack/commit/b844e751f566d924256365d37aec4c86c520ec00), [`53230f0`](https://github.com/lynx-family/lynx-stack/commit/53230f012216f3a627853e11d544e4be175c5b9b), [`6f16827`](https://github.com/lynx-family/lynx-stack/commit/6f16827d1f4d7364870d354fc805a8868c110f1e), [`d2d55ef`](https://github.com/lynx-family/lynx-stack/commit/d2d55ef9fe438c35921d9db0daa40d5228822ecc)]:
+  - @lynx-js/web-worker-runtime@0.9.0
+  - @lynx-js/web-constants@0.9.0
+  - @lynx-js/web-worker-rpc@0.9.0
+
+## 0.8.0
+
+### Minor Changes
+
+- refactor: remove web-elements/lazy and loadNewTag ([#123](https://github.com/lynx-family/lynx-stack/pull/123))
+
+  - remove @lynx-js/web-elements/lazy
+  - remove loadElement
+  - remove loadNewTag callback
+
+  **This is a breaking change**
+
+  Now we removed the default lazy loading preinstalled in web-core
+
+  Please add the following statement in your web project
+
+  ```
+  import "@lynx-js/web-elements/all";
+  ```
+
+- feat: use shadowroot to isolate one lynx-view ([#198](https://github.com/lynx-family/lynx-stack/pull/198))
+
+  Before this commit, we have been detecting if current browser supports the `@scope` rule.
+  This allows us to scope one lynx-view's styles.
+
+  After this commit we always create a shadowroot to scope then.
+
+  Also for the new shadowroot pattern, we add a new **attribute** `inject-head-links`.
+  By default, we will iterate all `<link rel="stylesheet">` in the `<head>`, and use `@import url()` to import them inside the shadowroot.
+  Developers could add a `inject-head-links="false"` to disable this behavior.
+
+- feat: never add the x-enable-xx-event attributes ([#157](https://github.com/lynx-family/lynx-stack/pull/157))
+
+  After this commit, we update the reqirement of the version of `@lynx-js/web-elements` to `>=0.3.1`
+
+### Patch Changes
+
+- feat: add pixelRatio of SystemInfo, now you can use `SystemInfo.pixelRatio`. ([#150](https://github.com/lynx-family/lynx-stack/pull/150))
+
+- Improve LynxView resize observer cleanup ([#124](https://github.com/lynx-family/lynx-stack/pull/124))
+
+- feat: add two prop of lynx-view about `napiLoader`: ([#173](https://github.com/lynx-family/lynx-stack/pull/173))
+
+  - `napiModulesMap`: [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
+
+  - `onNapiModulesCall`: [optional] the NapiModule value handler.
+
+  **Warning:** This is the internal implementation of `@lynx-js/lynx-core`. In most cases, this API is not required for projects.
+
+  1. The `napiModulesMap` value should be a esm url which export default a function with two parameters:
+
+  - `NapiModules`: oriented `napiModulesMap`, which you can use to call other Napi-Modules
+
+  - `NapiModulesCall`: trigger `onNapiModulesCall`
+
+  example:
+
+  ```js
+  const color_environment = URL.createObjectURL(
+    new Blob(
+      [
+        `export default function(NapiModules, NapiModulesCall) {
+    return {
+      getColor() {
+        NapiModules.color_methods.getColor({ color: 'green' }, color => {
+          console.log(color);
+        });
+      },
+      ColorEngine: class ColorEngine {
+        getColor(name) {
+          NapiModules.color_methods.getColor({ color: 'green' }, color => {
+            console.log(color);
+          });
+        }
+      },
+    };
+  };`,
+      ],
+      { type: 'text/javascript' },
+    ),
+  );
+
+  const color_methods = URL.createObjectURL(
+    new Blob(
+      [
+        `export default function(NapiModules, NapiModulesCall) {
+    return {
+      async getColor(data, callback) {
+        const color = await NapiModulesCall('getColor', data);
+        callback(color);
+      },
+    };
+  };`,
+      ],
+      { type: 'text/javascript' },
+    ),
+  );
+
+  lynxView.napiModuleMap = {
+    color_environment: color_environment,
+    color_methods: color_methods,
+  };
+  ```
+
+  2. The `onNapiModulesCall` function has three parameters:
+
+  - `name`: the first parameter of `NapiModulesCall`, the function name
+  - `data`: the second parameter of `NapiModulesCall`, data
+  - `moduleName`: the module-name of the called napi-module
+
+  ```js
+  lynxView.onNapiModulesCall = (name, data, moduleName) => {
+    if (name === 'getColor' && moduleName === 'color_methods') {
+      return data.color;
+    }
+  };
+  ```
+
+- Updated dependencies [[`eab1328`](https://github.com/lynx-family/lynx-stack/commit/eab1328a83797fc903255c984d9f39537b9138b9), [`e9e8370`](https://github.com/lynx-family/lynx-stack/commit/e9e8370e070a50cbf65a4ebc46c2e37ea1e0be40), [`ec4e1ce`](https://github.com/lynx-family/lynx-stack/commit/ec4e1ce0d7612d6c0701792a46c78cd52130bad4), [`f0a717c`](https://github.com/lynx-family/lynx-stack/commit/f0a717c630700e16ab0af7f1fe370fd60ac75b30)]:
+  - @lynx-js/web-worker-runtime@0.8.0
+  - @lynx-js/web-constants@0.8.0
+  - @lynx-js/web-worker-rpc@0.8.0
+
 ## 0.7.1
 
 ### Patch Changes

package/dist/apis/LynxView.d.ts

@@ -1,15 +1,19 @@
-import { type Cloneable, type NativeModulesCall, type UpdateDataType } from '@lynx-js/web-constants';
+import { type Cloneable, type NapiModulesCall, type NapiModulesMap, type NativeModulesCall, type NativeModulesMap, type UpdateDataType } from '@lynx-js/web-constants';
+/**
+ * Based on our experiences, these elements are almost used in all lynx cards.
+ */
 /**
  * @param {string} url [required] The url of the entry of your Lynx card
  * @param {Cloneable} globalProps [optional] The globalProps value of this Lynx card
  * @param {Cloneable} initData [oprional] The initial data of this Lynx card
  * @param {Record<string,string>} overrideLynxTagToHTMLTagMap [optional] use this property/attribute to override the lynx tag -> html tag map
- * @param {string} nativeModulesUrl [optional] It is a esm url, use to customize NativeModules.
- * @param {INativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
+ * @param {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
+ * @param {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
  * @param {"auto" | null} height [optional] set it to "auto" for height auto-sizing
  * @param {"auto" | null} width [optional] set it to "auto" for width auto-sizing
- *
- * @property entryId the currently Lynx view entryId.
+ * @param {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
+ * @param {NapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
+ * @param {"false" | "true" | null} injectHeadLinks [optional] @default true set it to "false" to disable injecting the <link href="" ref="stylesheet"> styles into shadowroot
  *
  * @event error lynx card fired an error
  *
@@ -59,13 +63,6 @@ export declare class LynxView extends HTMLElement {
      */
     get initData(): Cloneable;
     set initData(val: string | Cloneable);
-    /**
-     * @public
-     * @readonly
-     * @property
-     * The random generated entryId of current lynxview
-     */
-    get entryId(): string | undefined;
     /**
      * @public
      * @property
@@ -81,10 +78,24 @@ export declare class LynxView extends HTMLElement {
     set onNativeModulesCall(handler: NativeModulesCall);
     /**
      * @public
-     * @property nativeModules
+     * @property nativeModulesMap
+     * @default {}
+     */
+    get nativeModulesMap(): NativeModulesMap | undefined;
+    set nativeModulesMap(map: NativeModulesMap);
+    /**
+     * @param
+     * @property napiModulesMap
+     * @default {}
+     */
+    get napiModulesMap(): NapiModulesMap | undefined;
+    set napiModulesMap(map: NapiModulesMap);
+    /**
+     * @param
+     * @property
      */
-    get nativeModulesUrl(): string | undefined;
-    set nativeModulesUrl(val: string);
+    get onNapiModulesCall(): NapiModulesCall | undefined;
+    set onNapiModulesCall(handler: NapiModulesCall);
     /**
      * @public
      * "auto" for auto calculated height
@@ -134,4 +145,5 @@ export declare class LynxView extends HTMLElement {
      * @private
      */
     connectedCallback(): void;
+    private cleanupResizeObserver;
 }

package/dist/apis/LynxView.js

@@ -2,27 +2,23 @@
 // 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 { createLynxView, } from './createLynxView.js';
-import { cardIdAttribute, lynxViewEntryIdPrefix, lynxViewRootDomId, } from '@lynx-js/web-constants';
-import { loadElement } from '@lynx-js/web-elements/lazy';
+import { lynxViewRootDomId, } from '@lynx-js/web-constants';
+import { inShadowRootStyles } from './inShadowRootStyles.js';
 /**
  * Based on our experiences, these elements are almost used in all lynx cards.
  */
-loadElement('lynx-wrapper');
-loadElement('x-view');
-loadElement('x-text');
-loadElement('x-image');
-loadElement('scroll-view');
 /**
  * @param {string} url [required] The url of the entry of your Lynx card
  * @param {Cloneable} globalProps [optional] The globalProps value of this Lynx card
  * @param {Cloneable} initData [oprional] The initial data of this Lynx card
  * @param {Record<string,string>} overrideLynxTagToHTMLTagMap [optional] use this property/attribute to override the lynx tag -> html tag map
- * @param {string} nativeModulesUrl [optional] It is a esm url, use to customize NativeModules.
- * @param {INativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
+ * @param {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
+ * @param {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
  * @param {"auto" | null} height [optional] set it to "auto" for height auto-sizing
  * @param {"auto" | null} width [optional] set it to "auto" for width auto-sizing
- *
- * @property entryId the currently Lynx view entryId.
+ * @param {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
+ * @param {NapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
+ * @param {"false" | "true" | null} injectHeadLinks [optional] @default true set it to "false" to disable injecting the <link href="" ref="stylesheet"> styles into shadowroot
  *
  * @event error lynx card fired an error
  *
@@ -50,7 +46,7 @@ export class LynxView extends HTMLElement {
         'globalProps',
         'initData',
         'overrideLynxTagToHTMLTagMap',
-        'nativeModulesUrl',
+        'nativeModulesMap',
     ];
     static attributeCamelCaseMap = Object.fromEntries(this.observedAttributeAsProperties.map((nm) => [nm.toLocaleLowerCase(), nm]));
     /**
@@ -104,16 +100,6 @@ export class LynxView extends HTMLElement {
             this.#initData = val;
         }
     }
-    #entryId;
-    /**
-     * @public
-     * @readonly
-     * @property
-     * The random generated entryId of current lynxview
-     */
-    get entryId() {
-        return this.#entryId;
-    }
     #overrideLynxTagToHTMLTagMap = { 'page': 'div' };
     /**
      * @public
@@ -148,16 +134,40 @@ export class LynxView extends HTMLElement {
             }
         }
     }
-    #nativeModulesUrl;
+    #nativeModulesMap = {};
     /**
      * @public
-     * @property nativeModules
+     * @property nativeModulesMap
+     * @default {}
+     */
+    get nativeModulesMap() {
+        return this.#nativeModulesMap;
+    }
+    set nativeModulesMap(map) {
+        this.#nativeModulesMap = map;
+    }
+    #napiModulesMap = {};
+    /**
+     * @param
+     * @property napiModulesMap
+     * @default {}
      */
-    get nativeModulesUrl() {
-        return this.#nativeModulesUrl;
+    get napiModulesMap() {
+        return this.#napiModulesMap;
     }
-    set nativeModulesUrl(val) {
-        this.#nativeModulesUrl = val;
+    set napiModulesMap(map) {
+        this.#napiModulesMap = map;
+    }
+    #onNapiModulesCall;
+    /**
+     * @param
+     * @property
+     */
+    get onNapiModulesCall() {
+        return this.#onNapiModulesCall;
+    }
+    set onNapiModulesCall(handler) {
+        this.#onNapiModulesCall = handler;
     }
     #autoHeight = false;
     #autoWidth = false;
@@ -281,12 +291,15 @@ export class LynxView extends HTMLElement {
      * @private
      */
     disconnectedCallback() {
+        this.cleanupResizeObserver();
         if (this.#instance) {
-            this.#instance.resizeObserver?.disconnect();
             this.#instance.lynxView.dispose();
             this.#instance.rootDom.remove();
         }
         this.#instance = undefined;
+        if (this.shadowRoot) {
+            this.shadowRoot.innerHTML = '';
+        }
     }
     /**
      * @private the flag to group all changes into one render operation
@@ -306,24 +319,25 @@ export class LynxView extends HTMLElement {
                 if (this.#url) {
                     const rootDom = document.createElement('div');
                     rootDom.id = lynxViewRootDomId;
-                    const entryId = `${lynxViewEntryIdPrefix}-${LynxView
-                        .lynxViewCount++}`;
-                    this.#entryId = entryId;
-                    rootDom.setAttribute(cardIdAttribute, entryId);
                     rootDom.setAttribute('part', lynxViewRootDomId);
-                    const commonEventDetail = {
-                        entryId,
+                    const tagMap = {
+                        'page': 'div',
+                        'view': 'x-view',
+                        'text': 'x-text',
+                        'image': 'x-image',
+                        'list': 'x-list',
+                        'svg': 'x-svg',
+                        ...this.overrideLynxTagToHTMLTagMap,
                     };
                     const lynxView = createLynxView({
-                        entryId,
+                        tagMap,
                         rootDom,
                         templateUrl: this.#url,
                         globalProps: this.#globalProps,
                         initData: this.#initData,
-                        overrideLynxTagToHTMLTagMap: this.#overrideLynxTagToHTMLTagMap,
-                        nativeModulesUrl: this.#nativeModulesUrl,
+                        nativeModulesMap: this.#nativeModulesMap,
+                        napiModulesMap: this.#napiModulesMap,
                         callbacks: {
-                            loadNewTag: loadElement,
                             nativeModulesCall: (...args) => {
                                 if (this.#onNativeModulesCall) {
                                     return this.#onNativeModulesCall(...args);
@@ -335,10 +349,11 @@ export class LynxView extends HTMLElement {
                                     this.#cachedNativeModulesCall = [args];
                                 }
                             },
+                            napiModulesCall: (...args) => {
+                                return this.#onNapiModulesCall?.(...args);
+                            },
                             onError: () => {
-                                this.dispatchEvent(new CustomEvent('error', {
-                                    detail: commonEventDetail,
-                                }));
+                                this.dispatchEvent(new CustomEvent('error', {}));
                             },
                         },
                     });
@@ -347,7 +362,21 @@ export class LynxView extends HTMLElement {
                         rootDom,
                     };
                     this.#handleAutoSize();
-                    this.append(rootDom);
+                    if (!this.shadowRoot) {
+                        this.attachShadow({ mode: 'open' });
+                    }
+                    const styleElement = document.createElement('style');
+                    this.shadowRoot.append(styleElement);
+                    const styleSheet = styleElement.sheet;
+                    styleSheet.insertRule(inShadowRootStyles);
+                    const injectHeadLinks = this.getAttribute('inject-head-links') !== 'false';
+                    if (injectHeadLinks) {
+                        document.head.querySelectorAll('link[rel="stylesheet"]').forEach((linkElement) => {
+                            const href = linkElement.href;
+                            styleSheet.insertRule(`@import url("${href}");`);
+                        });
+                    }
+                    this.shadowRoot.append(rootDom);
                 }
             });
         }
@@ -358,6 +387,12 @@ export class LynxView extends HTMLElement {
     connectedCallback() {
         this.#render();
     }
+    cleanupResizeObserver() {
+        if (this.#instance?.resizeObserver) {
+            this.#instance.resizeObserver.disconnect();
+            this.#instance.resizeObserver = undefined;
+        }
+    }
 }
 if (customElements.get(LynxView.tag)) {
     console.warn(`[${LynxView.tag}] has already been defined`);

package/dist/apis/createLynxView.d.ts

@@ -1,18 +1,19 @@
-import type { Cloneable, UpdateDataType } from '@lynx-js/web-constants';
+import type { Cloneable, NapiModulesMap, NativeModulesMap, sendGlobalEventEndpoint, UpdateDataType } from '@lynx-js/web-constants';
 import { startUIThread } from '../uiThread/startUIThread.js';
+import type { RpcCallType } from '@lynx-js/web-worker-rpc';
 export interface LynxViewConfigs {
     templateUrl: string;
     initData: Cloneable;
     globalProps: Cloneable;
-    entryId: string;
     rootDom: HTMLElement;
     callbacks: Parameters<typeof startUIThread>[3];
-    overrideLynxTagToHTMLTagMap?: Record<string, string>;
-    nativeModulesUrl: string | undefined;
+    nativeModulesMap: NativeModulesMap;
+    napiModulesMap: NapiModulesMap;
+    tagMap: Record<string, string>;
 }
 export interface LynxView {
     updateData(data: Cloneable, updateDataType: UpdateDataType, callback?: () => void): void;
     dispose(): Promise<void>;
-    sendGlobalEvent(name: string, params?: Cloneable[]): void;
+    sendGlobalEvent: RpcCallType<typeof sendGlobalEventEndpoint>;
 }
 export declare function createLynxView(configs: LynxViewConfigs): LynxView;

package/dist/apis/createLynxView.js

@@ -2,16 +2,15 @@
 // 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 { startUIThread } from '../uiThread/startUIThread.js';
-import { supportAtScope } from '../utils/browser.js';
 export function createLynxView(configs) {
-    const { rootDom, callbacks, templateUrl, globalProps, entryId, initData, overrideLynxTagToHTMLTagMap, nativeModulesUrl, } = configs;
+    const { rootDom, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, } = configs;
     return startUIThread(templateUrl, {
+        tagMap,
         initData,
         globalProps,
-        entryId,
-        browserConfig: {
-            supportAtScope,
-        },
-    }, rootDom, callbacks, overrideLynxTagToHTMLTagMap, nativeModulesUrl);
+        nativeModulesMap,
+        napiModulesMap,
+        browserConfig: {},
+    }, rootDom, callbacks);
 }
 //# sourceMappingURL=createLynxView.js.map

package/dist/apis/inShadowRootStyles.d.ts

@@ -0,0 +1 @@
+export declare const inShadowRootStyles = "\n[lynx-default-display-linear=\"false\"] * {\n  --lynx-display: flex;\n  --lynx-display-toggle: var(--lynx-display-flex);\n}\n";

package/dist/apis/inShadowRootStyles.js

@@ -0,0 +1,7 @@
+export const inShadowRootStyles = `
+[lynx-default-display-linear="false"] * {
+  --lynx-display: flex;
+  --lynx-display-toggle: var(--lynx-display-flex);
+}
+`;
+//# sourceMappingURL=inShadowRootStyles.js.map

package/dist/uiThread/bootWorkers.js

@@ -27,6 +27,7 @@ function createMainWorker() {
         mode: 'main',
         toUIThread: channelToMainThread.port2,
         toPeerThread: channelMainThreadWithBackground.port1,
+        pixelRatio: window.devicePixelRatio,
     };
     mainThreadWorker.postMessage(mainThreadMessage, [
         channelToMainThread.port2,
@@ -49,6 +50,7 @@ function createBackgroundWorker(channelMainThreadWithBackground) {
         mode: 'background',
         toUIThread: channelToBackground.port2,
         toPeerThread: channelMainThreadWithBackground.port2,
+        pixelRatio: window.devicePixelRatio,
     };
     backgroundThreadWorker.postMessage(backgroundThreadMessage, [
         channelToBackground.port2,

package/dist/uiThread/crossThreadHandlers/bootTimingSystem.js

@@ -35,6 +35,7 @@ export function bootTimingSystem(mainThreadRpc, backgroundThreadRpc, rootDom) {
             detail: isFp ? setupTiming : timingInfo,
             bubbles: true,
             cancelable: true,
+            composed: true,
         }));
         if (pipelineId) {
             pipelineIdToTiming.delete(pipelineId);

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.d.ts

@@ -3,11 +3,8 @@ import type { Rpc } from '@lynx-js/web-worker-rpc';
 import type { RuntimePropertyOnElement } from '../../types/RuntimePropertyOnElement.js';
 export declare function registerFlushElementTreeHandler(mainThreadRpc: Rpc, endpoint: typeof flushElementTreeEndpoint, options: {
     pageConfig: PageConfig;
-    overrideTagMap: Record<string, string>;
     backgroundRpc: Rpc;
     rootDom: HTMLElement;
-    entryId: string;
-    currentLoadingTags: Promise<void>[];
 }, onCommit: (info: {
     pipelineId: string | undefined;
     timingFlags: string[];

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.js

@@ -1,33 +1,24 @@
 // 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 { cardIdAttribute, componentIdAttribute, lynxDefaultDisplayLinearAttribute, lynxRuntimeValue, lynxTagAttribute, lynxUniqueIdAttribute, parentComponentUniqueIdAttribute, postMainThreadEvent, publicComponentEventEndpoint, publishEventEndpoint, } from '@lynx-js/web-constants';
+import { componentIdAttribute, lynxDefaultDisplayLinearAttribute, lynxRuntimeValue, lynxTagAttribute, lynxUniqueIdAttribute, parentComponentUniqueIdAttribute, postMainThreadEvent, publicComponentEventEndpoint, publishEventEndpoint, } from '@lynx-js/web-constants';
 import { decodeElementOperation } from '../decodeElementOperation.js';
-import { getElementTag } from '../getElementTag.js';
 import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
-import { isWebkit, supportAtScope } from '../../utils/browser.js';
-function applyPageAttributes(page, pageConfig, entryId) {
-    page.setAttribute(cardIdAttribute, entryId);
+function applyPageAttributes(page, pageConfig) {
     if (pageConfig.defaultDisplayLinear === false) {
         page.setAttribute(lynxDefaultDisplayLinearAttribute, 'false');
     }
 }
 export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options, onCommit, markTimingInternal) {
-    const { pageConfig, overrideTagMap, backgroundRpc, rootDom, entryId, currentLoadingTags, } = options;
+    const { pageConfig, backgroundRpc, rootDom, } = options;
     const uniqueIdToElement = [];
     const uniqueIdToCssInJsRule = [];
     const rootStyleElementForCssInJs = document.createElement('style');
     if (!pageConfig.enableCSSSelector) {
-        rootStyleElementForCssInJs.innerHTML = `/* enableCSSSelector: false */ ${supportAtScope && !isWebkit ? '@scope { :scope{} }' : ''}`;
-        // safari testing needs this :scope{} see: https://github.com/microsoft/playwright/issues/33647
-        // for 18.2 the :scope{} placeholder dose not work neither. we fired an issue for this https://bugs.webkit.org/show_bug.cgi?id=285130
         rootDom.append(rootStyleElementForCssInJs);
     }
-    // dom must connected to get the sheet property
-    const rootScopeRule = rootStyleElementForCssInJs?.sheet?.cssRules[0];
     const createElementImpl = (tag) => {
-        const htmlTag = getElementTag(tag, overrideTagMap);
-        const element = document.createElement(htmlTag);
+        const element = document.createElement(tag);
         element[lynxRuntimeValue] = {
             dataset: {},
             eventHandler: {},
@@ -36,14 +27,8 @@ export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options
     };
     const createStyleRuleImpl = (uniqueId, initialStyle) => {
         const commonStyleSheetText = `[${lynxUniqueIdAttribute}="${uniqueId.toString()}"]{${initialStyle}}`;
-        if (rootScopeRule) {
-            const idx = rootScopeRule.insertRule(commonStyleSheetText);
-            return rootScopeRule.cssRules[idx];
-        }
-        else {
-            const idx = rootStyleElementForCssInJs.sheet.insertRule(`[${cardIdAttribute}="${entryId}"] ${commonStyleSheetText}`);
-            return rootStyleElementForCssInJs.sheet.cssRules[idx];
-        }
+        const idx = rootStyleElementForCssInJs.sheet.insertRule(commonStyleSheetText);
+        return rootStyleElementForCssInJs.sheet.cssRules[idx];
     };
     const mtsHandler = (event) => {
         const crossThreadEvent = createCrossThreadEvent(event);
@@ -73,42 +58,38 @@ export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options
             ]);
         }
     };
-    mainThreadRpc.registerHandler(endpoint, (operations, options, cardCss) => {
+    mainThreadRpc.registerHandler(endpoint, (operations, options, cardCss, timingFlags) => {
         const { pipelineOptions } = options;
         const pipelineId = pipelineOptions?.pipelineID;
-        const timingFlags = [];
         markTimingInternal('dispatch_start', pipelineId);
-        Promise.all(currentLoadingTags).then(() => {
-            markTimingInternal('layout_start', pipelineId);
-            markTimingInternal('ui_operation_flush_start', pipelineId);
-            const page = decodeElementOperation(operations, {
-                timingFlags,
-                uniqueIdToElement,
-                uniqueIdToCssInJsRule,
-                createElementImpl,
-                createStyleRuleImpl,
-                eventHandler: {
-                    mtsHandler,
-                    btsHandler,
-                },
-            });
-            markTimingInternal('ui_operation_flush_end', pipelineId);
-            const isFP = !!page;
-            if (isFP) {
-                // on FP
-                const styleElement = document.createElement('style');
-                styleElement.innerHTML = cardCss;
-                rootDom.append(styleElement);
-                rootDom.append(page);
-                applyPageAttributes(page, pageConfig, entryId);
-            }
-            markTimingInternal('layout_end', pipelineId);
-            markTimingInternal('dispatch_end', pipelineId);
-            onCommit({
-                pipelineId,
-                timingFlags,
-                isFP,
-            });
+        markTimingInternal('layout_start', pipelineId);
+        markTimingInternal('ui_operation_flush_start', pipelineId);
+        const page = decodeElementOperation(operations, {
+            uniqueIdToElement,
+            uniqueIdToCssInJsRule,
+            createElementImpl,
+            createStyleRuleImpl,
+            eventHandler: {
+                mtsHandler,
+                btsHandler,
+            },
+        });
+        markTimingInternal('ui_operation_flush_end', pipelineId);
+        const isFP = !!page;
+        if (isFP) {
+            // on FP
+            const styleElement = document.createElement('style');
+            styleElement.innerHTML = cardCss;
+            rootDom.append(styleElement);
+            rootDom.append(page);
+            applyPageAttributes(page, pageConfig);
+        }
+        markTimingInternal('layout_end', pipelineId);
+        markTimingInternal('dispatch_end', pipelineId);
+        onCommit({
+            pipelineId,
+            timingFlags,
+            isFP,
         });
     });
     return { uniqueIdToElement, uniqueIdToCssInJsRule };

package/dist/uiThread/crossThreadHandlers/registerNapiModulesCallHandler.d.ts

@@ -0,0 +1,3 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+import { type NapiModulesCall } from '@lynx-js/web-constants';
+export declare function registerNapiModulesCallHandler(rpc: Rpc, napiModulesCall: NapiModulesCall): void;

package/dist/uiThread/crossThreadHandlers/registerNapiModulesCallHandler.js

@@ -0,0 +1,5 @@
+import { napiModulesCallEndpoint, } from '@lynx-js/web-constants';
+export function registerNapiModulesCallHandler(rpc, napiModulesCall) {
+    rpc.registerHandler(napiModulesCallEndpoint, napiModulesCall);
+}
+//# sourceMappingURL=registerNapiModulesCallHandler.js.map

package/dist/uiThread/decodeElementOperation.d.ts

@@ -1,7 +1,6 @@
 import type { ElementOperation } from '@lynx-js/web-constants';
 import type { RuntimePropertyOnElement } from '../types/RuntimePropertyOnElement.js';
 export declare function decodeElementOperation<T extends HTMLElement & RuntimePropertyOnElement>(operations: ElementOperation[], options: {
-    timingFlags: string[];
     uniqueIdToElement: (WeakRef<T> | undefined)[];
     uniqueIdToCssInJsRule: (WeakRef<CSSStyleRule> | undefined)[];
     createElementImpl: (tag: string) => T;

package/dist/uiThread/decodeElementOperation.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 { cssIdAttribute, lynxTagAttribute, lynxUniqueIdAttribute, OperationType, lynxRuntimeValue, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, W3cEventNameToLynx, __lynx_timing_flag, } from '@lynx-js/web-constants';
+import { cssIdAttribute, lynxUniqueIdAttribute, OperationType, lynxRuntimeValue, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, W3cEventNameToLynx, __lynx_timing_flag, lynxTagAttribute, } from '@lynx-js/web-constants';
 function getElement(uniqueId, uniqueIdToElement) {
     const element = uniqueIdToElement[uniqueId]?.deref();
     if (element) {
@@ -18,7 +18,6 @@ function createElement(tag, uniqueId, uniqueIdToElement, createElementImpl) {
     }
     const element = createElementImpl(tag);
     element.setAttribute(lynxUniqueIdAttribute, uniqueId.toString());
-    element.setAttribute(lynxTagAttribute, tag);
     uniqueIdToElement[uniqueId] = new WeakRef(element);
     return element;
 }
@@ -39,7 +38,7 @@ function handleHtmlEvent(event) {
     }
 }
 export function decodeElementOperation(operations, options) {
-    const { uniqueIdToElement, uniqueIdToCssInJsRule, createElementImpl, createStyleRuleImpl, eventHandler, timingFlags, } = options;
+    const { uniqueIdToElement, uniqueIdToCssInJsRule, createElementImpl, createStyleRuleImpl, eventHandler, } = options;
     let pageElement;
     for (const op of operations) {
         if (op.type === OperationType.Create) {
@@ -47,8 +46,6 @@ export function decodeElementOperation(operations, options) {
             if (typeof op.cssId === 'number') {
                 element.setAttribute(cssIdAttribute, op.cssId.toString());
             }
-            if (op.tag === 'page')
-                pageElement = element;
         }
         else {
             const target = getElement(op.uid, uniqueIdToElement);
@@ -87,8 +84,8 @@ export function decodeElementOperation(operations, options) {
                         }
                         else {
                             target.setAttribute(op.key, op.value);
-                            if (op.value && op.key === __lynx_timing_flag) {
-                                timingFlags.push(op.value);
+                            if (op.key === lynxTagAttribute && op.value === 'page') {
+                                pageElement = target;
                             }
                         }
                     }
@@ -141,11 +138,9 @@ export function decodeElementOperation(operations, options) {
                     const isCaptureEvent = op.eventType === 'capture-bind'
                         || op.eventType === 'capture-catch';
                     if (op.hname === undefined) {
-                        target.removeAttribute(`x-enable-${lynxEventName}-event`);
                         target[lynxRuntimeValue].eventHandler[lynxEventName] = undefined;
                     }
                     else {
-                        target.setAttribute(`x-enable-${lynxEventName}-event`, '');
                         target.addEventListener(htmlEventName, handleHtmlEvent, {
                             passive: true,
                             capture: isCaptureEvent,

package/dist/uiThread/startUIThread.d.ts

@@ -1,7 +1,7 @@
 import type { LynxView } from '../apis/createLynxView.js';
-import { type MainThreadStartConfigs, type NativeModulesCall } from '@lynx-js/web-constants';
+import { type MainThreadStartConfigs, type NapiModulesCall, type NativeModulesCall } from '@lynx-js/web-constants';
 export declare function startUIThread(templateUrl: string, configs: Omit<MainThreadStartConfigs, 'template'>, rootDom: HTMLElement, callbacks: {
-    loadNewTag?: (tag: string) => void;
     nativeModulesCall: NativeModulesCall;
+    napiModulesCall: NapiModulesCall;
     onError?: () => void;
-}, overrideTagMap: Record<string, string> | undefined, nativeModulesUrl: string | undefined): LynxView;
+}): LynxView;

package/dist/uiThread/startUIThread.js

@@ -1,7 +1,6 @@
 // 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 { registerLoadNewTagHandler } from './crossThreadHandlers/registerLoadNewTagHandler.js';
 import { createExposureService } from './crossThreadHandlers/createExposureService.js';
 import { registerInvokeUIMethodHandler } from './crossThreadHandlers/registerInvokeUIMethodHandler.js';
 import { registerNativePropsHandler } from './crossThreadHandlers/registerSetNativePropsHandler.js';
@@ -13,13 +12,13 @@ import { createDispose } from './crossThreadHandlers/createDispose.js';
 import { bootTimingSystem } from './crossThreadHandlers/bootTimingSystem.js';
 import { registerTriggerComponentEventHandler } from './crossThreadHandlers/registerTriggerComponentEventHandler.js';
 import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
-import { flushElementTreeEndpoint, loadNewTagEndpoint, mainThreadChunkReadyEndpoint, mainThreadStartEndpoint, sendGlobalEventEndpoint, uiThreadFpReadyEndpoint, } from '@lynx-js/web-constants';
+import { flushElementTreeEndpoint, mainThreadChunkReadyEndpoint, mainThreadStartEndpoint, sendGlobalEventEndpoint, uiThreadFpReadyEndpoint, } from '@lynx-js/web-constants';
 import { loadTemplate } from '../utils/loadTemplate.js';
 import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
-export function startUIThread(templateUrl, configs, rootDom, callbacks, overrideTagMap = {}, nativeModulesUrl) {
+import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
+export function startUIThread(templateUrl, configs, rootDom, callbacks) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
-    const { entryId } = configs;
-    const currentLoadingTags = [];
+    const { nativeModulesMap, napiModulesMap } = configs;
     const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers();
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
     const uiThreadFpReady = backgroundRpc.createCall(uiThreadFpReadyEndpoint);
@@ -32,29 +31,17 @@ export function startUIThread(templateUrl, configs, rootDom, callbacks, override
         mainThreadStart({
             ...configs,
             template,
-            nativeModulesUrl,
+            nativeModulesMap,
+            napiModulesMap,
         });
     });
-    registerLoadNewTagHandler(mainThreadRpc, loadNewTagEndpoint, (tag) => {
-        if (callbacks.loadNewTag) {
-            callbacks.loadNewTag(tag);
-        }
-        else {
-            if (!customElements.get(tag) && tag.includes('-')) {
-                throw new Error(`[lynx-web] cannot find custom element ${tag}`);
-            }
-        }
-    }, overrideTagMap, currentLoadingTags);
     registerReportErrorHandler(mainThreadRpc, callbacks.onError);
     mainThreadRpc.registerHandler(mainThreadChunkReadyEndpoint, (mainChunkInfo) => {
         const { pageConfig } = mainChunkInfo;
         registerFlushElementTreeHandler(mainThreadRpc, flushElementTreeEndpoint, {
             pageConfig,
-            overrideTagMap,
             backgroundRpc,
             rootDom,
-            entryId,
-            currentLoadingTags,
         }, (info) => {
             const { pipelineId, timingFlags, isFP } = info;
             if (isFP) {
@@ -69,6 +56,7 @@ export function startUIThread(templateUrl, configs, rootDom, callbacks, override
         }, markTimingInternal);
     });
     registerNativeModulesCallHandler(backgroundRpc, callbacks.nativeModulesCall);
+    registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);
     return {
         updateData: createUpdateData(mainThreadRpc, backgroundRpc),
         dispose: createDispose(backgroundRpc, terminateWorkers),

package/dist/utils/browser.d.ts

@@ -1,3 +1,2 @@
 export declare const isChromium: boolean;
 export declare const isWebkit: boolean;
-export declare const supportAtScope = true;

package/dist/utils/browser.js

@@ -5,5 +5,4 @@ export const isWebkit = /\b(iPad|iPhone|iPod|OS X)\b/.test(UA)
     && /WebKit/.test(UA)
     // @ts-expect-error
     && !window.MSStream;
-export const supportAtScope = !!globalThis.CSSScopeRule;
 //# sourceMappingURL=browser.js.map

package/dist/utils/loadTemplate.js

@@ -29,6 +29,7 @@ function generateJavascriptUrl(obj, injectVars, injectWithBind, muteableVars) {
 const mainThreadInjectVars = [
     'lynx',
     'globalThis',
+    '_ReportError',
     '__AddConfig',
     '__AddDataset',
     '__GetAttributes',

package/index.css

@@ -3,17 +3,13 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-[lynx-default-display-linear="false"] * {
-  --lynx-display: flex;
-  --lynx-display-toggle: var(--lynx-display-flex);
-}
 
 lynx-view {
   contain: strict;
   display: flex;
 }
 
-lynx-view > #lynx-view-root {
+lynx-view::part(lynx-view-root) {
   display: contents;
   width: 100%;
   height: 100%;
@@ -24,7 +20,7 @@ lynx-view[height="auto"] {
   height: var(--lynx-view-height);
   block-size: var(--lynx-view-height);
 }
-lynx-view[height="auto"] > #lynx-view-root {
+lynx-view[height="auto"]::part(lynx-view-root) {
   height: unset;
 }
 
@@ -33,15 +29,15 @@ lynx-view[width="auto"] {
   width: var(--lynx-view-width);
   inline-size: var(--lynx-view-width);
 }
-lynx-view[width="auto"] > #lynx-view-root {
+lynx-view[width="auto"]::part(lynx-view-root) {
   width: unset;
 }
 
 lynx-view[height="auto"], lynx-view[width="auto"] {
   contain-intrinsic-size: var(--lynx-view-width) var(--lynx-view-height);
 }
-lynx-view[height="auto"] > #lynx-view-root,
-lynx-view[width="auto"] > #lynx-view-root {
+lynx-view[height="auto"]::part(lynx-view-root),
+lynx-view[width="auto"]::part(lynx-view-root) {
   display: unset;
   position: fixed;
   top: 0;
@@ -60,7 +56,7 @@ lynx-view[width="auto"] > #lynx-view-root {
   initial-value: 100%;
 }
 
-lynx-view:not([width="auto"]):not([height="auto"]) [lynx-tag="page"] {
+lynx-view:not([width="auto"]):not([height="auto"])::part(page) {
   height: 100%;
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,16 +24,16 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "0.7.1",
-    "@lynx-js/web-worker-rpc": "0.7.1",
-    "@lynx-js/web-worker-runtime": "0.7.1"
+    "@lynx-js/web-constants": "0.9.0",
+    "@lynx-js/web-worker-rpc": "0.9.0",
+    "@lynx-js/web-worker-runtime": "0.9.0"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.0",
-    "@lynx-js/web-elements": "0.3.0"
+    "@lynx-js/web-elements": "0.5.0"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.0",
-    "@lynx-js/web-elements": ">=0.1.0"
+    "@lynx-js/web-elements": ">=0.3.1"
   }
 }

package/dist/uiThread/crossThreadHandlers/registerLoadNewTagHandler.d.ts

@@ -1,3 +0,0 @@
-import type { Rpc } from '@lynx-js/web-worker-rpc';
-import type { loadNewTagEndpoint } from '@lynx-js/web-constants';
-export declare function registerLoadNewTagHandler(rpc: Rpc, endpoint: typeof loadNewTagEndpoint, loadTag: (tag: string) => void, tagMap: Record<string, string>, currentLoadingTags: Promise<any>[]): void;

package/dist/uiThread/crossThreadHandlers/registerLoadNewTagHandler.js

@@ -1,7 +0,0 @@
-import { getElementTag } from '../getElementTag.js';
-export function registerLoadNewTagHandler(rpc, endpoint, loadTag, tagMap, currentLoadingTags) {
-    rpc.registerHandler(endpoint, (tag) => {
-        loadTag(getElementTag(tag, tagMap, currentLoadingTags));
-    });
-}
-//# sourceMappingURL=registerLoadNewTagHandler.js.map

package/dist/uiThread/getElementTag.d.ts

@@ -1 +0,0 @@
-export declare function getElementTag(tag: string, tagMap: Record<string, string>, currentLoadingTags?: Promise<any>[]): string;

package/dist/uiThread/getElementTag.js

@@ -1,20 +0,0 @@
-// 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.
-export function getElementTag(tag, tagMap, currentLoadingTags) {
-    if (tagMap[tag]) {
-        return tagMap[tag];
-    }
-    if (customElements.get(tag)) {
-        tagMap[tag] = tag;
-        return tag;
-    }
-    const normizedTag = tag.includes('-') ? tag : `x-${tag}`;
-    if (customElements.get(normizedTag)) {
-        tagMap[tag] = normizedTag;
-        return normizedTag;
-    }
-    currentLoadingTags?.push(customElements.whenDefined(normizedTag));
-    return normizedTag;
-}
-//# sourceMappingURL=getElementTag.js.map