@lynx-js/web-mainthread-apis 0.15.0 → 0.15.2

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @lynx-js/web-mainthread-apis
 
+## 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 [[`1443e46`](https://github.com/lynx-family/lynx-stack/commit/1443e468a353363e29aab0d90cd8b91c232a5525), [`5062128`](https://github.com/lynx-family/lynx-stack/commit/5062128c68e21abcf276ebcb40d7cc8f6e54244b)]:
+  - @lynx-js/web-constants@0.15.2
+
+## 0.15.1
+
+### Patch Changes
+
+- Updated dependencies [[`e59138b`](https://github.com/lynx-family/lynx-stack/commit/e59138b3c2285ce83a2927ee046671b9015acdfd)]:
+  - @lynx-js/web-style-transformer@0.3.3
+  - @lynx-js/web-constants@0.15.1
+
 ## 0.15.0
 
 ### Minor Changes

package/dist/createMainThreadGlobalThis.d.ts

@@ -1,4 +1,4 @@
-import { type LynxTemplate, type PageConfig, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type LynxJSModule, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions } from '@lynx-js/web-constants';
+import { type LynxTemplate, type PageConfig, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type LynxJSModule, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions, type SSRHydrateInfo, type SSRDehydrateHooks } from '@lynx-js/web-constants';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
     flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[], exposureChangedElements: WebFiberElementImpl[]) => void;
@@ -19,7 +19,9 @@ export interface MainThreadRuntimeConfig {
     lepusCode: Record<string, LynxJSModule>;
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
-    rootDom: Pick<Element, 'append' | 'addEventListener'>;
+    rootDom: Pick<Element, 'append' | 'addEventListener'> & Partial<Pick<Element, 'querySelectorAll'>>;
     jsContext: LynxContextEventTarget;
+    ssrHydrateInfo?: SSRHydrateInfo;
+    ssrHooks?: SSRDehydrateHooks;
 }
 export declare function createMainThreadGlobalThis(config: MainThreadRuntimeConfig): MainThreadGlobalThis;

package/dist/createMainThreadGlobalThis.js

@@ -5,7 +5,7 @@ import { lynxUniqueIdAttribute, systemInfo, parentComponentUniqueIdAttribute, co
 import { globalMuteableVars } from '@lynx-js/web-constants';
 import { createMainThreadLynx } from './createMainThreadLynx.js';
 import { flattenStyleInfo, genCssContent, genCssOGInfo, transformToWebCss, } from './utils/processStyleInfo.js';
-import { __AddClass, __AddConfig, __AddDataset, __AddInlineStyle, __AppendElement, __ElementIsEqual, __FirstElement, __GetAttributes, __GetChildren, __GetClasses, __GetComponentID, __GetDataByKey, __GetDataset, __GetElementConfig, __GetElementUniqueID, __GetID, __GetParent, __GetTag, __InsertElementBefore, __LastElement, __NextElement, __RemoveElement, __ReplaceElement, __ReplaceElements, __SetClasses, __SetConfig, __SetCSSId, __SetDataset, __SetID, __SetInlineStyles, __UpdateComponentID, } from './pureElementPAPIs.js';
+import { __AddClass, __AddConfig, __AddDataset, __AddInlineStyle, __AppendElement, __ElementIsEqual, __FirstElement, __GetAttributes, __GetChildren, __GetClasses, __GetComponentID, __GetDataByKey, __GetDataset, __GetElementConfig, __GetElementUniqueID, __GetID, __GetParent, __GetTag, __GetTemplateParts, __InsertElementBefore, __LastElement, __MarkPartElement, __MarkTemplateElement, __NextElement, __RemoveElement, __ReplaceElement, __ReplaceElements, __SetClasses, __SetConfig, __SetCSSId, __SetDataset, __SetID, __SetInlineStyles, __UpdateComponentID, } from './pureElementPAPIs.js';
 import { createCrossThreadEvent } from './utils/createCrossThreadEvent.js';
 import { decodeCssOG } from './utils/decodeCssOG.js';
 const exposureRelatedAttributes = new Set([
@@ -21,14 +21,15 @@ const exposureRelatedAttributes = new Set([
     'exposure-ui-margin-left',
 ]);
 export function createMainThreadGlobalThis(config) {
-    let pageElement;
-    let uniqueIdInc = 1;
     let timingFlags = [];
     let renderPage;
-    const { callbacks, tagMap, pageConfig, lepusCode, rootDom, globalProps, styleInfo, } = config;
-    const lynxUniqueIdToElement = [];
+    const { callbacks, tagMap, pageConfig, lepusCode, rootDom, globalProps, styleInfo, ssrHydrateInfo, ssrHooks, } = config;
+    const lynxUniqueIdToElement = ssrHydrateInfo?.lynxUniqueIdToElement ?? [];
+    const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
     const elementToRuntimeInfoMap = new WeakMap();
-    const lynxUniqueIdToStyleRulesIndex = [];
+    let pageElement = lynxUniqueIdToElement[1]
+        ?.deref();
+    let uniqueIdInc = lynxUniqueIdToElement.length || 1;
     /**
      * for "update" the globalThis.val in the main thread
      */
@@ -48,10 +49,15 @@ export function createMainThreadGlobalThis(config) {
     const cssOGInfo = pageConfig.enableCSSSelector
         ? {}
         : genCssOGInfo(styleInfo);
-    const cardStyleElement = callbacks.createElement('style');
-    cardStyleElement.innerHTML = genCssContent(styleInfo, pageConfig);
-    // @ts-expect-error
-    rootDom.append(cardStyleElement);
+    let cardStyleElement;
+    if (ssrHydrateInfo?.cardStyleElement) {
+        cardStyleElement = ssrHydrateInfo.cardStyleElement;
+    }
+    else {
+        cardStyleElement = callbacks.createElement('style');
+        cardStyleElement.innerHTML = genCssContent(styleInfo, pageConfig);
+        rootDom.append(cardStyleElement);
+    }
     const cardStyleElementSheet = cardStyleElement.sheet;
     const updateCssOGStyle = (uniqueId, newStyles) => {
         if (lynxUniqueIdToStyleRulesIndex[uniqueId] !== undefined) {
@@ -248,6 +254,7 @@ export function createMainThreadGlobalThis(config) {
         page.setAttribute(cssIdAttribute, cssID + '');
         page.setAttribute(parentComponentUniqueIdAttribute, '0');
         page.setAttribute(componentIdAttribute, componentID);
+        __MarkTemplateElement(page);
         if (pageConfig.defaultDisplayLinear === false) {
             page.setAttribute(lynxDefaultDisplayLinearAttribute, 'false');
         }
@@ -366,16 +373,18 @@ export function createMainThreadGlobalThis(config) {
         exposureChangedElements.clear();
         callbacks.flushElementTree(options, timingFlagsCopied, exposureChangedElementsArray);
     };
-    const __GetTemplateParts = () => {
-        return undefined;
-    };
     const __GetPageElement = () => {
         return pageElement;
     };
     let release = '';
     const isCSSOG = !pageConfig.enableCSSSelector;
     const mtsGlobalThis = {
-        __AddEvent,
+        __GetTemplateParts: rootDom.querySelectorAll
+            ? __GetTemplateParts
+            : undefined,
+        __MarkTemplateElement,
+        __MarkPartElement,
+        __AddEvent: ssrHooks?.__AddEvent ?? __AddEvent,
         __GetEvent,
         __GetEvents,
         __SetEvents,
@@ -426,7 +435,6 @@ export function createMainThreadGlobalThis(config) {
         __SetInlineStyles,
         __LoadLepusChunk,
         __GetPageElement,
-        __GetTemplateParts,
         __globalProps: globalProps,
         SystemInfo: {
             ...systemInfo,

package/dist/prepareMainThreadAPIs.d.ts

@@ -1,4 +1,4 @@
-import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type MainThreadGlobalThis, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources } from '@lynx-js/web-constants';
-export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, createElement: Document['createElement'], commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources): {
-    startMainThread: (config: StartMainThreadContextConfig) => Promise<MainThreadGlobalThis>;
+import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type MainThreadGlobalThis, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type SSRHydrateInfo, type SSRDehydrateHooks } from '@lynx-js/web-constants';
+export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, createElement: Document['createElement'], commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources, ssrHooks?: SSRDehydrateHooks): {
+    startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<MainThreadGlobalThis>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -9,7 +9,7 @@ import { createExposureService } from './utils/createExposureService.js';
 import { initTokenizer } from './utils/tokenizer.js';
 const initTokenizerPromise = initTokenizer();
 const moduleCache = {};
-export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources) {
+export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -17,7 +17,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
     const postExposure = backgroundThreadRpc.createCall(postExposureEndpoint);
     const dispatchI18nResource = backgroundThreadRpc.createCall(dispatchI18nResourceEndpoint);
     markTimingInternal('lepus_execute_start');
-    async function startMainThread(config) {
+    async function startMainThread(config, ssrHydrateInfo) {
         let isFp = true;
         const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, initI18nResources, } = config;
         const { styleInfo, pageConfig, customSections, cardType, lepusCode } = template;
@@ -55,6 +55,8 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
             styleInfo,
             lepusCode: lepusCodeLoaded,
             rootDom,
+            ssrHydrateInfo,
+            ssrHooks,
             callbacks: {
                 mainChunkReady: () => {
                     markTimingInternal('data_processor_start');
@@ -78,8 +80,22 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
                         napiModulesMap,
                         browserConfig,
                     });
-                    mtsGlobalThis.renderPage(initData);
-                    mtsGlobalThis.__FlushElementTree(undefined, {});
+                    if (!ssrHydrateInfo) {
+                        mtsGlobalThis.renderPage(initData);
+                        mtsGlobalThis.__FlushElementTree(undefined, {});
+                    }
+                    else {
+                        // replay the hydrate event
+                        for (const event of ssrHydrateInfo.events) {
+                            const uniqueId = event[0];
+                            const element = ssrHydrateInfo.lynxUniqueIdToElement[uniqueId]
+                                ?.deref();
+                            if (element) {
+                                mtsGlobalThis.__AddEvent(element, event[1], event[2], event[3]);
+                            }
+                        }
+                        mtsGlobalThis.ssrHydrate?.(ssrHydrateInfo.ssrEncodeData);
+                    }
                 },
                 flushElementTree: async (options, timingFlags, exposureChangedElements) => {
                     const pipelineId = options?.pipelineOptions?.pipelineID;

package/dist/pureElementPAPIs.d.ts

@@ -1,4 +1,4 @@
-import { type AddClassPAPI, type AddConfigPAPI, type AddDatasetPAPI, type AddInlineStylePAPI, type AppendElementPAPI, type ElementIsEqualPAPI, type FirstElementPAPI, type GetAttributesPAPI, type GetChildrenPAPI, type GetClassesPAPI, type GetComponentIdPAPI, type GetDataByKeyPAPI, type GetDatasetPAPI, type GetElementConfigPAPI, type GetElementUniqueIDPAPI, type GetIDPAPI, type GetParentPAPI, type GetTagPAPI, type InsertElementBeforePAPI, type LastElementPAPI, type NextElementPAPI, type RemoveElementPAPI, type ReplaceElementPAPI, type ReplaceElementsPAPI, type SetClassesPAPI, type SetConfigPAPI, type SetCSSIdPAPI, type SetDatasetPAPI, type SetIDPAPI, type SetInlineStylesPAPI, type UpdateComponentIDPAPI } from '@lynx-js/web-constants';
+import { type AddClassPAPI, type AddConfigPAPI, type AddDatasetPAPI, type AddInlineStylePAPI, type AppendElementPAPI, type ElementIsEqualPAPI, type FirstElementPAPI, type GetAttributesPAPI, type GetChildrenPAPI, type GetClassesPAPI, type GetComponentIdPAPI, type GetDataByKeyPAPI, type GetDatasetPAPI, type GetElementConfigPAPI, type GetElementUniqueIDPAPI, type GetIDPAPI, type GetParentPAPI, type GetTagPAPI, type GetTemplatePartsPAPI, type InsertElementBeforePAPI, type LastElementPAPI, type MarkPartElementPAPI, type MarkTemplateElementPAPI, type NextElementPAPI, type RemoveElementPAPI, type ReplaceElementPAPI, type ReplaceElementsPAPI, type SetClassesPAPI, type SetConfigPAPI, type SetCSSIdPAPI, type SetDatasetPAPI, type SetIDPAPI, type SetInlineStylesPAPI, type UpdateComponentIDPAPI } from '@lynx-js/web-constants';
 export declare const __AppendElement: AppendElementPAPI;
 export declare const __ElementIsEqual: ElementIsEqualPAPI;
 export declare const __FirstElement: FirstElementPAPI;
@@ -30,3 +30,6 @@ export declare const __SetClasses: SetClassesPAPI;
 export declare const __AddInlineStyle: AddInlineStylePAPI;
 export declare const __AddClass: AddClassPAPI;
 export declare const __SetInlineStyles: SetInlineStylesPAPI;
+export declare const __GetTemplateParts: GetTemplatePartsPAPI;
+export declare const __MarkTemplateElement: MarkTemplateElementPAPI;
+export declare const __MarkPartElement: MarkPartElementPAPI;

package/dist/pureElementPAPIs.js

@@ -1,14 +1,14 @@
 // Copyright 2023 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { componentIdAttribute, cssIdAttribute, lynxComponentConfigAttribute, lynxDatasetAttribute, lynxTagAttribute, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
+import { componentIdAttribute, cssIdAttribute, lynxComponentConfigAttribute, lynxDatasetAttribute, lynxElementTemplateMarkerAttribute, lynxPartIdAttribute, lynxTagAttribute, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
 import { queryCSSProperty } from './style/cssPropertyMap.js';
 import { transformInlineStyleString, transformParsedStyles, } from './style/transformInlineStyle.js';
 import hyphenateStyleName from 'hyphenate-style-name';
 export const __AppendElement = /*#__PURE__*/ (parent, child) => parent.appendChild(child);
 export const __ElementIsEqual = /*#__PURE__*/ (left, right) => left === right;
 export const __FirstElement = /*#__PURE__*/ (element) => element.firstElementChild;
-export const __GetChildren = /*#__PURE__*/ (element) => element.children;
+export const __GetChildren = /*#__PURE__*/ (element) => element.children ? [...element.children] : null;
 export const __GetParent = /*#__PURE__*/ (element) => element.parentElement;
 export const __InsertElementBefore = /*#__PURE__*/ (parent, child, ref) => parent.insertBefore(child, ref);
 export const __LastElement = /*#__PURE__*/ (element) => element.lastElementChild;
@@ -134,10 +134,33 @@ export const __SetInlineStyles = /*#__PURE__*/ (element, value) => {
     else {
         const { transformedStyle } = transformParsedStyles(Object.entries(value).map(([k, value]) => [
             hyphenateStyleName(k),
-            value,
+            value?.toString?.() ?? '',
         ]));
         const transformedStyleStr = transformedStyle.map(([property, value]) => `${property}:${value};`).join('');
         element.setAttribute('style', transformedStyleStr);
     }
 };
+export const __GetTemplateParts = (templateElement) => {
+    const isTemplate = templateElement.getAttribute(lynxElementTemplateMarkerAttribute)
+        !== null;
+    if (!isTemplate) {
+        return {};
+    }
+    const templateUniqueId = __GetElementUniqueID(templateElement);
+    const parts = {};
+    const partElements = templateElement.querySelectorAll(`[${lynxUniqueIdAttribute}="${templateUniqueId}"] [${lynxPartIdAttribute}]:not([${lynxUniqueIdAttribute}="${templateUniqueId}"] [${lynxElementTemplateMarkerAttribute}] [${lynxPartIdAttribute}])`);
+    for (const partElement of partElements) {
+        const partId = partElement.getAttribute(lynxPartIdAttribute);
+        if (partId) {
+            parts[partId] = partElement;
+        }
+    }
+    return parts;
+};
+export const __MarkTemplateElement = (element) => {
+    element.setAttribute(lynxElementTemplateMarkerAttribute, '');
+};
+export const __MarkPartElement = (element, partId) => {
+    element.setAttribute(lynxPartIdAttribute, partId);
+};
 //# sourceMappingURL=pureElementPAPIs.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.15.0",
-    "@lynx-js/web-style-transformer": "0.3.2"
+    "@lynx-js/web-constants": "0.15.2",
+    "@lynx-js/web-style-transformer": "0.3.3"
   }
 }