npm - @lynx-js/web-core - Versions diffs - 0.7.0 → 0.8.0 - Mend

@lynx-js/web-core 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/CHANGELOG.md +158 -0
package/dist/apis/LynxView.d.ts +20 -1
package/dist/apis/LynxView.js +55 -9
package/dist/apis/createLynxView.d.ts +2 -1
package/dist/apis/createLynxView.js +3 -5
package/dist/apis/inShadowRootStyles.d.ts +1 -0
package/dist/apis/inShadowRootStyles.js +7 -0
package/dist/uiThread/bootWorkers.js +2 -0
package/dist/uiThread/crossThreadHandlers/bootTimingSystem.js +1 -0
package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.d.ts +0 -1
package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.js +32 -46
package/dist/uiThread/crossThreadHandlers/registerNapiModulesCallHandler.d.ts +3 -0
package/dist/uiThread/crossThreadHandlers/registerNapiModulesCallHandler.js +5 -0
package/dist/uiThread/decodeElementOperation.js +1 -6
package/dist/uiThread/startUIThread.d.ts +2 -2
package/dist/uiThread/startUIThread.js +5 -15
package/dist/utils/browser.d.ts +0 -1
package/dist/utils/browser.js +0 -1
package/dist/utils/loadTemplate.d.ts +1 -1
package/dist/utils/loadTemplate.js +71 -11
package/index.css +6 -10
package/package.json +11 -6
package/dist/uiThread/crossThreadHandlers/registerLoadNewTagHandler.d.ts +0 -3
package/dist/uiThread/crossThreadHandlers/registerLoadNewTagHandler.js +0 -7

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,163 @@
 # @lynx-js/web-core
