@lynx-js/web-core-server 0.13.3 → 0.13.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lynx-js/web-core-server
 
+## 0.13.4
+
+### Patch Changes
+
+- feat: support to dump ssrID ([#919](https://github.com/lynx-family/lynx-stack/pull/919))
+
 ## 0.13.3
 
 ### Patch Changes

package/dist/createLynxView.d.ts

@@ -3,7 +3,7 @@ interface LynxViewConfig extends Pick<StartMainThreadContextConfig, 'browserConf
     templateName?: string;
     hydrateUrl: string;
     injectStyles: string;
-    overrideElemenTemplates?: Record<string, ((attributes: Record<string, string>) => string) | string>;
+    overrideElementTemplates?: Record<string, ((attributes: Record<string, string>) => string) | string>;
     autoSize?: boolean;
     lynxViewStyle?: string;
 }

package/dist/createLynxView.js

@@ -1,9 +1,10 @@
-import { inShadowRootStyles, } from '@lynx-js/web-constants';
+import { inShadowRootStyles, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 import { prepareMainThreadAPIs } from '@lynx-js/web-mainthread-apis';
 import { loadTemplate } from './utils/loadTemplate.js';
-import { dumpHTMLString, OffscreenDocument, } from '@lynx-js/offscreen-document/webworker';
+import { _attributes, OffscreenDocument, OffscreenElement, } from '@lynx-js/offscreen-document/webworker';
 import { templateScrollView, templateXAudioTT, templateXImage, templateFilterImage, templateXInput, templateXList, templateXOverlayNg, templateXRefreshView, templateXSwiper, templateXText, templateInlineImage, templateXTextarea, templateXViewpageNg, } from '@lynx-js/web-elements-template';
+import { dumpHTMLString } from './dumpHTMLString.js';
 const builtinElementTemplates = {
     'scroll-view': templateScrollView,
     'x-audio-tt': templateXAudioTT,
@@ -27,8 +28,14 @@ const builtinTagTransformMap = {
     'list': 'x-list',
     'svg': 'x-svg',
 };
+// @ts-expect-error
+OffscreenElement.prototype.toJSON = function toJSON() {
+    return {
+        ssrID: this[_attributes].get(lynxUniqueIdAttribute),
+    };
+};
 export async function createLynxView(config) {
-    const { template: rawTemplate, browserConfig, tagMap, initData, globalProps, overrideElemenTemplates = {}, hydrateUrl, autoSize, injectStyles, lynxViewStyle, } = config;
+    const { template: rawTemplate, browserConfig, tagMap, initData, globalProps, overrideElementTemplates = {}, hydrateUrl, autoSize, injectStyles, lynxViewStyle, } = config;
     const template = await loadTemplate(rawTemplate, config.templateName);
     const { promise: firstPaintReadyPromise, resolve: firstPaintReady } = Promise
         .withResolvers();
@@ -59,20 +66,27 @@ export async function createLynxView(config) {
     });
     const elementTemplates = {
         ...builtinElementTemplates,
-        ...overrideElemenTemplates,
+        ...overrideElementTemplates,
     };
     async function renderToString() {
         await firstPaintReadyPromise;
-        const innerShadowRootHTML = dumpHTMLString(offscreenDocument, elementTemplates);
         const ssrEncodeData = runtime?.ssrEncode?.();
-        const encodeDataEncoded = ssrEncodeData ? encodeURI(ssrEncodeData) : ''; // to avoid XSS
-        return `
-    <lynx-view url="${hydrateUrl}" ssr ${autoSize ? 'height="auto" width="auto"' : ''} ${lynxViewStyle ? `style="${lynxViewStyle}"` : ''} ${encodeDataEncoded ? `ssr-encode-data="${encodeDataEncoded}"` : ''}>
-      <template shadowrootmode="open">
-        <style>${injectStyles}\n${inShadowRootStyles.join('\n')}</style>
-        ${innerShadowRootHTML}
-      </template>
-    </lynx-view>`;
+        const buffer = [];
+        buffer.push('<lynx-view url="', hydrateUrl, '" ssr');
+        if (autoSize) {
+            buffer.push(' height="auto" width="auto"');
+        }
+        if (lynxViewStyle) {
+            buffer.push(' style="', lynxViewStyle, '"');
+        }
+        if (ssrEncodeData) {
+            const encodeDataEncoded = ssrEncodeData ? encodeURI(ssrEncodeData) : ''; // to avoid XSS
+            buffer.push(' ssr-encode-data="', encodeDataEncoded, '"');
+        }
+        buffer.push('><template shadowrootmode="open">', '<style>', injectStyles, '\n', inShadowRootStyles.join('\n'), '</style>');
+        dumpHTMLString(buffer, offscreenDocument, elementTemplates);
+        buffer.push('</template>', '</lynx-view>');
+        return buffer.join('');
     }
     return {
         renderToString,

package/dist/dumpHTMLString.d.ts

@@ -0,0 +1,4 @@
+import { type OffscreenDocument } from '@lynx-js/offscreen-document/webworker';
+type ShadowrootTemplates = ((attributes: Record<string, string>) => string) | string;
+export declare function dumpHTMLString(buffer: string[], element: OffscreenDocument, shadowrootTemplates: Record<string, ShadowrootTemplates>): void;
+export {};

package/dist/dumpHTMLString.js

@@ -0,0 +1,38 @@
+import { _attributes, _children, innerHTML, } from '@lynx-js/offscreen-document/webworker';
+function getInnerHTMLImpl(buffer, element, shadowrootTemplates) {
+    const localName = element.localName;
+    buffer.push('<');
+    buffer.push(localName);
+    for (const [key, value] of element[_attributes]) {
+        buffer.push(' ');
+        buffer.push(key);
+        buffer.push('="');
+        buffer.push(value);
+        buffer.push('"');
+    }
+    buffer.push('>');
+    const templateImpl = shadowrootTemplates[localName];
+    if (templateImpl) {
+        const template = typeof templateImpl === 'function'
+            ? templateImpl(Object.fromEntries(element[_attributes].entries()))
+            : templateImpl;
+        buffer.push('<template shadowrootmode="open">', template, '</template>');
+    }
+    if (element[innerHTML]) {
+        buffer.push(element[innerHTML]);
+    }
+    else {
+        for (const child of element[_children]) {
+            getInnerHTMLImpl(buffer, child, shadowrootTemplates);
+        }
+    }
+    buffer.push('</');
+    buffer.push(localName);
+    buffer.push('>');
+}
+export function dumpHTMLString(buffer, element, shadowrootTemplates) {
+    for (const child of element[_children]) {
+        getInnerHTMLImpl(buffer, child, shadowrootTemplates);
+    }
+}
+//# sourceMappingURL=dumpHTMLString.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core-server",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "private": false,
   "description": "",
   "keywords": [],
@@ -22,10 +22,10 @@
     "README.md"
   ],
   "devDependencies": {
-    "@lynx-js/offscreen-document": "0.0.4",
-    "@lynx-js/web-constants": "0.13.3",
-    "@lynx-js/web-elements-template": "0.7.3",
-    "@lynx-js/web-mainthread-apis": "0.13.3",
-    "@lynx-js/web-worker-rpc": "0.13.3"
+    "@lynx-js/offscreen-document": "0.1.0",
+    "@lynx-js/web-constants": "0.13.4",
+    "@lynx-js/web-elements-template": "0.7.4",
+    "@lynx-js/web-mainthread-apis": "0.13.4",
+    "@lynx-js/web-worker-rpc": "0.13.4"
   }
 }