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

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @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
+
+- refactor: code clean ([#897](https://github.com/lynx-family/lynx-stack/pull/897))
+
+  rename many internal apis to make logic be clear:
+
+  multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime)
+  all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime)
+
+- feat: support to dump ssrEncode string ([#876](https://github.com/lynx-family/lynx-stack/pull/876))
+
+- perf: improve dom operation performance ([#881](https://github.com/lynx-family/lynx-stack/pull/881))
+
+  - code clean for offscreen-document, cut down inheritance levels
+  - add `appendChild` method for OffscreenElement, improve performance for append one node
+  - bypass some JS getter for dumping SSR string
+
+- feat: dump dehydrate string with shadow root template ([#838](https://github.com/lynx-family/lynx-stack/pull/838))
+
 ## 0.13.2
 
 ### Patch Changes

package/dist/createLynxView.d.ts

@@ -1,6 +1,11 @@
-import { type MainThreadStartConfigs } from '@lynx-js/web-constants';
-interface LynxViewConfig extends Pick<MainThreadStartConfigs, 'browserConfig' | 'tagMap' | 'initData' | 'globalProps' | 'template'> {
+import { type StartMainThreadContextConfig } from '@lynx-js/web-constants';
+interface LynxViewConfig extends Pick<StartMainThreadContextConfig, 'browserConfig' | 'tagMap' | 'initData' | 'globalProps' | 'template'> {
     templateName?: string;
+    hydrateUrl: string;
+    injectStyles: string;
+    overrideElementTemplates?: Record<string, ((attributes: Record<string, string>) => string) | string>;
+    autoSize?: boolean;
+    lynxViewStyle?: string;
 }
 export declare function createLynxView(config: LynxViewConfig): Promise<{
     renderToString: () => Promise<string>;

package/dist/createLynxView.js

@@ -1,33 +1,92 @@
-import { flushElementTreeEndpoint, mainThreadStartEndpoint, } from '@lynx-js/web-constants';
+import { inShadowRootStyles, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
-import { startMainThread } from '@lynx-js/web-worker-runtime';
+import { prepareMainThreadAPIs } from '@lynx-js/web-mainthread-apis';
 import { loadTemplate } from './utils/loadTemplate.js';
+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,
+    'x-image': templateXImage,
+    'filter-image': templateFilterImage,
+    'x-input': templateXInput,
+    'x-list': templateXList,
+    'x-overlay-ng': templateXOverlayNg,
+    'x-refresh-view': templateXRefreshView,
+    'x-swiper': templateXSwiper,
+    'x-text': templateXText,
+    'inline-image': templateInlineImage,
+    'x-textarea': templateXTextarea,
+    'x-viewpage-ng': templateXViewpageNg,
+};
+const builtinTagTransformMap = {
+    'page': 'div',
+    'view': 'x-view',
+    'text': 'x-text',
+    'image': 'x-image',
+    '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, } = config;
-    const mainToUIChannel = new MessageChannel();
-    const mainWithBackgroundChannel = new MessageChannel();
-    const mainToUIMessagePort = mainToUIChannel.port2;
-    const uiToMainRpc = new Rpc(mainToUIChannel.port1, 'main-to-ui');
-    const { docu: offscreenDocument } = startMainThread(mainToUIMessagePort, mainWithBackgroundChannel.port2);
+    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();
-    const template = await loadTemplate(rawTemplate, config.templateName);
-    const mainThreadStart = uiToMainRpc.createCall(mainThreadStartEndpoint);
-    mainThreadStart({
+    const mainWithBackgroundChannel = new MessageChannel();
+    const backgroundThreadRpc = new Rpc(mainWithBackgroundChannel.port1, 'background-thread');
+    const offscreenDocument = new OffscreenDocument({
+        onCommit: () => {
+        },
+    });
+    const { startMainThread } = prepareMainThreadAPIs(backgroundThreadRpc, offscreenDocument, offscreenDocument.createElement.bind(offscreenDocument), () => {
+        firstPaintReady();
+    }, () => {
+        // mark timing
+    }, () => {
+        // report error
+    });
+    const runtime = await startMainThread({
         template,
         initData,
         globalProps,
         browserConfig,
         nativeModulesMap: {}, // the bts won't start
         napiModulesMap: {}, // the bts won't start
-        tagMap,
-    });
-    uiToMainRpc.registerHandler(flushElementTreeEndpoint, () => {
-        firstPaintReady();
+        tagMap: {
+            ...builtinTagTransformMap,
+            ...tagMap,
+        },
     });
+    const elementTemplates = {
+        ...builtinElementTemplates,
+        ...overrideElementTemplates,
+    };
     async function renderToString() {
         await firstPaintReadyPromise;
-        return offscreenDocument.innerHTML;
+        const ssrEncodeData = runtime?.ssrEncode?.();
+        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.2",
+  "version": "0.13.4",
   "private": false,
   "description": "",
   "keywords": [],
@@ -22,8 +22,10 @@
     "README.md"
   ],
   "devDependencies": {
-    "@lynx-js/web-constants": "0.13.2",
-    "@lynx-js/web-worker-rpc": "0.13.2",
-    "@lynx-js/web-worker-runtime": "0.13.2"
+    "@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"
   }
 }