+## 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
+- Support NPM provenance. ([#30](https://github.com/lynx-family/lynx-stack/pull/30))
+- fix: some valus should be updateable by global scope ([#130](https://github.com/lynx-family/lynx-stack/pull/130))
+  Now we add an allowlist to allow some identifiers could be updated by globalThis.
+  For those values in the allowlist:
+  ```
+  globalThis.foo = 'xx';
+  console.log(foo); //'xx'
+  ```
+- refactor: isolate the globalThis in mts ([#90](https://github.com/lynx-family/lynx-stack/pull/90))
+  After this commit, developers' mts code won't be able to access the globalThis
+  The following usage will NOT work
+  ```
+  globalThis.foo = () =>{};
+  foo();//crash
+  ```
+- refractor: improve some internal logic for element creating in MTS ([#71](https://github.com/lynx-family/lynx-stack/pull/71))
+- Updated dependencies [[`c617453`](https://github.com/lynx-family/lynx-stack/commit/c617453aea967aba702967deb2916b5c883f03bb), [`2044571`](https://github.com/lynx-family/lynx-stack/commit/204457166531dae6e9f653db56b14187553b7666), [`7da7601`](https://github.com/lynx-family/lynx-stack/commit/7da7601f00407970c485046ad73eeb8534aaa4f6)]:
+  - @lynx-js/web-worker-runtime@0.7.1
+  - @lynx-js/web-worker-rpc@0.7.1
+  - @lynx-js/web-constants@0.7.1
 ## 0.7.0
 ### Minor Changes

package/dist/apis/LynxView.d.ts CHANGED Viewed

@@ -1,4 +1,7 @@
-import { type Cloneable, type NativeModulesCall, type UpdateDataType } from '@lynx-js/web-constants';
+import { type Cloneable, type NapiModulesCall, type NapiModulesMap, type NativeModulesCall, 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
@@ -8,6 +11,9 @@ import { type Cloneable, type NativeModulesCall, type UpdateDataType } from '@ly
  * @param {INativeModulesCall} 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
+ * @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
  *
  * @property entryId the currently Lynx view entryId.
  *
@@ -85,6 +91,18 @@ export declare class LynxView extends HTMLElement {
      */
     get nativeModulesUrl(): string | undefined;
     set nativeModulesUrl(val: string);
+    /**
+     * @param
+     * @property
+     */
+    get napiModulesMap(): NapiModulesMap | undefined;
+    set napiModulesMap(map: NapiModulesMap);
+    /**
+     * @param
+     * @property
+     */
+    get onNapiModulesCall(): NapiModulesCall | undefined;
+    set onNapiModulesCall(handler: NapiModulesCall);
     /**
      * @public
      * "auto" for auto calculated height
@@ -134,4 +152,5 @@ export declare class LynxView extends HTMLElement {
      * @private
      */
     connectedCallback(): void;
+    private cleanupResizeObserver;
 }

package/dist/apis/LynxView.js CHANGED Viewed

@@ -3,15 +3,10 @@
 // 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 { 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
@@ -21,6 +16,9 @@ loadElement('scroll-view');
  * @param {INativeModulesCall} 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
+ * @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
  *
  * @property entryId the currently Lynx view entryId.
  *
@@ -159,6 +157,28 @@ export class LynxView extends HTMLElement {
     set nativeModulesUrl(val) {
         this.#nativeModulesUrl = val;
     }
+    #napiModulesMap = {};
+    /**
+     * @param
+     * @property
+     */
+    get napiModulesMap() {
+        return this.#napiModulesMap;
+    }
+    set napiModulesMap(map) {
+        this.#napiModulesMap = map;
+    }
+    #onNapiModulesCall;
+    /**
+     * @param
+     * @property
+     */
+    get onNapiModulesCall() {
+        return this.#onNapiModulesCall;
+    }
+    set onNapiModulesCall(handler) {
+        this.#onNapiModulesCall = handler;
+    }
     #autoHeight = false;
     #autoWidth = false;
     #currentWidth = 0;
@@ -281,12 +301,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
@@ -322,8 +345,8 @@ export class LynxView extends HTMLElement {
                         initData: this.#initData,
                         overrideLynxTagToHTMLTagMap: this.#overrideLynxTagToHTMLTagMap,
                         nativeModulesUrl: this.#nativeModulesUrl,
+                        napiModulesMap: this.#napiModulesMap,
                         callbacks: {
-                            loadNewTag: loadElement,
                             nativeModulesCall: (...args) => {
                                 if (this.#onNativeModulesCall) {
                                     return this.#onNativeModulesCall(...args);
@@ -335,6 +358,9 @@ export class LynxView extends HTMLElement {
                                     this.#cachedNativeModulesCall = [args];
                                 }
                             },
+                            napiModulesCall: (...args) => {
+                                return this.#onNapiModulesCall?.(...args);
+                            },
                             onError: () => {
                                 this.dispatchEvent(new CustomEvent('error', {
                                     detail: commonEventDetail,
@@ -347,7 +373,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 +398,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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { Cloneable, UpdateDataType } from '@lynx-js/web-constants';
+import type { Cloneable, NapiModulesMap, UpdateDataType } from '@lynx-js/web-constants';
 import { startUIThread } from '../uiThread/startUIThread.js';
 export interface LynxViewConfigs {
     templateUrl: string;
@@ -9,6 +9,7 @@ export interface LynxViewConfigs {
     callbacks: Parameters<typeof startUIThread>[3];
     overrideLynxTagToHTMLTagMap?: Record<string, string>;
     nativeModulesUrl: string | undefined;
+    napiModulesMap: NapiModulesMap;
 }
 export interface LynxView {
     updateData(data: Cloneable, updateDataType: UpdateDataType, callback?: () => void): void;

package/dist/apis/createLynxView.js CHANGED Viewed

@@ -2,16 +2,14 @@
 // 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, entryId, initData, overrideLynxTagToHTMLTagMap, nativeModulesUrl, napiModulesMap, } = configs;
     return startUIThread(templateUrl, {
         initData,
         globalProps,
         entryId,
-        browserConfig: {
-            supportAtScope,
-        },
+        napiModulesMap,
+        browserConfig: {},
     }, rootDom, callbacks, overrideLynxTagToHTMLTagMap, nativeModulesUrl);
 }
 //# sourceMappingURL=createLynxView.js.map

package/dist/apis/inShadowRootStyles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -7,7 +7,6 @@ export declare function registerFlushElementTreeHandler(mainThreadRpc: Rpc, endp
     backgroundRpc: Rpc;
     rootDom: HTMLElement;
     entryId: string;
-    currentLoadingTags: Promise<void>[];
 }, onCommit: (info: {
     pipelineId: string | undefined;
     timingFlags: string[];

package/dist/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.js CHANGED Viewed

@@ -5,7 +5,6 @@ import { cardIdAttribute, componentIdAttribute, lynxDefaultDisplayLinearAttribut
 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);
     if (pageConfig.defaultDisplayLinear === false) {
@@ -13,18 +12,13 @@ function applyPageAttributes(page, pageConfig, entryId) {
     }
 }
 export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, options, onCommit, markTimingInternal) {
-    const { pageConfig, overrideTagMap, backgroundRpc, rootDom, entryId, currentLoadingTags, } = options;
+    const { pageConfig, overrideTagMap, backgroundRpc, rootDom, entryId, } = 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);
@@ -36,14 +30,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);
@@ -78,37 +66,35 @@ export function registerFlushElementTreeHandler(mainThreadRpc, endpoint, 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, {
+            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,
         });
     });
     return { uniqueIdToElement, uniqueIdToCssInJsRule };

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

@@ -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 ADDED Viewed

@@ -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.js CHANGED Viewed

@@ -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, parentComponentUniqueIdAttribute, __lynx_timing_flag, } from '@lynx-js/web-constants';
+import { cssIdAttribute, lynxTagAttribute, lynxUniqueIdAttribute, OperationType, lynxRuntimeValue, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, W3cEventNameToLynx, __lynx_timing_flag, } from '@lynx-js/web-constants';
 function getElement(uniqueId, uniqueIdToElement) {
     const element = uniqueIdToElement[uniqueId]?.deref();
     if (element) {
@@ -47,9 +47,6 @@ export function decodeElementOperation(operations, options) {
             if (typeof op.cssId === 'number') {
                 element.setAttribute(cssIdAttribute, op.cssId.toString());
             }
-            if (op.puid) {
-                element.setAttribute(parentComponentUniqueIdAttribute, op.puid);
-            }
             if (op.tag === 'page')
                 pageElement = element;
         }
@@ -144,11 +141,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 CHANGED Viewed

@@ -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;

package/dist/uiThread/startUIThread.js CHANGED Viewed

@@ -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';
+import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
 export function startUIThread(templateUrl, configs, rootDom, callbacks, overrideTagMap = {}, nativeModulesUrl) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
-    const { entryId } = configs;
-    const currentLoadingTags = [];
+    const { entryId, napiModulesMap } = configs;
     const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers();
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
     const uiThreadFpReady = backgroundRpc.createCall(uiThreadFpReadyEndpoint);
@@ -33,18 +32,9 @@ export function startUIThread(templateUrl, configs, rootDom, callbacks, override
             ...configs,
             template,
             nativeModulesUrl,
+            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;
@@ -54,7 +44,6 @@ export function startUIThread(templateUrl, configs, rootDom, callbacks, override
             backgroundRpc,
             rootDom,
             entryId,
-            currentLoadingTags,
         }, (info) => {
             const { pipelineId, timingFlags, isFP } = info;
             if (isFP) {
@@ -69,6 +58,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 CHANGED Viewed

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

package/dist/utils/browser.js CHANGED Viewed

@@ -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.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import type { LynxTemplate } from '@lynx-js/web-constants';
+import { type LynxTemplate } from '@lynx-js/web-constants';
 export declare function loadTemplate(url: string): Promise<LynxTemplate>;

package/dist/utils/loadTemplate.js CHANGED Viewed

@@ -1,25 +1,85 @@
+import { globalMuteableVars } from '@lynx-js/web-constants';
 const TemplateCache = {};
 function createJsModuleUrl(content) {
     return URL.createObjectURL(new Blob([content], { type: 'text/javascript' }));
 }
-function generateJavascriptUrl(obj, injectVars, injectWithBind) {
+function generateJavascriptUrl(obj, injectVars, injectWithBind, muteableVars) {
+    injectVars = injectVars.concat(muteableVars);
     return Object.fromEntries(Object.entries(obj).map(([name, content]) => {
         return [
             name,
-            createJsModuleUrl(`globalThis.module.exports = function(lynx_runtime) {
-const module= {exports:{}};let exports = module.exports;
-var {${injectVars.join(',')}} = lynx_runtime;
-${injectWithBind.map((nm) => `const ${nm} = lynx_runtime.${nm}?.bind(lynx_runtime)`).join(';')}
-var globDynamicComponentEntry = '__Card__';
-var {__globalProps} = lynx;
-${content}
-return module.exports;}`),
+            createJsModuleUrl([
+                'globalThis.module.exports = function(lynx_runtime) {',
+                'const module= {exports:{}};let exports = module.exports;',
+                'var {',
+                injectVars.join(','),
+                '} = lynx_runtime;',
+                ...injectWithBind.map((nm) => `const ${nm} = lynx_runtime.${nm}?.bind(lynx_runtime);`),
+                ';var globDynamicComponentEntry = \'__Card__\';',
+                'var {__globalProps} = lynx;',
+                'lynx_runtime._updateVars=()=>{',
+                ...muteableVars.map((nm) => `${nm} = lynx_runtime.__lynxGlobalBindingValues.${nm};`),
+                '};\n',
+                content,
+                '\n return module.exports;}',
+            ].join('')),
         ];
     }));
 }
 const mainThreadInjectVars = [
     'lynx',
     'globalThis',
+    '__AddConfig',
+    '__AddDataset',
+    '__GetAttributes',
+    '__GetComponentID',
+    '__GetDataByKey',
+    '__GetDataset',
+    '__GetElementConfig',
+    '__GetElementUniqueID',
+    '__GetID',
+    '__GetTag',
+    '__SetAttribute',
+    '__SetConfig',
+    '__SetDataset',
+    '__SetID',
+    '__UpdateComponentID',
+    '__GetConfig',
+    '__UpdateListCallbacks',
+    '__AppendElement',
+    '__ElementIsEqual',
+    '__FirstElement',
+    '__GetChildren',
+    '__GetParent',
+    '__InsertElementBefore',
+    '__LastElement',
+    '__NextElement',
+    '__RemoveElement',
+    '__ReplaceElement',
+    '__ReplaceElements',
+    '__SwapElement',
+    '__CreateComponent',
+    '__CreateElement',
+    '__CreatePage',
+    '__CreateView',
+    '__CreateText',
+    '__CreateRawText',
+    '__CreateImage',
+    '__CreateScrollView',
+    '__CreateWrapperElement',
+    '__CreateList',
+    '__AddEvent',
+    '__GetEvent',
+    '__GetEvents',
+    '__SetEvents',
+    '__AddClass',
+    '__SetClasses',
+    '__GetClasses',
+    '__AddInlineStyle',
+    '__SetInlineStyles',
+    '__SetCSSId',
+    '__OnLifecycleEvent',
+    '__FlushElementTree',
 ];
 const backgroundInjectVars = [
     'NativeModules',
@@ -40,8 +100,8 @@ export async function loadTemplate(url) {
     })).json());
     const decodedTemplate = {
         ...template,
-        lepusCode: generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, []),
-        manifest: generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind),
+        lepusCode: generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, [], globalMuteableVars),
+        manifest: generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind, []),
     };
     TemplateCache[url] = decodedTemplate;
     /**

package/index.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,9 +1,14 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": false,
   "description": "",
   "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lynx-family/lynx-stack.git",
+    "directory": "packages/web-platform/web-core"
+  },
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/index.js",
@@ -19,16 +24,16 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "0.7.0",
-    "@lynx-js/web-worker-rpc": "0.7.0",
-    "@lynx-js/web-worker-runtime": "0.7.0"
+    "@lynx-js/web-constants": "0.8.0",
+    "@lynx-js/web-worker-rpc": "0.8.0",
+    "@lynx-js/web-worker-runtime": "0.8.0"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.0",
-    "@lynx-js/web-elements": "0.2.4"
+    "@lynx-js/web-elements": "0.4.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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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