@lynx-js/web-core 0.15.0 → 0.15.2

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @lynx-js/web-core
 
+## 0.15.2
+
+### Patch Changes
+
+- feat: support SSR for all-on-ui ([#1029](https://github.com/lynx-family/lynx-stack/pull/1029))
+
+- feat: move SSR hydrate essential info to the ssr attribute ([#1292](https://github.com/lynx-family/lynx-stack/pull/1292))
+
+  We found that in browser there is no simple tool to decode a base64 string
+
+  Therefore we move the data to `ssr` attribute
+
+  Also fix some ssr issues
+
+- feat: support \_\_MarkTemplateElement, \_\_MarkPartElement and \_\_GetTemplateParts for all-on-ui ([#1275](https://github.com/lynx-family/lynx-stack/pull/1275))
+
+- feat: mark template elements for SSR and update part ID handling ([#1286](https://github.com/lynx-family/lynx-stack/pull/1286))
+
+- Updated dependencies [[`cebda59`](https://github.com/lynx-family/lynx-stack/commit/cebda592ac5c7d152c877c2ac5ec403d477077e1), [`1443e46`](https://github.com/lynx-family/lynx-stack/commit/1443e468a353363e29aab0d90cd8b91c232a5525), [`5062128`](https://github.com/lynx-family/lynx-stack/commit/5062128c68e21abcf276ebcb40d7cc8f6e54244b), [`f656b7f`](https://github.com/lynx-family/lynx-stack/commit/f656b7f0d390d69c0da0d11a6c9b3f66ae877ac8)]:
+  - @lynx-js/web-mainthread-apis@0.15.2
+  - @lynx-js/web-constants@0.15.2
+  - @lynx-js/web-worker-runtime@0.15.2
+  - @lynx-js/web-worker-rpc@0.15.2
+
+## 0.15.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/web-mainthread-apis@0.15.1
+  - @lynx-js/web-worker-runtime@0.15.1
+  - @lynx-js/web-constants@0.15.1
+  - @lynx-js/web-worker-rpc@0.15.1
+
 ## 0.15.0
 
 ### Minor Changes

package/dist/apis/LynxView.js

@@ -247,6 +247,7 @@ export class LynxView extends HTMLElement {
      * reload the current page
      */
     reload() {
+        this.removeAttribute('ssr');
         this.#render();
     }
     /**
@@ -341,6 +342,7 @@ export class LynxView extends HTMLElement {
             this.#rendering = true;
             queueMicrotask(() => {
                 this.#rendering = false;
+                const ssrData = this.getAttribute('ssr');
                 if (this.#instance) {
                     this.disconnectedCallback();
                 }
@@ -402,23 +404,28 @@ export class LynxView extends HTMLElement {
                             },
                             customTemplateLoader: this.customTemplateLoader,
                         },
+                        ssr: ssrData
+                            ? JSON.parse(decodeURI(ssrData))
+                            : undefined,
                     });
                     this.#instance = lynxView;
-                    const styleElement = document.createElement('style');
-                    this.shadowRoot.append(styleElement);
-                    const styleSheet = styleElement.sheet;
-                    for (const rule of inShadowRootStyles) {
-                        styleSheet.insertRule(rule);
-                    }
-                    for (const rule of this.injectStyleRules) {
-                        styleSheet.insertRule(rule);
-                    }
-                    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}");`);
-                        });
+                    if (!ssrData) {
+                        const styleElement = document.createElement('style');
+                        this.shadowRoot.append(styleElement);
+                        const styleSheet = styleElement.sheet;
+                        for (const rule of inShadowRootStyles) {
+                            styleSheet.insertRule(rule);
+                        }
+                        for (const rule of this.injectStyleRules) {
+                            styleSheet.insertRule(rule);
+                        }
+                        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}");`);
+                            });
+                        }
                     }
                 }
             });

package/dist/apis/createLynxView.d.ts

@@ -1,4 +1,4 @@
-import type { Cloneable, I18nResourceTranslationOptions, InitI18nResources, NapiModulesMap, NativeModulesMap, sendGlobalEventEndpoint, UpdateDataType } from '@lynx-js/web-constants';
+import type { Cloneable, SSRDumpInfo, I18nResourceTranslationOptions, InitI18nResources, NapiModulesMap, NativeModulesMap, sendGlobalEventEndpoint, UpdateDataType } from '@lynx-js/web-constants';
 import { type StartUIThreadCallbacks } from '../uiThread/startUIThread.js';
 import type { RpcCallType } from '@lynx-js/web-worker-rpc';
 export interface LynxViewConfigs {
@@ -13,6 +13,7 @@ export interface LynxViewConfigs {
     lynxGroupId: number | undefined;
     threadStrategy: 'all-on-ui' | 'multi-thread';
     initI18nResources: InitI18nResources;
+    ssr?: SSRDumpInfo;
 }
 export interface LynxView {
     updateData(data: Cloneable, updateDataType: UpdateDataType, callback?: () => void): void;

package/dist/apis/createLynxView.js

@@ -6,7 +6,7 @@ const pixelRatio = window.devicePixelRatio;
 const screenWidth = window.screen.availWidth * pixelRatio;
 const screenHeight = window.screen.availHeight * pixelRatio;
 export function createLynxView(configs) {
-    const { shadowRoot, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, lynxGroupId, threadStrategy = 'multi-thread', initI18nResources, } = configs;
+    const { shadowRoot, callbacks, templateUrl, globalProps, initData, nativeModulesMap, napiModulesMap, tagMap, lynxGroupId, threadStrategy = 'multi-thread', initI18nResources, ssr, } = configs;
     return startUIThread(templateUrl, {
         tagMap,
         initData,
@@ -19,6 +19,6 @@ export function createLynxView(configs) {
             pixelHeight: screenHeight,
         },
         initI18nResources,
-    }, shadowRoot, lynxGroupId, threadStrategy, callbacks);
+    }, shadowRoot, lynxGroupId, threadStrategy, callbacks, ssr);
 }
 //# sourceMappingURL=createLynxView.js.map

package/dist/uiThread/createRenderAllOnUI.d.ts

@@ -1,8 +1,8 @@
-import { type StartMainThreadContextConfig, type Cloneable } from '@lynx-js/web-constants';
+import { type StartMainThreadContextConfig, type Cloneable, type SSRDumpInfo } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 export declare function createRenderAllOnUI(mainToBackgroundRpc: Rpc, shadowRoot: ShadowRoot, markTimingInternal: (timingKey: string, pipelineId?: string, timeStamp?: number) => void, flushMarkTimingInternal: () => void, callbacks: {
     onError?: (err: Error, release: string, fileName: string) => void;
-}): {
+}, ssrDumpInfo: SSRDumpInfo | undefined): {
     start: (configs: StartMainThreadContextConfig) => Promise<void>;
     updateDataMainThread: (args_0: Cloneable, args_1: Record<string, string>) => Promise<void>;
     updateI18nResourcesMainThread: (data: Cloneable) => void;

package/dist/uiThread/createRenderAllOnUI.js

@@ -1,12 +1,12 @@
 // 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 { i18nResourceMissedEventName, I18nResources, } from '@lynx-js/web-constants';
+import { i18nResourceMissedEventName, I18nResources, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 import { dispatchLynxViewEvent } from '../utils/dispatchLynxViewEvent.js';
 import { createExposureMonitor } from './crossThreadHandlers/createExposureMonitor.js';
 const { prepareMainThreadAPIs, } = await import('@lynx-js/web-mainthread-apis');
-export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, callbacks) {
+export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, callbacks, ssrDumpInfo) {
     if (!globalThis.module) {
         Object.assign(globalThis, { module: {} });
     }
@@ -23,8 +23,39 @@ export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingI
     });
     let mtsGlobalThis;
     const start = async (configs) => {
-        const mainThreadRuntime = startMainThread(configs);
-        mtsGlobalThis = await mainThreadRuntime;
+        if (ssrDumpInfo) {
+            const lynxUniqueIdToElement = [];
+            const allLynxElements = shadowRoot.querySelectorAll(`[${lynxUniqueIdAttribute}]`);
+            const length = allLynxElements.length;
+            for (let ii = 0; ii < length; ii++) {
+                const element = allLynxElements[ii];
+                const lynxUniqueId = Number(element.getAttribute(lynxUniqueIdAttribute));
+                lynxUniqueIdToElement[lynxUniqueId] = new WeakRef(element);
+            }
+            const hydrateStyleElement = shadowRoot.querySelector(`style:nth-of-type(2)`);
+            const styleSheet = hydrateStyleElement?.sheet;
+            const lynxUniqueIdToStyleRulesIndex = [];
+            const cssRulesLength = styleSheet?.cssRules.length ?? 0;
+            for (let ii = 0; ii < cssRulesLength; ii++) {
+                const cssRule = styleSheet?.cssRules[ii];
+                if (cssRule?.constructor.name === 'CSSStyleRule') {
+                    const lynxUniqueId = parseFloat(cssRule.selectorText.substring(lynxUniqueIdAttribute.length + 3));
+                    if (lynxUniqueId !== undefined && !isNaN(lynxUniqueId)) {
+                        lynxUniqueIdToStyleRulesIndex[lynxUniqueId] = ii;
+                    }
+                }
+            }
+            mtsGlobalThis = await startMainThread(configs, {
+                // @ts-expect-error
+                lynxUniqueIdToElement: lynxUniqueIdToElement,
+                lynxUniqueIdToStyleRulesIndex,
+                ...ssrDumpInfo,
+                cardStyleElement: hydrateStyleElement,
+            });
+        }
+        else {
+            mtsGlobalThis = await startMainThread(configs);
+        }
     };
     const updateDataMainThread = async (...args) => {
         mtsGlobalThis.updatePage?.(...args);

package/dist/uiThread/startUIThread.d.ts

@@ -1,9 +1,9 @@
 import type { LynxView } from '../apis/createLynxView.js';
-import { type LynxTemplate, type StartMainThreadContextConfig, type NapiModulesCall, type NativeModulesCall } from '@lynx-js/web-constants';
+import { type LynxTemplate, type StartMainThreadContextConfig, type NapiModulesCall, type NativeModulesCall, type SSRDumpInfo } from '@lynx-js/web-constants';
 export type StartUIThreadCallbacks = {
     nativeModulesCall: NativeModulesCall;
     napiModulesCall: NapiModulesCall;
     onError?: (err: Error, release: string, fileName: string) => void;
     customTemplateLoader?: (url: string) => Promise<LynxTemplate>;
 };
-export declare function startUIThread(templateUrl: string, configs: Omit<StartMainThreadContextConfig, 'template'>, shadowRoot: ShadowRoot, lynxGroupId: number | undefined, threadStrategy: 'all-on-ui' | 'multi-thread', callbacks: StartUIThreadCallbacks): LynxView;
+export declare function startUIThread(templateUrl: string, configs: Omit<StartMainThreadContextConfig, 'template'>, shadowRoot: ShadowRoot, lynxGroupId: number | undefined, threadStrategy: 'all-on-ui' | 'multi-thread', callbacks: StartUIThreadCallbacks, ssr?: SSRDumpInfo): LynxView;

package/dist/uiThread/startUIThread.js

@@ -9,7 +9,7 @@ import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
 import { startBackground } from './startBackground.js';
 import { createRenderMultiThread } from './createRenderMultiThread.js';
 import { createRenderAllOnUI } from './createRenderAllOnUI.js';
-export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, threadStrategy, callbacks) {
+export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, threadStrategy, callbacks, ssr) {
     const createLynxStartTiming = performance.now() + performance.timeOrigin;
     const allOnUI = threadStrategy === 'all-on-ui';
     const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers(lynxGroupId, allOnUI);
@@ -30,7 +30,7 @@ export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, thr
     const flushMarkTimingInternal = () => flushMarkTiming(markTiming, cacheMarkTimings);
     const { start, updateDataMainThread, updateI18nResourcesMainThread } = allOnUI
         ? createRenderAllOnUI(
-        /* main-to-bg rpc*/ mainThreadRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, callbacks)
+        /* main-to-bg rpc*/ mainThreadRpc, shadowRoot, markTimingInternal, flushMarkTimingInternal, callbacks, ssr)
         : createRenderMultiThread(
         /* main-to-ui rpc*/ mainThreadRpc, shadowRoot, callbacks);
     markTimingInternal('create_lynx_start', undefined, createLynxStartTiming);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,14 +25,14 @@
   ],
   "dependencies": {
     "@lynx-js/offscreen-document": "0.1.3",
-    "@lynx-js/web-constants": "0.15.0",
-    "@lynx-js/web-mainthread-apis": "0.15.0",
-    "@lynx-js/web-worker-rpc": "0.15.0",
-    "@lynx-js/web-worker-runtime": "0.15.0"
+    "@lynx-js/web-constants": "0.15.2",
+    "@lynx-js/web-mainthread-apis": "0.15.2",
+    "@lynx-js/web-worker-rpc": "0.15.2",
+    "@lynx-js/web-worker-runtime": "0.15.2"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.2",
-    "@lynx-js/web-elements": "0.8.0"
+    "@lynx-js/web-elements": "0.8.1"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.2",